/* =========================================================
   클래스 BGM 공용 스타일 — /music/ 페이지와 /admin/ 미리보기가 공유합니다.
   ※ 이 파일을 고치면 강의장 페이지와 관리자 미리보기가 동시에 바뀝니다.
   ========================================================= */
/* ===== CLASS BGM (AI Business Solutions 컨셉) ===== */
.cm-wrap { font-family:"Inter","Noto Sans KR",-apple-system,sans-serif; color:#111; }

/* ----- HERO ----- */
.cm-hero { background:linear-gradient(135deg,#0d1b2a 0%,#1a237e 60%,#0d47a1 100%); padding:72px 24px 64px; color:#fff; text-align:center; }
.cm-hero-inner { max-width:960px; margin:0 auto; }
.cm-eyebrow { font-size:.72rem; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:#00c4ff; margin:0 0 16px; }
.cm-hero h1 { font-size:2.4rem; font-weight:900; line-height:1.2; margin:0 0 12px; color:#fff; }
.cm-hero-sub { font-size:.95rem; color:rgba(255,255,255,.7); margin:0 0 48px; }
.cm-obj-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.cm-obj-card { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:20px 16px; text-align:left; text-decoration:none; transition:background .16s,transform .16s; display:block; }
.cm-obj-card:hover { background:rgba(255,255,255,.18); transform:translateY(-3px); }
.cm-obj-num { font-size:1.9rem; font-weight:900; color:#00c4ff; display:block; margin-bottom:8px; line-height:1; }
.cm-obj-card h3 { font-size:.9rem; font-weight:800; color:#fff; margin:0 0 6px; }
.cm-obj-card p { font-size:.74rem; color:rgba(255,255,255,.65); margin:0; line-height:1.55; }

/* ----- SEASON FILTER ----- */
.cm-season-bar { position:sticky; top:72px; z-index:29; background:#f8f9fb; border-bottom:1px solid #e5e7eb; padding:11px 16px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.cm-season { border:1.5px solid #e5e7eb; background:#fff; color:#6b7280; padding:6px 15px; border-radius:999px; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .15s; }
.cm-season.active { color:#fff; border-color:transparent; }
.cm-season[data-season="all"].active { background:#374151; }
.cm-season[data-season="spring"].active { background:#ec4899; }
.cm-season[data-season="summer"].active { background:#06b6d4; }
.cm-season[data-season="autumn"].active { background:#d97706; }
.cm-season[data-season="winter"].active { background:#3b82f6; }

/* ----- CHAPTERS ----- */
.cm-chapters { max-width:1060px; margin:0 auto; padding:0 24px 40px; }
.cm-chapter { display:grid; grid-template-columns:140px 1fr; gap:36px; padding:56px 0; border-bottom:1px solid #e5e7eb; align-items:start; scroll-margin-top:130px; }
.cm-chapter:last-child { border-bottom:none; }
.cm-ch-num { font-size:7rem; font-weight:900; line-height:1; opacity:.16; text-align:right; padding-top:6px; user-select:none; letter-spacing:-4px; background:linear-gradient(135deg,#0078d4,#1a237e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cm-ch-label { font-size:.66rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#aaa; margin:0 0 8px; }
.cm-ch-body h2 { font-size:1.55rem; font-weight:900; color:#111; margin:0 0 8px; line-height:1.25; }
.cm-ch-sub { font-size:.88rem; color:#666; margin:0 0 22px; font-style:italic; }

/* ----- TRACK CARDS ----- */
.cm-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.cm-card { border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05); cursor:pointer; transition:transform .16s,box-shadow .16s; }
.cm-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(15,23,42,.12); }
.cm-card.playing { border-color:#0078d4; box-shadow:0 0 0 2px #0078d4; }
.cm-card.hidden { display:none; }
.cm-thumb { position:relative; aspect-ratio:16/9; background:#eef; overflow:hidden; }
.cm-thumb img { width:100%; height:100%; object-fit:cover; }
.cm-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.cm-ph svg { width:40px; height:40px; fill:rgba(255,255,255,.9); }
.cm-play-ic { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(13,27,42,.3); opacity:0; transition:opacity .16s; }
.cm-card:hover .cm-play-ic, .cm-card.playing .cm-play-ic { opacity:1; }
.cm-play-ic svg { width:46px; height:46px; fill:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.cm-add { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:0; background:rgba(13,27,42,.6); color:#fff; font-size:1.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s,background .15s; }
.cm-card:hover .cm-add { opacity:1; }
.cm-add:hover { background:#0078d4; }
.cm-add.added { background:#059669; opacity:1; }
.cm-src-tag { position:absolute; bottom:8px; left:8px; font-size:.6rem; font-weight:800; letter-spacing:.5px; padding:2px 7px; border-radius:4px; background:rgba(13,27,42,.7); color:#fff; }
.cm-meta { padding:12px 14px 14px; }
.cm-meta h3 { font-size:.9rem; font-weight:700; margin:0 0 8px; line-height:1.35; color:#111; }
.cm-badge { font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:5px; background:#eef4ff; color:#0078d4; }
.cm-badge.season { background:#fdf2f8; color:#be185d; }
.cm-ch-empty { font-size:.85rem; color:#9ca3af; padding:8px 0; }

/* ----- CTA ----- */
.cm-cta { background:linear-gradient(135deg,#0a0a0a 0%,#1a1040 100%); padding:56px 40px; text-align:center; }
.cm-cta h2 { font-size:1.6rem; font-weight:800; color:#fff; margin:0 0 10px; }
.cm-cta p { font-size:.95rem; color:rgba(255,255,255,.65); margin:0 0 28px; }
.cm-cta a { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border-radius:999px; background:linear-gradient(135deg,#0078d4,#5b3df0,#b13cff); color:#fff; font-size:.95rem; font-weight:700; text-decoration:none; box-shadow:0 4px 20px rgba(91,61,240,.4); transition:opacity .18s; }
.cm-cta a:hover { opacity:.85; }

/* ----- MINI PLAYER ----- */
.cm-player { position:fixed; left:0; right:0; bottom:0; z-index:60; background:#0d1b2a; color:#fff; border-top:1px solid rgba(0,196,255,.25); box-shadow:0 -8px 30px rgba(0,0,0,.35); transform:translateY(110%); transition:transform .28s ease; }
.cm-player.show { transform:translateY(0); }
.cm-player-inner { display:flex; align-items:center; gap:14px; max-width:1180px; margin:0 auto; padding:12px 24px; }
.cm-now { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.cm-now-thumb { width:46px; height:46px; border-radius:8px; flex-shrink:0; background:#132a40 center/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.cm-now-thumb svg { width:22px; height:22px; fill:rgba(255,255,255,.85); }
.cm-now-txt { min-width:0; }
.cm-now-title { font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-now-sub { font-size:.74rem; color:rgba(255,255,255,.5); }
.cm-btns { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.cm-ctl { width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s; position:relative; }
.cm-ctl:hover { background:rgba(255,255,255,.22); }
.cm-ctl.main { width:48px; height:48px; background:linear-gradient(135deg,#0078d4,#5b3df0,#b13cff); }
.cm-ctl svg { width:20px; height:20px; fill:#fff; }
.cm-qbadge { position:absolute; top:-4px; right:-4px; background:#00c4ff; color:#04263a; font-size:.62rem; font-weight:800; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.cm-vol { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.cm-vol input { width:80px; accent-color:#00c4ff; }
.cm-timer { display:flex; align-items:center; gap:6px; flex-shrink:0; border-left:1px solid rgba(255,255,255,.12); padding-left:12px; }
.cm-timer-btn { border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; border-radius:8px; padding:6px 9px; font-size:.76rem; font-weight:600; cursor:pointer; transition:all .15s; }
.cm-timer-btn:hover { background:rgba(255,255,255,.14); }
.cm-timer-btn.active { background:#0078d4; border-color:transparent; }
.cm-timer-disp { font-variant-numeric:tabular-nums; font-weight:700; font-size:.95rem; min-width:46px; text-align:center; }
.cm-timer-disp.alarm { color:#00c4ff; animation:cmpulse .6s ease-in-out infinite; }
@keyframes cmpulse { 50%{opacity:.35;} }
/* 이퀄라이저 */
.cm-eq { display:inline-flex; gap:3px; align-items:flex-end; height:20px; }
.cm-eq span { width:5px; height:100%; background:#00c4ff; border-radius:2px; transform-origin:bottom; transform:scaleY(.45); animation:cmEq .85s ease-in-out infinite; animation-play-state:paused; box-shadow:0 0 6px rgba(0,196,255,.6); }
.cm-eq span:nth-child(2){ animation-delay:.22s; } .cm-eq span:nth-child(3){ animation-delay:.44s; } .cm-eq span:nth-child(4){ animation-delay:.12s; }
.is-playing .cm-eq span { animation-play-state:running; }
@keyframes cmEq { 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.cm-eq-card { position:absolute; left:8px; top:8px; height:30px; padding:6px 9px; background:rgba(13,27,42,.82); border-radius:9px; display:none; }
.cm-card.playing .cm-eq-card { display:inline-flex; }
.cm-eq-mini { display:none; height:18px; } .has-track .cm-eq-mini { display:inline-flex; }
.cm-eq-stage { display:none; gap:6px; } .has-track .cm-eq-stage { display:inline-flex; } .cm-eq-stage span { width:11px; box-shadow:0 0 12px rgba(0,196,255,.7); }
/* 미니 플레이어 이퀄라이저 — 곡 정보와 컨트롤 사이 빈 공간을 채웁니다 */
.cm-eq-bar { display:none; height:30px; gap:5px; }
.has-track .cm-eq-bar { display:flex; flex:1; justify-content:center; }
.cm-eq-bar span { width:7px; }
/* 진행바 */
.cm-prog { position:relative; height:5px; background:rgba(255,255,255,.15); cursor:pointer; border-radius:3px; }
.cm-prog-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#00c4ff,#5b3df0); border-radius:3px; }
.cm-time { font-size:.72rem; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cm-now-titlerow { display:flex; align-items:center; gap:6px; min-width:0; }
.cm-stage-prog { width:min(360px,60vw); margin:0 0 26px; }
#cm-yt { position:fixed; width:1px; height:1px; bottom:0; left:0; opacity:.01; pointer-events:none; }

/* ----- QUEUE DRAWER ----- */
.cm-queue { position:fixed; top:0; right:0; bottom:0; width:340px; max-width:88vw; background:#0d1b2a; color:#fff; z-index:75; transform:translateX(105%); transition:transform .28s ease; display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,.4); }
.cm-queue.show { transform:translateX(0); }
.cm-queue-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.1); }
.cm-queue-head h3 { margin:0; font-size:1rem; font-weight:800; }
.cm-queue-head button { background:none; border:0; color:rgba(255,255,255,.6); font-size:1.4rem; cursor:pointer; line-height:1; }
.cm-queue-actions { display:flex; gap:8px; padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.cm-queue-actions button { flex:1; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; border-radius:8px; padding:8px; font-size:.78rem; font-weight:700; cursor:pointer; }
.cm-queue-actions button:hover { background:rgba(255,255,255,.12); }
.cm-queue-list { flex:1; overflow-y:auto; padding:8px 12px; }
.cm-q-item { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:8px; cursor:pointer; }
.cm-q-item:hover { background:rgba(255,255,255,.07); }
.cm-q-item.playing { background:rgba(0,196,255,.14); }
.cm-q-thumb { width:40px; height:40px; border-radius:6px; background:#132a40 center/cover no-repeat; flex-shrink:0; }
.cm-q-txt { flex:1; min-width:0; }
.cm-q-title { font-size:.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-q-sub { font-size:.68rem; color:rgba(255,255,255,.45); }
.cm-q-rm { background:none; border:0; color:rgba(255,255,255,.4); font-size:1rem; cursor:pointer; flex-shrink:0; }
.cm-q-rm:hover { color:#ff6b6b; }
.cm-q-empty { color:rgba(255,255,255,.4); font-size:.82rem; text-align:center; padding:40px 20px; }

/* ----- STAGE (확대 화면) ----- */
.cm-stage { position:fixed; inset:0; z-index:80; background:radial-gradient(circle at 50% 30%,#122a4a 0%,#0a1526 60%,#05080f 100%); color:#fff; display:none; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center; }
.cm-stage.show { display:flex; }
.cm-stage-close { position:absolute; top:22px; right:26px; background:rgba(255,255,255,.1); border:0; color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.3rem; cursor:pointer; }
.cm-stage-close:hover { background:rgba(255,255,255,.2); }
.cm-stage-art { width:min(360px,60vw); aspect-ratio:1; border-radius:24px; background:#132a40 center/cover no-repeat; box-shadow:0 24px 60px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; margin-bottom:32px; }
.cm-stage-art svg { width:96px; height:96px; fill:rgba(255,255,255,.9); }
.cm-stage-title { font-size:clamp(1.6rem,4vw,2.6rem); font-weight:900; margin:0 0 10px; }
.cm-stage-sub { font-size:1rem; color:rgba(255,255,255,.55); margin:0 0 28px; }
.cm-stage-timer { font-variant-numeric:tabular-nums; font-size:clamp(3rem,9vw,6rem); font-weight:900; line-height:1; letter-spacing:2px; margin:0 0 12px; color:#00c4ff; }
.cm-stage-timer.idle { color:rgba(255,255,255,.25); }
.cm-stage-timerbtns { display:flex; gap:10px; margin-bottom:36px; }
.cm-stage-timerbtns button { border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; border-radius:10px; padding:10px 18px; font-size:.95rem; font-weight:700; cursor:pointer; }
.cm-stage-timerbtns button.active { background:#0078d4; border-color:transparent; }
.cm-stage-ctls { display:flex; align-items:center; gap:22px; }
.cm-stage-ctls button { border:0; background:rgba(255,255,255,.1); color:#fff; border-radius:50%; width:64px; height:64px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cm-stage-ctls button:hover { background:rgba(255,255,255,.2); }
.cm-stage-ctls .main { width:84px; height:84px; background:linear-gradient(135deg,#0078d4,#5b3df0,#b13cff); }
.cm-stage-ctls svg { width:30px; height:30px; fill:#fff; }
.cm-stage-ctls .main svg { width:40px; height:40px; }

/* ----- RESPONSIVE ----- */
@media (max-width:768px){
  /* 모바일 — 목표 카드 5장이 한 화면을 다 차지하지 않도록 압축 (PC는 그대로 5열 유지) */
  .cm-hero { padding:40px 18px 34px; }
  .cm-hero-sub { margin-bottom:26px; }
  .cm-obj-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
  .cm-obj-card { padding:12px 10px; border-radius:11px; }
  .cm-obj-num { font-size:1.25rem; margin-bottom:4px; }
  .cm-obj-card h3 { font-size:.78rem; margin:0; }
  .cm-obj-card p { display:none; }   /* 설명문은 챕터 헤더에서 다시 보여줌 */

  /* 모바일 — 계절 필터 고정 해제 (좁은 화면에서 세로 공간을 계속 차지해 답답함) */
  .cm-season-bar { position:static; }
  .cm-chapter { grid-template-columns:1fr; gap:0; scroll-margin-top:24px; }
  .cm-ch-num { font-size:4rem; text-align:left; opacity:.14; }
  .cm-hero h1 { font-size:1.7rem; }
}
@media (max-width:820px){
  /* 모바일 — 곡 정보는 한 줄 전체, 컨트롤·볼륨·타이머는 가운데 정렬 */
  .cm-player-inner { flex-wrap:wrap; gap:10px 14px; padding:10px 14px; justify-content:center; }
  .cm-now { flex:1 1 100%; order:1; } .cm-btns { order:2; } .cm-vol { order:3; } .cm-timer { order:4; border-left:0; padding-left:0; }

  /* 이퀄라이저 — 숨기지 않고, 곡 제목을 밀지 않도록 오른쪽 끝에 작게 붙입니다
     (.has-track .cm-eq-bar 의 flex:1 을 이기려면 특이도를 더 높여야 합니다) */
  .cm-wrap.has-track .cm-eq-bar { flex:0 0 auto; justify-content:flex-end; margin-left:auto; padding-left:8px; }
  .cm-vol input { width:70px; }
  .cm-eq-bar { height:18px; gap:3px; }
  .cm-eq-bar span { width:4px; }
  .cm-eq-bar span:nth-child(n+6) { display:none; }
}
@media (max-width:480px){
  /* 작은 화면에서도 3열 유지 — 1열로 풀면 5장이 세로로 쌓여 화면을 다 먹습니다 */
  .cm-obj-grid { grid-template-columns:repeat(3,1fr); gap:7px; }
  .cm-obj-card { padding:10px 7px; }
  .cm-obj-num { font-size:1.1rem; }
  .cm-obj-card h3 { font-size:.72rem; line-height:1.3; }
  .cm-hero { padding:32px 14px 28px; }
  .cm-cta { padding:40px 20px; } .cm-hero h1 { font-size:1.45rem; }

  /* 이퀄라이저 — 더 좁은 화면에선 4개만 */
  .cm-eq-bar span:nth-child(n+5) { display:none; }
  .cm-eq-bar { height:16px; }
  .cm-vol input { width:58px; }
}

/* ═══════════════════════════════════════════════════
   확대 화면(Stage) — 모바일 대응
   원인: position:fixed + justify-content:center + 스크롤 없음 이라
        아트워크·타이머가 커서 이퀄라이저가 화면 밖으로 잘려 나갔습니다.
   ═══════════════════════════════════════════════════ */
@media (max-width:768px), (max-height:720px){
  .cm-stage {
    justify-content:flex-start;          /* 중앙 정렬 시 위아래가 잘림 */
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:64px 20px 36px;
  }
  .cm-stage-close { top:14px; right:16px; width:38px; height:38px; font-size:1.1rem; }
  .cm-stage-art { width:min(190px,44vw); border-radius:18px; margin-bottom:16px; }
  .cm-stage-art svg { width:60px; height:60px; }
  /* 인라인 style="height:56px" 를 이겨야 하므로 !important */
  .cm-eq-stage { height:34px !important; margin-bottom:14px !important; gap:5px; }
  .cm-eq-stage span { width:7px; }
  .cm-stage-title { font-size:1.25rem; margin-bottom:6px; }
  .cm-stage-sub { font-size:.85rem; margin-bottom:16px; }
  .cm-stage-prog { width:min(320px,80vw); margin-bottom:16px; }
  .cm-stage-timer { font-size:2.6rem; margin-bottom:8px; }
  .cm-stage-timerbtns { gap:8px; margin-bottom:20px; flex-wrap:wrap; justify-content:center; }
  .cm-stage-timerbtns button { padding:8px 14px; font-size:.85rem; }
  .cm-stage-ctls { gap:16px; }
  .cm-stage-ctls button { width:52px; height:52px; }
  .cm-stage-ctls .main { width:66px; height:66px; }
  .cm-stage-ctls svg { width:24px; height:24px; }
  .cm-stage-ctls .main svg { width:30px; height:30px; }
}