/* 병원의 숫자 — 읽기 우선 스타일시트 */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#fbfaf8; --surface:#fff; --text:#1c1b19; --muted:#6b6862; --line:#e6e2db;
  --accent:#8A6814; --accent-soft:#f7f0dd; --mark:#fdf2cf;
  --brand:#E2B53B;    /* 로고 골드 — 장식용. 라이트 배경 대비 1.85:1 이라 글자엔 못 쓴다 */
  --brand-ink:#393839;
  --measure:46rem;    /* 본문 줄길이 상한 — 이건 넓힐수록 읽기 나빠진다 */
  --shell:96rem;      /* 전체 폭 상한 */
  --side:16.5rem;     /* 좌측 문서 트리 */
  --toc:14rem;        /* 우측 목차 레일 */
  --sans:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#16161a; --surface:#1d1d22; --text:#e9e6e1; --muted:#9d9a94; --line:#2e2e35;
        --accent:#E2B53B; --accent-soft:#2c2517; --mark:#3d3316;
        --brand:#E2B53B; --brand-ink:#e9e6e1}
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.85;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01','cv01';letter-spacing:-.003em}
/* 숫자는 자릿수를 맞춘다 — 금액 표가 많아서 이게 정돈감을 크게 좌우한다 */
table,time,.meta,.sr-sec,code,.stat{font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:1.5rem}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;background:var(--surface);padding:.6rem 1rem;
  border:1px solid var(--line);border-radius:.5rem;z-index:10}

/* 헤더 */
.site-header{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5}
/* 섹션이 늘면 네비 항목도 는다. 자리가 모자라면 네비가 통째로 브랜드 아래 줄로 내려간다
   — 고정 브레이크포인트를 두지 않아 항목이 더 늘어도 알아서 접힌다. */
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;row-gap:.55rem;padding-block:.85rem;max-width:var(--shell)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-logo{height:1.6rem;width:auto;flex:none;display:block}
.brand-text strong{color:var(--text)}
.brand-text strong{display:block;font-size:.98rem;letter-spacing:-.01em}
.brand-text small{display:block;color:var(--muted);font-size:.72rem;line-height:1.4}
.site-header nav{display:flex;gap:1rem;font-size:.87rem;flex-wrap:wrap}
.site-header nav a{color:var(--muted);text-decoration:none;padding-block:.2rem}
.site-header nav a:hover{color:var(--text)}
.site-header nav a[aria-current=page]{color:var(--text);box-shadow:inset 0 -2px var(--accent)}
@media (max-width:30rem){
  .brand-text small{display:none}
  /* 아주 좁은 화면에서 네비가 두 줄로 접히면 sticky 헤더가 화면을 많이 먹는다 */
  .site-header .wrap{padding-block:.6rem;row-gap:.35rem}
  .site-header nav{gap:.8rem;font-size:.84rem}
}

/* 히어로 */
.hero{padding:3.5rem 0 2.5rem;border-bottom:1px solid var(--line)}
.hero h1{font-size:1.85rem;line-height:1.4;letter-spacing:-.02em;margin:0 0 1rem}
.hero p{color:var(--muted);margin:0;font-size:.98rem}
.hero strong{color:var(--text);font-weight:600}

/* 목록 */
.cards{list-style:none;margin:0;padding:2rem 0 0;counter-reset:n}
.card{border-bottom:1px solid var(--line)}
.card a{display:block;padding:1.6rem 0;text-decoration:none}
.card h2{font-size:1.18rem;line-height:1.5;letter-spacing:-.015em;margin:.2rem 0 .5rem}
.card a:hover h2{color:var(--accent)}
.excerpt{color:var(--muted);font-size:.92rem;margin:0 0 .7rem}
.kicker{margin:0;display:flex;gap:.35rem;flex-wrap:wrap;min-height:1.2rem}
.tag{font-size:.7rem;letter-spacing:.02em;color:var(--accent);background:var(--accent-soft);
  padding:.15rem .5rem;border-radius:.35rem}
