/* 상세페이지 공용 표준 어휘 — /consulting을 기준으로 확립, 이후 모든 제품/서비스
   상세페이지가 공유한다 (여정 4페이지가 journey.css를 공유하는 것과 같은 모델).
   여기에는 페이지 무관 패턴만: 다크 히어로 무대, 다크 챕터, 이미지 슬롯, CTA 스트립.
   페이지 고유 패턴(인용 카드, 가격 타일 등)은 각 pages/<slug>.css에 남긴다.
   모션 규약: 히어로 진입 인트로는 **CSS가 소유한다**(아래 "히어로 진입 인트로" 블록).
   그 아래 스크롤 리빌은 마크업에 data-reveal(단일 fade-up) / data-reveal-group(자식 스태거)만
   붙이면 main.js가 홈과 같은 문법으로 연출한다 — 단 main.js는 **첫 페인트에 이미 화면에
   보이는 요소는 건드리지 않는다**(그 요소는 애니메이션 없이 완성 상태). JS 리빌 경로의 CSS는
   초기 상태를 숨기지 않는다(JS 부재 시에도 완성된 페이지). */

/* ---------- 히어로 무대 — DS 딥 블랙 밴드(#222) + 민트 글로우 ---------- */
.l-section.detail-hero {
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  padding: var(--space-20) 0;
}

.detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-12);
  align-items: center;
}

@media (max-width: 900px) {
  .detail-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.detail-hero__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-glow);
  margin: 0 0 var(--space-4);
}

.detail-hero__title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.22;
  word-break: keep-all;
  text-wrap: pretty;
  margin: 0 0 var(--space-6);
  background: var(--grad-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.detail-hero__lede {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: rgba(248, 250, 252, 0.72);
  max-width: 50ch;
  margin: 0;
  word-break: keep-all;
  text-wrap: balance; /* 2~3줄 리드 — 마지막 줄 고아 방지 */
}

.detail-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
}

.detail-hero__alt {
  display: inline-flex;
  align-items: center;
  padding-block: 11px; /* 44px 터치 영역 — 시각 위치는 음수 마진으로 보존 */
  margin-block: -11px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-glow);
  text-decoration: none;
}

.detail-hero__alt:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* 핵심 조건 3스탯 — 헤어라인 위에 글로우 숫자 */
.detail-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-12);
  margin: var(--space-12) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(248, 250, 252, 0.14);
}

.detail-hero__stats div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.detail-hero__stats dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(248, 250, 252, 0.55);
}

.detail-hero__stats dd {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-glow);
  font-variant-numeric: tabular-nums;
}

