/* ============================================================
   만나워십 — THE UNSEEN HAND
   자켓 톤(빈티지 페이퍼 · 딥 잉크 · 버밀리언 레드 · 세이지 틸)
   ============================================================ */
:root{
  --paper:#f2ece1;
  --paper-2:#e8e0d1;
  --paper-3:#faf7f0;
  --ink:#16130f;
  --ink-2:#3d372f;
  --muted:#7a7065;
  --faint:#a89d8e;
  --line:rgba(22,19,15,.14);
  --line-soft:rgba(22,19,15,.07);
  --red:#c2382c;
  --teal:#7d9fa3;
  --serif:"Cormorant Garamond","Nanum Myeongjo",serif;
  --sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#131110; --paper-2:#1c1917; --paper-3:#0e0d0c;
    --ink:#f0e9dd; --ink-2:#cdc4b6; --muted:#95897b; --faint:#6d6358;
    --line:rgba(240,233,221,.16); --line-soft:rgba(240,233,221,.08);
    --red:#e0574a; --teal:#8fb3b7;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
/* 종이 질감 */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme: dark){ body::before{ mix-blend-mode:screen; opacity:.22 } }

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px; position:relative; z-index:2}
@media (max-width:640px){ .wrap{padding:0 22px} }

/* ---------------- 상단 메뉴 ---------------- */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line-soft)}
.nav-in{max-width:1120px; margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px}
@media (max-width:640px){ .nav-in{padding:15px 22px} }
.brand{display:flex; align-items:baseline; gap:9px; font-family:var(--serif); font-size:1.32rem; font-weight:700; letter-spacing:.02em}
.brand span{font-family:var(--sans); font-size:.62rem; font-weight:700; letter-spacing:.3em; color:var(--faint); text-transform:uppercase}
.menu{display:flex; gap:30px}
.menu a{font-size:.78rem; font-weight:600; letter-spacing:.13em; color:var(--muted); text-transform:uppercase; padding:4px 0; border-bottom:1px solid transparent; transition:.25s}
.menu a:hover{color:var(--ink)}
.menu a.on{color:var(--ink); border-bottom-color:var(--red)}

/* ---------------- 히어로 ---------------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line-soft)}
.hero-bg{position:absolute; inset:-8%; background:radial-gradient(circle at 30% 20%, var(--teal), transparent 55%),
  radial-gradient(circle at 75% 70%, var(--paper-2), transparent 60%); background-size:cover; background-position:center;
  filter:blur(48px) saturate(120%); opacity:.34; z-index:0}
.hero-in{position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:88px 32px 96px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
@media (max-width:900px){ .hero-in{grid-template-columns:1fr; gap:44px; padding:60px 22px 72px; text-align:center} }

.eyebrow{font-size:.7rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--red); margin:0 0 22px}
.eyebrow::after{content:""; display:block; width:38px; height:2px; background:var(--red); margin-top:14px}
@media (max-width:900px){ .eyebrow::after{margin-left:auto; margin-right:auto} }

h1.display{font-family:var(--serif); font-size:clamp(3rem,7.4vw,5.4rem); font-weight:700; line-height:.94;
  letter-spacing:-.015em; margin:0 0 18px}
.kor-title{font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:700; letter-spacing:.16em; color:var(--ink-2); margin:0 0 26px}
.credit{font-size:.86rem; color:var(--muted); line-height:2; margin:0 0 36px}
.credit b{color:var(--ink); font-weight:700; letter-spacing:.02em}
.credit .sep{color:var(--faint); margin:0 10px}

.btns{display:flex; gap:12px; flex-wrap:wrap}
@media (max-width:900px){ .btns{justify-content:center} }
.btn{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:15px 30px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); transition:.25s}
.btn:hover{background:transparent; color:var(--ink)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}

/* 자켓 */
.jacket{position:relative}
.jacket-in{position:relative; aspect-ratio:1/1; background:var(--paper-2);
  box-shadow:0 2px 6px rgba(20,16,10,.10), 0 30px 70px -18px rgba(20,16,10,.42)}
.jacket-in img{width:100%; height:100%; object-fit:cover}
.jacket-ph[hidden]{display:none !important}
.jacket-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:26px; color:var(--faint); font-size:.8rem; line-height:1.9;
  border:1px dashed var(--line)}
.jacket-ph b{color:var(--ink-2); font-weight:700}

