/* 명반 1164선 — 공통 스타일
   레코드 가게의 진열대를 옮겨 온다. 표지가 주인공이고, 색은 열두 갈래가 각자 갖는다.
   전역 강조색은 두지 않는다 — 페이지마다 그 칸의 색이 --accent-raw 로 들어온다. */

:root{
  --serif:"Gowun Batang","Nanum Myeongjo",Georgia,"Apple SD Gothic Neo","Malgun Gothic",serif;
  --sans:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* 종이빛 바탕 — 순회색 대신 온기가 도는 중성색을 쓴다 */
  --bg:#f1efeb; --bg2:#e8e5df; --card:#fbfaf8; --card2:#f4f2ee;
  --ink:#1b1917; --sub:#6e6862; --faint:#9b948c;
  --line:#e2ddd5; --line2:#edeae4;

  --accent-raw:#1b1917;
  --accent:var(--accent-raw);
  --on-accent:#fbfaf8;
  --accent-soft:rgba(27,25,23,.06);
  --accent-soft:color-mix(in oklab,var(--accent-raw),transparent 92%);
  --accent-line:rgba(27,25,23,.22);
  --accent-line:color-mix(in oklab,var(--accent-raw),transparent 72%);

  --g:#3f7d4e; --a:#a07524; --r:#b04434;

  /* 슬리브는 인쇄물처럼 얕고 넓게 떨어진다 */
  --sleeve:0 1px 1px rgba(45,35,25,.10),0 10px 22px -8px rgba(45,35,25,.24);
  --shadow:0 1px 2px rgba(45,35,25,.05),0 12px 28px -14px rgba(45,35,25,.18);
  --bar:rgba(241,239,235,.86);
  --skel:#e4e0d9;
  --headh:58px;
  --maxw:1000px;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.038'/></svg>");
}

/* 어두운 방에서 듣는 쪽. 칸 색은 그대로 두면 묻히므로 흰빛을 섞어 끌어올린다. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg:#141311; --bg2:#0f0e0d; --card:#1e1c1a; --card2:#252220;
    --ink:#f0ebe3; --sub:#9c958b; --faint:#726b62;
    --line:#2f2b27; --line2:#272421;
    --accent:#f0ebe3;
    --accent:color-mix(in oklab,var(--accent-raw),#ffffff 46%);
    --on-accent:#141311;
    --accent-soft:rgba(240,235,227,.07);
    --accent-soft:color-mix(in oklab,var(--accent),transparent 90%);
    --accent-line:rgba(240,235,227,.2);
    --accent-line:color-mix(in oklab,var(--accent),transparent 74%);
    --g:#5aa96c; --a:#d3a13f; --r:#dd7264;
    --sleeve:0 1px 1px rgba(0,0,0,.5),0 12px 26px -8px rgba(0,0,0,.6);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.5);
    --bar:rgba(20,19,17,.86);
    --skel:#282522;
  }
}
html[data-theme="dark"]{
  --bg:#141311; --bg2:#0f0e0d; --card:#1e1c1a; --card2:#252220;
  --ink:#f0ebe3; --sub:#9c958b; --faint:#726b62;
  --line:#2f2b27; --line2:#272421;
  --accent:#f0ebe3;
  --accent:color-mix(in oklab,var(--accent-raw),#ffffff 46%);
  --on-accent:#141311;
  --accent-soft:rgba(240,235,227,.07);
  --accent-soft:color-mix(in oklab,var(--accent),transparent 90%);
  --accent-line:rgba(240,235,227,.2);
  --accent-line:color-mix(in oklab,var(--accent),transparent 74%);
  --g:#5aa96c; --a:#d3a13f; --r:#dd7264;
  --sleeve:0 1px 1px rgba(0,0,0,.5),0 12px 26px -8px rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.5);
  --bar:rgba(20,19,17,.86);
  --skel:#282522;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background-color:var(--bg);background-image:var(--grain);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.hide{display:none!important}
/* 머리글 3 + 갈래 12, 열다섯 번을 눌러야 본문에 닿는다. 키보드에만 보이는 지름길. */
.skip{position:fixed;left:8px;top:-100px;z-index:60;padding:10px 15px;border-radius:9px;
  background:var(--card);border:1px solid var(--accent-line);color:var(--accent);
  font-size:.87rem;font-weight:600;transition:top .12s}