/* 문장형 스탯 변형 — 수치가 아닌 사실 문구(위임 범위·대행 범위 등)는 한 단계 작게 */
.detail-hero__stats--facts dd {
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

/* 스탯 보조 주석 — 수치의 적용 기준 한 줄 */
.detail-hero__stat-note {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(248, 250, 252, 0.55);
  word-break: keep-all;
}

/* ---------- 히어로 진입 인트로 — CSS가 초기 상태를 소유한다 (2026-09-07) ----------
   카피 → CTA → 스탯 → 미디어 순 시퀀스. 예전에는 main.js 가 gsap.from() 으로 돌렸는데,
   gsap.from() 은 **타임라인이 만들어지는 순간** 대상에 opacity: 0 을 쓴다. scripts.html 이
   GSAP·ScrollTrigger·Lenis·main.js 를 전부 defer 로 실어 그 시점이 DOMContentLoaded 직후라,
   브라우저가 이미 칠해 둔 완성 히어로가 통째로 사라졌다가 1초 남짓에 걸쳐 되돌아왔다
   (2026-09-07 실측: /consulting 54ms 완성 페인트 → 237ms opacity 0, /saas 28 → 85,
   /news 54 → 145 — 모바일도 첫 화면 8개 전부 동일). 시네마틱 홈이 2026-09-06 에 같은
   이유로 인트로를 CSS 로 옮겼고(cinematic.css), 이 블록은 그 해법을 상세 계열에 옮긴 것이다.

   CSS 가 초기 상태를 갖는 것은 파일 머리의 "초기 상태를 숨기지 않는다" 규약과 어긋나 보이지만
   성격이 다르다 — 그 규약은 **JS 가 오지 않으면 콘텐츠가 영영 숨는 것**을 막는 장치이고,
   CSS 애니메이션은 CDN·JS 와 무관하게 항상 완주한다(fill-mode both). 오히려 GSAP 로드
   실패 경로에서도 같은 연출이 나온다.

   바꿀 때: 타이밍·이징은 여기서만 고친다. main.js 에 히어로 등장 애니메이션을 다시 넣지 말 것 —
   넣는 순간 같은 플래시가 돌아온다. */
@keyframes detail-rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--detail-rise, 24px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.detail-hero__kicker,
.detail-hero .journey-kicker,
.detail-hero__title,
.detail-hero .journey-title,
.detail-hero__lede,
.detail-hero .journey-lede,
.detail-hero__actions,
.detail-hero__stats > div,
.detail-hero__media {
  animation: detail-rise-in var(--detail-in-dur, 0.6s) cubic-bezier(0.215, 0.61, 0.355, 1)
    var(--detail-in-delay, 0s) both;
}

/* 지연은 옮기기 전 GSAP stagger(0.08s)를 그대로 옮겼다 — 카피 4단 → 스탯 → 미디어. */
.detail-hero__kicker,
.detail-hero .journey-kicker {
  --detail-in-delay: 0s;
}

.detail-hero__title,
.detail-hero .journey-title {
  --detail-in-delay: 0.08s;
}

.detail-hero__lede,
.detail-hero .journey-lede {
  --detail-in-delay: 0.16s;
}

.detail-hero__actions {
  --detail-in-delay: 0.24s;
  --detail-rise: 18px;
}

.detail-hero__stats > div:nth-child(1) { --detail-in-delay: 0.32s; }
.detail-hero__stats > div:nth-child(2) { --detail-in-delay: 0.4s; }
.detail-hero__stats > div:nth-child(3) { --detail-in-delay: 0.48s; }
.detail-hero__stats > div:nth-child(n + 4) { --detail-in-delay: 0.56s; }

/* 미디어 슬롯은 스탯 개수가 페이지마다 다르므로(0·3·4) 인덱스가 아닌 고정 지연을 쓴다. */
.detail-hero__media {
  --detail-in-delay: 0.45s;
  --detail-in-dur: 0.7s;
  --detail-rise: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .detail-hero__kicker,
  .detail-hero .journey-kicker,
  .detail-hero__title,
  .detail-hero .journey-title,
  .detail-hero__lede,
  .detail-hero .journey-lede,
  .detail-hero__actions,
  .detail-hero__stats > div,
  .detail-hero__media {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- 다크 챕터 — 페이지에서 가장 강한 문장이 받는 무대 ---------- */
/* .l-section:nth-of-type(even)의 surface 교차보다 우선하도록 동일 특이도+후행 로드 */
.l-section.detail-dark {
  background: var(--color-ink);
  color: var(--color-ink-contrast);
}

/* ---------- 이미지 슬롯 — 실사진이 들어올 자리 + 촬영 디스크립션 ----------
   실이미지가 준비되면 <img>만 안에 넣으면 된다: :has(img)가 태그·설명을 숨기고
   커버 크롭으로 채운다. 비율은 인라인 --slot-ratio 커스텀 프로퍼티로 지정. */
.detail-imgslot {
  position: relative;
  margin: 0;
  aspect-ratio: var(--slot-ratio, 16 / 9);
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--color-border);
  background: linear-gradient(135deg, var(--color-surface), var(--color-primary-soft));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  overflow: hidden;
}

.detail-imgslot__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.detail-imgslot__desc {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 34ch;
  word-break: keep-all;
  text-wrap: pretty;
}

/* 그리드/레일 뒤에 이어지는 슬롯의 기본 간격 — 페이지 CSS 없이도 리듬 유지 */
.detail-cards + .detail-imgslot,
.detail-quotes + .detail-imgslot,
.detail-rail + .detail-imgslot {
  margin-top: var(--space-8);
}

.detail-imgslot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.detail-imgslot:has(img) {
  border-color: transparent;
  border-style: solid;
  background: var(--color-surface);
}

.detail-imgslot:has(img) .detail-imgslot__tag,
.detail-imgslot:has(img) .detail-imgslot__desc {
  display: none;
}

/* UI·지면 캡처용 — 잘라내지 않고 안에 맞춘다 */
.detail-imgslot--contain img {
  object-fit: contain;
}

.detail-imgslot--contain:has(img) {
  background: #ffffff;
}

.detail-imgslot--dark.detail-imgslot--contain:has(img) {
  background: rgba(248, 250, 252, 0.06);
}

/* split 안의 숫자 블록은 헤어라인을 갖지 않는다 — 전폭 밴드(/cx #results, /kdermpass #market)에서는
   위아래 선이 앞뒤 문단과 블록을 갈라 주지만, 좌측 .detail-rail 과 나란히 놓이면 두 블록의 아랫선이
   16px 어긋난 채 나란히 보여(2026-09-08 /pg #tax 육안 확인) 정렬 실수로 읽힌다. 선은 레일 쪽만 갖는다. */
.detail-split .detail-bignum {
  border-block: 0;
  padding-block: 0;
}

/* split 우측 열에 블록을 쌓을 때 — 사진 2장(/dermanodelab #programs)이든
   숫자 + 주석(/pg #tax)이든. :has()가 split의 정렬을 center → start 로 바꿔
   좌우 두 열의 윗선(헤어라인)이 맞는다. */
.detail-split__stack {
  display: grid;
  gap: var(--space-4);
}

.detail-split:has(.detail-split__stack) {
  align-items: start;
}

/* 다크 무대 위 변형 */
.detail-imgslot--dark {
  border-color: rgba(248, 250, 252, 0.22);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.05), rgba(157, 248, 195, 0.08));
}

