:root{
    --bg-deep:#230805;
    --bg-mid:#7a2712;
    --bg-glow:#c8462a;
    --ink:#170504;
    --gold:#e9d9a3;
    --gold-soft:#cdb87c;
    --teal:#5ecdc4;
    --sky:#3f8fd6;
    --cream:#f6efd9;
    --line:rgba(233,217,163,0.18);
    --chant:#f5942c;
    --clap:#4fa8e0;
    --wave:#8de05f;
    --jump:#b98cff;
    --spin:#ff86c8;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg-deep);
    color:var(--cream);
    font-family:Pretendard,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--teal);color:var(--ink);}
  a{color:inherit;}
  button{font-family:inherit;}

  /* ---------- utility ---------- */
  .eyebrow{
    font-family:'Gmarket Sans',sans-serif;
    letter-spacing:.3em;
    font-size:clamp(13px,3.6vw,16px);
    color:var(--gold-soft);
    text-transform:uppercase;
    text-shadow:0 1px 6px rgba(0,0,0,0.85), 0 0 20px rgba(0,0,0,0.6);
  }

  /* ---------- HERO / HOME ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* 위쪽 정렬 고정 — 공연 정보를 펼쳐도 위 내용(제목·카운트다운)이 밀려 올라가지 않음.
       닫힌 상태에서 가운데처럼 보이게 하는 여백은 JS(layoutHeroCenter)가 한 번만 계산해 고정합니다. */
    justify-content:flex-start;
    padding:calc(44px + var(--safe-top, 0px)) 20px 36px;
    background:var(--bg-deep) url('../images/poster.jpg') center 42%/cover no-repeat;
    text-align:center;
    isolation:isolate;
  }
  .hero::after{
    content:"";
    position:absolute;inset:0;
    background:rgba(23,5,4,.74);
    z-index:0;
  }
  .hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px;}

  .tour-title{
    margin:16px 0 0;
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(40px,10vw,58px);
    letter-spacing:.02em;
    color:var(--gold);
    text-shadow:none;
    line-height:1.06;
  }
  .tour-title span{
    display:block;
    font-size:.44em;
    letter-spacing:.36em;
    color:#fff;
    margin-bottom:8px;
    text-shadow:none;
  }

  /* ── 카운트다운 (D-DAY 알약 + 공연 일정 목록) ───────────────── */
  .countdown{
    margin-top:30px;
    display:flex;
    justify-content:center;
    width:100%;
  }
  .cd-pill{
    display:inline-flex;
    align-items:center;
    gap:clamp(12px,3.4vw,18px);
    padding:clamp(11px,3vw,15px) clamp(20px,5.6vw,30px);
    border:0;
    border-radius:8px;
    background:rgba(23,5,4,.8);
  }
  .cd-dday{
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(28px,8.2vw,38px);
    line-height:1;
    color:#fff;
    letter-spacing:.02em;
    font-variant-numeric:tabular-nums;
    text-shadow:none;
  }
  .cd-sep{
    width:1px;
    align-self:stretch;
    background:rgba(246,239,217,0.3);
  }
  .cd-clock{
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(28px,8.2vw,38px);
    line-height:1;
    color:#e7e3d8;
    letter-spacing:.03em;
    font-variant-numeric:tabular-nums;
    text-shadow:none;
  }
  /* 마지막 공연 진행 중 / 공연 종료 상태 */
  .cd-pill.is-live{
    border-color:rgba(245,148,44,0.55);
    background:rgba(23,5,4,.9);
  }
  .cd-pill.is-live .cd-dday{ color:var(--chant); }
  .cd-pill.is-live .cd-clock{ color:#fff; }
  .cd-pill.is-end{
    border-color:rgba(246,239,217,0.22);
    background:rgba(20,6,4,0.4);
  }
  .cd-pill.is-end .cd-sep,
  .cd-pill.is-end .cd-clock{ display:none; }
  .cd-pill.is-end .cd-dday{
    color:#b9b3a6;
    letter-spacing:.16em;
    text-shadow:0 2px 10px rgba(0,0,0,0.8);
  }
  /* 이미 끝난 공연은 흐리게 / 진행 중인 공연은 주황으로 */
  .show-row.past{ opacity:.38; }
  .show-row.live .show-day{ color:var(--chant); }
  .show-row.live .show-time{ color:var(--chant); opacity:.85; }
  .show-row{ transition:opacity .3s ease; }

  .countdown-done{
    margin-top:30px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:22px;
    color:var(--teal);
    letter-spacing:.06em;
    text-shadow:0 2px 10px rgba(0,0,0,0.8);
  }

  .show-meta{
    margin-top:30px;
    width:100%;
    max-width:420px;
    text-align:left;
  }
  .show-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    padding:13px 2px;
    border-top:1px solid rgba(246,239,217,0.16);
  }
  .show-day{
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(18px,5vw,22px);
    letter-spacing:.03em;
    color:#fff;
    text-shadow:1px 0 0 rgba(255,64,80,0.4), -1px 0 0 rgba(79,168,224,0.4), 0 2px 8px rgba(0,0,0,0.8);
  }
  .show-day .dow{ margin-left:6px; }
  .show-time{
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(16px,4.4vw,20px);
    letter-spacing:.04em;
    color:#b9b3a6;
    font-variant-numeric:tabular-nums;
    text-shadow:0 2px 8px rgba(0,0,0,0.8);
  }
  .show-venue{
    margin-top:0;
    padding-top:13px;
    border-top:1px solid rgba(246,239,217,0.16);
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(12px,3.2vw,13px);
    color:#8d8577;
    letter-spacing:.18em;
    text-shadow:0 1px 6px rgba(0,0,0,0.85);
  }

  .main-menu{
    position:relative;z-index:1;
    margin-top:28px;
    width:100%;
    max-width:560px;
  }
  .menu-btn{
    width:100%;
    display:flex;flex-direction:column;align-items:center;
    background:var(--action);
    border:0;
    border-radius:8px;
    padding:20px 24px;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .menu-btn:hover, .menu-btn:focus-visible{
    background:var(--cream);
    transform:none;
    outline:none;
  }
  .menu-btn-label{
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(20px,5.6vw,24px);
    letter-spacing:.02em;
    color:var(--ink);
    text-shadow:none;
  }

  /* ---------- SONG LIST / GUIDE ---------- */
  .guide-page{
    min-height:100svh;
    position:relative;
    background:var(--bg-deep);
  }
  .songs-section{
    background:none;
    padding:36px 20px 80px;
  }
  .songs-head{
    max-width:640px;margin:0 auto 26px;
    text-align:center;
  }
  .songs-head h2{
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(22px,6vw,28px);
    margin:10px 0 6px;
    letter-spacing:.02em;
  }
  .songs-head p{
    margin:0;
    font-size:13px;
    color:#b9a98a;
  }

  /* ── 곡 목록 검색 ─────────────────────────────────────────── */
  .song-search{
    position:sticky;
    top:0;
    z-index:5;
    max-width:640px;margin:0 auto 12px;
    padding:10px 0 10px;
  }
  /* 화면 맨 위에 붙었을 때만 뒤에 단색 바탕을 깐다. */
  .song-search::before{
    content:"";
    position:absolute;
    top:0;bottom:0;
    left:calc(50% - 50vw);
    right:calc(50% - 50vw);
    background:rgba(33,12,9,0.96);
    opacity:0;
    transition:opacity .22s ease;
    pointer-events:none;
  }
  .song-search.stuck::before{ opacity:1; }
  .song-search-sentinel{ height:1px; margin:0; }
  .song-search-box{
    position:relative;
    display:flex;align-items:center;gap:9px;
    padding:11px 14px;
    border:1px solid rgba(246,239,217,0.20);
    border-radius:8px;
    background:var(--surface);
    transition:border-color .2s ease, background .2s ease;
  }
  .song-search-box:focus-within{
    border-color:var(--gold);
  }
  .song-search-box svg{ width:15px;height:15px;color:var(--gold-soft);flex:none; }
  .song-search-box input{
    flex:1;min-width:0;
    border:none;background:none;outline:none;
    color:var(--cream);
    font-family:inherit;font-size:14px;
  }
  .song-search-box input::placeholder{ color:#8d7d62; }
  /* 브라우저 기본 지우기 버튼은 숨기고 우리 ✕ 하나만 쓴다 */
  .song-search-box input::-webkit-search-cancel-button,
  .song-search-box input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
  .song-search-clear{
    flex:none;
    border:none;background:none;
    color:#8d7d62;
    font-size:15px;line-height:1;
    padding:2px 2px;
    cursor:pointer;
    display:none;
  }
  .song-search-clear.show{ display:block; }
  .song-search-meta{
    display:flex;align-items:center;justify-content:space-between;
    max-width:640px;margin:0 auto 6px;
    padding:0 2px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:11.5px;letter-spacing:.08em;
    color:#a5947a;
    text-shadow:0 1px 6px rgba(0,0,0,0.85);
  }
  .song-empty{
    max-width:640px;margin:0 auto;
    padding:46px 10px;
    text-align:center;
    color:#8d7d62;
    font-size:13.5px;line-height:1.7;
  }
  .song-empty b{ display:block;color:var(--cream);font-size:15px;margin-bottom:6px; }
  .song-row .hit{ color:var(--teal); }
  /* ── 곡 목록 정렬 ─────────────────────────────────────────
     여기서 고른 순서대로 곡 화면의 '이전/다음 곡'도 따라갑니다. */
  .song-sorts{
    display:flex;gap:5px;
    max-width:640px;margin:0 auto 12px;
    padding:4px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(0,0,0,0.3);
  }
  .song-sort{
    flex:1;
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    padding:9px 6px;
    border:none;border-radius:9px;
    background:none;
    color:#b9a98a;
    font-family:inherit;font-size:12.5px;font-weight:700;
    cursor:pointer;white-space:nowrap;
    transition:background .2s ease, color .2s ease;
  }
  .song-sort:hover{ color:var(--cream); }
  .song-sort.active{
    background:var(--surface-raised);
    color:var(--cream);
  }
  .song-sort .dir{ font-size:11px; color:var(--teal); }
  @media (max-width:400px){
    .song-sort{ font-size:11.5px; padding:9px 3px; gap:3px; }
  }

  .song-list{
    max-width:640px;margin:0 auto;
    list-style:none;padding:0;
    border-top:1px solid var(--line);
  }
  .song-row{
    width:100%;
    display:flex;align-items:center;gap:13px;
    background:none;border:none;border-bottom:1px solid var(--line);
    color:var(--cream);
    padding:20px 6px;
    cursor:pointer;
    text-align:left;
    transition:background .2s ease;
  }
  .song-row:hover, .song-row:focus-visible{
    background:rgba(246,239,217,.07);
    outline:none;
  }
  .song-title{
    flex:1;
    font-family:Pretendard,sans-serif;
    font-weight:500;
    font-size:clamp(16px,4.4vw,18px);
    letter-spacing:0;
    line-height:1.45;
    color:var(--cream);
  }
  /* 곡 번호 */
  .song-num{
    flex:none;
    width:26px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:14px;
    letter-spacing:.04em;
    color:var(--gold-soft);
    text-align:right;
  }

  /* ── 곡 목록 응원 배지 ──────────────────────────────────────
     가사 데이터를 그대로 세어서 "이 곡에 무엇이 있는지"를 보여 준다.
     떼창은 줄 수까지 함께 적어 연습 우선순위를 가늠할 수 있게 했다. */
  .song-marks{
    flex:none;
    display:flex;align-items:center;gap:4px;
    margin-left:auto;
  }
  .song-mark{
    display:inline-flex;align-items:center;justify-content:center;gap:3px;
    height:21px;
    border-radius:999px;
    line-height:1;
  }
  .song-mark svg{ width:12px;height:12px; }
  .song-mark b{
    font-family:'Gmarket Sans',sans-serif;
    font-weight:400;
    font-size:11px;
    letter-spacing:.02em;
  }
  /* 떼창 — 숫자까지 보여 주는 알약 */
  .song-mark.chant{
    padding:0 8px 0 6px;
    background:rgba(245,148,44,0.16);
    color:var(--chant);
  }
  /* 나머지 — 아이콘만 있는 동그라미 */
  .song-mark.dot{ width:21px; }
  .song-mark.clap{ background:rgba(79,168,224,0.14);  color:var(--clap); }
  .song-mark.wave{ background:rgba(141,224,95,0.15);  color:var(--wave); }
  .song-mark.jump{ background:rgba(185,140,255,0.17); color:var(--jump); }
  .song-mark.spin{ background:rgba(255,134,200,0.16); color:var(--spin); }

  /* 폰 화면에서는 곡 제목이 두 줄로 밀리지 않도록,
     거의 모든 곡에 있는 표시(박수·손 흔들기)는 감추고
     떼창 줄 수와 드문 동작(점프·팔 돌리기)만 남긴다. */
  @media (max-width:520px){
    .song-mark.common{ display:none; }
  }
  @media (max-width:400px){
    .song-row{ gap:9px; }
  }

  /* 곡 목록 위 배지 설명 */
  .song-legend{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:10px 14px;
    margin:14px auto 0;
    padding:11px 12px;
    max-width:520px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(20,6,4,0.45);
  }
  .song-legend .legend-item{ font-size:11.5px; }
  .song-legend-note{
    margin:9px 0 0;
    font-size:11.5px;
    color:#9c8b6e;
    line-height:1.6;
  }
  @media (max-width:520px){
    .song-legend .legend-item.common{ opacity:.45; }
  }

  .credits{
    text-align:center;
    padding:30px 20px 60px;
    font-size:11px;
    color:#7a6a52;
    letter-spacing:.08em;
  }

  /* ---------- INFO ACCORDION (공연 정보 / 관객 입장안내) ---------- */
  /* 히어로(첫 화면) 안에 들어가는 공연 정보 카드 */
  .info-section{
    position:relative;z-index:1;
    width:100%;
    max-width:560px;
    margin:0 auto;
    text-align:left;
  }
  .info-card{
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    background:var(--surface);
  }
  /* ── 홈 아래 메뉴 — 한 장의 카드 안에 같은 모양의 줄로 정리 ──────
     응원가이드(주 버튼) → 공연 정보 · 가는 길 · 공식사이트 순서. */
  .menu-card{
    width:100%;
    max-width:560px;
    margin:14px auto 0;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    background:var(--surface);
    text-align:left;
  }
  .menu-card > * + *{ border-top:1px solid var(--line); }

  /* ── 맨 아래 바깥 링크 — 두 개를 한 줄에 나란히 (줄 수를 아끼기 위해) ── */
  .menu-links{
    display:flex;gap:8px;
    padding:9px 11px 11px;
  }
  .menu-chip{
    flex:1;min-width:0;
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 8px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(0,0,0,0.26);
    color:var(--gold-soft);
    font-family:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
  }
  .menu-chip:hover, .menu-chip:focus-visible{
    border-color:var(--teal); color:var(--teal); outline:none;
  }
  .chip-ico{ flex:none;display:flex;align-items:center; }
  .chip-ico svg{ width:14px;height:14px; }
  .chip-ico.warn{ color:#d9705a; }
  .menu-chip:hover .chip-ico.warn{ color:var(--teal); }
  .chip-label{
    font-size:12.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .chip-note{
    flex:none;
    color:var(--gold-soft);
    font-size:11px;
    white-space:nowrap;
  }

  /* 카드 안에서는 각 항목의 테두리를 없애 한 덩어리로 보이게 */
  .menu-card .info-card{
    border:none;border-radius:0;
    background:none;box-shadow:none;backdrop-filter:none;
    margin:0;
  }

  .menu-row{
    width:100%;
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;
    background:none;border:none;
    color:var(--cream);
    font-family:inherit;
    text-align:left;text-decoration:none;
    cursor:pointer;
    transition:background .2s ease;
  }
  .menu-row:hover, .menu-row:focus-visible{
    background:rgba(246,239,217,.07);
    outline:none;
  }
  .info-toggle-icon{
    flex:none;
    width:23px;height:23px;
    border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    background:none;
    border:0;
    color:var(--gold);
  }
  .info-toggle-icon svg{width:13px;height:13px;}
  .info-toggle-label{
    flex:1;
    min-width:0;
    font-family:'Gmarket Sans',sans-serif;
    font-size:13.5px;
    letter-spacing:.02em;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
    text-shadow:0 1px 6px rgba(0,0,0,0.6);
  }
  .info-toggle-chevron{
    flex:none;
    width:16px;height:16px;
    color:var(--gold-soft);
    display:flex;align-items:center;justify-content:center;
    transition:transform .3s ease;
  }
  .info-toggle-chevron svg{width:16px;height:16px;}
  .info-card.open .info-toggle-chevron{ transform:rotate(180deg); }

  /* 외부 링크 줄 (공식사이트) */
  .menu-row.ext .info-toggle-icon{
    background:none;
    color:var(--gold-soft);
  }
  .menu-row.ext .info-toggle-label{ color:var(--gold); font-size:13.5px; }
  .menu-row.ext .go{
    flex:none;
    font-size:13px;
    color:var(--gold-soft);
  }
  .menu-row.ext:hover .go{ color:var(--teal); }

  @media (max-width:400px){
    .menu-row{ padding:10px 12px; gap:9px; }
    .info-toggle-label{ font-size:13px; }
    .menu-links{ padding:8px 10px 10px; gap:7px; }
    .menu-chip{ padding:9px 6px; gap:5px; }
    .chip-label{ font-size:11.5px; }
    .chip-ico svg{ width:13px;height:13px; }
    .chip-note{ font-size:10px; }
  }

  .info-panel{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  }
  .info-card.open .info-panel{ opacity:1; }

  .info-panel-inner{
    padding:4px 20px 24px;
    border-top:1px solid var(--line);
    /* 내용이 살짝 아래로 흘러내리듯 나타나 아코디언 움직임과 자연스럽게 이어지게 함 */
    transform:translateY(-8px);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
  }
  .info-card.open .info-panel-inner{ transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .info-panel, .info-panel-inner, .info-toggle-chevron{ transition:none; }
  }
  .info-panel-title{
    margin:20px 0 4px;
    text-align:center;
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(17px,4.6vw,20px);
    letter-spacing:.02em;
    color:var(--gold);
    text-shadow:0 1px 6px rgba(0,0,0,0.6);
  }
  .info-panel-title .bar{
    color:var(--teal);
    margin:0 8px;
    font-weight:400;
  }
  .info-table-wrap{
    margin-top:16px;
    overflow-x:auto;
    border-radius:10px;
    border:1px solid var(--line);
  }
  /* 모바일에서도 PC와 똑같은 4열 표로 보이도록 글자·여백이 화면 폭에 맞춰 함께 줄어듦 */
  .info-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
    border-collapse:collapse;
    font-size:clamp(9.5px,2.7vw,12.5px);
  }
  .info-table thead th{
    background:var(--surface-raised);
    color:var(--gold);
    font-family:'Gmarket Sans',sans-serif;
    letter-spacing:.02em;
    font-size:clamp(9px,2.5vw,11.5px);
    text-transform:uppercase;
    padding:clamp(8px,2.4vw,12px) clamp(2px,1vw,10px);
    text-align:center;
    border-bottom:1px solid var(--line);
    white-space:nowrap;
  }
  .info-table td{
    padding:clamp(9px,2.6vw,13px) clamp(2px,1vw,10px);
    text-align:center;
    color:var(--cream);
    border-bottom:1px solid var(--line);
    white-space:nowrap;
    vertical-align:middle;
  }
  .info-table tbody tr:last-child td{ border-bottom:none; }
  .info-table tbody tr:nth-child(even){ background:rgba(246,239,217,0.03); }
  .info-table td.label{
    text-align:left;
    font-weight:700;
    color:#fff;
    white-space:normal;
    word-break:keep-all;      /* 한글은 단어 단위로 줄바꿈 */
    line-height:1.4;
  }
  .info-table td.note{
    text-align:left;
    font-size:clamp(9px,2.5vw,11.5px);
    color:#b9a98a;
    white-space:normal;
    word-break:keep-all;
    overflow-wrap:anywhere;
    line-height:1.45;
  }
  /* 열 너비 비율 — PC·모바일 동일 (합 100%) */
  .info-col-label{ width:26%; }
  .info-col-day{   width:23%; }
  .info-col-note{  width:28%; }
  .info-footnote{
    margin:14px 2px 0;
    font-size:11.5px;
    color:var(--gold-soft);
    line-height:1.6;
  }

  /* 공연 개요 — 항목 : 내용 목록 */
  .info-facts{
    margin:14px 0 0;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:9px 14px;
    font-size:13px;
    line-height:1.55;
  }
  .info-facts dt{
    color:var(--gold-soft);
    white-space:nowrap;
    font-size:12px;
    padding-top:1px;
  }
  .info-facts dd{
    margin:0;
    color:var(--cream);
  }
  .info-facts .em{ color:var(--gold); font-weight:700; }
  .info-facts .sub{
    display:block;
    margin-top:2px;
    font-size:11.5px;
    color:#a99a80;
  }
  .info-price{
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px 8px;
  }
  .info-price span{
    display:inline-block;
    padding:3px 9px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(0,0,0,0.25);
    font-size:12px;
    color:var(--cream);
  }
  .info-book-link{
    display:inline-flex;align-items:center;gap:7px;
    margin:16px 0 0;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(0,0,0,0.28);
    color:var(--gold);
    text-decoration:none;
    font-size:12.5px;
    transition:border-color .2s ease, color .2s ease;
  }
  .info-book-link:hover{ border-color:var(--teal); color:var(--teal); }
  .info-book-link svg{ width:14px;height:14px; }
  .info-divider{
    margin:22px 0 0;
    border:0;
    border-top:1px solid var(--line);
  }
  @media (max-width:400px){
    .info-facts{ grid-template-columns:1fr; gap:2px 0; }
    .info-facts dt{ margin-top:9px; }
  }

  /* 좁은 화면에서는 카드 안쪽 여백을 줄여 표가 쓸 수 있는 폭을 최대한 확보 */
  @media (max-width:480px){
    .info-panel-inner{ padding:4px 10px 20px; }
  }
  /* 아주 좁은 기기(320px 등) — 시간 열이 겹치지 않도록 비율과 글자를 한 단계 더 조임 */
  @media (max-width:359px){
    .info-panel-inner{ padding:4px 6px 18px; }
    .info-col-label{ width:24%; }
    .info-col-day{   width:25%; }
    .info-col-note{  width:26%; }
    .info-table{ font-size:8.8px; }
    .info-table thead th{ font-size:8.5px; padding:8px 1px; }
    .info-table td{ padding:9px 1px; }
    .info-table td.note{ font-size:8.5px; }
  }

  /* ---------- SONG DETAIL PAGE ---------- */
  .song-page{
    height:100svh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--bg-deep);
  }
  .song-body{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .song-fixed-top{
    flex:none;
  }
  .song-topbar{
    display:flex;align-items:center;gap:14px;
    /* 홈 화면에 설치해 실행하면 화면 맨 위(시계·배터리 영역)까지 앱이 그려지므로
       그만큼 안쪽으로 밀어 준다. --safe-top 은 아래 @media 에서 정해진다. */
    padding:calc(16px + var(--safe-top, 0px)) 18px 16px;
    background:#1c0705;
    border-bottom:1px solid var(--line);
    position:relative;
    z-index:2;
  }
  .back-btn{
    background:none;border:1px solid var(--line);color:var(--cream);
    border-radius:999px;
    padding:8px 14px;
    font-size:13px;
    cursor:pointer;
    display:flex;align-items:center;gap:6px;
  }
  .back-btn:hover{border-color:var(--teal);color:var(--teal);}
  .song-topbar h1{
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(16px,4.6vw,20px);
    margin:0;
    flex:1;
    text-align:center;
    padding-right:64px; /* balance back button */
  }

  /* ---------- 곡 이동 (이전/다음 + 제목 탭 → 곡 목록) ---------- */
  .song-topbar.has-nav{ gap:8px; padding:calc(12px + var(--safe-top, 0px)) 12px 12px; }
  .song-topbar.has-nav .back-btn{ flex:none; padding:8px 11px; }
  .song-nav{
    flex:1;
    min-width:0;
    display:flex;align-items:center;gap:6px;
  }
  .song-nav-btn{
    flex:none;
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    background:none;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--cream);
    cursor:pointer;
    transition:border-color .18s ease, color .18s ease, background .18s ease;
  }
  .song-nav-btn svg{width:18px;height:18px;}
  .song-nav-btn:hover, .song-nav-btn:focus-visible{
    border-color:var(--teal);color:var(--teal);
    background:rgba(94,205,196,0.10);
    outline:none;
  }
  .song-nav-btn:active{transform:scale(0.94);}

  /* 현재 곡 제목 = 목록 열기 버튼 */
  /* .song-topbar h1 의 padding-right(뒤로가기 버튼 균형용)를 여기서는 해제 */
  .song-topbar .song-picker-h{
    flex:1; min-width:0; margin:0; padding:0;
  }
  .song-picker-btn{
    width:100%;
    display:flex;align-items:center;justify-content:center;gap:7px;
    background:rgba(246,239,217,0.05);
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--cream);
    padding:7px 12px;
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease;
  }
  .song-picker-btn:hover, .song-picker-btn:focus-visible{
    border-color:var(--gold-soft);
    background:rgba(246,239,217,.07);
    outline:none;
  }
  .song-picker-title{
    min-width:0;
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(13px,3.9vw,17px);
    line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .song-picker-caret{
    flex:none;width:15px;height:15px;
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-soft);
    transition:transform .25s ease;
  }
  .song-picker-caret svg{width:15px;height:15px;}
  .song-picker-btn[aria-expanded="true"] .song-picker-caret{transform:rotate(180deg);}

  /* 곡 목록 시트 */
  .song-sheet{
    position:fixed;inset:0;z-index:60;
    display:flex;flex-direction:column;justify-content:flex-end;
    opacity:0;pointer-events:none;
    transition:opacity .22s ease;
  }
  .song-sheet.open{opacity:1;pointer-events:auto;}
  .song-sheet-backdrop{
    position:absolute;inset:0;
    background:rgba(8,2,2,0.68);
  }
  .song-sheet-panel{
    position:relative;
    margin:0 auto;
    width:100%;max-width:560px;
    max-height:76svh;
    display:flex;flex-direction:column;
    background:var(--surface-raised);
    border:1px solid var(--line);
    border-bottom:none;
    border-radius:10px 10px 0 0;
    box-shadow:0 -8px 24px rgba(0,0,0,0.3);
    padding-bottom:env(safe-area-inset-bottom, 0px);   /* 제스처 바에 안 가리게 */
    transform:translateY(14px);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
  }
  .song-sheet.open .song-sheet-panel{transform:translateY(0);}
  .song-sheet-head{
    flex:none;
    display:flex;align-items:center;gap:12px;
    padding:16px 18px 12px;
    border-bottom:1px solid var(--line);
  }
  .song-sheet-grip{
    position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:999px;
    background:rgba(233,217,163,0.25);
  }
  .song-sheet-title{
    flex:1;
    font-family:'Gmarket Sans',sans-serif;
    letter-spacing:.18em;
    font-size:12px;
    color:var(--gold);
    text-transform:uppercase;
  }
  .song-sheet-count{
    font-size:11px;color:#8d7d62;letter-spacing:.06em;
  }
  .song-sheet-close{
    flex:none;
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:1px solid var(--line);border-radius:50%;
    color:var(--cream);cursor:pointer;
  }
  .song-sheet-close svg{width:14px;height:14px;}
  .song-sheet-close:hover{border-color:var(--teal);color:var(--teal);}
  .sheet-search{
    flex:none;
    padding:10px 14px 6px;
  }
  .sheet-search .song-search-box{ padding:9px 13px; }
  .sheet-search .song-search-box input{ font-size:13.5px; }
  .sheet-empty{
    flex:none;
    margin:0;padding:28px 10px;
    text-align:center;
    color:#8d7d62;font-size:13px;
  }
  .song-sheet-list{
    flex:1;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;
    list-style:none;margin:0;
    padding:8px 10px calc(18px + env(safe-area-inset-bottom,0px));
  }
  .song-sheet-item{
    width:100%;
    display:flex;align-items:center;gap:12px;
    background:none;border:none;
    color:var(--cream);
    text-align:left;
    padding:13px 12px;
    border-radius:10px;
    cursor:pointer;
    transition:background .16s ease;
  }
  .song-sheet-item:hover, .song-sheet-item:focus-visible{
    background:rgba(246,239,217,0.07);outline:none;
  }
  .song-sheet-num{
    flex:none;width:24px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:12px;
    color:#8d7d62;
    font-variant-numeric:tabular-nums;
  }
  .song-sheet-name{
    flex:1;min-width:0;
    font-size:clamp(14px,3.9vw,15.5px);
    font-weight:500;line-height:1.45;
  }
  .song-sheet-item.current{
    background:rgba(246,239,217,.08);
    box-shadow:inset 2px 0 0 var(--gold);
  }
  .song-sheet-item.current .song-sheet-num{color:var(--gold);}
  .song-sheet-item.current .song-sheet-name{font-weight:800;}
  .song-sheet-now{
    flex:none;
    font-family:'Gmarket Sans',sans-serif;
    font-size:9px;letter-spacing:.14em;
    color:var(--gold-soft);
  }

  /* 아주 좁은 기기에서는 버튼·여백을 줄여 곡 제목이 최대한 길게 보이도록 */
  @media (max-width:360px){
    .song-topbar.has-nav{ padding:calc(10px + var(--safe-top, 0px)) 8px 10px; gap:6px; }
    .song-topbar.has-nav .back-btn{ padding:7px 9px; }
    .song-nav{ gap:4px; }
    .song-nav-btn{ width:30px;height:30px; }
    .song-nav-btn svg{ width:16px;height:16px; }
    .song-picker-btn{ padding:6px 9px; gap:5px; }
  }

  @media (prefers-reduced-motion: reduce){
    .song-sheet, .song-sheet-panel, .song-picker-caret{transition:none;}
  }

  .video-wrap{
    max-width:720px;margin:22px auto 0;padding:0 16px;
  }
  .video-frame{
    position:relative;width:100%;padding-top:56.25%;
    border-radius:12px;overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,0.5);
    border:1px solid var(--line);
    background:#000;
  }
  .video-frame iframe, .video-frame div{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .watch-on-yt{
    display:inline-block;
    margin-top:8px;
    font-size:11px;
    color:#8d7d62;
    text-decoration:none;
  }
  .watch-on-yt:hover{color:var(--teal);}


  .lyrics-note{
    max-width:720px;margin:16px auto 0;padding:0 16px;
    font-size:12px;color:#b9a98a;
    display:flex;gap:8px;align-items:flex-start;
  }
  .lyrics-note .dot{color:var(--teal);}

  .lyrics-legend{
    max-width:720px;margin:14px auto 12px;padding:0 16px;
    display:flex;gap:18px;flex-wrap:wrap;
  }
  .legend-item{
    display:flex;align-items:center;gap:7px;
    font-size:12px;color:#cbb99b;
  }
  .legend-icon{
    width:20px;height:20px;border-radius:50%;flex:none;
    display:flex;align-items:center;justify-content:center;
  }
  .legend-icon svg{width:12px;height:12px;}
  .legend-icon.chant{background:rgba(245,148,44,0.16);color:var(--chant);}
  .legend-icon.clap{background:rgba(79,168,224,0.16);color:var(--clap);}
  .legend-icon.wave{background:rgba(141,224,95,0.18);color:var(--wave);}
  .legend-icon.jump{background:rgba(185,140,255,0.18);color:var(--jump);}
  .legend-icon.spin{background:rgba(255,134,200,0.16);color:var(--spin);}
  .legend-num{
    font-family:'Gmarket Sans',sans-serif;font-weight:400;
    color:var(--chant);
    margin:0 1px;
  }

  .lyrics-scroll{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    border-top:1px solid var(--line);
    /* -webkit-overflow-scrolling:touch 는 iOS에서 잔상/깜빡임을 일으켜 제거함
       (iOS 13+ 는 기본으로 관성 스크롤이 동작) */
    transform:translateZ(0);
    isolation:isolate;
  }
  .lyrics-list{
    max-width:720px;margin:10px auto 0;padding:8px 10px 140px;
    list-style:none;
  }
  .lyric-line{
    width:100%;
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:none;border:none;
    padding:13px 10px;
    border-radius:10px;
    text-align:left;
    cursor:pointer;
    transition:background-color .18s ease;
  }
  .lyric-line:hover{background:rgba(246,239,217,0.06);}
  /* 각 가사 줄에 포함된 파트 종류를 아이콘으로 표시 (떼창/박수/둘 다) */
  .lyric-icons{
    flex:none;
    display:flex;
    flex-direction:column;
    gap:4px;
    width:22px;
    padding-top:2px;
  }
  .lyric-type-icon{
    width:22px;height:22px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }
  .lyric-type-icon svg{width:13px;height:13px;}
  .lyric-type-icon.chant{background:rgba(245,148,44,0.16);color:var(--chant);}
  .lyric-type-icon.clap{background:rgba(79,168,224,0.16);color:var(--clap);}
  .lyric-type-icon.wave{background:rgba(141,224,95,0.18);color:var(--wave);}

  /* ── 가사 안에 글자처럼 끼워 넣는 움직이는 아이콘 ────────────────
     가사 텍스트 아무 곳에나 [wave] / [clap] 이라고 적으면
     그 자리에 흔드는 손 · 박수 아이콘이 실시간으로 움직인다. */
  .ico{
    display:inline-flex;
    align-items:center;justify-content:center;
    vertical-align:-0.2em;
    margin:0 2px;
  }
  /* 손 흔들기 — 손목을 축으로 좌우로 살랑살랑 */
  .ico-wave{
    width:1.15em;height:1.15em;
    color:var(--wave);
  }
  .ico-wave svg{
    width:100%;height:100%;
    transform-origin:60% 85%;
    animation:handWave 1.1s ease-in-out infinite;
  }
  @keyframes handWave{
    0%,100%{ transform:rotate(-16deg); }
    50%    { transform:rotate(16deg); }
  }

  /* 박수 — 두 손이 가운데로 모였다 벌어지고, 마주치는 순간 반짝 */
  .ico-clap{
    position:relative;
    width:1.5em;height:1.15em;
    color:var(--clap);
  }
  .ico-clap .hand{
    position:absolute;top:0;
    width:0.85em;height:1.15em;
    display:block;
  }
  .ico-clap .hand svg{width:100%;height:100%;}
  .ico-clap .hand.l{ left:0;  animation:clapL .62s ease-in-out infinite; }
  .ico-clap .hand.r{ right:0; animation:clapR .62s ease-in-out infinite; }
  .ico-clap .spark{
    position:absolute;
    left:50%;top:-0.12em;
    width:0.9em;height:0.9em;
    margin-left:-0.45em;
    color:var(--gold);
    opacity:0;
    animation:clapSpark .62s ease-out infinite;
    pointer-events:none;
  }
  .ico-clap .spark svg{width:100%;height:100%;}
  @keyframes clapL{
    0%,100%{ transform:translateX(-8%) rotate(-14deg); }
    46%,56%{ transform:translateX(6%)  rotate(-2deg); }
  }
  @keyframes clapR{
    0%,100%{ transform:scaleX(-1) translateX(-8%) rotate(-14deg); }
    46%,56%{ transform:scaleX(-1) translateX(6%)  rotate(-2deg); }
  }
  @keyframes clapSpark{
    0%,38%  { opacity:0; transform:scale(.5)  translateY(2px); }
    50%     { opacity:.95; transform:scale(1) translateY(0); }
    74%,100%{ opacity:0; transform:scale(1.3) translateY(-2px); }
  }

  /* 점프 — 바닥선 위에서 웅크렸다 튀어오름 */
  .ico-jump{
    position:relative;
    width:1.3em;height:1.45em;
    vertical-align:-0.3em;
    color:var(--jump);
  }
  .ico-jump svg{
    position:absolute;left:0;top:0;
    width:100%;height:84%;
    transform-origin:50% 100%;
    animation:iconJump .72s cubic-bezier(.3,.7,.4,1) infinite;
  }
  .ico-jump .ground{
    position:absolute;
    left:6%;right:6%;bottom:0;
    height:2px;border-radius:2px;
    background:currentColor;
    opacity:.42;
  }
  @keyframes iconJump{
    0%      { transform:translateY(0)    scaleY(1); }
    14%     { transform:translateY(5%)   scaleY(.91); }   /* 웅크림 */
    46%     { transform:translateY(-17%) scaleY(1.03); }  /* 점프 (높이 조절은 이 값) */
    78%,100%{ transform:translateY(0)    scaleY(1); }
  }

  /* 머리 위로 팔 돌리기 — 손을 든 채로 팔 전체가 기울며 손이 작은 원을 그린다 */
  .ico-spin{
    position:relative;
    width:1.55em;height:1.55em;
    vertical-align:-0.38em;
    color:var(--spin);
  }
  .ico-spin .body,
  .ico-spin .arm{
    position:absolute;inset:0;
    width:100%;height:100%;
  }
  .ico-spin .arm{
    transform-origin:47.5% 67.1%;     /* 어깨 위치 (11.4, 16.1) */
    animation:iconArmCircle 1.15s linear infinite;
  }
  /* 든 손이 머리 옆에서 작은 원을 그리도록 —
     좌우로 기울이기(rotate) + 팔 길이 원근감(scale) 을 90° 어긋나게 겹친다 */
  @keyframes iconArmCircle{
    0%     { transform:rotate(11.00deg) scale(1.000); }
    8.333% { transform:rotate(9.53deg) scale(1.070); }
    16.667%{ transform:rotate(5.50deg) scale(1.121); }
    25.000%{ transform:rotate(0.00deg) scale(1.140); }
    33.333%{ transform:rotate(-5.50deg) scale(1.121); }
    41.667%{ transform:rotate(-9.53deg) scale(1.070); }
    50.000%{ transform:rotate(-11.00deg) scale(1.000); }
    58.333%{ transform:rotate(-9.53deg) scale(0.930); }
    66.667%{ transform:rotate(-5.50deg) scale(0.879); }
    75.000%{ transform:rotate(-0.00deg) scale(0.860); }
    83.333%{ transform:rotate(5.50deg) scale(0.879); }
    91.667%{ transform:rotate(9.53deg) scale(0.930); }
    100%   { transform:rotate(11.00deg) scale(1.000); }
  }
  .lyric-line.active .ico-spin .arm{ animation-duration:.8s; }
  .lyric-line.active .ico-spin{ filter:drop-shadow(0 0 6px rgba(255,134,200,0.5)); }

  /* 떼창(마이크) — 살짝 커졌다 작아지는 맥박 */
  .ico-mic{
    width:1.05em;height:1.05em;
    color:var(--chant);
  }
  .ico-mic svg{
    width:100%;height:100%;
    animation:micPulse 1.2s ease-in-out infinite;
  }
  @keyframes micPulse{
    0%,100%{ transform:scale(1); }
    50%    { transform:scale(1.18); }
  }

  /* 지금 재생 중인 줄의 아이콘은 조금 더 빠르고 또렷하게 */
  .lyric-line.active .ico-wave svg{ animation-duration:.75s; }
  .lyric-line.active .ico-clap .hand{ animation-duration:.45s; }
  .lyric-line.active .ico-clap .spark{ animation-duration:.45s; }
  .lyric-line.active .ico-wave{ filter:drop-shadow(0 0 6px rgba(141,224,95,0.5)); }
  .lyric-line.active .ico-clap{ filter:drop-shadow(0 0 6px rgba(79,168,224,0.45)); }

  .lyric-line.active .ico-mic svg{ animation-duration:.8s; }
  .lyric-line.active .ico-jump svg{ animation-duration:.5s; }
  .lyric-line.active .ico-jump{ filter:drop-shadow(0 0 6px rgba(185,140,255,0.5)); }

  /* 화면에 보이는 가사 줄의 아이콘만 실제로 움직인다.
     (한 곡에 아이콘이 100개 넘게 들어가므로 전부 돌리면 발열·배터리 소모가 큼) */
  .lyric-line .ico-wave svg,
  .lyric-line .ico-mic svg,
  .lyric-line .ico-jump svg,
  .lyric-line .ico-spin .arm,
  .lyric-line .ico-clap .hand,
  .lyric-line .ico-clap .spark{ animation-play-state:paused; }
  .lyric-line.in-view .ico-wave svg,
  .lyric-line.in-view .ico-mic svg,
  .lyric-line.in-view .ico-jump svg,
  .lyric-line.in-view .ico-spin .arm,
  .lyric-line.in-view .ico-clap .hand,
  .lyric-line.in-view .ico-clap .spark{ animation-play-state:running; }

  /* 왼쪽 종류 표시(동그라미)와 범례에도 같은 움직이는 아이콘을 그대로 사용.
     em 기준 크기라서 font-size 만 정해 주면 동그라미 안에 딱 맞게 들어간다. */
  .lyric-type-icon .ico{ margin:0; font-size:11px; }
  .legend-icon .ico{ margin:0; font-size:10px; }
  .lyric-type-icon .ico svg, .legend-icon .ico svg{ width:100%; height:100%; }
  .lyric-type-icon .ico-mic, .legend-icon .ico-mic,
  .lyric-type-icon .ico-wave, .legend-icon .ico-wave,
  .lyric-type-icon .ico-clap, .legend-icon .ico-clap{ color:inherit; }

  @media (prefers-reduced-motion: reduce){
    .ico-wave svg, .ico-clap .hand, .ico-clap .spark, .ico-mic svg, .ico-jump svg,
    .ico-spin .arm{ animation:none; }
    .ico-clap .hand.r{ transform:scaleX(-1); }
  }
  .lyric-body{min-width:0;display:block;flex:1;}
  .lyric-jp{
    display:block;
    font-size:clamp(13px,3.6vw,14px);
    color:#a99a80;
    line-height:1.5;
  }
  .lyric-ko{
    display:block;
    font-size:clamp(15px,4.2vw,17px);
    font-weight:800;
    line-height:1.5;
    color:var(--cream);
  }
  .lyric-tr{
    display:block;
    font-size:clamp(12px,3.4vw,13px);
    color:#8d7d62;
    line-height:1.5;
    margin-top:1px;
  }
  /* 4번째 줄 — 코러스처럼 뒤에 깔리는 떼창 (백킹 코러스) */
  .lyric-bg{
    display:block;
    margin-top:3px;
    font-size:clamp(13px,3.6vw,15px);
    font-weight:700;
    line-height:1.5;
    color:var(--chant);
    font-style:italic;
  }
  .seg-chant{color:var(--chant);}
  .seg-clap{color:var(--clap);}

  .lyric-line.active{
    background:rgba(246,239,217,.08);
    box-shadow:inset 2px 0 0 var(--gold);
  }

  .player-controls{
    position:fixed;
    right:18px;
    bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    z-index:20;
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  }

  .autoscroll-toggle{
    display:flex;align-items:center;gap:7px;
    min-height:40px;
    background:var(--surface-raised);
    border:1px solid var(--line);
    border-radius:8px;
    padding:6px 10px;
    cursor:pointer;
    transition:opacity .18s ease, transform .12s ease;
  }
  .autoscroll-toggle:active{transform:scale(0.97);}
  .autoscroll-toggle:not(.active){opacity:.72;}
  .autoscroll-toggle.active{border-color:var(--gold-soft);}
  .autoscroll-label{
    font-family:'Gmarket Sans',sans-serif;
    letter-spacing:.05em;
    font-size:11px;
    color:var(--gold);
    white-space:nowrap;
  }
  .autoscroll-switch{
    width:22px;height:13px;flex:none;
    border-radius:999px;
    background:#160a06;
    border:1px solid var(--gold-soft);
    position:relative;
    transition:background .2s ease;
  }
  .autoscroll-knob{
    position:absolute;top:1px;left:1px;
    width:10px;height:10px;
    border-radius:50%;
    background:#8d8f93;
    transition:transform .2s ease, background .2s ease;
  }
  .autoscroll-toggle.active .autoscroll-switch{background:#241109;}
  .autoscroll-toggle.active .autoscroll-knob{
    transform:translateX(9px);
    background:#aab6c9;
  }


  /* ── 떼창만 듣기 ─────────────────────────────────────────────
     떼창 구간만 이어서 들려주는 연습 모드.
     켜져 있는 동안에만 가사 위에 얇은 띠가 하나 생긴다. */
  .chant-bar{
    flex:none;
    display:flex;align-items:center;gap:7px;
    margin:0 12px 6px;
    padding:5px 6px 5px 10px;
    border:1px solid var(--gold-soft);
    border-radius:8px;
    background:var(--surface-raised);
  }
  .chant-bar[hidden]{ display:none; }
  .chant-ico{
    flex:none;display:flex;
    width:14px;height:14px;
    color:var(--chant, var(--gold));
  }
  .chant-ico svg{ width:100%;height:100%; }
  .chant-toggle .chant-ico{ margin-right:-1px; }
  .chant-toggle:not(.active) .chant-ico{ opacity:.7; }
  .chant-toggle.active{ background:var(--gold-soft); }
  .chant-toggle.active .venue-label, .chant-toggle.active .chant-ico{ color:#1b1109; }
  .chant-bar-label{
    font-family:'Gmarket Sans',sans-serif;
    font-size:11.5px;letter-spacing:.02em;
    color:var(--gold);white-space:nowrap;
  }
  .chant-bar-msg{
    flex:1 1 auto;min-width:0;
    font-size:11.5px;color:var(--cream);opacity:.66;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .chant-bar-count{
    flex:none;
    font-size:11.5px;font-variant-numeric:tabular-nums;
    color:var(--gold-soft);white-space:nowrap;
  }
  .chant-step, .chant-bar-off{
    flex:none;
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);
    border-radius:8px;
    background:none;
    color:var(--gold);
    cursor:pointer;
    transition:opacity .15s ease, transform .12s ease;
  }
  .chant-step:active, .chant-bar-off:active{ transform:scale(0.94); }
  .chant-step:disabled{ opacity:.28;cursor:default; }
  .chant-step svg{ width:15px;height:15px; }
  .chant-bar-off{ border:0;color:var(--gold-soft);opacity:.75; }
  .chant-bar-off svg{ width:14px;height:14px; }

  /* 폭이 좁은 폰에서 아래 버튼 셋이 두 줄로 접히면 가사가 그만큼 가려진다.
     버튼 크기는 그대로 두고 사이 여백만 줄여 한 줄에 들어가게 한다. */
  @media (max-width:380px){
    .chant-bar{ margin-left:8px;margin-right:8px;gap:6px; }
  }

  /* 켜져 있는 동안 떼창이 아닌 줄은 뒤로 물러나 있게 */
  .song-page.chant-only .lyric-line:not(.is-chant){ opacity:.3; }
  .song-page.chant-only .lyric-line:not(.is-chant).active{ opacity:.6; }

  /* ── 앱 안내 배너 (새 버전 / 오프라인 / 홈 화면 추가) ───────── */
  .app-banner{
    position:fixed;
    left:12px;right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:60;
    display:none;
    align-items:center;gap:10px;
    padding:11px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface-raised);
    box-shadow:0 4px 16px rgba(0,0,0,0.3);
    font-size:12.5px;
    line-height:1.5;
    color:var(--cream);
  }
  .app-banner.show{display:flex;}
  .app-banner .msg{flex:1;min-width:0;}
  .app-banner .msg b{color:var(--gold);font-weight:700;}
  .app-banner button{
    flex:none;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--surface);
    color:var(--gold);
    font-family:inherit;font-size:12px;
    padding:7px 12px;
    cursor:pointer;
  }
  .app-banner button:hover{border-color:var(--teal);color:var(--teal);}
  .app-banner .close{
    padding:7px 10px;color:#8d7d62;
  }
  .app-banner.offline .msg b{color:var(--gold);}


  /* ── 오늘의 일정 카드 (공연 당일에만 나타남) ────────────────── */
  .today-card{
    width:100%;max-width:420px;
    margin:18px auto 0;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface);
    padding:14px 15px 12px;
    text-align:left;
  }
  .today-head{
    display:flex;align-items:center;gap:8px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:12px;letter-spacing:.14em;
    color:var(--chant);
  }
  .today-head .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--chant);
  }
  .today-now{
    margin-top:8px;
    font-size:14px;line-height:1.5;
    color:var(--cream);
  }
  .today-now b{ color:#fff; }
  .today-now .left{
    font-family:'Gmarket Sans',sans-serif;
    font-size:17px;letter-spacing:.03em;
    color:var(--gold);
    font-variant-numeric:tabular-nums;
  }
  .today-list{
    list-style:none;margin:11px 0 0;padding:0;
    border-top:1px solid var(--line);
  }
  .today-list li{
    display:flex;align-items:baseline;gap:10px;
    padding:6px 0 5px;
    font-size:12.5px;
    color:#b9a98a;
  }
  .today-list li .t{
    font-family:'Gmarket Sans',sans-serif;
    font-size:12px;letter-spacing:.03em;
    width:42px;flex:none;
    color:var(--gold-soft);
  }
  .today-list li.past{ opacity:.4; }
  .today-list li.now{ color:#fff; }
  .today-list li.now .t{ color:var(--chant); }

  /* ── 준비물 체크 / 가는 길 카드 ───────────────────────────── */
  .info-card.solo{ margin-top:9px; }
  .info-card.solo .info-toggle{
    width:100%;
    justify-content:flex-start;
    text-align:left;
    gap:10px;
  }
  .info-card.solo .info-toggle-label{ flex:none; }
  .info-card.solo .info-toggle-chevron{ margin-left:auto; }
  .way-addr{
    margin-top:14px;
    font-size:13.5px;line-height:1.6;
  }
  .way-addr b{ display:block;color:var(--gold);font-size:15px; }
  .way-addr span{ color:#b9a98a;font-size:12.5px; }
  .way-note{
    margin:14px 0 0;
    padding:10px 12px;
    border-left:2px solid var(--chant);
    background:rgba(245,148,44,0.08);
    border-radius:0 8px 8px 0;
    font-size:12.5px;line-height:1.6;
    color:#e2d4b8;
  }
  .way-note b{ color:#fff; }
  /* 놓치면 곤란한 안내 — 조금 더 눈에 띄게 */
  .way-note.warn-note{
    border-left-color:var(--red, #e0523c);
    background:rgba(224,82,60,0.12);
  }
  .way-sec{ margin-top:18px; }
  .way-sec h4{
    margin:0 0 8px;
    display:flex;align-items:baseline;gap:8px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:14px;letter-spacing:.02em;
    color:var(--gold);
  }
  .way-sec h4 span{
    font-family:Pretendard,sans-serif;
    font-size:11.5px;font-weight:400;
    color:#8d7d62;
  }
  .way-block{
    margin-bottom:10px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(0,0,0,0.22);
  }
  .way-block-t{
    font-size:12.5px;font-weight:700;
    color:var(--cream);
    margin-bottom:6px;
  }
  .way-block-t b{ color:var(--teal); }
  .way-ul{
    list-style:none;margin:0;padding:0;
  }
  .way-ul li{
    position:relative;
    padding-left:11px;
    margin-top:5px;
    font-size:12.5px;line-height:1.6;
    color:#b9a98a;
  }
  .way-ul li::before{
    content:"";
    position:absolute;left:0;top:8px;
    width:4px;height:4px;border-radius:50%;
    background:var(--gold-soft);
    opacity:.7;
  }
  .way-ul li b{ color:var(--cream); }
  .way-hint{
    display:block;margin-top:2px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:11.5px;letter-spacing:.02em;
    color:var(--teal);
  }
  .way-ul.warn li::before{ background:var(--chant);opacity:.85; }
  .way-ul.warn li{ color:#a99a80;font-size:12px; }

  .way-btns{
    display:flex;flex-wrap:wrap;gap:7px;
    margin-top:12px;
  }
  .way-btns a, .way-btns button{
    flex:1 1 auto;
    min-width:88px;
    text-align:center;
    padding:9px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(0,0,0,0.28);
    color:var(--cream);
    font-family:inherit;font-size:12.5px;
    text-decoration:none;cursor:pointer;
    transition:border-color .2s ease,color .2s ease;
  }
  .way-btns a:hover, .way-btns button:hover{ border-color:var(--teal);color:var(--teal); }

  /* ── 공지 · 안내 이미지 ───────────────────────────────────── */
  body.no-scroll{ overflow:hidden; }
  .notice-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
    margin-bottom:12px;
  }
  .notice-item{
    display:block;width:100%;
    padding:0;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(0,0,0,0.28);
    overflow:hidden;
    cursor:zoom-in;
    text-align:left;
    font-family:inherit;
    transition:border-color .18s ease, transform .12s ease;
  }
  .notice-item:hover, .notice-item:focus-visible{ border-color:var(--teal);outline:none; }
  .notice-item:active{ transform:scale(0.985); }
  .notice-item img{
    display:block;width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;
    object-position:top center;
    background:#2a0f0a;
  }
  /* 가로로 긴 공지(공연장 맵·티켓 카드 등)는 잘라내면 못 알아보므로
     한 줄을 통째로 쓰고 사진 전체를 그대로 보여 준다. */
  .notice-item.wide{ grid-column:1 / -1; }
  .notice-item.wide img{
    aspect-ratio:auto;
    object-fit:contain;
    background:#fff;
  }
  .notice-item .cap{
    display:block;
    padding:8px 9px 9px;
    font-size:11.5px;font-weight:700;line-height:1.4;
    color:var(--cream);
  }
  .notice-empty{
    margin:0 0 12px;
    padding:22px 14px;
    border:1px dashed var(--line);
    border-radius:12px;
    text-align:center;
    font-size:12.5px;line-height:1.7;
    color:#8d7d62;
  }
  .notice-empty b{ color:var(--gold-soft); }

  /* 크게 보기 */
  .notice-view{
    position:fixed;inset:0;z-index:80;
    display:flex;flex-direction:column;
    background:#0a0302;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
  }
  .notice-view.open{ opacity:1;pointer-events:auto; }
  .nv-head{
    flex:none;
    display:flex;align-items:center;gap:10px;
    padding:calc(12px + var(--safe-top, 0px)) 14px 12px;
    border-bottom:1px solid var(--line);
  }
  .nv-title{
    flex:1;min-width:0;
    font-family:'Gmarket Sans',sans-serif;
    font-size:14px;color:var(--cream);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .nv-count{
    flex:none;
    font-family:'Gmarket Sans',sans-serif;
    font-size:11px;letter-spacing:.08em;color:#8d7d62;
  }
  .nv-scroll{
    flex:1;min-height:0;
    overflow:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:10px;
  }
  .nv-scroll img{
    display:block;
    width:100%;max-width:640px;
    margin:0 auto;
    border-radius:8px;
  }
  .notice-view.zoom .nv-scroll img{ width:230%;max-width:none;margin:0; }
  .nv-nav{
    flex:none;
    display:flex;gap:8px;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--line);
  }
  .nv-btn{
    flex:1;
    padding:11px 8px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(0,0,0,0.3);
    color:var(--cream);
    font-family:inherit;font-size:12.5px;font-weight:700;
    cursor:pointer;
    transition:border-color .18s ease,color .18s ease;
  }
  .nv-btn:hover{ border-color:var(--teal);color:var(--teal); }
  .nv-btn[disabled]{ opacity:.4;cursor:default; }
  .nv-btn.close{
    flex:none;width:34px;height:34px;padding:0;
    border-radius:50%;font-size:14px;
  }

  /* ── 좌석 배치도 ──────────────────────────────────────────────
     그림 파일이 아니라 SVG 로 직접 그린다. 그래서 확대해도 깨지지 않고
     인터넷이 없어도(공연장에서도) 그대로 열린다. */
  .seat-wrap{
    margin:2px 0 0;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(0,0,0,0.30);
    padding:12px 10px 10px;
  }
  .seat-map{ display:block;width:100%;height:auto; }
  .seat-map text{
    font-family:Pretendard,sans-serif;
    font-weight:700;
    fill:#20100a;
    text-anchor:middle;
    dominant-baseline:central;
    pointer-events:none;
    user-select:none;
  }
  .seat-blk{ cursor:pointer; }
  .seat-blk polygon{
    stroke:rgba(20,6,4,0.6);
    stroke-width:2;          /* 구역 사이 간격을 또렷하게 */
    stroke-linejoin:round;
    transition:opacity .15s ease;
  }
  .seat-blk:hover polygon{ opacity:.82; }
  /* 구역 색 — 예매처 등급 구분과 같은 순서(플로어 / R석 / S석) */
  .seat-blk.floor polygon{ fill:#e2543a; }
  .seat-blk.r     polygon{ fill:#e0b452; }
  .seat-blk.s     polygon{ fill:#5ecdc4; }
  .seat-wheel     { fill:#9b7ad6; }
  .seat-stage     { fill:#b9a98a;stroke:rgba(20,6,4,0.6);stroke-width:2;stroke-linejoin:round; }
  .seat-stage-t   { fill:#20100a;font-size:19px;letter-spacing:.06em; }
  /* 고른 구역 */
  .seat-blk.selected polygon{
    stroke:var(--cream);
    stroke-width:3.5;
    filter:drop-shadow(0 0 7px rgba(246,239,217,0.6));
  }

  .seat-legend{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:7px 13px;
    margin:11px 2px 0;
  }
  .seat-legend span{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11.5px;color:#cbb99b;
  }
  .seat-legend i{
    width:11px;height:11px;border-radius:3px;flex:none;
  }
  .seat-readout{
    margin:11px 0 0;
    min-height:54px;
    border-radius:11px;
    border:1px solid var(--line);
    background:rgba(0,0,0,0.32);
    padding:10px 12px;
    font-size:12.5px;line-height:1.65;
    color:#b9a98a;
  }
  .seat-readout b{ color:var(--cream);font-size:13.5px; }
  .seat-readout .grade{
    display:inline-block;
    margin-right:7px;padding:1px 8px;
    border-radius:999px;
    font-size:11px;font-weight:700;
    color:#20100a;
  }
  .seat-readout .grade.floor{ background:#e2543a; }
  .seat-readout .grade.r{ background:#e0b452; }
  .seat-readout .grade.s{ background:#5ecdc4; }
  .seat-readout .warn{ color:#e8b98c; }
  .seat-readout .hi{ color:var(--cream);font-weight:700; }
  .seat-clear{
    margin-left:6px;
    border:none;background:none;
    color:#8d7d62;font-size:11.5px;
    text-decoration:underline;cursor:pointer;
    font-family:inherit;
  }

  /* ── 홈 — 폰 플래시 안내 한 문단 ───────────────────────────────
     접는 카드가 아니라 늘 펼쳐져 있는 짧은 글. 메뉴 카드와 같은 폭으로
     맞춰 두고, 테두리 대신 왼쪽 선 하나로만 구분해 조용하게 둡니다. */
  .home-note{
    display:flex;align-items:flex-start;gap:11px;
    width:100%;max-width:560px;
    margin:14px auto 0;
    padding:13px 14px 13px 13px;
    border:1px solid var(--line);
    border-left:2px solid var(--gold-soft);
    border-radius:8px;
    background:var(--surface);
    text-align:left;
  }
  .home-note-ico{
    flex:none;display:flex;margin-top:1px;
    color:var(--gold-soft);opacity:.85;
  }
  .home-note-ico svg{ width:17px;height:17px; }
  .home-note-body{ min-width:0; }
  .home-note-body b{
    display:block;
    margin-bottom:5px;
    color:var(--gold);
    font-size:13px;letter-spacing:.01em;
  }
  .home-note-body p{
    margin:0;
    color:var(--cream);opacity:.78;
    font-size:12.5px;line-height:1.66;
    word-break:keep-all;
  }
  .home-note-body p.sub{
    margin-top:5px;
    font-size:11.5px;opacity:.55;
  }
  @media (max-width:380px){
    .home-note{ padding:12px;gap:9px; }
    .home-note-body p{ font-size:12px; }
  }

  /* ── 홈 맨 아래 — 공유 ─────────────────────────────────────── */
  .home-foot{
    display:flex;align-items:center;justify-content:flex-end;
    flex-wrap:wrap;gap:12px;
    margin:18px auto 0;
    width:100%;max-width:560px;
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  .share-btn{
    display:inline-flex;align-items:center;gap:7px;
    min-height:44px;
    padding:8px 4px;
    border:0;
    background:none;
    color:var(--gold);
    font-family:inherit;font-size:12.5px;
    cursor:pointer;
    transition:color .2s ease;
  }
  .share-btn:hover{ color:var(--cream); }
  .share-btn svg{ width:14px;height:14px; }


  /* ── 단축모드 ────────────────────────────────────────────────
     영상을 화면에서 완전히 감추고 한글 발음 가사만 크게 보여 준다.
     플레이어는 화면 밖으로 옮겨 두기만 하므로(없애지 않음)
     온라인이면 소리도 그대로 나오고 가사 동기화도 계속 동작한다. */
  /* 단축모드에서는 영상이 안 보이므로 재생/정지 버튼을 따로 둔다 */
  .play-toggle{
    display:none;
    align-items:center;justify-content:center;
    width:48px;height:48px;
    border-radius:50%;
    border:1px solid var(--gold-soft);
    background:var(--surface-raised);
    color:var(--gold);
    cursor:pointer;
    transition:transform .12s ease, border-color .18s ease, color .18s ease;
  }
  .play-toggle:active{ transform:scale(0.94); }
  .play-toggle svg{ width:20px;height:20px; }
  .play-toggle.playing{ border-color:var(--wave); color:var(--wave); }
  .song-page.venue .play-toggle{ display:flex; }
  /* 오프라인이면 재생할 것이 없으므로 숨김 */
  .song-page.venue.offline .play-toggle{ display:none; }

  .venue-toggle{
    display:flex;align-items:center;gap:7px;
    min-height:40px;
    background:var(--surface-raised);
    border:1px solid var(--line);
    border-radius:8px;
    padding:6px 10px;
    cursor:pointer;
    transition:opacity .18s ease, transform .12s ease, border-color .18s ease;
  }
  .venue-toggle:active{ transform:scale(0.97); }
  .venue-toggle:not(.active){ opacity:.72; }
  .venue-toggle.active{ border-color:var(--gold-soft); }
  .venue-label{
    font-family:'Gmarket Sans',sans-serif;
    font-size:11px;letter-spacing:.04em;
    color:var(--gold-soft);
    white-space:nowrap;
  }
  .venue-toggle.active .venue-label{ color:var(--gold); }
  .venue-switch{
    width:26px;height:15px;border-radius:999px;
    background:#3a2a1c;
    display:flex;align-items:center;padding:2px;
    transition:background .2s ease;
  }
  .venue-knob{
    width:11px;height:11px;border-radius:50%;
    background:#8d8f93;
    transition:transform .2s ease, background .2s ease;
  }
  .venue-toggle.active .venue-switch{ background:#51432d; }
  .venue-toggle.active .venue-knob{ transform:translateX(11px); background:var(--gold); }

  /* 켜진 상태 — 영상 영역은 화면에서 사라지고 가사만 남는다 */
  .song-page.venue .song-body{ flex-direction:column; }
  .song-page.venue .song-fixed-top{
    flex:none;
    height:0;                        /* 영상 자리를 완전히 없앰 */
    padding:0;margin:0;
    overflow:visible;
  }
  /* 플레이어는 지우지 않고 화면 밖으로만 옮긴다 → 소리는 계속 나옴 */
  .song-page.venue .video-wrap{
    position:fixed;
    left:-10000px;top:0;
    width:220px;
    max-width:220px !important;
    margin:0;padding:0;
    opacity:0;
    pointer-events:none;
  }
  .song-page.venue .watch-on-yt,
  .song-page.venue .lyrics-note,
  .song-page.venue .lyrics-legend,
  .song-page.venue .venue-hint{ display:none; }
  .song-page.venue .lyrics-scroll{
    flex:1;min-height:0;
    border-left:none;border-top:1px solid var(--line);
  }
  /* 발음 줄만 크게. 원문·해석은 글자만 감추고,
     그 줄에 들어 있던 응원 아이콘([clap] 등)은 그대로 보이게 한다. */
  .song-page.venue .lyric-jp,
  .song-page.venue .lyric-tr{
    font-size:0;
    line-height:0;
    margin:0;
  }
  .song-page.venue .lyric-jp .ico,
  .song-page.venue .lyric-tr .ico{
    font-size:16px;
    line-height:1;
    margin:0 3px 2px 0;
  }
  .song-page.venue .lyric-ko{
    font-size:clamp(19px,5.6vw,26px);
    line-height:1.45;
  }
  .song-page.venue .lyric-bg{ font-size:clamp(15px,4.4vw,19px); }
  .song-page.venue .lyric-line{ padding:15px 10px; }
  .song-page.venue .lyric-icons{ width:24px; }

  .venue-hint{ display:none; }

  /* ── 화면 안전영역(노치·상태바·제스처바) ─────────────────────
     브라우저 탭으로 열면 0, 홈 화면에 설치해 실행하면 실제 상태바 높이가 들어온다.
     일부 기기는 값을 0 으로 알려 주므로, 설치 실행일 때는 최소 28px 를 보장한다. */
  :root{ --safe-top: env(safe-area-inset-top, 0px); }
  @media all and (display-mode: standalone){
    :root{ --safe-top: max(env(safe-area-inset-top, 0px), 28px); }
  }
  @media all and (display-mode: fullscreen){
    :root{ --safe-top: max(env(safe-area-inset-top, 0px), 28px); }
  }

  .icon-sprite{position:absolute;width:0;height:0;overflow:hidden;}
  #app{min-height:100svh;}

  /* 곡 화면은 DOM 에서 지우지 않고 화면 밖으로 치워 둔다.
     (display:none 이나 iframe 이동은 유튜브 플레이어를 리셋시켜
      모바일에서 소리 권한이 풀리기 때문) */
  .song-view.offstage{
    position:fixed;
    top:0; left:0;
    width:100vw; height:100svh;
    transform:translateX(-200vw);
    pointer-events:none;
    overflow:hidden;
  }
  @media (min-width:720px){
    .hero{padding-top:72px;}
  }

  /* ---------- PC 등 큰 화면: 영상 왼쪽 / 가사 오른쪽 2단 ---------- */
  @media (min-width:900px){
    .song-body{
      flex-direction:row;
      align-items:stretch;
    }
    .song-fixed-top{
      flex:1 1 62%;
      min-width:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      overflow-y:auto;
      padding:16px 0 24px;
    }
    .song-fixed-top .video-wrap{
      margin-top:0;
      width:100%;
      /* 가로는 컬럼 폭 전체를 쓰되, 세로가 화면을 넘지 않도록 16:9 기준으로 제한 */
      max-width:min(100%, calc((100svh - 250px) * 16 / 9));
      padding:0 24px;
    }
    .lyrics-scroll{
      flex:1 1 38%;
      min-width:0;
      border-top:none;
      border-left:1px solid var(--line);
    }
    .lyrics-list{
      margin-top:0;
      padding:16px 18px 140px;
    }
    /* 2단일 때는 가사 영역이 따로 스크롤되므로 하단 여백을 줄임 */
    .player-controls{
      bottom:calc(26px + env(safe-area-inset-bottom, 0px));
    }
  }

  /* 아주 넓은 화면에서는 영상 비중을 조금 더 키움 */
  @media (min-width:1400px){
    .song-fixed-top{flex:1 1 66%;}
    .lyrics-scroll{flex:1 1 34%;}
    .song-fixed-top .video-wrap{padding:0 36px;}
  }

  /* ---------- 도쿄 셋리스트 (스포일러 페이지) ----------
     첫 화면에는 경고만 보이고, 스크롤을 내려야 곡 목록이 드러난다. */
  .menu-row.spoiler .info-toggle-icon{
    background:none;
    border:0;
    color:var(--gold);
  }
  .menu-row.spoiler .info-toggle-label{ color:#fff; font-size:13.5px; }
  .menu-row.spoiler .go{ flex:none;font-size:13px;color:var(--gold-soft);margin-left:2px; }
  .menu-row.spoiler:hover .go{ color:var(--teal); }

  .setlist-page{
    position:relative;
    min-height:100svh;
    background:var(--bg-deep);
  }
  /* 첫 화면(경고 화면) 뒤에 깔리는 사진 — 아래로 갈수록 어둠에 녹아든다.
     사진을 바꾸려면 아래 url() 파일명만 갈아 끼우면 된다. */
  .setlist-page::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:100svh;
    background:
      linear-gradient(180deg,
        rgba(20,7,6,0.62) 0%,
        rgba(20,7,6,0.58) 38%,
        rgba(19,6,5,0.88) 76%,
        #150605 94%,
        #130504 100%),
      url('../images/setlist-bg.jpg') center 34%/cover no-repeat;
    z-index:0;
    pointer-events:none;
  }
  .setlist-page > *{ position:relative; z-index:1; }
  /* 목록이 길어서 '홈으로'가 화면 밖으로 밀려나므로 상단 바를 위에 붙여 둔다 */
  .setlist-page .song-topbar{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(24,7,5,0.97);
    backdrop-filter:none;
  }
  /* 고정된 상단 바에 목록 첫 줄이 가리지 않도록 */
  .setlist-body{ scroll-margin-top:calc(68px + var(--safe-top, 0px)); }
  /* 좁은 화면에서는 cover 로 깔면 얼굴 부분만 크게 잘리므로,
     사진 전체가 보이도록 위쪽에 띠처럼 앉히고 아래로 어둠에 녹인다. */
  @media (max-width:600px){
    .setlist-page::before{
      /* 사진 높이(≈ 화면 폭)에 맞춰 vw 단위로 어둠을 입혀 경계선이 보이지 않게 한다 */
      background:
        linear-gradient(180deg,
          rgba(20,7,6,0.44) 0,
          rgba(20,7,6,0.40) 34vw,
          rgba(19,6,5,0.74) 74vw,
          #150605 101vw,
          #130504 100%),
        url('../images/setlist-bg.jpg') center top/152% auto no-repeat;
    }
  }
  /* 사진 위에 얹히는 상단바 */
  .setlist-page .song-topbar{
    background:var(--surface);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom-color:rgba(233,217,163,0.14);
  }
  /* 첫 화면을 꽉 채우는 경고 — 여기까지만 보이고 목록은 아래에 있다 */
  .spoiler-hero{
    min-height:calc(100svh - 70px - var(--safe-top, 0px));
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;
    padding:36px 22px 26px;
    text-align:center;
  }
  .spoiler-mark{
    width:66px;height:66px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,140,116,0.34);
    background:var(--surface-raised);
    color:var(--gold);
  }
  .spoiler-mark svg{width:30px;height:30px;}
  .spoiler-title{
    margin:2px 0 0;
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(23px,6.6vw,31px);
    letter-spacing:.02em;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,0.85);
  }
  .spoiler-desc{
    margin:0;
    max-width:430px;
    font-size:13.5px;line-height:1.9;
    color:#c3b294;
  }
  .spoiler-desc b{ color:var(--cream); }
  .spoiler-open{
    margin-top:10px;
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 24px;
    border-radius:8px;
    border:0;
    background:var(--action);
    color:var(--ink);
    font-family:'Gmarket Sans',sans-serif;
    font-size:15px;letter-spacing:.02em;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .spoiler-open:hover, .spoiler-open:focus-visible{
    background:var(--cream);
    transform:none;
    outline:none;
  }
  .spoiler-cue{
    margin-top:6px;
    font-size:11.5px;letter-spacing:.10em;
    color:#8d7d62;
    display:flex;flex-direction:column;align-items:center;gap:4px;
  }
  .spoiler-cue .arrow{ font-size:15px;color:var(--gold-soft);animation:spoilerBob 1.7s ease-in-out infinite; }
  @keyframes spoilerBob{ 0%,100%{transform:translateY(0);opacity:.65;} 50%{transform:translateY(5px);opacity:1;} }

  /* ── 보기 방식 고르기 (가림막을 걷기 전에 먼저 고른다) ────────── */
  .spoiler-choice{
    margin-top:14px;
    width:100%;max-width:330px;
    display:flex;flex-direction:column;gap:9px;
  }
  .spoiler-choice .spoiler-open{
    margin-top:0;
    width:100%;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:12px 16px;
  }
  .spoiler-choice .spoiler-open b{
    display:inline-flex;align-items:center;gap:7px;
    font-weight:400;font-size:15px;
  }
  /* 누르는 즉시 순서가 드러나는 쪽에는 경고를 붙여 둔다 */
  .spoiler-choice .spoiler-open .tag{
    flex:none;
    margin-left:5px;
    color:#d9705a;
    font-family:Pretendard,sans-serif;
    font-weight:700;
    font-size:10px;letter-spacing:.02em;
  }
  .spoiler-choice .spoiler-open span{
    font-family:Pretendard,sans-serif;
    font-weight:500;
    font-size:11.5px;letter-spacing:0;
    color:#b9a98a;
  }
  /* 순서를 감추는 쪽을 먼저, 조금 더 눈에 띄게 */
  .spoiler-choice .spoiler-open.soft{
    border:1px solid var(--gold-soft);
    background:var(--surface-raised);
  }
  .spoiler-choice .spoiler-open.soft span{ color:var(--gold-soft); }

  /* 보기 방식을 고르기 전에는 목록을 표시하지 않는다. */
  .setlist-body{
    padding:4px 20px 30px;
  }
  .setlist-body[hidden]{ display:none; }
  @media (prefers-reduced-motion: reduce){
    .spoiler-cue .arrow{ animation:none; }
  }

  .setlist-head{ max-width:640px;margin:0 auto 18px;text-align:center; }
  .setlist-head h2{
    font-family:'Gmarket Sans',sans-serif;
    font-size:clamp(20px,5.4vw,26px);
    margin:0 0 6px;letter-spacing:.02em;
  }
  .setlist-head p{ margin:0;font-size:12.5px;line-height:1.8;color:#b9a98a; }
  .setlist-meta{
    display:flex;align-items:center;justify-content:space-between;
    max-width:640px;margin:0 auto 6px;padding:0 2px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:11.5px;letter-spacing:.08em;color:#a5947a;
  }
  /* ── 셋리스트 보기 방식 (공연 순서 / 랜덤 순서) ────────────────
     랜덤에서는 번호를 감춘다 — 번호가 곧 공연 순서이기 때문. */
  .set-modes{
    display:flex;gap:5px;
    max-width:640px;margin:0 auto 12px;
    padding:4px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(0,0,0,0.3);
  }
  .set-mode{
    flex:1;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 6px;
    border:none;border-radius:9px;
    background:none;
    color:#b9a98a;
    font-family:inherit;font-size:12.5px;font-weight:700;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  /* '공연 순서'는 누르는 즉시 순서가 드러나므로 미리 알려 준다 */
  .set-mode-badge{
    flex:none;
    margin-left:3px;
    color:#d9705a;
    font-size:10px;
    letter-spacing:.02em;
  }
  .set-mode.active .set-mode-badge{ color:#e8846c; }
  .set-mode:hover{ color:var(--cream); }
  .set-mode.active{
    background:var(--surface-raised);
    color:var(--cream);
  }
  .set-shuffle{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    max-width:640px;margin:0 auto 12px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:11px;
    background:rgba(0,0,0,0.24);
    font-size:11.5px;line-height:1.65;color:#b9a98a;
  }
  .set-shuffle b{ color:var(--cream); }
  .set-shuffle button{
    flex:none;
    padding:7px 11px;
    border:1px solid var(--line);border-radius:999px;
    background:none;color:var(--gold-soft);
    font-family:inherit;font-size:11.5px;cursor:pointer;
    transition:border-color .2s ease,color .2s ease;
  }
  .set-shuffle button:hover{ border-color:var(--teal);color:var(--teal); }
  /* 랜덤일 때 번호 자리 — 순서가 드러나지 않도록 음표로 대신한다 */
  .set-num.rand{
    font-family:inherit;
    font-size:13px;
    color:#7a6a52;
  }

  .set-list{
    max-width:640px;margin:0 auto;
    list-style:none;padding:0;
    border-top:1px solid var(--line);
  }
  .set-item{ border-bottom:1px solid var(--line); }
  .set-row{
    width:100%;
    display:flex;align-items:center;gap:13px;
    background:none;border:none;
    color:var(--cream);
    padding:16px 6px;
    cursor:pointer;text-align:left;
    transition:background .2s ease;
  }
  .set-row:hover, .set-row:focus-visible{
    background:rgba(246,239,217,.07);
    outline:none;
  }
  .set-row[disabled]{ cursor:default; }
  .set-row[disabled]:hover{ background:none;padding-left:6px; }
  .set-num{
    flex:none;width:26px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:14px;letter-spacing:.04em;
    color:var(--gold-soft);text-align:right;
  }
  .set-title{
    flex:1;min-width:0;
    font-family:Pretendard,sans-serif;
    font-weight:500;
    font-size:clamp(15px,4.2vw,17px);
    line-height:1.45;
    color:var(--cream);
  }
  .set-go{ flex:none;font-size:13px;color:#7a6a52; }
  .set-row:hover .set-go{ color:var(--teal); }

  /* 토·일 곡이 달랐던 자리 */
  .set-split{ padding:12px 0 8px; }
  .set-split-head{
    display:flex;align-items:center;gap:13px;
    padding:0 6px 4px;
  }
  .set-split-note{
    font-size:11px;letter-spacing:.06em;
    color:#8d7d62;
  }
  .set-row.sub{ padding:11px 6px 11px 39px; }
  .set-row.sub:hover, .set-row.sub:focus-visible{ padding-left:46px; }
  .day-chip{
    flex:none;
    width:26px;height:22px;
    display:flex;align-items:center;justify-content:center;
    border-radius:7px;
    font-family:'Gmarket Sans',sans-serif;
    font-size:11px;
    border:1px solid rgba(233,217,163,0.30);
    background:rgba(233,217,163,0.10);
    color:var(--gold);
  }
  .day-chip.sun{
    border-color:rgba(94,205,196,0.36);
    background:rgba(94,205,196,0.12);
    color:var(--teal);
  }
  .setlist-note{
    max-width:640px;margin:18px auto 0;
    font-size:11.5px;line-height:1.9;
    color:#7a6a52;
  }


  /* 가사 스크롤 영역을 감싸는 칸 — 짤방을 그 위에 겹쳐 놓기 위한 기준 */
  .lyrics-pane{
    position:relative;
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .lyrics-pane > .lyrics-scroll{ flex:1 1 auto; min-height:0; }

  /* 짤방 자체 — 자리를 차지하지 않고 떠 있다.
     놓이는 자리는 화면에 따라 세 가지 (아래 at-below-video / at-lyrics-right / at-lyrics) */
  .tip-pic{
    position:absolute;
    z-index:6;
    display:flex;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .24s ease, transform .24s ease, visibility .24s;
  }

  /* ① 휴대폰 — 유튜브 영상 바로 아래, 오른쪽.
        영상도 안 가리고 가사도 안 가린다 (그 사이 빈 자리에 앉는다). */
  .song-fixed-top{ position:relative; z-index:5; }   /* 짤방이 가사 위로 조금 넘어와도 가려지지 않게 */
  .tip-pic.at-below-video{
    right:14px; bottom:-46px; left:auto; top:auto;
    justify-content:flex-end;
    padding:0;
    transform:translateY(10px) scale(0.94);
  }
  .tip-pic.at-below-video .tip-pic-card{
    max-width:min(54vw, 240px);
    padding:6px 6px 4px;
    border-radius:14px;
    gap:4px;
  }
  .tip-pic.at-below-video .tip-pic-card img{ max-height:min(15svh, 128px); border-radius:10px; }
  .tip-pic.at-below-video .tip-pic-cap{ font-size:11px; padding:0 3px 1px; }
  .tip-pic.at-below-video.big .tip-pic-card{ max-width:min(84vw, 360px); }
  .tip-pic.at-below-video.big .tip-pic-card img{ max-height:min(34svh, 280px); }

  /* ② PC 2단 — 가사 칸 오른쪽 위 모서리. 작게 두어 가사를 최소한만 덮는다 */
  .tip-pic.at-lyrics-right{
    right:0; top:0; left:auto; bottom:auto;
    justify-content:flex-end;
    padding:10px 12px 0;
    transform:translateY(-10px) scale(0.97);
  }
  .tip-pic.at-lyrics-right .tip-pic-card{ max-width:min(78%, 320px); padding:8px 8px 6px; }
  .tip-pic.at-lyrics-right .tip-pic-card img{ max-height:clamp(120px, 26svh, 228px); }
  .tip-pic.at-lyrics-right .tip-pic-cap{ font-size:12px; }
  .tip-pic.at-lyrics-right.big .tip-pic-card{ max-width:min(100%, 460px); }
  .tip-pic.at-lyrics-right.big .tip-pic-card img{ max-height:min(52svh, 400px); }

  /* ③ 단축모드 — 가사 위 가운데 (영상이 없는 화면이라 제일 크게) */
  .tip-pic.at-lyrics{
    left:0; right:0; top:0; bottom:auto;
    justify-content:center;
    padding:10px 12px 0;
    transform:translateY(-10px) scale(0.97);
  }

  .tip-pic.show{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .tip-pic-card{
    margin:0;
    pointer-events:auto;
    background:var(--surface-raised);
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 8px 6px;
    box-shadow:0 10px 24px rgba(0,0,0,.25);
    max-width:min(100%, 420px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    cursor:zoom-in;
  }
  .tip-pic-card img{
    display:block;
    max-width:100%;
    max-height:var(--tip-pic-h, clamp(96px, 22svh, 190px));
    width:auto;
    height:auto;
    border-radius:11px;
    background:#2a0a06;
  }
  .tip-pic-cap{
    font-size:12px;
    line-height:1.4;
    color:var(--wave);
    text-align:center;
    letter-spacing:-0.2px;
    padding:0 4px 2px;
  }
  .tip-pic-cap:empty{ display:none; }

  /* 탭하면 크게 — 한 번 더 탭하면 원래대로 */
  .tip-pic.at-lyrics.big, .tip-pic.at-lyrics-right.big{ padding-top:6px; }
  .tip-pic.big .tip-pic-card{
    cursor:zoom-out;
    max-width:min(100%, 560px);
  }
  .tip-pic.big .tip-pic-card img{
    max-height:min(52svh, 420px);
  }

  /* 단축모드에서도 그대로 보인다 (오히려 이때 제일 쓸모 있음) */
  .song-page.venue .lyrics-pane{ flex:1; min-height:0; }

  /* PC 2단 레이아웃 — 오른쪽 가사 칸이 이제 .lyrics-pane 이다 */
  @media (min-width:900px){
    .lyrics-pane{
      flex:1 1 38%;
      min-width:0;
      border-left:1px solid var(--line);
    }
    .lyrics-pane > .lyrics-scroll{
      flex:1 1 auto;
      border-left:none;
      border-top:none;
    }
  }
  @media (min-width:1400px){
    .lyrics-pane{ flex:1 1 34%; }
  }

  @media (prefers-reduced-motion: reduce){
    .tip-pic{ transition:none; }
  }