.skip:focus{top:8px}
main:focus{outline:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* ---------- 헤더 ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--bar);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--line)}
.head-in{max-width:var(--maxw);margin:auto;display:flex;align-items:center;gap:14px;padding:11px 16px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;
  letter-spacing:-.01em;font-size:1.06rem;flex:none}
.brand svg{width:21px;height:21px;color:var(--accent);flex:none}
.site-nav{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap}
.site-nav a{padding:6px 11px;border-radius:7px;font-size:.87rem;color:var(--sub);font-weight:500}
.site-nav a:hover{background:var(--line2);color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);background:var(--accent-soft);font-weight:600}
.iconbtn{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--sub);flex:none}
.iconbtn:hover{background:var(--line2);color:var(--ink)}
/* 좁은 화면에서 머리글이 세 줄로 무너지면 첫 화면의 절반을 차지한다.
   글자를 줄여 한 줄에 담는다. */
@media(max-width:640px){
  .head-in{flex-wrap:nowrap;gap:6px;padding:9px 14px}
  .brand{font-size:.98rem;gap:7px;min-width:0}
  .brand svg{width:19px;height:19px}
  .site-nav{gap:0;margin-left:auto;flex-wrap:nowrap;flex:none}
  .site-nav a{padding:5px 8px;font-size:.82rem;white-space:nowrap}
  .iconbtn{width:30px;height:30px}
}

/* ---------- 카테고리 바 ---------- */
.catbar{border-bottom:1px solid var(--line);background:var(--card)}
.catbar-in{max-width:var(--maxw);margin:auto;display:flex;flex-wrap:wrap;gap:5px;padding:9px 16px}
.catbar a{padding:5px 11px;border-radius:999px;font-size:.85rem;color:var(--sub);
  white-space:nowrap;border:1px solid transparent;transition:color .12s,background .12s}
.catbar a:hover{background:var(--line2);color:var(--ink)}
.catbar a[aria-current="page"]{background:var(--accent);color:var(--on-accent);font-weight:600}

/* ---------- 본문 ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:28px 16px 76px;position:relative}
.page-head{margin:0 0 24px}
.crumb{font-size:.8rem;color:var(--faint);margin:0 0 9px;letter-spacing:.01em}
.crumb a:hover{color:var(--accent);text-decoration:underline}
h1{font-family:var(--serif);font-size:2rem;font-weight:700;letter-spacing:-.015em;
  margin:0 0 10px;line-height:1.3;text-wrap:balance}
.page-desc{color:var(--sub);margin:0;max-width:62ch;font-size:.95rem}
h2{font-family:var(--serif);font-size:1.2rem;font-weight:700;letter-spacing:-.01em;
  margin:40px 0 14px;display:flex;align-items:baseline;gap:10px}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
h2:first-of-type{margin-top:0}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}

/* ---------- 홈 머리판 ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:30px;
  align-items:center;margin:6px 0 40px}
.hero-eyebrow{font-family:var(--serif);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.hero h1{font-size:2.5rem;margin:0 0 12px;line-height:1.24}
.hero h1 em{font-style:normal;font-variant-numeric:tabular-nums;
  border-bottom:3px solid var(--accent-line);padding-bottom:1px}
.hero .page-desc{max-width:46ch}
/* 표지 벽 — 사이트가 무엇을 다루는지 한 화면에서 말한다 */
.coverwall{display:grid;grid-template-columns:repeat(4,64px);gap:6px;flex:none}
.coverwall .art{width:64px;height:64px}
@media(max-width:820px){
  .hero{grid-template-columns:1fr;gap:24px}
  .coverwall{grid-template-columns:repeat(8,1fr);width:100%}
  .coverwall .art{width:100%;height:auto;aspect-ratio:1}
  .coverwall a:nth-child(n+9){display:none}
}
@media(max-width:520px){
  .hero h1{font-size:1.95rem}
  .coverwall{grid-template-columns:repeat(6,1fr)}
  .coverwall a:nth-child(n+7){display:none}
}

