/* 아티스트 개별 페이지 공통 — index.html 과 같은 계열 */
:root{
  --ink:#0A0B0D; --paper:#f1f0eb; --gold:#F2C230;
  --sub:#8b8981; --faint:#5d5b55; --line:#1e1f22; --card:#111214;
  --pad:clamp(20px,5vw,56px);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{background:var(--ink);color:var(--paper);
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.7;letter-spacing:-.015em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;width:100%;word-break:keep-all}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}

header{position:sticky;top:0;z-index:50;background:rgba(10,11,13,.9);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px;gap:14px}
.hlogo svg{height:15px;width:auto;display:block}
.back{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--sub)}
.back:hover{color:var(--gold)}

/* ── 아티스트 머리 ─────────────────────────── */
.ahero{padding-top:clamp(46px,10vw,96px);padding-bottom:clamp(34px,6vw,62px)}
.ahero .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--faint)}
.ahero h1{margin-top:16px;font-size:clamp(42px,11vw,96px);font-weight:800;
  letter-spacing:-.05em;line-height:.98}
.ahero .en{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--gold)}
.ahero .desc{margin-top:clamp(26px,5vw,40px);font-size:clamp(15px,2.2vw,19px);
  color:var(--paper);font-weight:500;max-width:26em;line-height:1.62}
.ahero .meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 22px}
.ahero .meta span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.ahero .links{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.ahero .links a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gold);
  border:1px solid rgba(242,194,48,.32);border-radius:999px;padding:8px 16px}
.ahero .links a:hover{background:rgba(242,194,48,.08)}

section{padding:clamp(46px,7vw,84px) 0}
.shd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.shd h2{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--gold);font-weight:600}
.shd .cnt{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.1em}

/* ── 음반 ─────────────────────────────────── */
.disc{display:grid;gap:1px;background:var(--line);margin-top:1px}
@media(min-width:760px){.disc{grid-template-columns:1fr 1fr}}
.d{background:var(--ink);padding:24px 4px 28px}
@media(min-width:620px){.d{padding:26px 22px 30px}}
.d .hd{display:flex;gap:15px;align-items:flex-start}
.d .cv{width:80px;height:80px;flex:0 0 auto;border-radius:2px;overflow:hidden;
  background:var(--card);border:1px solid var(--line)}
.d .cv img{width:100%;height:100%;object-fit:cover}
.d .no{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--gold)}
.d h3{margin-top:7px;font-size:19px;font-weight:800;letter-spacing:-.035em;line-height:1.3}
.d .mt{margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.06em}
.d ol{margin-top:18px;list-style:none;counter-reset:t}
/* ★ 2026-09-01 — TITLE / MV 태그가 다음 줄로 밀렸다.
   그리드는 아이템 수와 칼럼 수가 어긋나면 밀린다. flex 는 nowrap 이라 구조상 안 밀린다 */
.d li{counter-increment:t;display:flex;align-items:baseline;flex-wrap:nowrap;
  gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.d li:before{content:counter(t,decimal-leading-zero);font-family:var(--mono);
  font-size:10.5px;color:var(--faint);flex:0 0 26px}
.d li a{color:var(--paper);flex:0 1 auto;min-width:0}
.d li a:hover{color:var(--gold)}
.d li .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--gold);
  border:1px solid rgba(242,194,48,.32);border-radius:999px;padding:1px 7px;
  white-space:nowrap;flex:0 0 auto}
.d .play{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.d .play a{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--sub);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.d .play a:hover{color:var(--gold);border-color:rgba(242,194,48,.32)}

/* ── 싱글 목록 ────────────────────────────── */
.sing{margin-top:1px;display:grid;gap:1px;background:var(--line)}
@media(min-width:620px){.sing{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.sing{grid-template-columns:repeat(3,1fr)}}
.sg{background:var(--ink);padding:16px 12px 18px}
@media(min-width:620px){.sg{padding:18px 18px 20px}}
.sg img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;
  border:1px solid var(--line);opacity:.6;margin-bottom:12px}
.sg.done img{opacity:1}
.sg .dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint)}
.sg h4{margin-top:6px;font-size:14px;font-weight:700;letter-spacing:-.03em;line-height:1.4}
.sg .sub{margin-top:4px;font-size:12px;color:var(--sub)}

/* ★ 빈 칸 채우는 로고 — 3열일 때만 나온다 */
.sg.mk{display:none;flex-direction:column;align-items:center;justify-content:center;gap:15px}
@media(min-width:980px){.sg.mk{display:flex}}
.sg.mk svg{width:52px;height:52px;opacity:.5}
.sg.mk span{font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--faint)}
.sg.done .dt{color:var(--gold)}

footer{border-top:1px solid var(--line);padding:32px 0 50px}
.fb{display:flex;flex-wrap:wrap;gap:16px 26px;justify-content:space-between;align-items:center}
.fb a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--sub)}
.fb a:hover{color:var(--gold)}
.fb .c{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.flinks{display:flex;flex-wrap:wrap;gap:10px 20px}