/* 아카이브가 있는 태그는 링크가 된다. 카드 안에서는 span 이라 이 규칙이 안 걸린다. */
a.tag{text-decoration:none}
a.tag:hover{background:var(--accent);color:var(--bg)}
.meta{color:var(--muted);font-size:.8rem;margin:0}

/* 글 */
.post-head{padding:3rem 0 1.6rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.post-head h1{font-size:1.65rem;line-height:1.48;letter-spacing:-.02em;margin:.5rem 0 .7rem}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:1.25rem;line-height:1.5;letter-spacing:-.015em;margin:3rem 0 1rem;
  padding-top:.4rem;border-top:1px solid var(--line)}
.prose h3{font-size:1.05rem;margin:2.2rem 0 .8rem}
.prose p{margin:0 0 1.35rem}
.prose strong{font-weight:600}
.prose em{font-style:normal;background:var(--mark);padding:0 .15em;border-radius:.2em}
.prose a{color:var(--accent);text-underline-offset:.2em}
.prose ul,.prose ol{margin:0 0 1.35rem;padding-left:1.3rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--muted)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.prose blockquote{margin:1.8rem 0;padding:1.1rem 1.25rem;background:var(--surface);
  border-left:3px solid var(--accent);border-radius:0 .5rem .5rem 0;font-size:.95rem}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-size:.86em;background:var(--surface);border:1px solid var(--line);
  padding:.1em .35em;border-radius:.3em}
.prose pre{overflow-x:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:.6rem;padding:1rem 1.1rem;font-size:.84rem;line-height:1.7;margin:0 0 1.35rem}
.prose pre code{background:none;border:0;padding:0}

/* 표 — 좁은 화면에서 가로 스크롤 */
.prose table{border-collapse:collapse;width:100%;font-size:.87rem;margin:0 0 .5rem}
.prose th,.prose td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
.prose th{background:var(--surface);font-weight:600;white-space:nowrap}
.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* CTA */
.cta{margin:3.5rem 0 0;padding:1.8rem;background:var(--surface);border:1px solid var(--line);
  border-radius:.9rem}