.detail-imgslot--dark .detail-imgslot__tag {
  background: rgba(157, 248, 195, 0.14);
  color: var(--color-glow);
}

.detail-imgslot--dark .detail-imgslot__desc {
  color: rgba(248, 250, 252, 0.6);
}

/* ---------- 인라인 CTA 스트립 — 긴 페이지 중간의 전환 지점 ---------- */
.detail-cta {
  margin-top: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--grad-deep);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.detail-cta p {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: keep-all;
  text-wrap: pretty;
}

.detail-cta__btn {
  background: #ffffff;
  color: var(--color-primary-deep);
  box-shadow: var(--shadow-cta);
}

.detail-cta__btn:hover {
  background: var(--color-mint);
  color: var(--color-primary-deep);
}

/* ---------- 섹션 헤더 트리오 — 모든 상세페이지 공통 ---------- */
.detail-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin: 0 0 var(--space-3);
}

.detail-h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  word-break: keep-all;
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.detail-sub {
  color: var(--color-text-muted);
  max-width: 54ch;
  margin: 0 0 var(--space-8);
  word-break: keep-all;
  text-wrap: balance;
}

/* ---------- 인용 카드 그리드 — 고객(원장)의 목소리로 문제를 제기 ---------- */
.detail-quotes {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* 인용 4개일 때 3+1 대신 2×2 */
@media (min-width: 640px) {
  .detail-quotes--2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.detail-quotes li {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  overflow: hidden;
}

.detail-quotes li::before {
  content: "\201C";
  position: absolute;
  top: -0.28em;
  right: var(--space-3);
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-soft);
  pointer-events: none;
}

.detail-quotes blockquote {
  position: relative;
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.detail-quotes p {
  position: relative;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* ---------- 카드 그리드 — 제공 항목/약속 (--numbered로 순번 표시) ---------- */
.detail-cards {
  list-style: none;
  counter-reset: detail-card;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.detail-cards li {
  counter-increment: detail-card;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.detail-cards--numbered li::before {
  content: counter(detail-card, decimal-leading-zero);
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-4);
}

.detail-cards h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  word-break: keep-all;
}

.detail-cards p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  word-break: keep-all;
  text-wrap: pretty;
}

/* 카드 구체 항목 — 설명문 아래 헤어라인으로 구분한 항목 열거 */
.detail-cards .detail-cards__items {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text);
  word-break: keep-all;
}

/* 출처 표기 — 통계 블록 아래 한 줄 */
.detail-source {
  margin: var(--space-4) 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.detail-dark .detail-source {
  color: rgba(248, 250, 252, 0.55);
}

/* FAQ 블록 — /consulting 아코디언 형식을 상세페이지 공용으로 */
.detail-faq {
  max-width: 52rem;
}

.detail-faq--inline {
  margin: var(--space-16) 0 var(--space-12);
}

.detail-faq .detail-eyebrow {
  margin-bottom: var(--space-2);
}

.detail-faq .detail-h3 {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* ---------- 콜아웃 — 섹션을 매듭짓는 한 줄 ---------- */
.detail-callout {
  margin: var(--space-8) 0 0;
  padding: var(--space-6);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  line-height: 1.7;
  word-break: keep-all;
  text-wrap: pretty;
}

.detail-callout strong {
  color: var(--color-text);
}

/* ---------- 레일 — 헤어라인으로 나눈 균등 칸 (팀/단계/절차) ---------- */
.detail-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  border-block: 1px solid var(--color-border);
}

.detail-rail li {
  padding: var(--space-6) var(--space-4);
}

.detail-rail li + li {
  border-left: 1px solid var(--color-border);
}

/* 구분선 규칙 — "행의 첫 칸은 왼쪽 선 없음 + 둘째 행부터 윗선". 열 수를 아는 폭에서만 쓴다.
   ~2026-09-08 에는 이 자리가 `@media (max-width: 900px) { li + li { border-left: 0; border-top: 1px } }`
   한 덩어리였는데, 열 수는 그대로 둔 채 세로 선만 지워서 auto-fit 이 2열을 유지하는 폭(390~900px)에서
   열 사이 구분선이 사라지고 둘째 칸에만 윗선이 남아 어긋났다 — 변형 없는 레일 8개 전부의 증상이었다.
   1열로 접으면 증상은 사라지지만 태블릿에서 셀 채움률이 88~99% → 21~48% 로 떨어지고 레일 높이가
   최대 3.4배가 된다(/saas #process 155 → 520px 실측). 그래서 열은 폭에 맞추고 선 쪽을 고친다.
   개수 고정 변형 --5/--6 은 뒤쪽 미디어 블록이 자기 열 수를 따로 정하므로 :not() 으로 제외한다
   (그쪽의 구분선 소실은 이 변경 이전부터 있던 별건). */
@media (max-width: 900px) and (min-width: 601px) {
  .detail-rail:not(.detail-rail--5):not(.detail-rail--6) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-rail:not(.detail-rail--5):not(.detail-rail--6) li:nth-child(odd) {
    border-left: 0;
  }

  .detail-rail:not(.detail-rail--5):not(.detail-rail--6) li:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 600px) {
  .detail-rail:not(.detail-rail--5):not(.detail-rail--6) {
    grid-template-columns: 1fr;
  }

  .detail-rail:not(.detail-rail--5):not(.detail-rail--6) li + li {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
}

.detail-rail__tag {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin: 0 0 var(--space-3);
}

.detail-rail h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  word-break: keep-all;
}

.detail-rail p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* ---------- 다크 챕터 위의 공통 패턴 재조색 ---------- */
.detail-dark .detail-eyebrow,
.detail-dark .detail-rail__tag {
  color: var(--color-glow);
}

.detail-dark .detail-sub,
.detail-dark .detail-cards p,
.detail-dark .detail-quotes p,
.detail-dark .detail-rail p {
  color: rgba(248, 250, 252, 0.65);
}

.detail-dark .detail-cards li,
.detail-dark .detail-quotes li {
  background: rgba(248, 250, 252, 0.05);
  border-color: rgba(248, 250, 252, 0.12);
}

.detail-dark .detail-quotes li::before {
  color: rgba(157, 248, 195, 0.18);
}

.detail-dark .detail-rail,
.detail-dark .detail-rail li + li {
  border-color: rgba(248, 250, 252, 0.14);
}

.detail-dark .detail-callout {
  background: rgba(248, 250, 252, 0.05);
  border-left-color: var(--color-glow);
}

.detail-dark .detail-callout strong {
  color: var(--color-glow);
}

/* ---------- 가격 타일 — 그레이드/조건 (--featured로 추천 강조) ---------- */
.detail-price {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.detail-price__tile {
  position: relative;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.detail-price__tile--featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.detail-price__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  /* --color-primary 위 흰 글자는 2.2:1 로 AA 미달이다(10px 굵은 라벨이라 large-text 완화도 없다).
     특이도 사고로 14px 뮤트로 렌더되던 동안에는 2.16:1 이라 어차피 미달이었고, 의도한 모습으로
     되돌리면서 배경을 한 단계 낮춰 5.29:1 로 맞춘다(2026-09-08). */
  background: var(--color-primary-deep);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-price__tile dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-4);
}

.detail-price__tile dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.detail-price__tile b {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.detail-price__tile b small {
  font-size: 0.45em;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0;
  margin-left: var(--space-1);
}

/* dd 안의 설명 문구에만 건다 — 무스코프 `span` 이던 동안(~2026-09-08) 뒤에 오는 이 규칙이
   특이도 0-1-1 로 .detail-price__badge(0-1-0)를 이겨서, 배지가 10px 흰색 대신 14px 뮤트로 렌더돼
   --color-primary 위에서 2.16:1 이 됐다(/pg #pricing · /marketing #plans). */
.detail-price__tile dd span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---------- 대형 수치 스탯 — 시장/성과 지표 (라이트 기본, 다크 재조색) ---------- */
.detail-bignum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding-block: var(--space-6);
  border-block: 1px solid var(--color-border);
}

.detail-bignum div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.detail-bignum dd {
  margin: 0;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-primary-deep);
  font-variant-numeric: tabular-nums;
}

.detail-bignum dd small {
  font-size: 0.4em;
  font-weight: 700;
  margin-left: var(--space-1);
}

.detail-bignum dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  word-break: keep-all;
}

