@charset "UTF-8";

/**
 * Medical Column Design System
 * Project: 압구정더모의원
 * Project ID: apgujeong-dermo
 * Theme: apgujeong-dermo
 * Formats: default, minimal, soft-card
 *
 * Generated file. Do not edit directly.
 */

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

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

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

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

  --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,
    -apple-system,
    BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    Arial,
    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: var(--column-font-h2);
  --column-font-h3-mobile: var(--column-font-h3);

  --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 img {
  max-width: 100%;
}

.column-content mark {
  padding: 0 3px;
  background: var(--column-primary-soft);
  color: inherit;
}

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

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

/* ==========================================================================
   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;
}

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

.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__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;
  min-width: 42px;
  min-height: 42px;
  font-size: 14px;
  font-weight: 800;
}

.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;
}

.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;
  counter-increment: column-list;
}

.column-list--ordered > li::before,
ol.column-list > li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  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 {
  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 > :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;
  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. 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: apgujeong-dermo
   ========================================================================== */

/**
 * 압구정더모의원 - Medical Column Theme
 *
 * column-common.css 뒤에 로드하세요.
 * 이 파일에는 프로젝트별 CSS Variable override만 둡니다.
 */

.column-content {
  --column-primary: #00564a;
  --column-primary-strong: #00564a;
  --column-primary-soft: #f0f7f5;
  --column-border: #e0ede9;
  --column-text: #333333;
  --column-content-width: 800px;
}

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

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

/* Summary */

.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-ui-default .column-summary__title {
  color: var(--column-primary);
}

/* Blockquote */

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

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

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

/* TOC */

.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-ui-default .column-toc__title {
  color: var(--column-primary);
}

.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-ui-default .column-toc__link:hover,
.column-ui-default .column-toc__link:focus-visible {
  background: var(--column-primary-soft);
  color: var(--column-primary-strong);
}

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

/* Heading */

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

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

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

/* Card */

.column-ui-default .column-card,
.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-ui-default .column-card__title,
.column-ui-default .column-info-box__title {
  color: var(--column-primary-strong);
}

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

/* Number Card */

.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-ui-default .column-number-card__index {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--column-primary);
  color: #ffffff;
}

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

/* Step */

.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-ui-default .column-step__index {
  border-radius: 50%;
  background: var(--column-primary);
  color: #ffffff;
}

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

/* Compare */

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

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

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

/* Table */

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

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

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

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

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

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

/* Checklist */

.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-ui-default .column-checklist__item::before {
  content: "✓";
  color: var(--column-primary);
}

/* List */

.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-ui-default .column-list > li + li {
  border-top: 1px solid var(--column-border);
}

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

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

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

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

/* Details */

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

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

/* FAQ */

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

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

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

/* CTA */

.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-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-ui-default .column-button:hover,
.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-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-ui-default .column-divider {
  border-top: 1px solid var(--column-border);
}

/* Responsive */

@media (max-width: 640px) {
  .column-ui-default .column-summary,
  .column-ui-default .column-card,
  .column-ui-default .column-info-box,
  .column-ui-default .column-number-card,
  .column-ui-default .column-step,
  .column-ui-default .column-list,
  .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">
 */

/* Summary */

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

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

/* Blockquote */

.column-ui-minimal .column-blockquote {
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--column-primary);
}

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

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

/* TOC */

.column-ui-minimal .column-toc {
  padding: 20px 0;
  border-top: 1px solid var(--column-border);
  border-bottom: 1px solid var(--column-border);
}

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

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

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

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

/* Heading */

.column-ui-minimal .column-h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--column-border-strong);
}

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

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

/* Card */

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

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

/* Number Card */

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

.column-ui-minimal .column-number-card:first-child {
  border-top: 1px solid var(--column-border);
}

.column-ui-minimal .column-number-card__index {
  color: var(--column-primary);
}

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

/* Step */

.column-ui-minimal .column-step {
  padding: 18px 0;
  border-bottom: 1px solid var(--column-border);
}

.column-ui-minimal .column-step:first-child {
  border-top: 1px solid var(--column-border);
}

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

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

/* Compare */

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

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

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

/* Table */

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

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

.column-ui-minimal .column-table thead th {
  color: var(--column-primary-strong);
}

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

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

/* Checklist */

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

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

/* List */

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

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

.column-ui-minimal .column-list--ordered > li::before,
.column-ui-minimal ol.column-list > li::before {
  background: transparent;
  border: 1.5px solid var(--column-primary);
  color: var(--column-primary);
}

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

/* Details */

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

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

/* FAQ */

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

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

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

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

/* CTA */

.column-ui-minimal .column-cta {
  padding: 28px 0 32px;
  border-top: 2px solid var(--column-primary);
  border-bottom: 1px solid var(--column-border);
}

.column-ui-minimal .column-button {
  padding: 13px 28px;
  border: 2px solid var(--column-primary);
  background-color: transparent;
  background-image: linear-gradient(
    105deg,
    transparent 32%,
    color-mix(in srgb, var(--column-primary) 14%, transparent) 50%,
    transparent 68%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  color: var(--column-primary);
  animation: column-button-sheen 3.6s ease-in-out infinite;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.column-ui-minimal .column-button:hover,
.column-ui-minimal .column-button:focus-visible {
  background-color: var(--column-primary);
  color: #ffffff;
  animation-play-state: paused;
}

/* Divider */

.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">
 */

/* Summary */

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

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

/* Blockquote */

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

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

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

/* TOC */

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

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

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

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

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

/* Heading */

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

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

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

/* Card */

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

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

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

/* Number Card */

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

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

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

/* Step */

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

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

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

/* Compare */

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

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

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

/* Table */

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

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

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

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

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

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

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

/* Checklist */

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

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

/* List */

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

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

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

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

/* Details */

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

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

/* FAQ */

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

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

.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-ui-soft-card .column-cta {
  padding: 32px 24px;
  border-radius: calc(var(--column-radius-lg) + 2px);
  background: var(--column-primary-soft);
}

.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-ui-soft-card .column-button:hover,
.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-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-ui-soft-card .column-divider {
  border-top: 1px solid var(--column-border);
}

/* Responsive */

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