.cta h2{font-size:1.05rem;margin:0 0 .6rem;letter-spacing:-.01em}
.cta p{color:var(--muted);font-size:.92rem;margin:0 0 1.2rem}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:.65rem 1.2rem;border-radius:.5rem;font-size:.9rem;font-weight:600}
@media (prefers-color-scheme:dark){.btn{color:#1a1206}}
.btn:hover{filter:brightness(1.08)}

/* 글 이동 */
.post-nav{display:grid;gap:.75rem;margin:2.5rem 0 0}
@media (min-width:34rem){.post-nav{grid-template-columns:1fr 1fr}}
.pn{display:block;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:.7rem;
  text-decoration:none;background:var(--surface)}
.pn span{display:block;color:var(--muted);font-size:.75rem;margin-bottom:.25rem}
.pn strong{font-size:.9rem;font-weight:600;line-height:1.5}
.pn:hover{border-color:var(--accent)}

/* 푸터 */
.site-footer{margin-top:4rem;border-top:1px solid var(--line);padding:2rem 0 3rem;
  color:var(--muted);font-size:.83rem}
.site-footer p{margin:0 0 .4rem}
.site-footer .muted{font-size:.78rem}

/* ── 섹션 구조 ────────────────────────────────────────────────── */
.crumb{font-size:.8rem;color:var(--muted);padding-top:1.75rem;margin-bottom:-.75rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.5;margin:0 .15rem}

.section-label{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;margin:3rem 0 .25rem}
.sections+section .section-label{margin-top:3.5rem}

.sec-grid{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.75rem}
@media (min-width:34rem){.sec-grid{grid-template-columns:1fr 1fr}}
.sec-grid a{display:block;padding:1.15rem 1.25rem;background:var(--surface);
  border:1px solid var(--line);border-radius:.75rem;text-decoration:none;height:100%}
.sec-grid a:hover{border-color:var(--accent)}
.sec-grid strong{display:block;font-size:1rem;letter-spacing:-.01em;margin-bottom:.3rem}
.sec-grid span{display:block;color:var(--muted);font-size:.85rem;line-height:1.6}
.sec-grid em{display:block;font-style:normal;color:var(--accent);font-size:.75rem;
  font-weight:600;margin-top:.6rem}

.tag-sec{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* ── 위키형 2단 레이아웃 ──────────────────────────────────────── */
/* 좁은 화면: 본문 먼저, 문서 목록은 아래로 (읽는 게 우선) */
.layout{max-width:var(--shell);display:flex;flex-direction:column}
.content{order:1;min-width:0}
.sidebar{order:2;margin-top:3rem;border-top:1px solid var(--line);padding-top:.5rem}
.side-toggle>summary{cursor:pointer;padding:.85rem 0;font-size:.85rem;font-weight:600;
  color:var(--muted);list-style:none}
.side-toggle>summary::-webkit-details-marker{display:none}
.side-toggle>summary::before{content:'▾ ';font-size:.8em}
.side-toggle:not([open])>summary::before{content:'▸ '}

@media (min-width:64rem){
  .layout{display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:3rem;align-items:start}
  .content{order:0}
  .sidebar{order:0;margin-top:0;border-top:0;padding-top:0;
    position:sticky;top:4.6rem;max-height:calc(100vh - 6rem);overflow-y:auto;
    scrollbar-width:thin;padding-bottom:2rem}
  .side-toggle>summary{display:none}
  .sidebar::after{content:'';display:block;height:1rem}
}

/* 우측 목차 레일 — 기본은 숨김, 넓은 화면에서만 꺼낸다.
   ⚠️ 기본 규칙을 미디어쿼리보다 먼저 둬야 한다. 같은 특이도라 뒤가 이긴다. */
.toc-rail{display:none;position:sticky;top:4.6rem;max-height:calc(100vh - 6rem);
  overflow-y:auto;scrollbar-width:thin;padding-bottom:2rem;
  border-left:1px solid var(--line);padding-left:1.1rem}

/* 넓은 화면: 좌 트리 · 본문 · 우 목차 3단 */
@media (min-width:90rem){
  .layout.with-toc{grid-template-columns:var(--side) minmax(0,1fr) var(--toc)}
  .layout.with-toc .side-toc{display:none}      /* 목차는 우측 레일로 옮긴다 */
  .layout.with-toc .toc-rail{display:block}
}
.toc-title{margin:.35rem 0 .6rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.toc-rail ol{list-style:none;margin:0;padding:0}
.toc-rail a{display:block;padding:.28rem 0;font-size:.78rem;line-height:1.5;
  color:var(--muted);text-decoration:none}
.toc-rail a:hover{color:var(--accent)}
.toc-rail .d3 a{padding-left:.8rem;font-size:.74rem;opacity:.85}

/* 본문은 읽기 폭을 지키되, 표·코드·인용은 남는 폭을 쓴다 */
.content>.post>.prose>*,
.content>.hero>*,
.content>section>*:not(.cards):not(.sec-grid),
.content>.post>.post-head>*{max-width:var(--measure)}
.prose table,.prose pre{max-width:none}
.prose blockquote{max-width:min(52rem,100%)}

/* 검색 */
.sr{position:absolute;left:-9999px}
.search{margin:1.25rem 0 1.5rem;position:relative}
.search input{width:100%;font:inherit;font-size:.85rem;padding:.55rem .7rem;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:.5rem;-webkit-appearance:none}
.search input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.search input::placeholder{color:var(--muted)}
.search-hint{margin:.5rem 0 0;font-size:.75rem;color:var(--muted)}
.search-results{list-style:none;margin:.6rem 0 0;padding:0}
.search-results li{margin-bottom:.15rem}
.search-results a{display:block;padding:.55rem .6rem;border-radius:.45rem;text-decoration:none;
  border:1px solid transparent}
.search-results a:hover,.search-results a:focus{background:var(--surface);border-color:var(--line)}
.sr-sec{display:block;font-size:.68rem;color:var(--accent);margin-bottom:.1rem}
.search-results strong{display:block;font-size:.83rem;font-weight:600;line-height:1.45}
.sr-snip{display:block;font-size:.75rem;color:var(--muted);line-height:1.6;margin-top:.2rem}
.sr-snip mark{background:var(--mark);color:inherit;padding:0 .1em;border-radius:.2em}

/* 문서 트리 */
.side-tree ol{list-style:none;margin:0;padding:0}
.side-sec{margin-bottom:1.4rem}
.side-sec-name{display:block;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;margin-bottom:.5rem}
.side-sec-name:hover,.side-sec.on .side-sec-name{color:var(--accent)}
.side-posts>li{border-left:2px solid var(--line);margin-left:.1rem}
.side-posts>li>a{display:block;padding:.35rem 0 .35rem .7rem;font-size:.82rem;line-height:1.5;
  color:var(--muted);text-decoration:none}
.side-posts>li>a:hover{color:var(--text)}
.side-posts>li.on{border-left-color:var(--accent)}
.side-posts>li.on>a{color:var(--text);font-weight:600}

/* 보고 있는 글의 목차 */
.side-toc{margin:.1rem 0 .5rem;padding:0 0 0 .7rem !important;border-left:1px dashed var(--line)}
.side-toc li{margin:0}
.side-toc a{display:block;padding:.22rem 0 .22rem .55rem;font-size:.76rem;line-height:1.45;
  color:var(--muted);text-decoration:none}
.side-toc a:hover{color:var(--accent)}
.side-toc .d3 a{padding-left:1.35rem;font-size:.73rem;opacity:.85}

/* 제목 앵커 */
.prose h2,.prose h3{scroll-margin-top:5rem;position:relative}
.anchor{position:absolute;left:-1rem;color:var(--muted);text-decoration:none;
  opacity:0;font-weight:400;transition:opacity .12s}
.prose h2:hover .anchor,.prose h3:hover .anchor,.anchor:focus{opacity:.55}
@media (max-width:64rem){.anchor{display:none}}


/* 넓은 화면에서 목록을 2단으로 — 세로로 길게 늘어지지 않게 */
@media (min-width:76rem){
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem}
  .card{border-bottom:1px solid var(--line)}
  .sec-grid{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
}

/* 본문 아래 블록도 읽기 폭에 맞춘다 — 본문 42rem 옆에 60rem 박스가 오면 어긋나 보인다 */
.content>.cta,.content>.post-nav{max-width:var(--measure)}

/* 소개 페이지 로고 */
.prose img{max-width:min(22rem,100%);height:auto;display:block;margin:1.5rem 0 2rem}
@media (prefers-color-scheme:dark){
  /* 로고 워드마크가 차콜이라 어두운 배경에서 묻힌다 — 살짝 밝은 판을 깔아준다 */
  .brand-logo,.prose img[src$="logo-full.png"]{
    background:#f4f2ee;border-radius:.35rem;padding:.15rem .3rem}
}

/* ── 바이라인 ─────────────────────────────────────────────────── */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  margin:0;color:var(--muted);font-size:.82rem}
.byline .by{color:var(--text);font-weight:600}
.byline>*+*{position:relative;padding-left:.85rem}
.byline>*+*::before{content:'';position:absolute;left:0;top:50%;width:3px;height:3px;
  margin-top:-1.5px;border-radius:50%;background:currentColor;opacity:.45}
.byline .serial a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.byline .serial a:hover{color:var(--accent)}

/* ── 저자 박스 ────────────────────────────────────────────────── */
.author-box{display:flex;gap:1rem;align-items:flex-start;margin:3.5rem 0 0;padding:1.4rem;
  background:var(--surface);border:1px solid var(--line);border-radius:.9rem;
  max-width:var(--measure)}
.avatar{flex:none;width:2.75rem;height:2.75rem;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#1c1b19;
  font-weight:700;font-size:.9rem;letter-spacing:-.02em}
.author-name{margin:0 0 .35rem;font-size:.92rem;font-weight:700}
.author-name span{font-weight:400;color:var(--muted);font-size:.82rem;margin-left:.4rem}
.author-bio{margin:0 0 .5rem;font-size:.86rem;line-height:1.7;color:var(--muted)}
.author-more{margin:0;font-size:.8rem;color:var(--muted)}
.author-more a{color:var(--accent);text-decoration:none}
.author-more a:hover{text-decoration:underline}

/* ── 함께 읽을 글 ─────────────────────────────────────────────── */
.related{margin-top:3rem;max-width:var(--measure)}
.related .cards{padding-top:.5rem}
.related .card a{padding:1.1rem 0}
.related .card h2{font-size:1rem}
@media (min-width:76rem){.related .cards{grid-template-columns:1fr;gap:0}}

/* ── 인쇄 (원장님이 출력해 보는 경우) ─────────────────────────── */
@media print{
  :root{--bg:#fff;--surface:#fff;--text:#000;--muted:#444;--line:#bbb;--accent:#000}
  .site-header,.sidebar,.toc-rail,.cta,.post-nav,.related,.author-more,
  .site-footer p:last-child,.crumb,.search{display:none !important}
  .layout{display:block;max-width:none}
  body{font-size:11pt;line-height:1.6}
  .post-head h1{font-size:18pt}
  .prose h2{font-size:13pt;page-break-after:avoid}
  .prose h3{page-break-after:avoid}
  .prose p,.prose li,.prose blockquote,.prose table{page-break-inside:avoid}
  .prose a::after{content:' (' attr(href) ')';font-size:9pt;color:#555;word-break:break-all}
  .prose a[href^="#"]::after{content:''}
  .anchor{display:none}
  .author-box{border:1px solid #bbb;page-break-inside:avoid}
  .site-footer{border-top:1px solid #bbb;font-size:9pt}
}

/* ── 문의 폼 ─────────────────────────────────────────────────
   .cta 안(compact)과 /contact/ 페이지(전체) 두 곳에서 같은 마크업을 쓴다. */
.inquiry{margin:0}
.inquiry .f{margin:0 0 .9rem}
.inquiry label{display:block;font-size:.82rem;font-weight:600;margin:0 0 .3rem}
.inquiry .req{color:var(--accent);font-weight:700}
.inquiry input[type=text],.inquiry input[type=tel],.inquiry input[type=email],.inquiry textarea{
  width:100%;font:inherit;font-size:.9rem;padding:.6rem .75rem;color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:.5rem}
.inquiry textarea{resize:vertical;min-height:5rem;line-height:1.6}
.inquiry input:focus,.inquiry textarea:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:transparent}
.inquiry ::placeholder{color:var(--muted)}
.f-row{display:flex;gap:.9rem}
.f-row .f{flex:1 1 0;min-width:0}
@media (max-width:34rem){.f-row{flex-wrap:wrap;gap:0}}

/* 동의 체크박스 — 법적 고지라 흐리게 처리하지 않는다 */
.inquiry .consent label{display:flex;gap:.55rem;align-items:flex-start;font-weight:400;
  font-size:.8rem;line-height:1.6;color:var(--muted)}
.inquiry .consent input{flex:none;margin-top:.25rem;accent-color:var(--accent)}
.inquiry .consent strong{color:var(--text)}

.f-submit{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:1.1rem 0 0}
.inquiry button{font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  background:var(--accent);color:#fff;border:0;padding:.65rem 1.2rem;border-radius:.5rem}
@media (prefers-color-scheme:dark){.inquiry button{color:#1a1206}}
.inquiry button:hover{filter:brightness(1.08)}
.inquiry button[disabled]{opacity:.55;cursor:progress}
.form-msg{font-size:.83rem;color:var(--muted)}
.form-msg.err{color:#b3261e}
@media (prefers-color-scheme:dark){.form-msg.err{color:#f2b8b5}}

/* 허니팟 — 화면 밖으로 보낸다. display:none 보다 걸리는 봇이 많다. */
.inquiry .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 접수 완료 후 폼 자리를 대신하는 안내 */
.form-done{margin:0;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:.6rem;
  background:var(--accent-soft);font-size:.9rem}

/* /contact/ 페이지 2단 */
.contact-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.5rem;
  padding:2.5rem 0}
.contact-aside ul{margin:0 0 1rem;padding-left:1.1rem;font-size:.88rem;color:var(--muted);line-height:1.9}
.contact-aside .muted{font-size:.85rem;color:var(--muted);margin:0 0 .8rem}
@media (max-width:52rem){.contact-body{grid-template-columns:1fr;gap:2rem}}