/* 진행률 */
.progress{padding:18px 20px;margin-bottom:8px}
.prog-top{display:flex;align-items:baseline;gap:9px}
.prog-n{font-family:var(--serif);font-size:2rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.prog-of{color:var(--sub);font-size:.92rem}
.prog-pct{margin-left:auto;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.prog-bar{display:block;height:6px;background:var(--line2);border-radius:99px;margin:13px 0 10px;overflow:hidden}
.prog-fill{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.prog-sub{font-size:.85rem;color:var(--sub);display:flex;gap:16px;flex-wrap:wrap}
.prog-sub b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- 카테고리 카드 ---------- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.catcard{position:relative;padding:16px 18px 16px 20px;display:block;overflow:hidden;
  transition:transform .14s ease,box-shadow .14s ease}
/* 색은 글자가 아니라 옆면에 — LP 상자의 색인 탭처럼 */
.catcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--ink))}
.catcard:hover{transform:translateY(-3px);box-shadow:var(--sleeve)}
.catcard .cc-top{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.cc-name{font-family:var(--serif);font-weight:700;font-size:1.06rem;letter-spacing:-.01em}
.cc-count{margin-left:auto;font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums}
.cc-desc{font-size:.83rem;color:var(--sub);line-height:1.55;margin:0 0 12px}
.cc-bar{height:3px;background:var(--line2);border-radius:99px;overflow:hidden;display:block}
.cc-fill{height:100%;background:var(--c,var(--ink));border-radius:99px;display:block}

/* ---------- 필터 ---------- */
.tools{display:grid;gap:10px;margin:0 0 20px}
.search{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:9px 13px}
.search:focus-within{border-color:var(--accent-line)}
.search svg{width:17px;height:17px;color:var(--faint);flex:none}
.search input{flex:1;min-width:0;outline:0}
.search input::placeholder{color:var(--faint)}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.86rem}
.filters select{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--ink)}
.chipf{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--sub);font-size:.83rem}
.chipf.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.count{margin-left:auto;color:var(--faint);font-size:.82rem;font-variant-numeric:tabular-nums}

/* 보기 전환 — 표지 격자와 목록 */
.viewsw{display:inline-flex;border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden}
.viewb{width:32px;height:30px;display:grid;place-items:center;color:var(--faint)}
.viewb+.viewb{border-left:1px solid var(--line)}
.viewb svg{width:16px;height:16px}
.viewb:hover{color:var(--ink);background:var(--line2)}
.viewb.on{background:var(--accent);color:var(--on-accent)}

