/*
 * column-single.css — 칼럼 상세 전면 개편 (2026-04-24)
 * 위닥스톡(single-wiki) 톤 통일 + 히어로 16:9 카드 + 우측 사이드바 + Speakable/TL;DR.
 * 네임스페이스: .column-article__* (기존 .single-col__* 와 공존 가능)
 */

/* ───────────────────── Layout ───────────────────── */
.column-article-page {
  background: var(--bg, #f6f8fb);
  /* min-height: 100vh 제거 — 콘텐츠가 짧을 때 footer 까지 거대한 빈 공간 만들던 원인.
     sticky footer 효과가 필요하면 body 레벨 flex 패턴으로 별도 처리. */
}

.column-article__breadcrumb-wrap {
  padding-top: 24px;
}

.column-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  padding-top: 20px;
  /* footer 와 섹션 사이 여백 축소 (기존 80px → 40px) */
  padding-bottom: 40px;
  max-width: 1200px;
  /* align-items: stretch (default) — 사이드바가 본문 끝까지 늘어나, 안의 sticky TOC 가
     본문 끝까지 따라오도록. 이전 `start` 는 사이드바를 자기 컨텐츠 높이로 한정해
     TOC sticky 가 사이드바 끝에서 멈추는 사고가 있었음. */
  align-items: stretch;
}

.column-article__main {
  min-width: 0;
}

.column-article__sidebar {
  /* aside 자체는 grid item — 본문 길이만큼 stretch 되어 그 안의 sticky wrapper 가
     본문 끝까지 따라오는 영역이 된다. flex/gap 은 내부 sticky wrapper 가 통제. */
  display: block;
}

/* 사이드바 안의 모든 보조 카드(좋아요 액션 / 목차 / 같은 분야 다른 칼럼 / 질문 CTA)를 한 묶음으로
   본문 스크롤에 따라 같이 따라오게 한다. viewport 보다 길어지면 wrapper 내부에서 스크롤. */
.column-article__sidebar-sticky {
  position: sticky;
  top: 84px; /* 헤더(약 84px) 아래에 고정 — 기존 TOC 카드와 동일 offset */
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  /* layout shift 방지 — 스크롤바 자리 미리 확보 */
  scrollbar-gutter: stable;
  /* sticky 영역이 wrapper 밖으로 시각 누출되는 것 방지 */
  padding-right: 2px;
}
/* 스크롤바 톤다운 (Chromium/WebKit) */
.column-article__sidebar-sticky::-webkit-scrollbar { width: 6px; }
.column-article__sidebar-sticky::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12);
  border-radius: 3px;
}
.column-article__sidebar-sticky::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.22); }
.column-article__sidebar-sticky { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,0.18) transparent; }

/* ───────────────────── Header ───────────────────── */
.column-article__header {
  margin-bottom: 24px;
}

.column-article__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  align-items: center;
}

.column-article__badges .badge--accent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.column-article__title {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text, #1a202c);
  margin: 0 0 10px;
  word-break: keep-all;
}

/* H1 직하 콘텐츠 메타 — 작성자 프로필과 분리, 읽는 시간 + 조회수 chip. flex-wrap 으로 좁은 화면에서 자연 줄바꿈. */
.column-article__head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12.5px;
  color: var(--text-muted, #6b7785);
  margin: 0 0 16px;
  line-height: 1.4;
}
.column-article__head-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.column-article__head-meta svg { flex-shrink: 0; opacity: .85; }
/* 좁은 폰(≤480px)에서 separator 가 줄바꿈 첫 문자로 떠 보이지 않도록 숨김 — chip 간 gap 만으로 시각 분리. */
@media (max-width: 480px) {
  .column-article__head-meta .column-article__meta-sep { display: none; }
}

.column-article__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-sub, #4a5568);
  margin: 0 0 22px;
  padding: 14px 18px;
  border-left: 3px solid var(--primary, #1a5fb4);
  background: rgba(26, 95, 180, 0.04);
  border-radius: 0 10px 10px 0;
  word-break: keep-all;
}

.column-article__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--border, #e5e8ef);
  border-bottom: 1px solid var(--border, #e5e8ef);
}

.column-article__author-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.column-article__author-link:hover .column-article__author-name {
  color: var(--primary, #1a5fb4);
}

.column-article__author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  /* 기존 등록 사진(얼굴이 사진 위쪽에 위치)을 안전하게 표시. 신규 업로드는 1:1 크롭 적용분이라 영향 없음. */
  object-position: center 28%;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--border, #e5e8ef);
}

.column-article__author-info {
  flex: 1;
  min-width: 0;
}

.column-article__author-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1a202c);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  transition: color 0.15s;
}

.column-article__author-verified {
  vertical-align: middle;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.column-article__author-meta {
  font-size: 12.5px;
  color: var(--text-sub, #6b7280);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  line-height: 1.5;
}

.column-article__meta-sep {
  color: var(--border, #cbd5e0);
}

.column-article__header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* 본인 글 관리 액션 — 수정·삭제. 본문/태그 다 읽은 뒤 노출(채널 SNS 직전).
   PC: 우측 정렬 가로 인라인. 모바일(≤640px): 동일 폭 2-col, 터치 타깃 확보. */
.column-article__manage-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* 큰 섹션 일관 마진 — PC 32px (manage/tldr/body/doctor/channels/related 통일) */
  margin: 32px 0;
}
.column-article__manage-actions .btn { min-width: 88px; }
@media (max-width: 640px) {
  .column-article__manage-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 20px 0 14px;
  }
  .column-article__manage-actions .btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }
}

/* ───────────────────── TL;DR Q&A ───────────────────── */
.column-article__tldr {
  margin: 32px 0;
  padding: 22px 24px;
  border-radius: 14px;
  background: rgba(26, 95, 180, 0.05);
  border: 1px solid rgba(26, 95, 180, 0.12);
}

.column-article__tldr-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary, #1a5fb4);
  margin: 0 0 16px;
}

.column-article__tldr-list { margin: 0; }

.column-article__tldr-item + .column-article__tldr-item {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border, #e5e8ef);
}

.column-article__tldr-q {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text, #1a202c);
  margin-bottom: 6px;
  padding-left: 26px;
  position: relative;
  line-height: 1.5;
  word-break: keep-all;
}

.column-article__tldr-q::before {
  content: 'Q';
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary, #1a5fb4);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.column-article__tldr-a {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-sub, #4a5568);
  margin: 0;
  padding-left: 26px;
  position: relative;
  word-break: keep-all;
}

