/* 삼성편한내과 정보 허브 — design tokens
   ink #182E2A / scope-teal #0E5F54 / sage #E8F0EC / paper #FBFBF8 / line #D8DFD9 / amber #9A7B2D */
:root{
  --ink:#182E2A; --teal:#0E5F54; --teal-deep:#0A473F; --sage:#E8F0EC;
  --paper:#FBFBF8; --line:#D8DFD9; --amber:#9A7B2D; --muted:#5C6E68;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.75; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:"Noto Serif KR",serif}

/* layout */
.wrap{max-width:880px;margin:0 auto;padding:0 22px}
header.site{border-bottom:1px solid var(--line);background:#fff}
.site-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0}
.site-name{font-family:"Noto Serif KR",serif;font-weight:700;font-size:1.15rem;color:var(--teal-deep);text-decoration:none}
.site-name small{display:block;font-family:Pretendard,sans-serif;font-weight:400;font-size:.72rem;letter-spacing:.14em;color:var(--muted)}
nav.main a{color:var(--muted);text-decoration:none;font-size:.92rem;margin-left:18px}
nav.main a[aria-current="page"],nav.main a:hover{color:var(--teal);border-bottom:2px solid var(--teal)}

/* hero */
.hero{padding:64px 0 48px;border-bottom:1px solid var(--line)}
.hero .eyebrow{font-size:.8rem;letter-spacing:.22em;color:var(--teal);font-weight:600;margin-bottom:14px}
.hero h1{font-family:"Noto Serif KR",serif;font-weight:700;font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.35;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero p.lead{margin-top:18px;max-width:620px;color:var(--muted)}

/* signature band — 채널 시그니처 문장 */
.signature{background:var(--teal-deep);color:#F2F6F3;padding:34px 0}
.signature p{font-family:"Noto Serif KR",serif;font-size:clamp(1.05rem,2.6vw,1.35rem);text-align:center;letter-spacing:.02em}
.signature p span{color:#CBB878}

/* chart-card: 결과지 느낌의 정보 카드 */
section.block{padding:52px 0;border-bottom:1px solid var(--line)}
section.block:last-of-type{border-bottom:0}
.block h2{font-family:"Noto Serif KR",serif;font-size:1.35rem;color:var(--teal-deep);margin-bottom:8px}
.block .sub{font-size:.9rem;color:var(--muted);margin-bottom:26px}
.chart{background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal)}
.chart .row{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--line)}
.chart .row:last-child{border-bottom:0}
.chart .row dt{padding:14px 18px;background:var(--sage);font-size:.85rem;font-weight:600;color:var(--teal-deep)}
.chart .row dd{padding:14px 18px}
@media(max-width:560px){.chart .row{grid-template-columns:1fr}.chart .row dt{padding-bottom:4px}.chart .row dd{padding-top:4px}}

/* service list */
ul.services{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
ul.services li{background:#fff;border:1px solid var(--line);padding:14px 16px;font-size:.95rem}
ul.services li b{display:block;color:var(--teal-deep)}
ul.services li span{font-size:.84rem;color:var(--muted)}

/* FAQ */
.faq-group{margin-bottom:40px}
.faq-group h2{font-family:"Noto Serif KR",serif;font-size:1.2rem;color:var(--teal-deep);margin:0 0 16px;padding-left:12px;border-left:3px solid var(--teal)}
details.faq{background:#fff;border:1px solid var(--line);margin-bottom:10px}
details.faq summary{cursor:pointer;padding:16px 18px;font-weight:600;list-style:none;display:flex;gap:12px}
details.faq summary::before{content:"Q.";color:var(--teal);font-family:"Noto Serif KR",serif;font-weight:700}
details.faq summary::-webkit-details-marker{display:none}
details.faq[open] summary{border-bottom:1px dashed var(--line)}
details.faq .a{padding:14px 18px 18px 46px;color:#33443F}
details.faq .a p+p{margin-top:10px}

/* columns */
article.col-card{background:#fff;border:1px solid var(--line);padding:24px;margin-bottom:16px}
article.col-card h3 a{color:var(--teal-deep);text-decoration:none;font-family:"Noto Serif KR",serif;font-size:1.15rem}
article.col-card h3 a:hover{text-decoration:underline}
article.col-card p{font-size:.95rem;color:var(--muted);margin-top:8px}
.col-meta{font-size:.8rem;color:var(--muted);letter-spacing:.04em}

/* article page */
article.post{padding:56px 0}
article.post h1{font-family:"Noto Serif KR",serif;font-size:clamp(1.5rem,3.6vw,2rem);line-height:1.4;color:var(--teal-deep)}
article.post .meta{margin:14px 0 34px;font-size:.85rem;color:var(--muted)}
article.post h2{font-family:"Noto Serif KR",serif;font-size:1.25rem;color:var(--teal-deep);margin:38px 0 12px}
article.post p{margin-bottom:16px}
article.post ul,article.post ol{margin:0 0 16px 22px}
article.post li{margin-bottom:6px}
.notice{background:var(--sage);border-left:3px solid var(--teal);padding:16px 18px;font-size:.9rem;margin:28px 0}

/* buttons / links */
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;padding:12px 22px;font-weight:600;font-size:.95rem}
.btn:hover{background:var(--teal-deep)}
.btn.ghost{background:transparent;color:var(--teal);border:1px solid var(--teal)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* footer */
footer.site{background:#fff;border-top:1px solid var(--line);padding:34px 0;font-size:.85rem;color:var(--muted)}
footer.site p+p{margin-top:6px}
