/* GO기릿 춤강습 — 지휘통제실(live2) 톤을 따른다. 단 이쪽은 모바일 우선이다:
   춤연습은 폰을 세워 놓고 하므로 좁은 화면에서 카드·플레이어가 먼저다.

   2026-09-06 브랜드 v4 — 어두운 화면에서 **밝은 지면**으로 전환. app.css :root 값을 리터럴로 옮겨 왔다.
   ⚠️ 변수 이름은 그대로 두고 값만 밝게 바꿨다 — 아래 규칙들이 손대지 않고 산다.
   ⚠️ 골드 「면」 위에는 반드시 --ink 를 얹는다(11.5:1). 밝은 바탕에 골드를 **글자색으로 쓰지 마라**
      (#FEC202 on #FAF7F0 = 1.5:1). 글자로 쓸 땐 --gold-ink(5.0:1).
   ⚠️ 상태색은 자리를 지키되 밝은 지면용으로 다시 어둡게 잡았다 —
      --on(초록: 음원·강습 있음) 4.9:1, --rec(빨강: DANCE 녹화 표시) 5.1:1.
   ⚠️ 썸네일 칸과 유튜브 프레임은 계속 검다. 영상이 검게 레터박스되는 자리를 희게 칠하면 고장 나 보인다. */

:root{
  color-scheme:light;
  --bg:#FAF7F0; --bg-2:#F2EEE4; --panel:#FFFFFF;
  --line:#EFEAE0; --line2:#E4DED0; --line3:#D5CDB9;
  --tx:#14120C; --tx2:#4A463C; --tx3:#6E6A5D;
  --on:#0F7A5F; --rec:#C0392B;
  /* 어두운 썸네일 **위에서만** 쓰는 초록. 종이 위에 쓰면 1.9:1 이라 사라진다 */
  --on-media:#22D3A6;
  /* 구 --amber 자리를 브랜드 골드가 대신한다(재생 중·플레이어·카운트다운) */
  --gold:#FEC202; --gold-hi:#FDE114; --gold-lo:#F0A401; --gold-ink:#8A6400;
  /* 슬라이더·체크박스처럼 「면」도 「글자」도 아닌 UI 요소용 골드 — 흰 바탕 3.4:1 */
  --gold-ui:#B58200;
  --ink:#14120C; --silver:#D9D9D9;
  --char:#16150F; --char-2:#26241A; --char-text:#F3F0E6; --char-muted:#A8A395;
  --inset:0 1px 2px rgba(20,18,12,.05), 0 2px 8px rgba(20,18,12,.045);
  --lift:0 2px 4px rgba(20,18,12,.06), 0 14px 30px -10px rgba(20,18,12,.13);
  --hud:52px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif;
  font-size:14px;
  /* 하단 고정 플레이어에 가려지지 않게 */
  padding-bottom:calc(86px + env(safe-area-inset-bottom));
}
b{font-variant-numeric:tabular-nums}
button{font-family:inherit; cursor:pointer}

/* ── 상단 HUD ── */
.hud{
  position:sticky; top:0; z-index:40; height:var(--hud);
  display:flex; align-items:center; gap:14px; padding:0 14px;
  /* 종이 위 반투명 + 블러. 본체 .topbar 와 같은 방식 */
  background:rgba(250,247,240,.90);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line2);
}
.hud-l{display:flex;align-items:center;gap:10px;min-width:0}
.brand{color:var(--tx);text-decoration:none;font-weight:900;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.brand i,.brand em{color:var(--gold-ink);font-style:normal}
.title{font-size:14px;font-weight:800;color:var(--tx2);letter-spacing:.14em;white-space:nowrap}
.rec{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:900;color:var(--rec);letter-spacing:.1em}
.rec i{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:blink 1.6s infinite}
@keyframes blink{0%,45%{opacity:1}55%,100%{opacity:.15}}
.hud-c{display:flex;align-items:center;gap:12px;margin:0 auto}
.stat{display:flex;align-items:baseline;gap:5px}
.stat b{font-size:18px;font-weight:900;color:var(--on)}
.stat:nth-child(3) b{color:var(--tx)}
.stat:nth-child(5) b{color:var(--gold-ink)}
.stat small{font-size:9.5px;color:var(--tx3);letter-spacing:.1em;font-weight:700}
.sep{width:1px;height:18px;background:var(--line2)}
.hud-r .sub{font-size:10.5px;color:var(--tx3);letter-spacing:.08em;white-space:nowrap}
@media(max-width:760px){.hud-r{display:none}}
@media(max-width:430px){.hud-c .sep,.hud-c .stat:nth-child(n+2){display:none}}

/* ── 컨트롤 바 ── */
.ctl{position:sticky; top:var(--hud); z-index:35;
  background:rgba(250,247,240,.92); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line2)}
