:root { --ink: #141517; --sub: #55585c; --paper: #fefefe; --red: #b8222a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow: hidden; background: var(--paper); color: var(--ink); font-family: 'Poppins', 'Noto Sans KR', sans-serif; }
button { font: inherit; color: inherit; }

.stage { position: absolute; left: 50%; top: 50%; background: var(--paper); overflow: hidden; transform: translate(-50%, -50%) scale(var(--s, 1)); }
.stage--pc { width: 1440px; height: 900px; }
.stage--mobile { width: 390px; height: 844px; display: none; }
.is-mobile .stage--pc { display: none; }
.is-mobile .stage--mobile { display: block; }

.deco { position: absolute; pointer-events: none; overflow: visible; }
/* 사과 위 + 표시: 흰 바탕에선 검게, 어두운 곳에선 밝게 */
.deco--invert { mix-blend-mode: difference; }

/* 사과 + 글리치 */
.apple { position: absolute; aspect-ratio: 1312 / 1199; }
.apple img { display: block; width: 100%; height: auto; }
.apple__mono { position: absolute; inset: 0; }
.apple__glitch { position: absolute; inset: 0; clip-path: inset(12% 12% 48% 50%); isolation: isolate; background: var(--paper); }
.apple__glitch > div { position: absolute; inset: 0; isolation: isolate; }
.apple__glitch img { mix-blend-mode: multiply; }
.apple__glitch .r { background: #ff0000; }
.apple__glitch .c { background: #00ffff; mix-blend-mode: screen; }
.apple__slice { position: absolute; left: 0; top: 0; width: 100%; background: var(--paper); }
.apple__slice[hidden] { display: none; }

/* 메뉴 라벨 */
.hud-label { position: absolute; min-height: 44px; display: flex; flex-direction: column; gap: 3px; padding: 4px 0 0; border: 0; background: none; color: var(--ink); text-align: left; white-space: nowrap; cursor: pointer; }
.hud-label b { font-size: 12px; letter-spacing: .14em; font-weight: 700; }
.hud-label small { font-size: 9px; letter-spacing: .12em; color: var(--sub); }
.hud-label.is-locked { cursor: default; }
.hud-label > b, .hud-label > small { transition: transform .15s ease; }
.hud-num { transition: color .15s ease; }
/* Poppins 숫자는 폭이 제각각이라 칸을 고정해 [01] [00] 대괄호 간격을 맞춘다 */
.hud-digit { display: inline-block; width: .66em; margin-right: .14em; letter-spacing: 0; text-align: center; }
/* [00] 자리의 ∞: 숫자 두 칸과 같은 폭 */
.hud-glyph { display: inline-flex; justify-content: center; width: 1.46em; margin-right: .14em; vertical-align: -.28em; }
.hud-glyph svg { width: 1.3em; height: 1.3em; margin-block: -.15em; overflow: visible; }
.hud-label:not(.is-locked):hover > b, .hud-label:not(.is-locked):hover > small,
.hud-label:not(.is-locked):focus-visible > b, .hud-label:not(.is-locked):focus-visible > small { transform: translateX(4px); }
.hud-label:not(.is-locked):hover .hud-num, .hud-label:not(.is-locked):focus-visible .hud-num { color: var(--red); }
.hud-label.is-red { color: var(--red); }
.hud-label:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.stage--mobile .hud-label { padding: 0; justify-content: center; }
.stage--mobile .hud-label.is-right { align-items: flex-end; text-align: right; }

/* MUTUALLY ASSURED DESTRUCTION → love */
.mad-title { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }
.mad-title > span { letter-spacing: .24em; color: var(--ink); }
.mad-title .strike { position: relative; display: inline-block; }
.mad-title del { text-decoration: none; color: var(--sub); }
.mad-title .strike i { position: absolute; left: -4px; right: -2px; top: 50%; height: 2px; background: var(--red); transform: rotate(-9deg); }
.mad-title ins { position: absolute; text-decoration: none; font-family: 'Caveat', cursive; font-weight: 600; letter-spacing: 0; color: var(--red); transform: rotate(-6deg); white-space: nowrap; }
.stage--pc .mad-title { top: 52px; }
.stage--pc .mad-title > span { font-size: 11px; }
.stage--pc .mad-title ins { left: 36px; top: 8px; font-size: 30px; }
.stage--mobile .mad-title { top: 60px; }
.stage--mobile .mad-title > span { font-size: 9px; letter-spacing: .18em; }
.stage--mobile .mad-title .strike i { left: -3px; }
.stage--mobile .mad-title ins { left: 26px; top: 6px; font-size: 26px; }

/* 창 */
.win { position: absolute; width: 300px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.win[hidden] { display: none; }
.win__bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--ink); font-size: 10px; letter-spacing: .16em; }
.win__bar span + span { margin-right: -.16em; color: var(--sub); }
.win__bar.is-red { color: var(--red); }
.win__heart { display: inline-block; margin-right: .6em; vertical-align: -1px; }
.win__text { margin: 0; padding: 12px 12px 14px; font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 12px; line-height: 1.85; white-space: pre-line; min-height: 40px; }
.notice-tag { display: inline-block; width: 44px; font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 9px; letter-spacing: .12em; color: var(--sub); }
.notice-gap { display: inline-block; width: .7em; }
.caret { display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--red); }
.caret[hidden] { display: none; }
.caret.is-blink { animation: caret-blink 1s steps(1, end) infinite; }
@keyframes caret-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* 스크롤바(9px)는 오른쪽 여백 12px 안에 들어간다 */
.win__scroll { max-height: 360px; overflow-x: hidden; overflow-y: auto; padding: 12px 3px 12px 12px; display: flex; flex-direction: column; gap: 10px; font-family: 'Poppins', 'Noto Sans KR', sans-serif; }
.care-note { margin: 0; font-size: 11px; color: var(--sub); }
.care-entry { display: flex; flex-direction: column; gap: 1px; }
.care-entry b { font-size: 11px; letter-spacing: .08em; }
.care-entry span { padding-left: 12px; font-size: 12px; }
.win__scroll::-webkit-scrollbar { width: 9px; }
.win__scroll::-webkit-scrollbar-track { background: transparent; margin-block: 6px; }
.win__scroll::-webkit-scrollbar-thumb { background: #b9bcc0; background-clip: padding-box; border: 3px solid transparent; }
.win__scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) { .win__scroll { scrollbar-width: thin; scrollbar-color: #b9bcc0 transparent; } }
.win__scroll--banner { max-height: none; overflow: visible; padding-right: 12px; align-items: flex-start; gap: 8px; font-family: inherit; }
.win__scroll--banner img { display: block; width: 200px; height: 40px; object-fit: cover; }
.win__scroll--banner a { display: block; width: 200px; height: 40px; }
.win__scroll--banner a:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.banner-head { margin-top: 6px; font-size: 10px; letter-spacing: .16em; font-weight: 700; }

/* LIST·BANNER 창이 뜰 때 치직 */
.win.is-glitching { animation: win-glitch-in .2s steps(1, end) both; }
@keyframes win-glitch-in {
  0% { opacity: 0; clip-path: inset(0 -8px 100% -8px); transform: translateX(-6px); }
  12% { opacity: 1; clip-path: inset(8% -8px 62% -8px); transform: translateX(6px); box-shadow: -3px 0 0 #ff0000, 3px 0 0 #00ffff, 4px 4px 0 var(--ink); }
  26% { clip-path: inset(54% -8px 18% -8px); transform: translateX(-4px); }
  40% { opacity: .5; clip-path: inset(0 -8px 46% -8px); transform: translateX(3px); box-shadow: 3px 0 0 #ff0000, -3px 0 0 #00ffff, 4px 4px 0 var(--ink); }
  56% { opacity: 1; clip-path: inset(28% -8px -8px -8px); transform: translateX(-2px); }
  72% { clip-path: inset(0 -8px -8px -8px); transform: translateX(1px); box-shadow: 4px 4px 0 var(--ink); }
  100% { clip-path: inset(0 -8px -8px -8px); transform: none; box-shadow: 4px 4px 0 var(--ink); }
}
.scrim { position: absolute; inset: 0; z-index: 4; border: 0; padding: 0; background: rgba(254, 254, 254, .55); cursor: pointer; }
.scrim[hidden] { display: none; }

/* 플레이어 */
.player { position: absolute; font-family: 'Poppins', 'Noto Sans KR', sans-serif; }
.stage--pc .player { left: 530px; bottom: 28px; width: 380px; }
.stage--mobile .player { left: 24px; right: 24px; bottom: 45px; }
.player__meta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.player__title { font-size: 14px; font-weight: 700; color: #1c1c1e; }
.player__artist { font-size: 11px; color: #6b6e72; }
.player__time { display: flex; align-items: center; gap: 22px; margin-top: 14px; font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 10px; color: var(--sub); }
.stage--mobile .player__time { gap: 16px; font-family: 'Poppins', 'Noto Sans KR', sans-serif; }
/* 숫자 폭이 바뀌어도 막대가 안 흔들리게 시간 칸 폭 고정 */
.player__time > span { flex: none; width: 30px; font-variant-numeric: tabular-nums; }
.player__time > span:last-child { text-align: right; }
.player__bar { position: relative; flex: 1; height: 11px; padding: 0; border: 0; background: none; cursor: pointer; }
.player__bar::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: #b9bcc0; }
.player__bar i { position: absolute; left: 0; top: 0; width: 3px; height: 11px; background: var(--red); will-change: transform; }
.player__controls { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; }
.stage--mobile .player__controls { gap: 12px; margin-top: 6px; }
.player__controls button { width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: #2a2b2e; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stage--mobile .player__controls button { width: 48px; height: 48px; }
.stage--mobile .player__controls svg { width: 20px; height: 20px; }
.player__controls button:focus-visible, .player__bar:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.player [data-icon-pause] { display: none; }
.player.is-playing [data-icon-play] { display: none; }
.player.is-playing [data-icon-pause] { display: block; }
#youtube-player { position: fixed; left: -10000px; top: -10000px; width: 200px; height: 200px; }

@media (prefers-reduced-motion: reduce) {
  .caret.is-blink { animation: none; }
  .hud-label > b, .hud-label > small, .hud-num { transition: none; }
  .win.is-glitching { animation: none; }
}