.detail-dark .detail-bignum {
  border-color: rgba(248, 250, 252, 0.14);
}

.detail-dark .detail-bignum dd {
  color: var(--color-glow);
}

.detail-dark .detail-bignum dt {
  color: rgba(248, 250, 252, 0.65);
}

/* 본문 2단 분할 — 좌 콘텐츠(레일·리스트) / 우 이미지 슬롯 */
.detail-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8);
  align-items: center;
}

@media (max-width: 900px) {
  .detail-split {
    grid-template-columns: 1fr;
  }
}

/* 크로스링크 행 — 다크 챕터의 여정/관련 페이지 링크 */
.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
}

.detail-links a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 히어로 보조 액션 — 아직 열리지 않은 공식 사이트의 준비 중 표기 (링크 아님) */
.detail-hero__alt--soon {
  opacity: 0.55;
  cursor: default;
  text-decoration: none;
}

/* 브랜드 소개 칩 — 별도 브랜딩 사업의 공식 로고 + 한 줄 + 도메인 링크.
   --brand-tint: 각 페이지가 인라인 스타일로 실측 브랜드 컬러 토큰을 스코프(틴트 전용). */
.detail-brand {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(120deg, var(--color-bg), color-mix(in srgb, var(--brand-tint, var(--color-primary)) 10%, var(--color-bg)));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.detail-brand img {
  flex-shrink: 0;
}

.detail-brand p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  word-break: keep-all;
  text-wrap: pretty;
}