.ctl-in{max-width:1200px;margin:0 auto;padding:10px 14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#q{
  flex:1 1 200px; min-width:0; min-height:40px; padding:0 13px;
  background:var(--panel); border:1px solid var(--line2); border-radius:9px;
  box-shadow:var(--inset);
  color:var(--tx); font-family:inherit; font-size:15px; outline:none;
}
#q:focus{border-color:var(--gold-lo); outline:2px solid var(--gold-ink); outline-offset:1px}
#q::placeholder{color:var(--tx3)}
.ctl-btns{display:flex;gap:6px;flex-wrap:wrap}
.cbtn{
  min-height:40px; padding:0 13px; border-radius:9px; font-size:13px; font-weight:700;
  background:var(--panel); border:1px solid var(--line2); color:var(--tx2);
  box-shadow:var(--inset);
}
/* 전체 음원 버튼만 <a> 다(다운로드라 button 이 아니다). button 과 같은 모양으로 맞춘다.
   ⚠️ 아래 display 는 [hidden] 보다 선택자가 강해서 hidden 을 이긴다 — 바로 뒤에서 눌러 준다. */
a.cbtn{display:inline-flex;align-items:center;text-decoration:none}
#dlAll[hidden]{display:none}
/* 내려받기 버튼 — 초록 「면」이 아니라 초록 「테두리+연한 바탕」이다. 글자 4.7:1 */
.cbtn.dl{background:#E9F5EF;border-color:#9CCCB8;color:var(--on)}
.cbtn.dl:hover{border-color:var(--on);color:#0B6349}
.cbtn:hover{border-color:var(--line3);color:var(--tx)}
.cbtn.on{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:800}
.cbtn.tgl.on{background:#FBF0D1;border-color:var(--gold-lo);color:var(--gold-ink)}

/* ── 본문 ── */
.wrap{max-width:1200px;margin:0 auto;padding:14px}
.note{margin:2px 0 14px;font-size:12.5px;color:var(--tx3);line-height:1.6}
.note b{color:var(--on)}
.empty{color:var(--tx3);text-align:center;padding:40px 0}

.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
@media(min-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}}

/* ── 시그 카드 ── */
.card{
  position:relative; border:1px solid var(--line2); border-radius:10px; overflow:hidden;
  background:var(--panel); text-align:left; padding:0; color:var(--tx);
  display:flex; flex-direction:column; box-shadow:var(--inset);
  transition:border-color .15s, box-shadow .15s;
}
.card:hover{border-color:var(--line3); box-shadow:var(--lift)}
/* 흰 카드 위에서는 22% 링이 안 보인다 — 진하게 올리고 그림자로 들어 올린다 */
.card.playing{border-color:var(--gold-lo); box-shadow:0 0 0 2px rgba(240,164,1,.40), var(--lift)}
.card .thumb{
  /* 썸네일 칸은 계속 어둡게 — 이미지가 없는 카드까지 희게 두면 격자가 들쭉날쭉해 보인다 */
  aspect-ratio:293/164; background:var(--char); display:flex; align-items:center; justify-content:center;
}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .thumb .noimg{font-size:22px;font-weight:900;color:var(--char-muted);letter-spacing:.06em}
.card .bd{padding:9px 11px 10px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .nm{font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3;word-break:keep-all}
.card .meta{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--tx3);
  font-variant-numeric:tabular-nums}
.card .meta .tier{font-weight:900;font-size:10px;padding:1px 6px;border-radius:5px;letter-spacing:.06em}
/* 티어 S/A/B/C — 색만으로 구분하지 않는다. 글자(S·A·B·C)에 더해 **채움 방식**이 계단을 이룬다:
   S = 골드 꽉 채움 / A = 골드 연한 바탕 + 골드 실선 / B = 흰 바탕 + 중성 실선 / C = 회색 바탕 + 점선. */
.tier-S{background:var(--gold);color:var(--ink);border:1px solid var(--gold-lo)}
.tier-A{background:#FBF0D1;color:var(--gold-ink);border:1px solid var(--gold-lo)}
.tier-B{background:var(--panel);color:var(--tx2);border:1px solid var(--line3)}
.tier-C{background:var(--bg-2);color:var(--tx3);border:1px dashed var(--line3)}
/* 투네이션 밖에서 넣은 음원 표시(YT 등). 원본 시그 음원과 구분해 준다 */
.card .meta .srcb{font-weight:900;font-size:9.5px;padding:1px 5px;border-radius:5px;
  background:#FBE9E7;color:var(--rec);letter-spacing:.06em}
.card .ops{display:flex;gap:6px;margin-top:auto}
.card .ops button,.card .ops a{
  flex:1; min-height:40px; border-radius:8px; font-size:12.5px; font-weight:700;
  background:var(--panel); border:1px solid var(--line2); color:var(--tx2);
  display:flex;align-items:center;justify-content:center;gap:5px;
  text-decoration:none;
}
.card .ops button:hover,.card .ops a:hover{border-color:var(--line3);color:var(--tx)}

.card .ops .bplay.on{background:var(--gold);color:var(--ink);border-color:transparent;font-weight:800}
/* 「강습영상 있음」은 위 .ytdot LESSON 뱃지와 같은 뜻이라 같은 초록으로 통일했다(구 cyan) */
.card .ops .byt.has{background:#E9F5EF;border-color:#9CCCB8;color:var(--on)}
.card .ops .bedit{flex:0 0 40px;font-size:13px}
/* 강습영상 등록 뱃지 */
.card .ytdot{position:absolute;top:7px;right:7px;z-index:2;font-size:9.5px;font-weight:900;
  /* ⚠️ 썸네일(어두운 면) 위에 얹히는 칩이라 여기만 --on-media 를 쓴다 */
  letter-spacing:.08em;padding:2px 7px;border-radius:6px;background:rgba(10,10,12,.80);color:var(--on-media);
  border:1px solid rgba(34,211,166,.42)}
/* mp3 내려받기 — LESSON 뱃지 반대편. 버튼줄에 두면 폰 2열에서 넘친다(dance.js 주석 참조).
   손가락으로 눌러야 하니 40px 를 준다 (2026-09-06 34px → 40px). */
.card .dldot{position:absolute;top:6px;left:6px;z-index:3;width:40px;height:40px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;
  /* 이것도 썸네일 위다 — 밝은 글자여야 보인다 */
  text-decoration:none;background:rgba(10,10,12,.72);color:var(--char-text);
  border:1px solid rgba(255,255,255,.22)}
.card .dldot:hover{background:rgba(10,10,12,.92);border-color:var(--on-media);color:var(--on-media)}

/* ── 하단 플레이어 ── */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--panel);
  border-top:1px solid var(--line2);
  box-shadow:0 -2px 4px rgba(20,18,12,.05), 0 -14px 30px -18px rgba(20,18,12,.16);
  padding-bottom:env(safe-area-inset-bottom);
}
.pl-in{max-width:1200px;margin:0 auto;padding:9px 14px;display:flex;align-items:center;gap:12px}
.pl-play{
  flex:0 0 46px; height:46px; border-radius:50%; font-size:17px;
  background:var(--gold); color:var(--ink); border:0; font-weight:900;
}
.pl-mid{flex:1;min-width:0}
.pl-name{font-size:13.5px;font-weight:800;color:var(--gold-ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-bottom:3px}
.pl-seek{display:flex;align-items:center;gap:8px}
.pl-t{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums;min-width:32px}
.pl-t:last-child{text-align:right}
/* 슬라이더는 글자가 아니지만 흰 바탕에서 3:1 은 넘겨야 한다 — 순 골드는 2.1:1 이라 못 쓴다 */
#plBar{flex:1;accent-color:var(--gold-ui);height:4px;cursor:pointer;min-width:0}
.pl-ops{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.pl-op{
  min-height:40px; padding:0 9px; border-radius:7px; font-size:11.5px; font-weight:800;
  background:var(--panel); border:1px solid var(--line2); color:var(--tx2); white-space:nowrap;
}
.pl-op:hover{border-color:var(--line3);color:var(--tx)}
.pl-op.on{background:#FBF0D1;border-color:var(--gold-lo);color:var(--gold-ink)}
.pl-speed{display:flex;gap:4px}
.pl-op.x{border-color:transparent;background:none;color:var(--tx3);font-size:14px}
/* 좁은 화면: 배속·카운트다운은 유지하고 이름줄을 줄인다 */
@media(max-width:560px){
  .pl-in{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .pl-mid{flex:1 1 100%;order:3}
  .pl-ops{order:2;margin-left:auto}
  body{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
}

/* ⚠️ display:flex 가 hidden 속성(UA 의 display:none)을 이겨 버린다 — 명시적으로 눌러 준다.
   이거 없으면 로드하자마자 모달·카운트다운·플레이어가 전부 떠 있다 (2026-08-23 실측). */
.count[hidden],.modal[hidden],.player[hidden]{display:none}

/* ── 카운트다운 오버레이 ── */
.count{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  /* 스크림은 밝은 테마에서도 어둡다 — 연습 중 화면이 통째로 하얗게 번쩍이면 눈이 아프고,
     골드 숫자도 검은 바탕에서 12.9:1 로 가장 세게 읽힌다 */
  background:rgba(20,18,12,.78);backdrop-filter:blur(3px)}
.count b{font-size:min(38vw,240px);font-weight:900;color:var(--gold);
  text-shadow:0 0 60px rgba(254,194,2,.45);animation:pop .95s ease-out infinite}
@keyframes pop{0%{transform:scale(1.25);opacity:.2}18%{transform:scale(1);opacity:1}100%{opacity:.92}}

/* ── 유튜브 모달 ── */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:14px}
.modal-bg{position:absolute;inset:0;background:rgba(20,18,12,.62)}
.modal-box{position:relative;width:min(920px,100%);border:1px solid var(--line2);border-radius:12px;
  overflow:hidden;background:var(--panel);box-shadow:0 24px 60px -18px rgba(20,18,12,.34)}
.modal-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:800}
.modal-x{background:none;border:0;color:var(--tx3);font-size:17px;padding:0;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.modal-x:hover{color:var(--tx)}
/* 유튜브 프레임은 검게 둔다 — 영상이 검게 레터박스되는 자리다 */
.modal-frame{aspect-ratio:16/9;background:#000}
.modal-frame iframe{width:100%;height:100%;border:0;display:block}

/* ── 토스트 ── */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(14px);
  /* 밝은 화면 위 토스트는 차콜 알약이 가장 잘 보인다 (16:1) */
  z-index:80;background:var(--char);border:1px solid var(--char-2);color:var(--char-text);
  padding:9px 16px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;max-width:88vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 터치 영역 하한 (2026-09-06 v4 실측) ──
   헤더 브랜드 링크가 380px 에서 24px 이었다. 글자 크기는 그대로 두고 패딩으로만 40px 를 만든다. */
.brand{display:inline-flex; align-items:center; min-height:40px}