.column-article__tldr-a::before {
  content: 'A';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent, #1a9e8f);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ───────────────────── Disclaimer (sc-disclaimer override) ─────────────────────
   pages-extension.css 의 base `.sc-disclaimer { margin: 28px 0 0 }` 보다 더 specific
   하게 칼럼 상세에서 위 마진 대폭 축소(28 → 8). body 위 마진도 더 줄임. */
.column-article-page .sc-disclaimer {
  margin: 8px 0 0;
}

/* ───────────────────── Body ───────────────────── */
.column-article__body {
  font-size: 17px;
  line-height: 1.85;
  color: var(--text, #2d3748);
  /* top 8: disclaimer 와 본문 컴팩트 (보존). bottom 32: 다음 섹션과 일관 간격. */
  margin: 8px 0 32px;
  /* 모바일 가로 오버플로우 방어 — 작성자가 붙여넣은 긴 URL · 영문 문자열 · 임베드가
     viewport 폭을 뚫고 나가지 않도록. 한글 어절은 keep-all 로 보존. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}
/* 본문 직계 자식 일괄 가드 — figure/div/ul/ol/hr 등 위 picture/iframe/table 규칙에 잡히지
   않는 요소가 인라인 style 로 폭을 넘기지 못하도록. */
.column-article__body > * {
  max-width: 100%;
}

/* 본문 내 미디어/임베드 — 작성자 직접 삽입한 picture · iframe 도 모두 컨테이너 폭 안에
   맞도록 강제. 위 main.css 의 `.wp-content iframe[src*="youtube"]` 등은 영상 호스트만
   잡으므로, 그 외 임의 iframe (Twitter · Instagram · 지도 · 외부 위젯) 까지 보호. */
.column-article__body picture {
  display: block;
  max-width: 100%;
}
.column-article__body picture img {
  display: block;
  max-width: 100%;
  height: auto;
}
.column-article__body iframe,
.column-article__body embed,
.column-article__body object,
.column-article__body video {
  max-width: 100%;
  box-sizing: border-box;
}
.column-article__body pre,
.column-article__body code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
/* 표 레이아웃 — TinyMCE 가 td/th 에 인라인 width/height(%, px) 를 자동으로 박아넣어
   데스크톱에서 표가 좁고 행 높이가 19px 로 찌그러지던 문제 보정.
   기본은 정상 table 레이아웃 + width 100% 강제, 좁은 화면에서만 가로 스크롤 fallback. */
.column-article__body table {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  border-collapse: collapse;
  table-layout: auto;
  margin: 16px 0;
}
.column-article__body table th,
.column-article__body table td {
  height: auto !important;
  padding: 8px 10px;
  word-break: break-word;
  vertical-align: middle;
}
/* 작성자가 헤더 행(<tr>)에 인라인 background(진한 네이비 등)를 준 표 한정 보정.
   전역 `.sc-content th { background: var(--muted) }`(pages-extension.css)가 셀을 밝게
   덮어, 행 배경이 가려지고 흰 글자만 남아 안 보이던 문제를 셀을 투명으로 되돌려 해결한다
   → 글쓰기(TinyMCE) 화면과 동일. `tr[style*="background"]` 로 인라인 배경을 준 행에만
   적용하므로, 배경을 안 준 일반 표의 회색 헤더 음영은 그대로 유지된다(무회귀).
   셀에 직접 준 인라인 배경은 인라인 우선순위로 그대로 노출된다. */
.column-article__body table tr[style*="background"] th,
.column-article__body table tr[style*="background"] td {
  background-color: transparent;
}
@media (max-width: 768px) {
  .column-article__body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 작성자/저작권 안내 — 본문의 "본 칼럼은 …" 패턴(H2 · p · strong 변형)을
   widocs-core 의 `authorship-h2-cleanup` 필터가 동일 박스로 통일 변환. 저장 시점 강등 <p> 도 포함. */
.column-article__body .column-article__authorship {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: #f6f8fb;
  border-left: 3px solid #cbd5e1;
  border-radius: 4px;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.65;
}
.column-article__body .column-article__authorship p {
  margin: 0;
}
.column-article__body .column-article__authorship p + p {
  margin-top: 6px;
}

.column-article__body h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 44px 0 14px;
  line-height: 1.4;
  scroll-margin-top: 90px;
}

.column-article__body h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 10px;
  line-height: 1.5;
  scroll-margin-top: 90px;
}

.column-article__body p { margin: 0 0 16px; }

.column-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 14px 0;
}

/* ───────────────────── 본문 이미지 워터마크 (widocs.com) ─────────────────────
   .col-img-wm 래퍼는 bootstrap.php 의 the_content 필터(widocs_wrap_column_images_watermark)가
   본문 모든 <img> 에 부착한다. 워터마크 노출은 칼럼 상세 본문(.column-article__body)으로만 한정 —
   위키/페이지 등 다른 본문에서는 스팬이 inert 하게 남아 시각 변화 없음.
   파일에 굽는 게 아니라 표시 시점에 CSS 로 얹는 방식이라, webp picture 교체·복붙(base64) 이미지에도
   동일하게 적용된다. pointer-events:none 으로 이미지 링크/확대 동작 방해 없음. */
.column-article__body .col-img-wm {
  display: block;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  /* 세로 여백을 래퍼가 가져가고 내부 이미지 자체 마진은 제거(이중 여백 방지) */
  margin: 14px 0;
}
.column-article__body .col-img-wm img,
.column-article__body .col-img-wm picture {
  margin: 0;
}
.column-article__body .col-img-wm::after {
  content: "widocs.com";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(15, 23, 42, 0.34);
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .column-article__body .col-img-wm::after {
    right: 7px;
    bottom: 7px;
    padding: 2px 6px;
    font-size: 10.5px;
  }
}

.column-article__body blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--accent, #1a9e8f);
  background: rgba(26, 158, 143, 0.05);
  border-radius: 0 10px 10px 0;
  color: var(--text-sub, #4a5568);
  font-style: italic;
}

.column-article__body ul,
.column-article__body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.column-article__body ul { list-style: disc; }
.column-article__body ol { list-style: decimal; }
.column-article__body ul ul { list-style: circle; }
.column-article__body ul ul ul { list-style: square; }
.column-article__body li { display: list-item; }

.column-article__body li + li { margin-top: 6px; }

.column-article__body a {
  color: var(--primary, #1a5fb4);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ───────────────────── Tags ───────────────────── */
.column-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0;
}

/* ───────────────────── Official channels (단일 중립 톤 chip — 인스타·유튜브·블로그·페북·카카오·스레드) ───────────────────── */
/* 이전엔 SNS 별 공식 브랜드 컬러 6종(빨강/파랑/노랑/그라데이션 등)으로 채워 본문 톤과 어긋나는 알록달록 인상.
   본문 가독성/위닥스 사이트 톤 통일을 위해 모두 흰 카드 + 보더 + 회색 글자로 통일.
   브랜드 인지는 SVG 모양만으로 충분 — fill=currentColor 라 글자색 따라감. */
.column-article__channels {
  margin: 32px 0;
}
.column-article__channels-caption {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-sub, #4a5568);
  letter-spacing: -.005em;
}
/* chip 그리드 — PC 3×2, ≤768 2×3. 모든 chip 폭 동일 stretch. */
.column-article__channels-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.column-article__channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border, #e5eaf2);
  border-radius: 10px;
  color: var(--text-sub, #4a5568);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: border-color var(--transition, .15s), background var(--transition, .15s), color var(--transition, .15s);
}
.column-article__channel-btn:hover {
  border-color: var(--primary, #1a5fb4);
  background: var(--primary-light, #eef4fc);
  color: var(--primary, #1a5fb4);
}
.column-article__channel-btn:focus-visible {
  outline: 2px solid var(--primary, #1a5fb4);
  outline-offset: 2px;
}
.column-article__channel-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: block;
}
.column-article__channel-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ───────────────────── Doctor card ───────────────────── */
.column-article__doctor-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 28px 26px 30px;
  margin: 40px 0;
  background: #ffffff;
  border: 1px solid #dde7f4;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}

/* 상단 가로 그라데이션 액센트 라인 (좌측 strip → 상단 bar) */
.column-article__doctor-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary, #1a5fb4) 0%, #4c8be0 55%, #7ab0ed 100%);
  z-index: 1;
}

/* 우측 상단 살짝 빛나는 원형 글로우 — 카드에 입체감 */
.column-article__doctor-card::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 180px;
  height: 180px;
  background: none;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.column-article__doctor-card > * {
  position: relative;
  z-index: 1;
}

.column-article__doctor-avatar {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
  flex-shrink: 0;
  border: 4px solid #fff;
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(26, 95, 180, 0.10);
}

.column-article__doctor-body { flex: 1; min-width: 0; }

.column-article__doctor-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  background: linear-gradient(135deg, rgba(26, 95, 180, 0.10), rgba(76, 139, 224, 0.14));
  border: 1px solid rgba(26, 95, 180, 0.14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary, #1a5fb4);
  letter-spacing: 0.02em;
  margin-bottom: 9px;
}

.column-article__doctor-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #1a202c);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  letter-spacing: -0.015em;
}

.column-article__doctor-verify {
  font-size: 10px !important;
  padding: 2px 7px !important;
}

.column-article__doctor-spec {
  font-size: 13px;
  color: var(--text-sub, #6b7280);
  margin-bottom: 10px;
}

/* 칼럼 → 작성 의료진 소속 병원 링크 (2026-06-30, 병원↔칼럼 삼각구조) */
.column-article__doctor-hospital {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
}
.column-article__doctor-hospital-label {
  color: var(--text-sub, #6b7280);
}
.column-article__doctor-hospital-link {
  font-weight: 700;
  color: var(--primary, #0c87a5);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}
.column-article__doctor-hospital-link:hover {
  border-bottom-color: currentColor;
}

.column-article__doctor-bio {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-sub, #4a5568);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.column-article__doctor-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.column-article__doctor-stats > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  color: var(--text-sub, #6b7280);
}

.column-article__doctor-stats strong {
  color: var(--text, #1a202c);
  font-weight: 700;
}

.column-article__doctor-cta {
  flex-shrink: 0;
  align-self: center;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary, #1a5fb4) 0%, #2c7dd6 100%);
  border-color: transparent;
  color: #ffffff;
  font-weight: 700;
  border-radius: 10px;
  box-shadow:
    0 4px 12px rgba(26, 95, 180, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* `::after` 화살표 아이콘 제거 — 사용자 피드백. 텍스트("프로필 보기")만 노출. */

.column-article__doctor-cta:hover,
.column-article__doctor-cta:focus-visible {
  background: linear-gradient(135deg, #15549f 0%, #2270c8 100%);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(26, 95, 180, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* ───────────────────── Prev / Next post nav ───────────────────── */
/* 이전 글(위) · 다음 글(아래) — 각 항목이 전체 폭 한 줄. 방향 pill + 제목(말줄임). */
.column-article__postnav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}
.column-article__postnav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--border, #e5e8ef);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color var(--transition, .15s), background var(--transition, .15s),
              box-shadow var(--transition, .15s), transform var(--transition, .15s);
}
a.column-article__postnav-link:hover {
  border-color: var(--primary, #1a5fb4);
  background: var(--primary-light, #eef4fc);
}
a.column-article__postnav-link--prev:hover { transform: translateX(-2px); }
a.column-article__postnav-link--next:hover { transform: translateX(2px); }
a.column-article__postnav-link:focus-visible {
  outline: 2px solid var(--primary, #1a5fb4);
  outline-offset: 2px;
}
/* 방향 라벨 — 작은 pill (이전/다음 + 화살표) */
.column-article__postnav-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 78px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary-light, #eef4fc);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary, #1a5fb4);
  white-space: nowrap;
}
.column-article__postnav-arrow { flex: 0 0 auto; }
/* 제목 — 한 줄, 넘치면 말줄임 */
.column-article__postnav-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text, #1a202c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .column-article__postnav-link {
    gap: 10px;
    padding: 12px 14px;
  }
  .column-article__postnav-dir {
    min-width: 0;
    padding: 4px 9px;
    font-size: 12px;
  }
  .column-article__postnav-title { font-size: 13.5px; }
}

/* ───────────────────── Related columns ───────────────────── */
.column-article__related {
  margin-top: 32px;
}

.column-article__related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.column-article__related-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #1a202c);
  margin: 0 0 4px;
}

.column-article__related-sub {
  font-size: 13px;
  color: var(--text-sub, #6b7280);
  margin: 0;
}

.column-article__related-health {
  margin-top: 28px;
}

/* ───────────────────── Sidebar — Action card ───────────────────── */
.column-article__action-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 좋아요 박스 — 둥근 아이콘 + 평가 문구(과거 .column-article__feedback 디자인을 사이드바 카드 톤에 맞춰 흡수). */
.column-article__action-like {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: var(--text, #1a202c);
  cursor: pointer;
  text-align: left;
}

/* 기본은 중립 톤(회색 보더/아이콘) — 활성 상태(좋아요 누른 후 .is-liked) 와 명확히 구분. hover 는 가벼운 단서만(보더 강조), 클릭 후에만 primary 채움. */
.column-article__action-like-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #e5e8ef);
  background: #fff;
  color: var(--text-muted, #6b7785);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition, .15s), color var(--transition, .15s), border-color var(--transition, .15s);
}
.column-article__action-like-icon svg { display: block; }

.column-article__action-like:hover .column-article__action-like-icon {
  border-color: var(--primary, #1a5fb4);
  color: var(--primary, #1a5fb4);
}

/* pages-extension.css 의 글로벌 `.sc-like-btn.is-liked` 룰(버튼 배경/보더/글자/box-shadow + `> span` / `span[data-like-count]` 흰색) 이 본 박스의 카드 톤·텍스트 가독성을 망가뜨려, 칼럼 상세에서는 스코프 override 로 모두 원복. 활성 단서는 SVG(thumbs up) 색·채움만으로 표현. */
.column-article__action-like.sc-like-btn.is-liked {
  background: transparent;
  border: 0;
  color: var(--text, #1a202c);
  box-shadow: none;
}
.column-article__action-like.sc-like-btn.is-liked .column-article__action-like-text { color: var(--text, #1a202c); }
.column-article__action-like.sc-like-btn.is-liked .column-article__action-like-title { color: var(--text, #1a202c); }
.column-article__action-like.sc-like-btn.is-liked .column-article__action-like-sub { color: var(--text-sub, #6b7280); }
/* sub 안 N 숫자(span[data-like-count]) — 글로벌 is-liked 룰이 color:#fff + 반투명 흰 칩 배경(rgba(255,255,255,.22)) 으로 교체해
   흰 카드 톤 위에서 글자/배경 모두 묻혀 사라지던 문제. color 는 sub 따라가게 + 배경은 누르기 전 톤(--primary-light) 그대로 유지. */
.column-article__action-like.sc-like-btn.is-liked [data-like-count] {
  color: inherit;
  background: var(--primary-light, #e3efff);
}
.column-article__action-like.sc-like-btn.is-liked .column-article__action-like-icon {
  /* 배경·보더는 기본 톤 유지 — 활성 단서는 SVG 색·채움만으로. specificity 강화로 글로벌 `.sc-like-btn.is-liked > span { color:#fff }` override. */
  color: var(--primary, #1a5fb4);
}
.column-article__action-like.is-liked .column-article__action-like-icon svg { fill: currentColor; }

.column-article__action-like-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.column-article__action-like-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text, #1a202c);
}

.column-article__action-like-sub {
  font-size: 12px;
  color: var(--text-sub, #6b7280);
  margin-top: 2px;
}

.column-article__action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.column-article__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border, #e5e8ef);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-sub, #4a5568);
  cursor: pointer;
  transition: all 0.15s;
}

.column-article__action-btn:hover,
.column-article__action-btn.is-active {
  border-color: var(--primary, #1a5fb4);
  color: var(--primary, #1a5fb4);
}

/* ───────────────────── Sidebar — TOC (목차) ─────────────────────
   사이드바 위쪽에 위치하는 "이 글의 목차" 카드.
   "같은 분야 다른 칼럼" 카드(--related)와 톤 통일.

   sticky 동작은 상위 wrapper(.column-article__sidebar-sticky) 가 통합으로 통제 —
   사이드바 카드 4개(액션·목차·관련·CTA)가 한 묶음으로 따라온다. TOC 카드 자체 sticky 는 해제.
   TOC nav 가 길어지면 sticky wrapper 의 overflow-y 가 통째로 스크롤한다. */
.wiki-sidebar-card--toc {
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
}

.wiki-sidebar-card--toc .wiki-sidebar-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.wiki-sidebar-card--toc .wiki-sidebar-card__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #0f172a);
  letter-spacing: -0.01em;
}
.wiki-sidebar-card--toc .wiki-sidebar-card__title svg {
  color: var(--primary, #2563eb);
  flex-shrink: 0;
}
.wiki-sidebar-card--toc .wiki-sidebar-card__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, .08);
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ───────────────────── Sidebar — 같은 분야(관련 칼럼) ─────────────────────
   기본 .wiki-sidebar-card 컴포넌트(위닥스톡 상세에서도 공유) 는 그대로 두고,
   --related modifier 가 붙은 경우만 카드 톤·아이템 디자인을 더 다듬어 적용.
*/
.wiki-sidebar-card--related { padding: 16px 16px 8px; }

.wiki-sidebar-card--related .wiki-sidebar-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.wiki-sidebar-card--related .wiki-sidebar-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #0f172a);
  letter-spacing: -0.01em;
}
.wiki-sidebar-card--related .wiki-sidebar-card__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, .08);
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ── details/summary 접힘·펼침 ──
   <details> 기본 marker(▶) 제거 + summary 를 카드 헤더로 그대로 사용 + 우측 chevron 회전.
*/
.wiki-sidebar-card--collapsible {
  /* details 자체에 한 번 더 명시 — 기본 inline 동작 차단 */
  display: block;
}
.wiki-sidebar-card--collapsible > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  outline: none;
}
.wiki-sidebar-card--collapsible > summary::-webkit-details-marker { display: none; }
.wiki-sidebar-card--collapsible > summary::marker { content: ''; }
.wiki-sidebar-card--collapsible > summary:hover .wiki-sidebar-card__title {
  color: var(--primary, #2563eb);
}
.wiki-sidebar-card--collapsible > summary:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 접힘 상태에서는 헤더 하단 구분선 제거 — 콘텐츠 없이 줄만 떠 있는 어색함 회피 */
.wiki-sidebar-card--collapsible:not([open]) > summary {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* 우측 chevron — 펼침 시 180도 회전 */
.wiki-sidebar-card__chev {
  margin-left: auto;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
  transition: transform .2s ease, color .15s ease;
}
.wiki-sidebar-card--collapsible[open] > summary .wiki-sidebar-card__chev {
  transform: rotate(180deg);
  color: var(--primary, #2563eb);
}
.wiki-sidebar-card--collapsible > summary:hover .wiki-sidebar-card__chev {
  color: var(--primary, #2563eb);
}

.wiki-sidebar-card--related .wiki-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wiki-sidebar-card--related .wiki-sidebar-list__item {
  margin: 0;
  padding: 0;
  border-radius: 8px;
  transition: background-color .15s ease;
}
.wiki-sidebar-card--related .wiki-sidebar-list__item:hover {
  background: rgba(37, 99, 235, .04);
}
.wiki-sidebar-card--related .wiki-sidebar-list__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  text-decoration: none;
  color: inherit;
  font-weight: 400;
}
.wiki-sidebar-card--related .wiki-sidebar-list__index {
  flex: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
  padding-top: 1px;
  transition: color .15s ease;
}
.wiki-sidebar-card--related .wiki-sidebar-list__item:hover .wiki-sidebar-list__index {
  color: var(--primary, #2563eb);
}
.wiki-sidebar-card--related .wiki-sidebar-list__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wiki-sidebar-card--related .wiki-sidebar-list__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text, #0f172a);
  transition: color .15s ease;
  word-break: break-word;
}
.wiki-sidebar-card--related .wiki-sidebar-list__item:hover .wiki-sidebar-list__title {
  color: var(--primary, #2563eb);
}
.wiki-sidebar-card--related .wiki-sidebar-list__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wiki-sidebar-card--related .wiki-sidebar-list__meta time { color: inherit; }
.wiki-sidebar-card--related .wiki-sidebar-list__meta-sep {
  color: var(--border, #cbd5e1);
  font-weight: 600;
}
.wiki-sidebar-card--related .wiki-sidebar-list__meta-views { color: inherit; }

/* 모바일 — 폭 좁아져도 가독성·여백 유지 */
@media (max-width: 767px) {
  .wiki-sidebar-card--related { padding: 14px 14px 6px; }
  .wiki-sidebar-card--related .wiki-sidebar-list__link { padding: 9px 6px; gap: 9px; }
  .wiki-sidebar-card--related .wiki-sidebar-list__index { flex-basis: 16px; font-size: 11.5px; }
  .wiki-sidebar-card--related .wiki-sidebar-list__title { font-size: 12.5px; }
}

.column-article__toc-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* 데스크톱: 카드 max-height(calc 100vh - 110px) 가 통제 — flex:1 auto 로 헤더 외 나머지를 채우고
     항목이 많으면 nav 안에서만 스크롤. 모바일에서는 카드 sticky 가 비활성이라 nav 의 max-height 가 다시 통제. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  padding-right: 4px;
  /* 부드러운 스크롤바 (webkit) */
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .4) transparent;
}
.column-article__toc-nav::-webkit-scrollbar { width: 6px; }
.column-article__toc-nav::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .4);
  border-radius: 999px;
}
.column-article__toc-nav::-webkit-scrollbar-track { background: transparent; }

.column-article__toc-nav a {
  display: block;
  padding: 7px 10px 7px 12px;
  color: var(--text-sub, #4a5568);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color .12s, background-color .12s, border-color .12s;
  font-weight: 500;
  word-break: keep-all;
}

.column-article__toc-nav a:hover {
  color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, .04);
}

.column-article__toc-nav a.is-active {
  color: var(--primary, #2563eb);
  font-weight: 700;
  border-left-color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, .07);
}

/* H3 — 들여쓰기 + 폰트 살짝 축소 + 좌측 작은 도트 마커 */
.column-article__toc-nav a[data-depth="3"] {
  padding-left: 24px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted, #64748b);
  position: relative;
}
.column-article__toc-nav a[data-depth="3"]::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  opacity: .5;
  transform: translateY(-50%);
}
.column-article__toc-nav a[data-depth="3"]:hover,
.column-article__toc-nav a[data-depth="3"].is-active {
  color: var(--primary, #2563eb);
}

/* 모바일/태블릿 (≤1024px) — TOC 는 FAB(우하단 플로팅 버튼) + Bottom Sheet 패턴으로 처리.
   기존 inline 본문 위 배치는 폐기: 항목이 많을 때 본문 첫 단락과 겹쳐 보이고,
   본문 스크롤 시 화면 밖으로 사라져 scrollspy 가 무의미해지던 문제를 해결.
   JS(column-single.js) 가 #scTocNav 를 시트 내부로 옮기고 카드 원본은 숨김. */
@media (max-width: 1024px) {
  /* 사이드바의 TOC 카드 원본은 모바일에서 숨김 — 시트로 대체. */
  .column-article__toc-card { display: none !important; }

  /* === FAB (Floating Action Button) — 우하단 고정, JS 가 .is-ready 부착 시 노출.
     전역 .scroll-top(#scrollTop) 과 정확히 같은 위치에 깔리던 문제 → write-cta-fab 과
     동일한 플로팅 스택 변수 패턴(--float-*, --scroll-top-size) 으로 scroll-top 바로 위 슬롯에 배치. */
  .column-article__toc-fab {
    position: fixed;
    right: var(--float-right);
    bottom: calc(var(--float-bottom) + var(--scroll-top-size) + var(--float-gap) + env(safe-area-inset-bottom));
    width: var(--scroll-top-size);
    height: var(--scroll-top-size);
    border-radius: 12px;
    background: var(--primary, #2563eb);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-md, 0 8px 22px rgba(15,30,52,.22));
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(.92);
    transition: opacity .2s ease, transform .2s ease, background .15s ease;
  }
  .column-article__toc-fab.is-ready {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .column-article__toc-fab:hover {
    background: var(--primary-dark, #1d4ed8);
    transform: translateY(-3px);
  }
  .column-article__toc-fab svg { width: 20px; height: 20px; }
  .column-article__toc-fab__count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #fff;
    color: var(--primary, #2563eb);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /* === Backdrop === */
  .column-article__toc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,30,52,.45);
    z-index: 88;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .column-article__toc-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* === Bottom Sheet === */
  .column-article__toc-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 89;
    max-height: 70vh;
    background: var(--surface, #fff);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(15,30,52,.18);
    transform: translateY(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .column-article__toc-sheet.is-open { transform: translateY(0); }
  .column-article__toc-sheet__handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(15,30,52,.18);
    margin: 8px auto 0;
    flex: none;
  }
  .column-article__toc-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(15,30,52,.08);
    flex: none;
  }
  .column-article__toc-sheet__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--text, #1a202c);
  }
  .column-article__toc-sheet__title small {
    margin-left: 6px;
    color: var(--text-sub, #6b7280);
    font-weight: 500;
    font-size: 13px;
  }
  .column-article__toc-sheet__close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text-sub, #6b7280);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .column-article__toc-sheet__close:hover { background: rgba(15,30,52,.06); }
  .column-article__toc-sheet__body {
    overflow-y: auto;
    padding: 8px 12px 16px;
    -webkit-overflow-scrolling: touch;
  }
  /* 시트 안 TOC nav — 시트 자체가 높이를 제한하므로 nav 의 max-height 는 해제. */
  .column-article__toc-sheet .column-article__toc-nav {
    max-height: none;
    flex: none;
    overflow: visible;
  }
  /* body 스크롤 잠금 — 시트 오픈 시 JS 가 부착. */
  body.column-article__toc-sheet-open {
    overflow: hidden;
  }
}

/* 데스크톱(>1024px) — FAB / 시트 / 백드롭 마크업 자체는 JS 가 body 에 항상 두지만,
   화면에는 절대 노출되지 않도록 강제 숨김. */
@media (min-width: 1025px) {
  .column-article__toc-fab,
  .column-article__toc-backdrop,
  .column-article__toc-sheet { display: none !important; }
}

@media (max-width: 767px) {
  .column-article__toc-nav { font-size: 12.5px; }
  .column-article__toc-nav a { padding: 6px 8px 6px 10px; }
  .column-article__toc-nav a[data-depth="3"] { padding-left: 20px; }
  .column-article__toc-nav a[data-depth="3"]::before { left: 9px; }
}

/* ───────────────────── Sidebar — CTA ───────────────────── */
.column-article__cta-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.45;
  color: var(--text, #1a202c);
}

.column-article__cta-sub {
  font-size: 12px;
  color: var(--text-sub, #6b7280);
  margin: 0 0 12px;
  line-height: 1.5;
}

.column-article__cta-btn {
  width: 100%;
  text-align: center;
  display: block;
}

/* ───────────────────── Focus ring (a11y) ───────────────────── */
.column-article__action-like:focus-visible,
.column-article__action-btn:focus-visible {
  outline: 2px solid var(--primary, #1a5fb4);
  outline-offset: 2px;
}

/* ───────────────────── Responsive ───────────────────── */
@media (max-width: 1024px) {
  .column-article__layout {
    grid-template-columns: 1fr;
    /* 모바일 박스 간 일관 간격 — layout gap 만 사용. 각 박스 자체 self margin 은 0 처리. */
    gap: 24px;
  }
  /* 모바일 노출 순서 재배치 — main / sidebar 의 박스 경계를 display:contents 로 풀어 layout grid 의 직계 자식으로 만들고 order 로 재정렬.
     1) main 본문(헤더~의사 카드)  →  2) 좋아요 박스 + "이 주제로 질문" CTA  →  3) 관련 칼럼  →  4) 나머지 사이드바(TOC / 같은 분야).
     의도: 액션·CTA 가 관련 칼럼 위에서 노출되어 페이지 하단 너무 깊이 묻히지 않도록. */
  /* 모바일/태블릿 — 사이드바 sticky wrapper 도 함께 풀어 grid 자식들이 모두 layout 의 직접 자식이 되도록.
     이렇게 해야 main / sidebar / sidebar-sticky 어느 wrapper 도 끼지 않고 카드들이 order 규칙대로 재정렬된다. */
  .column-article__main,
  .column-article__sidebar,
  .column-article__sidebar-sticky {
    display: contents;
  }
  .column-article__main > * { order: 1; }
  .column-article__main > .column-article__related,
  .column-article__main > .column-article__related-health { order: 3; }
  /* display:contents 로 풀려 visually grid 자식이 되더라도 CSS 셀렉터는 wrapper 의 자식으로 매칭한다.
     order 규칙을 .sidebar > * 만 적용하면 wrapper 안의 카드들이 매칭 안 돼 기본 order(0) 로 떨어져
     본문(order 1) 위로 올라가는 사고가 발생 → sidebar-sticky > * 도 함께 적용. */
  .column-article__sidebar > *,
  .column-article__sidebar-sticky > * { order: 4; }
  .column-article__sidebar > .column-article__action-card,
  .column-article__sidebar-sticky > .column-article__action-card,
  .column-article__sidebar > .wiki-sidebar-card--cta,
  .column-article__sidebar-sticky > .wiki-sidebar-card--cta { order: 2; }
  /* 모바일 박스 간 일관 24px — 각 직계 자식의 self margin 제거, layout gap 만 적용.
     PC 에서 margin 32 등으로 시각 분리하던 값이 모바일에서 gap 24 와 합산되어 들쭉날쭉하던 문제 해소. */
  .column-article__main > *,
  .column-article__sidebar > *,
  .column-article__sidebar-sticky > * {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .column-article__breadcrumb-wrap { padding-top: 14px; }

  .column-article__layout {
    padding-top: 12px;
    /* footer 와 섹션 사이 여백 축소 (40px → 16px) — 작성자 영역 ~ footer 간격 최소화 */
    padding-bottom: 16px;
    gap: 24px;
  }

  /* disclaimer 위/아래 여백 — base 8px 보다 더 컴팩트 */
  .column-article-page .sc-disclaimer {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
  }
  /* 본문 시작 마진 — disclaimer 바로 다음 */
  .column-article-page .column-article__body {
    margin-top: 6px;
  }

  .column-article__title { font-size: 22px; }

  /* author 행 ~ disclaimer 사이 간격 축소 (header bottom 20→10) */
  .column-article__header { margin-bottom: 10px; }

  .column-article__author {
    flex-wrap: wrap;
    gap: 10px;
  }

  .column-article__author-link {
    flex: 1 1 100%;
    min-width: 0;
  }

  .column-article__header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .column-article__lead {
    font-size: 14.5px;
    padding: 12px 14px;
  }

  .column-article__body {
    font-size: 16px;
    line-height: 1.8;
    /* 모바일 — layout gap(24px) 만 사용하므로 self margin 제거 */
    margin-bottom: 0;
  }

  .column-article__body h2 {
    font-size: 20px;
    margin: 30px 0 12px;
  }

  .column-article__body h3 {
    font-size: 17px;
  }

  /* 큰 섹션 모바일 margin — ≤1024 의 layout gap(24px) + direct child margin 0 으로 통합 처리.
     여기선 별도 margin 룰 정의 안 함 (layout gap 만 사용). */

  /* 모바일 — 좁은 폭에서 flex-wrap 으로 인한 body/CTA 누락 방지.
     avatar→body→CTA 를 단순 세로 스택으로 통일(≤480 와 동일 패턴) 하고
     bio 2줄 클램프도 풀어 본문 잘림 해소. */
  .column-article__doctor-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-wrap: nowrap;
    padding: 24px 18px 22px;
    gap: 14px;
    margin: 32px 0;
  }

  .column-article__doctor-card .column-article__doctor-body {
    flex: 0 0 auto;
    width: 100%;
  }

  .column-article__doctor-avatar { width: 92px; height: 92px; }
  .column-article__doctor-name { justify-content: center; font-size: 17px; }
  .column-article__doctor-spec { margin-bottom: 8px; }

  .column-article__doctor-bio {
    text-align: center;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
  }

  .column-article__doctor-stats { justify-content: center; }

  .column-article__doctor-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    align-self: stretch;
    text-align: center;
    margin-top: 4px;
    padding: 12px 18px;
  }

  .column-article__channels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .column-article__channel-btn { min-height: 42px; padding: 9px 11px; font-size: 13px; }
  .column-article__channel-icon { width: 17px; height: 17px; }

  .column-article__tldr {
    padding: 18px 16px;
  }
}

@media (max-width: 480px) {
  .column-article__title { font-size: 20px; }
  .column-article__author-avatar { width: 56px; height: 56px; }
  /* 좁은 폰 — ≤768 의 세로 스택 베이스를 잇고 사이즈만 한 단계 더 컴팩트하게. */
  .column-article__doctor-card {
    padding: 22px 16px 20px;
    gap: 12px;
  }
  .column-article__doctor-avatar { width: 84px; height: 84px; }
  .column-article__doctor-label { margin-bottom: 8px; }
  .column-article__badges { gap: 5px; }
  .column-article__action-like-icon {
    width: 42px;
    height: 42px;
  }
  /* 좁은 폰 — disclaimer 위/아래 + footer 앞 padding 최소화 */
  .column-article-page .sc-disclaimer { margin-top: 4px; }
  .column-article-page .column-article__body { margin-top: 4px; }
  .column-article__layout { padding-bottom: 12px; }
  .column-article__header { margin-bottom: 8px; }
  /* SNS chip — 2×3 그리드 유지하면서 한 단계 더 컴팩트. 라벨이 좁은 폭에서 잘리지 않도록 padding 축소. */
  .column-article__channels-grid { gap: 6px; }
  .column-article__channel-btn { min-height: 38px; padding: 8px 10px; font-size: 12.5px; gap: 6px; }
  .column-article__channel-icon { width: 16px; height: 16px; }
}

/* ───────────────────── Print ───────────────────── */
@media print {
  .column-article__sidebar,
  .column-article__channels,
  .column-article__related,
  .column-article__header-actions,
  .column-article__manage-actions {
    display: none !important;
  }
  .column-article__body {
    font-size: 12pt;
    line-height: 1.55;
    color: #000;
  }
  .column-article__body h2 {
    color: #000;
  }
}

/* ───────────────────── Reduced motion ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .column-article__action-like,
  .column-article__action-btn,
  .column-article__channel-btn,
  .column-article__toc-nav a {
    transition: none;
  }
}

/* ───────────────────── Comments (2026-05-20) ─────────────────────
   의료/헬스 칼럼 본문 하단 댓글 영역. 마크업/세부 스타일은 wiki-comments.css 와 공유.
   본 블록은 섹션 컨테이너·헤더·로그인 프롬프트 등 칼럼 전용 레이아웃만 담당.
*/
.column-article__comments {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.column-article__comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.column-article__comments-title {
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.column-article__comments-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary, #2563eb);
}
.column-article__comment-form {
  margin-bottom: 22px;
}
.column-article__comment-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.column-article__comment-form-msg {
  margin-top: 6px;
  font-size: 12.5px;
  color: #dc3232;
}
.column-article__comments-login-prompt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 22px;
  background: var(--bg-sub, #f8f9fa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
}
.column-article__comments-login-prompt > svg { color: var(--text-sub); flex-shrink: 0; }
.column-article__comments-login-title {
  font-weight: 600;
  margin: 0 0 2px;
  font-size: 14px;
}
.column-article__comments-login-sub {
  font-size: 12.5px;
  color: var(--text-sub);
  margin: 0;
}
.column-article__comments-login-prompt > a { margin-left: auto; flex-shrink: 0; }
.column-article__comment-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.column-article__comments-empty {
  padding: 28px 16px;
  text-align: center;
  background: var(--bg-sub, #f8f9fa);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 10px;
  color: var(--text-sub);
  font-size: 13.5px;
}
@media (max-width: 640px) {
  .column-article__comments-login-prompt {
    flex-wrap: wrap;
  }
  .column-article__comments-login-prompt > a {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}
/* 인쇄 시 댓글 숨김 */
@media print {
  .column-article__comments { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-28 — 상세 페이지 구조/SEO 확장
 *  · 상단 카테고리/태그 chip 라인 (H1 위)
 *  · 업데이트 날짜 chip 톤 변형
 *  · 핵심 지표 4 카드 (히어로)
 *  · 본문 다음 인라인 상담 CTA
 *  · 참고 문헌 섹션
 *  · 사이드바 의사 프로필 미니 카드
 *  · 본문 작가용 3단 정보 카드 (.col-info-cards) — 호르몬·체크리스트 등
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── 상단 chip 라인 (H1 위) ─────────────────────────────────────────── */
.column-article__hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.column-article__hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--transition, .15s), color var(--transition, .15s), border-color var(--transition, .15s);
  white-space: nowrap;
}
.column-article__hero-chip--category {
  background: var(--primary, #1a5fb4);
  color: #fff;
}
.column-article__hero-chip--category:hover {
  background: #14528f;
  color: #fff;
}
.column-article__hero-chip--tag {
  background: rgba(26, 95, 180, 0.08);
  color: var(--primary, #1a5fb4);
  border: 1px solid rgba(26, 95, 180, 0.18);
}
.column-article__hero-chip--tag:hover {
  background: rgba(26, 95, 180, 0.14);
  border-color: rgba(26, 95, 180, 0.32);
}

/* 업데이트 날짜 chip — 발행일 chip 과 구분되도록 색만 살짝. */
.column-article__head-meta-chip--updated {
  color: var(--accent, #1a9e8f);
}
.column-article__head-meta-chip--updated svg { opacity: 1; }

/* ── 핵심 지표 4 카드 (히어로) ──────────────────────────────────────── */
.column-article__metrics {
  display: grid;
  gap: 10px;
  margin: 18px 0 22px;
}
.column-article__metrics--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.column-article__metrics--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.column-article__metrics--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.column-article__metrics--cols-1 { grid-template-columns: minmax(0, 1fr); }

.column-article__metric-card {
  position: relative;
  padding: 14px 14px 12px;
  background: #fff;
  border: 1px solid var(--border, #e5eaf2);
  border-radius: 12px;
  min-width: 0;
}
.column-article__metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, var(--primary, #1a5fb4), var(--accent, #1a9e8f));
}
.column-article__metric-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub, #6b7280);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.column-article__metric-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 4px;
}
.column-article__metric-value-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary, #1a5fb4);
  line-height: 1.15;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.column-article__metric-value-unit {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub, #6b7280);
}
.column-article__metric-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-sub, #6b7280);
  word-break: keep-all;
}

@media (max-width: 768px) {
  .column-article__metrics--cols-4,
  .column-article__metrics--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .column-article__metric-value-num { font-size: 20px; }
}
@media (max-width: 420px) {
  .column-article__metrics--cols-4,
  .column-article__metrics--cols-3,
  .column-article__metrics--cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ── 본문 다음 인라인 상담 CTA ──────────────────────────────────────── */
.column-article__inline-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0;
  padding: 20px 22px;
  background: rgba(26, 95, 180, 0.06);
  border: 1px solid rgba(26, 95, 180, 0.18);
  border-radius: 14px;
}
.column-article__inline-cta-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary, #1a5fb4);
  box-shadow: 0 2px 6px rgba(26, 95, 180, 0.12);
}
.column-article__inline-cta-text {
  flex: 1;
  min-width: 0;
}
.column-article__inline-cta-title {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text, #1a202c);
  line-height: 1.35;
  word-break: keep-all;
}
.column-article__inline-cta-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-sub, #4a5568);
  line-height: 1.5;
  word-break: keep-all;
}
.column-article__inline-cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
  /* 그라데이션 박스 배경이 옅어 기본 btn--primary 톤이 묻혀보이는 문제 보정 — 명시 강제. */
  background: var(--primary, #1a5fb4) !important;
  color: #fff !important;
  border: 1px solid var(--primary, #1a5fb4) !important;
  box-shadow: 0 2px 6px rgba(26, 95, 180, 0.25);
  padding: 10px 18px;
  font-weight: 700;
}
.column-article__inline-cta-btn:hover {
  background: #14528f !important;
  border-color: #14528f !important;
  color: #fff !important;
}
@media (max-width: 640px) {
  .column-article__inline-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 12px;
    padding: 18px 16px;
  }
  .column-article__inline-cta-icon { margin: 0 auto; }
  .column-article__inline-cta-btn { width: 100%; }
}

/* ── 참고 문헌 ─────────────────────────────────────────────────────── */
.column-article__references {
  margin: 32px 0;
  padding: 18px 20px;
  background: #f8fafc;
  border: 1px solid var(--border, #e5e8ef);
  border-radius: 12px;
}
.column-article__references-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1a202c);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.column-article__references-title svg {
  color: var(--text-sub, #6b7280);
  flex-shrink: 0;
}
.column-article__references-list {
  margin: 0;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-sub, #4a5568);
  word-break: keep-all;
}
.column-article__references-item + .column-article__references-item {
  margin-top: 4px;
}
.column-article__references-item a {
  color: var(--primary, #1a5fb4);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.column-article__references-item a:hover { color: #14528f; }

/* ── 사이드바 의사 프로필 미니 카드 ────────────────────────────────── */
.column-article__doctor-mini {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border, #e5eaf2);
  border-radius: 12px;
}
.column-article__doctor-mini-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-sub, #6b7280);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  text-transform: none;
}
.column-article__doctor-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.column-article__doctor-mini-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--border, #e5e8ef);
}
.column-article__doctor-mini-info {
  flex: 1;
  min-width: 0;
}
.column-article__doctor-mini-name {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1a202c);
  margin-bottom: 2px;
  line-height: 1.3;
}
.column-article__doctor-mini-verified {
  flex-shrink: 0;
}
.column-article__doctor-mini-spec {
  font-size: 11.5px;
  color: var(--text-sub, #6b7280);
  line-height: 1.4;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.column-article__doctor-mini-link {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary, #1a5fb4);
  text-align: right;
  text-decoration: none;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #e5e8ef);
}
.column-article__doctor-mini-link:hover { color: #14528f; }

/* ── "이 칼럼에서 알 수 있는 것" 키포인트 박스 ──────────────────── */
.column-article__keypoints {
  margin: 22px 0;
  padding: 18px 20px;
  background: rgba(26, 158, 143, 0.05);
  border: 1px solid rgba(26, 158, 143, 0.18);
  border-radius: 14px;
}
.column-article__keypoints-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark, #14776c);
  letter-spacing: -0.005em;
  line-height: 1.35;
  /* h2 글로벌 마진 영향 제거 */
  padding: 0;
}
.column-article__keypoints-title svg { color: var(--accent, #1a9e8f); flex-shrink: 0; }
.column-article__keypoints-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.column-article__keypoints-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text, #1a202c);
  word-break: keep-all;
}
.column-article__keypoints-icon {
  flex-shrink: 0;
  color: var(--accent, #1a9e8f);
  margin-top: 4px;
}

/* ── 본문 위 인라인 TOC (가로 grid) ────────────────────────────────
 * 사이드바 #scToc 와 별도 노드. PC 에서도 본문 위에 한 번 더 노출 → 진입 시 글 구조 파악.
 * 항목 수에 따라 2~3 cols 자동. 모바일은 1 col stack. */
.column-article__inline-toc {
  margin: 22px 0;
  padding: 16px 18px 12px;
  background: #fff;
  border: 1px solid var(--border, #e5eaf2);
  border-radius: 12px;
}
.column-article__inline-toc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub, #6b7280);
  letter-spacing: 0.02em;
}
.column-article__inline-toc-head svg { color: var(--text-sub, #6b7280); flex-shrink: 0; }
.column-article__inline-toc-title { font-size: 13.5px; color: var(--text, #1a202c); }
.column-article__inline-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 12px;
  counter-reset: ic-toc;
}
.column-article__inline-toc-item { min-width: 0; }
.column-article__inline-toc-link {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #1a202c);
  font-size: 13px;
  line-height: 1.45;
  transition: background var(--transition, .15s), color var(--transition, .15s);
  word-break: keep-all;
}
.column-article__inline-toc-link:hover {
  background: rgba(26, 95, 180, 0.06);
  color: var(--primary, #1a5fb4);
}
.column-article__inline-toc-link.is-active {
  background: rgba(26, 95, 180, 0.1);
  color: var(--primary, #1a5fb4);
  font-weight: 700;
}
.column-article__inline-toc-num {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #1a5fb4);
  letter-spacing: -0.02em;
  min-width: 1.5em;
}
.column-article__inline-toc-text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 768px) {
  .column-article__inline-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .column-article__inline-toc-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── 본문 중간 점선 상담 CTA (JS 자동 삽입) ────────────────────────
 * 본문 H2 사이에 자동 들어가는 부드러운 점선 박스. 본문 끝 인라인 CTA(.column-article__inline-cta) 와 톤 차별 — 더 약한 보더, 본문 흐름 방해 최소화. */
.column-article__midcta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  padding: 14px 16px;
  background: rgba(26, 95, 180, 0.03);
  border: 1.5px dashed rgba(26, 95, 180, 0.35);
  border-radius: 12px;
}
.column-article__midcta-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary, #1a5fb4);
  box-shadow: 0 1px 3px rgba(26, 95, 180, 0.08);
}
.column-article__midcta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.column-article__midcta-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1a202c);
  line-height: 1.35;
  word-break: keep-all;
}
.column-article__midcta-sub {
  font-size: 12.5px;
  color: var(--text-sub, #6b7280);
  line-height: 1.5;
  word-break: keep-all;
}
.column-article__midcta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  /* 점선 박스 톤다운 배경 안에서 버튼이 묻혀보이는 문제 보정 — 명시 강제. */
  background: var(--primary, #1a5fb4) !important;
  color: #fff !important;
  border: 1px solid var(--primary, #1a5fb4) !important;
  box-shadow: 0 2px 4px rgba(26, 95, 180, 0.2);
  padding: 8px 14px;
  font-weight: 700;
}
.column-article__midcta-btn:hover {
  background: #14528f !important;
  border-color: #14528f !important;
  color: #fff !important;
}
.column-article__midcta-btn svg { flex-shrink: 0; color: #fff; }
@media (max-width: 640px) {
  .column-article__midcta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 10px;
    padding: 16px;
  }
  .column-article__midcta-icon { margin: 0 auto; }
  .column-article__midcta-btn { width: 100%; justify-content: center; }
}

/* ── FAQ accordion (기존 .column-article__tldr 마크업을 details/summary 로 변환) ──
 * 기존 dl 마크업 시절의 `.column-article__tldr-q::before { content: 'Q' }` /
 * `.column-article__tldr-a::before { content: 'A' }` 는 그대로 유지하되,
 * summary/details 의 기본 marker 와 padding 충돌만 보정. */
.column-article__tldr--accordion .column-article__tldr-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.column-article__tldr--accordion .column-article__tldr-item {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(26, 95, 180, 0.18);
  border-top: 1px solid rgba(26, 95, 180, 0.18) !important; /* dl 시절 + .item dashed 보정 */
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.column-article__tldr--accordion .column-article__tldr-item + .column-article__tldr-item {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid rgba(26, 95, 180, 0.18) !important; /* dashed override */
}
.column-article__tldr--accordion .column-article__tldr-q {
  /* summary 기본 marker 제거 */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Q 원형 라벨(::before) 자리 + 우측 chev 공간 */
  padding: 14px 14px 14px 44px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1a202c);
  line-height: 1.5;
  position: relative;
  word-break: keep-all;
  background: rgba(26, 95, 180, 0.03);
  transition: background var(--transition, .15s);
}
.column-article__tldr--accordion .column-article__tldr-q::-webkit-details-marker { display: none; }
.column-article__tldr--accordion .column-article__tldr-q::before {
  /* 기존 dl 정의 시절 padding-left:26px 기준 → accordion 에선 44px 안쪽으로 위치 보정 */
  top: 13px;
  left: 14px;
}
.column-article__tldr--accordion .column-article__tldr-q:hover {
  background: rgba(26, 95, 180, 0.06);
}
.column-article__tldr--accordion .column-article__tldr-q-text {
  flex: 1;
  min-width: 0;
}
.column-article__tldr--accordion .column-article__tldr-chev {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--text-sub, #6b7280);
  transition: transform var(--transition, .2s);
}
.column-article__tldr--accordion .column-article__tldr-item[open] .column-article__tldr-chev {
  transform: rotate(180deg);
  color: var(--primary, #1a5fb4);
}
.column-article__tldr--accordion .column-article__tldr-a {
  margin: 0;
  padding: 14px 18px 16px 44px;
  background: #fff;
  border-top: 1px solid rgba(26, 95, 180, 0.1);
  /* A 원형 라벨(::before) 위치 보정 */
  position: relative;
}
.column-article__tldr--accordion .column-article__tldr-a::before {
  top: 14px;
  left: 14px;
}

/* ── 본문 작가용 3단 정보 카드 (.col-info-cards) ────────────────────
 * 작성자가 본문에 직접 삽입할 수 있는 구조:
 *   <div class="col-info-cards col-info-cards--3">
 *     <div class="col-info-card">
 *       <span class="col-info-card__tag">렙틴</span>
 *       <h4 class="col-info-card__title">포만감 호르몬</h4>
 *       <p class="col-info-card__body">지방 세포에서 분비되며 …</p>
 *     </div>
 *     …
 *   </div>
 * Gutenberg/Classic 양쪽 모두 raw HTML 블록으로 삽입 가능.
 *
 * 동일 마크업을 글쓰기 폼 "정보 카드(인포그래픽)" 입력 시 자동 렌더(.column-article__autocards)
 * 에서도 재사용 → 셀렉터를 .column-article__body 와 .column-article__autocards 양쪽 매칭. */
.column-article__autocards {
  margin: 28px 0 0;
}
.column-article__body .col-info-cards,
.column-article__autocards .col-info-cards {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.column-article__body .col-info-cards--2,
.column-article__autocards .col-info-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.column-article__body .col-info-cards--4,
.column-article__autocards .col-info-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.column-article__body .col-info-card,
.column-article__autocards .col-info-card {
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid var(--border, #e5eaf2);
  border-radius: 12px;
  min-width: 0;
}
.column-article__body .col-info-card__tag,
.column-article__autocards .col-info-card__tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--primary, #1a5fb4);
  background: rgba(26, 95, 180, 0.1);
  border-radius: 999px;
  margin-bottom: 8px;
}
.column-article__body .col-info-card__title,
.column-article__autocards .col-info-card__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1a202c);
  line-height: 1.35;
  word-break: keep-all;
  /* 본문 wp-content h4 글로벌 스타일 영향 제거 */
  scroll-margin-top: 0;
}
.column-article__body .col-info-card__body,
.column-article__autocards .col-info-card__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-sub, #4a5568);
  word-break: keep-all;
}
@media (max-width: 768px) {
  .column-article__body .col-info-cards,
  .column-article__autocards .col-info-cards,
  .column-article__body .col-info-cards--4,
  .column-article__autocards .col-info-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .column-article__body .col-info-cards,
  .column-article__autocards .col-info-cards,
  .column-article__body .col-info-cards--2,
  .column-article__autocards .col-info-cards--2,
  .column-article__body .col-info-cards--4,
  .column-article__autocards .col-info-cards--4 { grid-template-columns: minmax(0, 1fr); }
}