@charset "UTF-8";

/**
 * Medical Column Design System
 * Project: 닥터뉴셀의원
 * Project ID: dr-newcell
 * Theme: dr-newcell
 * Host: imweb
 * Formats: default, minimal, soft-card, editorial, outline, band, elevated, glow, gradient, duotone, iridescent, spotlight, vignette, metallic, matte, floating, blob, organic-shapes, grid, paper, maximal, brutal, neo-brutal, vintage, bold
 *
 * Generated file. Do not edit directly.
 */

/* ==========================================================================
   COMMON
   ========================================================================== */

/**
 * Column - Common CSS
 *
 * 역할:
 * - HTML 컴포넌트의 공통 구조
 * - 기본 typography / layout / responsive 동작
 * - Theme / Format에서 사용하는 기본 CSS Variables
 *
 * 포함하지 않는 것:
 * - 특정 병원 브랜드 스타일
 * - 특정 UI Format의 border / background / radius / 강조 표현
 * - 아임웹 등 특정 호스팅 CSS 충돌 보정 (hosts/*.css)
 *
 * 병원별 컬러 / 콘텐츠 폭 / 폰트 크기는 themes/*.css,
 * UI 표현은 formats/*.css,
 * 게시판 호스트 보정은 hosts/*.css 에서 담당합니다.
 */

/* ==========================================================================
   1. Base Tokens
   ========================================================================== */

