/* 메인 첫 화면 [dgb_hero] — 테마 글꼴·여백이 덮어쓰지 못하게 범위를 좁히고 필요한 곳에 !important */
/* 스크립트가 돌기 전에도 화면 끝까지 (스크롤바 폭 때문에 생기는 가로 스크롤은 잘라냄) */
html:has(.dgb-hero) { overflow-x: clip; }
.dgb-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.dgb-hero {
	--dgb-hero-glow: #f5c542;
	position: relative; isolation: isolate; overflow: hidden;
	width: 100%; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px;
	background: #07080b; color: #f4f4f4;
	font-family: "Noto Sans", "Noto Sans KR", system-ui, sans-serif;
}
.dgb-hero video.dgb-hero-bg,
.dgb-hero canvas.dgb-hero-warp {
	position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; z-index: -3; display: block; margin: 0 !important;
}
.dgb-hero canvas.dgb-hero-warp { z-index: -2; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.dgb-hero.gl-on canvas.dgb-hero-warp { opacity: 1; }
.dgb-hero.gl-on video.dgb-hero-bg { opacity: 0; }

.dgb-hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
	background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(245, 197, 66, .13), rgba(245, 197, 66, .04) 40%, transparent 70%);
	mix-blend-mode: screen; }
.dgb-hero.lit .dgb-hero-glow { opacity: 1; }
.dgb-hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(to top, rgba(7, 8, 11, .92) 0%, rgba(7, 8, 11, .45) 34%, rgba(7, 8, 11, 0) 60%),
		linear-gradient(to right, rgba(7, 8, 11, .55) 0%, rgba(7, 8, 11, 0) 55%); }

.dgb-hero-copy {
	position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
	padding: 0 32px clamp(56px, 11vh, 120px);
	display: grid; gap: 22px; max-width: 920px; box-sizing: border-box;
}
.dgb-hero .dgb-hero-eyebrow {
	margin: 0 !important; padding: 0 !important; line-height: 1 !important;
	font-size: 12px !important; font-weight: 700 !important; letter-spacing: .26em !important; text-transform: uppercase !important;
	color: var(--dgb-hero-glow) !important;
}
.dgb-hero h1.dgb-hero-title {
	margin: 0 !important; padding: 0 !important;
	font-family: "Noto Sans", "Noto Sans KR", system-ui, sans-serif !important;
	font-size: clamp(44px, 7.4vw, 108px) !important; line-height: .98 !important; font-weight: 700 !important;
	letter-spacing: -.035em !important; color: #fff !important; text-transform: none !important; text-wrap: balance;
}
.dgb-hero ul.dgb-hero-services { margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dgb-hero ul.dgb-hero-services li {
	margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important;
	display: flex; align-items: center; gap: 18px;
	font-size: 15px !important; line-height: 1.5 !important; color: rgba(244, 244, 244, .7) !important;
}
.dgb-hero ul.dgb-hero-services li::before { display: none; }
.dgb-hero ul.dgb-hero-services li + li::before { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--dgb-hero-glow); opacity: .8; }
.dgb-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.dgb-hero .dgb-hero-btn {
	display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;
	min-height: 50px; padding: 0 24px !important; margin: 0 !important; border-radius: 999px !important;
	font-family: "Noto Sans", system-ui, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .01em !important;
	text-decoration: none !important; text-transform: none !important; cursor: pointer; border: 0;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dgb-hero .dgb-hero-btn:active { transform: scale(.97); }
.dgb-hero .dgb-hero-play { background: var(--dgb-hero-glow) !important; color: #111 !important; box-shadow: 0 8px 30px rgba(245, 197, 66, .28); }
.dgb-hero .dgb-hero-play:hover { background: #ffd65c !important; }
.dgb-hero .dgb-hero-play svg { width: 12px; height: 14px; }
.dgb-hero .dgb-hero-ghost { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .28) !important; color: #f4f4f4 !important;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dgb-hero .dgb-hero-ghost:hover { border-color: #f4f4f4 !important; }
.dgb-hero .dgb-hero-btn:focus-visible { outline: 2px solid var(--dgb-hero-glow); outline-offset: 3px; }

.dgb-hero-cue { position: absolute; z-index: 2; right: 32px; bottom: clamp(56px, 11vh, 120px); display: flex; align-items: center; gap: 12px;
	font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(244, 244, 244, .6); writing-mode: vertical-rl; }
.dgb-hero-cue i { display: block; width: 1px; height: 56px; background: linear-gradient(#f4f4f4, transparent); animation: dgbHeroCue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes dgbHeroCue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 글이 한 줄씩 떠오름 (스크립트 없이도 동작, 동작 줄이기 설정이면 바로 표시) */
@media (prefers-reduced-motion: no-preference) {
	.dgb-hero-copy > * { animation: dgbHeroIn .9s cubic-bezier(.2, .7, .2, 1) both; }
	.dgb-hero-copy > :nth-child(1) { animation-delay: .15s; }
	.dgb-hero-copy > :nth-child(2) { animation-delay: .23s; }
	.dgb-hero-copy > :nth-child(3) { animation-delay: .31s; }
	.dgb-hero-copy > :nth-child(4) { animation-delay: .39s; }
	@keyframes dgbHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .dgb-hero-cue i { animation: none; } }

/* 쇼릴 팝업 */
.dgb-hero-modal[hidden] { display: none !important; }
.dgb-hero-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; background: rgba(4, 5, 7, .94); }
.dgb-hero-frame { position: relative; width: min(1280px, 100%, calc(82vh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.dgb-hero-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dgb-hero-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .2) !important; background: rgba(255, 255, 255, .06) !important; color: #fff !important; font-size: 22px; line-height: 1; padding: 0 !important; }

@media (max-width: 767px) {
	/* 모바일은 상단 바(약 60px)가 화면 위에 따로 있으므로 그만큼 뺀다 */
	.dgb-hero { height: calc(100vh - 60px); height: calc(100svh - 60px); min-height: 480px; }
	.dgb-hero-copy { padding: 0 20px 56px; gap: 18px; }
	.dgb-hero h1.dgb-hero-title { font-size: clamp(40px, 12vw, 60px) !important; }
	.dgb-hero ul.dgb-hero-services { gap: 4px 12px; }
	.dgb-hero ul.dgb-hero-services li { font-size: 13px !important; gap: 12px; }
	.dgb-hero .dgb-hero-btn { min-height: 48px; padding: 0 20px !important; font-size: 14px !important; }
	.dgb-hero-cue { display: none; }
	.dgb-hero-shade { background: linear-gradient(to top, rgba(7, 8, 11, .95) 0%, rgba(7, 8, 11, .55) 45%, rgba(7, 8, 11, .1) 75%); }
}