/* Original Comfortaa 3.001 files; copyright and OFL 1.1 in fonts/comfortaa/OFL.txt. */
@font-face {
  font-family: "Comfortaa"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("./fonts/comfortaa/Comfortaa-Light.ttf") format("truetype");
  unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
  font-family: "Comfortaa"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/comfortaa/Comfortaa-Regular.ttf") format("truetype");
  unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
  font-family: "Comfortaa"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/comfortaa/Comfortaa-Bold.ttf") format("truetype");
  unicode-range: U+0000-024F, U+2000-206F;
}
:root { color-scheme: dark; font-family: "Comfortaa", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; background: #080a12; color: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a, input { touch-action: manipulation; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #d9ecff; outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.teaser { position: relative; min-height: 100svh; height: 100dvh; overflow: hidden; isolation: isolate; background: #080a12; }
.teaser__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.teaser__video::-webkit-media-controls { display: none !important; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(4,6,13,.86), transparent 32%, transparent 82%, rgba(4,6,13,.12)); }
.start-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 1; background: radial-gradient(ellipse at center, rgba(4,6,13,.06) 18%, rgba(4,6,13,.55) 70%, rgba(4,6,13,.94) 100%); transition: opacity .8s ease; }
.teaser.has-playback .start-vignette { opacity: 0; }
.start-gate { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; pointer-events: none; }
.start-gate > * { pointer-events: auto; }
.start-button { display: block; width: clamp(240px, 24vw, 340px); max-width: calc(100vw - 56px); padding: 0; border: 0; background: transparent; line-height: 0; }
.start-button img { display: block; width: 100%; height: auto; }
.media-message { max-width: calc(100vw - 40px); margin: 0; text-align: center; font-size: 13px; text-shadow: 0 1px 8px #000; }
.official-link { color: #fff; font-size: 13px; text-underline-offset: 5px; }
.release { --release-logo-width: clamp(210px, 25vw, 340px); position: absolute; bottom: max(34px, calc(env(safe-area-inset-bottom) + 20px)); left: 50%; transform: translateX(-50%); width: min(960px, calc(100% - 32px)); text-align: center; text-shadow: 0 2px 18px #0008; pointer-events: none; }
.release__logo { display: block; width: var(--release-logo-width); max-width: 100%; height: auto; margin: 20px auto 0; filter: none; border: 0; box-shadow: none; }
/* The unchanged PNG's main artwork (alpha > 16) starts 137px down at its 2170px native width.
   Compensate its transparent top padding so timer labels sit 8px from the artwork. */
.release--counting .release__logo, .release--scrambling .release__logo { margin-top: calc(8px - var(--release-logo-width) * 0.06313364); }
.release__status { margin: 0; font-size: clamp(32px, 5.2vw, 68px); font-weight: 400; letter-spacing: .05em; line-height: 1.3; }
.release--counting .release__status { font-size: 11px; color: #c9cedb; letter-spacing: .15em; margin-bottom: 12px; }
.release__copyright { margin: 14px 0 0; color: #fff; font-size: 10px; font-weight: 400; line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere; }
.countdown { display: flex; justify-content: center; align-items: flex-start; gap: clamp(4px, 1.4vw, 20px); }
.countdown div { display: flex; flex-direction: column; min-width: 2ch; }
.countdown span { font-family: "Comfortaa", ui-monospace, "Consolas", monospace; font-size: clamp(40px, 8vw, 116px); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown small { margin-top: 8px; font-size: 10px; color: #c9cedb; letter-spacing: .1em; }
.countdown b { font-size: clamp(24px, 5.5vw, 76px); font-weight: 300; color: #b9c0d2; line-height: 1.4; }
.scramble { font-family: "Comfortaa", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif; font-variant-numeric: tabular-nums; }
.scramble__top { display: flex; justify-content: center; align-items: baseline; width: max-content; max-width: 100%; margin: 0 auto; font-size: clamp(40px, 8vw, 116px); font-weight: 300; line-height: 1.1; }
.scramble-pair { display: inline-flex; white-space: nowrap; }
.scramble-digit { display: inline-block; flex: 0 0 .72em; width: .72em; text-align: center; }
.scramble-separator { display: inline-block; flex: 0 0 .26em; width: .26em; text-align: center; color: #d3d9e7; }
.scramble__bottom { display: flex; justify-content: center; align-items: baseline; gap: clamp(8px, 1.4vw, 18px); margin-top: 12px; font-size: clamp(13px, 2vw, 24px); font-weight: 400; line-height: 1.5; white-space: nowrap; }
.scramble-date-pair { display: inline-flex; align-items: baseline; gap: 3px; }
.menu-button { position: absolute; z-index: 3; top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff38; border-radius: 50%; background: #000000; backdrop-filter: blur(12px); }
.menu-button:hover, .menu-button[aria-expanded="true"] { background: #000000; }
.menu-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.settings-panel { position: absolute; z-index: 3; top: max(76px, calc(env(safe-area-inset-top) + 56px)); left: max(20px, env(safe-area-inset-left)); width: min(240px, calc(100% - 40px)); padding: 20px; border: 1px solid #ffffff26; border-radius: 14px; background: #000000; backdrop-filter: blur(20px); box-shadow: 0 10px 32px #0004; }
.volume-label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
#volume-value { color: #d5ddeb; font-size: 12px; font-variant-numeric: tabular-nums; }
#volume { display: block; width: 100%; height: 32px; margin: 8px 0 0; accent-color: #e1e9ff; cursor: pointer; }
.settings-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #ffffff1c; font-size: 11px; color: #c4ccdb; }
.schedule-note { margin: 12px 0 0; color: #c4ccdb; font-size: 11px; line-height: 1.6; word-break: keep-all; }
.noscript-message { position: absolute; top: 20px; left: 20px; right: 20px; text-align: center; padding: 16px; background: #080a12; }
.noscript-message a { color: #fff; }
@media (min-aspect-ratio: 4/5) {
  .teaser.is-counting .start-gate, .teaser.is-scrambling .start-gate { padding-bottom: clamp(180px, 30vh, 360px); }
}
@media (max-aspect-ratio: 4/5) {
  .teaser__video { object-fit: contain; }
  .shade { background: linear-gradient(0deg, #080a12 4%, transparent 40%); }
  .release { bottom: max(44px, calc(env(safe-area-inset-bottom) + 24px)); }
}
@media (max-width: 600px) {
  .release { bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); }
  .release__copyright { font-size: 9px; }
  .menu-button { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
  .settings-panel { left: max(16px, env(safe-area-inset-left)); top: max(72px, calc(env(safe-area-inset-top) + 56px)); }
}
@media (prefers-reduced-motion: reduce) {
  .start-vignette { transition: none; }
}
@media (max-height: 450px) and (min-aspect-ratio: 4/5) {
  .release { --release-logo-width: 174px; bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); }
  .release__logo { margin-top: 14px; }
  .release__copyright { margin-top: 10px; font-size: 8px; }
  .release__status { font-size: 32px; }
  .release--counting .release__status { font-size: 11px; }
  .countdown span { font-size: 54px; }
  .scramble__top { font-size: 54px; }
  .scramble__bottom { font-size: 14px; margin-top: 7px; }
  .countdown b { font-size: 36px; }
  .countdown small { margin-top: 2px; }
  .countdown { gap: 7px; }
  .release--counting .release__status { margin-bottom: 4px; }
  .start-gate, .teaser.is-counting .start-gate, .teaser.is-scrambling .start-gate { padding-bottom: 200px; }
}

/* Fine pointers fade the idle menu; touch and keyboard access remain solid. */
.menu-button { opacity: 1; transition: opacity .18s ease; }
.teaser.has-fine-pointer .menu-button { opacity: .45; }
.teaser.has-fine-pointer .menu-button.is-pointer-near,
.teaser.has-fine-pointer .menu-button:hover,
.teaser.has-fine-pointer .menu-button:focus-visible,
.teaser.has-fine-pointer .menu-button[aria-expanded="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .menu-button { transition: none; }
}