/* style.css: the site's pages (the catalog, the chart, the account page, the sign-in callback
   and the legal page), ported from the design tournament's final design J0
   (design/tournament/r10/base.css) by SPEC_redesign_v2.md. J0 is a mockup that builds its pages
   in JavaScript; the rules here are J0's, adapted to the app's own static markup and ids. The
   local authoring tools keep the stylesheet this file replaced, as app/tools.css.

   Concentric corners (Apple's rule): an inner corner shares its outer corner's centre, so inner
   radius = outer radius − the inset between their edges, floored at --rmin (0, the strict rule).
   A rounded container declares --r (its own radius), --p (the inset of its children) and
   --ri = max(r − p, --rmin), which its children read as their radius; a box nested one level
   further declares --p2 and --ri2 from the --ri it inherits. Capsules and circles keep 999px or
   50%.

   Continuous-curvature corners: where the browser draws corner-shape, every rounded box is a
   squircle, and every radius is multiplied by --sq (1.7) at the point of use, because a squircle
   cuts less off a corner than a circular arc of the same radius. Elsewhere --sq is 1.

   One accent, on state only: the playing bar, the playing 따라가기 button, the selected song,
   tab or option, and focus rings. The site follows the device's light or dark setting. */
/* The web font: MusicChords Sans, a subset of Pretendard 1.3.9 (SIL Open Font License 1.1, the
   text in fonts/OFL.txt) holding Latin, the 2,350 KS X 1001 Hangul syllables, the jamo and the
   punctuation the site prints, in one variable file for every weight. Pretendard's licence
   reserves its name for the original, so the subset carries another. A syllable outside the set
   falls back to the system font for that glyph alone. tools/deploy.py renames the file with its
   content hash and rewrites this url. */
@font-face{font-family:"MusicChords Sans";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/mcsans-var.9452fce67c.woff2") format("woff2")}
:root{
  --bg:#f1f3f7; --card:#ffffff; --chip:#eef1f6; --chip-h:#e3e8f0;
  --ink:#1c2333; --soft:#68718a; --faint:#9aa1b0; --rule:#e5e8ef; --cont:#b2b8c6;
  --edge:#cfd4dd;
  --video:#2c313a; --video-ink:#ffffff;
  --sh:0 1px 2px rgba(20,30,50,.05),0 6px 20px rgba(20,30,50,.06);
  --sh-lift:0 2px 4px rgba(20,30,50,.06),0 12px 32px rgba(20,30,50,.10);
  --sh-btn:0 1px 2px rgba(20,30,50,.08);
  --scrim:rgba(14,19,27,.38);
  --bad:#b3261e;
  --accent:#0b7f87; --on-accent:#ffffff;
  --now:var(--accent);
  --sel:var(--accent); --on-sel:var(--on-accent);
  --pick:var(--accent);
  --focus:var(--accent);
  --f:"MusicChords Sans","Pretendard",system-ui,-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --sym:"Segoe UI Symbol","Apple Symbols","Noto Music",sans-serif;
  --rmin:0px; --sq:1;
  --font-scale:1; --tabs:66px; --nav-w:232px; --rail-w:64px; --right-w:304px;
  /* the mini player's card: its radius, its inset, the radius of what sits in it, the video
     thumbnail's width, and its gap to the edge it docks at */
  --mr:16px; --mp:.4rem; --mri:max(calc(var(--mr) - var(--mp)),var(--rmin)); --mw:120px; --mgap:.5rem;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e131b; --card:#18202c; --chip:#222b39; --chip-h:#2b3647;
    --ink:#e8ecf3; --soft:#97a2b6; --faint:#626d80; --rule:#263040; --cont:#566174;
    --edge:#344055;
    --video:#272d37; --video-ink:#e8ecf3;
    --sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
    --sh-lift:0 2px 6px rgba(0,0,0,.35),0 16px 36px rgba(0,0,0,.35);
    --sh-btn:0 1px 2px rgba(0,0,0,.35);
    --scrim:rgba(0,0,0,.55);
    --bad:#ff8a80;
    --accent:#3cc6c8; --on-accent:#06262a;
  }
}
@supports (corner-shape:squircle){
  :root{--sq:1.7}
  *,*::before,*::after{corner-shape:squircle}
  .sec-name,.slot.rest .ch,.lyr-sec,.tile .k,.sheet::before{corner-shape:round}
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
/* Korean wraps at spaces, not between syllables (SPEC_home_login_v3.md, "Beyond the catalog");
   the chart's grid and the 코드+가사 lines keep their own syllable-by-syllable layout. */
.grid,.lines{word-break:normal}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.acc{font-family:var(--sym);font-size:.84em;font-weight:400;letter-spacing:0;margin-left:.02em;
  position:relative;top:-.24em;line-height:0}
.mono{font-variant-numeric:tabular-nums}
code{font-size:.92em}

/* ---- buttons ---- */
.b{font-size:.86rem;font-weight:600;color:var(--ink);background:var(--card);border:none;border-radius:calc(11px * var(--sq));
  height:2.5rem;min-width:2.5rem;padding:0 .62rem;cursor:pointer;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;gap:.35em;white-space:nowrap;text-decoration:none;box-shadow:var(--sh-btn)}
.b:hover:not(:disabled){background:var(--chip-h)}
.b:disabled{opacity:.4;cursor:default}
.b.on{background:var(--sel);color:var(--on-sel);box-shadow:0 2px 8px color-mix(in srgb,var(--sel) 35%,transparent)}
.b.on:hover:not(:disabled){background:var(--sel)}
/* a segmented control sits in a rounded parent wherever it appears (toolbar, popover, sheet) */
.seg{--p2:.2rem;--ri2:max(calc(var(--ri,13px) - var(--p2)),var(--rmin));
  display:inline-flex;background:var(--chip);border-radius:calc(var(--ri,13px) * var(--sq));padding:var(--p2);gap:.15rem}
.seg .b{background:transparent;box-shadow:none;color:var(--soft);border-radius:calc(var(--ri2) * var(--sq))}
.seg .b:hover:not(:disabled){background:var(--chip-h)}
.seg .b.on{background:var(--card);color:var(--pick);font-weight:800;box-shadow:var(--sh-btn)}

/* the small buttons of the signed-in controls, the editor and the account page: a --chip box
   in the card's concentric radius */
.b-btn{font-size:.84rem;font-weight:600;color:var(--ink);background:var(--chip);border:none;
  border-radius:calc(var(--ri,10px) * var(--sq));min-height:2.2rem;padding:.35rem .75rem;cursor:pointer;line-height:1.2}
.b-btn:hover:not(:disabled){background:var(--chip-h)}
.b-btn:disabled{opacity:.4;cursor:default}
.b-btn.main{background:var(--card);box-shadow:inset 0 0 0 1px var(--edge);font-weight:800}

/* ---- the shell: the sidebar, the centre and the right column ---- */
.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr) var(--right-w);min-height:100vh}
:root[data-screen="home"] .shell{grid-template-columns:var(--nav-w) minmax(0,1fr)}
.nav,.right{position:sticky;top:0;height:100vh;overflow-y:auto}
.nav{background:var(--card);box-shadow:1px 0 0 var(--rule),4px 0 20px rgba(20,30,50,.04)}
.right{padding:1.4rem 1.2rem 2rem .2rem;display:flex;flex-direction:column;gap:1rem}
.centre{min-width:0}
.nav{grid-column:1;grid-row:1}.centre{grid-column:2;grid-row:1}.right{grid-column:3;grid-row:1}

