/* Dean Live — DESIGN.md 토큰만 사용. 새 값 발명 금지. */

/* ===== 폰트 (자체 호스팅, OFL 1.1) ===== */
@font-face{
  font-family:'Instrument Serif';
  src:url('./fonts/instrumentserif.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Bebas Neue';
  src:url('./fonts/bebasneue.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ===== 토큰 ===== */
:root{
  /* 색 */
  --bg:#0B0B0F; --surface:#16161C; --surface-2:#1E1E26;
  --border:#26262F; --border-str:#35353F;
  --text:#EDEDF0; --text-dim:#9A9AA6;
  --accent:#FFC53D; --accent-fg:#0B0B0F;
  --danger:#E5484D; --success:#30A46C;

  /* 간격 — 4px 그리드 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* 타입 */
  --t-xs:.8125rem; --t-sm:.875rem; --t-md:1rem;
  --t-lg:1.25rem; --t-xl:1.5rem; --t-2xl:2rem;
  --d-1:clamp(2.5rem,7vw,4.5rem);
  --d-2:clamp(1.75rem,4vw,2.5rem);

  /* 한글·태국어 글리프를 포함하도록 확장. 라틴 외 문자는 시스템 폰트가 받는다. */
  --font-body:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard',
              'Segoe UI','Malgun Gothic',Roboto,'Noto Sans KR',
              'Noto Sans Thai',Thonburi,'Leelawadee UI',sans-serif;
  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-label:'Bebas Neue','Oswald',Impact,sans-serif;

  /* 모양 */
  --r-sm:6px; --r-md:12px; --r-full:9999px;
  --max:1120px; --max-prose:720px;
}

/* ===== 리셋 ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--t-md); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure{margin:0}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}

/* 태국어는 성조부호가 위아래로 쌓여 기본 행간이면 줄이 붙는다. */
:lang(th){line-height:1.8}
:lang(th) .display-1,:lang(th) .display-2{line-height:1.2}

/* ===== 언어 선택 ===== */
.lang{
  height:36px; padding-inline:var(--s2) var(--s3);
  background:transparent; color:var(--text-dim);
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:var(--t-sm); cursor:pointer;
  transition:color 120ms ease,border-color 120ms ease;
}
.lang:hover{color:var(--text); border-color:var(--border-str)}
.lang option{background:var(--surface); color:var(--text)}

/* ===== 유틸 ===== */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--s4)}
@media(min-width:768px){ .wrap{padding-inline:var(--s5)} }
.prose{max-width:var(--max-prose)}
.dim{color:var(--text-dim)}
.stack{display:flex; flex-direction:column}
.stack.g1{gap:var(--s1)} .stack.g2{gap:var(--s2)} .stack.g3{gap:var(--s3)}
.stack.g4{gap:var(--s4)} .stack.g5{gap:var(--s5)}
.row-x{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* 헤딩 — 디스플레이 서체, 문장 케이스, 굵기 400 */
.display-1{font-family:var(--font-display); font-size:var(--d-1); font-weight:400; line-height:1.05; letter-spacing:-.01em}
.display-2{font-family:var(--font-display); font-size:var(--d-2); font-weight:400; line-height:1.15}
/* 강조는 색으로만. 한글엔 진짜 이탤릭이 없어 합성 기울임이 생기므로 금지.
   이탤릭은 라틴 전용(.wordmark em)에서만 쓴다. */
.display-1 em,.display-2 em{font-style:normal; color:var(--accent)}
.display-1 em:lang(en),.display-2 em:lang(en){font-style:italic}

/* 사용자 입력 문자열(닉네임 등)은 디스플레이 서체에 넣지 않는다.
   한글은 세리프 폴백이라 라틴 닉네임만 세리프로 튀어 한 줄에서 서체가 갈라짐. */
.display-1 .user-str,.display-2 .user-str{font-family:var(--font-body); font-weight:600}

/* eyebrow 라벨 — Bebas Neue(대문자 전용 서체), 짧은 라벨/숫자에만 */
.eyebrow{
  font-family:var(--font-label); font-size:var(--t-xs);
  letter-spacing:.08em; color:var(--text-dim); line-height:1;
}

/* ===== 네비 ===== */
.nav{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-in{
  max-width:var(--max); margin-inline:auto;
  padding:var(--s3) var(--s4);
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3) var(--s5);
}
.wordmark{
  font-family:var(--font-display); font-size:var(--t-lg);
  font-weight:400; line-height:1; letter-spacing:-.01em; white-space:nowrap;
}
.wordmark em{font-style:italic; color:var(--accent)}
.nav-links a{color:var(--text-dim); transition:color 120ms ease; white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav .spacer{flex:1}

/* 모바일: 링크를 숨기지 않고 둘째 줄에 가로 스크롤로 둔다.
   (햄버거 없이 링크만 감추면 모바일에서 다른 페이지로 갈 방법이 사라짐) */
.wordmark{order:1}
.nav .spacer{order:2}
.nav-in > .lang,.nav-in > .btn{order:3}
.nav-links{
  order:4; width:100%; display:flex; gap:var(--s4);
  font-size:var(--t-sm); overflow-x:auto; scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none}
@media(min-width:768px){
  .nav-in{padding:var(--s3) var(--s5); flex-wrap:nowrap}
  .nav-links{order:2; width:auto; gap:var(--s5); overflow:visible}
  .nav .spacer{order:3}
  .nav-in > .lang,.nav-in > .btn{order:4}
}

/* ===== 버튼 ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  height:36px; padding-inline:var(--s4);
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:transparent; color:var(--text);
  font-size:var(--t-sm); font-weight:600; white-space:nowrap; cursor:pointer;
  transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease;
}
.btn:hover{background:var(--surface-2); border-color:var(--border-str)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-fg)}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); opacity:.88}
.btn-lg{height:44px; padding-inline:var(--s5); font-size:var(--t-md)}
.btn svg{width:16px; height:16px; flex:none}

/* ===== 카드 / 면 ===== */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--s5);
}
.grid{display:grid; gap:var(--s4)}
@media(min-width:640px){ .grid.c2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:768px){ .grid.c3{grid-template-columns:repeat(3,1fr)} }

/* ===== 섹션 ===== */
.section{padding-block:var(--s7)}
@media(min-width:768px){ .section{padding-block:var(--s8)} }
.section + .section{border-top:1px solid var(--border)}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s5);
}
.section-head .more{
  font-size:var(--t-sm); color:var(--text-dim);
  transition:color 120ms ease; white-space:nowrap;
}
.section-head .more:hover{color:var(--accent)}

