/* 두리 "원장님 칼럼" 블로그 — 홈피 디자인 토큰 복제(index.html :root 기준) */
:root{
  --point:#0ABAB5; --point-deep:#06807C; --ink:#1d2b2a; --gray:#6b7b79;
  --faint:#9fb0ae; --line:#ececec; --imgbg:#eef1f0; --bg:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Pretendard','Pretendard Variable',-apple-system,system-ui,sans-serif;
  color:var(--ink);background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}

/* 헤더 = 홈피 topbar 복제(경로만 절대경로화) */
.topbar{position:sticky;top:0;z-index:210;display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;background:#fff;border-bottom:1px solid var(--line)}
.topbar .brand{font-weight:800;font-size:21px;color:var(--point-deep);display:flex;align-items:center;gap:9px;text-decoration:none}
.topbar .brand .logo-c{height:22px;width:auto;display:block}
.topbar .logo-word-wrap{display:inline-flex;align-items:center;gap:0}
.topbar .logo-icon{height:26px;width:auto}
.topbar .logo-branch{height:20px;width:auto}
.topbar .ham{background:none;border:none;font-size:29px;cursor:pointer;color:var(--ink);line-height:1;padding:4px}
.dropmenu{display:none;position:fixed;top:72px;right:0;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.16);
  border-radius:0 0 0 14px;min-width:230px;overflow:hidden;z-index:215}
.dropmenu.open{display:block}
.dropmenu a{display:block;padding:16px 20px;text-decoration:none;color:var(--ink);font-weight:600;font-size:19.5px;border-bottom:1px solid var(--line)}
.dropmenu a:last-child{border-bottom:none}
.dropmenu a.on{color:var(--point);font-weight:800}

/* 레이아웃 */
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
@media(min-width:820px){.wrap{max-width:820px}}

/* 목록 인트로 */
.blog-intro{padding:44px 0 8px;text-align:center}
.blog-intro .eng{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--point);font-size:22px;letter-spacing:.03em;margin-bottom:6px}
.blog-intro h1{font-size:29px;letter-spacing:-.02em;line-height:1.25;color:var(--ink);text-wrap:balance}
.blog-intro p{color:var(--gray);font-size:15.5px;margin-top:12px;max-width:36ch;margin-left:auto;margin-right:auto}

/* 글 목록 카드 (정적 HTML — JS 렌더 아님) */
.post-list{display:flex;flex-direction:column;gap:16px;padding:26px 0 60px}
.card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:0 10px 30px rgba(10,186,181,.12);transform:translateY(-2px)}
.card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--imgbg)}
.card .body{padding:16px 18px}
.card .kw{display:inline-block;font-size:11.5px;font-weight:800;color:var(--point-deep);background:#e3f6f5;
  padding:3px 10px;border-radius:20px;margin-bottom:8px}
