/* column.css — 자연산한의원 칼럼 매거진 레이아웃
   근거: Elle Korea 아티클 실측(본문 792px · line-height 2.0 · H1 36px center · H2 weight 500 · 이미지 970px bleed)
   이후 모든 칼럼이 이 파일을 공유한다. */

:root{
  --col-body-w: 792px;      /* 본문 폭 — Elle 실측 */
  --col-bleed-w: 970px;     /* 이미지 폭 — 본문보다 넓게 */
  --col-hero-w: 950px;
}

/* ── 컨테이너 ─────────────────────────────── */
.col-wrap{max-width:var(--col-body-w);margin:0 auto;padding:0 24px}
.col-bleed{max-width:var(--col-bleed-w);margin:0 auto;padding:0 24px}

/* ── 히어로: 풀블리드 이미지 + 오버레이 ───────── */
.col-hero{position:relative;min-height:clamp(420px,58vh,620px);display:flex;align-items:flex-end;
  overflow:hidden;background:#0E2B28}
.col-hero-bg{position:absolute;inset:0}
.col-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:32% center;display:block}
.col-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,43,40,.15) 0%,rgba(14,43,40,.20) 45%,rgba(14,43,40,.82) 100%)}
.col-hero-inner{position:relative;max-width:var(--col-hero-w);margin:0 auto;padding:0 24px 56px;width:100%;text-align:center}
.col-kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#A9CFC8;font-weight:700;margin-bottom:18px}
.col-hero h1{font-size:clamp(27px,3.6vw,36px);line-height:1.44;letter-spacing:-.016em;
  font-weight:700;color:#fff;margin:0 0 16px}
.col-dek{font-size:16px;line-height:1.62;color:rgba(255,255,255,.86);margin:0 auto;max-width:620px}
.col-by{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;font-size:13px;
  color:rgba(255,255,255,.72);margin-top:26px}
.col-by b{color:#fff;font-weight:600}


/* ── 히어로: 도식 변형 (인물 컷 없이 도식 + 아래 타이포) ───────
   근거: 자동 발행 칼럼은 인물 이미지를 쓰지 않는다. 도식이 커버를 겸한다.
   어두운 오버레이를 쓰지 않으므로 흰 배경 도식이 그대로 살아난다. */
.col-hero.diagram{display:block;min-height:0;background:var(--paper,#fffdf9);
  padding:0 0 8px;overflow:visible}
.col-hero.diagram .col-hero-bg{position:static;max-width:var(--col-hero-w);margin:0 auto;padding:34px 24px 0}
.col-hero.diagram .col-hero-bg img{width:100%;height:auto;object-fit:contain}
.col-hero.diagram .col-hero-bg::after{display:none}
.col-hero.diagram .col-hero-inner{padding:26px 24px 40px}
.col-hero.diagram .col-kicker{color:var(--teal-soft,#8FA98A)}
.col-hero.diagram h1{color:var(--teal,#1F4E4A)}
.col-hero.diagram .col-dek{color:#5F5F5F}
.col-hero.diagram .col-by{color:#8A8A8A;border-top:1px solid #DED6C8;padding-top:20px;
  max-width:620px;margin-left:auto;margin-right:auto}
.col-hero.diagram .col-by b{color:#1A1A1A}
@media(max-width:900px){
  .col-hero.diagram .col-hero-bg{padding:20px 16px 0}
  .col-hero.diagram .col-hero-inner{padding:20px 20px 32px}
}

/* ── 본문 타이포 ──────────────────────────── */
.col-body{padding-top:40px;padding-bottom:24px;font-size:16px;line-height:2.0;letter-spacing:-.01em;color:#1A1A1A}
.col-body p{margin:0 0 20px}
.col-body h2{clear:both;font-size:24px;line-height:1.46;font-weight:500;letter-spacing:-.016em;
  margin:44px 0 14px;display:flex;gap:14px;align-items:center}
.col-body h2 .n{font-family:Georgia,'Times New Roman',serif;font-size:34px;line-height:1;
  font-weight:400;color:var(--teal-soft,#8FA98A);flex:0 0 auto;letter-spacing:-.02em}
.col-body h3{font-size:18px;font-weight:600;margin:28px 0 8px;color:var(--teal,#1F4E4A)}

/* ── AEO 직답 블록 ────────────────────────── */
p.answer{background:#F5EFE6;border-left:3px solid var(--teal,#1F4E4A);
  padding:20px 24px;margin:0 0 22px;font-size:16px;line-height:1.9}
p.answer b{color:var(--teal,#1F4E4A);font-weight:600}

/* ── 보조 박스 ────────────────────────────── */
.easy,.caution{padding:18px 22px;margin:0 0 22px;font-size:15px;line-height:1.85;border-radius:2px}
.easy{background:#F2F7F3;border-left:3px solid #7FA98C}
.easy b{color:#2E6B47}
.caution{background:#FBF5EC;border-left:3px solid #C9A961}
.caution b{color:#8A6218}

/* ── 풀 인용 ──────────────────────────────── */
.pull{clear:both;font-family:Georgia,'Times New Roman',serif;font-size:26px;line-height:1.62;
  font-weight:400;color:var(--teal,#1F4E4A);text-align:center;
  border-top:1px solid #DED6C8;border-bottom:1px solid #DED6C8;
  padding:30px 20px;margin:40px 0}

/* ── 목차 ─────────────────────────────────── */
.col-toc{border-top:1px solid #DED6C8;border-bottom:1px solid #DED6C8;padding:22px 0;margin:0 0 12px}
.col-toc h3{margin:0 0 12px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-soft,#8FA98A);font-weight:700}
.col-toc ol{margin:0;padding-left:18px;font-size:15px;line-height:2.05;color:#5F5F5F}
.col-toc a{color:#1A1A1A;text-decoration:none}
.col-toc a:hover{color:var(--teal,#1F4E4A);text-decoration:underline}

/* ── 이미지 — bleed / duo / wrapfig ─────────── */
figure.fig{margin:32px 0}
figure.fig img,figure.fig svg{width:100%;height:auto;display:block}
figure.fig svg{background:#fff;border:1px solid #DED6C8}
figure.fig figcaption{font-size:13.5px;color:#5F5F5F;line-height:1.7;margin-top:12px;
  max-width:var(--col-body-w);margin-left:auto;margin-right:auto;padding:0 24px}
figure.fig .credit{display:block;font-size:11.5px;color:#9AA0A6;margin-top:5px;letter-spacing:.01em}

figure.bleed{clear:both;max-width:var(--col-bleed-w);margin-left:auto;margin-right:auto}
figure.bleed img{border-radius:2px}

.duo{max-width:var(--col-bleed-w);margin:32px auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo figure{margin:0}
.duo figcaption{padding:0;max-width:none}

figure.wrapfig{float:right;width:320px;margin:6px 0 24px 32px;shape-outside:margin-box}
figure.wrapfig figcaption{padding:0;max-width:none}

/* ── FAQ ──────────────────────────────────── */
dl.faq{margin:20px 0 0}
dl.faq dt{font-weight:600;color:var(--teal,#1F4E4A);margin:32px 0 8px;font-size:17px;line-height:1.6}
dl.faq dd{margin:0;color:#4A4A4A;line-height:1.9;font-size:15.5px}

/* ── 출처 ─────────────────────────────────── */
ol.sources{font-size:14px;line-height:1.85;color:#5F5F5F;padding-left:20px}
ol.sources li{margin:14px 0}
ol.sources a{color:var(--teal,#1F4E4A)}
.lab{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;
  margin-left:6px;vertical-align:middle;letter-spacing:.02em}
.l-sr{background:#E2F0E8;color:#245C3E}
.l-obs{background:#E4EDF5;color:#26506F}
.l-low{background:#FAF0DC;color:#8A6218}

/* ── CTA ──────────────────────────────────── */
.col-cta{clear:both;max-width:var(--col-bleed-w);margin:48px auto;background:var(--teal,#1F4E4A);
  color:#fff;padding:52px 48px;text-align:center}
.col-cta h3{margin:0 0 12px;color:#fff;font-size:23px;font-weight:500;line-height:1.5}
.col-cta p{margin:0 auto 26px;color:#CFE3DF;font-size:15px;line-height:1.8;max-width:520px}
.col-cta .pill{display:inline-block;background:#fff;color:var(--teal,#1F4E4A);
  padding:14px 30px;border-radius:100px;text-decoration:none;font-weight:600;font-size:15px}

/* ── 이어 읽기 · 면책 ─────────────────────── */
.col-next{display:block;border-top:1px solid #DED6C8;padding:22px 0;text-decoration:none;color:#1A1A1A;font-size:17px}
.col-next:last-of-type{border-bottom:1px solid #DED6C8}
.col-next span{display:block;font-size:12.5px;color:#8A8A8A;margin-top:5px;letter-spacing:.02em}
.col-next:hover{color:var(--teal,#1F4E4A)}
.disc{font-size:12.5px;color:#8A8A8A;line-height:1.85;border-top:1px solid #DED6C8;
  padding-top:22px;margin-top:40px}

/* ── 모바일 ───────────────────────────────── */
@media(max-width:900px){
  .col-body{font-size:15.5px;line-height:1.92;padding-top:40px}
  .col-body h2{font-size:21px;margin:36px 0 12px;gap:10px}
  .col-body h2 .n{font-size:27px}
  .pull{font-size:20px;padding:26px 12px;margin:32px 0}
  .duo{grid-template-columns:1fr;gap:28px}
  figure.wrapfig{float:none;width:100%;margin:32px 0}
  .col-cta{padding:40px 26px;margin:48px auto}
  figure.fig figcaption{padding:0 4px}
}

/* 섹션 첫 h2 상단 마진 중복 방지 */
.col-body section:first-of-type > h2:first-child{margin-top:28px}
.col-body section > h2:first-child{margin-top:44px}

/* ── 치료 사례 갤러리 ───────────────────────── */
.cases{clear:both;max-width:var(--col-bleed-w);margin:36px auto 8px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cases figure{margin:0}
.cases img{width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid #DED6C8;box-shadow:0 6px 20px rgba(40,72,73,.08);background:#fff}
.cases figcaption{margin:9px 2px 0;font-size:13px;line-height:1.6;color:#6A6A6A}
.cases figcaption b{color:var(--teal,#1F4E4A);font-weight:600}
.case-note{clear:both;max-width:var(--col-body-w);margin:14px auto 0;padding:0 24px;
  font-size:12.5px;line-height:1.8;color:#8A8A8A}
@media(max-width:900px){.cases{grid-template-columns:repeat(2,1fr);gap:12px;padding:0 20px}}
@media(max-width:540px){.cases{grid-template-columns:1fr}}

.cases.n1{grid-template-columns:minmax(0,520px);justify-content:center}
.cases.n2{grid-template-columns:repeat(2,1fr);max-width:1040px}