.detail-brand a {
  font-weight: 700;
  color: var(--color-primary-deep);
  text-decoration: none;
  white-space: nowrap;
}

.detail-brand a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* 히어로 킥커의 브랜드 마크 — 다크 무대 위. 컬러 로고는 .is-white로 화이트 처리 */
.detail-hero__kicker img {
  display: inline-block;
  height: 18px;
  vertical-align: -4px;
  margin-right: var(--space-2);
}

.detail-hero__kicker img.is-white {
  filter: brightness(0) invert(1);
}

/* 좁은 폭 — 킥커는 한 줄이 원칙. 390 폭(컨테이너 342px)에서 마크 + 36자(KDerm Pass ·
   Global Patient Gateway)가 0.75rem/0.22em 으로는 넘쳐 마지막 단어만 마크 아래로 고립됐다
   (QA B-P2-2). 자간·크기를 소폭 줄여 한 줄에 맞추고, 그래도 넘치는 더 긴 킥커는
   (1) 두 줄 균형(text-wrap: balance)으로 고아 단어를 막고 (2) 마크가 있으면 flex 로
   텍스트 블록을 마크 오른쪽에 세워 둘째 줄이 마크 아래가 아니라 첫 줄 아래에 놓이게 한다.
   짧은 킥커(STEP 01 · OPENING CONSULTING 등)는 원래 한 줄이라 크기 축소 외 변화 없음. */