.card h2{font-size:19px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.card .sum{color:var(--gray);font-size:14px;margin-top:7px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{color:var(--faint);font-size:12.5px;margin-top:10px}

/* 빈 상태(첫 글 전) */
.empty{text-align:center;color:var(--gray);padding:50px 20px 70px}
.empty .ico{font-size:34px;margin-bottom:10px}
.empty b{color:var(--ink)}

/* 푸터(홈피엔 footer 없어 블로그용 신설 — NAP) */
.blog-footer{border-top:1px solid var(--line);background:#fafbfb;color:var(--gray);font-size:13px;line-height:1.8;padding:28px 20px 48px}
.blog-footer .in{max-width:820px;margin:0 auto}
.blog-footer b{color:var(--ink)}
.blog-footer a{color:var(--point-deep);text-decoration:none}
.blog-footer .row{margin-top:6px}

/* ── 개별 글(article) 스타일은 STEP 2에서 확장 ── */

/* ─────────── 칼럼 글 상세(article) · v2 ─────────── */
.article{ max-width:720px; margin:0 auto; padding:22px 18px 64px; }
.crumb{ font-size:13px; color:var(--gray); margin-bottom:12px; }
.crumb a{ color:var(--gray); text-decoration:none; }
.crumb a:hover{ color:var(--point-deep); }
.article h1{ font-size:25px; line-height:1.42; font-weight:800; color:var(--ink); margin:4px 0 16px; letter-spacing:-.02em; }
.lead-quote{ text-align:center; font-size:17px; font-weight:700; color:var(--point-deep); line-height:1.6; margin:0 0 22px; padding:16px 10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lead-quote::before{ content:"\201C"; display:block; font-family:'Cormorant Garamond',serif; font-size:38px; color:var(--point); line-height:.4; margin-bottom:6px; }
.byline{ font-size:13px; color:var(--gray); margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.byline b{ color:var(--ink); }
.byline .dates{ display:block; margin-top:5px; font-size:12px; }
.hero{ margin:0 0 24px; }
.hero img{ width:100%; border-radius:12px; display:block; }
.hero figcaption,.cap figcaption{ font-size:12px; color:var(--gray); margin-top:6px; text-align:center; }
.tldr{ background:#f3fbfa; border:1px solid #d9efec; border-left:3px solid var(--point); border-radius:10px; padding:15px 18px; margin:0 0 26px; }
.tldr b{ display:block; font-size:13px; color:var(--point-deep); margin-bottom:7px; }
.tldr ul{ margin:0; padding-left:18px; }
.tldr li{ font-size:15px; line-height:1.6; margin:4px 0; color:var(--ink); }
.intro p{ font-size:16px; line-height:1.85; color:var(--ink); margin:0 0 15px; }
.intro .patient-q{ font-weight:700; color:var(--point-deep); }
.body h2{ font-size:19px; font-weight:800; color:var(--ink); margin:34px 0 12px; padding-left:11px; border-left:4px solid var(--point); line-height:1.4; }
.body p{ font-size:16px; line-height:1.85; color:var(--ink); margin:0 0 14px; }
.body p.answer{ font-weight:700; }
.body mark{ background:linear-gradient(transparent 55%, #fff2a8 55%); padding:0 2px; }
.cap{ margin:18px 0; }
.cap img{ width:100%; border-radius:10px; display:block; }
.balance{ background:#fafafa; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:18px 0; font-size:15px; line-height:1.75; color:var(--gray); }
.balance b{ color:var(--ink); }
.summary{ background:#f7f9f9; border-radius:10px; padding:16px 18px; margin:30px 0 26px; }
.summary b{ display:block; font-size:14px; color:var(--point-deep); margin-bottom:8px; }
.summary ul{ margin:0; padding-left:18px; }
.summary li{ font-size:15px; line-height:1.65; margin:5px 0; }
.faq{ margin:30px 0; }
.faq h2{ font-size:18px; font-weight:800; color:var(--ink); margin:0 0 12px; }
.faq details{ border:1px solid var(--line); border-radius:10px; padding:13px 16px; margin:8px 0; }
.faq summary{ font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; }
.faq details p{ font-size:15px; line-height:1.75; color:var(--gray); margin:10px 0 0; }
.source{ font-size:12px; color:var(--gray); margin:20px 0; line-height:1.6; }
.related{ margin:30px 0; padding:16px 18px; background:#f7f9f9; border-radius:10px; }
.related b{ display:block; font-size:13px; color:var(--point-deep); margin-bottom:10px; }
.related a{ display:block; font-size:15px; color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:1px solid var(--line); }
.related a:last-child{ border-bottom:0; }
.related a::before{ content:"› "; color:var(--point); }
.yt{ margin:24px 0; }
.yt b{ display:block; font-size:13px; color:var(--gray); margin-bottom:8px; }
.yt-link{ display:inline-block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 16px; font-size:15px; font-weight:700; color:var(--ink); text-decoration:none; }
.cta{ text-align:center; background:#f3fbfa; border-radius:14px; padding:26px 20px; margin:34px 0 24px; }
.cta p{ font-size:16px; line-height:1.7; color:var(--ink); margin:0 0 16px; }
.cta-btn{ display:inline-block; background:var(--point); color:#fff; font-weight:800; font-size:16px; text-decoration:none; padding:14px 34px; border-radius:30px; }
.legal{ font-size:12px; color:var(--gray); line-height:1.7; margin:24px 0 0; padding-top:16px; border-top:1px solid var(--line); }
@media (max-width:480px){
  .article{ padding:18px 16px 56px; }
  .article h1{ font-size:22px; }
  .lead-quote{ font-size:16px; }
}
.cap-ph{ background:#eef3f2; border:1px dashed #b8ccc8; border-radius:10px; padding:26px 16px; text-align:center; color:var(--gray); font-size:13px; line-height:1.6; margin:16px 0; }
.hero-ph{ padding:44px 16px; margin-bottom:24px; font-size:14px; }