/* ---- sidebar ---- */
.nav-in{padding:1.2rem .9rem 1.4rem;display:flex;flex-direction:column;min-height:100%}
.brand{display:block;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;margin:0 .3rem .9rem}
.search{width:100%;height:2.6rem;border:1px solid transparent;border-radius:calc(14px * var(--sq));padding:0 .8rem 0 2.3rem;
  background-color:var(--chip);font-size:.9rem;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:.8rem center;background-size:1rem}
.search::placeholder{color:var(--soft)}
.search:focus{outline:none;border-color:var(--focus);background-color:var(--card);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 16%,transparent)}
.nh{font-size:.78rem;font-weight:800;color:var(--soft);margin:1.3rem .3rem .35rem;letter-spacing:-.005em}
.songs{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.songs a{display:block;text-decoration:none;padding:.5rem .65rem;border-radius:calc(12px * var(--sq))}
.songs a:hover{background:var(--chip)}
.songs a.cur{background:color-mix(in srgb,var(--pick) 11%,var(--card))}
.songs .t{display:block;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.songs .m{display:block;font-size:.8rem;color:var(--soft)}
.songs .m b{color:var(--ink);font-weight:700}
.songs .none{padding:.5rem .65rem;font-size:.84rem;color:var(--soft)}
.cur-tag{font-size:.7rem;font-weight:700;margin-left:.4rem;color:var(--pick)}
.nav-foot{margin-top:auto;padding:1.4rem .3rem 0;display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.82rem;font-weight:600;color:var(--soft)}
.nav-foot a{text-decoration:none}
.nav-foot a:hover{color:var(--ink)}

/* the folded sidebar: on a desktop the sidebar folds to a rail (the brand mark, a search icon,
   the toggle) and starts folded on both screens; the toggle and the search icon open it. The
   rail and the toggle show only above 900 px. */
.rail,.nav-fold{display:none}
@media (min-width:901px){
  .nav-in{position:relative}
  .nav-fold{display:inline-flex;position:absolute;top:.95rem;right:.75rem;width:2.2rem;min-width:2.2rem;height:2.2rem;padding:0;
    background:transparent;box-shadow:none}
  .nav-fold:hover{background:var(--chip)}
  .nav-fold::before,.rail .b::before{content:"";width:1.15rem;height:1.15rem;background:center/contain no-repeat}
  .nav-fold::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16M16 10l-2 2 2 2'/%3E%3C/svg%3E")}
  :root[data-nav="rail"] .shell{grid-template-columns:var(--rail-w) minmax(0,1fr) var(--right-w)}
  :root[data-nav="rail"][data-screen="home"] .shell{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  :root[data-nav="rail"] .nav-in{display:none}
  :root[data-nav="rail"] .rail{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.1rem 0 1.4rem}
  .rail .mark{display:block;width:2.6rem;height:2.6rem;border-radius:calc(12px * var(--sq));margin-bottom:.5rem;box-shadow:var(--sh);
    background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E") center/1.25rem no-repeat}
  .rail .b{width:2.6rem;min-width:2.6rem;height:2.6rem;padding:0;background:transparent;box-shadow:none}
  .rail .b:hover{background:var(--chip)}
  .rail .r-search{background:var(--chip)}
  .rail .r-search::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E")}
  .rail .r-open::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16M14 10l2 2-2 2'/%3E%3C/svg%3E")}
}

/* the sidebar floats when open: on a desktop, opening the folded sidebar does not push the
   chart. The shell keeps the rail's width whether the sidebar is open or not, the rail stays
   where it is, and the open sidebar floats over the page's left edge as a full-height panel,
   with a scrim over the rest; a click on the scrim, Escape, or its fold button closes it. */
.nav-scrim{display:none}
@media (min-width:901px){
  :root:not([data-nav="rail"]) .shell{grid-template-columns:var(--rail-w) minmax(0,1fr) var(--right-w)}
  :root:not([data-nav="rail"])[data-screen="home"] .shell{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  :root:not([data-nav="rail"]) .nav{z-index:46}
  :root:not([data-nav="rail"]) .rail{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.1rem 0 1.4rem}
  :root:not([data-nav="rail"]) .nav-in{position:fixed;left:0;top:0;width:var(--nav-w);height:100vh;overflow-y:auto;
    background:var(--card);box-shadow:var(--sh-lift)}
  :root:not([data-nav="rail"]) .nav-scrim{display:block;position:fixed;inset:0;z-index:45;background:var(--scrim)}
}

/* ---- phone tab bar ---- */
.tabs{display:none}

/* ---- centre: song ---- */
.c-in{padding:1.4rem 1.5rem 3rem}
.song-h{--r:20px;background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh);padding:1.2rem 1.4rem 1.1rem}
.song-h h1{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.song-h .meta{margin:.4rem 0 0;font-size:.9rem;color:var(--soft)}
.meta b{color:var(--ink);font-weight:800}
/* the toolbar card: a row, so its groups sit against its top and bottom padding */
.tools{--r:18px;--p:.45rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin));
  position:sticky;top:.5rem;z-index:10;margin:.8rem 0 1rem;padding:var(--p) .5rem;border-radius:calc(var(--r) * var(--sq));
  background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--sh);display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
/* a control group: the toolbar's --ri for itself, its own padding for the buttons in it */
.grp{--p2:.2rem;--ri2:max(calc(var(--ri,14px) - var(--p2)),var(--rmin));
  display:flex;align-items:center;gap:.2rem;position:relative;background:var(--chip);border-radius:calc(var(--ri,14px) * var(--sq));padding:var(--p2)}
.grp>.b{border-radius:calc(var(--ri2) * var(--sq))}
.grp.g-view,.grp.g-set,.grp.g-more,.grp.g-sheet{background:transparent;padding:0}
.grp.g-view .seg{padding:.2rem}
.lab{font-size:.72rem;font-weight:700;color:var(--soft);padding:0 .1rem 0 .35rem;white-space:nowrap}
.val{min-width:1.6rem;text-align:center;font-weight:800;font-size:1rem;white-space:nowrap}
.val .to{color:var(--soft);font-weight:600;font-size:.82rem}
.pos{font-size:.82rem;font-weight:600;color:var(--soft);padding:0 .35rem 0 .15rem;white-space:nowrap;font-variant-numeric:tabular-nums}
/* a popover: a column, so what sits in it is inset by its side padding */
.pop{--r:16px;--p:.9rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin));
  position:absolute;top:calc(100% + .5rem);left:0;z-index:20;background:var(--card);border-radius:calc(var(--r) * var(--sq));
  box-shadow:var(--sh-lift);padding:.7rem var(--p);min-width:16rem}
.pop.r{left:auto;right:0}
.pop .row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.3rem 0}
.pop .row>span:first-child{font-size:.84rem;font-weight:600;color:var(--soft)}
.pop .row+.row{border-top:1px solid var(--rule)}
.pop .row>.b{border-radius:calc(var(--ri) * var(--sq))}
.pop .hint{font-size:.76rem;color:var(--soft);padding:.35rem 0 .1rem}
.keyb{min-width:3.6rem;font-weight:800;font-size:1.02rem}
/* the key grid: all twelve keys as a 6 by 2 segmented grid at the top of the key popover */
.kgrid{--p2:.2rem;--ri2:max(calc(var(--ri) - var(--p2)),var(--rmin));
  flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.15rem;padding:var(--p2);
  background:var(--chip);border-radius:calc(var(--ri) * var(--sq))}