@media (max-width: 600px) {
  .detail-hero__kicker {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-wrap: balance;
  }

  .detail-hero__kicker:has(img) {
    display: flex;
    align-items: center;
  }
}

/* ---------- 태블릿·모바일 — 히어로 미디어는 가로 비율로 (4:5 세로 컷이 화면 한 장을 차지하지 않도록) ---------- */
@media (max-width: 900px) {
  .detail-hero__media {
    aspect-ratio: 16 / 10;
  }

  .detail-hero__media img {
    object-position: 50% 30%; /* 인물 컷 — 얼굴이 위쪽에 오도록 */
  }
}

/* 상태 대비 레일 — "지금 이렇다 / 바꾸면 이렇게 된다" 두 칸. 개수 변형(--5/--6)과 달리
   레일의 '역할'을 바꾸는 변형이다: 두 칸이 나열이 아니라 전후 관계이므로 문장을 키워 이 칸들이
   섹션의 시각 주인공이 되게 하고, 승패는 크기가 아니라 색으로 말한다(.is-on 이 지금 유효한 쪽).
   글로우는 다크 무대에서만 대비가 성립하므로 .detail-dark 스코프에 둔다. */
/* 이 변형은 리드 문장 없이 h2 바로 뒤에 오는 것을 전제한다 — .detail-h2 의 아래 여백(16px)만으로는
   헤더와 본문이 붙어 보이므로, .detail-sub 가 만들던 간격을 변형이 직접 갖는다. */
.detail-rail--states {
  margin-top: var(--space-6);
}

.detail-rail--states h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-3);
}

.detail-dark .detail-rail--states .is-on h3 {
  color: var(--color-glow);
}

/* ---------- 고정 개수 레일 — auto-fit의 N+1 고아 행 방지 ---------- */
.detail-rail--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.detail-rail--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 변형도 기본 레일과 같은 구분선 규칙을 따른다 — "행의 첫 칸은 왼쪽 선 없음 + 둘째 행부터 윗선".
   ~2026-09-08 에는 이 블록이 열 수만 정하고 border-top: 0 으로 행 구분선을 지웠는데, 그때는 기본
   블록의 border-left: 0 이 함께 걸려서 /mso #team 과 /kdermpass 의 레일에 **내부 구분선이 하나도
   없었다**(390·768 실측 0개). "헤어라인으로 나눈 균등 칸"이라는 설계 의도가 사라진 상태였다.
   --5 는 이 대역에서 auto-fit(minmax 130px) 이라 폭에 따라 4열·5열을 오갔는데, 열 수를 모르면
   행의 첫 칸을 지목할 수 없어 5열로 고정했다(601px 에서 셀 110px — 항목이 짧은 언어·단계 목록 전용). */