/* ---------------- 섹션 ---------------- */
section{padding:100px 0; border-bottom:1px solid var(--line-soft); position:relative; z-index:2}
@media (max-width:640px){ section{padding:66px 0} }
.sec-head{margin-bottom:52px}
.sec-num{font-family:var(--serif); font-size:.9rem; color:var(--red); letter-spacing:.2em; margin:0 0 10px}
h2{font-family:var(--serif); font-size:clamp(1.9rem,4vw,2.7rem); font-weight:700; letter-spacing:-.01em; line-height:1.15; margin:0 0 12px}
.sec-sub{color:var(--muted); font-size:.94rem; margin:0; max-width:560px}

/* 음반 구성 — 에디토리얼 리스트 */
.editions{border-top:1px solid var(--line)}
.edition{display:grid; grid-template-columns:64px 1fr auto; gap:26px; align-items:center;
  padding:30px 6px; border-bottom:1px solid var(--line); transition:.3s}
.edition:hover{background:var(--paper-3); padding-left:16px; padding-right:16px}
@media (max-width:640px){ .edition{grid-template-columns:44px 1fr; gap:16px; padding:22px 4px} }
.ed-num{font-family:var(--serif); font-size:1.6rem; color:var(--faint)}
.ed-name{font-size:1.12rem; font-weight:700; letter-spacing:-.01em; margin:0 0 3px}
.ed-desc{font-size:.87rem; color:var(--muted); margin:0}
.ed-tag{font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  border:1px solid var(--line); padding:7px 14px; white-space:nowrap}
@media (max-width:640px){ .ed-tag{display:none} }

/* 인용 */
.quote{font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.55; letter-spacing:-.01em;
  max-width:820px; margin:0; color:var(--ink)}
.quote::before{content:"“"; color:var(--red); margin-right:.1em}
.quote::after{content:"”"; color:var(--red)}

/* ---------------- 앨범 페이지 ---------------- */
.album{display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:72px; align-items:start; padding:80px 0}
@media (max-width:900px){ .album{grid-template-columns:1fr; gap:44px; padding:52px 0} }
.album-sticky{position:sticky; top:110px}
@media (max-width:900px){ .album-sticky{position:static} }
.meta{border-top:1px solid var(--line); margin-top:34px}
.meta div{display:flex; justify-content:space-between; gap:20px; padding:13px 2px; border-bottom:1px solid var(--line-soft); font-size:.87rem}
.meta dt{color:var(--faint); letter-spacing:.1em; text-transform:uppercase; font-size:.7rem; font-weight:700; padding-top:3px}
.meta dd{margin:0; color:var(--ink-2); text-align:right}

.tracks{border-top:1px solid var(--line); margin-top:8px}
.track{display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:baseline;
  padding:19px 4px; border-bottom:1px solid var(--line-soft); transition:.25s}
.track:hover{padding-left:14px; background:var(--paper-3)}
.track-no{font-family:var(--serif); font-size:1.05rem; color:var(--faint)}
.track-name{font-size:1.02rem; font-weight:500}
.track-name.empty{color:var(--faint); font-weight:400; font-style:italic}

/* 채워야 하는 자리 */
.todo{border-left:2px solid var(--red); background:var(--paper-3); padding:16px 20px; color:var(--ink-2);
  font-size:.85rem; line-height:1.85}
.todo b{color:var(--red); font-weight:700}

/* ---------------- 푸터 ---------------- */
footer{padding:56px 0 64px; position:relative; z-index:2}
.foot-in{max-width:1120px; margin:0 auto; padding:0 32px; display:flex; justify-content:space-between;
  align-items:flex-end; gap:24px; flex-wrap:wrap}
@media (max-width:640px){ .foot-in{padding:0 22px} }
.foot-brand{font-family:var(--serif); font-size:1.1rem; margin:0 0 6px}
.foot-sub{font-size:.78rem; color:var(--faint); margin:0; letter-spacing:.04em}
.quiet{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; color:var(--muted);
  border:1px solid var(--line); padding:9px 16px; letter-spacing:.02em; transition:.25s}
.quiet:hover{color:var(--ink); border-color:var(--ink)}
.quiet svg{width:13px; height:13px; opacity:.6}

.backhome{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; color:var(--muted);
  border:1px solid var(--line); padding:10px 16px; border-radius:2px; transition:.2s; background:var(--paper-3)}
.backhome:hover{color:var(--ink); border-color:var(--ink)}