.kgrid .b{position:relative;min-width:0;height:2.75rem;padding:0 0 .55rem;font-size:.95rem;background:transparent;box-shadow:none;
  color:var(--soft);border-radius:calc(var(--ri2) * var(--sq))}
.kgrid .b:hover{background:var(--chip-h)}
.kgrid .b.on{background:var(--card);color:var(--pick);font-weight:800;box-shadow:var(--sh-btn)}
.kgrid .k-orig{position:absolute;left:0;right:0;bottom:.32rem;font-size:.58rem;font-weight:700;line-height:1;text-align:center}
.r-keys{padding:.1rem 0 .55rem}
.grp>.b:not(.on){background:transparent;box-shadow:none}
.grp>.b:not(.on):hover:not(:disabled){background:var(--chip-h)}
.grp.g-key .keyb{background:var(--card);box-shadow:var(--sh-btn)}
/* a group with no padding of its own: its one button is the box in the toolbar's row */
.grp.g-set>.b,.grp.g-more>.b,.grp.g-sheet>.b{background:var(--chip);border-radius:calc(var(--ri) * var(--sq))}
.grp.g-set>.b:hover,.grp.g-more>.b:hover,.grp.g-sheet>.b:hover{background:var(--chip-h)}
/* the playback position line: the song's position as a 3 px line in --now along the bottom
   inside edge of the toolbar card and of the mini card, filled to --prog (chart.js) over a
   --rule track. 더보기's 재생 위치 선 switch turns it off with data-prog="off" on <html>. */
.tools::after,.mini::after{content:"";position:absolute;inset:0;border-radius:calc(var(--r) * var(--sq));pointer-events:none;
  background:linear-gradient(to right,var(--now) calc(var(--prog,0) * 100%),var(--rule) 0) left bottom / 100% 3px no-repeat}
:root[data-prog="off"] .tools::after,:root[data-prog="off"] .mini::after{content:none}

/* ---- the phone's tool sheet and the mini player, shown by their own rules below ---- */
.g-sheet,.sheet,.sheet-bg,.mini{display:none}
.b.right-fold,.mini>.mini-unfold{display:none}
.mini{--r:var(--mr);--p:var(--mp);--ri:var(--mri);position:fixed;z-index:26;align-items:center;gap:.6rem;
  padding:var(--p) .9rem var(--p) var(--p);background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh-lift)}
.mini-open{flex:1;min-width:0;display:flex;align-items:center;gap:.8rem;height:calc(var(--mw) * 9 / 16);padding:0;border:0;
  background:transparent;cursor:pointer;text-align:left}
.mini-open::before{content:"";flex:none;width:var(--mw);height:100%}
/* a song whose embed is blocked has no player, so the card keeps no room for one */
:root:not(:has(#video:not([hidden]))) .mini-open::before{display:none}
:root:not(:has(#video:not([hidden]))) .mini{padding-left:.9rem}
.mini-open .t{min-width:0;font-weight:800;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini>.b{flex:none;background:var(--chip);box-shadow:none;border-radius:calc(var(--ri) * var(--sq));font-size:.8rem}
.mini>.b:hover{background:var(--chip-h)}

/* the right column folds: on a desktop a fold button at its top right folds it, so the chart
   takes the width; folded, the video stays on screen as the mini card docked at the window's
   bottom right, which adds an unfold button, and the chart gets the card's height of room below
   it. The column starts folded below 1280 px, decided once at load. #video is placed by CSS
   alone, never moved or cloned. */
@media (min-width:901px){
  :root{--mw:160px;--mcw:24rem;--mgap:1.2rem}
  .right{padding-top:3.65rem}
  .b.right-fold{display:inline-flex;position:absolute;top:.95rem;right:.75rem;width:2.2rem;min-width:2.2rem;height:2.2rem;padding:0;
    background:transparent;box-shadow:none}
  .b.right-fold:hover{background:var(--chip)}
  .right-fold::before,.mini-unfold::before{content:"";width:1.15rem;height:1.15rem;background:center/contain no-repeat}
  .right-fold::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M15 4v16M8 10l2 2-2 2'/%3E%3C/svg%3E")}
  .mini-unfold::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M15 4v16M10 10l-2 2 2 2'/%3E%3C/svg%3E")}
  .mini{right:var(--mgap);bottom:var(--mgap);width:var(--mcw)}
  .mini>.mini-unfold{display:inline-flex;width:2.5rem;padding:0}
  :root[data-right="fold"]{--right-w:0px}
  :root[data-right="fold"] .shell{padding-bottom:calc(var(--mw) * 9 / 16 + var(--mp) * 2 + var(--mgap))}
  :root[data-right="fold"] .right{position:static;height:0;padding:0;overflow:visible}
  :root[data-right="fold"] .right>:not(#video){display:none}
  :root[data-right="fold"] #video{position:fixed;z-index:27;right:calc(var(--mgap) + var(--mcw) - var(--mp) - var(--mw));
    bottom:calc(var(--mgap) + var(--mp));width:var(--mw);max-width:none;border-radius:calc(var(--mri) * var(--sq));
    box-shadow:none;pointer-events:none}
  :root[data-right="fold"] .mini{display:flex}
}

/* ---- chart: one card, a section is its heading plus its grid ---- */
.chart{font-size:calc(var(--font-scale) * 1rem)}
#chart{--r:20px;--p:1rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin));
  background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh);padding:.85rem var(--p) var(--p);margin:0 0 1rem}
.sec{margin:0 0 1.6rem}
.sec:last-child{margin-bottom:0}
.sec-h{display:flex;align-items:center;gap:.6rem;margin:0 0 .7rem;font-size:1rem;font-weight:400}
.sec-name{display:inline-flex;align-items:center;gap:.45em;font-size:.86rem;font-weight:700;color:var(--ink);
  background:var(--chip);border-radius:999px;padding:.28rem .8rem}
.sec-bars{font-size:.8rem;font-weight:600;color:var(--soft);font-variant-numeric:tabular-nums}
/* the grid takes the card's --ri; a bar sits at inset 0, so the playhead takes the same */
.grid{--p2:.45rem;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border-radius:calc(var(--ri) * var(--sq));
  background:color-mix(in srgb,var(--ink) 2%,var(--card));box-shadow:inset 0 0 0 1px var(--rule)}
.grid+.sec,.grid+.grid{margin-top:1.6rem}
.bar{position:relative;min-width:0;min-height:4.7em;display:flex;flex-direction:column;justify-content:center;cursor:pointer;
  padding:.5rem .2rem .45rem var(--p2);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 -1px -1px 0}
.grid>.bar:nth-child(4n+1){padding-left:.65rem}
/* a number on the first bar of each row; the count restarts inside each .grid, so a section's
   first bar is a row start whatever its number in the song */
.num{position:absolute;top:4px;left:10px;font-size:.62em;font-weight:700;color:var(--soft);line-height:1.2;display:none}
.grid>.bar:nth-child(4n+1)>.num{display:block}
.slots{display:flex;width:100%;align-items:center}
/* a slot clips, so a name wider than its slot is fitted to it by chart.js */
.slot{display:flex;align-items:center;justify-content:center;min-width:0;text-align:center;font-weight:700;
  font-size:calc(1.59em * var(--fit,1));letter-spacing:-.015em;white-space:nowrap;overflow:hidden;padding:.05em .1em;
  border-left:1px dashed var(--rule)}
.slot:first-child{border-left:none}
.slot.cont{color:var(--cont);font-weight:500}
.slot.rest{font-weight:400;font-size:calc(1.22em * var(--fit,1))}
.slot.rest .ch{font-size:.56em;font-weight:700;color:var(--soft);background:var(--chip);border-radius:999px;
  padding:.2em .6em;letter-spacing:.04em}
/* the syllables under the bar they are sung in, each where in the bar it falls; chart.js's
   lane solver sets each one's left in pixels */
.lyr-lane{position:relative;height:1.3em;margin:.35em .2em 0 0;font-size:.9em;line-height:1.25;color:var(--soft)}
.lb{position:absolute;top:0;white-space:nowrap}
/* the chord-list form: the chords that start in the bar at natural width, the words flowing in
   sung order. An attribute on <body>, set by chart.js. */
body[data-grid="list"] .slots{justify-content:flex-start;gap:.45em;padding-left:.2em}
body[data-grid="list"] .slot{border-left:none}
body[data-grid="list"] .lyr-lane{height:auto;display:flex;flex-wrap:wrap;align-items:baseline}
body[data-grid="list"] .lb{position:static}
body[data-grid="list"] .lb[data-gap="1"]{margin-left:.35em}
/* the playhead, filled with the accent so the bar being played is found at a glance from a
   music stand; a held chord in it stays distinct at 65%, an N.C. on a 20% ground */
.bar.now{background:var(--now);border-radius:calc(var(--ri) * var(--sq));z-index:1}
.bar.now .slot,.bar.now .num,.bar.now .lyr-lane{color:var(--on-accent)}
.bar.now .lyr-lane{font-weight:600}
.bar.now .slot.cont{color:color-mix(in srgb,var(--on-accent) 65%,transparent)}
.bar.now .slot.rest .ch{color:var(--on-accent);background:color-mix(in srgb,var(--on-accent) 20%,transparent)}

/* ---- chords over lyrics: a column card, its lines inset by its side padding ---- */
#lyrics{display:none}
body[data-view="lyrics"] #chart{display:none}
body[data-view="lyrics"] #lyrics{display:block}
.lines{--r:20px;--p:1.4rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin));
  max-width:46rem;background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh);padding:.4rem var(--p) 1rem;margin:0 0 1rem}