.column-content {
  --column-primary: #315f7d;
  --column-primary-strong: #24485f;
  --column-primary-soft: #f2f6f9;

  /*
   * 3단계 하이라이트(mark) 배경.
   * primary-soft는 면 배경용이라 거의 흰색인 테마가 많아 하이라이트로 읽히지 않는다.
   * 강조 색에서 직접 만들어 어느 테마에서나 눈에 띄게 한다.
   */
  --column-highlight: color-mix(in srgb, var(--column-emphasis) 18%, #ffffff);

  /*
   * 본문 인라인 강조(strong) 색상.
   * 브랜드 색조를 유지하되 눈에 띄도록 채도를 올린 값을 Theme마다 지정한다.
   * 흰 배경에서 4.5:1 이상을 지킬 것.
   */
  --column-emphasis: var(--column-primary-strong);

  --column-secondary: #657786;
  --column-secondary-soft: #f7f9fa;

  --column-border: #dbe3e8;
  --column-border-strong: #b9c8d2;

  --column-surface: #ffffff;
  --column-surface-alt: #fafafa;

  --column-text: #333333;
  --column-heading: #222222;
  --column-muted: #6b7280;

  --column-danger: #b42318;
  --column-danger-soft: #fef3f2;

  --column-content-width: 800px;

  --column-font-family:
    "Pretendard Variable",
    Pretendard,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  --column-font-body: 16px;
  --column-font-small: 14px;
  --column-font-h2: 22px;
  --column-font-h3: 18px;
  --column-font-h4: 16px;
  --column-font-h2-mobile: 20px;
  --column-font-h3-mobile: 16px;

  --column-line-height: 1.8;
  --column-letter-spacing: normal;

  --column-radius-sm: 6px;
  --column-radius-md: 10px;
  --column-radius-lg: 14px;

  --column-anchor-offset: 150px;

  width: 100%;
  max-width: var(--column-content-width);
  margin: 0 auto;
  color: var(--column-text);
  font-family: var(--column-font-family);
  font-size: var(--column-font-body);
  line-height: var(--column-line-height);
  letter-spacing: var(--column-letter-spacing);
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.column-content,
.column-content * {
  box-sizing: border-box;
}

.column-content p {
  margin: 0 0 1em;
}

.column-content a {
  color: inherit;
  text-underline-offset: 0.15em;
}

.column-content a.column-button {
  text-decoration: none;
}

.column-content img {
  max-width: 100%;
}

/*
 * 본문 강조는 3단계로 나눈다.
 * 1단계 .column-keyword  - 칼럼의 메인 SEO 키워드. 굵기 + 시그니처 컬러
 * 2단계 strong           - 핵심 개념. 굵기만
 * 3단계 mark             - 반드시 눈에 남아야 할 구절. 배경 하이라이트
 */
.column-content strong {
  font-weight: 700;
}

.column-content .column-keyword {
  color: var(--column-keyword-color, var(--column-emphasis));
  font-weight: 700;
}

/*
 * 자체 배경과 글자색을 가진 면 위에서는 강조도 그 면의 글자색을 따른다.
 * Format에 따라 흰 글자가 되는 영역이 있어, 시그니처 컬러를 그대로 쓰면 읽히지 않는다.
 */
.column-content
  :is(
    .column-summary,
    .column-info-box,
    .column-blockquote,
    .column-toc,
    .column-table thead,
    .column-faq__question,
    .column-compare__title,
    .column-number-card__title,
    .column-step__title,
    .column-details__summary,
    .column-button,
    .column-cta
  ) {
  --column-keyword-color: currentColor;
}

.column-content mark {
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--column-highlight);
  /* 배경이 항상 밝은 톤이므로 글자색도 고정한다. 어두운 면 위에서도 읽혀야 한다 */
  color: var(--column-heading);
  font-weight: 700;
}

.column-content small {
  color: var(--column-muted);
  font-size: var(--column-font-small);
}

.column-anchor {
  scroll-margin-top: var(--column-anchor-offset);
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.column-content) {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   2. Summary
   ========================================================================== */

.column-summary {
  margin: 0 0 28px;
}

.column-summary__title {
  margin: 0 0 10px !important;
  font-weight: 800;
}

.column-summary__text {
  margin: 0 !important;
  font-size: var(--column-font-small);
  line-height: 1.8;
}

/* ==========================================================================
   3. Image / Caption
   ========================================================================== */

.column-image {
  margin: 0 0 40px;
  text-align: center;
}

.column-image__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.column-image__caption {
  margin: 8px 0 0 !important;
  color: var(--column-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* ==========================================================================
   4. Blockquote
   ========================================================================== */

.column-blockquote {
  margin: 40px 0;
}

.column-blockquote__text {
  margin: 0 !important;
  font-weight: 700;
}

.column-blockquote--expert {
  color: var(--column-muted);
  font-style: italic;
}

/* ==========================================================================
   5. TOC
   ========================================================================== */

.column-toc {
  margin: 0 0 50px;
}

.column-toc__title {
  margin: 0 0 14px !important;
  font-weight: 800;
}

.column-toc__list,
.column-toc__sublist {
  display: grid;
  gap: 4px;
}

.column-toc__sublist {
  margin-top: 2px;
  padding-left: 18px;
}

.column-toc__link {
  display: block;
  text-decoration: none;
}

.column-toc__link--sub {
  font-size: var(--column-font-small);
}

/* ==========================================================================
   6. Heading
   ========================================================================== */

.column-h2 {
  margin: 50px 0 20px;
  color: var(--column-heading);
  font-size: var(--column-font-h2);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.column-h3 {
  margin: 30px 0 14px;
  font-size: var(--column-font-h3);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.column-h4 {
  margin: 24px 0 10px;
  font-size: var(--column-font-h4);
  font-weight: 700;
  line-height: 1.6;
}

/* ==========================================================================
   7. Card / Info Box
   ========================================================================== */

.column-card,
.column-info-box {
  margin: 24px 0;
}

.column-card__title,
.column-info-box__title {
  margin: 0 0 10px !important;
  font-weight: 800;
}

.column-card > :is(.column-h2, .column-h3, .column-h4):first-child,
.column-info-box > :is(.column-h2, .column-h3, .column-h4):first-child {
  margin: 0 0 10px;
}

.column-card__body > .column-h4:first-child,
.column-info-box__body > .column-h4:first-child {
  margin-top: 0;
}

.column-card__body > :last-child,
.column-info-box__body > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   8. Number Card
   ========================================================================== */

.column-number-list {
  display: grid;
  gap: 14px;
  margin: 24px 0;
}

.column-number-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.column-number-card__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  box-sizing: border-box;
  width: max-content;
  max-width: max-content;
  min-width: 42px;
  min-height: 42px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.column-number-card__title {
  margin: 0 0 8px !important;
  font-weight: 800;
}

.column-number-card__text {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   9. Step
   ========================================================================== */

.column-step-list {
  display: grid;
  gap: 14px;
  margin: 24px 0;
}

.column-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
}

.column-step__index {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
}

.column-step__title {
  margin: 0 0 6px !important;
  font-weight: 800;
}

.column-step__text {
  margin: 0 !important;
}

/* ==========================================================================
   10. Compare
   ========================================================================== */

.column-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.column-compare__item {
  overflow: hidden;
}

.column-compare__title {
  margin: 0 !important;
  font-weight: 800;
  text-align: center;
}

.column-compare__body > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   11. Table
   ========================================================================== */

.column-table-wrap {
  width: 100%;
  margin: 24px 0 40px;
  overflow-x: auto;
}

.column-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.column-table th,
.column-table td {
  vertical-align: top;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.column-table thead th {
  font-weight: 800;
  text-align: center;
}

.column-table tbody th {
  width: 30%;
  font-weight: 700;
  text-align: left;
}

/* ==========================================================================
   12. Checklist
   ========================================================================== */

.column-checklist {
  margin: 24px 0;
}

.column-checklist__item {
  position: relative;
  margin: 0 !important;
  padding-left: 24px;
}

.column-checklist__item::before {
  position: absolute;
  left: 0;
  font-weight: 800;
}

.column-checklist__item + .column-checklist__item {
  margin-top: 8px !important;
}

/* ==========================================================================
   12-1. List (ul / ol)
   ========================================================================== */

.column-list {
  display: grid;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.column-list li {
  list-style: none;
}

.column-list > li {
  --column-list-marker-size: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-width: 0;
  margin: 0;
  padding: 10px 0;
}

/* 인라인 강조가 별도 그리드 아이템이 되면 제목과 본문이 찢어진다 */
.column-list > li > :is(strong, b, em, i) {
  display: contents;
}

.column-list > li::before {
  box-sizing: border-box;
  width: var(--column-list-marker-size);
  height: var(--column-list-marker-size);
  margin-top: calc(
    (1em * var(--column-line-height, 1.8) - var(--column-list-marker-size)) / 2
  );
  content: "";
}

.column-list--ordered,
ol.column-list {
  counter-reset: column-list;
}

.column-list--ordered > li,
ol.column-list > li {
  --column-list-marker-size: 24px;
  align-items: center;
  line-height: 1.5;
  counter-increment: column-list;
}

.column-list--ordered > li::before,
ol.column-list > li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  content: counter(column-list);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.column-list > li > .column-list,
.column-list > li > p {
  grid-column: 2;
  min-width: 0;
}

.column-list > li > .column-list {
  margin: 8px 0 0;
}

.column-list > li > p {
  margin: 0;
}

/* ==========================================================================
   12-2. Details
   ========================================================================== */

.column-details {
  margin: 24px 0;
}

.column-details__summary {
  margin: 0;
  font-weight: 700;
  cursor: pointer;
}

.column-details__body {
  padding-top: 10px;
}

.column-details__body > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */

.column-faq {
  margin-top: 50px;
}

.column-faq > .column-h2 {
  margin-top: 0;
}

.column-faq__item {
  overflow: hidden;
  margin-bottom: 14px;
}

.column-faq__question {
  margin: 0;
  font-size: var(--column-font-h3);
  font-weight: 800;
  line-height: 1.55;
}

.column-faq__answer > :first-child {
  margin-top: 0;
}

.column-faq__answer > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   14. CTA
   ========================================================================== */

.column-cta {
  margin: 48px 0;
  text-align: center;
}

.column-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 240px;
  min-height: 52px;
  max-width: 100%;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  word-break: keep-all;
  cursor: pointer;
}

.column-button::after {
  display: inline-block;
  flex-shrink: 0;
  width: 0.4em;
  height: 0.4em;
  margin-top: -0.08em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.column-button:hover::after,
.column-button:focus-visible::after {
  transform: rotate(45deg) translate(2px, -2px);
}

.column-button:focus-visible {
  outline: 2px solid var(--column-primary);
  outline-offset: 4px;
}

@keyframes column-button-sheen {
  0%,
  18% {
    background-position: 180% 0;
  }

  52%,
  100% {
    background-position: -80% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .column-button {
    animation: none;
  }
}

/* ==========================================================================
   15. Reference / Divider
   ========================================================================== */

.column-reference {
  margin-top: 50px;
}

.column-reference__list {
  display: grid;
  gap: 8px;
}

.column-reference__item {
  margin: 0 !important;
}

/* 구분선은 <hr class="column-divider"> 사용을 전제로 함 */
.column-divider {
  height: 0;
  margin: 50px 0;
  border: 0;
}

/* ==========================================================================
   16. Signoff
   ========================================================================== */

.column-signoff {
  margin: 72px 0;
  text-align: center;
}

.column-signoff p {
  margin: 0 0 0.35em;
}

.column-signoff > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   17. Responsive Structure
   ========================================================================== */

@media (max-width: 640px) {
  .column-button {
    width: 100%;
    min-width: 0;
  }

  .column-h2 {
    font-size: var(--column-font-h2-mobile);
  }

  .column-h3,
  .column-faq__question {
    font-size: var(--column-font-h3-mobile);
  }

  .column-compare {
    grid-template-columns: 1fr;
  }

  .column-number-card,
  .column-step {
    grid-template-columns: 1fr;
  }

  .column-number-card__index,
  .column-step__index {
    justify-self: start;
  }

  .column-table {
    min-width: 480px;
  }
}

/* ==========================================================================
   THEME: dr-newcell
   ========================================================================== */

/**
 * 닥터뉴셀의원 - Medical Column Theme
 *
 * column-common.css 뒤에 로드하세요.
 * 이 파일에는 프로젝트별 CSS Variable override와
 * 이 병원에서만 쓰는 의료진 약력카드(`.drnc-profile-*`) 스타일을 둡니다.
 * 약력카드 마크업은 아임웹 게시물 본문 하단 코드
 * (`src/preview/doctors/DNC-KO.html`, `DNC-EN.html`)를 씁니다.
 *
 * 나를위한산부인과와 같은 복숭아·크림 결이되,
 * 나산의 코랄(#f1a28d)보다 핑크가 도는 블러시 피치로 구분합니다.
 */

.column-content {
  --column-primary: #e48b84;
  --column-primary-strong: #e48b84;
  --column-emphasis: #cb3235;
  --column-primary-soft: #fef6f4;
  --column-secondary-soft: #fffaf8;
  --column-border: #f6d2cb;
  --column-border-strong: #e4c4be;
  --column-text: #333333;
  --column-heading: #222222;
  --column-content-width: 800px;
  --column-font-body: 16px;
  --column-font-h2: 18px;
  --column-font-h3: 17px;
  --column-font-h2-mobile: 17px;
  --column-font-h3-mobile: 16px;
}

:is(#column-ds, .column-content) .column-signoff:has(+ .drnc-profile-section) {
  margin-bottom: 28px;
}

.drnc-profile-section {
  --drnc-primary: #e48b84;
  --drnc-primary-dark: #c76e60;
  --drnc-primary-soft: #fef6f4;
  --drnc-ink: #403330;
  --drnc-muted: #8f7570;
  --drnc-line: #f6d2cb;
  --drnc-soft: #faf6f4;
  --drnc-font-family:
    "Pretendard Variable",
    Pretendard,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  width: 100% !important;
  max-width: 800px !important;
  margin: 48px auto 64px !important;
  padding: 36px !important;
  border: 1px solid var(--drnc-line) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgb(228 139 132 / 0.12) !important;
  color: var(--drnc-ink) !important;
  font-family: var(--drnc-font-family) !important;
  box-sizing: border-box !important;
}

.drnc-profile-section *,
.drnc-profile-section *::before,
.drnc-profile-section *::after {
  box-sizing: border-box !important;
}

.drnc-profile-hero {
  display: grid !important;
  grid-template-columns: minmax(156px, 188px) minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.drnc-profile-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 24px 18px !important;
  border-radius: 16px !important;
  background: var(--drnc-soft) !important;
}

.drnc-profile-logo img,
.drnc-profile-logo img.fr-fic,
.drnc-profile-logo img.fr-dii,
.drnc-profile-logo img.fr-fil,
.drnc-profile-logo img.fr-dib {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
}

.drnc-profile-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.drnc-profile-badge {
  display: inline-flex !important;
  align-self: flex-start !important;
  margin: 0 0 10px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: var(--drnc-primary-soft) !important;
  color: var(--drnc-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.1px !important;
}

.drnc-profile-title {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: var(--drnc-ink) !important;
  font-family: var(--drnc-font-family) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
  letter-spacing: -1.05px !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

.drnc-profile-section[lang="en"] .drnc-profile-title {
  font-size: 24px !important;
  letter-spacing: -0.6px !important;
  word-break: normal !important;
}

.drnc-profile-role {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--drnc-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.55px !important;
  word-break: keep-all !important;
}

.drnc-profile-quote {
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: var(--drnc-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.3px !important;
  word-break: keep-all !important;
}

.drnc-profile-section[lang="en"] .drnc-profile-quote {
  word-break: normal !important;
}

.drnc-profile-highlights {
  display: grid !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.drnc-profile-highlights li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 0 0 17px !important;
  color: #766460 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.56 !important;
  letter-spacing: -0.38px !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

.drnc-profile-section[lang="en"] .drnc-profile-highlights li {
  word-break: normal !important;
}

.drnc-profile-highlights li::before {
  position: absolute !important;
  top: 0.62em !important;
  left: 0 !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--drnc-primary) !important;
  content: "" !important;
}

.drnc-profile-notice {
  margin: 28px 0 20px !important;
  padding: 18px 20px !important;
  border-left: 4px solid var(--drnc-primary) !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--drnc-primary-soft) !important;
  color: #766460 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.35px !important;
  word-break: keep-all !important;
}

.drnc-profile-section[lang="en"] .drnc-profile-notice {
  word-break: normal !important;
}

.drnc-profile-notice strong {
  color: var(--drnc-ink) !important;
  font-weight: 700 !important;
}

.drnc-profile-symptoms-title {
  margin: 0 !important;
  padding: 22px 24px 0 !important;
  border-radius: 14px 14px 0 0 !important;
  background: var(--drnc-soft) !important;
  color: var(--drnc-ink) !important;
  font-family: var(--drnc-font-family) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.55px !important;
  word-break: keep-all !important;
}

.drnc-profile-symptoms {
  display: grid !important;
  gap: 7px !important;
  margin: 0 0 22px !important;
  padding: 13px 24px 22px !important;
  border-radius: 0 0 14px 14px !important;
  background: var(--drnc-soft) !important;
  list-style: none !important;
}

.drnc-profile-symptoms li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 0 0 24px !important;
  color: #6f5d59 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.4px !important;
  word-break: keep-all !important;
}

.drnc-profile-section[lang="en"] .drnc-profile-symptoms-title,
.drnc-profile-section[lang="en"] .drnc-profile-symptoms li {
  word-break: normal !important;
}

.drnc-profile-symptoms li::before {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: var(--drnc-primary) !important;
  font-weight: 800 !important;
  content: "✓" !important;
}

.drnc-profile-hero + .drnc-profile-symptoms-title,
.drnc-profile-hero + .drnc-profile-actions {
  margin-top: 28px !important;
}

.drnc-profile-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

a.drnc-profile-button,
a.drnc-profile-button:visited {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 14px 22px !important;
  border: 2px solid var(--drnc-primary) !important;
  border-radius: 999px !important;
  background: var(--drnc-primary) !important;
  color: #ffffff !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.45px !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease !important;
}

a.drnc-profile-button:hover,
a.drnc-profile-button:focus-visible {
  border-color: var(--drnc-primary-dark) !important;
  background: var(--drnc-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

a.drnc-profile-button:focus-visible {
  outline: 3px solid rgb(228 139 132 / 0.25) !important;
  outline-offset: 3px !important;
}

a.drnc-profile-button--ghost,
a.drnc-profile-button--ghost:visited {
  background: #ffffff !important;
  color: var(--drnc-primary) !important;
}

a.drnc-profile-button--ghost:hover,
a.drnc-profile-button--ghost:focus-visible {
  background: var(--drnc-primary-soft) !important;
  border-color: var(--drnc-primary-dark) !important;
  color: var(--drnc-primary-dark) !important;
}

.drnc-profile-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

a.drnc-profile-link,
a.drnc-profile-link:visited {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 14px 22px !important;
  border: 2px solid var(--drnc-primary) !important;
  border-radius: 999px !important;
  background: #f8e6e2 !important;
  color: var(--drnc-primary-dark) !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.45px !important;
  word-break: normal !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease !important;
}

.drnc-profile-link-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  pointer-events: none !important;
}

.drnc-profile-link-icon::before {
  width: 14px !important;
  height: 14px !important;
  background: currentColor !important;
  -webkit-mask: var(--drnc-link-icon) center / contain no-repeat !important;
  mask: var(--drnc-link-icon) center / contain no-repeat !important;
  content: "" !important;
}

a.drnc-profile-link--youtube {
  --drnc-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M23.5 6.2a3.05 3.05 0 0 0-2.15-2.16C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.35.44A3.05 3.05 0 0 0 .5 6.2 32 32 0 0 0 0 12a32 32 0 0 0 .5 5.8 3.05 3.05 0 0 0 2.15 2.16C4.5 20.4 12 20.4 12 20.4s7.5 0 9.35-.44a3.05 3.05 0 0 0 2.15-2.16A32 32 0 0 0 24 12a32 32 0 0 0-.5-5.8zM9.6 15.6V8.4L16.2 12z'/%3E%3C/svg%3E");
}

a.drnc-profile-link--media {
  --drnc-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h13a2 2 0 0 1 2 2v13H6a2 2 0 0 1-2-2V4zm2 2v13h11V6H6zm14 1.5h1.5A1.5 1.5 0 0 1 23 9v9.5a2.5 2.5 0 0 1-2.5 2.5H19V7.5zM8 8.5h7v1.6H8V8.5zm0 3.2h7v1.6H8v-1.6zm0 3.2h5v1.6H8v-1.6z'/%3E%3C/svg%3E");
}

a.drnc-profile-link:hover,
a.drnc-profile-link:focus-visible {
  border-color: var(--drnc-primary-dark) !important;
  background: #ffffff !important;
  color: var(--drnc-primary-dark) !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
}

a.drnc-profile-link:focus-visible {
  outline: 3px solid rgb(228 139 132 / 0.25) !important;
  outline-offset: 3px !important;
}

@media (max-width: 860px) {
  .drnc-profile-section {
    padding: 32px !important;
  }

  .drnc-profile-hero {
    grid-template-columns: minmax(136px, 160px) minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .drnc-profile-title {
    font-size: 24px !important;
  }

  .drnc-profile-section[lang="en"] .drnc-profile-title {
    font-size: 22px !important;
  }
}

@media (max-width: 700px) {
  .drnc-profile-section {
    margin: 36px auto 48px !important;
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }

  .drnc-profile-hero {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .drnc-profile-logo {
    width: min(100%, 240px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 18px 20px !important;
  }

  .drnc-profile-badge {
    align-self: center !important;
  }

  .drnc-profile-copy {
    text-align: center !important;
  }

  .drnc-profile-highlights {
    text-align: left !important;
  }

  .drnc-profile-title {
    font-size: 23px !important;
    line-height: 1.43 !important;
  }

  .drnc-profile-section[lang="en"] .drnc-profile-title {
    font-size: 21px !important;
  }

  .drnc-profile-role {
    font-size: 16px !important;
  }

  .drnc-profile-notice {
    margin-top: 24px !important;
    padding: 16px !important;
  }

  .drnc-profile-symptoms-title {
    padding: 20px 18px 0 !important;
  }

  .drnc-profile-symptoms {
    padding: 13px 18px 20px !important;
  }
}

@media (max-width: 480px) {
  .drnc-profile-section {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .drnc-profile-title {
    font-size: 21px !important;
  }

  .drnc-profile-section[lang="en"] .drnc-profile-title {
    font-size: 19px !important;
  }

  .drnc-profile-role {
    font-size: 15px !important;
  }

  .drnc-profile-quote,
  .drnc-profile-notice {
    font-size: 13.5px !important;
  }

  .drnc-profile-symptoms-title {
    font-size: 16px !important;
  }

  .drnc-profile-symptoms li {
    font-size: 14px !important;
  }

  .drnc-profile-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .drnc-profile-links {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  a.drnc-profile-button,
  a.drnc-profile-link {
    min-height: 52px !important;
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.drnc-profile-button,
  a.drnc-profile-link {
    transition: none !important;
  }
}

/* ==========================================================================
   HOST: imweb
   ========================================================================== */

/**
 * 아임웹 게시판 Host 보정
 *
 * 아임웹 + Froala 에디터가 칼럼 타이포·목록·이미지를 덮어쓰는
 * 규칙만 둡니다. Common / Theme / Format 값은 재정의하지 않고
 * CSS Variable을 그대로 사용합니다.
 *
 * 포함 대상은 projects.json의 host: "imweb" 프로젝트뿐입니다.
 *
 * #column-ds는 HTML에 넣지 않습니다. :is()가 ID 구체성을 가져가
 * 아임웹 섹션 ID(#s…)·.doz_sys h3 같은 규칙과 같은 단에서 이깁니다.
 */

/* --------------------------------------------------------------------------
   Headings
   .doz_sys h3 { font-size: 2.571em } 등이 column-h*가 없는
   h2/h3(카드 제목 등)까지 키우지 않도록 한 번에 되돌립니다.
   -------------------------------------------------------------------------- */

:is(#column-ds, .column-content) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

:is(#column-ds, .column-content) .column-summary__title,
:is(#column-ds, .column-content) .column-toc__title,
:is(#column-ds, .column-content) .column-card__title,
:is(#column-ds, .column-content) .column-info-box__title,
:is(#column-ds, .column-content) .column-number-card__title,
:is(#column-ds, .column-content) .column-step__title,
:is(#column-ds, .column-content) .column-compare__title,
:is(#column-ds, .column-content) .column-details__summary {
  font-family: inherit;
  font-size: inherit;
  font-weight: 800;
  line-height: inherit;
}

:is(#column-ds, .column-content) .column-h2 {
  margin: 50px 0 20px;
  font-family: var(--column-font-family);
  font-size: var(--column-font-h2);
  font-weight: 800;
  line-height: 1.45;
}

:is(#column-ds, .column-content) .column-h3 {
  margin: 30px 0 14px;
  font-family: var(--column-font-family);
  font-size: var(--column-font-h3);
  font-weight: 800;
  line-height: 1.5;
}

:is(#column-ds, .column-content) .column-h4 {
  margin: 24px 0 10px;
  font-family: var(--column-font-family);
  font-size: var(--column-font-h4);
  font-weight: 700;
  line-height: 1.6;
}

:is(#column-ds, .column-content) .column-faq > .column-h2 {
  margin-top: 0;
}

:is(#column-ds, .column-content) .column-faq__question {
  margin: 0;
  font-family: var(--column-font-family);
  font-size: var(--column-font-h3);
  font-weight: 800;
  line-height: 1.55;
  color: var(--column-primary-strong);
}

:is(#column-ds, .column-content) .column-faq__answer > :first-child {
  margin-top: 0;
}

:is(#column-ds, .column-content) .column-faq__answer > :last-child {
  margin-bottom: 0;
}

:is(#column-ds, .column-content) .column-card > :is(h1, h2, h3, h4, h5, h6):first-child,
:is(#column-ds, .column-content) .column-card .column-h4,
:is(#column-ds, .column-content) .column-compare__title {
  margin: 0 0 10px;
}

@media (max-width: 640px) {
  :is(#column-ds, .column-content) .column-h2 {
    font-size: var(--column-font-h2-mobile);
  }

  :is(#column-ds, .column-content) .column-h3,
  :is(#column-ds, .column-content) .column-faq__question {
    font-size: var(--column-font-h3-mobile);
  }
}

/* --------------------------------------------------------------------------
   Links
   아임웹 #id .board_txt_area a / :visited 가 칼럼 링크를 브랜드색으로 칠함
   -------------------------------------------------------------------------- */

:is(#column-ds, .column-content) .column-toc__title {
  color: var(--column-primary);
}

:is(#column-ds, .column-content).column-ui-soft-card .column-toc__title {
  color: var(--column-primary-strong);
}

:is(#column-ds, .column-content).column-content a.column-toc__link,
:is(#column-ds, .column-content).column-content a.column-toc__link:visited {
  color: var(--column-text);
}

:is(#column-ds, .column-content).column-content a.column-toc__link--sub,
:is(#column-ds, .column-content).column-content a.column-toc__link--sub:visited {
  color: var(--column-muted);
}

:is(#column-ds, .column-content).column-content a.column-toc__link:hover,
:is(#column-ds, .column-content).column-content a.column-toc__link:focus-visible {
  color: var(--column-primary-strong);
}

:is(#column-ds, .column-content).column-ui-minimal a.column-toc__link:hover,
:is(#column-ds, .column-content).column-ui-minimal a.column-toc__link:focus-visible,
:is(#column-ds, .column-content).column-ui-editorial a.column-toc__link:hover,
:is(#column-ds, .column-content).column-ui-editorial a.column-toc__link:focus-visible,
:is(#column-ds, .column-content).column-ui-paper a.column-toc__link:hover,
:is(#column-ds, .column-content).column-ui-paper a.column-toc__link:focus-visible,
:is(#column-ds, .column-content).column-ui-vintage a.column-toc__link:hover,
:is(#column-ds, .column-content).column-ui-vintage a.column-toc__link:focus-visible {
  color: var(--column-primary);
}

:is(#column-ds, .column-content).column-ui-maximal .column-toc__title,
:is(#column-ds, .column-content).column-ui-metallic .column-toc__title,
:is(#column-ds, .column-content).column-ui-metallic .column-info-box__title {
  color: #ffffff;
}

:is(#column-ds, .column-content).column-ui-maximal a.column-toc__link,
:is(#column-ds, .column-content).column-ui-maximal a.column-toc__link:visited,
:is(#column-ds, .column-content).column-ui-metallic a.column-toc__link,
:is(#column-ds, .column-content).column-ui-metallic a.column-toc__link:visited {
  color: color-mix(in srgb, #ffffff 86%, var(--column-heading));
}

:is(#column-ds, .column-content).column-ui-maximal a.column-toc__link--sub,
:is(#column-ds, .column-content).column-ui-maximal a.column-toc__link--sub:visited,
:is(#column-ds, .column-content).column-ui-metallic a.column-toc__link--sub,
:is(#column-ds, .column-content).column-ui-metallic a.column-toc__link--sub:visited {
  color: color-mix(in srgb, #ffffff 62%, var(--column-heading));
}

:is(#column-ds, .column-content).column-ui-maximal a.column-toc__link:hover,
:is(#column-ds, .column-content).column-ui-maximal a.column-toc__link:focus-visible,
:is(#column-ds, .column-content).column-ui-metallic a.column-toc__link:hover,
:is(#column-ds, .column-content).column-ui-metallic a.column-toc__link:focus-visible {
  color: #ffffff;
}

:is(#column-ds, .column-content).column-ui-neo-brutal .column-faq__question,
:is(#column-ds, .column-content).column-ui-brutal .column-faq__question,
:is(#column-ds, .column-content).column-ui-duotone .column-faq__question {
  color: #ffffff;
}

:is(#column-ds, .column-content) .column-details__summary {
  color: var(--column-primary-strong);
}

:is(#column-ds, .column-content).column-content a.column-button {
  color: #ffffff;
}

:is(#column-ds, .column-content).column-ui-duotone a.column-button:hover,
:is(#column-ds, .column-content).column-ui-duotone a.column-button:focus-visible {
  color: var(--column-heading);
}

:is(#column-ds, .column-content).column-ui-bold .column-summary__title,
:is(#column-ds, .column-content).column-ui-bold .column-summary__text,
:is(#column-ds, .column-content).column-ui-glow .column-summary__title,
:is(#column-ds, .column-content).column-ui-glow .column-summary__text {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.column-content ul.column-list,
.column-content .column-list,
.column-content .column-list > li {
  list-style: none;
}

.column-content ol.column-list > li {
  list-style: none !important;
  list-style-type: none !important;
}

.column-content .column-list > li::marker {
  content: none;
}

/* --------------------------------------------------------------------------
   Images (Froala fr-dii / fr-dib)
   -------------------------------------------------------------------------- */

.column-content img.column-image__img,
.column-content img.fr-dii,
.column-content img.fr-dib {
  display: block;
  float: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.column-content img.fr-dii {
  vertical-align: top !important;
}

.column-content img.fr-dii,
.column-content img.fr-dib {
  max-width: 100% !important;
  height: auto !important;
}

.column-content > img.column-image__img {
  margin-bottom: 40px;
}

.column-image .column-image__img {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.column-content .column-table thead {
  display: table-header-group;
}

.column-content .column-table th,
.column-content .column-table td {
  word-break: keep-all;
}

/* ==========================================================================
   FORMAT: default
   ========================================================================== */

/**
 * Medical Column - Default UI Format
 *
 * 기본 카드형 의료 칼럼 UI.
 * 사용:
 * <div class="column-content column-ui-default">
 */
.column-content.column-ui-default {
  background: #ffffff;
}


/* Summary */

.column-content.column-ui-default .column-summary {
  padding: 20px 22px;
  border: 1px solid var(--column-border);
  border-left: 5px solid var(--column-primary);
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-default .column-summary__title {
  color: var(--column-primary);
}

/* Blockquote */

.column-content.column-ui-default .column-blockquote {
  padding: 18px 20px;
  border-left: 5px solid var(--column-primary);
  background: var(--column-primary-soft);
}

.column-content.column-ui-default .column-blockquote--warning {
  border-left-color: var(--column-danger);
  background: var(--column-danger-soft);
}

.column-content.column-ui-default .column-blockquote--expert {
  border-left-width: 3px;
  background: var(--column-surface-alt);
}

/* TOC */

.column-content.column-ui-default .column-toc {
  padding: 22px 24px;
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-default .column-toc__title {
  color: var(--column-primary);
}

.column-content.column-ui-default .column-toc__link {
  padding: 7px 10px;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.column-content.column-ui-default .column-toc__link:hover,
.column-content.column-ui-default .column-toc__link:focus-visible {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-default .column-toc__link--sub {
  color: var(--column-muted);
}

/* Heading */

.column-content.column-ui-default .column-h2 {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--column-primary);
}

.column-content.column-ui-default .column-h3 {
  padding-left: 12px;
  border-left: 4px solid var(--column-primary);
  color: var(--column-primary-strong);
}

.column-content.column-ui-default .column-h4 {
  color: var(--column-primary-strong);
}

/* Card */

.column-content.column-ui-default .column-card,
.column-content.column-ui-default .column-info-box {
  padding: 22px 24px;
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
  background: var(--column-surface);
}

.column-content.column-ui-default .column-card__title,
.column-content.column-ui-default .column-info-box__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-default .column-info-box {
  background: var(--column-primary-soft);
}

/* Number Card */

.column-content.column-ui-default .column-number-card {
  padding: 20px 22px;
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
  background: var(--column-surface);
}

.column-content.column-ui-default .column-number-card__index {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-default .column-number-card__title {
  color: var(--column-primary-strong);
}

/* Step */

.column-content.column-ui-default .column-step {
  padding: 20px 22px;
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
  background: var(--column-surface);
}

.column-content.column-ui-default .column-step__index {
  border-radius: 50%;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-default .column-step__title {
  color: var(--column-primary-strong);
}

/* Compare */

.column-content.column-ui-default .column-compare__item {
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
  background: var(--column-surface);
}

.column-content.column-ui-default .column-compare__title {
  padding: 14px 18px;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-default .column-compare__body {
  padding: 18px;
}

/* Table */

.column-content.column-ui-default .column-table-wrap {
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
}

.column-content.column-ui-default .column-table {
  background: var(--column-surface);
}

.column-content.column-ui-default .column-table th,
.column-content.column-ui-default .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-default .column-table thead th {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-default .column-table tbody th {
  background: var(--column-surface-alt);
}

.column-content.column-ui-default .column-table tr:last-child th,
.column-content.column-ui-default .column-table tr:last-child td {
  border-bottom: 0;
}

/* Checklist */

.column-content.column-ui-default .column-checklist {
  padding: 20px 22px;
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
  background: var(--column-surface);
}

.column-content.column-ui-default .column-checklist__item::before {
  content: "✓";
  color: var(--column-primary);
}

/* List */

.column-content.column-ui-default .column-list {
  padding: 6px 16px;
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
  background: var(--column-surface);
}

.column-content.column-ui-default .column-list > li + li {
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-default .column-list > li::before {
  background: var(--column-primary);
  border-radius: 50%;
}

.column-content.column-ui-default .column-list--ordered > li::before,
.column-content.column-ui-default ol.column-list > li::before {
  color: #ffffff;
}

.column-content.column-ui-default .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
}

.column-content.column-ui-default .column-list .column-list > li + li {
  border-top: 0;
}

/* Details */

.column-content.column-ui-default .column-details,
.column-content.column-ui-default > .column-details__body {
  padding: 16px 20px;
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-default .column-details__summary {
  color: var(--column-primary-strong);
}

/* FAQ */

.column-content.column-ui-default .column-faq__item {
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-md);
  background: var(--column-surface);
}

.column-content.column-ui-default .column-faq__question {
  padding: 16px 20px;
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-default .column-faq__answer {
  padding: 18px 20px;
  border-top: 1px solid var(--column-border);
}

/* CTA */

.column-content.column-ui-default .column-cta {
  padding: 28px 24px;
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-default .column-button {
  padding: 14px 32px;
  border: 0;
  border-radius: var(--column-radius-md);
  background-color: var(--column-primary);
  background-image: linear-gradient(
    105deg,
    transparent 32%,
    rgb(255 255 255 / 0.16) 50%,
    transparent 68%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  color: #ffffff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--column-primary) 32%, transparent);
  animation: column-button-sheen 3.6s ease-in-out infinite;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    filter 0.15s ease;
}

.column-content.column-ui-default .column-button:hover,
.column-content.column-ui-default .column-button:focus-visible {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--column-primary) 42%, transparent);
  transform: translateY(-2px);
  filter: brightness(0.92);
  animation-play-state: paused;
}

.column-content.column-ui-default .column-button:active {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--column-primary) 28%, transparent);
  transform: translateY(0);
  filter: brightness(0.96);
}

/* Divider */

.column-content.column-ui-default .column-divider {
  border-top: 1px solid var(--column-border);
}

/* Responsive */

@media (max-width: 640px) {
  .column-content.column-ui-default .column-summary,
  .column-content.column-ui-default .column-card,
  .column-content.column-ui-default .column-info-box,
  .column-content.column-ui-default .column-number-card,
  .column-content.column-ui-default .column-step,
  .column-content.column-ui-default .column-list,
  .column-content.column-ui-default .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: minimal
   ========================================================================== */

/**
 * Medical Column - Minimal UI Format
 *
 * 박스와 배경 사용을 줄이고 구분선 중심으로 구성한 UI.
 * 사용:
 * <div class="column-content column-ui-minimal">
 */
.column-content.column-ui-minimal {
  background: #ffffff;
}

.column-content.column-ui-minimal .column-summary {
  padding: 20px 22px;
  border-radius: var(--column-radius-md);
  background: var(--column-primary-soft);
}

.column-content.column-ui-minimal .column-summary__title {
  color: var(--column-primary);
}

.column-content.column-ui-minimal .column-blockquote {
  padding: 4px 0 4px 16px;
  border-left: 2px solid color-mix(in srgb, var(--column-primary) 45%, var(--column-border));
}

.column-content.column-ui-minimal .column-blockquote--warning {
  border-left-color: var(--column-danger);
}

.column-content.column-ui-minimal .column-blockquote--expert {
  border-left-color: var(--column-border);
}

.column-content.column-ui-minimal .column-toc {
  padding: 20px 22px;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-minimal .column-toc__title {
  color: var(--column-primary);
}

.column-content.column-ui-minimal .column-toc__link {
  padding: 5px 0;
  color: var(--column-text);
}

.column-content.column-ui-minimal .column-toc__link:hover,
.column-content.column-ui-minimal .column-toc__link:focus-visible {
  color: var(--column-primary);
  text-decoration: underline;
}

.column-content.column-ui-minimal .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-minimal .column-h2 {
  padding-left: 12px;
  border-left: 3px solid var(--column-primary);
}

.column-content.column-ui-minimal .column-h3,
.column-content.column-ui-minimal .column-h4 {
  color: var(--column-primary-strong);
}

.column-content.column-ui-minimal .column-card,
.column-content.column-ui-minimal .column-info-box {
  padding: 18px 0;
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-minimal .column-card__title,
.column-content.column-ui-minimal .column-info-box__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-minimal .column-info-box {
  padding: 18px 20px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-primary-soft);
}

.column-content.column-ui-minimal .column-number-card,
.column-content.column-ui-minimal .column-step {
  padding: 18px 0;
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-minimal .column-number-card__index,
.column-content.column-ui-minimal .column-step__index {
  border: 0;
  border-radius: 8px;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-minimal .column-number-card__title,
.column-content.column-ui-minimal .column-step__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-minimal .column-compare__item {
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-minimal .column-compare__title {
  padding: 14px 0 10px;
  color: var(--column-primary-strong);
  text-align: left;
}

.column-content.column-ui-minimal .column-compare__body {
  padding: 0 0 18px;
}

.column-content.column-ui-minimal .column-table-wrap {
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-minimal .column-table th,
.column-content.column-ui-minimal .column-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-minimal .column-table thead th {
  border-bottom: 1px solid var(--column-border);
  color: var(--column-primary-strong);
}

.column-content.column-ui-minimal .column-table tbody th {
  color: var(--column-heading);
}

.column-content.column-ui-minimal .column-table tr:last-child th,
.column-content.column-ui-minimal .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-minimal .column-checklist {
  padding: 18px 0;
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-minimal .column-checklist__item::before {
  content: "—";
  color: var(--column-primary);
}

.column-content.column-ui-minimal .column-list {
  padding: 8px 0;
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-minimal .column-list > li::before {
  background: var(--column-primary);
  border-radius: 50%;
}

.column-content.column-ui-minimal .column-list--ordered > li::before,
.column-content.column-ui-minimal ol.column-list > li::before {
  border: 0;
  border-radius: 8px;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-minimal .column-list .column-list {
  padding: 0;
  border: 0;
}

.column-content.column-ui-minimal .column-details,
.column-content.column-ui-minimal > .column-details__body {
  padding: 16px 0;
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-minimal .column-details__summary {
  color: var(--column-primary-strong);
}

.column-content.column-ui-minimal .column-faq__item {
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-minimal .column-faq__question {
  padding: 18px 0 10px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-minimal .column-faq__answer {
  padding: 0 0 18px;
}

.column-content.column-ui-minimal .column-cta {
  padding: 28px 22px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-primary-soft);
}

.column-content.column-ui-minimal .column-button {
  padding: 14px 32px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-primary);
  color: #ffffff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--column-primary) 28%, transparent);
}

.column-content.column-ui-minimal .column-button:hover,
.column-content.column-ui-minimal .column-button:focus-visible {
  background: var(--column-primary-strong);
}

.column-content.column-ui-minimal .column-divider {
  border-top: 1px solid var(--column-border);
}

/* ==========================================================================
   FORMAT: soft-card
   ========================================================================== */

/**
 * Medical Column - Soft Card UI Format
 *
 * 연한 브랜드 배경과 카드 구분을 적극적으로 사용하는 UI.
 * 사용:
 * <div class="column-content column-ui-soft-card">
 */
.column-content.column-ui-soft-card {
  background: #ffffff;
}


/* Summary */

.column-content.column-ui-soft-card .column-summary {
  padding: 22px 24px;
  border-radius: calc(var(--column-radius-lg) + 2px);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-summary__title {
  color: var(--column-primary-strong);
}

/* Blockquote */

.column-content.column-ui-soft-card .column-blockquote {
  padding: 20px 22px;
  border-radius: var(--column-radius-md);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-soft-card .column-blockquote--expert {
  background: var(--column-surface-alt);
}

/* TOC */

.column-content.column-ui-soft-card .column-toc {
  padding: 24px;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-toc__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-toc__link {
  padding: 8px 10px;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
}

.column-content.column-ui-soft-card .column-toc__link:hover,
.column-content.column-ui-soft-card .column-toc__link:focus-visible {
  background: var(--column-surface);
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-toc__link--sub {
  color: var(--column-muted);
}

/* Heading */

.column-content.column-ui-soft-card .column-h2 {
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-h3 {
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-h4 {
  color: var(--column-primary-strong);
}

/* Card */

.column-content.column-ui-soft-card .column-card,
.column-content.column-ui-soft-card .column-info-box {
  padding: 22px 24px;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-card__title,
.column-content.column-ui-soft-card .column-info-box__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-info-box {
  background: var(--column-secondary-soft);
}

/* Number Card */

.column-content.column-ui-soft-card .column-number-card {
  padding: 20px 22px;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-number-card__index {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--column-surface);
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-number-card__title {
  color: var(--column-primary-strong);
}

/* Step */

.column-content.column-ui-soft-card .column-step {
  padding: 20px 22px;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-step__index {
  border-radius: 50%;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-soft-card .column-step__title {
  color: var(--column-primary-strong);
}

/* Compare */

.column-content.column-ui-soft-card .column-compare__item {
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-compare__title {
  padding: 14px 18px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-compare__body {
  padding: 18px;
  background: var(--column-surface);
}

/* Table */

.column-content.column-ui-soft-card .column-table-wrap {
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-table {
  background: transparent;
}

.column-content.column-ui-soft-card .column-table th,
.column-content.column-ui-soft-card .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-soft-card .column-table thead th {
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-soft-card .column-table tbody th {
  background: var(--column-secondary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-table tbody td {
  background: var(--column-surface);
}

.column-content.column-ui-soft-card .column-table tr:last-child th,
.column-content.column-ui-soft-card .column-table tr:last-child td {
  border-bottom: 0;
}

/* Checklist */

.column-content.column-ui-soft-card .column-checklist {
  padding: 20px 22px;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-checklist__item::before {
  content: "✓";
  color: var(--column-primary);
}

/* List */

.column-content.column-ui-soft-card .column-list {
  padding: 8px 16px;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-list > li::before {
  background: var(--column-primary);
  border-radius: 50%;
}

.column-content.column-ui-soft-card .column-list--ordered > li::before,
.column-content.column-ui-soft-card ol.column-list > li::before {
  background: var(--column-surface);
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-list .column-list {
  padding: 0;
  background: transparent;
}

/* Details */

.column-content.column-ui-soft-card .column-details,
.column-content.column-ui-soft-card > .column-details__body {
  padding: 18px 20px;
  border-radius: var(--column-radius-lg);
  background: var(--column-secondary-soft);
}

.column-content.column-ui-soft-card .column-details__summary {
  color: var(--column-primary-strong);
}

/* FAQ */

.column-content.column-ui-soft-card .column-faq__item {
  border: 1px solid var(--column-border);
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-faq__question {
  padding: 16px 20px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-soft-card .column-faq__answer {
  padding: 18px 20px;
  border-radius: 0 0 var(--column-radius-lg) var(--column-radius-lg);
  background: var(--column-surface);
}

/* CTA */

.column-content.column-ui-soft-card .column-cta {
  padding: 32px 24px;
  border-radius: calc(var(--column-radius-lg) + 2px);
  background: var(--column-primary-soft);
}

.column-content.column-ui-soft-card .column-button {
  padding: 14px 36px;
  border-radius: 999px;
  background-color: var(--column-primary);
  background-image: linear-gradient(
    105deg,
    transparent 32%,
    rgb(255 255 255 / 0.16) 50%,
    transparent 68%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  color: #ffffff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--column-primary) 30%, transparent);
  animation: column-button-sheen 3.6s ease-in-out infinite;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    filter 0.15s ease;
}

.column-content.column-ui-soft-card .column-button:hover,
.column-content.column-ui-soft-card .column-button:focus-visible {
  box-shadow: 0 14px 32px color-mix(in srgb, var(--column-primary) 38%, transparent);
  transform: translateY(-2px);
  filter: brightness(0.92);
  animation-play-state: paused;
}

.column-content.column-ui-soft-card .column-button:active {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--column-primary) 26%, transparent);
  transform: translateY(0);
  filter: brightness(0.96);
}

/* Divider */

.column-content.column-ui-soft-card .column-divider {
  border-top: 1px solid var(--column-border);
}

/* Responsive */

@media (max-width: 640px) {
  .column-content.column-ui-soft-card .column-summary,
  .column-content.column-ui-soft-card .column-card,
  .column-content.column-ui-soft-card .column-info-box,
  .column-content.column-ui-soft-card .column-number-card,
  .column-content.column-ui-soft-card .column-step,
  .column-content.column-ui-soft-card .column-list,
  .column-content.column-ui-soft-card .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: editorial
   ========================================================================== */

/**
 * Medical Column - Editorial UI Format
 *
 * 타이포와 구분선을 축으로 하되, 카드·목록·FAQ·표까지
 * 한 세트로 맞춰 둔 매거진형 UI.
 * 사용:
 * <div class="column-content column-ui-editorial">
 */
.column-content.column-ui-editorial {
  background: #ffffff;
}


/* Summary */

.column-content.column-ui-editorial .column-summary {
  padding: 20px 0 22px;
  border-top: 2px solid var(--column-primary);
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-editorial .column-summary__title {
  color: var(--column-primary);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.column-content.column-ui-editorial .column-summary__text {
  font-size: 1.04em;
}

/* Blockquote */

.column-content.column-ui-editorial .column-blockquote {
  position: relative;
  padding: 18px 20px 18px 44px;
  background: var(--column-primary-soft);
}

.column-content.column-ui-editorial .column-blockquote::before {
  position: absolute;
  top: 10px;
  left: 14px;
  color: var(--column-primary);
  font-size: 1.8em;
  font-weight: 800;
  line-height: 1;
  content: "“";
}

.column-content.column-ui-editorial .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-editorial .column-blockquote--warning::before {
  color: var(--column-danger);
}

.column-content.column-ui-editorial .column-blockquote--expert {
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-blockquote--expert::before {
  color: var(--column-border-strong);
}

/* TOC */

.column-content.column-ui-editorial .column-toc {
  padding: 22px 24px;
  border: 1px solid var(--column-border);
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-toc__title {
  color: var(--column-primary);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.column-content.column-ui-editorial .column-toc__list {
  counter-reset: column-toc;
}

.column-content.column-ui-editorial .column-toc__item > .column-toc__link {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  padding: 7px 8px;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
}

.column-content.column-ui-editorial .column-toc__item > .column-toc__link::before {
  color: var(--column-primary);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  content: counter(column-toc, decimal-leading-zero);
  counter-increment: column-toc;
}

.column-content.column-ui-editorial .column-toc__link:hover,
.column-content.column-ui-editorial .column-toc__link:focus-visible {
  background: var(--column-surface);
  color: var(--column-primary-strong);
}

.column-content.column-ui-editorial .column-toc__link--sub {
  color: var(--column-muted);
}

/* Heading */

.column-content.column-ui-editorial .column-h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-editorial .column-h2::before {
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--column-primary);
  content: "";
}

.column-content.column-ui-editorial .column-h3 {
  color: var(--column-primary-strong);
}

.column-content.column-ui-editorial .column-h4 {
  color: var(--column-primary-strong);
}

/* Card */

.column-content.column-ui-editorial .column-card,
.column-content.column-ui-editorial .column-info-box {
  padding: 22px 24px;
  border-top: 2px solid var(--column-primary);
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-card__title,
.column-content.column-ui-editorial .column-info-box__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-editorial .column-info-box {
  background: var(--column-primary-soft);
}

/* Number Card */

.column-content.column-ui-editorial .column-number-card {
  padding: 20px 22px;
  border-top: 1px solid var(--column-border);
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-number-card:first-child {
  border-top: 2px solid var(--column-primary);
}

.column-content.column-ui-editorial .column-number-card__index {
  min-width: auto;
  min-height: auto;
  color: var(--column-primary);
  font-size: 20px;
  letter-spacing: 0.04em;
}

.column-content.column-ui-editorial .column-number-card__title {
  color: var(--column-primary-strong);
}

/* Step */

.column-content.column-ui-editorial .column-step {
  padding: 20px 22px;
  border-top: 1px solid var(--column-border);
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-step:first-child {
  border-top: 2px solid var(--column-primary);
}

.column-content.column-ui-editorial .column-step__index {
  border: 1px solid var(--column-primary);
  border-radius: 50%;
  color: var(--column-primary);
  line-height: 1;
}

.column-content.column-ui-editorial .column-step__title {
  color: var(--column-primary-strong);
}

/* Compare */

.column-content.column-ui-editorial .column-compare__item {
  border-top: 2px solid var(--column-primary);
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-compare__title {
  padding: 14px 18px 10px;
  color: var(--column-primary-strong);
  text-align: left;
}

.column-content.column-ui-editorial .column-compare__body {
  padding: 0 18px 18px;
}

/* Table */

.column-content.column-ui-editorial .column-table-wrap {
  border-top: 2px solid var(--column-primary);
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-editorial .column-table th,
.column-content.column-ui-editorial .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-editorial .column-table thead th {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
  text-align: left;
}

.column-content.column-ui-editorial .column-table tbody th {
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-table tr:last-child th,
.column-content.column-ui-editorial .column-table tr:last-child td {
  border-bottom: 0;
}

/* Checklist */

.column-content.column-ui-editorial .column-checklist {
  padding: 20px 22px;
  border-top: 2px solid var(--column-primary);
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-checklist__item::before {
  content: "–";
  color: var(--column-primary);
}

/* List */

.column-content.column-ui-editorial .column-list {
  padding: 6px 16px;
  border-top: 2px solid var(--column-primary);
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-list > li + li {
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-editorial .column-list > li::before {
  background: var(--column-primary);
  border-radius: 50%;
}

.column-content.column-ui-editorial .column-list--ordered > li::before,
.column-content.column-ui-editorial ol.column-list > li::before {
  background: transparent;
  color: var(--column-primary);
}

.column-content.column-ui-editorial .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
}

.column-content.column-ui-editorial .column-list .column-list > li + li {
  border-top: 0;
}

/* Details */

.column-content.column-ui-editorial .column-details,
.column-content.column-ui-editorial > .column-details__body {
  padding: 16px 20px;
  background: var(--column-secondary-soft);
}

.column-content.column-ui-editorial .column-details__summary {
  color: var(--column-primary-strong);
}

/* FAQ */

.column-content.column-ui-editorial .column-faq__item {
  border-top: 1px solid var(--column-border);
  background: var(--column-surface-alt);
}

.column-content.column-ui-editorial .column-faq__item:first-of-type {
  border-top: 2px solid var(--column-primary);
}

.column-content.column-ui-editorial .column-faq__question {
  padding: 16px 20px 10px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-editorial .column-faq__question::before {
  margin-right: 8px;
  color: var(--column-primary);
  content: "Q.";
}

.column-content.column-ui-editorial .column-faq__answer {
  padding: 0 20px 18px 2.4em;
}

/* CTA */

.column-content.column-ui-editorial .column-cta {
  padding: 28px 24px;
  border-top: 2px solid var(--column-primary);
  border-bottom: 1px solid var(--column-border);
  background: var(--column-primary-soft);
}

.column-content.column-ui-editorial .column-button {
  padding: 14px 36px;
  border: 0;
  background-color: var(--column-primary);
  background-image: linear-gradient(
    105deg,
    transparent 32%,
    rgb(255 255 255 / 0.22) 50%,
    transparent 68%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  color: #ffffff;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--column-primary) 32%, transparent);
  animation: column-button-sheen 3.6s ease-in-out infinite;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    filter 0.15s ease;
}

.column-content.column-ui-editorial .column-button:hover,
.column-content.column-ui-editorial .column-button:focus-visible {
  box-shadow: 0 14px 32px color-mix(in srgb, var(--column-primary) 42%, transparent);
  transform: translateY(-2px);
  filter: brightness(0.92);
  animation-play-state: paused;
}

/* Divider */

.column-content.column-ui-editorial .column-divider {
  border-top: 1px solid var(--column-border);
}

@media (max-width: 640px) {
  .column-content.column-ui-editorial .column-toc,
  .column-content.column-ui-editorial .column-card,
  .column-content.column-ui-editorial .column-info-box,
  .column-content.column-ui-editorial .column-number-card,
  .column-content.column-ui-editorial .column-step,
  .column-content.column-ui-editorial .column-list,
  .column-content.column-ui-editorial .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: outline
   ========================================================================== */

/**
 * Medical Column - Outline UI Format
 *
 * 외곽선과 흰 면으로 정보 단위를 정리한 UI.
 * 카드·목록·표·FAQ·버튼까지 같은 선 무게로 맞춰 둡니다.
 * 사용:
 * <div class="column-content column-ui-outline">
 */
.column-content.column-ui-outline {
  background: #ffffff;
}


/* Summary */

.column-content.column-ui-outline .column-summary {
  padding: 20px 22px;
  border: 2px solid var(--column-primary);
  border-radius: var(--column-radius-sm);
  background: var(--column-primary-soft);
}

.column-content.column-ui-outline .column-summary__title {
  color: var(--column-primary);
}

/* Blockquote */

.column-content.column-ui-outline .column-blockquote {
  padding: 18px 20px;
  border: 2px solid var(--column-primary);
  border-radius: var(--column-radius-sm);
}

.column-content.column-ui-outline .column-blockquote--warning {
  border-color: var(--column-danger);
  background: var(--column-danger-soft);
}

.column-content.column-ui-outline .column-blockquote--expert {
  border-color: var(--column-border-strong);
  background: var(--column-surface-alt);
}

/* TOC */

.column-content.column-ui-outline .column-toc {
  padding: 22px 24px;
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
  background: var(--column-surface-alt);
}

.column-content.column-ui-outline .column-toc__title {
  color: var(--column-primary);
}

.column-content.column-ui-outline .column-toc__link {
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.column-content.column-ui-outline .column-toc__link:hover,
.column-content.column-ui-outline .column-toc__link:focus-visible {
  border-color: var(--column-primary);
  color: var(--column-primary-strong);
}

.column-content.column-ui-outline .column-toc__link--sub {
  color: var(--column-muted);
}

/* Heading */

.column-content.column-ui-outline .column-h2 {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--column-primary);
}

.column-content.column-ui-outline .column-h3 {
  padding-left: 12px;
  border-left: 3px solid var(--column-primary);
  color: var(--column-primary-strong);
}

.column-content.column-ui-outline .column-h4 {
  color: var(--column-primary-strong);
}

/* Card */

.column-content.column-ui-outline .column-card,
.column-content.column-ui-outline .column-info-box {
  padding: 22px 24px;
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
  background: var(--column-surface);
}

.column-content.column-ui-outline .column-card__title,
.column-content.column-ui-outline .column-info-box__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-outline .column-info-box {
  border-color: var(--column-primary);
  background: var(--column-primary-soft);
}

/* Number Card */

.column-content.column-ui-outline .column-number-card {
  padding: 20px 22px;
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
}

.column-content.column-ui-outline .column-number-card__index,
.column-content.column-ui-outline .column-step__index {
  border: 0;
  border-radius: var(--column-radius-sm);
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-outline .column-number-card__title {
  color: var(--column-primary-strong);
}

/* Step */

.column-content.column-ui-outline .column-step {
  padding: 20px 22px;
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
  background: var(--column-surface-alt);
}

.column-content.column-ui-outline .column-step__title {
  color: var(--column-primary-strong);
}

/* Compare */

.column-content.column-ui-outline .column-compare__item {
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
}

.column-content.column-ui-outline .column-compare__title {
  padding: 14px 18px;
  border-bottom: 2px solid var(--column-primary);
  color: var(--column-primary-strong);
}

.column-content.column-ui-outline .column-compare__body {
  padding: 18px;
}

/* Table */

.column-content.column-ui-outline .column-table-wrap {
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
}

.column-content.column-ui-outline .column-table {
  background: var(--column-surface);
}

.column-content.column-ui-outline .column-table th,
.column-content.column-ui-outline .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-outline .column-table thead th {
  border-bottom: 2px solid var(--column-primary);
  box-shadow: inset 0 -2px 0 var(--column-primary);
  color: var(--column-primary-strong);
}

.column-content.column-ui-outline .column-table tbody th {
  background: var(--column-surface-alt);
}

.column-content.column-ui-outline .column-table tr:last-child th,
.column-content.column-ui-outline .column-table tr:last-child td {
  border-bottom: 0;
}

/* Checklist */

.column-content.column-ui-outline .column-checklist {
  padding: 20px 22px;
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
}

.column-content.column-ui-outline .column-checklist__item::before {
  content: "□";
  color: var(--column-primary);
}

/* List */

.column-content.column-ui-outline .column-list {
  padding: 6px 16px;
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
}

.column-content.column-ui-outline .column-list > li + li {
  border-top: 1px solid var(--column-border);
}

.column-content.column-ui-outline .column-list > li::before {
  border: 2px solid var(--column-primary);
  border-radius: 50%;
  background: transparent;
}

.column-content.column-ui-outline .column-list--ordered > li::before,
.column-content.column-ui-outline ol.column-list > li::before {
  border: 2px solid var(--column-primary);
  background: transparent;
  color: var(--column-primary);
  line-height: 1;
  padding-top: 1px;
}

.column-content.column-ui-outline .column-list .column-list {
  padding: 0;
  border: 0;
}

.column-content.column-ui-outline .column-list .column-list > li + li {
  border-top: 0;
}

/* Details */

.column-content.column-ui-outline .column-details,
.column-content.column-ui-outline > .column-details__body {
  padding: 16px 20px;
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
  background: var(--column-surface-alt);
}

.column-content.column-ui-outline .column-details__summary {
  color: var(--column-primary-strong);
}

/* FAQ */

.column-content.column-ui-outline .column-faq__item {
  border: 1px solid var(--column-border-strong);
  border-radius: var(--column-radius-sm);
}

.column-content.column-ui-outline .column-faq__question {
  padding: 16px 20px;
  border-bottom: 1px solid var(--column-border);
  color: var(--column-primary-strong);
}

.column-content.column-ui-outline .column-faq__answer {
  padding: 18px 20px;
}

/* CTA */

.column-content.column-ui-outline .column-cta {
  padding: 28px 24px;
  border: 0;
  border-radius: var(--column-radius-sm);
  background: var(--column-primary-soft);
}

.column-content.column-ui-outline .column-button {
  padding: 14px 36px;
  border: 0;
  border-radius: var(--column-radius-sm);
  background-color: var(--column-primary);
  background-image: linear-gradient(
    105deg,
    transparent 32%,
    rgb(255 255 255 / 0.22) 50%,
    transparent 68%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  color: #ffffff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--column-primary) 32%, transparent);
  animation: column-button-sheen 3.6s ease-in-out infinite;
}

.column-content.column-ui-outline .column-button:hover,
.column-content.column-ui-outline .column-button:focus-visible {
  filter: brightness(0.92);
  animation-play-state: paused;
}

/* Divider */

.column-content.column-ui-outline .column-divider {
  border-top: 1px solid var(--column-border-strong);
}

@media (max-width: 640px) {
  .column-content.column-ui-outline .column-summary,
  .column-content.column-ui-outline .column-card,
  .column-content.column-ui-outline .column-info-box,
  .column-content.column-ui-outline .column-number-card,
  .column-content.column-ui-outline .column-step,
  .column-content.column-ui-outline .column-list,
  .column-content.column-ui-outline .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: band
   ========================================================================== */

/**
 * Medical Column - Band UI Format
 *
 * 왼쪽 액센트와 소프트 패널을 함께 쓰는 문서형 UI.
 * 제목뿐 아니라 카드·단계·표·FAQ까지 한 세트로 맞춰 둡니다.
 * 사용:
 * <div class="column-content column-ui-band">
 */
.column-content.column-ui-band {
  background: #ffffff;
}


/* Summary */

.column-content.column-ui-band .column-summary {
  padding: 20px 22px 20px 24px;
  border-left: 5px solid var(--column-primary);
  background: var(--column-primary-soft);
}

.column-content.column-ui-band .column-summary__title {
  color: var(--column-primary);
}

/* Blockquote */

.column-content.column-ui-band .column-blockquote {
  padding: 18px 20px;
  border-left: 5px solid var(--column-primary);
  background: var(--column-primary-soft);
}

.column-content.column-ui-band .column-blockquote--warning {
  border-left-color: var(--column-danger);
  background: var(--column-danger-soft);
}

.column-content.column-ui-band .column-blockquote--expert {
  border-left-color: var(--column-border-strong);
  background: var(--column-surface-alt);
}

/* TOC */

.column-content.column-ui-band .column-toc {
  padding: 22px 24px;
  background: var(--column-surface-alt);
}

.column-content.column-ui-band .column-toc__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-band .column-toc__link {
  padding: 7px 10px;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.column-content.column-ui-band .column-toc__link:hover,
.column-content.column-ui-band .column-toc__link:focus-visible {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-band .column-toc__link--sub {
  color: var(--column-muted);
}

/* Heading */

.column-content.column-ui-band .column-h2 {
  padding-left: 16px;
  border-left: 5px solid var(--column-primary);
}

.column-content.column-ui-band .column-h3 {
  color: var(--column-primary-strong);
}

.column-content.column-ui-band .column-h4 {
  color: var(--column-primary-strong);
}

/* Card */

.column-content.column-ui-band .column-card,
.column-content.column-ui-band .column-info-box {
  padding: 22px 24px;
  background: var(--column-surface-alt);
}

.column-content.column-ui-band .column-card__title,
.column-content.column-ui-band .column-info-box__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-band .column-info-box {
  border-left: 5px solid var(--column-primary);
  background: var(--column-primary-soft);
}

/* Number Card */

.column-content.column-ui-band .column-number-card {
  padding: 20px 22px;
  background: var(--column-surface-alt);
}

.column-content.column-ui-band .column-number-card__index {
  border-radius: var(--column-radius-sm);
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-band .column-number-card__title {
  color: var(--column-primary-strong);
}

/* Step */

.column-content.column-ui-band .column-step {
  padding: 20px 22px;
  background: var(--column-surface-alt);
}

.column-content.column-ui-band .column-step__index {
  border-radius: var(--column-radius-sm);
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-band .column-step__title {
  color: var(--column-primary-strong);
}

/* Compare */

.column-content.column-ui-band .column-compare__item {
  background: var(--column-surface-alt);
}

.column-content.column-ui-band .column-compare__title {
  padding: 14px 18px;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-band .column-compare__body {
  padding: 18px;
}

/* Table */

.column-content.column-ui-band .column-table-wrap {
  border-radius: var(--column-radius-sm);
}

.column-content.column-ui-band .column-table th,
.column-content.column-ui-band .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-band .column-table thead th {
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-band .column-table tbody th {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-band .column-table tr:last-child th,
.column-content.column-ui-band .column-table tr:last-child td {
  border-bottom: 0;
}

/* Checklist */

.column-content.column-ui-band .column-checklist {
  padding: 20px 22px;
  background: var(--column-surface-alt);
}

.column-content.column-ui-band .column-checklist__item::before {
  content: "▸";
  color: var(--column-primary);
}

/* List */

.column-content.column-ui-band .column-list {
  padding: 6px 16px;
  background: var(--column-surface-alt);
}

.column-content.column-ui-band .column-list > li::before {
  border-radius: var(--column-radius-sm);
  background: var(--column-primary);
}

.column-content.column-ui-band .column-list--ordered > li::before,
.column-content.column-ui-band ol.column-list > li::before {
  border-radius: var(--column-radius-sm);
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-band .column-list .column-list {
  padding: 0;
  background: transparent;
}

/* Details */

.column-content.column-ui-band .column-details,
.column-content.column-ui-band > .column-details__body {
  padding: 16px 20px;
  background: var(--column-secondary-soft);
}

.column-content.column-ui-band .column-details__summary {
  color: var(--column-primary-strong);
}

/* FAQ */

.column-content.column-ui-band .column-faq__item {
  background: var(--column-surface-alt);
}

.column-content.column-ui-band .column-faq__question {
  padding: 16px 20px;
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-band .column-faq__answer {
  padding: 18px 20px;
}

/* CTA */

.column-content.column-ui-band .column-cta {
  padding: 28px 24px;
  border-left: 5px solid var(--column-primary);
  background: var(--column-primary-soft);
}

.column-content.column-ui-band .column-button {
  padding: 14px 32px;
  border: 0;
  border-radius: var(--column-radius-sm);
  background-color: var(--column-primary);
  background-image: linear-gradient(
    105deg,
    transparent 32%,
    rgb(255 255 255 / 0.16) 50%,
    transparent 68%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  color: #ffffff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--column-primary) 28%, transparent);
  animation: column-button-sheen 3.6s ease-in-out infinite;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    filter 0.15s ease;
}

.column-content.column-ui-band .column-button:hover,
.column-content.column-ui-band .column-button:focus-visible {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--column-primary) 38%, transparent);
  transform: translateY(-2px);
  filter: brightness(0.92);
  animation-play-state: paused;
}

.column-content.column-ui-band .column-button:active {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--column-primary) 24%, transparent);
  transform: translateY(0);
  filter: brightness(0.96);
}

/* Divider */

.column-content.column-ui-band .column-divider {
  border-top: 1px solid var(--column-border);
}

@media (max-width: 640px) {
  .column-content.column-ui-band .column-summary,
  .column-content.column-ui-band .column-card,
  .column-content.column-ui-band .column-info-box,
  .column-content.column-ui-band .column-number-card,
  .column-content.column-ui-band .column-step,
  .column-content.column-ui-band .column-list,
  .column-content.column-ui-band .column-cta {
    padding-left: 18px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   FORMAT: elevated
   ========================================================================== */

/**
 * Medical Column - Elevated UI Format
 *
 * 둥근 면과 그림자로 정보 단위를 띄운 카드형 UI.
 * Soft Card와 같이 전 컴포넌트를 한 세트로 맞추되, 흰 면 + 그림자를 씁니다.
 * 사용:
 * <div class="column-content column-ui-elevated">
 */
.column-content.column-ui-elevated {
  background: #ffffff;
}


/* Summary */

.column-content.column-ui-elevated .column-summary {
  padding: 22px 24px;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-summary__title {
  color: var(--column-primary);
}

/* Blockquote */

.column-content.column-ui-elevated .column-blockquote {
  padding: 20px 22px;
  border-radius: var(--column-radius-lg);
  background: var(--column-surface);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-blockquote--warning {
  background: var(--column-danger-soft);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--column-danger) 10%, transparent);
}

.column-content.column-ui-elevated .column-blockquote--expert {
  background: var(--column-surface-alt);
}

/* TOC */

.column-content.column-ui-elevated .column-toc {
  padding: 24px;
  border-radius: var(--column-radius-lg);
  background: var(--column-secondary-soft);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-toc__title {
  color: var(--column-primary);
}

.column-content.column-ui-elevated .column-toc__link {
  padding: 8px 10px;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.column-content.column-ui-elevated .column-toc__link:hover,
.column-content.column-ui-elevated .column-toc__link:focus-visible {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-elevated .column-toc__link--sub {
  color: var(--column-muted);
}

/* Heading */

.column-content.column-ui-elevated .column-h2 {
  color: var(--column-primary-strong);
}

.column-content.column-ui-elevated .column-h3 {
  color: var(--column-primary-strong);
}

.column-content.column-ui-elevated .column-h4 {
  color: var(--column-primary-strong);
}

/* Card */

.column-content.column-ui-elevated .column-card,
.column-content.column-ui-elevated .column-info-box {
  padding: 22px 24px;
  border-radius: var(--column-radius-lg);
  background: var(--column-surface);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-card__title,
.column-content.column-ui-elevated .column-info-box__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-elevated .column-info-box {
  background: var(--column-primary-soft);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--column-primary) 12%, transparent);
}

/* Number Card */

.column-content.column-ui-elevated .column-number-card {
  padding: 20px 22px;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-number-card__index {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--column-primary);
  color: #ffffff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--column-primary) 38%, transparent);
}

.column-content.column-ui-elevated .column-number-card__title {
  color: var(--column-primary-strong);
}

/* Step */

.column-content.column-ui-elevated .column-step {
  padding: 20px 22px;
  border-radius: var(--column-radius-lg);
  background: var(--column-surface);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-step__index {
  border-radius: 50%;
  background: var(--column-primary);
  color: #ffffff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--column-primary) 38%, transparent);
}

.column-content.column-ui-elevated .column-step__title {
  color: var(--column-primary-strong);
}

/* Compare */

.column-content.column-ui-elevated .column-compare__item {
  border-radius: var(--column-radius-lg);
  background: var(--column-surface);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-compare__title {
  padding: 14px 18px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-elevated .column-compare__body {
  padding: 0 18px 18px;
}

/* Table */

.column-content.column-ui-elevated .column-table-wrap {
  border-radius: var(--column-radius-lg);
  background: var(--column-surface);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-table th,
.column-content.column-ui-elevated .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-elevated .column-table thead th {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-elevated .column-table tbody th {
  background: var(--column-surface-alt);
}

.column-content.column-ui-elevated .column-table tr:last-child th,
.column-content.column-ui-elevated .column-table tr:last-child td {
  border-bottom: 0;
}

/* Checklist */

.column-content.column-ui-elevated .column-checklist {
  padding: 20px 22px;
  border-radius: var(--column-radius-lg);
  background: var(--column-surface);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-checklist__item::before {
  content: "✓";
  color: var(--column-primary);
}

/* List */

.column-content.column-ui-elevated .column-list {
  padding: 6px 16px;
  border-radius: var(--column-radius-lg);
  background: var(--column-surface);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-list > li::before {
  background: var(--column-primary);
  border-radius: 50%;
}

.column-content.column-ui-elevated .column-list--ordered > li::before,
.column-content.column-ui-elevated ol.column-list > li::before {
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-elevated .column-list .column-list {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Details */

.column-content.column-ui-elevated .column-details,
.column-content.column-ui-elevated > .column-details__body {
  padding: 18px 20px;
  border-radius: var(--column-radius-lg);
  background: var(--column-surface);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-details__summary {
  color: var(--column-primary-strong);
}

/* FAQ */

.column-content.column-ui-elevated .column-faq__item {
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
}

.column-content.column-ui-elevated .column-faq__question {
  padding: 16px 20px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-elevated .column-faq__answer {
  padding: 16px 20px 18px;
  border-radius: 0 0 var(--column-radius-lg) var(--column-radius-lg);
  background: var(--column-surface);
}

/* CTA */

.column-content.column-ui-elevated .column-cta {
  padding: 32px 24px;
  border-radius: calc(var(--column-radius-lg) + 2px);
  background: var(--column-primary-soft);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--column-primary) 16%, transparent);
}

.column-content.column-ui-elevated .column-button {
  padding: 16px 38px;
  border: 0;
  border-radius: 999px;
  background-color: var(--column-primary);
  background-image: linear-gradient(
    105deg,
    transparent 32%,
    rgb(255 255 255 / 0.22) 50%,
    transparent 68%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  color: #ffffff;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--column-primary) 42%, transparent);
  animation: column-button-sheen 3.6s ease-in-out infinite;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    filter 0.15s ease;
}

.column-content.column-ui-elevated .column-button:hover,
.column-content.column-ui-elevated .column-button:focus-visible {
  box-shadow: 0 14px 32px color-mix(in srgb, var(--column-primary) 42%, transparent);
  transform: translateY(-2px);
  filter: brightness(0.92);
  animation-play-state: paused;
}

.column-content.column-ui-elevated .column-button:active {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--column-primary) 26%, transparent);
  transform: translateY(0);
  filter: brightness(0.96);
}

/* Divider */

.column-content.column-ui-elevated .column-divider {
  border-top: 1px solid var(--column-border);
}

@media (max-width: 640px) {
  .column-content.column-ui-elevated .column-summary,
  .column-content.column-ui-elevated .column-card,
  .column-content.column-ui-elevated .column-info-box,
  .column-content.column-ui-elevated .column-number-card,
  .column-content.column-ui-elevated .column-step,
  .column-content.column-ui-elevated .column-list,
  .column-content.column-ui-elevated .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: glow
   ========================================================================== */

/**
 * Medical Column - Glow UI Format
 *
 * Glow. 중요 요소에만 발광, 나머지는 솔리드 면.
 * 사용: <div class="column-content column-ui-glow">
 */

.column-content.column-ui-glow {
  background: #ffffff;
}

.column-content.column-ui-glow .column-summary {
  padding: 22px 24px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary);
  color: #ffffff;
  box-shadow:
    0 0 22px color-mix(in srgb, var(--column-primary) 32%, transparent),
    0 0 42px color-mix(in srgb, var(--column-primary) 22%, transparent);
}

.column-content.column-ui-glow .column-summary__title,
.column-content.column-ui-glow .column-summary__text {
  color: #ffffff;
}

.column-content.column-ui-glow .column-blockquote {
  padding: 18px 20px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-primary-soft);
}

.column-content.column-ui-glow .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-glow .column-toc {
  padding: 22px 24px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: var(--column-surface-alt);
}

.column-content.column-ui-glow .column-toc__title {
  color: var(--column-primary);
}

.column-content.column-ui-glow .column-toc__link {
  padding: 7px 10px;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
}

.column-content.column-ui-glow .column-toc__link:hover,
.column-content.column-ui-glow .column-toc__link:focus-visible {
  color: var(--column-primary-strong);
}

.column-content.column-ui-glow .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-glow .column-h2,
.column-content.column-ui-glow .column-h3,
.column-content.column-ui-glow .column-h4,
.column-content.column-ui-glow .column-card__title,
.column-content.column-ui-glow .column-info-box__title,
.column-content.column-ui-glow .column-number-card__title,
.column-content.column-ui-glow .column-step__title,
.column-content.column-ui-glow .column-details__summary {
  color: var(--column-primary-strong);
}

.column-content.column-ui-glow .column-card,
.column-content.column-ui-glow .column-number-card,
.column-content.column-ui-glow .column-step,
.column-content.column-ui-glow .column-checklist,
.column-content.column-ui-glow .column-list,
.column-content.column-ui-glow .column-details,
.column-content.column-ui-glow > .column-details__body,
.column-content.column-ui-glow .column-faq__item {
  padding: 20px 22px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-glow .column-info-box {
  padding: 22px 24px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
  box-shadow: 0 0 14px color-mix(in srgb, var(--column-primary) 22%, transparent);
}

.column-content.column-ui-glow .column-number-card__index,
.column-content.column-ui-glow .column-step__index {
  border-radius: 50%;
  background: var(--column-primary);
  color: #ffffff;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--column-primary) 78%, transparent),
    0 0 18px color-mix(in srgb, var(--column-primary) 48%, transparent);
}

.column-content.column-ui-glow .column-compare__item {
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-glow .column-compare__title {
  padding: 14px 18px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-glow .column-compare__body {
  padding: 18px;
}

.column-content.column-ui-glow .column-table-wrap {
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-glow .column-table th,
.column-content.column-ui-glow .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-glow .column-table thead th {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-glow .column-table tr:last-child th,
.column-content.column-ui-glow .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-glow .column-checklist__item::before {
  content: "✓";
  color: var(--column-primary);
}

.column-content.column-ui-glow .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-glow .column-list > li::before {
  background: var(--column-primary);
  border-radius: 50%;
}

.column-content.column-ui-glow .column-list--ordered > li::before,
.column-content.column-ui-glow ol.column-list > li::before {
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-glow .column-list .column-list {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.column-content.column-ui-glow .column-faq__question {
  padding: 16px 20px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-glow .column-faq__answer {
  padding: 0 20px 18px;
}

.column-content.column-ui-glow .column-cta {
  padding: 28px 24px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
  box-shadow: 0 0 16px color-mix(in srgb, var(--column-primary) 20%, transparent);
}

.column-content.column-ui-glow .column-button {
  padding: 16px 40px;
  border: 0;
  border-radius: var(--column-radius-md);
  background-color: var(--column-primary);
  background-image: linear-gradient(
    105deg,
    transparent 32%,
    rgb(255 255 255 / 0.34) 50%,
    transparent 68%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 0 18px color-mix(in srgb, var(--column-primary) 78%, transparent),
    0 0 40px color-mix(in srgb, var(--column-primary) 46%, transparent),
    0 10px 24px color-mix(in srgb, var(--column-primary) 32%, transparent);
  animation: column-button-sheen 3.2s ease-in-out infinite;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    filter 0.15s ease;
}

.column-content.column-ui-glow .column-button:hover,
.column-content.column-ui-glow .column-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  animation-play-state: paused;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.34),
    0 0 26px color-mix(in srgb, var(--column-primary) 88%, transparent),
    0 0 56px color-mix(in srgb, var(--column-primary) 56%, transparent),
    0 14px 28px color-mix(in srgb, var(--column-primary) 38%, transparent);
}

.column-content.column-ui-glow .column-divider {
  border-top: 1px solid var(--column-border);
}

@media (max-width: 640px) {
  .column-content.column-ui-glow .column-summary,
  .column-content.column-ui-glow .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: gradient
   ========================================================================== */

/**
 * Medical Column - Gradient UI Format
 *
 * Linear Gradient. 역할별로 방향을 고정합니다.
 * 면 180deg / 강조 박스 165deg / 액센트 135deg / 가로 요소 90deg.
 * 사용: <div class="column-content column-ui-gradient">
 */

.column-content.column-ui-gradient {
  background: #ffffff;
}

.column-content.column-ui-gradient .column-summary,
.column-content.column-ui-gradient .column-blockquote,
.column-content.column-ui-gradient .column-toc,
.column-content.column-ui-gradient .column-card,
.column-content.column-ui-gradient .column-info-box,
.column-content.column-ui-gradient .column-number-card,
.column-content.column-ui-gradient .column-step,
.column-content.column-ui-gradient .column-compare__item,
.column-content.column-ui-gradient .column-table-wrap,
.column-content.column-ui-gradient .column-checklist,
.column-content.column-ui-gradient .column-list,
.column-content.column-ui-gradient .column-details,
.column-content.column-ui-gradient > .column-details__body,
.column-content.column-ui-gradient .column-faq__item,
.column-content.column-ui-gradient .column-cta {
  border: 0;
  border-radius: var(--column-radius-lg);
}

.column-content.column-ui-gradient .column-blockquote,
.column-content.column-ui-gradient .column-toc,
.column-content.column-ui-gradient .column-compare__item,
.column-content.column-ui-gradient .column-checklist,
.column-content.column-ui-gradient .column-details,
.column-content.column-ui-gradient > .column-details__body {
  background: linear-gradient(180deg, var(--column-primary-soft), var(--column-surface));
}

.column-content.column-ui-gradient .column-card,
.column-content.column-ui-gradient .column-number-card,
.column-content.column-ui-gradient .column-step,
.column-content.column-ui-gradient .column-list {
  background: linear-gradient(180deg, var(--column-surface-alt), var(--column-surface));
}

.column-content.column-ui-gradient .column-summary,
.column-content.column-ui-gradient .column-info-box,
.column-content.column-ui-gradient .column-cta {
  background: linear-gradient(
    165deg,
    var(--column-primary-soft),
    color-mix(in srgb, var(--column-primary-soft) 32%, var(--column-surface))
  );
}

.column-content.column-ui-gradient .column-summary,
.column-content.column-ui-gradient .column-toc,
.column-content.column-ui-gradient .column-card,
.column-content.column-ui-gradient .column-info-box,
.column-content.column-ui-gradient .column-number-card,
.column-content.column-ui-gradient .column-step,
.column-content.column-ui-gradient .column-checklist,
.column-content.column-ui-gradient .column-cta {
  padding: 22px 24px;
}

.column-content.column-ui-gradient .column-summary__title,
.column-content.column-ui-gradient .column-toc__title {
  color: var(--column-primary);
}

.column-content.column-ui-gradient .column-blockquote {
  padding: 18px 20px;
}

.column-content.column-ui-gradient .column-blockquote--warning {
  background: linear-gradient(180deg, var(--column-danger-soft), var(--column-surface));
}

.column-content.column-ui-gradient .column-toc__link {
  padding: 7px 10px;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
}

.column-content.column-ui-gradient .column-toc__link:hover,
.column-content.column-ui-gradient .column-toc__link:focus-visible {
  color: var(--column-primary-strong);
}

.column-content.column-ui-gradient .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-gradient .column-h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--column-primary) 35%, var(--column-border));
  color: var(--column-primary-strong);
}

.column-content.column-ui-gradient .column-h3,
.column-content.column-ui-gradient .column-h4,
.column-content.column-ui-gradient .column-card__title,
.column-content.column-ui-gradient .column-info-box__title,
.column-content.column-ui-gradient .column-number-card__title,
.column-content.column-ui-gradient .column-step__title,
.column-content.column-ui-gradient .column-details__summary {
  color: var(--column-primary-strong);
}





.column-content.column-ui-gradient .column-number-card__index,
.column-content.column-ui-gradient .column-step__index {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--column-primary), var(--column-primary-strong));
  color: #ffffff;
}

.column-content.column-ui-gradient .column-compare__title {
  padding: 14px 18px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-gradient .column-compare__body {
  padding: 18px;
}

.column-content.column-ui-gradient .column-table-wrap {
  background: var(--column-surface);
}

.column-content.column-ui-gradient .column-table th,
.column-content.column-ui-gradient .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-gradient .column-table thead th {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
  box-shadow: inset 0 -1px 0 var(--column-border);
}

.column-content.column-ui-gradient .column-table tbody th,
.column-content.column-ui-gradient .column-table tbody td {
  background: var(--column-surface);
}

.column-content.column-ui-gradient .column-table tr:last-child th,
.column-content.column-ui-gradient .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-gradient .column-checklist__item::before {
  content: "✓";
  color: var(--column-primary);
}

.column-content.column-ui-gradient .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-gradient .column-list > li::before {
  border-radius: 50%; background: var(--column-primary);
}

.column-content.column-ui-gradient .column-list--ordered > li::before,
.column-content.column-ui-gradient ol.column-list > li::before {
  background: linear-gradient(135deg, var(--column-primary), var(--column-primary-strong));
  color: #ffffff;
}

.column-content.column-ui-gradient .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  backdrop-filter: none;
}

.column-content.column-ui-gradient .column-details,
.column-content.column-ui-gradient > .column-details__body {
  padding: 16px 20px;
}

.column-content.column-ui-gradient .column-faq__item {
  background: linear-gradient(
    165deg,
    var(--column-primary-soft),
    color-mix(in srgb, var(--column-primary-soft) 32%, var(--column-surface))
  );
}

.column-content.column-ui-gradient .column-faq__question {
  padding: 16px 20px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-gradient .column-faq__answer {
  padding: 16px 20px 18px;
  border-radius: 0 0 var(--column-radius-lg) var(--column-radius-lg);
  background: var(--column-surface);
}

.column-content.column-ui-gradient .column-cta {
  padding: 32px 24px;
  background: linear-gradient(
    165deg,
    var(--column-primary-soft),
    color-mix(in srgb, var(--column-primary-soft) 58%, var(--column-surface)) 46%,
    color-mix(in srgb, var(--column-primary-soft) 28%, var(--column-surface))
  );
}

.column-content.column-ui-gradient .column-button {
  padding: 16px 40px;
  border: 0;
  border-radius: var(--column-radius-md);
  background-color: var(--column-primary);
  background-image:
    linear-gradient(
      105deg,
      transparent 32%,
      rgb(255 255 255 / 0.32) 50%,
      transparent 68%
    ),
    linear-gradient(135deg, var(--column-primary), var(--column-primary-strong));
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0, 0 0;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    0 12px 28px color-mix(in srgb, var(--column-primary) 40%, transparent);
  animation: column-ui-gradient-sheen 3.2s ease-in-out infinite;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    filter 0.15s ease;
}

.column-content.column-ui-gradient .column-button:hover,
.column-content.column-ui-gradient .column-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  animation-play-state: paused;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    0 16px 34px color-mix(in srgb, var(--column-primary) 48%, transparent);
}

@keyframes column-ui-gradient-sheen {
  0%,
  18% {
    background-position: 180% 0, 0 0;
  }

  52%,
  100% {
    background-position: -80% 0, 0 0;
  }
}

.column-content.column-ui-gradient .column-divider {
  border: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--column-primary), transparent);
}


@media (max-width: 640px) {
  .column-content.column-ui-gradient .column-summary,
  .column-content.column-ui-gradient .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: duotone
   ========================================================================== */

/**
 * Medical Column - Duotone UI Format
 *
 * Duotone. 포인트에만 고대비, 나머지는 얇은 면.
 * 사용: <div class="column-content column-ui-duotone">
 */

.column-content.column-ui-duotone {
  background: #ffffff;
}

.column-content.column-ui-duotone .column-summary {
  padding: 22px 24px;
  border: 0;
  background: var(--column-primary);
  color: #ffffff;
  box-shadow: 8px 8px 0 var(--column-heading);
}

.column-content.column-ui-duotone .column-summary__title,
.column-content.column-ui-duotone .column-summary__text {
  color: #ffffff;
}

.column-content.column-ui-duotone .column-blockquote {
  padding: 18px 20px;
  border: 0;
  background: var(--column-primary-soft);
}

.column-content.column-ui-duotone .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-duotone .column-toc {
  padding: 22px 24px;
  border: 0;
  background: var(--column-surface-alt);
}

.column-content.column-ui-duotone .column-toc__title {
  color: var(--column-heading);
}

.column-content.column-ui-duotone .column-toc__link {
  padding: 7px 10px;
  color: var(--column-text);
}

.column-content.column-ui-duotone .column-toc__link:hover,
.column-content.column-ui-duotone .column-toc__link:focus-visible {
  color: var(--column-primary);
}

.column-content.column-ui-duotone .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-duotone .column-h2 {
  padding: 8px 12px;
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-duotone .column-h3,
.column-content.column-ui-duotone .column-h4,
.column-content.column-ui-duotone .column-card__title,
.column-content.column-ui-duotone .column-number-card__title,
.column-content.column-ui-duotone .column-step__title,
.column-content.column-ui-duotone .column-details__summary {
  color: var(--column-heading);
}

.column-content.column-ui-duotone .column-card,
.column-content.column-ui-duotone .column-number-card,
.column-content.column-ui-duotone .column-step,
.column-content.column-ui-duotone .column-checklist,
.column-content.column-ui-duotone .column-list,
.column-content.column-ui-duotone .column-details,
.column-content.column-ui-duotone > .column-details__body,
.column-content.column-ui-duotone .column-compare__item {
  padding: 20px 22px;
  border: 0;
  background: var(--column-surface-alt);
}

.column-content.column-ui-duotone .column-info-box {
  padding: 22px 24px;
  border: 0;
  background: var(--column-primary);
  color: #ffffff;
  box-shadow: 8px 8px 0 var(--column-heading);
}

.column-content.column-ui-duotone .column-info-box__title,
.column-content.column-ui-duotone .column-info-box {
  color: #ffffff;
}

.column-content.column-ui-duotone .column-number-card__index,
.column-content.column-ui-duotone .column-step__index {
  border-radius: 0;
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-duotone .column-compare__title {
  padding: 14px 18px;
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-duotone .column-compare__body {
  padding: 18px;
}

.column-content.column-ui-duotone .column-table-wrap {
  overflow: hidden;
  border: 0;
  background: var(--column-surface-alt);
}

.column-content.column-ui-duotone .column-table th,
.column-content.column-ui-duotone .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--column-heading) 12%, transparent);
}

.column-content.column-ui-duotone .column-table thead th {
  padding: 16px 18px;
  background: var(--column-heading);
  color: #ffffff;
  letter-spacing: 0.02em;
  box-shadow: inset 0 -3px 0 var(--column-primary);
}

.column-content.column-ui-duotone .column-table tbody th,
.column-content.column-ui-duotone .column-table tbody td {
  background: transparent;
}

.column-content.column-ui-duotone .column-table tr:last-child th,
.column-content.column-ui-duotone .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-duotone .column-checklist__item::before {
  content: "■";
  color: var(--column-heading);
}

.column-content.column-ui-duotone .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-duotone .column-list > li::before {
  border-radius: 0;
  background: var(--column-heading);
}

.column-content.column-ui-duotone .column-list--ordered > li::before,
.column-content.column-ui-duotone ol.column-list > li::before {
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-duotone .column-list .column-list {
  padding: 0;
  background: transparent;
}

.column-content.column-ui-duotone .column-faq__item {
  overflow: hidden;
  border: 0;
  background: var(--column-surface-alt);
}

.column-content.column-ui-duotone .column-faq__question {
  padding: 16px 20px;
  background: var(--column-primary);
  color: #ffffff;
  box-shadow: inset 0 -3px 0 var(--column-heading);
}

.column-content.column-ui-duotone .column-faq__answer {
  padding: 16px 20px 18px;
}

.column-content.column-ui-duotone .column-cta {
  padding: 28px 24px;
  border: 0;
  background: var(--column-heading);
  color: #ffffff;
  box-shadow: 8px 8px 0 var(--column-primary);
}

.column-content.column-ui-duotone .column-button {
  padding: 14px 32px;
  border: 0;
  border-radius: 0;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-duotone .column-button:hover,
.column-content.column-ui-duotone .column-button:focus-visible {
  background: #ffffff;
  color: var(--column-heading);
}

.column-content.column-ui-duotone .column-divider {
  border-top: 3px solid var(--column-heading);
}

/* ==========================================================================
   FORMAT: iridescent
   ========================================================================== */

/**
 * Medical Column - Iridescent UI Format
 *
 * Iridescent. 방향·톤이 다른 유광 면.
 * 사용: <div class="column-content column-ui-iridescent">
 */

.column-content.column-ui-iridescent {
  background: #ffffff;
}

.column-content.column-ui-iridescent .column-summary {
  padding: 22px 24px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: linear-gradient(118deg, var(--column-primary-soft), var(--column-secondary-soft) 45%, color-mix(in srgb, var(--column-primary) 12%, #ffffff));
}

.column-content.column-ui-iridescent .column-toc {
  padding: 22px 24px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: linear-gradient(210deg, var(--column-secondary-soft), var(--column-primary-soft));
}

.column-content.column-ui-iridescent .column-cta {
  padding: 28px 24px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: conic-gradient(from 200deg at 20% 20%, var(--column-primary-soft), var(--column-secondary-soft), var(--column-primary-soft));
}

.column-content.column-ui-iridescent .column-info-box {
  padding: 22px 24px;
  border: 1px solid transparent;
  border-radius: var(--column-radius-lg);
  background:
    linear-gradient(var(--column-primary-soft), var(--column-primary-soft)) padding-box,
    linear-gradient(90deg, var(--column-primary), var(--column-primary-strong), var(--column-primary)) border-box;
}

.column-content.column-ui-iridescent .column-blockquote,
.column-content.column-ui-iridescent .column-card,
.column-content.column-ui-iridescent .column-number-card,
.column-content.column-ui-iridescent .column-step,
.column-content.column-ui-iridescent .column-checklist,
.column-content.column-ui-iridescent .column-list,
.column-content.column-ui-iridescent .column-details,
.column-content.column-ui-iridescent > .column-details__body {
  padding: 18px 20px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-iridescent .column-summary__title,
.column-content.column-ui-iridescent .column-toc__title {
  color: var(--column-primary-strong);
}

.column-content.column-ui-iridescent .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-iridescent .column-toc__link {
  padding: 7px 10px;
  color: var(--column-text);
}

.column-content.column-ui-iridescent .column-toc__link:hover,
.column-content.column-ui-iridescent .column-toc__link:focus-visible {
  color: var(--column-primary-strong);
}

.column-content.column-ui-iridescent .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-iridescent .column-h2 {
  background: linear-gradient(90deg, var(--column-primary), var(--column-primary-strong));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--column-primary);
}

.column-content.column-ui-iridescent .column-h3,
.column-content.column-ui-iridescent .column-h4,
.column-content.column-ui-iridescent .column-card__title,
.column-content.column-ui-iridescent .column-info-box__title,
.column-content.column-ui-iridescent .column-number-card__title,
.column-content.column-ui-iridescent .column-step__title,
.column-content.column-ui-iridescent .column-details__summary {
  color: var(--column-primary-strong);
}

.column-content.column-ui-iridescent .column-number-card__index,
.column-content.column-ui-iridescent .column-step__index {
  border-radius: 50%;
  background: conic-gradient(from 120deg, var(--column-primary), var(--column-primary-strong), var(--column-primary));
  color: #ffffff;
}

.column-content.column-ui-iridescent .column-compare__item {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-iridescent .column-compare__title {
  padding: 14px 18px;
  background: linear-gradient(118deg, var(--column-primary-soft), var(--column-secondary-soft) 55%, var(--column-primary-soft));
  color: var(--column-primary-strong);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--column-primary) 22%, transparent);
}

.column-content.column-ui-iridescent .column-compare__item:nth-child(2) .column-compare__title {
  background: linear-gradient(210deg, var(--column-secondary-soft), var(--column-primary-soft) 55%, var(--column-secondary-soft));
}

.column-content.column-ui-iridescent .column-compare__body {
  padding: 16px 20px 18px;
  background: var(--column-surface);
}

.column-content.column-ui-iridescent .column-table-wrap {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface);
}

.column-content.column-ui-iridescent .column-table th,
.column-content.column-ui-iridescent .column-table td {
  padding: 14px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--column-primary) 12%, transparent);
}

.column-content.column-ui-iridescent .column-table thead th {
  padding: 15px 20px;
  background: linear-gradient(90deg, var(--column-primary-soft), var(--column-secondary-soft) 55%, var(--column-primary-soft));
  color: var(--column-primary-strong);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--column-primary) 22%, transparent);
}

.column-content.column-ui-iridescent .column-table tbody th {
  color: var(--column-primary-strong);
}

.column-content.column-ui-iridescent .column-table tr:last-child th,
.column-content.column-ui-iridescent .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-iridescent .column-checklist__item::before {
  content: "◆";
  color: var(--column-primary);
}

.column-content.column-ui-iridescent .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-iridescent .column-list > li::before {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--column-primary), var(--column-primary-strong));
}

.column-content.column-ui-iridescent .column-list--ordered > li::before,
.column-content.column-ui-iridescent ol.column-list > li::before {
  background: linear-gradient(135deg, var(--column-primary), var(--column-primary-strong));
  color: #ffffff;
}

.column-content.column-ui-iridescent .column-list .column-list {
  padding: 0;
  background: transparent;
}

.column-content.column-ui-iridescent .column-faq__item {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-iridescent .column-faq__question {
  padding: 16px 20px 12px;
  color: var(--column-heading);
}

.column-content.column-ui-iridescent .column-faq__answer {
  padding: 0 20px 16px;
  color: var(--column-muted);
}

.column-content.column-ui-iridescent .column-button {
  padding: 14px 36px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: conic-gradient(from 210deg, var(--column-primary), var(--column-primary-strong), var(--column-primary-strong), var(--column-primary));
  color: #ffffff;
}

.column-content.column-ui-iridescent .column-button:hover,
.column-content.column-ui-iridescent .column-button:focus-visible {
  filter: saturate(1.2);
}

.column-content.column-ui-iridescent .column-divider {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--column-primary-strong), var(--column-primary), var(--column-primary-strong));
}

@media (max-width: 640px) {
  .column-content.column-ui-iridescent .column-summary,
  .column-content.column-ui-iridescent .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: spotlight
   ========================================================================== */

/**
 * Medical Column - Spotlight UI Format
 *
 * Spotlight. 강조만 브랜드 색 + 페이드 선, 나머지는 회색 면.
 * 사용: <div class="column-content column-ui-spotlight">
 */

.column-content.column-ui-spotlight {
  background: #ffffff;
}

/* Hero */

.column-content.column-ui-spotlight .column-summary,
.column-content.column-ui-spotlight .column-info-box,
.column-content.column-ui-spotlight .column-cta {
  overflow: hidden;
  padding: 24px 26px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background:
    radial-gradient(36% 52% at 50% 0%, color-mix(in srgb, var(--column-primary) 38%, #ffffff), transparent 62%),
    radial-gradient(82% 88% at 50% 6%, color-mix(in srgb, var(--column-primary) 12%, transparent), transparent 72%);
}

.column-content.column-ui-spotlight .column-cta {
  padding: 32px 26px;
  background:
    radial-gradient(40% 58% at 50% 0%, color-mix(in srgb, var(--column-primary) 46%, #ffffff), transparent 60%),
    radial-gradient(90% 96% at 50% 8%, color-mix(in srgb, var(--column-primary) 16%, transparent), transparent 72%);
}

.column-content.column-ui-spotlight .column-summary__title,
.column-content.column-ui-spotlight .column-info-box__title {
  margin-bottom: 12px !important;
  color: var(--column-primary);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* Quiet stage */

.column-content.column-ui-spotlight .column-toc,
.column-content.column-ui-spotlight .column-card,
.column-content.column-ui-spotlight .column-number-card,
.column-content.column-ui-spotlight .column-step,
.column-content.column-ui-spotlight .column-checklist,
.column-content.column-ui-spotlight .column-list,
.column-content.column-ui-spotlight .column-details,
.column-content.column-ui-spotlight > .column-details__body,
.column-content.column-ui-spotlight .column-faq__item {
  padding: 18px 20px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-spotlight .column-blockquote {
  padding: 18px 20px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-spotlight .column-blockquote--intro,
.column-content.column-ui-spotlight .column-blockquote--conclusion {
  overflow: hidden;
  padding: 20px 22px;
  border-radius: var(--column-radius-lg);
  background:
    radial-gradient(36% 52% at 50% 0%, color-mix(in srgb, var(--column-primary) 38%, #ffffff), transparent 62%),
    radial-gradient(82% 88% at 50% 6%, color-mix(in srgb, var(--column-primary) 12%, transparent), transparent 72%);
}

.column-content.column-ui-spotlight .column-blockquote--warning {
  background:
    radial-gradient(36% 52% at 50% 0%, color-mix(in srgb, var(--column-danger) 28%, #ffffff), transparent 62%),
    radial-gradient(82% 88% at 50% 6%, color-mix(in srgb, var(--column-danger) 10%, transparent), transparent 72%);
}

.column-content.column-ui-spotlight .column-blockquote--expert {
  background: color-mix(in srgb, var(--column-heading) 4%, #ffffff);
  box-shadow: none;
}

.column-content.column-ui-spotlight .column-toc__title {
  margin-bottom: 14px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--column-border);
  color: var(--column-heading);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.column-content.column-ui-spotlight .column-toc__link {
  padding: 7px 0;
  color: var(--column-text);
}

.column-content.column-ui-spotlight .column-toc__link:hover,
.column-content.column-ui-spotlight .column-toc__link:focus-visible {
  color: var(--column-heading);
}

.column-content.column-ui-spotlight .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-spotlight .column-h2 {
  color: var(--column-primary-strong);
}

.column-content.column-ui-spotlight .column-h3 {
  margin-bottom: 18px;
}

.column-content.column-ui-spotlight .column-h3,
.column-content.column-ui-spotlight .column-h4,
.column-content.column-ui-spotlight .column-card__title,
.column-content.column-ui-spotlight .column-number-card__title,
.column-content.column-ui-spotlight .column-step__title,
.column-content.column-ui-spotlight .column-details__summary {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--column-border);
  color: var(--column-heading);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.column-content.column-ui-spotlight .column-card__title,
.column-content.column-ui-spotlight .column-number-card__title,
.column-content.column-ui-spotlight .column-step__title {
  margin-bottom: 12px !important;
}

.column-content.column-ui-spotlight .column-step {
  align-items: start;
}

.column-content.column-ui-spotlight .column-number-card__index,
.column-content.column-ui-spotlight .column-step__index {
  border-radius: 50%;
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-spotlight .column-compare__item {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-spotlight .column-compare__title {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--column-border);
  color: var(--column-heading);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.column-content.column-ui-spotlight .column-compare__body {
  padding: 16px 20px 18px;
}

.column-content.column-ui-spotlight .column-table-wrap {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-surface-alt);
}

.column-content.column-ui-spotlight .column-table th,
.column-content.column-ui-spotlight .column-table td {
  padding: 14px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--column-heading) 8%, transparent);
}

.column-content.column-ui-spotlight .column-table thead th {
  padding-top: 15px;
  padding-bottom: 15px;
  color: var(--column-heading);
  box-shadow: inset 0 -1px 0 var(--column-border);
}

.column-content.column-ui-spotlight .column-table tbody th {
  color: var(--column-heading);
}

.column-content.column-ui-spotlight .column-table tr:last-child th,
.column-content.column-ui-spotlight .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-spotlight .column-checklist__item::before {
  content: "✓";
  color: var(--column-heading);
}

.column-content.column-ui-spotlight .column-list > li::before {
  border-radius: 50%;
  background: var(--column-heading);
}

.column-content.column-ui-spotlight .column-list--ordered > li::before,
.column-content.column-ui-spotlight ol.column-list > li::before {
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-spotlight .column-list {
  padding: 8px 20px;
}

.column-content.column-ui-spotlight .column-list .column-list {
  padding: 0;
  background: transparent;
}

.column-content.column-ui-spotlight .column-faq__question {
  padding: 0 0 8px;
  border-bottom: 1px solid var(--column-border);
  color: var(--column-heading);
  letter-spacing: -0.02em;
}

.column-content.column-ui-spotlight .column-faq__answer {
  padding: 14px 0 0;
  color: var(--column-muted);
}

.column-content.column-ui-spotlight .column-button {
  padding: 16px 40px;
  border: 0;
  border-radius: 999px;
  background-color: var(--column-primary);
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    rgb(255 255 255 / 0.42) 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 180%;
  background-position: 50% 220%;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    0 14px 28px color-mix(in srgb, var(--column-primary) 30%, transparent);
  animation: column-ui-spotlight-scan 3s linear infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.column-content.column-ui-spotlight .column-button:hover,
.column-content.column-ui-spotlight .column-button:focus-visible {
  transform: translateY(-2px);
  animation: column-ui-spotlight-strike 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 18px 34px color-mix(in srgb, var(--column-primary) 38%, transparent);
}

@keyframes column-ui-spotlight-scan {
  0% {
    background-position: 50% 220%;
  }

  100% {
    background-position: 50% -180%;
  }
}

@keyframes column-ui-spotlight-strike {
  0% {
    background-size: 100% 180%;
    background-position: 50% 200%;
    filter: brightness(1);
  }

  100% {
    background-size: 100% 160%;
    background-position: 50% -8%;
    filter: brightness(1.1);
  }
}

.column-content.column-ui-spotlight .column-divider {
  border: 0;
  height: 3px;
  background: radial-gradient(
    42% 100% at 50% 50%,
    color-mix(in srgb, var(--column-primary) 88%, #ffffff),
    color-mix(in srgb, var(--column-primary) 28%, transparent) 42%,
    transparent 74%
  );
}

@media (max-width: 640px) {
  .column-content.column-ui-spotlight .column-summary,
  .column-content.column-ui-spotlight .column-cta,
  .column-content.column-ui-spotlight .column-info-box {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: vignette
   ========================================================================== */

/**
 * Medical Column - Vignette UI Format
 *
 * Vignette. 각진 무채색 프레임, 강조만 비네트, 포인트 글씨만 컬러.
 * 사용: <div class="column-content column-ui-vignette">
 */

.column-content.column-ui-vignette {
  --column-vignette-radius: 4px;
  --column-vignette-border: color-mix(in srgb, #000 22%, transparent);
  background: #ffffff;
}

.column-content.column-ui-vignette .column-summary,
.column-content.column-ui-vignette .column-blockquote,
.column-content.column-ui-vignette .column-toc,
.column-content.column-ui-vignette .column-card,
.column-content.column-ui-vignette .column-info-box,
.column-content.column-ui-vignette .column-number-card,
.column-content.column-ui-vignette .column-step,
.column-content.column-ui-vignette .column-compare__item,
.column-content.column-ui-vignette .column-table-wrap,
.column-content.column-ui-vignette .column-checklist,
.column-content.column-ui-vignette .column-list,
.column-content.column-ui-vignette .column-details,
.column-content.column-ui-vignette > .column-details__body,
.column-content.column-ui-vignette .column-faq__item,
.column-content.column-ui-vignette .column-cta,
.column-content.column-ui-vignette .column-button {
  border-radius: var(--column-vignette-radius);
}

.column-content.column-ui-vignette .column-summary {
  margin-bottom: 40px;
}

.column-content.column-ui-vignette .column-blockquote {
  margin: 48px 0;
}

.column-content.column-ui-vignette .column-toc {
  margin-bottom: 56px;
}

.column-content.column-ui-vignette .column-h2 {
  margin: 64px 0 28px;
}

.column-content.column-ui-vignette .column-h3 {
  margin: 40px 0 20px;
}

.column-content.column-ui-vignette .column-h4 {
  margin: 32px 0 16px;
}

.column-content.column-ui-vignette .column-card,
.column-content.column-ui-vignette .column-info-box,
.column-content.column-ui-vignette .column-number-list,
.column-content.column-ui-vignette .column-step-list,
.column-content.column-ui-vignette .column-compare,
.column-content.column-ui-vignette .column-checklist,
.column-content.column-ui-vignette .column-list,
.column-content.column-ui-vignette .column-details {
  margin-top: 36px;
  margin-bottom: 36px;
}

.column-content.column-ui-vignette .column-number-list,
.column-content.column-ui-vignette .column-step-list {
  gap: 20px;
}

.column-content.column-ui-vignette .column-compare {
  gap: 20px;
}

.column-content.column-ui-vignette .column-table-wrap {
  margin: 36px 0 48px;
}

.column-content.column-ui-vignette .column-faq {
  margin-top: 64px;
}

.column-content.column-ui-vignette .column-faq__item {
  margin-bottom: 20px;
}

.column-content.column-ui-vignette .column-cta {
  margin: 64px 0;
}

/* Hero: vignette only */

.column-content.column-ui-vignette .column-summary,
.column-content.column-ui-vignette .column-info-box,
.column-content.column-ui-vignette .column-cta {
  overflow: hidden;
  padding: 32px 36px;
  border: 0;
  background:
    radial-gradient(
      88% 72% at 50% 42%,
      var(--column-surface),
      color-mix(in srgb, var(--column-heading) 12%, var(--column-surface-alt))
    );
  box-shadow: inset 0 0 52px color-mix(in srgb, var(--column-heading) 22%, transparent);
}

.column-content.column-ui-vignette .column-cta {
  padding: 40px 36px;
  background:
    radial-gradient(
      76% 66% at 50% 42%,
      color-mix(in srgb, #000 36%, #c8c8c8),
      #2e2e2e
    );
  box-shadow: inset 0 0 80px rgb(0 0 0 / 0.38);
}

.column-content.column-ui-vignette .column-summary__title,
.column-content.column-ui-vignette .column-toc__title,
.column-content.column-ui-vignette .column-info-box__title {
  margin-bottom: 16px !important;
  color: var(--column-primary);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* Quiet: solid gray + same black line */

.column-content.column-ui-vignette .column-blockquote,
.column-content.column-ui-vignette .column-toc,
.column-content.column-ui-vignette .column-card,
.column-content.column-ui-vignette .column-number-card,
.column-content.column-ui-vignette .column-step,
.column-content.column-ui-vignette .column-compare__item,
.column-content.column-ui-vignette .column-table-wrap,
.column-content.column-ui-vignette .column-checklist,
.column-content.column-ui-vignette .column-list,
.column-content.column-ui-vignette .column-details,
.column-content.column-ui-vignette > .column-details__body,
.column-content.column-ui-vignette .column-faq__item {
  padding: 24px 28px;
  border: 0;
  background: var(--column-surface-alt);
  box-shadow: none;
}

.column-content.column-ui-vignette .column-blockquote,
.column-content.column-ui-vignette .column-toc,
.column-content.column-ui-vignette .column-card,
.column-content.column-ui-vignette .column-number-card,
.column-content.column-ui-vignette .column-step,
.column-content.column-ui-vignette .column-compare__item,
.column-content.column-ui-vignette .column-faq__item {
  overflow: hidden;
  background:
    radial-gradient(
      100% 86% at 50% 42%,
      var(--column-surface),
      color-mix(in srgb, var(--column-heading) 5%, var(--column-surface-alt))
    );
  box-shadow: inset 0 0 28px color-mix(in srgb, var(--column-heading) 10%, transparent);
}

.column-content.column-ui-vignette .column-blockquote--intro,
.column-content.column-ui-vignette .column-blockquote--conclusion {
  overflow: hidden;
  padding: 28px 32px;
  background:
    radial-gradient(
      88% 72% at 50% 42%,
      var(--column-surface),
      color-mix(in srgb, var(--column-heading) 12%, var(--column-surface-alt))
    );
  box-shadow: inset 0 0 52px color-mix(in srgb, var(--column-heading) 22%, transparent);
}

.column-content.column-ui-vignette .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-vignette .column-blockquote--expert {
  background: var(--column-surface-alt);
  box-shadow: none;
}

.column-content.column-ui-vignette .column-toc__link {
  padding: 8px 0;
  color: var(--column-text);
}

.column-content.column-ui-vignette .column-toc__link:hover,
.column-content.column-ui-vignette .column-toc__link:focus-visible {
  color: var(--column-primary);
}

.column-content.column-ui-vignette .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-vignette .column-h2 {
  color: var(--column-primary-strong);
  letter-spacing: -0.02em;
}

.column-content.column-ui-vignette .column-h3,
.column-content.column-ui-vignette .column-h4,
.column-content.column-ui-vignette .column-card__title,
.column-content.column-ui-vignette .column-number-card__title,
.column-content.column-ui-vignette .column-step__title,
.column-content.column-ui-vignette .column-details__summary {
  color: var(--column-heading);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.column-content.column-ui-vignette .column-card__title,
.column-content.column-ui-vignette .column-number-card__title,
.column-content.column-ui-vignette .column-step__title {
  margin-bottom: 14px !important;
}

.column-content.column-ui-vignette .column-step {
  align-items: start;
}

.column-content.column-ui-vignette .column-number-card__index,
.column-content.column-ui-vignette .column-step__index {
  border-radius: var(--column-vignette-radius);
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-vignette .column-compare__item {
  overflow: hidden;
  padding: 0;
}

.column-content.column-ui-vignette .column-compare__title {
  padding: 20px 28px 16px;
  color: var(--column-primary);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.column-content.column-ui-vignette .column-compare__body {
  padding: 4px 28px 24px;
}

.column-content.column-ui-vignette .column-table-wrap {
  overflow: hidden;
  padding: 0;
  background: var(--column-surface-alt);
  box-shadow: none;
}

.column-content.column-ui-vignette .column-table th,
.column-content.column-ui-vignette .column-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--column-vignette-border);
}

.column-content.column-ui-vignette .column-table thead th {
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--column-primary);
  box-shadow: inset 0 -1px 0 var(--column-vignette-border);
}

.column-content.column-ui-vignette .column-table tbody th {
  color: var(--column-heading);
}

.column-content.column-ui-vignette .column-table tr:last-child th,
.column-content.column-ui-vignette .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-vignette .column-checklist__item::before {
  content: "✓";
  color: var(--column-primary);
}

.column-content.column-ui-vignette .column-checklist__item + .column-checklist__item {
  margin-top: 12px !important;
}

.column-content.column-ui-vignette .column-list {
  padding: 14px 28px;
}

.column-content.column-ui-vignette .column-list > li {
  padding: 12px 0;
}

.column-content.column-ui-vignette .column-list > li::before {
  border-radius: var(--column-vignette-radius);
  background: var(--column-heading);
}

.column-content.column-ui-vignette .column-list--ordered > li::before,
.column-content.column-ui-vignette ol.column-list > li::before {
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-vignette .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
}

.column-content.column-ui-vignette .column-faq__question {
  padding: 0 0 12px;
  color: var(--column-primary);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.column-content.column-ui-vignette .column-faq__answer {
  padding: 16px 0 0;
  color: var(--column-muted);
}

.column-content.column-ui-vignette .column-button {
  padding: 16px 40px;
  border: 0;
  background: #111111;
  color: #ffffff;
  box-shadow: none;
}

.column-content.column-ui-vignette .column-button:hover,
.column-content.column-ui-vignette .column-button:focus-visible {
  filter: none;
  box-shadow: none;
}

.column-content.column-ui-vignette .column-divider {
  border: 0;
  height: 1px;
  margin: 48px 0;
  background: var(--column-vignette-border);
}

@media (max-width: 640px) {
  .column-content.column-ui-vignette .column-summary,
  .column-content.column-ui-vignette .column-cta,
  .column-content.column-ui-vignette .column-info-box {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   FORMAT: metallic
   ========================================================================== */

/**
 * Medical Column - Metallic UI Format
 *
 * Metallic. 블랙 볼드 타이포, 요약·목차·FAQ에 라이트 크롬 면.
 * 사용: <div class="column-content column-ui-metallic">
 */

.column-content.column-ui-metallic {
  --column-metallic-ink: var(--column-heading);
  --column-metallic-accent: var(--column-primary);
  --column-metallic-edge: color-mix(in srgb, var(--column-primary) 42%, var(--column-heading));
  --column-metallic-line: color-mix(in srgb, var(--column-primary) 22%, transparent);
  --column-metallic-radius: 0;
  --column-metallic-chrome:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 88%, var(--column-primary-soft)) 0%,
      color-mix(in srgb, var(--column-primary-soft) 46%, #ffffff) 42%,
      color-mix(in srgb, var(--column-primary) 14%, color-mix(in srgb, #ffffff 72%, var(--column-heading))) 100%
    );
  --column-metallic-chrome-soft:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 94%, var(--column-primary)) 0%,
      color-mix(in srgb, var(--column-primary-soft) 28%, #ffffff) 42%,
      color-mix(in srgb, var(--column-primary) 8%, #f4f4f4) 100%
    );
  --column-metallic-chrome-deep:
    linear-gradient(
      135deg,
      color-mix(in srgb, #ffffff 32%, var(--column-metallic-edge)),
      color-mix(in srgb, var(--column-primary) 16%, var(--column-heading)) 48%,
      color-mix(in srgb, var(--column-primary) 22%, var(--column-heading))
    );
  background: #ffffff;
}

.column-content.column-ui-metallic .column-summary,
.column-content.column-ui-metallic .column-blockquote,
.column-content.column-ui-metallic .column-toc,
.column-content.column-ui-metallic .column-card,
.column-content.column-ui-metallic .column-info-box,
.column-content.column-ui-metallic .column-number-card,
.column-content.column-ui-metallic .column-step,
.column-content.column-ui-metallic .column-compare__item,
.column-content.column-ui-metallic .column-table-wrap,
.column-content.column-ui-metallic .column-checklist,
.column-content.column-ui-metallic .column-list,
.column-content.column-ui-metallic .column-details,
.column-content.column-ui-metallic > .column-details__body,
.column-content.column-ui-metallic .column-faq__item,
.column-content.column-ui-metallic .column-cta,
.column-content.column-ui-metallic .column-button,
.column-content.column-ui-metallic .column-number-card__index,
.column-content.column-ui-metallic .column-step__index,
.column-content.column-ui-metallic .column-list > li::before {
  border-radius: var(--column-metallic-radius);
}

.column-content.column-ui-metallic .column-summary,
.column-content.column-ui-metallic .column-toc {
  padding: 24px 28px;
  border: 0;
  background: var(--column-metallic-chrome);
  box-shadow: none;
}

.column-content.column-ui-metallic .column-toc {
  background: var(--column-metallic-chrome-soft);
}

.column-content.column-ui-metallic .column-info-box {
  padding: 24px 28px;
  border: 0;
  border-top: 2px solid var(--column-metallic-edge);
  background: color-mix(in srgb, var(--column-primary-soft) 40%, var(--column-surface-alt));
  box-shadow: none;
}

.column-content.column-ui-metallic .column-cta {
  padding: 32px 28px;
  border: 0;
  background: var(--column-metallic-chrome-deep);
  box-shadow: none;
}

.column-content.column-ui-metallic .column-summary__title,
.column-content.column-ui-metallic .column-toc__title,
.column-content.column-ui-metallic .column-info-box__title,
.column-content.column-ui-metallic .column-h2,
.column-content.column-ui-metallic .column-h3,
.column-content.column-ui-metallic .column-h4,
.column-content.column-ui-metallic .column-card__title,
.column-content.column-ui-metallic .column-number-card__title,
.column-content.column-ui-metallic .column-step__title,
.column-content.column-ui-metallic .column-compare__title,
.column-content.column-ui-metallic .column-details__summary,
.column-content.column-ui-metallic .column-faq__question,
.column-content.column-ui-metallic .column-table thead th,
.column-content.column-ui-metallic .column-table tbody th {
  font-weight: 800;
}

.column-content.column-ui-metallic .column-h2,
.column-content.column-ui-metallic .column-h3,
.column-content.column-ui-metallic .column-h4,
.column-content.column-ui-metallic .column-card__title,
.column-content.column-ui-metallic .column-number-card__title,
.column-content.column-ui-metallic .column-step__title,
.column-content.column-ui-metallic .column-details__summary,
.column-content.column-ui-metallic .column-table tbody th {
  color: var(--column-metallic-ink);
}

.column-content.column-ui-metallic .column-summary__title,
.column-content.column-ui-metallic .column-toc__title,
.column-content.column-ui-metallic .column-info-box__title,
.column-content.column-ui-metallic .column-compare__title,
.column-content.column-ui-metallic .column-faq__question,
.column-content.column-ui-metallic .column-table thead th {
  color: var(--column-metallic-accent);
}

.column-content.column-ui-metallic .column-summary__title,
.column-content.column-ui-metallic .column-toc__title,
.column-content.column-ui-metallic .column-info-box__title {
  margin-bottom: 12px !important;
  letter-spacing: 0.08em;
}

.column-content.column-ui-metallic .column-blockquote,
.column-content.column-ui-metallic .column-card,
.column-content.column-ui-metallic .column-number-card,
.column-content.column-ui-metallic .column-step,
.column-content.column-ui-metallic .column-compare__item,
.column-content.column-ui-metallic .column-table-wrap,
.column-content.column-ui-metallic .column-checklist,
.column-content.column-ui-metallic .column-list,
.column-content.column-ui-metallic .column-details,
.column-content.column-ui-metallic > .column-details__body,
.column-content.column-ui-metallic .column-faq__item {
  padding: 20px 24px;
  border: 1px solid var(--column-metallic-line);
  background: var(--column-surface-alt);
  box-shadow: none;
}

.column-content.column-ui-metallic .column-blockquote {
  padding: 18px 22px 18px 24px;
  border: 0;
  border-left: 3px solid var(--column-metallic-edge);
}

.column-content.column-ui-metallic .column-blockquote--warning {
  border-left-color: var(--column-danger);
  background: var(--column-danger-soft);
}

.column-content.column-ui-metallic .column-blockquote--expert {
  background: var(--column-surface-alt);
}

.column-content.column-ui-metallic .column-toc__link {
  padding: 8px 0;
  color: var(--column-text);
}

.column-content.column-ui-metallic .column-toc__link:hover,
.column-content.column-ui-metallic .column-toc__link:focus-visible {
  color: var(--column-metallic-accent);
}

.column-content.column-ui-metallic .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-metallic .column-h2 {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--column-metallic-edge);
  letter-spacing: -0.03em;
}

.column-content.column-ui-metallic .column-card__title,
.column-content.column-ui-metallic .column-number-card__title,
.column-content.column-ui-metallic .column-step__title {
  margin-bottom: 10px !important;
  line-height: 1.4;
}

.column-content.column-ui-metallic .column-number-card,
.column-content.column-ui-metallic .column-step {
  align-items: start;
}

.column-content.column-ui-metallic .column-number-card__index,
.column-content.column-ui-metallic .column-step__index {
  width: auto;
  min-width: 1.35em;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  filter: none;
  color: var(--column-metallic-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.column-content.column-ui-metallic .column-step__index {
  font-size: 20px;
}

.column-content.column-ui-metallic .column-compare__item {
  overflow: hidden;
  padding: 0;
}

.column-content.column-ui-metallic .column-compare__title {
  padding: 16px 24px 14px;
  border-bottom: 2px solid var(--column-metallic-edge);
  line-height: 1.4;
}

.column-content.column-ui-metallic .column-compare__body {
  padding: 16px 24px 20px;
}

.column-content.column-ui-metallic .column-table-wrap {
  overflow: hidden;
  padding: 0;
}

.column-content.column-ui-metallic .column-table th,
.column-content.column-ui-metallic .column-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--column-metallic-line);
}

.column-content.column-ui-metallic .column-table thead th {
  padding-top: 18px;
  padding-bottom: 18px;
  box-shadow: inset 0 -2px 0 var(--column-metallic-edge);
}

.column-content.column-ui-metallic .column-table tr:last-child th,
.column-content.column-ui-metallic .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-metallic .column-checklist__item::before {
  content: "■";
  color: var(--column-metallic-accent);
}

.column-content.column-ui-metallic .column-list {
  padding: 10px 22px;
}

.column-content.column-ui-metallic .column-list > li {
  --column-list-marker-size: 6px;
}

.column-content.column-ui-metallic .column-list > li::before {
  width: 6px;
  height: 6px;
  background: var(--column-metallic-accent);
  box-shadow: none;
}

.column-content.column-ui-metallic .column-list--ordered > li,
.column-content.column-ui-metallic ol.column-list > li {
  --column-list-marker-size: 1.25em;
}

.column-content.column-ui-metallic .column-list--ordered > li::before,
.column-content.column-ui-metallic ol.column-list > li::before {
  width: auto;
  min-width: 1.2em;
  height: auto;
  background: none;
  box-shadow: none;
  color: var(--column-metallic-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.column-content.column-ui-metallic .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
}

.column-content.column-ui-metallic .column-faq__item {
  border: 0;
  background: var(--column-metallic-chrome-soft);
}

.column-content.column-ui-metallic .column-faq__question {
  padding: 0 0 12px;
  line-height: 1.4;
}

.column-content.column-ui-metallic .column-faq__answer {
  padding: 12px 0 0;
  border-top: 1px solid var(--column-metallic-line);
  color: var(--column-muted);
}

.column-content.column-ui-metallic .column-button {
  padding: 16px 36px;
  border: 0;
  background: #111111;
  color: #ffffff;
  box-shadow: none;
  filter: none;
  letter-spacing: 0.04em;
}

.column-content.column-ui-metallic .column-button:hover,
.column-content.column-ui-metallic .column-button:focus-visible {
  background: #111111;
  filter: none;
  box-shadow: none;
}

.column-content.column-ui-metallic .column-divider {
  border: 0;
  height: 2px;
  margin: 48px 0;
  background: var(--column-metallic-edge);
}

@media (max-width: 640px) {
  .column-content.column-ui-metallic .column-summary,
  .column-content.column-ui-metallic .column-cta,
  .column-content.column-ui-metallic .column-info-box,
  .column-content.column-ui-metallic .column-toc {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: matte
   ========================================================================== */

/**
 * Medical Column - Matte UI Format
 *
 * Matte. 플랫한 단색 면, 포인트만 소프트 블러.
 * 사용: <div class="column-content column-ui-matte">
 */

.column-content.column-ui-matte {
  --column-matte-radius: 16px;
  --column-matte-index-radius: 4px;
  --column-matte-index-fill: color-mix(in srgb, var(--column-primary) 28%, #ffffff);
  --column-matte-soft-blur: 8px;
  background: #ffffff;
}

.column-content.column-ui-matte .column-summary,
.column-content.column-ui-matte .column-toc,
.column-content.column-ui-matte .column-info-box,
.column-content.column-ui-matte .column-blockquote,
.column-content.column-ui-matte .column-card,
.column-content.column-ui-matte .column-number-card,
.column-content.column-ui-matte .column-step,
.column-content.column-ui-matte .column-compare__item,
.column-content.column-ui-matte .column-table-wrap,
.column-content.column-ui-matte .column-checklist,
.column-content.column-ui-matte .column-list,
.column-content.column-ui-matte .column-details,
.column-content.column-ui-matte > .column-details__body,
.column-content.column-ui-matte .column-faq__item,
.column-content.column-ui-matte .column-cta {
  padding: 22px 24px;
  border: 0;
  border-radius: var(--column-matte-radius);
  background: var(--column-surface-alt);
  box-shadow: none;
}

.column-content.column-ui-matte .column-summary,
.column-content.column-ui-matte .column-info-box,
.column-content.column-ui-matte .column-cta,
.column-content.column-ui-matte .column-blockquote--warning {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.column-content.column-ui-matte .column-summary,
.column-content.column-ui-matte .column-info-box,
.column-content.column-ui-matte .column-cta {
  background: var(--column-primary-soft);
}

.column-content.column-ui-matte .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-matte .column-summary::before,
.column-content.column-ui-matte .column-info-box::before,
.column-content.column-ui-matte .column-cta::before,
.column-content.column-ui-matte .column-blockquote--warning::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  content: "";
  filter: blur(var(--column-matte-soft-blur));
}

.column-content.column-ui-matte .column-blockquote:not(
  [class*="column-blockquote--"]
) {
  padding: 8px 0;
  background: transparent;
}

.column-content.column-ui-matte .column-summary__title,
.column-content.column-ui-matte .column-toc__title {
  color: var(--column-primary);
  font-weight: 700;
}

.column-content.column-ui-matte .column-toc__link {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--column-text);
}

.column-content.column-ui-matte .column-toc__link:hover,
.column-content.column-ui-matte .column-toc__link:focus-visible {
  background: color-mix(in srgb, var(--column-primary) 10%, #ffffff);
  color: var(--column-primary-strong);
}

.column-content.column-ui-matte .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-matte .column-h2 {
  color: var(--column-heading);
  font-weight: 700;
}

.column-content.column-ui-matte .column-h3,
.column-content.column-ui-matte .column-h4,
.column-content.column-ui-matte .column-card__title,
.column-content.column-ui-matte .column-info-box__title,
.column-content.column-ui-matte .column-number-card__title,
.column-content.column-ui-matte .column-step__title,
.column-content.column-ui-matte .column-details__summary {
  color: var(--column-heading);
  font-weight: 700;
}

.column-content.column-ui-matte .column-number-card__index,
.column-content.column-ui-matte .column-step__index {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: var(--column-matte-index-radius);
  background: var(--column-matte-index-fill);
  color: var(--column-primary-strong);
  box-shadow: none;
  text-shadow: 0 0 8px color-mix(in srgb, var(--column-primary) 32%, transparent);
}

.column-content.column-ui-matte .column-number-card__index::before,
.column-content.column-ui-matte .column-step__index::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--column-matte-index-fill);
  content: "";
  filter: blur(6px);
}

.column-content.column-ui-matte .column-compare__item {
  overflow: hidden;
  padding: 0;
}

.column-content.column-ui-matte .column-compare__title {
  padding: 18px 22px 14px;
  color: var(--column-primary-strong);
  font-weight: 700;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--column-heading) 10%, transparent);
}

.column-content.column-ui-matte .column-compare__body {
  padding: 16px 22px 20px;
}

.column-content.column-ui-matte .column-table-wrap {
  overflow: hidden;
}

.column-content.column-ui-matte .column-table th,
.column-content.column-ui-matte .column-table td {
  padding: 16px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--column-heading) 10%, transparent);
}

.column-content.column-ui-matte .column-table thead th {
  padding-top: 16px;
  padding-bottom: 16px;
  background: transparent;
  color: var(--column-heading);
  font-weight: 700;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--column-heading) 10%, transparent);
}

.column-content.column-ui-matte .column-table tr:last-child th,
.column-content.column-ui-matte .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-matte .column-checklist__item::before {
  content: "✓";
  color: var(--column-primary);
}

.column-content.column-ui-matte .column-list > li::before {
  border-radius: var(--column-matte-index-radius);
  background: var(--column-primary);
}

.column-content.column-ui-matte .column-list--ordered > li::before,
.column-content.column-ui-matte ol.column-list > li::before {
  border-radius: var(--column-matte-index-radius);
  background: var(--column-primary);
  color: #ffffff;
  text-shadow: none;
  box-shadow: none;
  filter: none;
}

.column-content.column-ui-matte .column-list {
  padding: 10px 20px;
}

.column-content.column-ui-matte .column-list .column-list {
  padding: 0;
  background: transparent;
}

.column-content.column-ui-matte .column-faq__item {
  padding: 20px 22px;
}

.column-content.column-ui-matte .column-faq__question {
  padding: 0 0 12px;
  color: var(--column-primary-strong);
  font-weight: 700;
}

.column-content.column-ui-matte .column-faq__answer {
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--column-heading) 10%, transparent);
  color: var(--column-muted);
}

.column-content.column-ui-matte .column-button {
  padding: 14px 32px;
  border: 0;
  border-radius: var(--column-matte-radius);
  background: var(--column-primary);
  color: #ffffff;
  font-weight: 700;
  box-shadow: none;
}

.column-content.column-ui-matte .column-button:hover,
.column-content.column-ui-matte .column-button:focus-visible {
  background: var(--column-primary-strong);
  box-shadow: none;
}

.column-content.column-ui-matte .column-divider {
  border: 0;
  height: 6px;
  border-radius: 999px;
  background: var(--column-surface-alt);
}

@media (max-width: 640px) {
  .column-content.column-ui-matte .column-summary,
  .column-content.column-ui-matte .column-cta,
  .column-content.column-ui-matte .column-info-box,
  .column-content.column-ui-matte .column-toc {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: floating
   ========================================================================== */

/**
 * Medical Column - Floating UI Format
 *
 * Floating. 포인트만 띄우고, 나머지는 플랫.
 * 사용: <div class="column-content column-ui-floating">
 */

.column-content.column-ui-floating {
  --column-floating-shadow:
    0 18px 36px color-mix(in srgb, var(--column-heading) 12%, transparent),
    0 -8px 20px color-mix(in srgb, var(--column-primary) 8%, transparent);
  --column-floating-tint: color-mix(in srgb, var(--column-primary) 14%, #ffffff);
  --column-floating-line: color-mix(in srgb, var(--column-primary) 42%, transparent);
  background: #ffffff;
}

.column-content.column-ui-floating .column-summary,
.column-content.column-ui-floating .column-blockquote,
.column-content.column-ui-floating .column-toc,
.column-content.column-ui-floating .column-card,
.column-content.column-ui-floating .column-info-box,
.column-content.column-ui-floating .column-number-card,
.column-content.column-ui-floating .column-step,
.column-content.column-ui-floating .column-compare__item,
.column-content.column-ui-floating .column-table-wrap,
.column-content.column-ui-floating .column-checklist,
.column-content.column-ui-floating .column-list,
.column-content.column-ui-floating .column-details,
.column-content.column-ui-floating > .column-details__body,
.column-content.column-ui-floating .column-faq__item,
.column-content.column-ui-floating .column-cta {
  border: 0;
  border-radius: var(--column-radius-lg);
  box-shadow: none;
}

.column-content.column-ui-floating .column-blockquote,
.column-content.column-ui-floating .column-toc,
.column-content.column-ui-floating .column-card,
.column-content.column-ui-floating .column-number-card,
.column-content.column-ui-floating .column-step,
.column-content.column-ui-floating .column-compare__item,
.column-content.column-ui-floating .column-table-wrap,
.column-content.column-ui-floating .column-checklist,
.column-content.column-ui-floating .column-list,
.column-content.column-ui-floating .column-details,
.column-content.column-ui-floating > .column-details__body,
.column-content.column-ui-floating .column-faq__item {
  background: var(--column-surface-alt);
}

.column-content.column-ui-floating .column-summary,
.column-content.column-ui-floating .column-toc,
.column-content.column-ui-floating .column-card,
.column-content.column-ui-floating .column-info-box,
.column-content.column-ui-floating .column-number-card,
.column-content.column-ui-floating .column-step,
.column-content.column-ui-floating .column-checklist,
.column-content.column-ui-floating .column-cta {
  padding: 22px 24px;
}

.column-content.column-ui-floating .column-summary,
.column-content.column-ui-floating .column-info-box,
.column-content.column-ui-floating .column-cta,
.column-content.column-ui-floating .column-blockquote--intro,
.column-content.column-ui-floating .column-blockquote--conclusion,
.column-content.column-ui-floating .column-blockquote--warning {
  background: var(--column-surface);
  box-shadow: var(--column-floating-shadow);
}

.column-content.column-ui-floating .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-floating .column-summary__title,
.column-content.column-ui-floating .column-toc__title {
  color: var(--column-primary);
}

.column-content.column-ui-floating .column-blockquote {
  padding: 18px 20px;
}

.column-content.column-ui-floating .column-toc__link {
  padding: 7px 10px;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
}

.column-content.column-ui-floating .column-toc__link:hover,
.column-content.column-ui-floating .column-toc__link:focus-visible {
  color: var(--column-primary-strong);
}

.column-content.column-ui-floating .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-floating .column-h2 {
  color: var(--column-primary-strong);
}

.column-content.column-ui-floating .column-h3,
.column-content.column-ui-floating .column-h4,
.column-content.column-ui-floating .column-card__title,
.column-content.column-ui-floating .column-info-box__title,
.column-content.column-ui-floating .column-number-card__title,
.column-content.column-ui-floating .column-step__title,
.column-content.column-ui-floating .column-details__summary {
  color: var(--column-primary-strong);
}

.column-content.column-ui-floating .column-number-card__index,
.column-content.column-ui-floating .column-step__index {
  border-radius: 8px;
  background: var(--column-floating-tint);
  color: var(--column-primary);
  box-shadow: none;
}

.column-content.column-ui-floating .column-compare__item {
  overflow: hidden;
  padding: 0;
}

.column-content.column-ui-floating .column-compare__title {
  padding: 16px 20px 12px;
  color: var(--column-primary-strong);
  box-shadow: inset 0 -1px 0 var(--column-floating-line);
}

.column-content.column-ui-floating .column-compare__body {
  padding: 16px 20px 20px;
}

.column-content.column-ui-floating .column-table-wrap {
  overflow: hidden;
}

.column-content.column-ui-floating .column-table th,
.column-content.column-ui-floating .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--column-primary) 10%, transparent);
}

.column-content.column-ui-floating .column-table thead th {
  background: var(--column-floating-tint);
  color: var(--column-primary);
}

.column-content.column-ui-floating .column-table tbody th {
  color: var(--column-primary);
}

.column-content.column-ui-floating .column-table tr:last-child th,
.column-content.column-ui-floating .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-floating .column-checklist__item::before {
  content: "✓";
  color: var(--column-primary);
}

.column-content.column-ui-floating .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-floating .column-list > li::before {
  border-radius: 4px;
  background: color-mix(in srgb, var(--column-primary) 55%, #ffffff);
}

.column-content.column-ui-floating .column-list--ordered > li::before,
.column-content.column-ui-floating ol.column-list > li::before {
  border-radius: 6px;
  background: var(--column-floating-tint);
  color: var(--column-primary);
}

.column-content.column-ui-floating .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.column-content.column-ui-floating .column-details,
.column-content.column-ui-floating > .column-details__body {
  padding: 16px 20px;
}

.column-content.column-ui-floating .column-faq__question {
  padding: 16px 20px 12px;
  color: var(--column-primary-strong);
  box-shadow: inset 0 -1px 0 var(--column-floating-line);
}

.column-content.column-ui-floating .column-faq__answer {
  padding: 14px 20px 18px;
  color: var(--column-muted);
}

.column-content.column-ui-floating .column-button {
  padding: 16px 38px;
  border: 0;
  border-radius: 999px;
  background: var(--column-primary);
  color: #ffffff;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--column-primary) 32%, transparent);
}

.column-content.column-ui-floating .column-button:hover,
.column-content.column-ui-floating .column-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px color-mix(in srgb, var(--column-primary) 36%, transparent);
}

.column-content.column-ui-floating .column-divider {
  border: 0;
  height: 1px;
  background: var(--column-floating-line);
}

@media (max-width: 640px) {
  .column-content.column-ui-floating .column-summary,
  .column-content.column-ui-floating .column-cta,
  .column-content.column-ui-floating .column-info-box {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: blob
   ========================================================================== */

/**
 * Medical Column - Blob UI Format
 *
 * Blob. 유기적인 블롭 형태와 은은한 블러가 콘텐츠 전반에 번지는 표현.
 * 중요 요소는 겹친 블롭이 떠 있는 듯 움직이고, 나머지 면에도 옅은 블러 포인트를 남긴다.
 * 사용: <div class="column-content column-ui-blob">
 */

.column-content.column-ui-blob {
  --column-blob-shape-a: 58% 42% 62% 38% / 46% 54% 42% 58%;
  --column-blob-shape-b: 42% 58% 38% 62% / 58% 46% 54% 42%;
  --column-blob-shape-c: 62% 38% 46% 54% / 54% 42% 62% 38%;

  /* 비정형 블롭은 배경에만 쓰고, 실제 UI 요소는 정형 라운드로 둔다 */
  --column-blob-radius-button: 18px;
  --column-blob-radius-index: 12px;
  --column-blob-radius-marker: 4px;

  --column-blob-blur-lg: 26px;
  --column-blob-blur-md: 16px;
  --column-blob-blur-sm: 9px;

  /* 색은 병원 시그니처(primary / secondary-soft)에서만 파생한다 */
  --column-blob-tint-strong: color-mix(in srgb, var(--column-primary-strong) 18%, transparent);
  --column-blob-tint: color-mix(in srgb, var(--column-primary) 13%, transparent);
  --column-blob-tint-soft: color-mix(in srgb, var(--column-primary) 8%, transparent);
  --column-blob-tint-faint: color-mix(in srgb, var(--column-primary) 5%, transparent);
  --column-blob-tint-secondary: color-mix(in srgb, var(--column-secondary-soft) 75%, transparent);

  --column-blob-surface: color-mix(in srgb, var(--column-primary) 4%, #ffffff);
  --column-blob-muted: color-mix(in srgb, var(--column-primary) 30%, var(--column-text));

  /* 뒤의 블롭이 비치도록 반투명하게 올리는 헤더 밴드 */
  --column-blob-band: color-mix(in srgb, var(--column-primary) 8%, transparent);
  --column-blob-band-line: color-mix(in srgb, var(--column-primary) 12%, transparent);
  --column-blob-band-edge: color-mix(in srgb, var(--column-primary) 18%, transparent);

  --column-blob-ambient:
    0 1px 2px color-mix(in srgb, var(--column-primary) 8%, transparent),
    0 22px 44px color-mix(in srgb, var(--column-primary) 11%, transparent);
  --column-blob-ambient-sm:
    0 1px 2px color-mix(in srgb, var(--column-primary) 6%, transparent),
    0 14px 28px color-mix(in srgb, var(--column-primary) 7%, transparent);

  /* 칼럼 뒤는 게시판 배경이 그대로 보이도록 비워 둔다 */
  background: transparent;
}

/* ==========================================================================
   1. Hero 요소 — 겹친 블롭 + 은은한 부유 애니메이션
   ========================================================================== */

.column-content.column-ui-blob .column-summary,
.column-content.column-ui-blob .column-cta,
.column-content.column-ui-blob .column-info-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  box-shadow: var(--column-blob-ambient);
}

.column-content.column-ui-blob .column-summary {
  padding: 28px 30px;
  border-radius: 32px;
  background:
    radial-gradient(42% 58% at 8% 18%, var(--column-blob-tint-strong), transparent 68%),
    radial-gradient(48% 52% at 92% 82%, var(--column-blob-tint), transparent 70%),
    var(--column-primary-soft);
}

.column-content.column-ui-blob .column-cta {
  padding: 36px 28px;
  border-radius: 36px;
  background:
    radial-gradient(46% 62% at 88% 10%, var(--column-blob-tint), transparent 68%),
    radial-gradient(38% 52% at 10% 90%, var(--column-blob-tint-soft), transparent 72%),
    var(--column-secondary-soft);
}

.column-content.column-ui-blob .column-info-box {
  padding: 22px 24px;
  border-radius: 28px;
  background:
    radial-gradient(46% 54% at 100% 0%, var(--column-blob-tint-strong), transparent 64%),
    var(--column-primary-soft);
}

.column-content.column-ui-blob .column-summary::before,
.column-content.column-ui-blob .column-summary::after,
.column-content.column-ui-blob .column-cta::before,
.column-content.column-ui-blob .column-cta::after,
.column-content.column-ui-blob .column-info-box::before,
.column-content.column-ui-blob .column-info-box::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: var(--column-blob-shape-a);
  filter: blur(var(--column-blob-blur-lg));
  animation: column-blob-drift 13s ease-in-out infinite;
}

.column-content.column-ui-blob .column-summary::before {
  inset: auto auto -30px -26px;
  width: 130px;
  height: 130px;
  background: var(--column-blob-tint-strong);
}

.column-content.column-ui-blob .column-summary::after {
  inset: -24px 8% auto auto;
  width: 74px;
  height: 74px;
  border-radius: var(--column-blob-shape-b);
  background: var(--column-blob-tint-secondary);
  filter: blur(var(--column-blob-blur-md));
  animation-name: column-blob-drift-alt;
  animation-duration: 10s;
  animation-delay: -3s;
}

.column-content.column-ui-blob .column-cta::before {
  inset: auto -34px -40px auto;
  width: 140px;
  height: 140px;
  background: var(--column-blob-tint-soft);
  animation-duration: 15s;
  animation-delay: -6s;
}

.column-content.column-ui-blob .column-cta::after {
  inset: -30px auto auto -24px;
  width: 96px;
  height: 96px;
  border-radius: var(--column-blob-shape-c);
  background: var(--column-blob-tint-faint);
  filter: blur(var(--column-blob-blur-md));
  animation-name: column-blob-drift-alt;
  animation-duration: 11s;
  animation-delay: -1s;
}

.column-content.column-ui-blob .column-info-box::before {
  inset: -36px auto auto 58%;
  width: 96px;
  height: 96px;
  background: var(--column-blob-tint);
  animation-duration: 12s;
  animation-delay: -4s;
}

.column-content.column-ui-blob .column-info-box::after {
  inset: auto auto -20px -18px;
  width: 58px;
  height: 58px;
  border-radius: var(--column-blob-shape-b);
  background: var(--column-blob-tint-soft);
  filter: blur(var(--column-blob-blur-sm));
  animation-name: column-blob-drift-alt;
  animation-duration: 9s;
  animation-delay: -2s;
}

@keyframes column-blob-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(8px, -10px) scale(1.08);
  }
}

@keyframes column-blob-drift-alt {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-6px, 8px) scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .column-content.column-ui-blob .column-summary::before,
  .column-content.column-ui-blob .column-summary::after,
  .column-content.column-ui-blob .column-cta::before,
  .column-content.column-ui-blob .column-cta::after,
  .column-content.column-ui-blob .column-info-box::before,
  .column-content.column-ui-blob .column-info-box::after {
    animation: none;
  }
}

/* ==========================================================================
   2. 일반 요소 — 단순한 면 + 모서리에 걸친 옅은 블러 포인트
   ========================================================================== */

.column-content.column-ui-blob .column-blockquote,
.column-content.column-ui-blob .column-card,
.column-content.column-ui-blob .column-number-card,
.column-content.column-ui-blob .column-step,
.column-content.column-ui-blob .column-compare__item,
.column-content.column-ui-blob .column-table-wrap,
.column-content.column-ui-blob .column-checklist,
.column-content.column-ui-blob .column-list,
.column-content.column-ui-blob .column-details,
.column-content.column-ui-blob > .column-details__body,
.column-content.column-ui-blob .column-faq__item {
  padding: 18px 20px;
  border: 0;
  border-radius: 20px;
  background: var(--column-blob-surface);
}

/* 코너에 걸친 블러 포인트가 잘려서 보이는 카드형 요소 */
.column-content.column-ui-blob .column-blockquote,
.column-content.column-ui-blob .column-card,
.column-content.column-ui-blob .column-compare__item,
.column-content.column-ui-blob .column-table-wrap,
.column-content.column-ui-blob .column-checklist,
.column-content.column-ui-blob .column-details,
.column-content.column-ui-blob > .column-details__body,
.column-content.column-ui-blob .column-faq__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--column-blob-ambient-sm);
}

.column-content.column-ui-blob .column-card::before,
.column-content.column-ui-blob .column-compare__item::before,
.column-content.column-ui-blob .column-table-wrap::before,
.column-content.column-ui-blob .column-details::before {
  content: "";
  position: absolute;
  inset: auto auto -26px -24px;
  z-index: -1;
  width: 92px;
  height: 92px;
  border-radius: var(--column-blob-shape-b);
  background: var(--column-blob-tint-faint);
  filter: blur(var(--column-blob-blur-md));
  pointer-events: none;
}

.column-content.column-ui-blob .column-details::before {
  inset: -26px -24px auto auto;
  border-radius: var(--column-blob-shape-c);
}

/* 표·비교 카드는 상단 밴드 뒤로 블롭이 비치게 둔다 */
.column-content.column-ui-blob .column-table-wrap::before,
.column-content.column-ui-blob .column-compare__item::before {
  inset: -32px auto auto -30px;
  width: 116px;
  height: 116px;
  border-radius: var(--column-blob-shape-a);
  background: var(--column-blob-tint-soft);
}

/* 나란히 놓인 비교 카드가 같은 자리에서 반복되지 않게 한다 */
.column-content.column-ui-blob .column-compare__item:nth-child(even)::before {
  inset: -32px -30px auto auto;
  border-radius: var(--column-blob-shape-c);
}

/* index 배지가 이미 자체 발광을 갖고 있어 카드 자체는 잘리지 않게 둔다 */
.column-content.column-ui-blob .column-number-card,
.column-content.column-ui-blob .column-step {
  position: relative;
  overflow: visible;
  box-shadow: var(--column-blob-ambient-sm);
}

/* ==========================================================================
   3. 타이틀 / 텍스트
   ========================================================================== */

.column-content.column-ui-blob .column-summary__title,
.column-content.column-ui-blob .column-toc__title {
  color: var(--column-primary-strong);
  font-size: 15px;
}

.column-content.column-ui-blob .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-blob .column-h2,
.column-content.column-ui-blob .column-h3,
.column-content.column-ui-blob .column-h4,
.column-content.column-ui-blob .column-card__title,
.column-content.column-ui-blob .column-info-box__title,
.column-content.column-ui-blob .column-number-card__title,
.column-content.column-ui-blob .column-step__title,
.column-content.column-ui-blob .column-details__summary {
  color: var(--column-primary-strong);
}

/* ==========================================================================
   4. TOC
   ========================================================================== */

.column-content.column-ui-blob .column-toc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 24px;
  border: 0;
  border-radius: 24px;
  background: var(--column-secondary-soft);
  box-shadow: var(--column-blob-ambient-sm);
}

.column-content.column-ui-blob .column-toc::before {
  content: "";
  position: absolute;
  inset: -30px auto auto -26px;
  z-index: -1;
  width: 104px;
  height: 104px;
  border-radius: var(--column-blob-shape-a);
  background: var(--column-blob-tint-soft);
  filter: blur(var(--column-blob-blur-md));
  pointer-events: none;
}

.column-content.column-ui-blob .column-toc__link {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--column-text);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.column-content.column-ui-blob .column-toc__link:hover,
.column-content.column-ui-blob .column-toc__link:focus-visible {
  background: color-mix(in srgb, var(--column-primary) 10%, #ffffff);
  color: var(--column-primary-strong);
}

.column-content.column-ui-blob .column-toc__link--sub {
  color: var(--column-blob-muted);
}

/* ==========================================================================
   5. Number Card / Step Index
   ========================================================================== */

.column-content.column-ui-blob .column-number-card__index,
.column-content.column-ui-blob .column-step__index {
  border-radius: var(--column-blob-radius-index);
  background: var(--column-primary);
  color: #ffffff;
  box-shadow:
    0 2px 5px color-mix(in srgb, var(--column-primary-strong) 24%, transparent),
    0 8px 18px color-mix(in srgb, var(--column-primary) 30%, transparent);
}

/* ==========================================================================
   6. Compare
   ========================================================================== */

.column-content.column-ui-blob .column-compare__item {
  padding: 0;
}

.column-content.column-ui-blob .column-compare__title {
  padding: 15px 20px;
  background: var(--column-blob-band);
  color: var(--column-primary-strong);
  box-shadow: inset 0 -1px 0 var(--column-blob-band-line);
}

.column-content.column-ui-blob .column-compare__body {
  padding: 18px 20px 20px;
}

/* ==========================================================================
   7. Table
   ========================================================================== */

.column-content.column-ui-blob .column-table-wrap {
  padding: 0;
}

.column-content.column-ui-blob .column-table th,
.column-content.column-ui-blob .column-table td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--column-blob-band-line);
}

.column-content.column-ui-blob .column-table thead th {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom-color: var(--column-blob-band-edge);
  background: var(--column-blob-band);
  color: var(--column-primary-strong);
}

.column-content.column-ui-blob .column-table tbody th {
  color: var(--column-primary-strong);
}

.column-content.column-ui-blob .column-table tr:last-child th,
.column-content.column-ui-blob .column-table tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   8. Checklist / List
   ========================================================================== */

.column-content.column-ui-blob .column-checklist__item::before {
  content: "●";
  color: var(--column-primary);
}

.column-content.column-ui-blob .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-blob .column-list > li::before {
  border-radius: var(--column-blob-radius-marker);
  background: var(--column-primary);
}

.column-content.column-ui-blob .column-list--ordered > li::before,
.column-content.column-ui-blob ol.column-list > li::before {
  border-radius: 8px;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-blob .column-list .column-list {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.column-content.column-ui-blob .column-faq__item {
  padding: 0;
}

.column-content.column-ui-blob .column-faq__question {
  padding: 18px 22px 14px;
  color: var(--column-primary-strong);
  box-shadow: inset 0 -1px 0 var(--column-blob-band-line);
}

.column-content.column-ui-blob .column-faq__answer {
  padding: 15px 22px 18px;
  color: var(--column-blob-muted);
}

/* ==========================================================================
   10. Button — 배후에 흐릿한 블롭 광원
   ========================================================================== */

.column-content.column-ui-blob .column-button {
  position: relative;
  isolation: isolate;
  padding: 16px 38px;
  border: 0;
  border-radius: var(--column-blob-radius-button);
  background: var(--column-primary);
  color: #ffffff;
  box-shadow:
    0 2px 6px color-mix(in srgb, var(--column-primary-strong) 26%, transparent),
    0 14px 28px color-mix(in srgb, var(--column-primary) 30%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.column-content.column-ui-blob .column-button::before {
  content: "";
  position: absolute;
  inset: -14px -18px;
  z-index: -1;
  border-radius: var(--column-blob-shape-a);
  background: color-mix(in srgb, var(--column-primary) 40%, transparent);
  filter: blur(var(--column-blob-blur-md));
  opacity: 0.4;
  transition: opacity 0.18s ease;
}

.column-content.column-ui-blob .column-button:hover,
.column-content.column-ui-blob .column-button:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 2px 6px color-mix(in srgb, var(--column-primary-strong) 26%, transparent),
    0 18px 34px color-mix(in srgb, var(--column-primary) 34%, transparent);
}

.column-content.column-ui-blob .column-button:hover::before,
.column-content.column-ui-blob .column-button:focus-visible::before {
  opacity: 0.7;
}

/* ==========================================================================
   11. Divider
   ========================================================================== */

.column-content.column-ui-blob .column-divider {
  border: 0;
  height: 20px;
  background:
    radial-gradient(9px 9px at 20% 50%, var(--column-primary-soft) 7px, transparent 8px),
    radial-gradient(7px 7px at 50% 50%, var(--column-secondary-soft) 5px, transparent 6px),
    radial-gradient(9px 9px at 80% 50%, var(--column-primary-soft) 7px, transparent 8px);
  filter: blur(0.4px);
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .column-content.column-ui-blob .column-summary,
  .column-content.column-ui-blob .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: organic-shapes
   ========================================================================== */

/**
 * Medical Column - Organic Shapes UI Format
 *
 * Organic Shapes. 포인트 요소만 나뭇잎처럼 비대칭으로 깎고, 나머지는 평범한 라운드로 받친다.
 * Blob이 균일한 면 뒤에 비정형 블롭을 띄운다면, 이쪽은 포인트의 실루엣과
 * 끝으로 갈수록 사라지는 결·밴드로 표현한다.
 * 사용: <div class="column-content column-ui-organic-shapes">
 */

.column-content.column-ui-organic-shapes {
  /* 이파리 실루엣은 포인트 요소(요약·CTA·정보 박스·버튼)에만 쓴다 */
  --column-organic-leaf-lg: 44px 16px 44px 16px;
  --column-organic-leaf-md: 28px 10px 28px 10px;
  --column-organic-leaf-alt: 16px 44px 16px 44px;
  --column-organic-radius-button: 24px 8px 24px 8px;
  --column-organic-radius-button-alt: 8px 24px 8px 24px;

  /* 나머지 요소는 평범한 라운드로 받친다 */
  --column-organic-radius-card: 18px;
  --column-organic-radius-index: 10px;
  --column-organic-radius-marker: 3px;

  /* 색은 병원 시그니처(primary / secondary-soft)에서만 파생한다 */
  --column-organic-tint: color-mix(in srgb, var(--column-primary) 13%, transparent);
  --column-organic-tint-soft: color-mix(in srgb, var(--column-primary) 8%, transparent);
  --column-organic-tint-faint: color-mix(in srgb, var(--column-primary) 5%, transparent);

  --column-organic-surface: color-mix(in srgb, var(--column-primary) 4%, #ffffff);
  --column-organic-muted: color-mix(in srgb, var(--column-primary) 30%, var(--column-text));

  --column-organic-band: color-mix(in srgb, var(--column-primary) 8%, transparent);
  --column-organic-band-line: color-mix(in srgb, var(--column-primary) 12%, transparent);

  /* 끝으로 갈수록 사라지는 밴드·구분선. 실루엣이 눕는 방향에 맞춰 좌우를 뒤집는다 */
  --column-organic-band-fade:
    linear-gradient(96deg, var(--column-organic-band), transparent 88%);
  --column-organic-band-fade-alt:
    linear-gradient(264deg, var(--column-organic-band), transparent 88%);
  --column-organic-line-fade:
    linear-gradient(90deg, var(--column-organic-band-line), transparent 92%);
  --column-organic-line-fade-alt:
    linear-gradient(270deg, var(--column-organic-band-line), transparent 92%);

  --column-organic-ambient:
    0 1px 2px color-mix(in srgb, var(--column-primary) 8%, transparent),
    0 20px 40px color-mix(in srgb, var(--column-primary) 10%, transparent);
  --column-organic-ambient-sm:
    0 1px 2px color-mix(in srgb, var(--column-primary) 6%, transparent),
    0 12px 26px color-mix(in srgb, var(--column-primary) 7%, transparent);

  /* 칼럼 뒤는 게시판 배경이 그대로 보이도록 비워 둔다 */
  background: transparent;
}

/* ==========================================================================
   1. Hero 요소 — 비대칭 면 + 뒤로 비켜난 겹
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-summary,
.column-content.column-ui-organic-shapes .column-cta,
.column-content.column-ui-organic-shapes .column-info-box {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: var(--column-organic-leaf-lg);
  box-shadow: var(--column-organic-ambient);
}

.column-content.column-ui-organic-shapes .column-summary {
  padding: 28px 30px;
  background:
    linear-gradient(
      138deg,
      var(--column-primary-soft),
      color-mix(in srgb, var(--column-secondary-soft) 60%, #ffffff)
    );
}

.column-content.column-ui-organic-shapes .column-cta {
  padding: 34px 28px;
  background:
    linear-gradient(
      212deg,
      var(--column-secondary-soft),
      color-mix(in srgb, var(--column-primary-soft) 80%, #ffffff)
    );
}

.column-content.column-ui-organic-shapes .column-info-box {
  padding: 22px 24px;
  border-radius: var(--column-organic-leaf-md);
  background:
    linear-gradient(
      158deg,
      var(--column-primary-soft),
      color-mix(in srgb, var(--column-secondary-soft) 45%, #ffffff)
    );
}

/* 같은 실루엣을 반대로 눕혀 뒤에 한 겹 깔아 둔다.
   오른쪽으로는 삐져나가지 않게 해 좁은 화면에서 가로 스크롤이 생기지 않도록 한다 */
.column-content.column-ui-organic-shapes .column-summary::before,
.column-content.column-ui-organic-shapes .column-cta::before,
.column-content.column-ui-organic-shapes .column-info-box::before {
  content: "";
  position: absolute;
  inset: 18px 34px -16px -16px;
  z-index: -1;
  border-radius: var(--column-organic-leaf-alt);
  background: linear-gradient(108deg, var(--column-organic-tint), transparent 78%);
  filter: blur(5px);
  pointer-events: none;
}

.column-content.column-ui-organic-shapes .column-cta::before {
  inset: -16px 34px 18px -16px;
  border-radius: var(--column-organic-leaf-lg);
}

.column-content.column-ui-organic-shapes .column-info-box::before {
  inset: 14px 30px -14px -14px;
}

/* ==========================================================================
   2. 일반 요소 — 평범한 라운드 면에 결만 옅게 흐른다
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-blockquote,
.column-content.column-ui-organic-shapes .column-card,
.column-content.column-ui-organic-shapes .column-number-card,
.column-content.column-ui-organic-shapes .column-step,
.column-content.column-ui-organic-shapes .column-compare__item,
.column-content.column-ui-organic-shapes .column-table-wrap,
.column-content.column-ui-organic-shapes .column-checklist,
.column-content.column-ui-organic-shapes .column-list,
.column-content.column-ui-organic-shapes .column-details,
.column-content.column-ui-organic-shapes > .column-details__body,
.column-content.column-ui-organic-shapes .column-faq__item {
  padding: 18px 20px;
  border: 0;
  border-radius: var(--column-organic-radius-card);
  background:
    linear-gradient(150deg, var(--column-organic-tint-faint), transparent 62%),
    var(--column-organic-surface);
}

.column-content.column-ui-organic-shapes .column-blockquote,
.column-content.column-ui-organic-shapes .column-card,
.column-content.column-ui-organic-shapes .column-number-card,
.column-content.column-ui-organic-shapes .column-step,
.column-content.column-ui-organic-shapes .column-compare__item,
.column-content.column-ui-organic-shapes .column-table-wrap,
.column-content.column-ui-organic-shapes .column-checklist,
.column-content.column-ui-organic-shapes .column-details,
.column-content.column-ui-organic-shapes .column-faq__item {
  box-shadow: var(--column-organic-ambient-sm);
}

/* 나란히 놓이는 비교 카드는 결이 서로를 마주보게 둔다 */
.column-content.column-ui-organic-shapes .column-compare > .column-compare__item:nth-child(even) {
  background:
    linear-gradient(210deg, var(--column-organic-tint-faint), transparent 62%),
    var(--column-organic-surface);
}

.column-content.column-ui-organic-shapes .column-blockquote--warning {
  background: var(--column-danger-soft);
}

/* ==========================================================================
   3. 타이틀 / 텍스트
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-summary__title,
.column-content.column-ui-organic-shapes .column-toc__title {
  color: var(--column-primary-strong);
  font-size: 15px;
}

.column-content.column-ui-organic-shapes .column-h2,
.column-content.column-ui-organic-shapes .column-h3,
.column-content.column-ui-organic-shapes .column-h4,
.column-content.column-ui-organic-shapes .column-card__title,
.column-content.column-ui-organic-shapes .column-info-box__title,
.column-content.column-ui-organic-shapes .column-number-card__title,
.column-content.column-ui-organic-shapes .column-step__title,
.column-content.column-ui-organic-shapes .column-details__summary {
  color: var(--column-primary-strong);
}

/* ==========================================================================
   4. TOC
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-toc {
  padding: 22px 24px;
  border: 0;
  border-radius: var(--column-organic-radius-card);
  background:
    linear-gradient(
      168deg,
      var(--column-secondary-soft),
      color-mix(in srgb, var(--column-secondary-soft) 45%, #ffffff)
    );
  box-shadow: var(--column-organic-ambient-sm);
}

.column-content.column-ui-organic-shapes .column-toc__link {
  padding: 7px 12px;
  border-radius: 10px;
  color: var(--column-text);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.column-content.column-ui-organic-shapes .column-toc__link:hover,
.column-content.column-ui-organic-shapes .column-toc__link:focus-visible {
  background: color-mix(in srgb, var(--column-primary) 10%, #ffffff);
  color: var(--column-primary-strong);
}

.column-content.column-ui-organic-shapes .column-toc__link--sub {
  color: var(--column-organic-muted);
}

/* ==========================================================================
   5. Number Card / Step Index
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-number-card__index,
.column-content.column-ui-organic-shapes .column-step__index {
  border-radius: var(--column-organic-radius-index);
  background: linear-gradient(145deg, var(--column-primary), var(--column-primary-strong));
  color: #ffffff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--column-primary) 28%, transparent);
}

/* ==========================================================================
   6. Compare
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-compare__item {
  padding: 0;
}

.column-content.column-ui-organic-shapes .column-compare__title {
  position: relative;
  padding: 15px 20px;
  background: var(--column-organic-band-fade);
  color: var(--column-primary-strong);
}

.column-content.column-ui-organic-shapes .column-compare__title::after,
.column-content.column-ui-organic-shapes .column-faq__question::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--column-organic-line-fade);
}

.column-content.column-ui-organic-shapes
  .column-compare
  > .column-compare__item:nth-child(even)
  .column-compare__title {
  background: var(--column-organic-band-fade-alt);
}

.column-content.column-ui-organic-shapes
  .column-compare
  > .column-compare__item:nth-child(even)
  .column-compare__title::after,
.column-content.column-ui-organic-shapes
  .column-faq__item:nth-child(even)
  .column-faq__question::after {
  background: var(--column-organic-line-fade-alt);
}

.column-content.column-ui-organic-shapes .column-compare__body {
  padding: 18px 20px 20px;
}

/* ==========================================================================
   7. Table
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-table-wrap {
  overflow: hidden;
  padding: 0;
}

.column-content.column-ui-organic-shapes .column-table th,
.column-content.column-ui-organic-shapes .column-table td {
  padding: 15px 20px;
  border: 0;
}

/* 밴드도 구분선도 오른쪽으로 갈수록 투명해진다 */
.column-content.column-ui-organic-shapes .column-table thead {
  background:
    var(--column-organic-line-fade) 0 100% / 100% 1px no-repeat,
    var(--column-organic-band-fade);
}

.column-content.column-ui-organic-shapes .column-table thead th {
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-organic-shapes .column-table tbody tr:not(:last-child) {
  background: var(--column-organic-line-fade) 0 100% / 100% 1px no-repeat;
}

.column-content.column-ui-organic-shapes .column-table tbody th {
  color: var(--column-primary-strong);
}

/* ==========================================================================
   8. Checklist / List
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-checklist__item::before {
  content: "◦";
  color: var(--column-primary);
}

.column-content.column-ui-organic-shapes .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-organic-shapes .column-list > li::before {
  border-radius: var(--column-organic-radius-marker);
  background: var(--column-primary);
}

.column-content.column-ui-organic-shapes .column-list--ordered > li::before,
.column-content.column-ui-organic-shapes ol.column-list > li::before {
  border-radius: 7px;
  background: linear-gradient(145deg, var(--column-primary), var(--column-primary-strong));
  color: #ffffff;
}

.column-content.column-ui-organic-shapes .column-list .column-list {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-faq__item {
  padding: 0;
}

.column-content.column-ui-organic-shapes .column-faq__question {
  position: relative;
  padding: 18px 22px 14px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-organic-shapes .column-faq__answer {
  padding: 15px 22px 18px;
  color: var(--column-organic-muted);
}

/* ==========================================================================
   10. Button — 호버에서 실루엣이 반대로 눕는다
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-button {
  padding: 16px 38px;
  border: 0;
  border-radius: var(--column-organic-radius-button);
  background: linear-gradient(135deg, var(--column-primary), var(--column-primary-strong));
  color: #ffffff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--column-primary) 28%, transparent);
  transition: border-radius 0.28s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.column-content.column-ui-organic-shapes .column-button:hover,
.column-content.column-ui-organic-shapes .column-button:focus-visible {
  border-radius: var(--column-organic-radius-button-alt);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px color-mix(in srgb, var(--column-primary) 32%, transparent);
}

/* ==========================================================================
   11. Divider
   ========================================================================== */

.column-content.column-ui-organic-shapes .column-divider {
  border: 0;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--column-organic-tint-soft),
      var(--column-organic-tint),
      var(--column-organic-tint-soft),
      transparent
    );
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .column-content.column-ui-organic-shapes .column-summary,
  .column-content.column-ui-organic-shapes .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: grid
   ========================================================================== */

/**
 * Medical Column - Grid UI Format
 *
 * Grid. 건축 도면처럼 모눈·코너 마크·치수선으로 구획한다.
 * 면을 칠하기보다 얇은 선으로 나누고, 포인트 요소에만 모눈과 코너 마크를 넣는다.
 * 사용: <div class="column-content column-ui-grid">
 */

.column-content.column-ui-grid {
  --column-grid-unit: 22px;

  /* 선 굵기는 도면처럼 두 단계로만 쓴다 */
  --column-grid-hairline: color-mix(in srgb, var(--column-primary) 20%, transparent);
  --column-grid-line: color-mix(in srgb, var(--column-primary) 38%, transparent);
  --column-grid-line-strong: var(--column-primary);

  --column-grid-graph: color-mix(in srgb, var(--column-primary) 7%, transparent);
  --column-grid-fill: color-mix(in srgb, var(--column-primary) 4%, #ffffff);
  --column-grid-band: color-mix(in srgb, var(--column-primary) 9%, transparent);
  --column-grid-muted: color-mix(in srgb, var(--column-primary) 30%, var(--column-text));

  /* 숫자 라벨에만 쓰는 도면 레터링 */
  --column-grid-label-font:
    ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
  --column-grid-label-tracking: 0.06em;

  /* 모눈 종이 */
  --column-grid-paper:
    repeating-linear-gradient(
      90deg,
      var(--column-grid-graph) 0 1px,
      transparent 1px var(--column-grid-unit)
    ),
    repeating-linear-gradient(
      180deg,
      var(--column-grid-graph) 0 1px,
      transparent 1px var(--column-grid-unit)
    );

  /* 네 모서리 크롭 마크 */
  --column-grid-corner:
    linear-gradient(var(--column-primary), var(--column-primary)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--column-primary), var(--column-primary)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--column-primary), var(--column-primary)) 100% 0 / 14px 2px no-repeat,
    linear-gradient(var(--column-primary), var(--column-primary)) 100% 0 / 2px 14px no-repeat,
    linear-gradient(var(--column-primary), var(--column-primary)) 0 100% / 14px 2px no-repeat,
    linear-gradient(var(--column-primary), var(--column-primary)) 0 100% / 2px 14px no-repeat,
    linear-gradient(var(--column-primary), var(--column-primary)) 100% 100% / 14px 2px no-repeat,
    linear-gradient(var(--column-primary), var(--column-primary)) 100% 100% / 2px 14px no-repeat;

  /* 칼럼 뒤는 게시판 배경이 그대로 보이도록 비워 둔다 */
  background: transparent;
}

/* ==========================================================================
   1. 포인트 요소 — 모눈 위에 코너 마크
   ========================================================================== */

.column-content.column-ui-grid .column-summary,
.column-content.column-ui-grid .column-cta {
  padding: 26px 28px;
  border: 1px solid var(--column-grid-line);
  border-radius: 0;
  background:
    var(--column-grid-corner),
    var(--column-grid-paper),
    var(--column-grid-fill);
}

.column-content.column-ui-grid .column-info-box {
  padding: 22px 24px;
  border: 1px solid var(--column-grid-line);
  border-radius: 0;
  background:
    var(--column-grid-paper),
    var(--column-grid-fill);
}

.column-content.column-ui-grid .column-toc {
  padding: 22px 24px;
  border: 1px solid var(--column-grid-hairline);
  border-left: 2px solid var(--column-grid-line-strong);
  border-radius: 0;
  background: var(--column-grid-fill);
}

/* ==========================================================================
   2. 일반 요소 — 면을 칠하지 않고 얇은 선으로만 구획한다
   ========================================================================== */

.column-content.column-ui-grid .column-blockquote,
.column-content.column-ui-grid .column-card,
.column-content.column-ui-grid .column-number-card,
.column-content.column-ui-grid .column-step,
.column-content.column-ui-grid .column-compare__item,
.column-content.column-ui-grid .column-checklist,
.column-content.column-ui-grid .column-list,
.column-content.column-ui-grid .column-details,
.column-content.column-ui-grid > .column-details__body,
.column-content.column-ui-grid .column-faq__item {
  padding: 18px 20px;
  border: 1px solid var(--column-grid-hairline);
  border-radius: 0;
  background: transparent;
}

.column-content.column-ui-grid .column-blockquote--intro,
.column-content.column-ui-grid .column-blockquote--conclusion {
  border-left: 2px solid var(--column-grid-line-strong);
  background: var(--column-grid-fill);
}

.column-content.column-ui-grid .column-blockquote--warning {
  border-color: color-mix(in srgb, var(--column-danger) 30%, transparent);
  border-left: 2px solid var(--column-danger);
  background: var(--column-danger-soft);
}

/* ==========================================================================
   3. 타이틀 / 텍스트
   ========================================================================== */

.column-content.column-ui-grid .column-summary__title,
.column-content.column-ui-grid .column-toc__title {
  color: var(--column-primary-strong);
  font-size: 15px;
  letter-spacing: var(--column-grid-label-tracking);
}

.column-content.column-ui-grid .column-summary__text {
  font-size: 1.02em;
}

/* 제목 앞에는 도면 스케일 바처럼 굵은 밴드를 세운다 */
.column-content.column-ui-grid .column-h2 {
  padding-left: 18px;
  border-left: 6px solid var(--column-grid-line-strong);
  color: var(--column-primary-strong);
}

.column-content.column-ui-grid .column-h3,
.column-content.column-ui-grid .column-h4,
.column-content.column-ui-grid .column-card__title,
.column-content.column-ui-grid .column-info-box__title,
.column-content.column-ui-grid .column-number-card__title,
.column-content.column-ui-grid .column-step__title,
.column-content.column-ui-grid .column-details__summary {
  color: var(--column-primary-strong);
}

/* ==========================================================================
   4. TOC
   ========================================================================== */

.column-content.column-ui-grid .column-toc__link {
  padding: 7px 10px;
  border-radius: 0;
  color: var(--column-text);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.column-content.column-ui-grid .column-toc__link:hover,
.column-content.column-ui-grid .column-toc__link:focus-visible {
  background: var(--column-grid-band);
  color: var(--column-primary-strong);
}

.column-content.column-ui-grid .column-toc__link--sub {
  color: var(--column-grid-muted);
}

/* ==========================================================================
   5. Number Card / Step Index — 도면 부재 번호
   ========================================================================== */

.column-content.column-ui-grid .column-number-card__index,
.column-content.column-ui-grid .column-step__index {
  border: 0;
  border-radius: 0;
  background: var(--column-primary);
  color: #ffffff;
  font-family: var(--column-grid-label-font);
  letter-spacing: var(--column-grid-label-tracking);
}

/* ==========================================================================
   6. Compare
   ========================================================================== */

.column-content.column-ui-grid .column-compare__item {
  padding: 0;
}

.column-content.column-ui-grid .column-compare__title {
  padding: 13px 18px;
  border-bottom: 1px solid var(--column-grid-line);
  background: var(--column-grid-band);
  color: var(--column-primary-strong);
}

.column-content.column-ui-grid .column-compare__body {
  padding: 16px 18px 18px;
}

/* ==========================================================================
   7. Table — 표 자체가 격자이므로 바깥 테두리는 한 겹만
   ========================================================================== */

.column-content.column-ui-grid .column-table-wrap {
  padding: 0;
  border: 1px solid var(--column-grid-line);
  border-radius: 0;
  background: transparent;
}

.column-content.column-ui-grid .column-table th,
.column-content.column-ui-grid .column-table td {
  padding: 13px 16px;
  border: 1px solid var(--column-grid-hairline);
}

.column-content.column-ui-grid .column-table thead th {
  border-bottom-color: var(--column-grid-line);
  background: var(--column-grid-band);
  color: var(--column-primary-strong);
}

.column-content.column-ui-grid .column-table tbody th {
  color: var(--column-primary-strong);
}

/* ==========================================================================
   8. Checklist / List — 교차점 마크
   ========================================================================== */

.column-content.column-ui-grid .column-checklist__item::before {
  content: "+";
  color: var(--column-primary);
  font-weight: 800;
}

.column-content.column-ui-grid .column-list {
  padding: 10px 18px;
}

.column-content.column-ui-grid .column-list > li::before {
  border-radius: 0;
  background: var(--column-primary);
}

.column-content.column-ui-grid .column-list--ordered > li::before,
.column-content.column-ui-grid ol.column-list > li::before {
  border-radius: 0;
  background: var(--column-primary);
  color: #ffffff;
  font-family: var(--column-grid-label-font);
}

.column-content.column-ui-grid .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.column-content.column-ui-grid .column-faq__item {
  padding: 0;
}

.column-content.column-ui-grid .column-faq__question {
  padding: 16px 20px 13px;
  border-bottom: 1px solid var(--column-grid-hairline);
  color: var(--column-primary-strong);
}

.column-content.column-ui-grid .column-faq__answer {
  padding: 14px 20px 16px;
  color: var(--column-grid-muted);
}

/* ==========================================================================
   10. Button
   ========================================================================== */

.column-content.column-ui-grid .column-button {
  padding: 14px 34px;
  border: 0;
  border-radius: 0;
  background: var(--column-primary);
  color: #ffffff;
  letter-spacing: var(--column-grid-label-tracking);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--column-primary-strong) 35%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.column-content.column-ui-grid .column-button:hover,
.column-content.column-ui-grid .column-button:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--column-primary-strong) 42%, transparent);
}

/* ==========================================================================
   11. Divider
   ========================================================================== */

.column-content.column-ui-grid .column-divider {
  border: 0;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--column-grid-line) 0 10px,
    transparent 10px 18px
  );
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .column-content.column-ui-grid .column-summary,
  .column-content.column-ui-grid .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: paper
   ========================================================================== */

/**
 * Medical Column - Paper UI Format
 *
 * Paper Texture. 인쇄 지면 조판.
 * 대부분은 테두리 없는 무채색 지면으로 두고, 강조는 요약·CTA·정보 박스에만 준다.
 * 선으로 구획하는 Grid와 달리 이쪽은 면으로 눕히고, 세리프와 이중선으로 인쇄물 느낌을 낸다.
 * 사용: <div class="column-content column-ui-paper">
 */

.column-content.column-ui-paper {
  /* 잉크(primary)는 강조에만, 지면은 무채색으로 둔다 */
  --column-paper-ink: var(--column-primary);
  --column-paper-rule: color-mix(in srgb, var(--column-primary) 55%, transparent);
  --column-paper-line: color-mix(in srgb, var(--column-heading) 12%, transparent);
  --column-paper-surface: var(--column-surface-alt);
  --column-paper-surface-strong: color-mix(in srgb, var(--column-heading) 5%, #ffffff);
  --column-paper-tint: color-mix(in srgb, var(--column-primary) 7%, #ffffff);
  --column-paper-muted: var(--column-muted);

  --column-paper-serif: Georgia, "Times New Roman", serif;
  --column-paper-tracking: 0.06em;

  /* 원고지 괘선 */
  --column-paper-ruled:
    repeating-linear-gradient(
      0deg,
      transparent 0 23px,
      color-mix(in srgb, var(--column-primary) 8%, transparent) 23px 24px
    );

  /* 칼럼 뒤는 게시판 배경이 그대로 보이도록 비워 둔다 */
  background: transparent;
}

/* ==========================================================================
   1. 포인트 요소 — 괘선 지면에 겹테두리
   ========================================================================== */

.column-content.column-ui-paper .column-summary,
.column-content.column-ui-paper .column-cta {
  padding: 24px 26px;
  border: 1px solid var(--column-paper-rule);
  border-radius: 0;
  outline: 1px solid var(--column-paper-line);
  outline-offset: 3px;
  background-color: color-mix(in srgb, var(--column-paper-tint) 55%, #ffffff);
  background-image: var(--column-paper-ruled);
}

.column-content.column-ui-paper .column-info-box {
  padding: 20px 22px;
  border: 0;
  border-left: 4px solid var(--column-paper-ink);
  border-radius: 0;
  background: var(--column-paper-tint);
}

.column-content.column-ui-paper .column-toc {
  padding: 20px 22px;
  border: 0;
  border-bottom: 3px double var(--column-paper-rule);
  border-radius: 0;
  background: var(--column-paper-surface);
}

/* ==========================================================================
   2. 일반 요소 — 무채색 지면. 인용만 지면 없이 본문에 얹는다
   ========================================================================== */

.column-content.column-ui-paper .column-card,
.column-content.column-ui-paper .column-number-card,
.column-content.column-ui-paper .column-step,
.column-content.column-ui-paper .column-compare__item,
.column-content.column-ui-paper .column-table-wrap,
.column-content.column-ui-paper .column-checklist,
.column-content.column-ui-paper .column-list,
.column-content.column-ui-paper .column-details,
.column-content.column-ui-paper > .column-details__body,
.column-content.column-ui-paper .column-faq__item {
  padding: 20px 22px;
  border: 0;
  border-radius: 0;
  background: var(--column-paper-surface);
}

.column-content.column-ui-paper .column-blockquote {
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--column-paper-serif);
}

.column-content.column-ui-paper .column-blockquote--warning {
  padding: 18px 20px;
  border-left: 4px solid var(--column-danger);
  background: var(--column-danger-soft);
}

.column-content.column-ui-paper .column-blockquote--expert {
  color: var(--column-paper-muted);
  font-style: italic;
}

/* ==========================================================================
   3. 타이포 — 제목과 라벨은 세리프로 짠다
   ========================================================================== */

.column-content.column-ui-paper .column-h2,
.column-content.column-ui-paper .column-h3,
.column-content.column-ui-paper .column-h4,
.column-content.column-ui-paper .column-card__title,
.column-content.column-ui-paper .column-info-box__title,
.column-content.column-ui-paper .column-number-card__title,
.column-content.column-ui-paper .column-step__title,
.column-content.column-ui-paper .column-details__summary,
.column-content.column-ui-paper .column-faq__question,
.column-content.column-ui-paper .column-compare__title {
  font-family: var(--column-paper-serif);
  color: var(--column-heading);
}

.column-content.column-ui-paper .column-h2 {
  padding-bottom: 10px;
  border-bottom: 3px double var(--column-paper-rule);
}

.column-content.column-ui-paper .column-summary__title,
.column-content.column-ui-paper .column-toc__title {
  color: var(--column-paper-ink);
  font-family: var(--column-paper-serif);
  font-size: 15px;
  letter-spacing: var(--column-paper-tracking);
}

.column-content.column-ui-paper .column-summary__text {
  font-size: 1.02em;
}

/* ==========================================================================
   4. TOC
   ========================================================================== */

.column-content.column-ui-paper .column-toc__link {
  padding: 6px 0;
  color: var(--column-text);
}

.column-content.column-ui-paper .column-toc__link:hover,
.column-content.column-ui-paper .column-toc__link:focus-visible {
  color: var(--column-paper-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.column-content.column-ui-paper .column-toc__link--sub {
  color: var(--column-paper-muted);
}

/* ==========================================================================
   5. Number Card / Step Index
   ========================================================================== */

.column-content.column-ui-paper .column-number-card__index,
.column-content.column-ui-paper .column-step__index {
  border-radius: 0;
  background: var(--column-paper-ink);
  color: #ffffff;
  font-family: var(--column-paper-serif);
  letter-spacing: var(--column-paper-tracking);
}

/* ==========================================================================
   6. Compare
   ========================================================================== */

.column-content.column-ui-paper .column-compare__item {
  padding: 0;
}

.column-content.column-ui-paper .column-compare__title {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--column-paper-line);
  letter-spacing: 0.04em;
}

.column-content.column-ui-paper .column-compare__body {
  padding: 16px 20px 18px;
}

/* ==========================================================================
   7. Table — 세로선 없이 가로 괘선만 쓰는 인쇄 조판
   ========================================================================== */

.column-content.column-ui-paper .column-table-wrap {
  padding: 0;
}

.column-content.column-ui-paper .column-table th,
.column-content.column-ui-paper .column-table td {
  padding: 13px 20px;
  border: 0;
  border-bottom: 1px solid var(--column-paper-line);
}

.column-content.column-ui-paper .column-table thead th {
  padding-top: 14px;
  padding-bottom: 12px;
  border-bottom: 3px double var(--column-paper-rule);
  background: var(--column-paper-surface-strong);
  color: var(--column-heading);
  font-family: var(--column-paper-serif);
  font-size: 14px;
  letter-spacing: var(--column-paper-tracking);
}

.column-content.column-ui-paper .column-table tbody th {
  color: var(--column-heading);
}

.column-content.column-ui-paper .column-table tr:last-child th,
.column-content.column-ui-paper .column-table tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   8. Checklist / List
   ========================================================================== */

.column-content.column-ui-paper .column-checklist__item::before {
  content: "※";
  color: var(--column-paper-ink);
}

.column-content.column-ui-paper .column-list {
  padding: 14px 22px;
}

.column-content.column-ui-paper .column-list > li::before {
  border-radius: 0;
  background: var(--column-paper-ink);
}

.column-content.column-ui-paper .column-list--ordered > li::before,
.column-content.column-ui-paper ol.column-list > li::before {
  border-radius: 0;
  background: var(--column-paper-ink);
  color: #ffffff;
  font-family: var(--column-paper-serif);
}

.column-content.column-ui-paper .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
}

/* ==========================================================================
   9. Details / FAQ — 이중선으로 묻고 답을 끊는다
   ========================================================================== */

.column-content.column-ui-paper .column-details__summary {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--column-paper-line);
}

.column-content.column-ui-paper .column-details__body {
  padding-top: 14px;
}

.column-content.column-ui-paper .column-faq__item {
  padding: 0;
}

.column-content.column-ui-paper .column-faq__question {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--column-paper-line);
}

.column-content.column-ui-paper .column-faq__answer {
  padding: 16px 22px 18px;
  color: var(--column-paper-muted);
}

/* ==========================================================================
   10. Button — 지면에 찍은 스탬프
   ========================================================================== */

.column-content.column-ui-paper .column-button {
  padding: 14px 34px;
  border: 0;
  border-radius: 0;
  background: var(--column-paper-ink);
  color: #ffffff;
  letter-spacing: var(--column-paper-tracking);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--column-primary-strong) 30%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.column-content.column-ui-paper .column-button:hover,
.column-content.column-ui-paper .column-button:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--column-primary-strong) 36%, transparent);
}

/* ==========================================================================
   11. Divider
   ========================================================================== */

.column-content.column-ui-paper .column-divider {
  height: 0;
  border: 0;
  border-top: 3px double var(--column-paper-rule);
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .column-content.column-ui-paper .column-summary,
  .column-content.column-ui-paper .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: maximal
   ========================================================================== */

/**
 * Medical Column - Maximal UI Format
 *
 * Maximalism, Bold.
 * 사용: <div class="column-content column-ui-maximal">
 */
.column-content.column-ui-maximal {
  background: #ffffff;
}


.column-content.column-ui-maximal .column-summary {
  padding: 24px 26px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-maximal .column-summary__title {
  color: #ffffff;
}

.column-content.column-ui-maximal .column-summary__text {
  color: color-mix(in srgb, #ffffff 88%, var(--column-primary));
}

.column-content.column-ui-maximal .column-blockquote {
  padding: 18px 22px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-secondary-soft);
}

.column-content.column-ui-maximal .column-blockquote--warning {
  background: var(--column-danger);
  color: #ffffff;
}

.column-content.column-ui-maximal .column-blockquote--expert {
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-maximal .column-toc {
  padding: 22px 24px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-maximal .column-toc__title {
  color: #ffffff;
}

.column-content.column-ui-maximal .column-toc__link {
  padding: 8px 10px;
  border-radius: var(--column-radius-sm);
  color: color-mix(in srgb, #ffffff 82%, var(--column-heading));
}

.column-content.column-ui-maximal .column-toc__link:hover,
.column-content.column-ui-maximal .column-toc__link:focus-visible {
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-maximal .column-toc__link--sub {
  color: color-mix(in srgb, #ffffff 62%, var(--column-heading));
}

.column-content.column-ui-maximal .column-h2 {
  padding: 10px 14px;
  border-radius: var(--column-radius-sm);
  background: var(--column-primary);
  color: #ffffff;
  font-weight: 600;
}

.column-content.column-ui-maximal .column-h3,
.column-content.column-ui-maximal .column-h4,
.column-content.column-ui-maximal .column-card__title,
.column-content.column-ui-maximal .column-info-box__title,
.column-content.column-ui-maximal .column-number-card__title,
.column-content.column-ui-maximal .column-step__title,
.column-content.column-ui-maximal .column-details__summary {
  color: var(--column-primary-strong);
  font-weight: 600;
}

.column-content.column-ui-maximal .column-card,
.column-content.column-ui-maximal .column-number-card,
.column-content.column-ui-maximal .column-step,
.column-content.column-ui-maximal .column-compare__item,
.column-content.column-ui-maximal .column-checklist,
.column-content.column-ui-maximal .column-list,
.column-content.column-ui-maximal .column-details,
.column-content.column-ui-maximal > .column-details__body,
.column-content.column-ui-maximal .column-faq__item {
  padding: 20px 22px;
  border: 3px solid var(--column-primary);
  border-radius: var(--column-radius-md);
  background: var(--column-surface);
}

.column-content.column-ui-maximal .column-info-box {
  padding: 22px 24px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-secondary);
  color: #ffffff;
}

.column-content.column-ui-maximal .column-info-box__title {
  color: #ffffff;
}

.column-content.column-ui-maximal .column-number-card__index,
.column-content.column-ui-maximal .column-step__index {
  border-radius: var(--column-radius-sm);
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-maximal .column-compare__title {
  padding: 14px 18px;
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

.column-content.column-ui-maximal .column-compare__body {
  padding: 18px;
}

.column-content.column-ui-maximal .column-table-wrap {
  border: 3px solid var(--column-primary);
  border-radius: var(--column-radius-md);
}

.column-content.column-ui-maximal .column-table th,
.column-content.column-ui-maximal .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-maximal .column-table thead th {
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-maximal .column-table tr:last-child th,
.column-content.column-ui-maximal .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-maximal .column-checklist__item::before {
  content: "■";
  color: var(--column-primary);
}

.column-content.column-ui-maximal .column-list > li::before {
  background: var(--column-primary);
  border-radius: 2px;
}

.column-content.column-ui-maximal .column-list--ordered > li::before,
.column-content.column-ui-maximal ol.column-list > li::before {
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-maximal .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
}

.column-content.column-ui-maximal .column-faq__question {
  padding: 4px 0 8px;
  color: var(--column-primary-strong);
}

.column-content.column-ui-maximal .column-faq__answer {
  padding: 0 0 4px;
}

.column-content.column-ui-maximal .column-cta {
  padding: 24px 26px;
  border: 0;
  border-radius: var(--column-radius-lg);
  background: var(--column-primary-soft);
}

.column-content.column-ui-maximal .column-button {
  padding: 16px 40px;
  border: 0;
  border-radius: var(--column-radius-md);
  background: var(--column-primary);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--column-primary) 40%, transparent);
}

.column-content.column-ui-maximal .column-button:hover,
.column-content.column-ui-maximal .column-button:focus-visible {
  background: var(--column-heading);
}

.column-content.column-ui-maximal .column-divider {
  border: 0;
  height: 6px;
  background: var(--column-primary);
}

@media (max-width: 640px) {
  .column-content.column-ui-maximal .column-summary,
  .column-content.column-ui-maximal .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: brutal
   ========================================================================== */

/**
 * Medical Column - Brutalism UI Format
 *
 * Brutalism. 거칠고 직설적인 테두리와 시스템 타이포.
 * 사용: <div class="column-content column-ui-brutal">
 */

.column-content.column-ui-brutal {
  background: #ffffff;
}

.column-content.column-ui-brutal .column-summary,
.column-content.column-ui-brutal .column-blockquote,
.column-content.column-ui-brutal .column-toc,
.column-content.column-ui-brutal .column-card,
.column-content.column-ui-brutal .column-info-box,
.column-content.column-ui-brutal .column-number-card,
.column-content.column-ui-brutal .column-step,
.column-content.column-ui-brutal .column-compare__item,
.column-content.column-ui-brutal .column-table-wrap,
.column-content.column-ui-brutal .column-checklist,
.column-content.column-ui-brutal .column-list,
.column-content.column-ui-brutal .column-details,
.column-content.column-ui-brutal > .column-details__body,
.column-content.column-ui-brutal .column-faq__item,
.column-content.column-ui-brutal .column-cta {
  border: 4px solid var(--column-heading);
  border-radius: 0;
  background: #ffffff;
}

.column-content.column-ui-brutal .column-summary,
.column-content.column-ui-brutal .column-toc,
.column-content.column-ui-brutal .column-card,
.column-content.column-ui-brutal .column-info-box,
.column-content.column-ui-brutal .column-number-card,
.column-content.column-ui-brutal .column-step,
.column-content.column-ui-brutal .column-checklist,
.column-content.column-ui-brutal .column-cta {
  padding: 22px 24px;
}

.column-content.column-ui-brutal .column-summary__title,
.column-content.column-ui-brutal .column-toc__title {
  color: var(--column-heading);
}

.column-content.column-ui-brutal .column-blockquote {
  padding: 18px 20px;
}



.column-content.column-ui-brutal .column-toc__link {
  padding: 7px 10px;
  border-radius: var(--column-radius-sm);
  color: var(--column-text);
}

.column-content.column-ui-brutal .column-toc__link:hover,
.column-content.column-ui-brutal .column-toc__link:focus-visible {
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-brutal .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-brutal .column-h2 {
  margin-top: 40px;
  font-size: 28px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--column-heading);
}

.column-content.column-ui-brutal .column-h3,
.column-content.column-ui-brutal .column-h4,
.column-content.column-ui-brutal .column-card__title,
.column-content.column-ui-brutal .column-info-box__title,
.column-content.column-ui-brutal .column-number-card__title,
.column-content.column-ui-brutal .column-step__title,
.column-content.column-ui-brutal .column-details__summary {
  color: var(--column-heading);
}





.column-content.column-ui-brutal .column-number-card__index,
.column-content.column-ui-brutal .column-step__index {
  border: 4px solid var(--column-heading);
  border-radius: 0;
  background: #ffffff;
  color: var(--column-heading);
}

.column-content.column-ui-brutal .column-compare__title {
  padding: 14px 20px;
  background: var(--column-heading);
  color: #ffffff;
  text-transform: uppercase;
}

.column-content.column-ui-brutal .column-compare__body {
  padding: 18px 20px 20px;
}

.column-content.column-ui-brutal .column-table th,
.column-content.column-ui-brutal .column-table td {
  padding: 14px 20px;
  border-bottom: 2px solid var(--column-heading);
}

.column-content.column-ui-brutal .column-table thead th {
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-brutal .column-table tr:last-child th,
.column-content.column-ui-brutal .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-brutal .column-checklist__item::before {
  content: "X";
  color: var(--column-heading);
}

.column-content.column-ui-brutal .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-brutal .column-list > li::before {
  border-radius: 0; background: var(--column-heading);
}

.column-content.column-ui-brutal .column-list--ordered > li::before,
.column-content.column-ui-brutal ol.column-list > li::before {
  background: var(--column-primary); color: #ffffff;
}

.column-content.column-ui-brutal .column-list .column-list {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  backdrop-filter: none;
}

.column-content.column-ui-brutal .column-details,
.column-content.column-ui-brutal > .column-details__body {
  padding: 16px 20px;
}

/* 검정 밴드가 질문을 덮고, 답변은 그 아래 흰 면에서 숨을 쉰다 */
.column-content.column-ui-brutal .column-faq__item {
  margin-bottom: 20px;
}

.column-content.column-ui-brutal .column-faq__question {
  padding: 16px 20px;
  background: var(--column-heading);
  color: #ffffff;
  letter-spacing: -0.01em;
}

.column-content.column-ui-brutal .column-faq__answer {
  padding: 18px 20px 20px;
}

.column-content.column-ui-brutal .column-button {
  padding: 16px 32px;
  border: 4px solid var(--column-heading);
  border-radius: 0;
  background: var(--column-primary);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.column-content.column-ui-brutal .column-button:hover,
.column-content.column-ui-brutal .column-button:focus-visible {
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-brutal .column-divider {
  border-top: 4px solid var(--column-heading);
}

.column-content.column-ui-brutal .column-summary {
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-brutal .column-summary__title,
.column-content.column-ui-brutal .column-summary__text {
  color: #ffffff;
}

@media (max-width: 640px) {
  .column-content.column-ui-brutal .column-summary,
  .column-content.column-ui-brutal .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: neo-brutal
   ========================================================================== */

/**
 * Medical Column - Neo Brutal UI Format
 *
 * Neo Brutalism. 굵은 테두리, 오프셋 그림자, 직각.
 * 사용: <div class="column-content column-ui-neo-brutal">
 */
.column-content.column-ui-neo-brutal {
  background: #ffffff;
}


.column-content.column-ui-neo-brutal .column-summary,
.column-content.column-ui-neo-brutal .column-blockquote,
.column-content.column-ui-neo-brutal .column-toc,
.column-content.column-ui-neo-brutal .column-card,
.column-content.column-ui-neo-brutal .column-info-box,
.column-content.column-ui-neo-brutal .column-number-card,
.column-content.column-ui-neo-brutal .column-step,
.column-content.column-ui-neo-brutal .column-compare__item,
.column-content.column-ui-neo-brutal .column-table-wrap,
.column-content.column-ui-neo-brutal .column-checklist,
.column-content.column-ui-neo-brutal .column-list,
.column-content.column-ui-neo-brutal .column-details,
.column-content.column-ui-neo-brutal > .column-details__body,
.column-content.column-ui-neo-brutal .column-faq__item,
.column-content.column-ui-neo-brutal .column-cta {
  border: 3px solid var(--column-heading);
  border-radius: 0;
  background: var(--column-surface);
  box-shadow: 6px 6px 0 var(--column-heading);
}

.column-content.column-ui-neo-brutal .column-summary,
.column-content.column-ui-neo-brutal .column-toc,
.column-content.column-ui-neo-brutal .column-card,
.column-content.column-ui-neo-brutal .column-info-box,
.column-content.column-ui-neo-brutal .column-number-card,
.column-content.column-ui-neo-brutal .column-step,
.column-content.column-ui-neo-brutal .column-checklist,
.column-content.column-ui-neo-brutal .column-cta {
  padding: 20px 22px;
}

.column-content.column-ui-neo-brutal .column-summary {
  background: var(--column-primary);
}

.column-content.column-ui-neo-brutal .column-summary__title,
.column-content.column-ui-neo-brutal .column-summary__text {
  color: #ffffff;
}

.column-content.column-ui-neo-brutal .column-blockquote {
  padding: 16px 18px;
  background: var(--column-primary-soft);
}

.column-content.column-ui-neo-brutal .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-neo-brutal .column-blockquote--expert {
  background: var(--column-secondary-soft);
}

.column-content.column-ui-neo-brutal .column-toc {
  background: var(--column-secondary-soft);
}

.column-content.column-ui-neo-brutal .column-toc__title {
  color: var(--column-heading);
}

.column-content.column-ui-neo-brutal .column-toc__link {
  padding: 6px 0;
  color: var(--column-text);
}

.column-content.column-ui-neo-brutal .column-toc__link:hover,
.column-content.column-ui-neo-brutal .column-toc__link:focus-visible {
  color: var(--column-primary);
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.column-content.column-ui-neo-brutal .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-neo-brutal .column-h2 {
  padding: 8px 12px;
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-neo-brutal .column-h3 {
  padding-left: 12px;
  border-left: 6px solid var(--column-primary);
  color: var(--column-heading);
}

.column-content.column-ui-neo-brutal .column-h4,
.column-content.column-ui-neo-brutal .column-card__title,
.column-content.column-ui-neo-brutal .column-info-box__title,
.column-content.column-ui-neo-brutal .column-number-card__title,
.column-content.column-ui-neo-brutal .column-step__title,
.column-content.column-ui-neo-brutal .column-details__summary {
  color: var(--column-heading);
}

.column-content.column-ui-neo-brutal .column-info-box {
  background: var(--column-primary);
}

.column-content.column-ui-neo-brutal .column-info-box,
.column-content.column-ui-neo-brutal .column-info-box__title,
.column-content.column-ui-neo-brutal .column-info-box__body {
  color: #ffffff;
}

.column-content.column-ui-neo-brutal .column-number-card__index,
.column-content.column-ui-neo-brutal .column-step__index {
  border: 3px solid var(--column-heading);
  border-radius: 0;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-neo-brutal .column-compare__title {
  padding: 14px 18px;
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-neo-brutal .column-compare__body {
  padding: 18px;
}

.column-content.column-ui-neo-brutal .column-table th,
.column-content.column-ui-neo-brutal .column-table td {
  padding: 14px 16px;
  border-bottom: 3px solid var(--column-heading);
}

.column-content.column-ui-neo-brutal .column-table thead th {
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-neo-brutal .column-table tbody th {
  background: var(--column-secondary-soft);
}

.column-content.column-ui-neo-brutal .column-table tr:last-child th,
.column-content.column-ui-neo-brutal .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-neo-brutal .column-checklist__item::before {
  content: "■";
  color: var(--column-primary);
}

.column-content.column-ui-neo-brutal .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-neo-brutal .column-list > li + li {
  border-top: 3px solid var(--column-heading);
}

.column-content.column-ui-neo-brutal .column-list > li::before {
  border-radius: 0;
  background: var(--column-primary);
}

.column-content.column-ui-neo-brutal .column-list--ordered > li::before,
.column-content.column-ui-neo-brutal ol.column-list > li::before {
  border-radius: 0;
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-neo-brutal .column-list .column-list {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.column-content.column-ui-neo-brutal .column-list .column-list > li + li {
  border-top: 0;
}

.column-content.column-ui-neo-brutal .column-details,
.column-content.column-ui-neo-brutal > .column-details__body {
  padding: 16px 20px;
  background: var(--column-secondary-soft);
}

.column-content.column-ui-neo-brutal .column-faq__question {
  padding: 16px 20px;
  background: var(--column-primary);
  color: #ffffff;
}

.column-content.column-ui-neo-brutal .column-faq__answer {
  padding: 18px 20px;
}

.column-content.column-ui-neo-brutal .column-cta {
  background: var(--column-primary-soft);
}

.column-content.column-ui-neo-brutal .column-button {
  padding: 14px 28px;
  border: 3px solid var(--column-heading);
  border-radius: 0;
  background: var(--column-primary);
  color: #ffffff;
  box-shadow: 4px 4px 0 var(--column-heading);
}

.column-content.column-ui-neo-brutal .column-button:hover,
.column-content.column-ui-neo-brutal .column-button:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--column-heading);
}

.column-content.column-ui-neo-brutal .column-divider {
  border-top: 3px solid var(--column-heading);
}

@media (max-width: 640px) {
  .column-content.column-ui-neo-brutal .column-summary,
  .column-content.column-ui-neo-brutal .column-card,
  .column-content.column-ui-neo-brutal .column-cta {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   FORMAT: vintage
   ========================================================================== */

/**
 * Medical Column - Vintage UI Format
 *
 * Vintage. 세리프와 이중선은 포인트에만, 일부는 틴트 면.
 * 사용: <div class="column-content column-ui-vintage">
 */

.column-content.column-ui-vintage {
  background: #ffffff;
}

.column-content.column-ui-vintage .column-summary,
.column-content.column-ui-vintage .column-cta {
  padding: 22px 24px;
  border: 3px double var(--column-heading);
  background: color-mix(in srgb, var(--column-surface) 82%, var(--column-primary-soft));
}

.column-content.column-ui-vintage .column-info-box {
  padding: 22px 24px;
  border-left: 6px solid var(--column-heading);
  background: var(--column-primary-soft);
}

.column-content.column-ui-vintage .column-toc {
  padding: 22px 24px;
  border: 0;
  background: var(--column-surface-alt);
}

.column-content.column-ui-vintage .column-blockquote,
.column-content.column-ui-vintage .column-card,
.column-content.column-ui-vintage .column-number-card,
.column-content.column-ui-vintage .column-step,
.column-content.column-ui-vintage .column-compare__item,
.column-content.column-ui-vintage .column-table-wrap,
.column-content.column-ui-vintage .column-checklist,
.column-content.column-ui-vintage .column-list,
.column-content.column-ui-vintage .column-details,
.column-content.column-ui-vintage > .column-details__body,
.column-content.column-ui-vintage .column-faq__item {
  padding: 18px 20px;
  border: 0;
  background: var(--column-surface-alt);
}

.column-content.column-ui-vintage .column-summary__title,
.column-content.column-ui-vintage .column-toc__title {
  color: var(--column-heading);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.column-content.column-ui-vintage .column-blockquote--warning {
  background: var(--column-danger-soft);
}

.column-content.column-ui-vintage .column-toc__link {
  padding: 7px 10px;
  color: var(--column-text);
}

.column-content.column-ui-vintage .column-toc__link:hover,
.column-content.column-ui-vintage .column-toc__link:focus-visible {
  color: var(--column-primary);
}

.column-content.column-ui-vintage .column-toc__link--sub {
  color: var(--column-muted);
}

.column-content.column-ui-vintage .column-h2 {
  padding-bottom: 8px;
  border-bottom: 3px double var(--column-heading);
  color: var(--column-heading);
  font-family: Georgia, "Times New Roman", serif;
}

.column-content.column-ui-vintage .column-h3,
.column-content.column-ui-vintage .column-h4,
.column-content.column-ui-vintage .column-card__title,
.column-content.column-ui-vintage .column-info-box__title,
.column-content.column-ui-vintage .column-number-card__title,
.column-content.column-ui-vintage .column-step__title,
.column-content.column-ui-vintage .column-details__summary,
.column-content.column-ui-vintage .column-faq__question {
  color: var(--column-heading);
  font-family: Georgia, "Times New Roman", serif;
}

.column-content.column-ui-vintage .column-number-card__index,
.column-content.column-ui-vintage .column-step__index {
  border-radius: 0;
  background: var(--column-heading);
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
}

.column-content.column-ui-vintage .column-compare__title {
  padding: 14px 18px;
  border-bottom: 2px solid var(--column-heading);
  color: var(--column-heading);
  font-family: Georgia, "Times New Roman", serif;
}

.column-content.column-ui-vintage .column-compare__body {
  padding: 18px;
}

.column-content.column-ui-vintage .column-table th,
.column-content.column-ui-vintage .column-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--column-border);
}

.column-content.column-ui-vintage .column-table thead th {
  border-bottom: 3px double var(--column-heading);
  background: color-mix(in srgb, var(--column-surface) 82%, var(--column-primary-soft));
  color: var(--column-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}

.column-content.column-ui-vintage .column-table tr:last-child th,
.column-content.column-ui-vintage .column-table tr:last-child td {
  border-bottom: 0;
}

.column-content.column-ui-vintage .column-checklist__item::before {
  content: "※";
  color: var(--column-heading);
}

.column-content.column-ui-vintage .column-list {
  padding: 6px 16px;
}

.column-content.column-ui-vintage .column-list > li::before {
  border-radius: 0;
  background: var(--column-heading);
}

.column-content.column-ui-vintage .column-list--ordered > li::before,
.column-content.column-ui-vintage ol.column-list > li::before {
  background: var(--column-heading);
  color: #ffffff;
}

.column-content.column-ui-vintage .column-list .column-list {
  padding: 0;
  background: transparent;
}

.column-content.column-ui-vintage .column-faq__question {
  padding: 16px 20px;
}

.column-content.column-ui-vintage .column-faq__answer {
  padding: 0 20px 18px;
}

.column-content.column-ui-vintage .column-button {
  padding: 13px 34px;
  border: 0;
  border-radius: 0;
  background: var(--column-heading);
  color: #ffffff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  box-shadow: inset 0 0 0 2px var(--column-surface), 0 0 0 2px var(--column-heading);
}

.column-content.column-ui-vintage .column-button:hover,
.column-content.column-ui-vintage .column-button:focus-visible {
  background: var(--column-primary);
}

.column-content.column-ui-vintage .column-divider {
  border-top: 3px double var(--column-heading);
}

@media (max-width: 640px) {
  .column-content.column-ui-vintage .column-summary,
  .column-content.column-ui-vintage .column-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   FORMAT: bold
   ========================================================================== */

/**
 * Medical Column - Bold UI Format
 *
 * Bold. 크고 굵은 타이포와 꽉 찬 컬러 면.
 * 제목·라벨은 한 단계씩 키우고, 강조는 색 면(밴드)으로 덮어 대비를 만든다.
 * 사용: <div class="column-content column-ui-bold">
 */

.column-content.column-ui-bold {
  --column-bold-ink: var(--column-primary);
  --column-bold-ink-strong: var(--column-primary-strong);
  --column-bold-contrast: var(--column-heading);

  --column-bold-surface: color-mix(in srgb, var(--column-primary) 5%, #ffffff);
  --column-bold-surface-strong: color-mix(in srgb, var(--column-primary) 12%, #ffffff);
  --column-bold-line: color-mix(in srgb, var(--column-primary) 28%, transparent);
  --column-bold-muted: color-mix(in srgb, var(--column-primary) 28%, var(--column-text));

  --column-bold-tracking: -0.03em;

  /* 칼럼 뒤는 게시판 배경이 그대로 보이도록 비워 둔다 */
  background: transparent;
}

/* ==========================================================================
   1. 포인트 요소 — 색 면으로 덮는다
   ========================================================================== */

.column-content.column-ui-bold .column-summary {
  padding: 28px 30px;
  border: 0;
  border-radius: 0;
  background: var(--column-bold-ink);
  color: #ffffff;
}

.column-content.column-ui-bold .column-summary__title,
.column-content.column-ui-bold .column-summary__text {
  color: #ffffff;
}

.column-content.column-ui-bold .column-summary__title {
  font-size: 17px;
  letter-spacing: var(--column-bold-tracking);
}

.column-content.column-ui-bold .column-summary__text {
  font-size: 1.1em;
  font-weight: 600;
}

.column-content.column-ui-bold .column-cta {
  padding: 34px 30px;
  border: 0;
  border-radius: 0;
  background: var(--column-bold-contrast);
  color: #ffffff;
}

.column-content.column-ui-bold .column-toc {
  padding: 26px 28px;
  border: 0;
  border-radius: 0;
  background: var(--column-bold-surface-strong);
}

.column-content.column-ui-bold .column-info-box {
  padding: 24px 26px;
  border: 0;
  border-left: 10px solid var(--column-bold-ink);
  border-radius: 0;
  background: var(--column-bold-surface-strong);
}

/* ==========================================================================
   2. 일반 요소
   ========================================================================== */

.column-content.column-ui-bold .column-blockquote,
.column-content.column-ui-bold .column-card,
.column-content.column-ui-bold .column-number-card,
.column-content.column-ui-bold .column-step,
.column-content.column-ui-bold .column-compare__item,
.column-content.column-ui-bold .column-table-wrap,
.column-content.column-ui-bold .column-checklist,
.column-content.column-ui-bold .column-list,
.column-content.column-ui-bold .column-details,
.column-content.column-ui-bold > .column-details__body,
.column-content.column-ui-bold .column-faq__item {
  padding: 22px 24px;
  border: 0;
  border-radius: 0;
  background: var(--column-bold-surface);
}

/* 인용은 굵은 기둥을 세우고 글자를 키운다 */
.column-content.column-ui-bold .column-blockquote {
  padding: 20px 24px;
  border-left: 10px solid var(--column-bold-ink);
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.6;
}

.column-content.column-ui-bold .column-blockquote--warning {
  border-left-color: var(--column-danger);
  background: var(--column-danger-soft);
}

.column-content.column-ui-bold .column-blockquote--expert {
  color: var(--column-bold-muted);
  font-size: 1em;
  font-weight: 600;
}

/* ==========================================================================
   3. 타이포 — 한 단계씩 키운다
   ========================================================================== */

.column-content.column-ui-bold .column-h2 {
  padding: 12px 18px;
  background: var(--column-bold-ink);
  color: #ffffff;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.column-content.column-ui-bold .column-h3 {
  color: var(--column-bold-ink-strong);
  font-size: 24px;
  letter-spacing: var(--column-bold-tracking);
}

.column-content.column-ui-bold .column-h4 {
  color: var(--column-bold-ink-strong);
  font-size: 19px;
  letter-spacing: var(--column-bold-tracking);
}

.column-content.column-ui-bold .column-card__title,
.column-content.column-ui-bold .column-info-box__title,
.column-content.column-ui-bold .column-number-card__title,
.column-content.column-ui-bold .column-step__title,
.column-content.column-ui-bold .column-details__summary {
  color: var(--column-bold-ink-strong);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: var(--column-bold-tracking);
}

/* ==========================================================================
   4. TOC
   ========================================================================== */

.column-content.column-ui-bold .column-toc__title {
  color: var(--column-bold-ink-strong);
  font-size: 17px;
  letter-spacing: var(--column-bold-tracking);
}

.column-content.column-ui-bold .column-toc__link {
  padding: 8px 10px;
  border-radius: 0;
  color: var(--column-text);
  font-size: 16px;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.column-content.column-ui-bold .column-toc__link:hover,
.column-content.column-ui-bold .column-toc__link:focus-visible {
  background: var(--column-bold-ink);
  color: #ffffff;
}

.column-content.column-ui-bold .column-toc__link--sub {
  color: var(--column-bold-muted);
  font-size: 15px;
}

/* ==========================================================================
   5. Number Card / Step Index — 크게 찍는 번호
   ========================================================================== */

.column-content.column-ui-bold .column-number-card__index {
  min-width: 54px;
  min-height: 54px;
  border-radius: 0;
  background: var(--column-bold-ink);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.column-content.column-ui-bold .column-step__index {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--column-bold-ink);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
}

/* ==========================================================================
   6. Compare
   ========================================================================== */

.column-content.column-ui-bold .column-compare__item {
  padding: 0;
}

.column-content.column-ui-bold .column-compare__title {
  padding: 16px 22px;
  background: var(--column-bold-ink);
  color: #ffffff;
  font-size: 18px;
  letter-spacing: var(--column-bold-tracking);
}

.column-content.column-ui-bold .column-compare__body {
  padding: 20px 22px 22px;
}

/* ==========================================================================
   7. Table
   ========================================================================== */

.column-content.column-ui-bold .column-table-wrap {
  padding: 0;
}

.column-content.column-ui-bold .column-table th,
.column-content.column-ui-bold .column-table td {
  padding: 16px 22px;
  border: 0;
  border-bottom: 2px solid var(--column-bold-line);
}

.column-content.column-ui-bold .column-table thead th {
  padding-top: 17px;
  padding-bottom: 17px;
  border-bottom: 0;
  background: var(--column-bold-ink);
  color: #ffffff;
  font-size: 16px;
  letter-spacing: var(--column-bold-tracking);
}

.column-content.column-ui-bold .column-table tbody th {
  color: var(--column-bold-ink-strong);
  font-size: 16px;
}

.column-content.column-ui-bold .column-table tr:last-child th,
.column-content.column-ui-bold .column-table tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   8. Checklist / List — 굵은 사각 마커
   ========================================================================== */

.column-content.column-ui-bold .column-checklist__item {
  font-weight: 600;
}

.column-content.column-ui-bold .column-checklist__item::before {
  content: "■";
  color: var(--column-bold-ink);
}

.column-content.column-ui-bold .column-list {
  padding: 12px 24px;
}

.column-content.column-ui-bold .column-list > li::before {
  --column-list-marker-size: 12px;
  border-radius: 0;
  background: var(--column-bold-ink);
}

.column-content.column-ui-bold .column-list--ordered > li::before,
.column-content.column-ui-bold ol.column-list > li::before {
  --column-list-marker-size: 26px;
  border-radius: 0;
  background: var(--column-bold-ink);
  color: #ffffff;
  font-size: 13px;
}

.column-content.column-ui-bold .column-list .column-list {
  padding: 0;
  background: transparent;
}

/* ==========================================================================
   9. FAQ — 질문은 색 면으로 덮는다
   ========================================================================== */

.column-content.column-ui-bold .column-faq__item {
  padding: 0;
  margin-bottom: 16px;
}

.column-content.column-ui-bold .column-faq__question {
  padding: 18px 24px;
  background: var(--column-bold-ink);
  color: #ffffff;
  font-size: 19px;
  letter-spacing: var(--column-bold-tracking);
}

.column-content.column-ui-bold .column-faq__answer {
  padding: 18px 24px 20px;
}

/* ==========================================================================
   10. Button — 크게 찍고 그림자로 눌러 둔다
   ========================================================================== */

.column-content.column-ui-bold .column-button {
  padding: 18px 44px;
  border: 0;
  border-radius: 0;
  background: var(--column-bold-ink);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 8px 8px 0 var(--column-bold-contrast);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.column-content.column-ui-bold .column-button:hover,
.column-content.column-ui-bold .column-button:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--column-bold-contrast);
}

/* 검정 면 위에서는 그림자가 묻히므로 흰색으로 뒤집는다 */
.column-content.column-ui-bold .column-cta .column-button {
  box-shadow: 8px 8px 0 #ffffff;
}

.column-content.column-ui-bold .column-cta .column-button:hover,
.column-content.column-ui-bold .column-cta .column-button:focus-visible {
  box-shadow: 10px 10px 0 #ffffff;
}

/* ==========================================================================
   11. Divider
   ========================================================================== */

.column-content.column-ui-bold .column-divider {
  border: 0;
  height: 10px;
  background: var(--column-bold-ink);
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .column-content.column-ui-bold .column-summary,
  .column-content.column-ui-bold .column-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .column-content.column-ui-bold .column-h2 {
    font-size: 26px;
  }

  .column-content.column-ui-bold .column-h3 {
    font-size: 20px;
  }
}