/* 박찬한의원 체질 가이드 — 메인 페이지(청화백자 · 먹색 · 금니)와 같은 토큰 */
:root{
  --porcelain:#f4f3ee;
  --porcelain-2:#e9e7df;
  --white:#fbfaf7;
  --ink:#0f1520;
  --ink-soft:#5a6270;
  --cobalt:#22408e;
  --cobalt-tint:#e6eaf5;
  --gold:#c2a86f;
  --gold-deep:#9a824f;
  --seal:#b5412b;
  --line:#ddd9cf;
  --line-dark:rgba(244,243,238,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Noto Sans KR',-apple-system,'Apple SD Gothic Neo',sans-serif;
  background:var(--porcelain);color:var(--ink);
  line-height:1.9;letter-spacing:-.005em;word-break:keep-all;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
b,strong{font-weight:500}
h1,h2,h3{font-family:'Hahmlet','Noto Serif KR',serif;font-weight:600;line-height:1.35;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

.band{height:2px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent)}

/* 헤더 */
header{position:sticky;top:0;z-index:50;background:rgba(15,21,32,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dark);color:var(--porcelain)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1160px;margin:0 auto}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.seal{width:36px;height:36px;background:var(--seal);color:var(--porcelain);display:flex;align-items:center;justify-content:center;font-family:'Song Myung',serif;font-size:20px}
.brand b{font-family:'Hahmlet',serif;font-weight:600;font-size:1.1rem;letter-spacing:.02em}
.brand small{display:block;font-size:.58rem;letter-spacing:.38em;color:var(--gold);white-space:nowrap}
nav ul{display:flex;gap:2px;list-style:none;align-items:center}
nav a{text-decoration:none;color:rgba(244,243,238,.72);font-size:.88rem;padding:8px 14px;transition:.2s;font-weight:400}
nav a:hover{color:var(--porcelain)}
nav .cta{border:1px solid var(--gold);color:var(--gold)!important;margin-left:10px;white-space:nowrap}
nav .cta:hover{background:var(--gold);color:var(--ink)!important}
@media(max-width:760px){nav ul li:not(:last-child){display:none}.nav{padding:13px 20px}nav .cta{margin-left:0;padding:8px 13px;font-size:.84rem}}

/* 본문 */
.page{max-width:760px;margin:0 auto;padding:56px 28px 96px}
.crumbs{font-size:.8rem;color:var(--ink-soft);margin-bottom:28px;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{text-decoration:none;color:var(--ink-soft)}
.crumbs a:hover{color:var(--cobalt)}
.crumbs span[aria-hidden]{opacity:.5}
.eyebrow{font-family:'Song Myung',serif;color:var(--gold-deep);letter-spacing:.4em;font-size:.9rem;border-top:1px solid var(--gold);padding-top:14px;display:inline-block;margin-bottom:18px}
h1{font-size:clamp(1.8rem,4.6vw,2.6rem);margin-bottom:18px}
.byline{font-size:.84rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px 16px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:36px}
.byline b{color:var(--ink)}

.answer{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--cobalt);padding:24px 28px;margin-bottom:48px}
.answer .label{font-size:.72rem;letter-spacing:.3em;color:var(--cobalt);font-weight:500;margin-bottom:8px}
.answer p{font-size:1.05rem;line-height:1.85;color:var(--ink)}

article h2{font-size:1.45rem;margin:56px 0 16px;padding-top:20px;border-top:1px solid var(--line)}
article h3{font-size:1.12rem;margin:30px 0 10px}
article p{margin-bottom:16px;color:#2b313b}
article ul,article ol{margin:0 0 18px 1.2em}
article li{margin-bottom:8px;color:#2b313b}
article li::marker{color:var(--gold-deep)}

.tbl{overflow-x:auto;margin:20px 0 26px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--white)}
th,td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-weight:500;font-size:.8rem;letter-spacing:.06em;color:var(--ink-soft);background:var(--porcelain-2)}
tr:last-child td{border-bottom:none}
td:first-child{font-weight:500;white-space:nowrap}

.note{border:1px solid var(--gold);padding:18px 22px;margin:26px 0;font-size:.94rem;color:var(--ink-soft)}
.note b{color:var(--ink)}

/* FAQ */
.faq{margin-top:12px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;gap:16px;align-items:baseline;padding:18px 0;font-family:'Hahmlet',serif;font-weight:400;font-size:1.02rem}
summary::-webkit-details-marker{display:none}
summary .q{font-family:'Song Myung',serif;color:var(--gold-deep);flex-shrink:0}
summary::after{content:"+";margin-left:auto;color:var(--gold-deep);font-weight:300;font-size:1.3rem;line-height:1;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
.ans{padding:0 0 20px 34px;color:var(--ink-soft);font-size:.95rem}

/* 저자 */
.author{display:grid;grid-template-columns:88px 1fr;gap:22px;align-items:center;margin-top:64px;padding:26px;background:var(--white);border:1px solid var(--line)}
.author img{width:88px;height:88px;object-fit:cover;object-position:top;border-radius:50%;background:var(--porcelain-2)}
.author .t{font-size:.72rem;letter-spacing:.3em;color:var(--gold-deep);margin-bottom:4px}
.author h2{font-size:1.15rem;margin:0 0 6px;padding:0;border:none}
.author p{font-size:.9rem;color:var(--ink-soft);margin:0}
.author a{color:var(--cobalt)}
@media(max-width:560px){.author{grid-template-columns:1fr}}

/* 예약 */
.cta-box{margin-top:24px;background:var(--ink);color:var(--porcelain);padding:32px 34px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.cta-box h2{font-size:1.25rem;margin:0 0 6px;padding:0;border:none;color:var(--porcelain)}
.cta-box p{margin:0;font-size:.9rem;color:rgba(244,243,238,.7)}
.cta-box a{display:inline-block;background:var(--gold);color:var(--ink);text-decoration:none;padding:13px 24px;font-weight:500;letter-spacing:.03em;white-space:nowrap}
.cta-box a:hover{background:#d8c28c}
@media(max-width:560px){.cta-box{grid-template-columns:1fr}}

/* 관련 가이드 */
.related{margin-top:56px}
.related h2{font-size:1.1rem;margin:0 0 16px;padding:0;border:none}
.related ul{list-style:none;margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.related li{margin:0}
.related a{display:block;background:var(--porcelain);padding:16px 20px;text-decoration:none;transition:background .2s}
.related a:hover{background:var(--white)}
.related a b{font-family:'Hahmlet',serif;font-weight:600;display:block}
.related a span{font-size:.86rem;color:var(--ink-soft)}
.source{margin-top:32px;font-size:.82rem;color:var(--ink-soft)}
.source a{color:var(--cobalt)}

footer{background:#0a0f18;color:rgba(244,243,238,.5);padding:36px 0;font-size:.82rem}
footer .wrap{max-width:1160px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer b{color:var(--porcelain);font-family:'Hahmlet',serif;font-weight:600}
footer a{color:rgba(244,243,238,.75);text-decoration:none}
footer a:hover{color:var(--gold)}