/* ---------- 계보 밴드 ---------- */
.era-band{display:flex;align-items:baseline;gap:11px;margin:34px 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.era-band:first-child{margin-top:0}
.era-band h3{margin:0;font-family:var(--serif);font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.era-band h3::before{content:"";display:inline-block;width:14px;height:2px;background:var(--accent);
  vertical-align:.28em;margin-right:9px}
.era-band .eb-n{font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums}

/* ---------- 슬리브 (표지) ----------
   앨범 표지는 앱 아이콘이 아니라 인쇄물이다. 모서리를 거의 세우고 얕은 그림자를 준다.
   표지를 못 찾았을 때도 회색 상자 대신 그 칸의 색으로 레코드 라벨을 그린다. */
.art{width:64px;height:64px;border-radius:3px;background:var(--skel);display:block;container-type:size;
  overflow:hidden;flex:none;position:relative;box-shadow:var(--sleeve)}
.art::after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art .ph{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
  filter:hue-rotate(var(--h,0deg));
  font-family:var(--serif);font-weight:700;font-size:1.6rem;font-size:36cqw;line-height:1;
  color:rgba(255,255,255,.42);
  background:#3f4e4f;
  background:
    linear-gradient(152deg,rgba(255,255,255,.16),rgba(0,0,0,.34)),
    repeating-linear-gradient(148deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px),
    color-mix(in oklab,var(--c,#3f4e4f),#ffffff var(--l,0%))}

/* ---------- 목록 ---------- */
.list{display:grid;gap:8px}
.item{display:grid;grid-template-columns:2.3rem 64px minmax(0,1fr) auto;gap:0 14px;align-items:center;
  padding:10px 12px;text-align:left;width:100%;border-radius:10px;
  background:var(--card);border:1px solid var(--line);transition:border-color .12s,transform .12s}
.item:hover{border-color:var(--accent-line);transform:translateX(2px)}
.item.done{opacity:.55}
.it-n{font-family:var(--serif);font-size:.95rem;color:var(--faint);text-align:right;
  font-variant-numeric:tabular-nums;line-height:1}
.it-b{min-width:0;display:block}
.it-t{font-weight:700;font-size:.97rem;line-height:1.35;margin:0 0 2px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.it-m{font-size:.82rem;color:var(--sub);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it-tags{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.it-r{display:flex;gap:2px;align-items:center;flex:none}
.mk{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--faint)}
.mk:hover{background:var(--line2);color:var(--ink)}
.mk.on{color:var(--accent)}
.mk.on.fav{color:var(--a)}
.mk svg{width:18px;height:18px}
@media(max-width:640px){
  .item{grid-template-columns:56px minmax(0,1fr) auto;gap:0 12px;padding:9px 10px}
  .it-n{display:none}
  .art{width:56px;height:56px}
}

/* ---------- 표지 격자 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:22px 16px}
.gcard{position:relative;display:block;text-align:left}
.gcard .art{width:100%;height:auto;aspect-ratio:1;transition:transform .16s ease,box-shadow .16s ease}
.gcard:hover .art{transform:translateY(-4px)}
.gcard.done .art{opacity:.5}
.g-t{font-weight:700;font-size:.9rem;line-height:1.35;margin:10px 0 1px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.g-m{font-size:.79rem;color:var(--sub);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-n{position:absolute;top:6px;left:6px;font-family:var(--serif);font-size:.72rem;
  color:#fff;background:rgba(0,0,0,.5);padding:1px 6px;border-radius:99px;
  font-variant-numeric:tabular-nums;backdrop-filter:blur(3px)}
/* 표시는 표지 위에 얹되, 이미 표시한 것만 늘 보이게 둔다 */
.g-r{position:absolute;top:6px;right:6px;display:flex;gap:3px;opacity:0;transition:opacity .14s}
.gcard:hover .g-r,.gcard:focus-within .g-r,.g-r:has(.on){opacity:1}
.g-r .mk{width:26px;height:26px;border-radius:7px;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
.g-r .mk svg{width:15px;height:15px}
.g-r .mk.on{color:#fff;background:var(--accent)}
.g-r .mk.on.fav{background:var(--a)}
/* 손가락에는 hover 가 없다. 표지 보기에서 단추를 숨겨 두면 폰에서는
   아직 표시하지 않은 앨범을 표시할 방법이 사라진다. 늘 보이고, 크게 둔다. */
@media (hover:none){
  .g-r{opacity:1}
  .g-r .mk{width:34px;height:34px;border-radius:9px}
  .g-r .mk svg{width:18px;height:18px}
}
.g-tags{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}

/* ---------- 근거 태그 ---------- */
.tg{font-size:.68rem;padding:1px 7px;border-radius:99px;font-weight:600;letter-spacing:.01em}
.tg.canon{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
.tg.award{background:#f4ecd9;color:#7a5a16}
.tg.pick{background:var(--line2);color:var(--sub)}
.tg.chk{background:#f2e8dd;color:#87582a}
/* 어두운 바탕에서만 어두운 배지를 쓴다. 미디어쿼리 없이 :not([data-theme="light"]) 만
   두면 기본값인 '시스템'에서도 늘 맞아, 밝은 화면에 짙은 알약이 박힌다. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .tg.award{background:#2d2513;color:#d8b26a}
  html:not([data-theme="light"]) .tg.chk{background:#2e241b;color:#d9a87c}
}
html[data-theme="dark"] .tg.award{background:#2d2513;color:#d8b26a}
html[data-theme="dark"] .tg.chk{background:#2e241b;color:#d9a87c}

.more{display:block;width:100%;padding:12px;margin-top:18px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);color:var(--accent);font-weight:600;font-size:.9rem}
.more:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.empty{text-align:center;padding:56px 20px;color:var(--faint)}
.empty svg{width:34px;height:34px;margin-bottom:10px;opacity:.5}

/* ---------- 상세 ---------- */
.detail{padding:0 0 20px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--sub);font-size:.87rem;
  font-weight:600;margin-bottom:20px;padding:6px 10px;border-radius:8px;margin-left:-10px}
.back:hover{background:var(--accent-soft);color:var(--ink)}
.back svg{width:16px;height:16px}
/* 표지를 그 칸의 색 위에 올린다 — 진열대에서 꺼내 든 느낌 */
.d-head{display:flex;gap:24px;align-items:flex-start;margin-bottom:26px;flex-wrap:wrap;
  padding:24px;border-radius:14px;background:var(--accent-soft);border:1px solid var(--line)}
.d-art{width:180px;height:180px;border-radius:3px;background:var(--skel);flex:none;overflow:hidden;
  position:relative;box-shadow:var(--sleeve)}
.d-art img{width:100%;height:100%;object-fit:cover;display:block}
.d-info{flex:1;min-width:230px}
.d-info h1{font-size:1.75rem;margin:0 0 8px;line-height:1.3}
.d-artist{color:var(--ink);margin:0 0 4px;font-size:1.02rem;font-weight:600}
.d-meta{color:var(--sub);font-size:.86rem;margin:0 0 16px;font-variant-numeric:tabular-nums}
.d-acts{display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:8px 15px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  font-size:.87rem;font-weight:600;color:var(--sub);display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--accent-line);color:var(--ink)}
.btn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.on.fav{background:var(--a);border-color:var(--a);color:#fff}
.btn svg{width:16px;height:16px}
/* 선정 사유가 이 사이트의 본문이다 — 세리프로 읽히게 둔다 */

.d-rows{display:grid;gap:0;margin-bottom:18px}
.d-row{display:grid;grid-template-columns:6.5rem 1fr;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line2);font-size:.9rem}
.d-row:last-child{border-bottom:none}
.d-row dt{color:var(--faint)}
.d-row dd{margin:0;color:var(--ink)}
.links{display:flex;gap:8px;flex-wrap:wrap}
.links a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);font-size:.86rem;font-weight:600}
.links a:hover{border-color:var(--accent-line);color:var(--accent)}
.links svg{width:15px;height:15px}
@media(max-width:560px){
  .d-head{padding:18px;gap:18px}
  .d-art{width:130px;height:130px}
  .d-why{padding:18px;font-size:.98rem}
}

/* ---------- 통계 ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px}
.stat{padding:17px 19px}
.stat .sv{font-family:var(--serif);font-size:1.9rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.stat .sl{font-size:.82rem;color:var(--sub);margin-top:4px}
.bars{display:grid;gap:9px}
.bar-row{display:grid;grid-template-columns:7rem 1fr 3.6rem;gap:12px;align-items:center;font-size:.86rem}
.bar-t{display:block;height:8px;background:var(--line2);border-radius:99px;overflow:hidden}
.bar-f{display:block;height:100%;border-radius:99px;background:var(--c,var(--accent))}
.bar-v{text-align:right;color:var(--sub);font-variant-numeric:tabular-nums;font-size:.82rem}

/* ---------- 푸터 ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:52px;padding:26px 16px 44px;
  color:var(--faint);font-size:.82rem}
.foot-in{max-width:var(--maxw);margin:auto;display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.foot-in p{margin:0}
.foot-in nav{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}
.foot-in nav a:hover{color:var(--accent)}

/* ---------- 계보 바로가기 칩 ----------
   100장 넘는 목록에서 계보를 셀렉트에 숨겨 두면 쓰이지 않는다.
   눈에 보이는 칩으로 꺼내 곧바로 좁힐 수 있게 한다. */
.erabar{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.erachip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--sub);font-size:.84rem;line-height:1.3;text-align:left}
.erachip b{font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums;margin-left:2px}
.erachip:hover{border-color:var(--accent-line);color:var(--ink)}
.erachip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.erachip.on b{color:var(--on-accent);opacity:.7}

/* 계보 밴드를 스크롤 중에도 붙여 둔다 — 지금 어느 구간을 보는지 잃지 않게.
   헤더가 한 줄로 고정되는 넓은 화면에서만 적용한다. */
@media(min-width:641px){
  .era-band{position:sticky;top:var(--headh);z-index:5;background:var(--bg);padding-top:11px}
}

/* ---------- 묶는 기준 전환 ---------- */
.axisw{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  background:var(--card);padding:2px;margin-right:6px}
.axisb{padding:4px 11px;border-radius:999px;border:0;background:transparent;
  color:var(--sub);font-size:.82rem;line-height:1.3;font-weight:500}
.axisb:hover{color:var(--ink)}
.axisb.on{background:var(--accent);color:var(--on-accent)}

/* 좁은 화면에서는 목록에 자리를 더 준다 */
@media(max-width:640px){
  .page-desc{display:none}
  .hero .page-desc{display:block}
  .erachip{padding:5px 9px;font-size:.79rem}
  .catbar a{padding:4px 9px;font-size:.8rem}
  .catbar-in{gap:4px;padding:7px 14px}
  .axisw{margin-right:4px}
  .axisb{padding:4px 9px;font-size:.78rem}
  main{padding-top:20px}
  h1{font-size:1.7rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:18px 12px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 오늘의 추천 ---------- */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.picks .g-t{font-size:1rem;margin-top:12px}
.picks .g-m{font-size:.85rem}
@media(max-width:560px){.picks{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}

/* ---------- 넓은 화면 ----------
   기기별로 다른 페이지를 만들지 않는다. 화면이 넓어지면 여백을 늘리는 대신
   같은 폭에 더 많은 앨범을 넣는다 — 목록은 한 줄에 하나씩 내려가느라
   오른쪽 절반을 통째로 비워 두는 것이 가장 큰 낭비였다. */
@media(min-width:1120px){
  :root{--maxw:1180px}
  .list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
  .catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1500px){
  :root{--maxw:1380px}
  .list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .catgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .coverwall{grid-template-columns:repeat(4,78px)}
  .coverwall .art{width:78px;height:78px}
}
/* 글은 넓어진다고 읽기 좋아지지 않는다. 본문만은 한 줄 길이를 지킨다. */
.hero .page-desc,.page-desc{max-width:66ch}
.picks{max-width:900px}
.d-head .d-info{max-width:60ch}

/* ---------- 상세: 머리판 보강 ---------- */
.d-eyebrow{font-size:.8rem;color:var(--sub);margin:0 0 8px;letter-spacing:.01em}
.d-eyebrow .sep{color:var(--faint);margin:0 2px}
.d-pos{font-variant-numeric:tabular-nums;color:var(--faint);
  background:var(--card);border:1px solid var(--line);border-radius:99px;padding:1px 8px;margin-left:4px;font-size:.74rem}
.d-meta{display:flex;gap:14px;flex-wrap:wrap}
.d-tags{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 16px}
.d-note{font-size:.8rem;color:var(--faint);margin:10px 0 0}
.d-rows{padding:4px 18px}

/* ---------- 수록곡 ---------- */
.tks{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:11px;overflow:hidden}
.tk{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:9px 14px;background:var(--card);font-size:.92rem}
.tk:hover{background:var(--card2)}
.tk-n{color:var(--faint);font-size:.82rem;text-align:right;font-variant-numeric:tabular-nums}
.tk-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 선정 사유에 이름이 나온 곡은 눈에 띄게 둔다 */
.tk-t em{font-style:normal;font-size:.68rem;font-weight:600;margin-left:8px;
  padding:1px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent-line);vertical-align:1px}
.tk.pick .tk-t{font-weight:600}
.tk-d{color:var(--faint);font-size:.82rem;font-variant-numeric:tabular-nums}
.tk-disc{margin:0;padding:8px 14px;background:var(--card2);font-size:.78rem;
  color:var(--faint);font-weight:600;letter-spacing:.04em}
@media(max-width:560px){
  .tk{grid-template-columns:1.6rem minmax(0,1fr) auto;gap:10px;padding:8px 11px;font-size:.88rem}
  .tk-t em{display:none}
  .tk.pick .tk-t{color:var(--accent)}
}

/* ---------- 관련 앨범 ---------- */
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px 12px}
.mini{display:block}
.mini .art{width:100%;height:auto;aspect-ratio:1;transition:transform .16s ease}
.mini:hover .art{transform:translateY(-3px)}
.mini-t{display:block;font-size:.84rem;font-weight:600;line-height:1.35;margin-top:8px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mini-m{display:block;font-size:.76rem;color:var(--sub);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- 이전 / 다음 ---------- */
.d-jump{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:40px;
  padding-top:20px;border-top:1px solid var(--line)}
.d-jump a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);min-width:0}
.d-jump a:hover{border-color:var(--accent-line)}
.d-jump a.nx{justify-content:flex-end;text-align:right}
.d-jump svg{width:16px;height:16px;color:var(--faint);flex:none}
.d-jump span{min-width:0;display:block;font-size:.9rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-jump b{display:block;font-size:.72rem;font-weight:600;color:var(--faint);
  letter-spacing:.06em;margin-bottom:1px}

/* 갈래별 막대는 그 칸의 색을 쓴다. 어두운 테마에서는 바탕도 어두워
   원래 색 그대로는 트랙과 구분되지 않으므로 강조색과 같게 끌어올린다. */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .bar-f{background:color-mix(in oklab,var(--c,var(--accent)),#ffffff 44%)}
}
html[data-theme="dark"] .bar-f{background:color-mix(in oklab,var(--c,var(--accent)),#ffffff 44%)}

/* ---------- 앱으로 열기 전환 ----------
   설치 여부를 알아낼 방법이 없어 감지 대신 선택을 기억한다.
   서비스 버튼과 같은 줄에 두되, 여는 곳이 아니라 설정임이 드러나게 눌러 둔다. */
.appsw{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:8px 13px;border-radius:9px;border:1px dashed var(--line);
  background:transparent;color:var(--faint);font-size:.82rem;font-weight:600}
.appsw svg{width:14px;height:14px}
.appsw:hover{border-color:var(--accent-line);color:var(--sub)}
.appsw.on{border-style:solid;border-color:var(--accent-line);
  background:var(--accent-soft);color:var(--accent)}
@media(max-width:560px){.appsw{margin-left:0}}

/* ---------- 앨범 노트 ----------
   선정 사유가 '왜 이 자리에 있는가'라면 노트는 '무엇을 어떻게 들을 것인가'다.
   읽는 글이므로 본문 서체를 쓰고 한 줄 길이를 지킨다. */
/* 한 줄에 35~45자. 넓은 화면에서 단을 그냥 두면 1600px 에서 57자가 되어 눈이 줄을
   놓친다. 곁단을 넓히는 대신 읽는 글에만 상한을 둔다 — 잡지에서 본문 단이 도판보다
   좁은 것과 같다. em 은 이 블록의 글자 크기라 40em 이 곧 한글 40자다. */
.nt{padding:0;max-width:40em;font-family:var(--serif);font-size:1.04rem;line-height:1.85;
  background:none;border:0;box-shadow:none}
.nt p{margin:0 0 1.35em}
.nt p:last-child{margin-bottom:0}
/* 드롭캡을 쓰지 않는다. 라틴은 글자 하나를 떼어도 단어가 남지만, 한글은 음절이
   단어의 일부라 「비틀즈」가 큰 '비' 와 작은 '틀즈가' 로 갈라진다. 크기를 조절해
   될 일이 아니라 장치 자체가 맞지 않는다. 대신 글자를 조금 키워 들머리로 삼는다. */
.nt-lead{font-size:1.16rem;line-height:1.75;color:var(--ink)}
/* em 이 제 글자 크기(11.8px) 기준이라 1.9em 은 22px, 본문 한 줄보다 좁았다.
   절 구분은 문단 사이보다 확실히 넓어야 하므로 rem 으로 못 박는다.
   대문자 변환은 한글에 아무 효과가 없고, 자간은 두세 음절 라벨에서 과했다. */
.nt h3{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.06em;
  color:var(--faint);margin:2.4rem 0 .6rem}
.nt-tracks{margin:0 0 1.35em;display:grid;gap:.9em}
/* 곡 제목은 거의 라틴이다. 본문 명조의 라틴은 한글보다 가늘어 줄이 들쭉날쭉해진다. */
.nt-tracks dt{font-family:var(--sans);font-weight:600;font-size:.94rem;margin-bottom:.2em}
.nt-tracks dd{margin:0;color:var(--sub);font-size:.97rem;line-height:1.75}
.nt-pair{display:flex;align-items:center;gap:14px;padding:11px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);margin-top:.4em;font-family:var(--sans)}
.nt-pair:hover{border-color:var(--accent-line)}
.nt-pair .art{width:54px;height:54px}
.nt-pair span{min-width:0;font-size:.85rem;color:var(--sub);line-height:1.45}
.nt-pair b{display:block;font-size:.95rem;color:var(--ink)}
/* 폰에서는 남는 폭이 없다. 카드 배경을 지워 놓고 남은 20px 패딩은 기댈 면도 없이
   양쪽 40px 을 먹어 한 줄을 18자까지 줄였다. 떼면 그만큼 글줄이 길어진다. */
@media(max-width:560px){
  .nt{padding:0;font-size:.98rem}
  .nt-lead{font-size:1.04rem}
  .nt h3{margin:2rem 0 .55rem}
}

/* ---------- 상세: 잡지 기사 짜임 ----------
   넓은 화면에서 모든 것을 한 세로줄로 쌓으면 오른쪽이 통째로 빈다.
   읽는 단(사유·노트·수록곡)과 곁단(표·링크)으로 나누고, 곁단은 읽는 동안 따라온다. */
.d-body{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-bottom:8px}
.d-main{min-width:0}
.d-side{min-width:0;display:grid;gap:14px;align-content:start}
@media(min-width:900px){
  .d-body{grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
  .d-side{position:sticky;top:calc(var(--headh) + 18px)}
}
@media(min-width:1300px){ .d-body{grid-template-columns:minmax(0,1fr) 340px;gap:56px} }

/* 선정 사유는 기사의 리드다. 상자에 가두지 않고 굵은 세로줄만 세운다. */
/* 사유도 읽는 글이라 노트와 같은 상한을 둔다. 글자가 커서 em 값은 더 작다. */
.d-why{margin:0 0 34px;padding:2px 0 2px 22px;max-width:36em;border-left:3px solid var(--accent-line);
  font-family:var(--serif);font-size:1.16rem;line-height:1.8;color:var(--ink)}
/* 제목 단계는 h1 다음이 h2 여야 맞지만, 이 자리의 생김새는 눈썹 라벨이다.
   전역 h2 의 flex 배치와 뒤따르는 실선을 여기서만 끈다. */
.d-why h2{display:block;margin:0 0 9px;font-family:var(--sans);font-size:.72rem;
  color:var(--faint);font-weight:700;letter-spacing:.06em}
.d-why h2::after{display:none}
.d-why p{margin:0}

/* 곁단 — 확인하는 정보. 읽는 단보다 작고 조용하게. */
.d-side .d-rows{padding:4px 16px;margin:0}
.d-side .d-row{grid-template-columns:4.6rem 1fr;gap:10px;font-size:.85rem;padding:9px 0}
.side-block{padding:14px 16px 16px}
.side-block h2{display:block;margin:0 0 10px;font-family:var(--sans);font-size:.72rem;
  color:var(--faint);font-weight:700;letter-spacing:.06em}
.side-block h2::after{display:none}
.side-block .links{flex-direction:column;align-items:stretch;gap:6px}
.side-block .links a{justify-content:flex-start;padding:8px 12px;font-size:.84rem}
.side-block .appsw{margin:6px 0 0;justify-content:center}

/* 기사 안의 소제목은 본문 위계에 맞춰 낮춘다 */
.d-main h2{font-size:1.08rem;margin:34px 0 12px}

/* ---------- 접힌 곡 목록 ----------
   페이지에서 유일하게 밖에 기대는 대목이라, 접어 두고 한 줄만 보인다.
   못 받아온 날에는 그 한 줄조차 생기지 않아 빈칸이 남지 않는다. */
.tkbox{border:1px solid var(--line);border-radius:11px;background:var(--card);
  overflow:hidden;margin-top:34px}
.tkbox>summary{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;
  font-family:var(--sans);font-size:.9rem;font-weight:600;list-style:none}
.tkbox>summary::-webkit-details-marker{display:none}
.tkbox>summary:hover{background:var(--card2)}
.tkb-n{margin-left:auto;font-weight:500;color:var(--faint);font-size:.84rem;
  font-variant-numeric:tabular-nums}
.tkbox>summary>svg{width:15px;height:15px;color:var(--faint);flex:none;
  transform:rotate(90deg);transition:transform .16s}
.tkbox[open]>summary>svg{transform:rotate(-90deg)}
.tkbox[open]>summary{border-bottom:1px solid var(--line)}
/* 안쪽 목록은 이미 상자 안이므로 자기 테두리를 벗는다 */
.tkbox .tks{border:0;border-radius:0}
.tkbox .d-note{margin:12px 16px 14px}
/* 곡 수는 받아온 뒤에야 채워진다. 비어 있을 때 자리를 잡아 두지 않는다. */
.tkb-n:empty{display:none}