@font-face{
  font-family:Pretendard;
  src:url('./fonts/PretendardVariable.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:'Gmarket Sans';
  src:url('./fonts/GmarketSansMedium.woff') format('woff');
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
}
@font-face{
  font-family:'Gmarket Sans';
  src:url('./fonts/GmarketSansBold.woff') format('woff');
  font-style:normal;
  font-weight:600 900;
  font-display:swap;
}

:root{
  --surface:#210c09;
  --surface-raised:#30130e;
  --action:#e9d9a3;
  --focus:#f6efd9;
  --page-light:#f5f5f7;
  --page-paper:#ffffff;
  --page-ink:#1d1d1f;
  --page-muted:#64646b;
  --page-line:#e8e8eb;
  --page-control:#eaeaed;
  --stage:#151619;
  --stage-surface:#202125;
  --stage-raised:#2b2c30;
  --stage-muted:#a9a9af;
  --stage-line:rgba(255,255,255,.1);
}
body,button,input,select,textarea{
  font-family:Pretendard,system-ui,sans-serif;
  word-break:normal;
  overflow-wrap:anywhere;
}
button,input,select,textarea{font-size:inherit;}
button{touch-action:manipulation;}
:is(button,a,input,select,textarea):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

.hero{
  background:var(--bg-deep) url('./images/poster.jpg') center 42%/cover no-repeat;
}
.hero::after{
  background:rgba(23,5,4,.74);
}
.eyebrow,.tour-title,.tour-title span,
.show-day,.show-time,.show-venue,.countdown-done,
.songs-head h1,.song-topbar h1,.song-picker-title,
.spoiler-title,.setlist-head h2,.set-title,
.info-panel-title,.song-title,.today-head,.today-now .left{
  font-family:'Gmarket Sans',Pretendard,sans-serif;
  text-shadow:none;
}
.tour-title{font-weight:700;letter-spacing:-.045em;line-height:1.08;}
.tour-title span{font-weight:500;letter-spacing:.12em;}
.eyebrow{letter-spacing:.14em;text-shadow:none;}
.cd-dday,.cd-clock,.show-day,.show-time{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;
  text-shadow:none;
}
.cd-dday,.cd-clock{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:600;
  letter-spacing:0;
}
.show-venue{letter-spacing:.08em;text-shadow:none;color:var(--gold-soft);}
.info-toggle-label,.menu-btn-label,.spoiler-open,.set-num,
.song-mark,.song-sheet-num,.song-sheet-name,.song-sheet-count{
  font-family:Pretendard,system-ui,sans-serif;
  text-shadow:none;
}
.info-toggle-label{font-size:15px;font-weight:600;letter-spacing:0;}
.menu-btn-label{font-size:17px;font-weight:700;letter-spacing:-.015em;}
.song-picker-title{font-weight:600;}
.songs-head p,.setlist-head p{font-size:14px;line-height:1.55;}

.cd-pill{
  border:0;
  border-radius:8px;
  background:rgba(23,5,4,.8);
  box-shadow:none;
  backdrop-filter:none;
}
.menu-btn,.spoiler-open{
  min-height:52px;
  border:0;
  border-radius:8px;
  background:var(--action);
  color:var(--ink);
  box-shadow:none;
  transition:background .18s ease,transform .18s ease;
}
.menu-btn-label,.spoiler-open{color:var(--ink);}
.menu-btn:hover,.menu-btn:focus-visible,
.spoiler-open:hover,.spoiler-open:focus-visible{
  background:var(--cream);
  border:0;
  transform:none;
}
.menu-btn:active,.spoiler-open:active{transform:scale(.985);}
.menu-card,.info-card,.today-card{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  box-shadow:none;
  backdrop-filter:none;
}
.menu-card .info-card{border:0;border-radius:0;background:none;}
.menu-row{min-height:48px;padding:12px 16px;}
.menu-row:hover,.menu-row:focus-visible,
.song-row:hover,.song-row:focus-visible,
.set-row:hover,.set-row:focus-visible{
  background:rgba(246,239,217,.07);
}
.info-toggle-icon,.menu-row.ext .info-toggle-icon,
.menu-row.spoiler .info-toggle-icon{
  border:0;
  border-radius:4px;
  background:none;
  color:var(--gold);
}
.menu-chip{border-radius:6px;background:var(--surface-raised);}
.spoiler-safe{
  display:block;
  width:min(100%,330px);
  min-height:48px;
  margin:18px auto 0;
  border:0;
  border-radius:8px;
  background:var(--action);
  color:var(--ink);
  font:700 15px Pretendard,system-ui,sans-serif;
  cursor:pointer;
}
.spoiler-safe:hover{background:var(--cream);}
.spoiler-choice .spoiler-open{
  border:1px solid var(--line);
  background:var(--surface-raised);
  color:var(--cream);
  box-shadow:none;
}
.spoiler-choice .spoiler-open:not(.soft) > span{color:#b9a98a;}
.spoiler-choice .spoiler-open:not(.soft) .tag{color:#e8846c;}
.spoiler-choice .spoiler-open.soft > span{color:var(--gold-soft);}

.song-sort.active,.set-mode.active,.song-tab.active,
.spoiler-choice .spoiler-open.soft{
  background:var(--surface-raised);
  box-shadow:none;
  border-color:var(--gold-soft);
  color:var(--cream);
}
.song-picker-btn:hover,.song-picker-btn:focus-visible{
  border-color:var(--gold-soft);
}
.search-label{
  position:relative;
  display:block;
  margin:0 0 6px 2px;
  color:var(--gold-soft);
  font-size:12px;
  font-weight:600;
}
.back-btn,.song-sort,.song-picker-btn,.song-nav-btn,.song-sheet-close{min-height:40px;}
.song-nav-btn,.song-sheet-close{min-width:40px;}
.song-search-clear.show{min-width:32px;min-height:32px;}
.song-sheet-title{letter-spacing:0;}
.song-sheet-now{font-family:Pretendard,system-ui,sans-serif;font-size:11px;letter-spacing:0;}

.guide-page{
  --focus:var(--page-ink);
  background:var(--page-light);
  color:var(--page-ink);
}
.guide-page .song-topbar{background:var(--page-paper);border:0;}
.guide-page .back-btn{
  border:0;
  background:var(--page-control);
  color:var(--page-ink);
}
.guide-page .back-btn:hover{background:var(--page-line);color:var(--page-ink);}
.guide-page .songs-section{padding-top:44px;}
.guide-page .songs-head h1{
  margin:0 0 8px;
  font:700 clamp(24px,6vw,30px)/1.25 'Gmarket Sans',Pretendard,sans-serif;
  letter-spacing:-.025em;
}
.guide-page .songs-head p,
.guide-page .song-legend-note,
.guide-page .song-search-meta,
.guide-page .credits{color:var(--page-muted);text-shadow:none;}
.guide-page .song-legend{border:0;background:none;padding:0;}
.guide-page .legend-item{color:var(--page-muted);}
.guide-page .song-search::before{background:var(--page-light);}
.guide-page .search-label{color:var(--page-muted);}
.guide-page .song-search-box{
  border:0;
  background:var(--page-control);
}
.guide-page .song-search-box:focus-within{outline:2px solid var(--page-ink);outline-offset:2px;}
.guide-page .song-search-box input{color:var(--page-ink);}
.guide-page .song-search-box input::placeholder{color:var(--page-muted);}
.guide-page .song-search-box svg,
.guide-page .song-search-clear{color:var(--page-muted);}
.guide-page .song-sorts{
  border:0;
  background:var(--page-control);
}
.guide-page .song-sort{color:var(--page-muted);}
.guide-page .song-sort:hover{color:var(--page-ink);}
.guide-page .song-sort.active{background:var(--page-paper);color:var(--page-ink);}
.guide-page .song-sort .dir{color:var(--page-muted);}
.guide-page .song-list{
  overflow:hidden;
  border:0;
  border-radius:12px;
  background:var(--page-paper);
}
.guide-page .song-row{
  padding:18px 20px;
  border-bottom:1px solid var(--page-line);
  color:var(--page-ink);
}
.guide-page .song-list li:last-child .song-row{border-bottom:0;}
.guide-page .song-row:hover,
.guide-page .song-row:focus-visible{background:var(--page-light);padding-left:20px;}
.guide-page .song-row:focus-visible{outline:2px solid var(--page-ink);outline-offset:-2px;}
.guide-page .song-title{color:var(--page-ink);}
.guide-page .song-num,
.guide-page .song-mark{color:var(--page-muted);background:none;}
.guide-page .song-mark.chant{color:var(--page-ink);}
.guide-page .song-row .hit{color:var(--page-ink);text-decoration:underline;}
.guide-page .song-empty{color:var(--page-muted);}
.guide-page .song-empty b{color:var(--page-ink);}

.song-page{
  --bg-deep:var(--stage);
  --surface:var(--stage-surface);
  --surface-raised:var(--stage-raised);
  --line:var(--stage-line);
  --cream:#f5f5f7;
  background:var(--stage);
  color:var(--cream);
}
.song-page .song-topbar{background:var(--stage);border:0;}
.song-page .back-btn,
.song-page .song-nav-btn,
.song-page .song-picker-btn{border:0;color:var(--cream);}
.song-page .back-btn,
.song-page .song-nav-btn{background:transparent;}
.song-page .song-picker-btn{background:var(--stage-surface);}
.song-page .back-btn:hover,
.song-page .song-nav-btn:hover,
.song-page .song-nav-btn:focus-visible,
.song-page .song-picker-btn:hover,
.song-page .song-picker-btn:focus-visible{
  background:var(--stage-raised);
  color:var(--cream);
}
.song-page .song-nav-btn:focus-visible,
.song-page .song-picker-btn:focus-visible{outline:2px solid var(--cream);outline-offset:2px;}
.song-page .lyrics-pane{background:var(--stage-surface);border:0;}
.song-page .video-frame{border:0;box-shadow:none;}
.song-page .video-frame .video-status{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:#000;
  color:var(--stage-muted);
  font-size:14px;
  line-height:1.5;
  text-align:center;
}
.song-page .video-status[hidden]{display:none;}
.song-page .player-controls{
  position:relative;
  right:auto;
  bottom:auto;
  flex:none;
  flex-flow:row wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  /* 가사를 덜 가리도록 위아래 여백만 줄인다 (버튼 크기는 그대로 — 공연 중 한 손으로 누르므로) */
  padding:5px 12px calc(5px + env(safe-area-inset-bottom, 0px));
  background:var(--stage);
}
.song-page .lyrics-list{padding-bottom:20px;}
.song-page .lyric-line.active{background:rgba(255,255,255,.075);box-shadow:none;}
.song-page .lyric-line.active .ico-spin,
.song-page .lyric-line.active .ico-wave,
.song-page .lyric-line.active .ico-clap,
.song-page .lyric-line.active .ico-jump{filter:none;}
.song-page .song-sheet-backdrop{background:rgba(0,0,0,.6);}
.song-page .song-sheet-panel{
  background:var(--stage-raised);
  border:0;
  box-shadow:0 -12px 32px rgba(0,0,0,.2);
}
.song-page .song-sheet-head{border:0;}
.song-page .song-sheet-title{color:var(--cream);}
.song-page .song-sheet-count,
.song-page .song-sheet-num,
.song-page .sheet-empty{color:var(--stage-muted);}
.song-page .song-sheet-close{border:0;background:var(--stage-surface);}
.song-page .sheet-search .song-search-box{border:0;background:var(--stage-surface);}
.song-page .sheet-search .song-search-box:focus-within{outline:2px solid var(--cream);outline-offset:2px;}
.song-page .song-sheet-item.current{background:rgba(255,255,255,.075);box-shadow:none;}
.song-page .autoscroll-toggle,
.song-page .venue-toggle,
.song-page .play-toggle{border:0;background:var(--stage-raised);}
.song-page .autoscroll-switch{background:var(--stage);border-color:var(--stage-muted);}
.song-page .tip-pic-card{border:0;background:var(--stage-raised);}

.setlist-page{
  --bg-deep:var(--stage);
  --surface:var(--stage-surface);
  --surface-raised:var(--stage-raised);
  --line:var(--stage-line);
  --cream:#f5f5f7;
  background:var(--stage);
  color:var(--cream);
}
.setlist-page::before{
  background:url('./images/setlist-bg.jpg') center 34%/cover no-repeat;
  filter:grayscale(1) brightness(.38);
}
.setlist-page .song-topbar{background:var(--stage);border:0;}
.setlist-page .back-btn{background:var(--stage-surface);border:0;}
.setlist-page .back-btn:hover{background:var(--stage-raised);color:var(--cream);}
.setlist-page .spoiler-mark{background:var(--stage-raised);border:0;}
.setlist-page .spoiler-title{text-shadow:none;}
.setlist-page .spoiler-desc{color:var(--stage-muted);}
.setlist-page .spoiler-choice .spoiler-open{background:var(--stage-surface);border:0;}
.setlist-page .spoiler-choice .spoiler-open.soft{background:var(--stage-raised);border:0;}
.setlist-page .set-modes,
.setlist-page .set-shuffle{background:var(--stage-surface);border:0;}
.setlist-page .set-mode.active{background:var(--stage-raised);}
.setlist-page .set-list{border-top:0;}
.setlist-page .set-item:last-child{border-bottom:0;}
.setlist-page .day-chip{border:0;background:var(--stage-raised);}
.song-row:hover,.song-row:focus-visible,
.set-row:hover,.set-row:focus-visible{padding-left:6px;}
.set-row.sub:hover,.set-row.sub:focus-visible{padding-left:39px;}
.set-modes{border-radius:8px;background:var(--surface);}
.set-mode{border-radius:5px;min-height:42px;}
.set-order-confirm{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  max-width:640px;
  margin:0 auto 12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-raised);
}
.set-order-confirm[hidden]{display:none;}
.set-order-confirm p{flex:1 1 100%;margin:0;color:var(--cream);font-size:13px;}
.set-order-confirm button{
  min-height:40px;
  padding:8px 14px;
  border:1px solid var(--gold-soft);
  border-radius:6px;
  background:none;
  color:var(--gold-soft);
  font:600 13px Pretendard,system-ui,sans-serif;
  cursor:pointer;
}
.set-order-confirm #set-order-cancel{background:var(--action);border-color:var(--action);color:var(--ink);}
.song-topbar,.setlist-page .song-topbar{
  background:var(--surface);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.song-sheet,.tip-pic-card{
  background:var(--surface-raised);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.tip-pic-card{border-color:var(--line);box-shadow:0 10px 24px rgba(0,0,0,.25);}
.lyric-line.active{
  background:rgba(246,239,217,.08);
  box-shadow:inset 2px 0 0 var(--gold);
}
.lyrics-list:has(.lyric-line.active) .lyric-line:not(.active){
  opacity:.5;
  transition:opacity .18s ease;
}
.lyrics-list:has(.lyric-line.active) .lyric-line:not(.active):is(:hover,:focus-visible){
  opacity:1;
}
.today-head .dot{animation:none;box-shadow:none;}
.spoiler-mark{border-radius:8px;background:var(--surface-raised);box-shadow:none;}
.spoiler-cue .arrow{animation:none;}
@media (max-width:600px){
  .song-search-box input,.sheet-search .song-search-box input{font-size:16px;}
  .setlist-page::before{
    background:url('./images/setlist-bg.jpg') center top/152% auto no-repeat;
  }
}
@media (prefers-reduced-motion:reduce){
  .menu-btn,.spoiler-open{transition:none;}
  .menu-btn:active,.spoiler-open:active{transform:none;}
  .lyric-line{transition:none;}
}

:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --control-height:40px;
  --touch-height:44px;
  --dock-height:56px;
  --dock-padding:6px;
  --radius-pill:999px;
  --radius-notice:20px;
  --type-control:600 12px/1.2 Pretendard,system-ui,sans-serif;
  --type-dock-size:clamp(14px,4vw,17px);
  --elevation-float:0 8px 24px rgba(0,0,0,.15);
  --home-control-bg:rgba(255,255,255,.14);
  --home-control-hover:rgba(255,255,255,.22);
  --home-control-text:#fff;
}
:root[data-theme="light"]{
  color-scheme:light;
  --ui-bg:#f5f5f7;
  --ui-surface:#fff;
  --ui-raised:#eaeaed;
  --ui-text:#1d1d1f;
  --ui-muted:#64646b;
  --ui-line:#e8e8eb;
  --ui-accent:#755724;
  --ui-hover:rgba(29,29,31,.055);
  --ui-warning:#9a4b35;
  --dock-surface:rgba(255,255,255,.68);
  --dock-highlight:rgba(255,255,255,.82);
  --page-light:var(--ui-bg);
  --page-paper:var(--ui-surface);
  --page-ink:var(--ui-text);
  --page-muted:var(--ui-muted);
  --page-line:var(--ui-line);
  --page-control:var(--ui-raised);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ui-bg:#151619;
  --ui-surface:#202125;
  --ui-raised:#2b2c30;
  --ui-text:#f5f5f7;
  --ui-muted:#a9a9af;
  --ui-line:rgba(255,255,255,.1);
  --ui-accent:#e9d9a3;
  --ui-hover:rgba(255,255,255,.07);
  --ui-warning:#e8846c;
  --dock-surface:rgba(55,56,62,.68);
  --dock-highlight:rgba(255,255,255,.18);
  --page-light:var(--ui-bg);
  --page-paper:var(--ui-surface);
  --page-ink:var(--ui-text);
  --page-muted:var(--ui-muted);
  --page-line:var(--ui-line);
  --page-control:var(--ui-raised);
}
.guide-page,.song-page,.setlist-page{
  --surface:var(--ui-surface);
  --surface-raised:var(--ui-raised);
  --line:var(--ui-line);
  --cream:var(--ui-text);
  --gold:var(--ui-accent);
  --gold-soft:var(--ui-accent);
  --focus:var(--ui-text);
}
.song-page,.setlist-page{
  --stage:var(--ui-bg);
  --stage-surface:var(--ui-surface);
  --stage-raised:var(--ui-raised);
  --stage-muted:var(--ui-muted);
  --stage-line:var(--ui-line);
}

.song-search-box input:focus-visible{outline:none;}
.guide-page .song-search-box:focus-within,
.song-page .sheet-search .song-search-box:focus-within{
  outline:2px solid var(--ui-text);
  outline-offset:2px;
}

.theme-toggle{
  flex:none;
  min-height:var(--control-height);
  margin-left:auto;
  padding:var(--space-2) var(--space-3);
  border:0;
  border-radius:var(--radius-pill);
  background:var(--ui-raised);
  color:var(--ui-text);
  font:var(--type-control);
  white-space:nowrap;
  cursor:pointer;
}
.theme-toggle:hover{background:var(--ui-surface);}
.song-page .song-topbar .visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  flex:none;
}
.home-theme{
  position:absolute;
  top:calc(var(--space-3) + var(--safe-top,0px));
  right:var(--space-4);
  z-index:2;
  background:var(--home-control-bg);
  color:var(--home-control-text);
}
.home-theme:hover{background:var(--home-control-hover);}
:root[data-theme="light"] .hero::after{background:rgba(23,5,4,.58);}
:root[data-theme="dark"] .hero::after{background:rgba(23,5,4,.78);}
.setlist-page .song-topbar h1{padding-right:0;}

.song-page{
  position:relative;
  padding-bottom:calc(58px + env(safe-area-inset-bottom,0px));
}
.song-page .song-topbar{justify-content:space-between;}
.song-page .player-controls{background:var(--ui-bg);}
.song-dock{
  position:absolute;
  left:50%;
  bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px));
  z-index:20;
  /* 가사를 최대한 덜 가리도록, 곡 제목 길이에 맞춰 줄어드는 알약 모양.
     화면 폭을 다 쓰지 않으므로 좌우로 가사가 비쳐 보인다. */
  width:auto;
  max-width:calc(100% - var(--space-3) - var(--space-3));
  min-height:auto;
  padding:3px;
  transform:translateX(-50%);
  border-radius:var(--radius-pill);
  background:var(--dock-surface);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--elevation-float),inset 0 1px 0 var(--dock-highlight);
}
.song-dock .song-nav{width:auto;gap:2px;}
.song-dock .song-nav-btn{
  width:40px;
  height:40px;
  flex:none;
  border:0;
  background:transparent;
  color:var(--ui-text);
}
.song-dock .song-nav-btn:hover,
.song-dock .song-nav-btn:focus-visible{background:var(--ui-hover);color:var(--ui-text);}
.song-dock .song-picker-h{flex:0 1 auto;min-width:0;margin:0;padding:0;}
.song-dock .song-picker-btn{
  min-height:40px;
  padding:var(--space-1) var(--space-2);
  border:0;
  background:transparent;
  color:var(--ui-text);
}
.song-dock .song-picker-btn:hover,
.song-dock .song-picker-btn:focus-visible{background:var(--ui-hover);}
.song-dock .song-picker-title{
  font-size:clamp(13px,3.6vw,15px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.song-dock .song-picker-caret{color:var(--ui-muted);}

.song-page .lyric-jp,.song-page .lyric-tr{color:var(--ui-muted);}
.song-page .watch-on-yt,
.song-page .lyrics-note,
.song-page .legend-item{color:var(--ui-muted);}
.song-page .lyric-line.active{background:var(--ui-hover);box-shadow:none;}
.song-page .song-sheet-item:hover,
.song-page .song-sheet-item:focus-visible{background:var(--ui-hover);}
.song-page .song-sheet-item.current{background:var(--ui-hover);box-shadow:none;}
.song-page .song-sheet-grip{background:var(--ui-line);}
:root[data-theme="light"] .song-page .song-sheet-panel{background:var(--ui-surface);}
:root[data-theme="light"] .lyrics-list:has(.lyric-line.active) .lyric-line:not(.active){opacity:.62;}

.setlist-page .spoiler-title{color:var(--ui-text);}
.setlist-page .spoiler-desc b{color:var(--ui-text);}
.setlist-page .spoiler-choice .spoiler-open > span{color:var(--ui-muted);}
.setlist-page .setlist-note{color:var(--ui-muted);}
:root[data-theme="light"] .setlist-page::before{opacity:.08;filter:grayscale(1);}
.setlist-page .spoiler-choice .tag{color:var(--ui-warning);}

.app-banner{
  border:0;
  border-radius:var(--radius-notice);
  background:var(--ui-surface);
  color:var(--ui-text);
  box-shadow:var(--elevation-float);
}
.app-banner .msg b{color:var(--ui-text);}
.app-banner button{
  min-height:var(--touch-height);
  padding:var(--space-2) var(--space-3);
  border:0;
  border-radius:var(--radius-pill);
  background:var(--ui-raised);
  color:var(--ui-text);
  font:var(--type-control);
}
.app-banner button:hover{color:var(--ui-text);background:var(--ui-hover);}
.app-banner .close{min-width:var(--touch-height);background:transparent;color:var(--ui-muted);}


/* ── 곡 화면 위쪽 여백 줄이기 ─────────────────────────────────────
   영상 위·아래로 낭비되던 공간을 좁혀서 가사가 한 줄이라도 더 보이게 한다.
   가사 목록의 padding-top 은 자동 스크롤이 첫 줄을 화면 가운데로
   올리기 위한 공간이므로 건드리지 않는다. */
.song-page .song-topbar{
  padding-top:calc(8px + var(--safe-top,0px));
  padding-bottom:8px;
}
.song-page .video-wrap{margin-top:6px;}
.song-page .watch-on-yt{margin-top:4px;}
.song-page .lyrics-note{margin-top:8px;}
.song-page .lyrics-legend{margin-top:8px;}
.song-page .lyrics-list{margin-top:4px;}


/* ── 곡 선택 바를 상단으로, 토글을 맨 아래로 ─────────────────────
   곡 선택 바가 상단바 안으로 들어가면서 화면 아래쪽 한 줄이 통째로
   사라진다. 그만큼 가사가 더 보인다. */
.song-page .song-topbar{gap:8px;}
.song-page .song-dock{
  position:static;
  transform:none;
  left:auto;bottom:auto;
  flex:1 1 auto;
  min-width:0;
  width:auto;
  max-width:none;
  border-radius:var(--radius-pill);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:var(--ui-hover);
}
.song-page .song-dock .song-nav{width:100%;justify-content:space-between;}
.song-page .song-dock .song-picker-h{flex:1 1 auto;}
.song-page .song-dock .song-picker-btn{width:100%;justify-content:center;}
/* 상단바에서는 테마 버튼이 자리를 많이 먹으므로 조금 좁힌다 */
.song-page .theme-toggle{flex:none;padding-left:10px;padding-right:10px;font-size:12px;}
.song-page .back-btn{flex:none;}

/* 아래쪽에 곡 선택 바 자리를 비워 둘 필요가 없어졌다 */
.song-page{padding-bottom:0;}
.song-page .player-controls{justify-content:center;}


/* ── 재생 중인 가사 줄이 여러 개로 보이던 문제 ───────────────────
   ① 터치 화면에서는 한 번 탭한 요소에 :hover 가 그대로 남는다.
      가사를 눌러 구간을 옮기면 눌렀던 줄마다 배경이 남아, 재생 중인
      줄과 똑같아 보였다. 마우스가 있는 기기에서만 hover 를 준다.
   ② 재생 중인 줄의 표시가 배경색뿐이었는데 그 색이 hover 와 거의
      같았다. 왼쪽 금색 띠를 다시 붙여 한눈에 구분되게 한다. */
@media (hover: none){
  .lyric-line:hover{background:none;}
  .lyrics-list:has(.lyric-line.active) .lyric-line:not(.active):hover{opacity:.5;}
  :root[data-theme="light"] .lyrics-list:has(.lyric-line.active) .lyric-line:not(.active):hover{opacity:.62;}
}
.lyrics-list .lyric-line.active,
.song-page .lyrics-list .lyric-line.active{
  background-color:rgba(255,255,255,.07);
  box-shadow:inset 3px 0 0 var(--ui-accent,#e9d9a3);
}
:root[data-theme="light"] .lyrics-list .lyric-line.active{
  background-color:rgba(29,29,31,.055);
}
/* 재생 중이 아닌 줄은 확실히 흐리게 — 한 줄만 도드라지도록 */
.lyrics-list:has(.lyric-line.active) .lyric-line:not(.active){opacity:.45;}
:root[data-theme="light"] .lyrics-list:has(.lyric-line.active) .lyric-line:not(.active){opacity:.55;}

/* 화면 판 번호 — 아주 작게, 눈에 거슬리지 않게 */
.credits .build{opacity:.45;font-variant-numeric:tabular-nums;}


/* ── iOS 잔상 대책 ────────────────────────────────────────────────
   아이폰에서 가사를 스크롤하는 동안, 표시를 지운 줄이 화면에 그대로
   남는 일이 있다(다시 그리기가 빠지는 브라우저 문제). DOM 은 멀쩡한데
   화면만 남는 것이라 자바스크립트로는 고칠 수 없다.
   ① 가사 목록을 독립 레이어로 올려 다시 그리기를 확실하게 하고
   ② 표시를 inset 그림자 대신 겹침 요소로 바꾼다. */
.lyrics-scroll{
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.lyrics-list .lyric-line{position:relative;}
.lyrics-list .lyric-line.active,
.song-page .lyrics-list .lyric-line.active{
  background-color:rgba(255,255,255,.07);
  box-shadow:none;
}
:root[data-theme="light"] .lyrics-list .lyric-line.active{
  background-color:rgba(29,29,31,.055);
}
.lyrics-list .lyric-line.active::before{
  content:"";
  position:absolute;
  left:0;top:3px;bottom:3px;
  width:3px;
  border-radius:3px;
  background:var(--ui-accent,#e9d9a3);
}


/* ── 좁은 폰에서 아래 버튼 줄이 두 줄로 접히지 않게 ────────────────
   '떼창만' 이 생기면서 버튼이 셋이 되었다. 두 줄로 접히면 그만큼
   가사가 가려지므로, 버튼 크기(누르는 면적)는 그대로 두고
   사이 여백과 글자 크기만 조금 줄여 한 줄에 들어가게 한다. */
@media (max-width:380px){
  .song-page .player-controls{ gap:6px;padding-left:8px;padding-right:8px; }
  .song-page .venue-toggle,
  .song-page .autoscroll-toggle{ padding-left:8px;padding-right:8px; }
}
@media (max-width:340px){
  .song-page .autoscroll-label{ font-size:10px;letter-spacing:.02em; }
  .song-page .venue-label{ font-size:10px; }
}


/* '떼창만' 은 스위치가 없는 대신, 켜지면 버튼 자체가 채워진다.
   (곡 화면에서는 테두리를 쓰지 않으므로 테두리 색만으로는 표가 나지 않는다) */
.song-page .chant-toggle.active{ background:var(--ui-accent); }
.song-page .chant-toggle.active .venue-label,
.song-page .chant-toggle.active .chant-ico{ color:var(--ui-bg); }
.song-page .chant-toggle.active .chant-ico{ opacity:1; }


/* 일반·簡潔模式都將「只聽大合唱」縮成麥克風圖示，
   讓新增的歌詞切換按鈕加入後，兩種模式的控制列高度一致。 */
.song-page .chant-toggle .venue-label{ display:none; }
.song-page .chant-toggle{ padding-left:9px;padding-right:9px; }