.lyr-sec{display:inline-block;margin:1.3em 0 .6em;font-size:.86em;font-weight:700;background:var(--chip);
  border-radius:999px;padding:.28rem .8rem}
.lyr-line{display:flex;flex-wrap:wrap;align-items:flex-end;margin:0 0 .9em;line-height:1.2;width:fit-content;max-width:100%;
  border-radius:calc(var(--ri) * var(--sq));padding:.1em .2em}
.lyr-cell{display:inline-flex;flex-direction:column}
.lyr-ch{font-weight:700;font-size:1.07em;min-height:1.3em;padding-right:.35em;white-space:nowrap}
.lyr-s{font-size:1.15em}
.lyr-gap{display:inline-block;width:.5em}
.lyr-blank .lyr-s{color:var(--soft);font-style:italic}
/* the playing line filled, and the sung syllable inside it marked for its beat */
.lyr-line.now{background:var(--now);color:var(--on-accent)}
.lyr-line.now .lyr-ch,.lyr-line.now .lyr-s{color:var(--on-accent)}
.lyr-cell.now .lyr-s{font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
@media (min-width:901px){
  :root[data-cols="2"] .lines{max-width:none;column-count:2;column-gap:calc(var(--p) * 2);column-rule:1px solid var(--rule)}
  :root[data-cols="2"] .lines .lyr-line{break-inside:avoid}
  :root[data-cols="2"] .lines .lyr-sec+.lyr-line{break-before:avoid}
}

/* 코드 모양: a guitar box over each chord name that starts in its slot, when the reader turns
   it on in 더보기. A slot whose chord is held, an N.C. or a chord with no shape keeps an empty
   box of the same height, so a row stays level. The name stays the slot's first child, so the
   fit measures the name; a box wider than its slot scales down with it. */
.dia{display:none}
body[data-dia="on"] .slots{align-items:stretch}
body[data-dia="on"] .slot{flex-direction:column;justify-content:flex-start}
body[data-dia="on"] .slot>.dia,body[data-dia="on"] .lyr-cd>.dia{display:block;order:-1;line-height:0;
  font-size:calc(var(--font-scale) * .95rem);height:calc(2em * 46 / 34);margin-bottom:.15em}
.dia svg{display:block;width:2em;max-width:100%;height:auto;margin:0 auto;overflow:visible;color:var(--soft)}
.dia .dia-line{stroke:currentColor;stroke-width:.6;fill:none}
.dia .dia-nut{stroke:currentColor;stroke-width:2;stroke-linecap:butt}
.dia .dia-dot{fill:var(--ink)}
.dia .dia-mark,.dia .dia-base{fill:currentColor;font-size:6px;font-family:var(--f)}
.bar.now .dia svg{color:color-mix(in srgb,var(--on-accent) 75%,transparent)}
.bar.now .dia .dia-dot{fill:var(--on-accent)}
.lyr-cd{display:inline-flex;flex-direction:column;align-items:flex-start;margin-right:.3em}
.lyr-cd .dia svg{margin:0}
.lyr-line.now .dia svg{color:color-mix(in srgb,var(--on-accent) 75%,transparent)}
.lyr-line.now .dia .dia-dot{fill:var(--on-accent)}

/* the footer */
.after{margin-top:2rem}
.foot{padding:1rem 1.2rem;background:var(--chip);border-radius:calc(16px * var(--sq));font-size:.82rem;line-height:1.7;color:var(--soft)}
.foot a{color:var(--ink);font-weight:700;text-underline-offset:2px}

/* ---- right column: the video, then cards ---- */
#video{flex-shrink:0;aspect-ratio:16/9;background:var(--video);border-radius:calc(20px * var(--sq));box-shadow:var(--sh-lift);overflow:hidden}
#video iframe{width:100%;height:100%;border:0;display:block}
/* a right-column card: a column, so the boxes in it are inset by its side padding */
.blk{--r:20px;--p:1.1rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin));
  flex:none;background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh);padding:1rem var(--p);min-width:0}
.blk h2{margin:0 0 .5rem;font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.blk p{margin:.3rem 0;font-size:.84rem;line-height:1.55;color:var(--soft)}
textarea{width:100%;border:1px solid transparent;border-radius:calc(var(--ri,14px) * var(--sq));background:var(--chip);padding:.6rem .75rem;
  font-size:.88rem;line-height:1.6;resize:vertical;margin:.5rem 0 .3rem}
textarea:focus{outline:none;border-color:var(--focus);background:var(--card)}
textarea[readonly]{color:var(--soft)}
/* 내 가사: the card holds the paste box and the line editor, and goes when both are hidden */
#mylyrics:not(:has(>#paste:not([hidden]),>#byoledit:not([hidden]))){display:none}
#paste .p-lab{display:block;font-weight:700;font-size:.88rem}
#paste .p-flags{list-style:none;margin:.45rem 0 0;padding:0;display:grid;gap:.35rem;max-height:14rem;overflow-y:auto}
#paste .p-flags li{font-size:.82rem;color:var(--soft);background:var(--chip);border-radius:calc(var(--ri) * var(--sq));padding:.45rem .65rem}
#paste .p-flags b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;margin-right:.35rem}
#paste .p-json{margin-top:.5rem}
#paste .p-acts{margin:.5rem 0 0}
#paste .p-state,#paste .p-offer{color:var(--ink)}
#paste .p-msg{color:var(--bad)}
#paste .p-msg:empty,#paste .p-state:empty{display:none}
#paste .p-btns{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
#byoledit{margin-top:.7rem}
#byoledit .e-why{background:var(--chip);border-radius:calc(var(--ri) * var(--sq));padding:.55rem .7rem;color:var(--ink);font-weight:600}
#byoledit>.b-btn{width:100%}
#byoledit ol{list-style:none;margin:.5rem 0 0;padding:0}
#byoledit li{padding:.5rem 0;border-top:1px solid var(--rule);font-size:.86rem}
#byoledit .e-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem}
#byoledit .e-bar{font-weight:800;color:var(--ink);background:none;border:none;padding:0;cursor:pointer;
  text-decoration:underline dotted;text-underline-offset:3px}
