/* =========================================================
   evies 블로그 디자인 시스템 (evies.kr 브랜드 결)
   Pretendard(KR) + Space Grotesk(EN/숫자), 그린 팔레트, 라이트/다크
   ========================================================= */
:root{
  --bg:#f7f7f4; --surface:#ffffff; --surface-2:#fbfbf9;
  --ink:#101216; --muted:#565c66; --muted-2:#757c88;
  --line:#eceef0; --line-2:#e4e7ea;
  --brand:#0b815a; --brand-2:#0f8459; --brand-bright:#22c58f;
  --mint:#e4f6ef; --mint-2:#eef8f3;
  --peach:#fff2e8; --peach-ink:#b45309;
  --blue:#3b6ef2; --blue-soft:#eef2fe;
  --radius:16px; --radius-lg:22px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,18,22,.04), 0 10px 30px rgba(16,18,22,.06);
  --shadow-sm:0 1px 2px rgba(16,18,22,.05), 0 4px 14px rgba(16,18,22,.05);
  --font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --font-en:'Space Grotesk',var(--font);
  --maxw:1320px;
}
:root[data-theme="dark"]{
  --bg:#0b0d10; --surface:#15181d; --surface-2:#12151a;
  --ink:#f2f4f7; --muted:#a7aebb; --muted-2:#757c88;
  --line:#232830; --line-2:#2b313a;
  --brand:#34d8a4; --brand-2:#22c58f; --brand-bright:#4ade9c;
  --mint:#132a22; --mint-2:#16211d;
  --peach:#2a1f16; --peach-ink:#f0b37e;
  --blue:#7aa0ff; --blue-soft:#182238;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; transition:font-size .2s ease}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.65; letter-spacing:-.01em;
  word-break:keep-all; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{letter-spacing:-.03em; line-height:1.25; margin:0 0 .5em; font-weight:800}
p{margin:0 0 1em}
.en,.num{font-family:var(--font-en); letter-spacing:-.01em}

.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.container.narrow{max-width:860px}
.section{padding:56px 0}
.blog-head + .section{padding-top:30px}
.section.after-hero{padding-top:36px}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- 헤더/네비 ---------- */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .3s}
.site-header.hide{transform:translateY(-100%)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(16,18,22,.07)}
.nav{display:flex; align-items:center; gap:30px; height:76px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.3rem; letter-spacing:-.03em; min-width:0}
.brand .logo{width:auto; height:38px; max-width:200px; object-fit:contain; border-radius:11px; flex:none}
:root[data-theme="dark"] .brand .logo{filter:brightness(0) invert(1)}   /* 다크모드: 로고 흰색 반전 */
.brand span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav-links{display:flex; gap:28px; margin-left:10px}
.nav-links a{color:var(--muted); font-weight:600; font-size:1.06rem; transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.icon-btn{width:44px;height:44px;border:1px solid var(--line-2);background:var(--surface);border-radius:13px;
  display:grid;place-items:center;cursor:pointer;color:var(--muted);font-size:1.15rem}
.icon-btn:hover{color:var(--ink)}
.nav-toggle{display:none}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px;
  font-weight:700; font-size:1rem; cursor:pointer; border:1px solid transparent; transition:.18s; letter-spacing:-.01em}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-2); transform:translateY(-1px)}
:root[data-theme="dark"] .btn-primary{color:#06231a}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn-sm{padding:9px 16px; font-size:.9rem}

/* ---------- 블로그 타이틀(심플 h1) ---------- */
.blog-head{padding:52px 0 6px; animation:fadeUp .5s ease both; text-align:center}
.blog-head h1{font-size:clamp(1.55rem,2.6vw,2.05rem); font-weight:900; letter-spacing:-.04em; margin:0 0 12px}
.blog-head .sub{font-size:1rem; color:var(--muted); margin:0 auto; max-width:60ch}

/* ---------- 카테고리 칩 ---------- */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 30px}
.chip{padding:9px 18px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface);
  color:var(--muted); font-weight:700; font-size:.95rem; transition:.15s}