@media (max-width: 900px) {
  .detail-rail--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .detail-rail--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-rail--5 li + li,
  .detail-rail--6 li + li {
    border-top: 0;
  }

  .detail-rail--6 li:nth-child(3n + 1) {
    border-left: 0;
  }

  .detail-rail--6 li:nth-child(n + 4) {
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 600px) {
  .detail-rail--5 {
    grid-template-columns: 1fr;
  }

  .detail-rail--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-rail--5 li + li {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  /* 위 900px 블록의 3열용 nth-child(3n + 1)이 여기서도 살아 있어 4번째 칸의 왼쪽 선을 지운다.
     2열에서 4번째는 행의 첫 칸이 아니므로 되살리는데, 그 규칙(0-2-0)을 이기려면 같은 형태의
     nth-child 여야 한다 — `li + li`(0-1-1)로는 특이도에 밀린다. */
  .detail-rail--6 li:nth-child(even) {
    border-left: 1px solid var(--color-border);
  }

  .detail-rail--6 li:nth-child(odd) {
    border-left: 0;
  }

  .detail-rail--6 li:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }
}

/* ---------- 모바일 — 데스크톱용 강제 개행 해제 (히어로 H1 제외) ---------- */
@media (max-width: 599px) {
  .detail-h2 br,
  .detail-callout br,
  .detail-sub br {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   .detail-list — 헤어라인 목록 (보도·공시·자료실·미디어 자료 공용)
   Notion 스냅샷에서 렌더되는 목록의 공용 어휘 (scripts/render-content.mjs).
   행 = meta(날짜·매체/구분) | body(제목 · 요약 · 액션). 700px 이하 1열.
   --------------------------------------------------------------------------- */
.detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.detail-list__item {
  display: grid;
  grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr);
  gap: var(--space-2) var(--space-8);
  align-items: baseline;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 700px) {
  .detail-list__item {
    grid-template-columns: 1fr;
  }
}

.detail-list__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.detail-list__meta span {
  color: var(--color-primary-deep);
}

.detail-list__meta .detail-list__tag {
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.detail-list__body {
  min-width: 0;
}

.detail-list__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: keep-all;
  text-wrap: pretty;
}

.detail-list__title a {
  color: inherit;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.detail-list__title a:hover,
.detail-list__title a:focus-visible {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.detail-list__ext {
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.detail-list__summary {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.detail-list__action {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.detail-list__action a {
  color: var(--color-primary-deep);
  text-decoration: none;
}

.detail-list__action a:hover,
.detail-list__action a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* 고정 블록 뒤에 이어 붙는 가변 목록의 소제목 */
.detail-list__heading {
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--font-size-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* ---------- 상담 예약 — Cal 인라인 임베드 블록 (/saas /pg /dermanodelab 공용) ---------- */
/* 구조: .detail-eyebrow → .detail-h2 → .detail-booking__intro(리드 + 새 창 링크) → __embed → __note.
   새 창 링크를 임베드 '앞'에 두는 것이 규약 — 탭 순서 = DOM 순서라, 뒤에 두면 달력이 못 뜨거나
   키보드로 오는 사람이 날짜 버튼 29개를 지나서야 대안 경로에 닿는다. */
.detail-booking__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-6);
}

/* 리드는 섹션 공용 .detail-sub를 그대로 쓰되, 행 안에서는 자체 하단 여백을 지운다 */
.detail-booking__intro .detail-sub {
  margin: 0;
}

/* .detail-hero__alt와 같은 보조 액션 어휘 — 밝은 배경이라 딥 그린, 44px 터치 영역은 음수 마진으로 상쇄 */
.detail-booking__link {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding-block: 11px;
  margin-block: -11px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary-deep);
  text-decoration: none;
  white-space: nowrap;
}

.detail-booking__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* 마운트 — main.js initCalEmbed()가 채운다. Cal이 자체 흰 카드(테두리·라운드)를 그리므로
   우리 쪽 프레임은 두지 않는다(패널 인 패널 방지 + 섹션 배경 교차에 영향받지 않음).
   높이는 미리 잡아 두어 아래 고지가 임베드 로드 때 튀지 않게 한다 —
   실제 month_view 높이(데스크톱 ≈490px, 모바일 설명 숨김 ≈366px)보다 낮게.

   여기에 overflow/overscroll-behavior를 주지 않는다 (2026-09-07): 예전엔
   overflow: auto + overscroll-behavior: contain 이었는데, 그 조합이 달력 위에서
   페이지 스크롤을 완전히 죽였다. 크로스 오리진 iframe 안의 휠·터치는 부모 리스너에
   닿지 않고 네이티브 스크롤 체이닝으로 부모의 가장 가까운 스크롤 컨테이너에 넘어온다.
   Cal 인라인 임베드는 자기 안에서 스크롤하지 않고 자기 키를 늘리므로(월 보기 490 →
   폼 단계 979px, clientH == scrollH) 체인은 곧바로 이 마운트로 올라오는데,
   overflow: auto 가 '스크롤할 것 없는 스크롤 컨테이너'를 만들고 contain 이 거기서
   체인을 끊어 문서까지 닿지 못했다. 실측(1440×900, 폼 단계, 휠 800px 요청):
   auto+contain Δ0 / auto+auto Δ555 / visible+contain Δ555 — 둘 중 하나만 빠져도 살아난다.
   폼 단계에서 임베드가 화면 아래를 다 덮으면(모바일·태블릿은 좌우 여백 24px) 탈출구가
   없어 확인 버튼(접힘선 아래 456~581px)에 도달할 방법 자체가 사라졌다.
   ∴ 이 마운트는 스크롤 컨테이너가 되어서는 안 된다 — 자기 키를 늘리는 임베드에는
   가둘 스크롤이 없고, 가두는 규칙만 순손실이다. */
.detail-booking__embed {
  width: 100%;
  min-height: 480px;
}

/* 로딩·스크립트 차단·JS off — 비어 있을 때만 자리 표시용 프레임과 안내를 그린다.
   :empty는 공백 텍스트도 내용으로 치므로 마크업에서 태그를 붙여 비워 둔다. */
.detail-booking__embed:empty {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.detail-booking__embed:empty::before {
  content: '예약 달력을 불러오는 중입니다… 계속 보이지 않으면 위 링크로 열어 주세요.';
  display: grid;
  place-items: center;
  min-height: inherit;
  padding: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* 대체 UI — main.js renderCalFallback()이 임베드를 못 띄웠을 때 마운트 안에 넣는다.
   로딩 자리(min-height 480px)를 그대로 두면 안내 아래로 빈 공간이 길게 남으므로 높이를 푼다.
   :empty 프레임과 같은 톤이되(테두리·라운드) 안내가 아니라 액션을 담는 카드다. */
.detail-booking__embed.is-unavailable {
  min-height: 0;
}

.detail-booking__fallback {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  text-align: center;
}

.detail-booking__fallback-title {
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
}

.detail-booking__fallback-body {
  margin: 0;
  max-width: 46ch;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  word-break: keep-all;
  text-wrap: pretty;
}

.detail-booking__fallback-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

/* 자리 확인 팝업(/consulting)에서 고른 구역 — 달력을 다시 마운트해 예약 메모에 실었다는 확인 문구.
   재마운트가 실패해도 고른 구역은 이 줄에 남는다. 평소에는 hidden 속성으로 감춰 둔다. */
.detail-booking__seat {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary-deep);
  word-break: keep-all;
  text-wrap: pretty;
}

/* 상시 고지 — 폼의 fieldset.c-form__consent가 빠진 자리(보호법 §15는 처리방침으로 넘김) */
.detail-booking__note {
  margin: var(--space-3) 0 0;
  max-width: 62ch;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  word-break: keep-all;
  text-wrap: pretty;
}

@media (max-width: 600px) {
  .detail-booking__embed {
    min-height: 360px;
  }
}