#byoledit .e-flag{font-size:.78rem;color:var(--soft)}
#byoledit .e-row,#byoledit .e-syls{display:flex;align-items:center;gap:.3rem;margin-top:.3rem}
#byoledit .e-syls{flex-wrap:wrap}
#byoledit .e-text{flex:1;min-width:0;border:1px solid transparent;border-radius:calc(var(--ri) * var(--sq));background:var(--chip);padding:.35rem .5rem}
#byoledit .e-text:focus{outline:none;border-color:var(--focus);background:var(--card)}
#byoledit .e-chip{font-size:.84rem;min-width:1.9rem;min-height:1.9rem;color:var(--ink);background:var(--chip);border:none;
  border-radius:calc(var(--ri) * var(--sq));padding:.1rem .35rem;cursor:pointer}
#byoledit .e-chip.on{background:var(--card);color:var(--pick);font-weight:800;box-shadow:inset 0 0 0 2px var(--pick)}
#byoledit .e-err{margin:.25rem 0 0;font-size:.8rem;color:var(--bad)}
#byoledit .e-err:empty{display:none}
/* 계정: chart.js writes the heading and the signed-in row; signed out, the block holds the compact sign-in card */
#acct .a-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem}
#acct .a-mail{font-size:.88rem;font-weight:700;overflow-wrap:anywhere}
#acct .a-row a{font-size:.84rem;font-weight:600;color:var(--soft)}
#words .words-in p{margin:0;font-size:.88rem;line-height:1.85;color:var(--soft)}

/* ---- the catalog page (SPEC_home_login_v3.md, SPEC_release_login_v4.md): the design's final v4,
   design/home_login/final/base.css, on this file's tokens. Each block is a .zone the width of the
   centre holding a .col of at most 1,120 px; on a desktop the hero and every pair of lists share
   one grid of two equal columns with a 2.5 rem gap (--gut). ---- */
.home2{padding:0;--gut:2.5rem}
/* Korean breaks at spaces (body's keep-all); a string with no space still wraps rather than
   overflow, and unlike break-word, anywhere does not raise a track's min-content width. */
.home2{overflow-wrap:anywhere}
.zone{padding:0 2.5rem}
.col{max-width:1120px;margin:0 auto}
.zone-hero,.zone-me{padding-top:2.2rem}
.zone-cat{padding-bottom:4rem}
.home-missing{background:var(--card);border-radius:calc(14px * var(--sq));box-shadow:var(--sh);padding:.7rem 1rem;margin:2rem 0 0;
  font-size:.9rem;color:var(--soft)}
.home-foot{margin:1.4rem 0 0 .3rem;font-size:.82rem;font-weight:600;color:var(--soft)}
.home-foot a{text-decoration:none}
.home-foot a:hover{color:var(--ink)}
.home-note{margin:0 .3rem;color:var(--soft);font-size:.9rem}

/* the brand line of the signed-in header, and the mark above the name in the hero */
.brandline{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:800;font-size:1.1rem;letter-spacing:-.02em}
.brandline::before{content:"";width:2.6rem;height:2.6rem;flex:none;border-radius:calc(12px * var(--sq));box-shadow:var(--sh);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E") center/1.25rem no-repeat}
.headline{margin:0;font-size:3.1rem;font-weight:800;letter-spacing:-.035em;line-height:1.12}
.zone-hero .headline{display:block}
.zone-hero .headline::before{content:"";display:block;margin-bottom:1rem;width:3.4rem;height:3.4rem;border-radius:calc(15px * var(--sq));box-shadow:var(--sh);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E") center/1.6rem no-repeat}
.sub-h{margin:.7rem 0 0;font-size:1.65rem;font-weight:800;letter-spacing:-.025em;line-height:1.3;color:var(--soft)}
.lede{margin:1rem 0 0;font-size:1.06rem;color:var(--soft);line-height:1.7;max-width:34rem}
/* the wide search field: signed out under the lede, signed in under the greeting */
.top-search{display:block;margin-top:1.4rem;max-width:36rem;height:3rem;font-size:1rem;background-color:var(--card);box-shadow:var(--sh)}
.fold.folded{display:none}

/* the hero: the pitch on the left, the sign-in card on the right; on a desktop the two columns
   are one height, the card's top on the mark's and its bottom on the search field's */
.heroA{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);align-items:stretch;padding:2.6rem 0 1rem}
.heroA .signin{width:100%}
@media (min-width:901px){
  .heroA .signin{display:flex;flex-direction:column}
  .heroA .signin>.si-stack{margin-top:auto}
  .zone-hero .pitch{display:flex;flex-direction:column}
  .zone-hero .pitch>.lede{margin-bottom:1.4rem}
  .zone-hero .pitch>.top-search{margin-top:auto;max-width:none;height:4.1rem;font-size:1.06rem;
    padding-left:2.9rem;background-position:1.1rem center;background-size:1.2rem}
  .zone-hero .headline{font-size:3.7rem}
  .zone-hero .headline::before{margin-bottom:1.2rem}
  .sub-h{font-size:1.95rem;margin-top:.8rem}
  .zone-hero .pitch>.lede{font-size:1.14rem;line-height:1.75;margin-top:1.1rem}
}

/* signed in: one header line, a greeting, then the reader's own songs */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem 0 .2rem}
.who{display:flex;align-items:center;gap:.6rem;background:var(--card);border-radius:999px;box-shadow:var(--sh);padding:.3rem;min-width:0}
.who .av{width:2.1rem;height:2.1rem;flex:none;border-radius:50%;background:var(--chip);display:grid;place-items:center;font-weight:800;font-size:.95rem}
.who .mail{font-size:.88rem;font-weight:700;padding-right:.2rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .b-btn{border-radius:999px;min-height:2.1rem;padding:.3rem .85rem;text-decoration:none;display:inline-flex;align-items:center;flex:none}
.greet{margin:2.2rem 0 0;font-size:2.2rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.greet-sub{margin:.5rem 0 0;color:var(--soft);font-size:.98rem}
.zone-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:2.6rem .3rem .85rem}
.zone-h h2{margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.zone-h .more{font-size:.84rem;font-weight:600;color:var(--soft);text-decoration:none}
.zone-h .note{font-size:.8rem;font-weight:600;color:var(--soft)}

/* song tiles: as many to a row as fit at 200 px or more, five in the 1,120 px column */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem}
.tile{--r:20px;--p:.9rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin));
  display:block;text-decoration:none;background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh);padding:.85rem var(--p);min-height:6.2rem}