/* ===== 히어로 ===== */
.hero{padding-block:var(--s8) var(--s7)}
@media(min-width:768px){ .hero{padding-block:96px var(--s8)} }
.hero .lead{font-size:var(--t-lg); color:var(--text-dim); max-width:56ch; margin-top:var(--s5)}
.hero .cta{margin-top:var(--s6)}

/* 라이브 상태 pill */
.status{
  display:inline-flex; align-items:center; gap:var(--s2);
  height:28px; padding-inline:var(--s3);
  border:1px solid var(--border); border-radius:var(--r-full);
  font-size:var(--t-xs); color:var(--text-dim); margin-bottom:var(--s5);
}
.status .dot{width:6px; height:6px; border-radius:var(--r-full); background:var(--text-dim); flex:none}
.status[data-live="on"]{border-color:var(--border-str); color:var(--text)}
.status[data-live="on"] .dot{background:var(--accent)}

/* 준비중 pill — 조용하게 */
.soon{
  display:inline-flex; align-items:center; height:20px; padding-inline:var(--s2);
  border:1px solid var(--border); border-radius:var(--r-full);
  font-size:var(--t-xs); color:var(--text-dim); line-height:1;
}

/* ===== 랭크 (명예의전당) ===== */
.rank{display:flex; align-items:baseline; gap:var(--s4)}
.rank .n{
  font-family:var(--font-label); font-size:var(--t-2xl);
  color:var(--accent); line-height:1; min-width:2ch;
}
.rank .who{font-size:var(--t-md); font-weight:600}
.rank .meta{font-size:var(--t-sm); color:var(--text-dim)}

/* ===== 리스트형 항목 (카드 남발 대신 선으로) ===== */
.list{border-top:1px solid var(--border)}
.list > li{
  list-style:none; border-bottom:1px solid var(--border);
  padding-block:var(--s5);
  display:grid; gap:var(--s2);
}
.list{margin:0; padding:0}
.list .t{display:flex; align-items:center; gap:var(--s3); font-size:var(--t-lg); font-weight:600}
.list .d{color:var(--text-dim); font-size:var(--t-sm); max-width:64ch}

/* ===== 폼 ===== */
.field{
  width:100%; height:44px; padding-inline:var(--s3);
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-sm);
  transition:border-color 120ms ease;
}
.field:focus{outline:none; border-color:var(--accent)}

/* ===== 푸터 ===== */
.footer{
  border-top:1px solid var(--border);
  padding-block:var(--s6);
  color:var(--text-dim); font-size:var(--t-sm);
}

/* hidden 계약 유지 — 인라인 display 가 [hidden] 을 이기는 문제 차단 */
[hidden]{display:none !important}

/* ===== 오버레이 (OBS) — DESIGN.md §7 예외 ===== */
body.overlay{background:transparent}
.overlay-root{position:fixed; inset:0; pointer-events:none}
.banner{
  position:absolute;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  border:1px solid var(--border-str); border-radius:var(--r-md);
  padding:var(--s4) var(--s5);
  box-shadow:0 8px 32px rgb(0 0 0 / .45);
  backdrop-filter:blur(8px);
}
.banner .k{
  font-family:var(--font-label); font-size:var(--t-xs);
  letter-spacing:.08em; color:var(--text-dim); line-height:1; margin-bottom:var(--s2);
}
.banner > div:not(.k){font-size:var(--t-lg); font-weight:600; line-height:1.3}
#scene{top:var(--s5); left:var(--s5)}
#scene #scene-label{color:var(--accent)}
#mvp{top:var(--s5); right:var(--s5); text-align:right}
#mvp .k:not(:first-child){margin-top:var(--s4)}
#coinwall{bottom:var(--s5); left:var(--s5); min-width:320px; max-width:420px}
#coinwall .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  padding-block:var(--s1); font-size:var(--t-md); font-weight:400;
}
#coinwall .row .amt{font-family:var(--font-label); font-size:var(--t-lg); color:var(--accent); line-height:1}
#songs{bottom:var(--s5); right:var(--s5); max-width:320px}
#songs > div:not(.k){font-size:var(--t-sm); font-weight:400}

.pop{animation:pop 400ms ease}
@keyframes pop{from{transform:translateY(4px); opacity:0} to{transform:none; opacity:1}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}