.chip:hover{color:var(--ink); border-color:var(--brand)}
.chip.active{background:var(--brand); color:#fff; border-color:var(--brand)}
:root[data-theme="dark"] .chip.active{color:#06231a}

/* ---------- 카드 그리드 ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:52px 26px}   /* 세로 간격을 넓혀 줄 사이가 붙어보이지 않게 */
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s; display:flex; flex-direction:column}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2)}
.card .thumb{aspect-ratio:16/10; background:var(--mint-2); overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:.3s}
.card:hover .thumb img{transform:scale(1.04)}
.card .body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.cat-tag{align-self:flex-start; font-size:.78rem; font-weight:800; padding:5px 11px; border-radius:999px;
  background:var(--mint); color:var(--brand-2)}
.cat-tag.b{background:var(--blue-soft); color:var(--blue)}
.card h3{font-size:1.18rem; margin:0; letter-spacing:-.03em}
.card .meta{margin-top:auto; color:var(--muted-2); font-size:.85rem; font-family:var(--font-en)}
/* 요약은 3줄까지만 (카드 높이 균일) */
.card .body p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
/* 카드 전체 클릭 — 제목 링크를 카드 위로 확장 */
.card h3 a::after{content:''; position:absolute; inset:0; z-index:1}

/* ---------- 페이지네이션 ---------- */
.pager{display:flex; justify-content:center; gap:8px; margin-top:44px}
.pager a,.pager span{min-width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  border:1px solid var(--line-2); background:var(--surface); font-weight:700; font-family:var(--font-en); color:var(--muted)}
.pager a:hover{color:var(--ink); border-color:var(--brand)}
.pager .on{background:var(--brand); color:#fff; border-color:var(--brand)}
:root[data-theme="dark"] .pager .on{color:#06231a}

/* ---------- 글 상세 ---------- */
.breadcrumb{display:flex; gap:8px; color:var(--muted-2); font-size:.9rem; margin:26px 0 14px; flex-wrap:wrap}
.breadcrumb a:hover{color:var(--brand)}
.post-head h1{font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:900; letter-spacing:-.04em}
.post-meta{display:flex; gap:12px; align-items:center; color:var(--muted); font-size:.92rem; margin:14px 0 26px}
/* CLS 방지: 이미지 로드 전에 컨테이너 높이를 확보(aspect-ratio/고정높이) */
/* 상단 이미지(below): 원본 비율 그대로 가운데 정렬 (일러스트 잘림 방지) */
.post-hero{border-radius:var(--radius-lg); overflow:hidden; margin:0 auto 32px; box-shadow:var(--shadow-sm);
  max-height:460px; background:var(--mint-2); width:fit-content; max-width:100%}
.post-hero img{display:block; max-width:100%; height:auto; max-height:460px}
/* 헤더 바로 아래 상단 커버: 전체 레이아웃 폭(1150)을 채움 */
.post-hero-top{width:100%; max-width:100%; max-height:none; margin-bottom:28px}
.post-hero-top img{width:100%; max-height:none}
/* 상단 꽉 채움 히어로(관리자 옵션) */
.post-hero-full{width:100%; height:min(48vh,500px); overflow:hidden; background:var(--mint-2); animation:fadeUp .5s ease both}
.post-hero-full img{width:100%; height:100%; object-fit:cover; display:block}
.post-body{font-size:1.09rem; line-height:1.85; letter-spacing:-.006em; color:#26292f}
:root[data-theme="dark"] .post-body{color:#d6dae1}
.post-body h2{font-size:1.5rem; margin:1.8em 0 .6em; padding-top:.3em}
.post-body h3{font-size:1.22rem; margin:1.5em 0 .5em}
.post-body p{margin:0 0 1.15em}
.post-body img{border-radius:14px; margin:1.2em auto; box-shadow:var(--shadow-sm)}
/* 본문 링크 — 고급스럽게 (밑줄 그라데이션 + 호버 배경) */
.post-body a{color:var(--brand-2); font-weight:700; text-decoration:none;
  background-image:linear-gradient(var(--brand),var(--brand)); background-repeat:no-repeat;
  background-size:100% 2px; background-position:0 100%; padding-bottom:2px; transition:color .15s,background-color .15s; border-radius:3px}
.post-body a:hover{color:var(--brand); background-color:var(--mint-2)}
/* 링크만 있는 문단 → 관련글 카드(점선 캡슐) 자동 변환 */
.post-body p.link-card{border:2px dashed color-mix(in srgb,var(--brand) 45%,var(--line-2));
  border-radius:999px; padding:16px 24px; text-align:center; margin:1.7em 0;
  background:var(--surface); transition:border-color .18s, transform .18s, box-shadow .18s}
.post-body p.link-card a{background:none; color:var(--ink); font-weight:700;
  display:inline-flex; align-items:center; gap:9px; padding:0}
.post-body p.link-card a::after{content:'→'; color:var(--brand); font-weight:800; transition:transform .18s}
.post-body p.link-card:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.post-body p.link-card:hover a::after{transform:translateX(4px)}
.post-body ul,.post-body ol{padding-left:1.3em; margin:0 0 1.15em}
.post-body li{margin:.35em 0}
.post-body blockquote{margin:1.4em 0; padding:14px 20px; background:var(--mint-2);
  border-left:4px solid var(--brand); border-radius:0 12px 12px 0; color:var(--muted)}
/* ── 본문 표 ────────────────────────────────────────────────
   선으로만 정리한 담백한 표. 바깥 테두리 상자·라운드는 쓰지 않는다.
   머리줄에만 옅은 그림자를 줘서 본문과 층이 나뉘어 보이게 한다.
   모바일에서는 가로로 밀어 보고, 첫 열(항목명)은 자리에 남는다.
   붙여넣은 표의 인라인 style 은 sanitize_html 이 지우므로 항상 같은 모양이 나온다. */
.post-body table{
  width:100%; border-collapse:separate; border-spacing:0;
  margin:2em 0; table-layout:fixed; font-size:.95rem;
  border:1px solid var(--line-2); border-radius:10px; overflow:hidden;
  background:var(--surface)}
.post-body thead th{
  padding:15px 14px; text-align:center; vertical-align:middle;
  font-size:1.08rem; font-weight:700; color:var(--ink); background:#eef0f2;
  border-bottom:1px solid var(--line-2);
  box-shadow:0 3px 7px -2px rgba(16,18,22,.10);
  position:relative; z-index:1;                 /* 그림자가 아래 행 위로 오게 */
  white-space:nowrap}
:root[data-theme="dark"] .post-body thead th{
  background:#232830; box-shadow:0 3px 9px -2px rgba(0,0,0,.55)}
.post-body td{
  padding:15px 14px; text-align:center; vertical-align:middle;
  color:var(--muted); border-bottom:1px solid var(--line);
  word-break:keep-all; line-height:1.65}
/* 굵은 항목명은 한 단계 크게 — 굵기만 다르면 잘 안 읽힌다 */
.post-body tbody td:first-child{font-weight:700; font-size:1.06em; color:var(--ink)}
.post-body tbody tr:last-child td{border-bottom:1px solid var(--line-2)}
.post-body table caption{
  caption-side:bottom; padding-top:10px; font-size:.85rem; color:var(--muted-2); text-align:left}

@media(max-width:768px){
  .post-body table{
    display:block; width:100%; overflow-x:auto;
    table-layout:auto; -webkit-overflow-scrolling:touch}
  .post-body thead th,.post-body td{
    white-space:nowrap; min-width:96px; padding:11px 12px; font-size:.92rem}
  .post-body thead th{font-size:1rem; padding:13px 12px}   /* 좁아져도 머리줄은 살짝 크게 */
  /* 가로로 밀어도 항목명은 남아 있어야 무슨 행인지 안다 */
  .post-body thead th:first-child,
  .post-body tbody td:first-child{
    position:sticky; left:0; z-index:2;
    background:var(--surface); border-right:1px solid var(--line)}
  /* 고정 열 배경이 머리줄 색을 덮지 않게 되돌린다 */
  .post-body thead th:first-child{z-index:3; background:#eef0f2}
  :root[data-theme="dark"] .post-body thead th:first-child{background:#232830}
}

/* 목차 */
.toc{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:0 0 30px}
.toc .t{font-weight:800; font-size:1rem; margin-bottom:10px; display:flex; align-items:center; gap:6px}
.toc ol{list-style:none; margin:0; padding:0}
.toc li{margin:.35em 0}
/* h2 = 큰 목차: 블릿 + 굵게 */
.toc .lv2{display:flex; align-items:baseline; gap:9px; font-weight:700}
.toc .lv2::before{content:''; flex:none; width:6px; height:6px; border-radius:2px;
  background:var(--brand); transform:translateY(-1px)}
.toc .lv2 a{color:var(--ink)}
/* h3 = 하위 항목: 블릿 없이 얇게 들여쓰기 */
.toc .lv3{padding-left:1.9em; font-size:.94rem; font-weight:400}
.toc a{color:var(--muted)} .toc a:hover{color:var(--brand)}

/* 태그 */
.tags{display:flex; gap:8px; flex-wrap:wrap; margin:34px 0}
.tags a{background:var(--surface); border:1px solid var(--line-2); color:var(--muted); padding:7px 13px;
  border-radius:999px; font-size:.88rem; font-weight:600}
.tags a:hover{color:var(--brand); border-color:var(--brand)}

/* 관련글 */
.related{margin-top:56px; padding-top:40px; border-top:1px solid var(--line)}

/* ---------- 푸터 ---------- */
.site-footer{border-top:1px solid var(--line); margin-top:70px; padding:44px 0; color:var(--muted); font-size:.92rem}
.footer-in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
.footer-links{display:flex; gap:18px} .footer-links a:hover{color:var(--brand)}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .nav-toggle{display:grid}
}
@media (max-width:600px){
  .section{padding:40px 0}
  .blog-head{padding:36px 0 0}
  .grid{grid-template-columns:1fr}
  /* 헤더: 긴 상호 + 우측 버튼 3개가 넘치지 않도록 간격·크기 축소 */
  .nav{gap:10px}
  .brand{font-size:1.08rem; gap:9px}
  .brand .logo{width:auto; height:32px; max-width:150px}
  .nav-right{gap:6px}
  .icon-btn,.fs-cycle{width:40px; height:40px}
}

/* 아이콘 폰트 자간 영향 제거(있다면) */
[class^="ri-"],[class*=" ri-"]{letter-spacing:normal}

/* ---------- 글자 크기 조절 ---------- */
.font-scale{display:flex; align-items:center; border:1px solid var(--line-2); border-radius:13px;
  overflow:hidden; background:var(--surface); height:44px}
.fs-btn{border:0; background:transparent; color:var(--muted); cursor:pointer; padding:0 13px; height:100%;
  font-weight:800; font-size:1.02rem; font-family:var(--font); transition:background .15s,color .15s; line-height:1}
.fs-btn:hover{color:var(--ink); background:var(--mint-2)}
.fs-btn+.fs-btn{border-left:1px solid var(--line-2)}
.fs-btn sup{font-size:.6em; margin-left:1px}
#fsDown{font-size:.8rem} #fsUp{font-size:1.08rem}
/* 모바일: 3버튼 그룹 대신 순환 버튼 하나 */
.fs-cycle{display:none; font-weight:800; font-family:var(--font); font-size:1.02rem}
.fs-cycle sup{font-size:.52em; margin-left:1px; font-weight:700}
@media (max-width:600px){
  .font-scale{display:none}
  .fs-cycle{display:grid}
}

/* ---------- 다크모드 해/달 토글 ---------- */
.theme-toggle{overflow:hidden}
.theme-toggle svg{transition:transform .4s cubic-bezier(.2,.7,.3,1.4)}
.theme-toggle:hover svg{transform:rotate(25deg)}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}

/* ---------- 본문 h2 엠블럼(포인트 바) ---------- */
.post-body h2{position:relative; padding-left:18px}
.post-body h2::before{content:''; position:absolute; left:0; top:.18em; bottom:.18em; width:6px;
  border-radius:3px; background:linear-gradient(180deg,var(--brand-bright),var(--brand))}

/* ---------- 목차 토글 + 부드러운 이동 ---------- */
.post-body h2,.post-body h3{scroll-margin-top:96px}
.toc .t{cursor:pointer; user-select:none; justify-content:space-between}
.toc .t .tarrow{margin-left:auto; font-size:.85em; color:var(--muted-2); transition:transform .3s ease}
.toc.collapsed .t .tarrow{transform:rotate(-90deg)}
.toc ol{overflow:hidden; transition:max-height .38s ease,opacity .3s ease,margin .3s ease; max-height:800px; opacity:1}
.toc.collapsed ol{max-height:0; opacity:0; margin:0}
.toc a{transition:color .15s}
.toc li{transition:transform .18s} .toc li:hover{transform:translateX(2px)}

/* ---------- 본문 이미지 + AI 참고 캡션 ---------- */
.post-body figure.post-figure{margin:1.4em auto; text-align:center}
.post-body figure.post-figure img{margin:0 auto}
.post-body .ai-cap{display:block; margin-top:.65em; font-size:.85rem; color:var(--muted-2); font-weight:600; letter-spacing:-.01em}

/* ---------- 병원 빠른실행 바 (medical) — 모바일에서만 하단 고정 ---------- */
.action-bar{display:none}   /* 데스크톱: 숨김 */
.ab-inner{display:flex; align-items:stretch; justify-content:center; gap:6px}
.ab-item{flex:1 1 0; max-width:180px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:9px 6px 8px; border:0; background:transparent; cursor:pointer; text-decoration:none;
  color:var(--ink); font-size:.86rem; font-weight:700; letter-spacing:-.02em; position:relative}
.ab-item svg{color:var(--brand-2)}
.ab-item + .ab-item::before{content:""; position:absolute; left:0; top:22%; height:56%; width:1px; background:var(--line)}
.ab-item:active{background:var(--mint)}
@media (max-width:820px){
  .action-bar{display:block; position:fixed; left:0; right:0; bottom:0; z-index:110;
    background:var(--surface); border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(0,0,0,.09); padding-bottom:env(safe-area-inset-bottom)}
  :root[data-theme="dark"] .action-bar{box-shadow:0 -8px 24px rgba(0,0,0,.5)}
  .ab-inner{max-width:560px}
  body.has-abar{padding-bottom:66px}                 /* 고정 바에 콘텐츠가 가리지 않게 */
  body.has-abar .to-top{bottom:calc(74px + env(safe-area-inset-bottom))}  /* 위로가기 버튼을 바 위로 */
}
/* 진료안내 팝업 */
.hours-modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:16px}
.hours-modal[hidden]{display:none}
.hm-dim{position:absolute; inset:0; background:rgba(15,25,22,.5); backdrop-filter:blur(2px)}
.hm-card{position:relative; width:100%; max-width:400px; background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.28); padding:24px 22px 20px; animation:fadeUp .28s ease both}
.hm-card h3{margin:0 0 14px; font-size:1.2rem; letter-spacing:-.03em; display:flex; align-items:center; gap:8px}
.hm-card h3 .ico{color:var(--brand-2)}
.hm-x{position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:1.6rem; line-height:1;
  color:var(--muted-2); cursor:pointer}
.hm-list{list-style:none; margin:0; padding:0}
.hm-list li{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 2px;
  border-bottom:1px dashed var(--line)}
.hm-list li:last-child{border-bottom:0}
.hm-list li span{color:var(--muted-2); font-weight:600}
.hm-list li b{font-weight:800; letter-spacing:-.01em}
.hm-foot{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:.92rem; color:var(--muted-2)}
.hm-foot .hm-line{margin:3px 0; display:flex; align-items:center; gap:7px}
.hm-foot .hm-line .ico{color:var(--brand-2); flex:none}
.ico{display:block; flex:none; stroke:currentColor}
.hm-foot a{color:var(--brand-2); font-weight:700; text-decoration:none}
@media (max-width:520px){
  .ab-item{font-size:.82rem; padding:10px 4px}
  .ab-item svg{width:20px; height:20px}
}

/* ---------- 지도 ---------- */
.post-map{margin:34px 0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); animation:fadeUp .5s ease both}
.post-map iframe,.post-map .map-img{width:100%; height:360px; border:0; display:block; object-fit:cover}
.post-map .map-bar{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; background:var(--surface); flex-wrap:wrap}
.post-map .addr{display:inline-flex; align-items:center; gap:8px; font-size:.97rem; color:var(--ink)}
.post-map .addr svg{flex:none}
.post-map .addr b{font-weight:800; letter-spacing:-.02em}
.post-map .addr .tel{font-weight:800; color:var(--ink); font-family:var(--font-en); white-space:nowrap}
.post-map .addr .tel:hover{color:var(--brand)}
.post-map .map-links{display:inline-flex; gap:10px; flex-wrap:wrap}
.post-map .mlink{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem;
  padding:9px 16px; border-radius:999px; transition:.18s; letter-spacing:-.01em}
.post-map .mlink.g{background:var(--surface); color:var(--ink); border:1px solid var(--line-2)}
.post-map .mlink.g:hover{border-color:var(--muted-2); transform:translateY(-1px)}
.post-map .mlink.n{background:#03C75A; color:#fff; border:1px solid #03C75A}
.post-map .mlink.n:hover{background:#02b04f; transform:translateY(-1px)}
@media (max-width:600px){
  .post-map .map-bar{flex-direction:column; align-items:flex-start}
  .post-map .map-links{width:100%} .post-map .mlink{flex:1; justify-content:center}
}

/* ---------- 위로가기 (회색 · 은은하게) ---------- */
.to-top{position:fixed; right:22px; bottom:22px; z-index:60; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-2); background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--muted); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(16,18,22,.14); opacity:0; transform:translateY(14px) scale(.9);
  pointer-events:none; transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.3,1.3),color .2s,border-color .2s}
.to-top.show{opacity:1; transform:none; pointer-events:auto}
.to-top:hover{color:var(--ink); border-color:var(--muted-2); transform:translateY(-3px)}
:root[data-theme="dark"] .to-top{box-shadow:0 6px 20px rgba(0,0,0,.5)}
@media (max-width:600px){ .to-top{right:16px; bottom:16px; width:44px; height:44px} }

/* ---------- 진입 애니메이션 ---------- */
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
/* 카드 스크롤 등장 — 전부 아래에서 위로(가로 이동 없음 → 가로 스크롤 방지).
   JS(html.js-reveal)일 때만 초기 숨김 → no-JS·크롤러는 그대로 보임(SEO 안전) */
html.js-reveal .card.reveal{opacity:0; transform:translateY(42px);
  transition:opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1)}