.tile:hover{box-shadow:var(--sh-lift)}
.tile .t{font-size:1.04rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.tile .a{color:var(--soft);margin-top:.15rem}
.tile .k{display:inline-block;margin-top:.7rem;font-size:.8rem;font-weight:600;color:var(--soft);background:var(--chip);
  border-radius:999px;padding:.25rem .6rem}
.tile .k b{color:var(--ink);font-weight:800}
.tile .saved{display:block;margin-top:.55rem;font-size:.8rem;font-weight:600;color:var(--soft)}
.empty{--r:20px;background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh);padding:1.3rem 1.4rem;
  display:flex;gap:1.1rem;align-items:center}
.empty .skel{display:grid;gap:.4rem;width:5.5rem;flex:none}
.empty .skel span{height:.5rem;border-radius:999px;background:var(--chip)}
.empty b{display:block;font-size:1rem}
.empty p{margin:.3rem 0 0;color:var(--soft);font-size:.9rem;line-height:1.6}
/* a small neutral tag after the title of a song with saved lyrics (signed in) */
.mine{display:inline-block;margin-left:.5rem;font-size:.7rem;font-weight:700;line-height:1.5;color:var(--soft);background:var(--chip);
  border-radius:999px;padding:.05rem .5rem;vertical-align:.12em}

/* 인기곡 | 최신곡 and 인기가수: lists side by side, each a card of one-line rows (the title, the
   singer after it, the key at the right; a rank number in the ranked lists); one result list in
   their place while searching */
.lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.zone-cat .zone-h{margin-top:2.4rem}
.lists .zone-h{align-items:center;min-height:2.35rem}
.list-pop .seg .b{height:1.95rem;min-width:0;padding:0 .7rem;font-size:.8rem}
.list-art .r-k b{font-weight:800;margin-right:.1rem}
.rlist{--r:20px;--p:.45rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin));list-style:none;margin:0;padding:var(--p);
  background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh)}
.rlist li+li{border-top:1px solid var(--rule)}
.rlist a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.85rem;min-height:2.85rem;
  padding:.3rem .8rem;text-decoration:none;border-radius:calc(var(--ri) * var(--sq))}
.rlist.ranked a{grid-template-columns:1.5rem minmax(0,1fr) auto}
.rlist a:hover{background:var(--chip)}
.rlist .r-n{text-align:center;font-weight:800;font-size:1rem;color:var(--soft);font-variant-numeric:tabular-nums}
.rlist .r-info{min-width:0;display:flex;align-items:baseline;gap:.6rem}
.rlist .r-t{flex:none;max-width:60%;display:block;font-weight:700;letter-spacing:-.01em;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlist .r-a{flex:1;min-width:0;display:block;font-size:.84rem;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlist .r-k{font-size:.84rem;color:var(--soft);white-space:nowrap}
.rlist .r-k b{color:var(--ink);font-weight:800}
.rlist li.none{padding:.8rem;color:var(--soft);font-size:.9rem}
@supports (corner-shape:squircle){
  .who,.who .b-btn,.who .av,.si-list .ck,.empty .skel span,.mine,.upd,.upd .b-btn,.si-back{corner-shape:round}
}

/* ---- the sign-in card (signin.js): the full form on the catalog, the compact form in the chart
   page's account block and on the account page. A step not shown keeps its box (visibility,
   not display), so the card is one size in all six steps. ---- */
.signin{--r:28px;--p:1rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin));
  background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh-lift);padding:var(--p)}
.signin .si-txt{padding:.85rem .8rem .9rem}
.signin h2{margin:0;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.si-h{display:grid}
.si-h>h2{grid-area:1/1;align-self:end}
/* what signing in gives, three lines after a check in a --chip circle; the message box shares
   their grid cell and takes it while a message shows */
.si-box{display:grid;margin-top:.75rem}
.si-box>.si-list,.si-box>.si-msg{grid-area:1/1}
.si-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.si-list li{display:flex;gap:.7rem;align-items:center;font-size:1rem;font-weight:600;line-height:1.45;color:var(--ink)}
.si-list .ck{flex:none;width:1.55rem;height:1.55rem;padding:.3rem;border-radius:50%;background:var(--chip);color:var(--ink)}
.signin .si-msg{margin:0;align-self:center;font-size:.95rem;font-weight:700;line-height:1.55;color:var(--ink);visibility:hidden}
.signin[data-msg] .si-box>.si-list{visibility:hidden}
.signin[data-msg] .si-msg{visibility:visible}
/* the ways in and the e-mail steps: buttons and fields 2.75 rem (44 px) on every width */
.gbtn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;height:2.75rem;border:none;cursor:pointer;
  background:var(--card);color:var(--ink);font-size:1rem;font-weight:800;letter-spacing:-.01em;text-decoration:none;
  border-radius:calc(var(--ri,14px) * var(--sq));box-shadow:inset 0 0 0 1px var(--edge),var(--sh-btn)}
.gbtn:hover:not(:disabled){background:var(--chip)}
.gbtn:disabled{opacity:.45;cursor:default}
.gbtn svg{width:1.15rem;height:1.15rem;flex:none}
.mbtn svg{color:var(--soft)}
/* Apple's logo artwork (apple-logo.svg, black); in dark mode the Apple button alone takes
   Apple's white style, a white fill with the black logo and black text (owner, 2026-11-07) */
.abtn img{display:block;width:auto;height:1.08rem;flex:none;margin-top:-.12rem}
@media (prefers-color-scheme: dark){
  .gbtn.abtn{background:#ffffff;color:#000000;box-shadow:var(--sh-btn)}
  .gbtn.abtn:hover:not(:disabled){background:#ececec}
}
.si-stack{display:grid}
.si-step{display:grid;gap:.45rem}
.si-stack>.si-step{grid-area:1/1;align-self:end}
.si-stack>.off,.si-foot>.off,.si-h>.off,.si-top>.off{visibility:hidden}
.signin .si-in{width:100%;height:2.75rem;font-size:1rem;padding:0 1rem;background-image:none;background-color:var(--chip);
  border-radius:calc(var(--ri) * var(--sq))}
.si-otp{letter-spacing:.5em;font-variant-numeric:tabular-nums;text-align:center}
.signin .si-note{margin:0;padding:0 .8rem;font-size:.92rem;color:var(--soft);line-height:1.55;align-self:end}
.si-note b{color:var(--ink);overflow-wrap:anywhere}
.signin .si-foot{display:grid;padding:.7rem .8rem .35rem;font-size:.84rem;font-weight:600;line-height:1.5;color:var(--soft)}
.si-foot>.si-f{grid-area:1/1;display:flex;justify-content:center;flex-wrap:wrap;gap:.3rem 1.1rem}
.signin .si-foot a{text-decoration:none;color:var(--soft)}
.signin .si-foot a:hover{color:var(--ink)}
.si-back{border:0;background:none;color:var(--soft);font:inherit;font-weight:600;padding:0 .1rem;cursor:pointer}
.si-back:hover:not(:disabled){color:var(--ink);text-decoration:underline}
.signin[aria-busy] .gbtn[type="submit"]{opacity:.6}
/* the compact form: no card of its own, the block's radius for its boxes, and the step-0
   sentence, the step headings and the message in one grid cell */
.signin.si-compact{--r:inherit;--p:inherit;--ri:inherit;background:none;box-shadow:none;border-radius:0;padding:0}
.si-top{display:grid}
.signin .si-top>*{grid-area:1/1;align-self:end;margin:0}
.signin .si-top .si-why{font-size:.84rem;line-height:1.55;color:var(--soft)}
.signin .si-top h3{font-size:.98rem;font-weight:800;letter-spacing:-.01em;line-height:1.4}
.signin .si-top>.si-msg{font-size:.84rem;line-height:1.55}
/* three message lines kept free, so the longest message (credentials) never grows a block whose
   own sentence is shorter (the account page's, at 390) */
.signin.si-compact .si-top{min-height:calc(.84rem * 1.55 * 3)}
.signin[data-msg] .si-top>[data-s]{visibility:hidden}
.si-compact .si-stack{margin-top:.75rem}
.si-compact .si-foot{padding:.6rem 0 0}
.si-compact .si-note{padding:0}

/* the Turnstile overlay: invisible for nearly every reader, centred over the page when
   Cloudflare wants an interaction; hidden by visibility, never display, so the widget's frame
   stays laid out */
.ts-ov{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:var(--scrim);visibility:hidden;pointer-events:none}
.ts-ov.on{visibility:visible;pointer-events:auto}
.ts-box{--r:20px;background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh-lift);padding:1.1rem 1.2rem;text-align:center}
.ts-box p{margin:0 0 .8rem;font-weight:700}
.ts-w{min-width:300px;min-height:65px}
@media (max-width:380px){.ts-box{padding:.9rem .4rem}}

/* the bar: the update bar, and the notices that take its place, at the bottom centre above the
   phone's tab bar and above the mini card when that shows */
.upd{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:.9rem;
  width:max-content;max-width:calc(100vw - 1.5rem);background:var(--card);box-shadow:var(--sh-lift);border-radius:1.6rem;
  padding:.45rem .5rem .45rem 1.2rem;font-weight:700;font-size:.92rem;line-height:1.45}
.upd>span{min-width:0}
.upd .b-btn{border-radius:999px;flex:none}
@media (min-width:901px){
  :root[data-right="fold"] .upd{bottom:calc(var(--mw) * 9 / 16 + var(--mp) * 2 + var(--mgap) + .8rem)}
}

/* ---- the account, sign-in and legal pages: one centred column on the page's ground ---- */
.page{max-width:44rem;margin:0 auto;padding:2.4rem 1.2rem 5rem;line-height:1.65}
.page .back{margin:0 0 1.2rem;font-size:.88rem;font-weight:600;color:var(--soft)}
.page .back a{text-decoration:none}
.page .back a:hover{color:var(--ink)}
.page h1{margin:0 0 1rem;font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.page .card{--r:20px;--p:1.4rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin));
  background:var(--card);border-radius:calc(var(--r) * var(--sq));box-shadow:var(--sh);padding:1.1rem var(--p);margin:0 0 1rem}
.page a{color:var(--ink);text-underline-offset:2px}

/* ---- dropped files and the toast ---- */
.drop{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.drop.on{display:flex}
.drop-in{--r:20px;border:2px dashed var(--edge);border-radius:calc(var(--r) * var(--sq));padding:2.2rem 3.2rem;
  color:var(--ink);background:var(--card);box-shadow:var(--sh-lift);font-size:.95rem;font-weight:700}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(140%);
  z-index:61;max-width:min(46rem,92vw);opacity:0;pointer-events:none;
  transition:transform .18s ease-out,opacity .18s ease-out;
  background:var(--card);border-radius:calc(14px * var(--sq));padding:.75rem 1rem;font-size:.84rem;line-height:1.55;color:var(--ink);
  box-shadow:var(--sh-lift)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;cursor:pointer}
.toast.bad{box-shadow:var(--sh-lift),inset 3px 0 0 var(--bad)}
.toast .t-err{display:block;color:var(--bad)}

/* the chart page's max width (SPEC_home_login_v3.md, "Beyond the catalog"; owner, 2026-11-07): the
   centre and the right column together at most 1,856 px, the width they take at 1920 beside the
   rail, centred in the space right of it. Two gutter tracks hold the rest; they are 0 at 1920
   and below, so nothing there moves. Percentages in the template resolve against the shell's
   own width, which leaves a classic scrollbar out. */
@media (min-width:1921px){
  :root:not([data-screen="home"]) .shell{--gutter:max(0px,calc((100% - var(--rail-w) - 1856px) / 2));
    grid-template-columns:var(--rail-w) var(--gutter) minmax(0,1fr) var(--right-w) var(--gutter)}
  :root:not([data-screen="home"]) .centre{grid-column:3}
  :root:not([data-screen="home"]) .right{grid-column:4}
}