html.js-reveal .card.reveal.in{opacity:1; transform:none}
/* 같은 줄은 왼→오 살짝 시차 등장 */
html.js-reveal .grid .card.reveal:nth-child(3n-1){transition-delay:.08s}
html.js-reveal .grid .card.reveal:nth-child(3n){transition-delay:.16s}
.post-head,.post-hero,.toc{animation:fadeUp .5s ease both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* ═══════════ 카카오톡 상담 플로팅 버튼 — 모바일 전용, 하단바 위 ═══════════ */
.kakao-fab{display:none}
@media (max-width:820px){
  .kakao-fab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    position:fixed;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:96;
    width:58px;height:58px;border-radius:50%;background:#fee500;color:#3c1e1e;
    box-shadow:0 6px 18px rgba(0,0,0,.22);font-size:.62rem;font-weight:800;letter-spacing:-.01em;
    transition:transform .2s}
  .kakao-fab:active{transform:scale(.94)}
  .kakao-fab svg{display:block}
}
/* 상담 플로팅 버튼이 있으면 위로가기(TOP)를 그 위로 올려 겹침 방지 (has-fab 은 JS 가 부여) */
@media (max-width:820px){
  body.has-abar.has-fab .to-top{bottom:calc(152px + env(safe-area-inset-bottom))}
}
/* 온라인 상담 폼 버전 플로팅 버튼 — 브랜드색 */
.kakao-fab.is-inq{background:var(--brand);color:#fff}
:root[data-theme="dark"] .kakao-fab.is-inq{color:#06231a}

/* ---------- 핵심 요약 (본문 위 인용 블록) ---------- */
.post-summary{background:var(--mint-2); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--radius-sm); padding:18px 22px; margin:0 0 30px}
.post-summary b{display:block; font-size:.82rem; letter-spacing:.08em; color:var(--brand-2);
  text-transform:uppercase; margin-bottom:7px}
.post-summary p{margin:0; font-size:1.02rem; line-height:1.75; color:var(--ink); font-weight:500}

/* 제작사 표기 — 병원 저작권 문구 뒤에 옅게 붙는다(본문 정보와 구분) */
.made-by{margin-left:8px; opacity:.62; font-size:.92em}
.made-by a{color:inherit; text-decoration:none; border-bottom:1px solid currentColor}
.made-by a:hover{opacity:.85}

/* ── 글 레이아웃 ── 기본형 / 우측 메뉴형 (관리자 > 블로그 설정)
   우측 메뉴형은 인기 글이 오른쪽에서 따라다닌다(sticky).
   좁은 화면에서는 따라다니지 않고 본문 아래로 내려간다. */
.post-layout{display:grid; grid-template-columns:minmax(0,1fr)}
/* align-items 를 start 로 두면 사이드 칸 높이가 내용만큼이라 sticky 가 따라다닐
   여백이 없다. 기본값(stretch)으로 둬서 칸이 본문 높이만큼 늘어나게 한다. */
.container.has-side .post-layout{grid-template-columns:minmax(0,1fr) 296px; gap:52px}
.post-main{min-width:0}
/* 글 본문을 카드(테두리 상자)로 감싸는 옵션 — 관리자 > 블로그 설정 */
.post-main.boxed{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:38px 42px 44px; box-shadow:var(--shadow-sm)}
.post-main.boxed .breadcrumb{margin-top:0}
@media(max-width:760px){
  .post-main.boxed{padding:24px 20px 30px; border-radius:var(--radius)}
}
.post-side{min-width:0; align-self:stretch}
.ps-stick{position:sticky; top:98px}
.ps-title{font-size:1.02rem; font-weight:800; letter-spacing:-.03em; margin:0 0 16px;
  padding-bottom:12px; border-bottom:2px solid var(--ink)}
.ps-list{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:20px}
.ps-list a{display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s}
.ps-list a:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2)}
.ps-thumb{display:block; width:100%; aspect-ratio:16/10; background:var(--surface-2); overflow:hidden}
.ps-thumb img{width:100%; height:100%; object-fit:cover; transition:.3s}
.ps-list a:hover .ps-thumb img{transform:scale(1.04)}
.ps-no{display:grid; place-items:center}
.ps-no b{font-family:var(--font-en); font-size:1.6rem; color:var(--muted-2)}
.ps-body{display:block; padding:16px 17px 18px}
.ps-name{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:1rem; font-weight:700; line-height:1.45; letter-spacing:-.025em}
.ps-list a:hover .ps-name{color:var(--brand)}
.ps-date{display:block; margin-top:11px; color:var(--muted-2); font-size:.85rem}
.ps-more{font-size:.86rem; font-weight:700; color:var(--muted)}
.ps-more:hover{color:var(--brand)}
@media(max-width:1024px){
  .container.has-side .post-layout{grid-template-columns:minmax(0,1fr); gap:0}
  .ps-stick{position:static}
  .post-side{margin-top:52px; padding-top:32px; border-top:1px solid var(--line)}
  .ps-list{flex-direction:row; flex-wrap:wrap; gap:18px}
  .ps-list li{flex:1 1 280px}
}