/* ---- a phone ---- */
@media (max-width:900px){
  .shell,:root[data-screen="home"] .shell{display:block;padding-bottom:var(--tabs)}
  .nav,.right{position:static;height:auto;overflow:visible;background:transparent;box-shadow:none}
  .pane{display:none}
  body[data-pane="list"] .p-list,body[data-pane="chart"] .p-chart{display:block}
  body[data-pane="side"] .p-side{display:flex}
  .tabs{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--tabs);
    background:color-mix(in srgb,var(--card) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 -1px 0 var(--rule),0 -6px 20px rgba(20,30,50,.05)}
  /* an iOS tab bar: a line icon over each label, applied as a mask over currentColor, so it
     takes the label's colour (--pick selected, --faint disabled, --soft otherwise) */
  .tab{position:relative;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;gap:.15rem;
    align-items:center;justify-content:center;font-size:.95rem;font-weight:600;color:var(--soft)}
  .tab.on{color:var(--pick);font-weight:800}
  .tab:disabled{color:var(--faint);cursor:default}
  .tab::after{content:"";order:-1;flex:none;width:1.5rem;height:1.5rem;background-color:currentColor;
    -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
  .tab[data-p="list"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E")}
  .tab[data-p="chart"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Ccircle cx='10' cy='16.5' r='2'/%3E%3Cpath d='M12 16.5v-6l3 1.5'/%3E%3C/svg%3E")}
  .tab[data-p="side"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='M10 9.5v5l4.5-2.5z'/%3E%3C/svg%3E")}
  .nav-in{padding:1rem .75rem 2rem;min-height:0}
  .nav .songs{background:var(--card);border-radius:calc(18px * var(--sq));box-shadow:var(--sh);gap:0;overflow:hidden}
  .nav .songs li+li a{border-top:1px solid var(--rule)}
  .nav .songs a{border-radius:0;padding:.7rem .95rem}
  .brand{margin:0 .3rem .8rem}
  .nav-foot{padding-top:1.2rem}
  /* the mini player: while 따라가기 plays, the 악보 tab shows the mini card docked just above the
     tab bar, the video as a 120 px 16:9 thumbnail, the song title and a pause button; tapping
     the card opens the 영상·가사 tab. On the 악보 tab the right column stays rendered with no
     box of its own, its other cards hidden, and #video is placed by CSS alone. */
  :root:has(#play.on) body[data-pane="chart"] .shell{padding-bottom:calc(var(--tabs) + var(--mw) * 9 / 16 + var(--mp) * 2 + var(--mgap) * 2)}
  :root:has(#play.on) body[data-pane="chart"] .p-side{display:block;height:0;padding:0;overflow:visible}
  :root:has(#play.on) body[data-pane="chart"] .p-side>:not(#video){display:none}
  :root:has(#play.on) body[data-pane="chart"] #video{position:fixed;z-index:27;left:calc(.75rem + var(--mp));
    bottom:calc(var(--tabs) + var(--mgap) + var(--mp));width:var(--mw);max-width:none;border-radius:calc(var(--mri) * var(--sq));
    box-shadow:none;pointer-events:none}
  :root:has(#play.on) body[data-pane="chart"] .mini{display:flex}
  .mini{left:.75rem;right:.75rem;bottom:calc(var(--tabs) + var(--mgap))}
  /* the 코드+가사 column choice applies to a desktop only */
  .sheet .row.r-cols{display:none}
  /* the catalog on a phone: everything stacked, the lists in the order 인기곡, 최신곡, 인기가수;
     a song in neither is found by search */
  .zone{padding:0 .75rem}
  .zone-hero,.zone-me{padding-top:1.3rem}
  .zone-cat{padding-bottom:1.5rem}
  .headline{font-size:2.05rem}
  .lede{font-size:.95rem;margin-top:.7rem}
  .heroA{display:block;padding:.6rem 0 0}
  .zone-hero .headline::before{width:2.6rem;height:2.6rem;margin-bottom:.75rem;border-radius:calc(12px * var(--sq));background-size:1.3rem}
  .sub-h{font-size:1.2rem;margin-top:.45rem}
  .heroA .signin{margin-top:1.4rem}
  .signin h2{font-size:1.28rem}
  .si-box{margin-top:.8rem}
  .si-list{gap:.55rem}
  .si-list li{font-size:.92rem}
  .signin .si-txt{padding:.9rem .5rem 1.1rem}
  .who .mail,.who .b-btn.out{display:none}
  .greet{font-size:1.6rem;margin-top:1.4rem}
  .greet-sub{font-size:.9rem}
  .tiles{grid-template-columns:1fr 1fr;gap:.6rem}
  .tile .k{margin-top:.6rem}
  .zone-h{margin:1.8rem .3rem .6rem}
  .top-search{max-width:none;margin-top:1rem}
  .home-foot{display:block;margin:1.2rem .3rem 0}
  .lists{grid-template-columns:1fr;gap:0}
  .zone-cat .zone-h{margin-top:1.8rem}
  .rlist a{padding:.3rem .7rem}
  .empty{display:block}
  .empty .skel{display:none}
  .upd{bottom:calc(var(--tabs) + .8rem)}
  :root:has(#play.on) body[data-pane="chart"] .upd{bottom:calc(var(--tabs) + var(--mw) * 9 / 16 + var(--mp) * 2 + var(--mgap) * 2 + .6rem)}
  .c-in{padding:.75rem .75rem 2rem}
  .song-h{--r:18px;padding:1rem 1.05rem}
  .song-h h1{font-size:1.6rem}
  .song-h .meta{font-size:.82rem}
  /* the toolbar is one row: key down, key, key up, the capo value, 따라가기 and ⋯; the rest
     moves into the sheet ⋯ opens. The key group takes what the other three leave, so nothing
     is pushed out at any width. Narrow, 따라가기 drops its label: a container query on the row's
     own width, because a media query counts a classic scrollbar's 15 px as available. */
  .tools{position:relative;top:auto;margin:.6rem 0 .8rem;padding:var(--p);background:var(--card);-webkit-backdrop-filter:none;
    backdrop-filter:none;flex-wrap:nowrap;gap:.3rem;container-type:inline-size}
  .grp.g-key{order:1;flex:1 1 0;min-width:0}.grp.g-capo{order:2;flex:none}.grp.g-play{order:3;flex:none}.grp.g-view{order:4}.grp.g-set{order:5}.grp.g-more{order:6}
  .tools>.g-view,.tools>.g-set,.tools>.g-more,.tools>.g-key>.lab{display:none}
  .grp.g-key>.b:not(.keyb){flex:1 1 0;min-width:0;padding:0}
  .grp.g-key .keyb{flex:none;min-width:3.1rem;padding:0 .35rem}
  @container (max-width:330px){.g-play>.b>span:last-child{display:none}}
  .grp.g-sheet{display:flex;order:7;flex:none}
  .grp.g-sheet>.b{font-size:1.15rem;letter-spacing:.04em}
  .sheet-bg:not([hidden]){display:block;position:fixed;inset:0;z-index:40;background:var(--scrim)}
  /* the sheet: a column, so its controls are inset by its side padding */
  .sheet{--r:22px;--p:1.1rem;--ri:max(calc(var(--r) - var(--p)),var(--rmin))}
  .sheet:not([hidden]){display:block;position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:85vh;overflow-y:auto;
    background:var(--card);border-radius:calc(var(--r) * var(--sq)) calc(var(--r) * var(--sq)) 0 0;box-shadow:0 -8px 32px rgba(20,30,50,.18);
    padding:.55rem var(--p) calc(1rem + env(safe-area-inset-bottom))}
  .sheet::before{content:"";display:block;width:2.6rem;height:4px;border-radius:2px;background:var(--edge);margin:0 auto .5rem}
  .sheet-h{display:flex;justify-content:space-between;align-items:center;margin:0 0 .3rem}
  .sheet-h h2{margin:0;font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
  .sheet-h .b{background:var(--chip);box-shadow:none;border-radius:calc(var(--ri) * var(--sq))}
  .sheet .row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.45rem 0;min-height:3.3rem}
  .sheet .row+.row{border-top:1px solid var(--rule)}
  .sheet .row>span:first-child{font-size:.88rem;font-weight:600;color:var(--soft)}
  .sheet .row>.b{border-radius:calc(var(--ri) * var(--sq))}
  #chart{--r:18px;--p:.6rem;padding:.75rem var(--p) .7rem}
  .sec{margin:0 0 1.3rem}
  .sec:last-child{margin-bottom:0}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid>.bar:nth-child(4n+1){padding-left:var(--p2)}
  .grid>.bar:nth-child(2n+1){padding-left:.65rem}
  .grid>.bar:nth-child(4n+1)>.num{display:none}
  .grid>.bar:nth-child(2n+1)>.num{display:block}
  .slot{font-size:calc(1.4em * var(--fit,1))}
  .slot.rest{font-size:calc(1.08em * var(--fit,1))}
  .lines{--p:.9rem;padding:.3rem var(--p) .8rem}
  .right{padding:.9rem .75rem 2rem;gap:.8rem}
  #video{max-width:34rem}
  .page{padding:1.6rem .9rem 3rem}
  .page h1{font-size:1.6rem}
}
@media print{
  :root{--bg:#fff;--card:#fff;--chip:#fff;--ink:#000;--soft:#555;--rule:#bbb;--cont:#888;--sh:none;--sh-lift:none;--sh-btn:none;
    --now:transparent;--on-accent:#000}
  body{background:#fff}
  .tools,.tabs,.sheet,.sheet-bg,.mini,.rail,.nav,.nav-scrim,.right,#video,.drop,.toast{display:none !important}
  .foot{background:none;padding:0}
  .shell{display:block}
  .c-in{padding:0}
  .song-h,#chart,.lines{box-shadow:none;padding-left:0;padding-right:0}
  .sec{break-inside:avoid}
  .grid>.bar:nth-child(4n+1)>.num{display:block}
  .bar{cursor:auto}
  .bar.now,.lyr-line.now{background:none}
  .lyr-cell.now .lyr-s{font-weight:inherit;text-decoration:none}
}