/* PREDAQ site.css — 틸 시그니처 톤 (SR 레퍼런스 골격). 값은 tokens.css 변수만.
   디테일 규칙은 DESIGN.md A1~A8 */

/* ===== 베이스 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-ink-soft);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-ink);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: 1.12;
  word-break: keep-all;
  text-wrap: balance;
}
/* pretty — 마지막 줄에 한 단어만 남는 것을 막는다. 넓은 화면의 어색한 줄바꿈 완화 (DESIGN C7) */
p { margin: 0; word-break: keep-all; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--color-primary); color: #fff; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-3); }
[id] { scroll-margin-top: 110px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
}

/* 흐르는 그라디언트 텍스트 — 헤드라인 <em> (레퍼런스 animatetxtgradient) */
.grad-em em {
  font-style: normal;
  background: var(--grad-em-text) 0 0 / 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: move-bg 6s linear infinite;
}
@keyframes move-bg { to { background-position: 400% 0; } }

/* ===== 버튼 (A2 전 상태) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.7em;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .arrow { display: inline-block; transition: transform var(--dur-1) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--color-primary-strong); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--glow-primary); }
.btn-ghost { background: var(--color-bg); color: var(--color-ink); border: 1px solid var(--color-line); }
.btn-ghost:hover { border-color: var(--color-ink-soft); }
.btn-dark { background: var(--color-ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-lg { padding: 1.05em 2.2em; font-size: var(--fs-body); }

/* 글로우 보더 버튼 (레퍼런스 glowborder)
   ::before는 음수 z-index라 버튼 배경 '위'에 그려진다 = 실제 채움색.
   흰 글씨 대비를 위해 채움은 strong, 번짐 후광(::after)만 밝은 시그니처 틸. */
.glow-btn { position: relative; z-index: 1; }
.glow-btn::before, .glow-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--grad-brand-strong);
  background-size: 400%;
  animation: glowanim 10s linear infinite;
  transition: inset var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.glow-btn::after { background: var(--grad-brand); filter: blur(18px); opacity: 0; top: 8px; }
.glow-btn:hover::before { inset: -5px; }
.glow-btn:hover::after { opacity: 0.55; }
@keyframes glowanim { 0% { background-position: 0 0; } 50% { background-position: 300% 0; } 100% { background-position: 0 0; } }

.chip {
  display: inline-block;
  padding: 0.3em 0.85em;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--color-ink-soft);
  background: var(--color-bg);
}

/* ===== 헤더 — 플로팅 필 (레퍼런스 menubar) ===== */
.site-header {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: var(--maxw);
  z-index: 100;
  padding: 0.55rem var(--space-3);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-line);
  box-shadow: 0 20px 30px rgba(9, 9, 11, 0.05);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.site-header .container { display: flex; align-items: center; gap: var(--space-4); padding: 0; }
.site-header.scrolled { box-shadow: var(--shadow-2); }
.site-header.hidden { transform: translateX(-50%) translateY(-140%); }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.2em;
  color: var(--color-ink);
}
/* 마크는 구름 아래 획까지가 실루엣이라, 글자 높이보다 넉넉해야 같은 무게로 읽힌다 */
.wordmark-mark { display: block; height: 22px; width: auto; }
.main-nav { display: flex; gap: var(--space-3); margin-left: auto; }
.main-nav a {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: color var(--dur-1) var(--ease-out);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  background-size: 400%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.main-nav a:hover { color: var(--color-ink); }
.main-nav a:hover::after { transform: scaleX(1); }
.btn-header { padding: 0.5em 1.2em; background: var(--color-primary-strong); color: #fff; white-space: nowrap; }
.btn-header:hover { background: var(--color-primary-hover); }

/* ===== 공용 탭 캐러셀 (tp-car — 히어로·사례 공용) ===== */
.case-tabs {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.hero-tabs { grid-template-columns: repeat(4, 1fr); }
.band-dark .case-tabs { grid-template-columns: repeat(6, 1fr); }
.case-tab {
  text-align: left;
  padding: 0.9rem 1.1rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur-1) var(--ease-out),
              background var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.case-tab:hover { opacity: 1; }
.case-tab.active {
  opacity: 1;
  background: var(--color-bg);
  border-color: var(--color-line);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.tab-bar {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--color-line);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.tab-gauge {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 1%);
  border-radius: 999px;
  background: var(--grad-brand);
  background-size: 400% 100%;
}
.tab-name { display: block; font-size: var(--fs-small); font-weight: 800; color: var(--color-ink); letter-spacing: var(--ls-tight); }
.tab-type { display: block; margin-top: 0.2rem; font-size: var(--fs-label); color: var(--color-ink-soft); }

.carousel-viewport { overflow: hidden; border-radius: var(--radius); cursor: grab; }
.carousel-viewport.dragging { cursor: grabbing; }
.carousel-track { display: flex; transition: transform var(--dur-3) var(--ease-out); }
.carousel-track.no-anim { transition: none; }
/* .slide는 캐러셀(홈)과 슬라이드 스테이지(질문 페이지)가 공유한다 —
   반드시 컨테이너로 스코프할 것. 전역 .slide 규칙은 서로를 깨뜨린다 */
.carousel-track > .slide { flex: 0 0 100%; }
.carousel-track > .slide + .slide { margin-left: var(--space-2); }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.car-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.car-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.car-btn:active { transform: scale(0.92); }
.car-index {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--color-ink-soft);
}
.car-index .car-current { color: var(--color-ink); }
.car-sep { margin: 0 0.4em; }

/* ===== 1. 히어로 캐러셀 ===== */
.hero { padding: calc(64px + 10px + var(--space-4)) 0 var(--space-5); position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 50% at 88% 8%, rgba(0, 183, 177, 0.10), transparent 70%),
    radial-gradient(34% 44% at 4% 90%, rgba(29, 78, 92, 0.05), transparent 70%);
  pointer-events: none;
}
/* z-index 1 — 히어로 배경 스포트라이트(.hero::after)가 본문 위로 올라오지 않게 (2026-08-15) */
.hero .container { position: relative; z-index: 1; }
.hero-eyebrow { margin-bottom: var(--space-2); animation: fade-up var(--dur-3) var(--ease-out) both; }
.hero-car { animation: fade-up var(--dur-3) var(--ease-out) 120ms both; }
.hero-slide {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-2);
}
.hero-title { font-size: var(--fs-hero); }
.hero-sub { margin-top: var(--space-3); max-width: 32em; font-size: 1.05rem; }
.hero-cite {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--color-ink-soft);
  opacity: 0.7;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hero-visual { min-width: 0; }
.hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
}
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* AI 답변 라이브 데모 (슬라이드 1) */
.demo-card {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.demo-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem var(--space-2);
  border-bottom: 1px solid var(--color-line);
}
.demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-line); }
.demo-title {
  margin-left: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--color-ink-soft);
}
.demo-body { padding: var(--space-3); display: grid; gap: var(--space-2); }
.demo-q {
  justify-self: end;
  max-width: 85%;
  padding: 0.6em 1em;
  border-radius: var(--radius-s) var(--radius-s) 4px var(--radius-s);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-small);
}
.demo-a {
  max-width: 92%;
  padding: 0.8em 1em;
  border-radius: var(--radius-s) var(--radius-s) var(--radius-s) 4px;
  background: var(--color-band);
  border: 1px solid var(--color-line);
  font-size: var(--fs-small);
  color: var(--color-ink);
  min-height: 6.5em;
}
.demo-caret {
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--color-primary);
  animation: caret-blink 0.9s steps(1) infinite;
}
.demo-caret.done { display: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
.demo-source {
  display: inline-block;
  margin-top: 0.9em;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.demo-source.show { opacity: 1; transform: translateY(0); animation: source-pop var(--dur-3) var(--ease-out); }
@keyframes source-pop {
  0% { box-shadow: 0 0 0 0 rgba(0, 183, 177, 0.4); }
  100% { box-shadow: 0 0 0 12px rgba(0, 183, 177, 0); }
}
.demo-caption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-ink-soft); text-align: center; }

/* ===== 섹션 공통 ===== */
.band { background: var(--color-band); padding: var(--space-5) 0; }
.section-head { max-width: 46em; margin-bottom: var(--space-4); }
.section-head h2 { font-size: var(--fs-h2); margin-top: var(--space-1); }
.section-head .lede { margin-top: var(--space-2); font-size: 1.05rem; }
.section-head.on-dark h2 { color: var(--color-on-dark); }
.section-head.on-dark .lede { color: var(--color-on-dark-soft); }

/* ===== 2. 서비스 — 상단 룰 + 호버 카드 (hue: primary/navy/accent) ===== */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.svc-card {
  --hue: var(--color-primary);
  --hue-text: var(--color-primary-strong);
  --hue-soft: var(--color-primary-soft);
  --hue-glow: var(--glow-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}
/* 레퍼런스 시그니처 — 카드 상단 강조 룰 (기본 회색, hover 시 색 + 좌→우 확장) */
.svc-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: calc(100% + 2px);
  height: var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-line);
  transition: background var(--dur-2) var(--ease-out);
}
.svc-card::after {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: calc(100% + 2px);
  height: var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--hue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.svc-card:hover::after { transform: scaleX(1); }
.hue-navy { --hue: var(--color-navy); --hue-text: var(--color-navy); --hue-soft: var(--color-navy-soft); --hue-glow: var(--glow-navy); }
.hue-accent { --hue: var(--color-accent); --hue-text: var(--color-accent-text); --hue-soft: var(--color-accent-soft); --hue-glow: var(--glow-accent); }
.hue-alt   { --hue: var(--color-alt);   --hue-text: var(--color-alt-text);   --hue-soft: var(--color-alt-soft);   --hue-glow: var(--glow-alt); }
.hue-alt2  { --hue: var(--color-alt2);  --hue-text: var(--color-alt2-text);  --hue-soft: var(--color-alt2-soft);  --hue-glow: var(--glow-alt2); }
.hue-alt3  { --hue: var(--color-alt3);  --hue-text: var(--color-alt3-text);  --hue-soft: var(--color-alt3-soft);  --hue-glow: var(--glow-alt3); }
.hue-alt4  { --hue: var(--color-alt4);  --hue-text: var(--color-alt4-text);  --hue-soft: var(--color-alt4-soft);  --hue-glow: var(--glow-alt4); }
.svc-card:hover {
  transform: translateY(-10px);
  border-color: color-mix(in srgb, var(--hue) 35%, transparent);
  box-shadow: var(--hue-glow);
}
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-3); }
.svc-icon {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hue-soft);
  color: var(--hue-text);
}
.svc-icon svg { width: 26px; height: 26px; }
.hover-tag {
  padding: 0.4em 0.75em;
  border-radius: 6px;
  background: var(--hue-soft);
  color: var(--hue-text);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.svc-card:hover .hover-tag { opacity: 1; transform: translateY(0); }
.svc-card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.svc-card p { font-size: var(--fs-small); flex: 1; }
.svc-link, .svc-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  font-weight: 700;
}
.svc-link { color: var(--hue-text); }
.svc-link .arrow { transition: transform var(--dur-1) var(--ease-out); }
.svc-link:hover .arrow { transform: translateX(4px); }
.svc-soon { color: var(--color-ink-soft); font-weight: 500; }
.band-cta { display: flex; justify-content: center; margin-top: var(--space-4); }

/* ===== 3. 사례 — 다크 그라디언트 밴드 ===== */
.band-dark {
  position: relative;
  background: var(--grad-dark);
  padding: var(--space-5) 0;
  overflow: hidden;
}
.band-dark .eyebrow { color: var(--color-primary-on-dark); }
.band-dark .case-tab .tab-name { color: var(--color-on-dark); }
.band-dark .case-tab .tab-type { color: var(--color-on-dark-soft); }
.band-dark .case-tab .tab-bar { background: var(--color-on-dark-line); }
.band-dark .case-tab { opacity: 0.5; }
.band-dark .case-tab:hover { opacity: 1; }
.band-dark .case-tab.active { opacity: 1; background: rgba(255, 255, 255, 0.08); border-color: var(--color-on-dark-line); box-shadow: none; }

.carousel-stage { position: relative; }
.sticker {
  position: absolute;
  top: -16px;
  right: var(--space-3);
  z-index: 5;
  transform: rotate(3deg);
}
.sticker span {
  display: inline-block;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: var(--color-accent);
  /* 테라코타 위 흰 글자 4.04:1 — 구 코랄(2.57:1)보다 크게 나아졌다.
     잉크는 3.97:1로 오히려 낮고 탁하게 읽혀 흰 글자를 유지한다. */
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 700;
  box-shadow: 0 0 0 0 rgba(196, 99, 63, 0.7);
  animation: pulse-accent 1.8s infinite;
}
@keyframes pulse-accent {
  0% { box-shadow: 0 0 0 0 rgba(196, 99, 63, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(196, 99, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 99, 63, 0); }
}

.case-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius);
}
.slide-mock {
  border-radius: var(--radius-s);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--color-line);
}
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-line); }
.mock-url {
  margin-left: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--color-ink-soft);
}
.mock-body { padding: var(--space-2); display: grid; gap: 0.6rem; }
.mock-hero { height: 84px; border-radius: 8px; background: linear-gradient(120deg, var(--color-primary-soft), var(--color-band)); }
.mock-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.mock-row span { height: 38px; border-radius: 8px; background: var(--color-band); }
.mock-block { height: 24px; width: 60%; border-radius: 8px; background: var(--color-band); }
.mock-v1 .mock-hero { background: linear-gradient(120deg, var(--color-primary-soft), var(--color-band)); }
.mock-v1 .mock-block { width: 40%; }
.mock-v2 .mock-hero { height: 64px; background: linear-gradient(120deg, var(--color-navy-soft), var(--color-band)); }
.mock-v2 .mock-block { width: 75%; }

.slide-info .slide-name { font-size: var(--fs-h3); font-weight: 800; color: var(--color-on-dark); letter-spacing: var(--ls-tight); }
.slide-region {
  margin-left: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--color-on-dark-soft);
  letter-spacing: 0.1em;
}
/* 구 비비드 톤의 잔재였던 핫핑크 #FF7DC0 를 검증된 플럼 on-dark 로 교체 (2026-08-15) */
.slide-type { margin-top: 0.2rem; font-size: var(--fs-small); font-weight: 700; color: var(--color-alt4-on-dark); }
.slide-info p { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-on-dark-soft); }
.slide-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-2); }
.band-dark .chip { background: transparent; border-color: var(--color-on-dark-line); color: var(--color-on-dark-soft); }

.case-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-3);
  padding: 0;
  border: none;
  background: none;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-primary-on-dark);
  cursor: pointer;
}
.case-detail-btn .arrow { transition: transform var(--dur-1) var(--ease-out); }
.case-detail-btn:hover .arrow { transform: translateX(4px); }
.band-dark .car-btn { background: transparent; border-color: var(--color-on-dark-line); color: var(--color-on-dark); }
.band-dark .car-btn:hover { background: var(--color-primary); border-color: var(--color-primary); }
.band-dark .car-index { color: var(--color-on-dark-soft); }
.band-dark .car-index .car-current { color: var(--color-on-dark); }
.cases-note { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-on-dark-soft); }

.dark-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-on-dark-line);
}
.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--color-on-dark);
}
.stat-unit { font-size: 0.45em; font-weight: 500; margin-left: 0.3em; color: var(--color-on-dark-soft); }
.stat-label { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--color-on-dark-soft); }

/* ===== 4. 그라디언트 배너 ===== */
.banner { background: var(--grad-banner); padding: var(--space-4) 0; }
.banner-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr auto;
  gap: var(--space-3);
  align-items: center;
}
.banner-title { display: flex; align-items: flex-start; gap: var(--space-1); }
.banner-title h2 { color: #fff; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.3; }
.banner-text { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-small); }
.banner-cta { justify-self: end; }

/* ===== 4b. 딥 배너 (.banner-deep) — 대안 경로를 한 배너 줄이 아니라 한 섹션으로.
   제작 허브의 "직접 관리하고 싶으시다면"이 첫 사용처 (2026-08-15 사용자 지정: 높이 2배·강조) ===== */
.banner-deep { padding: var(--space-5) 0; }
.banner-deep-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-4);
  align-items: center;
}
.banner-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
}
.banner-kicker::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.6em;
  border-radius: 50%;
  background: #fff;
  vertical-align: 0.08em;
}
.banner-headline {
  margin-top: var(--space-1);
  color: #fff;
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
}
.banner-lede {
  margin-top: var(--space-2);
  max-width: 36em;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
}
.banner-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.banner-link {
  font-size: var(--fs-small);
  font-weight: 700;
  color: #fff;
}
.banner-link .arrow { display: inline-block; margin-left: 0.35em; transition: transform var(--dur-1) var(--ease-out); }
.banner-link:hover .arrow { transform: translateX(4px); }
/* 우측 사실 시트 — 카드 상자 대신 헤어라인 스펙 시트 (DESIGN C7 E와 같은 이유) */
.banner-facts { list-style: none; margin: 0; padding: 0; }
.banner-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 1.1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.banner-facts li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.banner-facts b { color: #fff; font-size: 1.08rem; letter-spacing: var(--ls-tight); white-space: nowrap; }
.banner-facts span { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-small); text-align: right; }
@media (max-width: 900px) {
  .banner-deep-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .banner-facts span { text-align: right; }
}

/* ===== 5. 상담 CTA + 폼 ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-5); align-items: start; }
.contact-media {
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.contact-media img { display: block; width: 100%; height: 280px; object-fit: cover; object-position: 50% 72%; }
.contact-points li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) 1.8rem;
  border-bottom: 1px solid var(--color-line);
}
.contact-points li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-primary-strong);
  font-family: var(--font-mono);
  font-weight: 700;
}
.contact-form-wrap {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: var(--space-4);
}
.field { position: relative; margin-bottom: var(--space-3); }
.field input, .field textarea {
  width: 100%;
  padding: 1.15rem 0 0.5rem;
  border: none;
  border-bottom: 1px solid var(--color-line);
  background: transparent;
  font: inherit;
  color: var(--color-ink);
  transition: border-color var(--dur-1) var(--ease-out);
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--color-primary); }
.field label {
  position: absolute;
  left: 0; top: 0.95rem;
  color: var(--color-ink-soft);
  font-size: var(--fs-body);
  pointer-events: none;
  transition: all var(--dur-2) var(--ease-out);
}
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label {
  top: -0.35rem;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-primary);
}
.field.invalid input, .field.invalid textarea { border-bottom-color: var(--color-error); }
.field.invalid label { color: var(--color-error); }
.field-err { margin-top: 0.35rem; font-size: var(--fs-label); color: var(--color-error); }
.field-hint { margin-top: 0.45rem; font-size: var(--fs-label); color: var(--color-ink-soft); }
.field.shake { animation: shake var(--dur-2) var(--ease-out); }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* 카드 폭을 꽉 채우지 않는다 — 일반 버튼보다 조금 넓은 정도 (2026-08-15 사용자 지정) */
.btn-submit { position: relative; min-width: 240px; justify-content: center; }
.form-actions { display: flex; justify-content: center; }
.btn-spinner {
  display: none;
  width: 1em; height: 1em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-submit.loading { pointer-events: none; opacity: 0.85; }
.btn-submit.loading .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-error { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-error); text-align: center; }

.form-success { text-align: center; padding: var(--space-4) 0; }
.success-check { width: 56px; height: 56px; margin-bottom: var(--space-2); }
.success-check circle, .success-check path {
  stroke: var(--color-ok);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.success-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw var(--dur-3) var(--ease-out) forwards; }
.success-check path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw var(--dur-3) var(--ease-out) 350ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.form-success h3 { font-size: var(--fs-h3); }
.form-success p { margin-top: var(--space-1); font-size: var(--fs-small); }

/* ===== 라이트박스 ===== */
.case-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
.case-modal[hidden] { display: none; }
.case-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 16, 35, 0.55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.case-modal-card {
  position: relative;
  width: min(520px, 100%);
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: var(--space-4);
  animation: modal-pop var(--dur-2) var(--ease-spring);
}
@keyframes modal-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.case-modal-close {
  position: absolute;
  top: var(--space-2); right: var(--space-2);
  width: 36px; height: 36px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-bg);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.case-modal-close:hover { background: var(--color-band); color: var(--color-ink); }
.case-modal-close:active { transform: scale(0.92); }
.case-modal-card .eyebrow { color: var(--color-primary-strong); }
.case-modal-card h3 { font-size: var(--fs-h2); margin-top: var(--space-1); }
.case-modal-desc { margin-top: var(--space-2); }
.case-modal-label {
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.case-modal-card .slide-tags .chip { background: var(--color-band); border-color: var(--color-line); color: var(--color-ink-soft); }
.case-modal-note { margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-small); }

/* ===== 푸터 — 딥틸 ===== */
.site-footer {
  background: var(--color-primary-deep);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-4) 0 var(--space-3);
  font-size: var(--fs-small);
}
.site-footer .wordmark { color: #fff; }
.site-footer .wordmark-mark { height: 28px; }
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-tagline { margin-top: var(--space-1); }
.footer-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.footer-link { color: #fff; font-weight: 600; transition: color var(--dur-1) var(--ease-out); }
.footer-link:hover { color: var(--color-primary-on-dark); }
.footer-link .arrow { display: inline-block; margin-left: 0.35em; transition: transform var(--dur-1) var(--ease-out); }
.footer-link:hover .arrow { transform: translateX(4px); }
.footer-biz {
  padding-top: var(--space-3);
  font-size: var(--fs-label);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.62);
}
.footer-legal { color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.footer-legal:hover { color: var(--color-primary-on-dark); border-color: var(--color-primary-on-dark); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
}
.footer-status { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--fs-label); }
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-ok);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 193, 150, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(37, 193, 150, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 193, 150, 0); }
}

/* ===== 리빌 유틸 (A3) ===== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ===== 반응형 ===== */
@media (max-width: 960px) {
  .hero-slide { grid-template-columns: 1fr; }
  .hero-visual { max-width: 480px; }
  .hero-tabs { grid-template-columns: repeat(2, 1fr); }
  .band-dark .case-tabs { grid-template-columns: repeat(3, 1fr); }
  .svc-grid { grid-template-columns: 1fr; }
  .case-slide { grid-template-columns: 1fr; gap: var(--space-2); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .banner-grid { grid-template-columns: 1fr; }
  .banner-cta { justify-self: start; }
}
@media (max-width: 640px) {
  /* .main-nav 는 숨기지 않는다 — 햄버거 토글 패널로 전환 (아래 '모바일 내비' 절) */
  .band-dark .case-tabs { grid-template-columns: repeat(2, 1fr); }
  .band-dark .tab-type { display: none; }
  .dark-stats { grid-template-columns: 1fr; }
  .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== 구축 페이지 (/clinic/website) ===== */

/* 밴드 리듬상 쿨그레이가 연달아 오면 안 될 때 (DESIGN.md A) */
.band-plain { background: var(--color-page); }

/* 문제 카드의 번호 — 아이콘 자리에 들어간다 */
.svc-num {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hue-soft);
  color: var(--hue-text);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* 다크 밴드 위 4개 축 */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-3);
}
.approach-item { padding-top: var(--space-2); }
.approach-rule {
  width: 40px;
  height: var(--rule);
  margin-bottom: var(--space-2);
  background: var(--grad-brand);
  border-radius: var(--rule);
}
.approach-item h3 {
  font-size: var(--fs-h3);
  color: var(--color-on-dark);
  margin-bottom: var(--space-1);
}
.approach-item p { font-size: var(--fs-small); color: var(--color-on-dark-soft); }

/* 진행 4단계 */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.step {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}
.step-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--color-primary-strong);
  margin-bottom: var(--space-1);
}
.step h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.step p { font-size: var(--fs-small); }
.steps-note {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

@media (max-width: 900px) {
  .approach-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
}

/* ===== 헤더 드롭다운 (내비 v2) ===== */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 0.3em; }
.nav-caret { font-size: 0.7em; opacity: 0.55; transition: transform var(--dur-1) var(--ease-out); }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: translateY(1px); }
.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px) scale(0.98);
  transform-origin: top center;
  min-width: 240px;
  padding: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  /* visibility 지연은 자식 스태거(최대 dur-2 + 지연)가 끝난 뒤 — 닫힘이 뚝 끊기지 않게 */
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out),
              visibility 0s linear var(--dur-2);
}
/* 패널 상단 시그니처 룰 — 카드의 강조 룰과 같은 시각 언어 (2026-08-15 메뉴 v2) */
.nav-menu::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: calc(100% + 2px);
  height: var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--grad-brand);
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 10px) scale(1);
  transition-delay: 0s;
}
/* 마지막 항목의 메가 패널은 오른끝 정렬 — 가운데 정렬로는 화면 우측을 넘친다 (2026-08-15) */
.nav-item:last-child .nav-menu.is-mega {
  left: auto;
  right: 0;
  transform: translate(0, 4px) scale(0.98);
  transform-origin: top right;
}
.nav-item:last-child:hover .nav-menu.is-mega,
.nav-item:last-child:focus-within .nav-menu.is-mega {
  transform: translate(0, 10px) scale(1);
}
/* 열림 스태거 — 그룹·사이드가 순서대로 떠오른다 (닫힐 때도 같은 순서로 잦아든다) */
.nav-menu .nav-group,
.nav-menu .nav-side > * {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.nav-item:hover .nav-menu .nav-group,
.nav-item:focus-within .nav-menu .nav-group,
.nav-item:hover .nav-menu .nav-side > *,
.nav-item:focus-within .nav-menu .nav-side > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(50ms + 45ms * var(--gi, 0));
}
.nav-item::after {  /* 버튼과 메뉴 사이 hover 공백 메움 */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 14px;
}
.main-nav .nav-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-s);
  font-weight: 500;
  white-space: nowrap;
}
.main-nav .nav-menu a::after { content: none; }
.main-nav .nav-menu a:hover { background: var(--color-band); color: var(--color-ink); }

/* ===== 모바일 내비 — 640px 이하 햄버거 토글 패널 (site.js .nav-toggle) ===== */
.nav-toggle {
  display: none;
  flex: 0 0 auto;              /* 헤더가 좁아도 쪼그라들지 않는다 */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  margin-left: auto;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ink);
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.site-header.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
  .nav-toggle { display: flex; }
  .site-header .container { gap: var(--space-2); }   /* 좁은 화면에서 헤더 넘침 방지 */
  .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
  }
  .site-header.nav-open .main-nav { display: flex; }
  .main-nav > a,
  .nav-item > a { display: flex; padding: 0.6rem 0.5rem; }
  .main-nav a::after { content: none; }   /* 데스크톱 밑줄 효과 제거 */
  .nav-caret { display: none; }
  .nav-item::after { content: none; }     /* hover 공백 메움 — 모바일 무관 */
  .nav-menu {                             /* 서브메뉴는 접지 않고 인라인으로 펼친다 */
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0 0 0.25rem 1rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }
  .main-nav .nav-menu a { white-space: normal; color: var(--color-ink-soft); font-weight: 500; padding: 0.45rem 0.5rem; }
  .nav-menu .nav-soon { white-space: normal; padding: 0.45rem 0.5rem; }
  /* 메가메뉴도 모바일에서는 한 줄로 편다 — 그룹 헤딩은 그대로 구분선 역할을 한다 */
  .nav-menu.is-mega { min-width: 0; grid-template-columns: 1fr; padding: 0 0 0.25rem 1rem; }
  .nav-group-label { padding: 0.5rem 0.5rem 0.1rem; }
  /* ⚠️ 메뉴 v2의 인라인 모드 중화는 이 블록에 넣지 않는다 — 메가 v2 규칙이
     스타일시트 후반에 있어 같은 특이도의 앞쪽 미디어쿼리를 이긴다.
     중화 규칙은 메가 v2 블록 바로 뒤의 미디어쿼리에 있다 (2026-08-15) */
}

/* ===== 질문 페이지 (question.html) ===== */
.q-head { padding-top: calc(64px + 10px + var(--space-4)); padding-bottom: var(--space-3); }
.q-head .eyebrow a { color: inherit; }
.q-head .eyebrow a:hover { color: var(--color-primary-strong); }
.q-title { font-size: var(--fs-hero); margin-top: var(--space-1); max-width: 20em; }

/* 슬라이드 스테이지 — 다크 브랜드 무대. 그리드 겹침으로 반응형 높이 확보 */
.slide-stage-wrap { padding-bottom: var(--space-5); }
.slide-stage {
  position: relative;
  background: var(--grad-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  outline: none;
}
/* 앰비언트 — 무대 배경 블롭 드리프트. 요소 등장이 끝난 뒤에도 정지 프레임이 없도록.
   GPU 가속 속성(transform)만 사용. 라이트 슬라이드가 활성이면 슬라이드 배경에 덮인다 */
.slide-stage::before,
.slide-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.slide-stage::before {
  top: -22%;
  left: -14%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 65%);
  animation: stage-drift-a 28s var(--ease-out) infinite alternate;
}
.slide-stage::after {
  bottom: -26%;
  right: -12%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-primary-on-dark) 13%, transparent), transparent 65%);
  animation: stage-drift-b 36s var(--ease-out) infinite alternate;
}
@keyframes stage-drift-a { to { transform: translate(16%, 12%) scale(1.22); } }
@keyframes stage-drift-b { to { transform: translate(-14%, -10%) scale(1.14); } }
.slide-stage:focus-visible { box-shadow: 0 0 0 3px var(--color-primary-soft); }
.slide-track {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: min(56vw, 540px);
  position: relative;            /* 앰비언트 블롭 위에 슬라이드가 오도록 */
  z-index: 1;
}
.slide-stage .slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 9vw, 6.5rem) clamp(4rem, 9vw, 6rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.slide-stage .slide.active { opacity: 1; transform: none; pointer-events: auto; }
/* JS가 붙기 전(그리고 JS 없이도) 첫 장은 보인다 — site.js가 js-ready를 달면 .active가 넘겨받는다 */
.slide-stage:not(.js-ready) .slide:first-child { opacity: 1; transform: none; pointer-events: auto; }
.slide-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--color-primary-on-dark);
  margin-bottom: var(--space-2);
}
.slide-title {
  color: var(--color-on-dark);
  font-size: clamp(1.5rem, 3.6vw, 2.9rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  max-width: 18em;
}
.slide-title em {
  font-style: normal;
  color: var(--color-primary-on-dark);
  /* 형광펜 마커 — active 시 q-sweep으로 0→100% 스와이프 */
  background-image: linear-gradient(
    color-mix(in srgb, var(--color-primary) 28%, transparent),
    color-mix(in srgb, var(--color-primary) 28%, transparent));
  background-repeat: no-repeat;
  background-position: 0 84%;
  background-size: 100% 0.3em;
}
.slide-body {
  color: var(--color-on-dark-soft);
  margin-top: var(--space-2);
  max-width: 30em;
  font-size: clamp(0.98rem, 1.6vw, 1.15rem);
  line-height: 1.7;
}
.slide-points {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  max-width: 30em;
}
.slide-points li {
  position: relative;
  padding-left: 1.4em;
  color: var(--color-on-dark-soft);
  font-size: clamp(0.98rem, 1.6vw, 1.12rem);
}
.slide-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 2px;
  background: var(--color-primary);
}
.slide-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;                     /* 활성 슬라이드(.slide-track, z-index 1) 위 — 클릭 가능해야 한다 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
}
.slide-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--color-on-dark-line);
  border-radius: 50%;
  background: transparent;
  color: var(--color-on-dark);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.slide-btn:hover { background: rgba(255, 255, 255, 0.12); }
.slide-dots { display: flex; gap: 6px; }
.slide-dot {
  position: relative;
  width: 26px; height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--color-on-dark-line);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}
.slide-dot::after {  /* 오토플레이 게이지 */
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(calc(var(--p, 0) / 100));
  transform-origin: left;
  background: var(--color-primary);
}
.slide-dot.active { background: rgba(255, 255, 255, 0.35); }

/* ── 슬라이드 레이아웃 변형 · 라이트 테마 (question.html §slides) ── */
.slide-copy { min-width: 0; }
.slide-visual { min-width: 0; }
.slide-stage .slide.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.slide.layout-visual .slide-visual { margin-top: var(--space-3); }

.slide-stage .slide.theme-light { background: var(--color-band); }
.slide.theme-light .slide-kicker { color: var(--color-primary-strong); }
.slide.theme-light .slide-title { color: var(--color-ink); }
.slide.theme-light .slide-title em {
  color: var(--color-primary-strong);
  background-image: linear-gradient(
    color-mix(in srgb, var(--color-primary) 18%, transparent),
    color-mix(in srgb, var(--color-primary) 18%, transparent));
}
.slide.theme-light .slide-body,
.slide.theme-light .slide-points li { color: var(--color-ink-soft); }
/* 라이트 슬라이드가 활성일 때 컨트롤 색 반전 */
.slide-stage:has(.slide.theme-light.active) .slide-btn {
  color: var(--color-ink);
  border-color: var(--color-line);
}
.slide-stage:has(.slide.theme-light.active) .slide-btn:hover { background: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.slide-stage:has(.slide.theme-light.active) .slide-dot { background: color-mix(in srgb, var(--color-ink) 15%, transparent); }
.slide-stage:has(.slide.theme-light.active) .slide-dot.active { background: color-mix(in srgb, var(--color-ink) 35%, transparent); }

/* ── 비주얼 슬롯 (templates/visuals/) ── */
/* chat — AI 검색 목업. 다크 무대 위 라이트 카드 */
.vis-chat {
  display: grid;
  gap: var(--space-2);
  max-width: 420px;
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--color-ink-soft);
}
.chat-led { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.chat-q {
  justify-self: end;
  max-width: 88%;
  padding: 0.6rem 0.9rem;
  border-radius: 14px 14px 4px 14px;
  background: var(--color-primary-deep);
  color: var(--color-on-dark);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.chat-ai { display: grid; }
.chat-dots, .chat-a { grid-area: 1 / 1; justify-self: start; }
.chat-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.75rem 0.8rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--color-band);
}
.chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-soft); }
.chat-a {
  max-width: 92%;
  padding: 0.6rem 0.9rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--color-band);
  color: var(--color-ink);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.chat-a p { margin: 0; }
.chat-cite {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--color-primary-strong);
}

/* compare — ✕/✓ 대비 카드 */
.vis-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  max-width: 760px;
}
.cmp-card {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border-top: var(--rule) solid var(--color-error);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.cmp-good { border-top-color: var(--color-ok); }
.cmp-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding-bottom: 0.55rem;
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--color-ink);
}
.cmp-head::before {
  content: "✕";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-error);
  font-size: 0.85em;
}
.cmp-good .cmp-head::before {
  content: "✓";
  background: var(--color-primary-soft);
  color: var(--color-ok);
}
.cmp-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.cmp-card li {
  position: relative;
  padding-left: 1em;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  line-height: 1.5;
}
.cmp-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.45em;
  height: 2px;
  background: var(--color-line);
}

/* checklist — 체크가 그려지는 카드 리스트 */
.vis-check ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  max-width: 34em;
}
.vis-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  color: var(--color-ink);
  line-height: 1.55;
}
.ck-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-top: -0.05em;
  border-radius: var(--radius-s);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}
.ck-box svg { width: 68%; height: 68%; }
.ck-box path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

/* stat — 대형 수치 카운트업(+선택 게이지 링). 숫자는 site.js가 rAF로 굴린다 */
.vis-stat {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}
.stat-dial { display: grid; place-items: center; }
.stat-ring, .stat-num { grid-area: 1 / 1; }
.stat-ring {
  width: clamp(180px, 24vw, 260px);
  height: auto;
  transform: rotate(-90deg);
}
.stat-ring circle { fill: none; stroke-width: 7; }
.ring-bg { stroke: var(--color-on-dark-line); }
.ring-fg {
  stroke: var(--color-primary);
  stroke-linecap: round;
  /* 둘레 2π×52 ≈ 326.7 — --ring(0~100)만큼 채운다 */
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 * (100 - var(--ring, 100)) / 100);
}
.stat-num {
  color: var(--color-on-dark);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.stat-affix { font-size: 0.5em; font-weight: 700; color: var(--color-primary-on-dark); }
.stat-label {
  color: var(--color-on-dark-soft);
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.55;
  max-width: 22em;
}
.stat-source { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--color-on-dark-soft); }
.slide.theme-light .stat-num { color: var(--color-ink); }
.slide.theme-light .stat-affix { color: var(--color-primary-strong); }
.slide.theme-light .ring-bg { stroke: var(--color-line); }
.slide.theme-light .stat-label,
.slide.theme-light .stat-source { color: var(--color-ink-soft); }

/* chart — 표가 곧 데이터 (Charts.css 기법 차용, 의존성 없음).
   막대 높이는 로케일 JSON이 계산한 --size(0~1) 데이터 바인딩 */
.vis-chart { display: grid; gap: var(--space-2); width: min(100%, 560px); }
.chart-table { display: block; }
.chart-table caption {
  display: block;
  text-align: left;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-on-dark);
  margin-bottom: var(--space-2);
}
.chart-table tbody {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-2);
  height: clamp(160px, 24vw, 230px);
}
.chart-table tr {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.5rem;
}
.chart-table td {
  grid-row: 1;
  align-self: end;
  justify-self: center;
  position: relative;
  width: min(100%, 64px);
  height: calc(var(--size, 0) * 100%);
  min-height: 4px;
  background: color-mix(in srgb, var(--color-primary-on-dark) 30%, transparent);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.chart-table tr.em td { background: var(--color-primary); }
.chart-value {
  position: absolute;
  top: -1.7em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-on-dark);
}
.chart-table th {
  grid-row: 2;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-on-dark-soft);
  text-align: center;
}
.chart-source { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--color-on-dark-soft); }
.slide.theme-light .chart-table caption,
.slide.theme-light .chart-value { color: var(--color-ink); }
.slide.theme-light .chart-table td { background: var(--color-primary-soft); }
.slide.theme-light .chart-table tr.em td { background: var(--color-primary-strong); }
.slide.theme-light .chart-table th,
.slide.theme-light .chart-source { color: var(--color-ink-soft); }

/* flow — 단계 카드 사이를 화살표가 그려지며 연결 */
.vis-flow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
}
.flow-step {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius);
  text-align: center;
}
.flow-t { font-weight: 700; color: var(--color-on-dark); font-size: clamp(0.95rem, 1.5vw, 1.1rem); }
.flow-d { margin-top: 0.3rem; font-size: var(--fs-label); color: var(--color-on-dark-soft); }
.flow-arrow { flex: none; width: 42px; height: 21px; overflow: visible; }
.flow-arrow path {
  fill: none;
  stroke: var(--color-primary-on-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 62;
  stroke-dashoffset: 62;
}
.slide.theme-light .flow-step { background: var(--color-bg); border-color: var(--color-line); }
.slide.theme-light .flow-t { color: var(--color-ink); }
.slide.theme-light .flow-d { color: var(--color-ink-soft); }
.slide.theme-light .flow-arrow path { stroke: var(--color-primary-strong); }

/* ── 모션 레이어 — active 토글마다 재생. reduced-motion은 전역 규칙이 즉시 종료 상태로 보냄 ── */
@keyframes q-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes q-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes q-sweep { from { background-size: 0 0.3em; } to { background-size: 100% 0.3em; } }
@keyframes q-check { to { stroke-dashoffset: 0; } }
@keyframes q-hide { to { opacity: 0; visibility: hidden; } }
@keyframes q-dot {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(-3px); opacity: 1; }
}

.slide-stage .slide.active .slide-kicker { animation: q-rise 0.5s var(--ease-out) both; }
.slide-stage .slide.active .slide-title { animation: q-rise 0.55s var(--ease-out) 0.12s both; }
.slide-stage .slide.active .slide-title em { animation: q-sweep 0.45s var(--ease-out) 0.8s both; }
.slide-stage .slide.active .slide-body { animation: q-rise 0.55s var(--ease-out) 0.28s both; }
.slide-stage .slide.active .slide-points li { animation: q-rise 0.5s var(--ease-out) both; }
.slide-stage .slide.active .slide-points li:nth-child(1) { animation-delay: 0.34s; }
.slide-stage .slide.active .slide-points li:nth-child(2) { animation-delay: 0.48s; }
.slide-stage .slide.active .slide-points li:nth-child(3) { animation-delay: 0.62s; }
.slide-stage .slide.active .slide-points li:nth-child(4) { animation-delay: 0.76s; }
.slide-stage .slide.active .slide-points li:nth-child(5) { animation-delay: 0.9s; }
.slide-stage .slide.active .slide-points li:nth-child(6) { animation-delay: 1.04s; }

/* chat 시퀀스: 카드 → 질문 → 타이핑 도트 → 답변 → 출처 */
.slide-stage .slide.active .vis-chat { animation: q-pop 0.5s var(--ease-out) 0.35s both; }
.slide-stage .slide.active .chat-q { animation: q-rise 0.4s var(--ease-out) 0.8s both; }
.slide-stage .slide.active .chat-dots {
  animation: q-rise 0.35s var(--ease-out) 1.3s both,
             q-hide 0.2s linear 2.45s forwards;
}
.slide-stage .slide.active .chat-dots i { animation: q-dot 0.9s ease-in-out infinite; }
.slide-stage .slide.active .chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.slide-stage .slide.active .chat-dots i:nth-child(3) { animation-delay: 0.3s; }
.slide-stage .slide.active .chat-a { animation: q-pop 0.45s var(--ease-out) 2.55s both; }
.slide-stage .slide.active .chat-cite { animation: q-rise 0.4s var(--ease-out) 3.1s both; }

/* compare: ✕ 카드 먼저, ✓ 카드가 반박하듯 뒤에 */
.slide-stage .slide.active .cmp-bad { animation: q-pop 0.5s var(--ease-out) 0.4s both; }
.slide-stage .slide.active .cmp-good { animation: q-pop 0.5s var(--ease-out) 0.85s both; }

/* checklist: 카드 등장 후 체크 드로잉 */
.slide-stage .slide.active .vis-check li { animation: q-rise 0.5s var(--ease-out) both; }
.slide-stage .slide.active .vis-check li:nth-child(1) { animation-delay: 0.35s; }
.slide-stage .slide.active .vis-check li:nth-child(2) { animation-delay: 0.6s; }
.slide-stage .slide.active .vis-check li:nth-child(3) { animation-delay: 0.85s; }
.slide-stage .slide.active .vis-check li:nth-child(4) { animation-delay: 1.1s; }
.slide-stage .slide.active .ck-box path { animation: q-check 0.5s var(--ease-out) both; }
.slide-stage .slide.active li:nth-child(1) .ck-box path { animation-delay: 0.75s; }
.slide-stage .slide.active li:nth-child(2) .ck-box path { animation-delay: 1s; }
.slide-stage .slide.active li:nth-child(3) .ck-box path { animation-delay: 1.25s; }
.slide-stage .slide.active li:nth-child(4) .ck-box path { animation-delay: 1.5s; }

/* stat: 링 드로잉과 카운트업(site.js)이 같은 타이밍에 */
@keyframes q-ring { from { stroke-dashoffset: 326.7; } }
.slide-stage .slide.active .vis-stat { animation: q-pop 0.5s var(--ease-out) 0.3s both; }
.slide-stage .slide.active .ring-fg { animation: q-ring 1.3s var(--ease-out) 0.5s both; }
.slide-stage .slide.active .stat-label { animation: q-rise 0.5s var(--ease-out) 1.3s both; }
.slide-stage .slide.active .stat-source { animation: q-rise 0.5s var(--ease-out) 1.6s both; }

/* chart: 막대가 자라고 → 값 라벨 → 출처. height 애니메이션은 등장 1회뿐이라 비용 무시 가능 */
@keyframes q-grow { from { height: 0; } }
.slide-stage .slide.active .chart-table td { animation: q-grow 0.7s var(--ease-out) both; }
.slide-stage .slide.active .chart-table tr:nth-child(1) td { animation-delay: 0.4s; }
.slide-stage .slide.active .chart-table tr:nth-child(2) td { animation-delay: 0.55s; }
.slide-stage .slide.active .chart-table tr:nth-child(3) td { animation-delay: 0.7s; }
.slide-stage .slide.active .chart-table tr:nth-child(4) td { animation-delay: 0.85s; }
.slide-stage .slide.active .chart-table tr:nth-child(5) td { animation-delay: 1s; }
.slide-stage .slide.active .chart-table tr:nth-child(6) td { animation-delay: 1.15s; }
.slide-stage .slide.active .chart-value { animation: q-rise 0.4s var(--ease-out) 1.3s both; }
.slide-stage .slide.active .chart-source { animation: q-rise 0.4s var(--ease-out) 1.6s both; }

/* flow: 카드 → 화살표 드로잉 → 카드 … (자식 순서 = step, arrow, step, arrow, step, arrow, step) */
@keyframes q-draw { to { stroke-dashoffset: 0; } }
.slide-stage .slide.active .vis-flow > :nth-child(1) { animation: q-pop 0.45s var(--ease-out) 0.35s both; }
.slide-stage .slide.active .vis-flow > :nth-child(2) path { animation: q-draw 0.4s var(--ease-out) 0.85s both; }
.slide-stage .slide.active .vis-flow > :nth-child(3) { animation: q-pop 0.45s var(--ease-out) 1.15s both; }
.slide-stage .slide.active .vis-flow > :nth-child(4) path { animation: q-draw 0.4s var(--ease-out) 1.65s both; }
.slide-stage .slide.active .vis-flow > :nth-child(5) { animation: q-pop 0.45s var(--ease-out) 1.95s both; }
.slide-stage .slide.active .vis-flow > :nth-child(6) path { animation: q-draw 0.4s var(--ease-out) 2.45s both; }
.slide-stage .slide.active .vis-flow > :nth-child(7) { animation: q-pop 0.45s var(--ease-out) 2.75s both; }

/* 본문 — 과하게 친절한 설명 */
.q-article { max-width: 46em; padding-bottom: var(--space-4); }
.q-section { margin-bottom: var(--space-4); }
.q-section h2 { font-size: var(--fs-h3); font-size: 1.35rem; margin-bottom: var(--space-2); }
.q-section p { margin-bottom: var(--space-2); }
.q-list { margin: 0 0 var(--space-2); padding-left: 1.2em; }
.q-list li { margin-bottom: var(--space-1); }
.q-note {
  padding: var(--space-2) var(--space-3);
  border-left: var(--rule) solid var(--color-primary);
  border-radius: var(--radius-s);
  background: var(--color-primary-soft);
  font-size: var(--fs-small);
}

/* 상하 대칭 여백. ⚠️ 앞 밴드의 하단 패딩은 "밴드 색이 칠해진 공간"이라 여백 역할을 하지
   못한다 — 위를 0으로 뒀다가 카드가 밴드에 붙어버렸다 (2026-08-15에 잡은 실수) */
.q-cta-wrap { padding: var(--space-4) 0; }
/* 덧붙임 CTA 카드 — 전면 재설계 [2026-08-15]
   구 설계의 결함: 배경이 --color-band 라서 `.band` 섹션(같은 #F0F3F7) 뒤에 오면 카드와 밴드가
   같은 색으로 맞닿아 "라운드 코너만 있는 렌더 오류"로 읽혔다. 문서 페이지들은 앞 섹션이
   흰색(.band-plain)이라 우연히 가려져 있었을 뿐, 부품 자체가 앞 면에 의존하는 설계였다.
   새 설계: 어떤 면 뒤에 와도 카드로 읽히도록 흰 카드 + 보더 + 그림자 + 시그니처 룰.
   (사이트의 카드 문법과 동일 — svc-card·demo-card·nav-menu) */
.q-cta {
  position: relative;
  padding: var(--space-4);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(0, 183, 177, 0.07), transparent 60%),
    var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  text-align: center;
}
.q-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--rule);
  background: var(--grad-brand);
}
.q-cta h2 { font-size: 1.35rem; margin-bottom: var(--space-1); }
.q-cta p { max-width: 34em; margin: 0 auto var(--space-3); }

.q-related { padding-bottom: var(--space-5); }
.q-related-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}
.q-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.q-related a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.q-related a:hover { border-color: var(--color-primary); color: var(--color-primary-strong); }

/* 녹화 모드 — 스테이지만 전체 화면 (브라우저 창을 1920×1080으로 두고 화면 녹화) */
body.is-recording .site-header,
body.is-recording .site-footer,
body.is-recording .q-head,
body.is-recording .q-article,
body.is-recording .q-cta-wrap,
body.is-recording .q-related,
body.is-recording .slide-controls { display: none !important; }
body.is-recording .slide-stage-wrap { padding: 0; max-width: none; }
body.is-recording .slide-stage { position: fixed; inset: 0; border-radius: 0; z-index: 999; }
body.is-recording .slide-track { min-height: 100vh; }
body.is-recording .slide-stage .slide { padding: 6vw 9vw; }

/* ===== 허브: 질문 카드 그리드 (마케팅) · 챕터 트리 (아카데미) ===== */
.hub-head { padding-top: calc(64px + 10px + var(--space-4)); padding-bottom: var(--space-4); }
.hub-head h1 { font-size: var(--fs-hero); max-width: 18em; }
.hub-head .lede { margin-top: var(--space-2); max-width: 38em; font-size: 1.05rem; }

.q-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}
.qcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.qcard h3 { font-size: 1.08rem; line-height: 1.4; }
.qcard p { font-size: var(--fs-small); flex: 1; }
a.qcard:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  box-shadow: var(--glow-primary);
}
a.qcard h3 { color: var(--color-ink); }
.qcard-soon { opacity: 0.65; }
.qcard-chip {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--color-band);
  color: var(--color-ink-soft);
}
a.qcard .qcard-chip { background: var(--color-primary-soft); color: var(--color-primary-strong); }

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.chapter {
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.chapter-num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--color-primary-strong);
}
.chapter h2 { font-size: 1.2rem; margin: var(--space-1) 0 var(--space-2); }
.chapter .muted-desc { color: var(--color-ink-soft); font-weight: 400; font-size: var(--fs-small); }
.chapter li a { color: var(--color-ink); font-weight: 600; }
.chapter li a:hover { color: var(--color-primary-strong); }
.chapter ol { list-style: none; margin: 0; padding: 0; }
.chapter li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.45rem 0;
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-small);
}
.chapter .soon {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--color-ink-soft);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .q-grid { grid-template-columns: repeat(2, 1fr); }
  .chapter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .q-grid { grid-template-columns: 1fr; }
  .slide-track { min-height: 0; }
  .slide-stage .slide { padding: var(--space-3) var(--space-3) var(--space-5); min-height: 380px; }
  .slide-stage .slide.layout-split { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
  .vis-chat { max-width: none; }
  .vis-compare { grid-template-columns: 1fr; }
  .vis-stat { justify-items: start; text-align: left; }
  .vis-flow { flex-direction: column; align-items: stretch; }
  .flow-arrow { align-self: center; transform: rotate(90deg); margin: -2px 0; }
}

/* ===== 404 ===== */
.error-page {
  text-align: center;
  padding: var(--space-5) var(--space-2);
}

/* ===== 배경 변주 밴드 (2026-07-26) — 제작 메뉴 이후 공용 =====
   기존 .band(쿨그레이)·.band-dark(딥틸)에 세 면을 더한다. */
.band-grid {
  position: relative;
  padding: var(--space-5) 0;
  background-color: var(--color-page);
  background-image:
    linear-gradient(var(--bg-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid-line) 1px, transparent 1px);
  background-size: var(--bg-grid-size) var(--bg-grid-size);
}
/* 그리드를 가장자리로 갈수록 흐리게 — 패턴이 종이처럼 앉는다 */
.band-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, var(--color-page) 78%);
}
.band-grid > .container { position: relative; z-index: 1; }

.band-wash {
  padding: var(--space-5) 0;
  background:
    radial-gradient(ellipse at 15% 0%, var(--color-primary-soft) 0%, transparent 55%),
    var(--color-wash);
}

.band-navy {
  position: relative;
  padding: var(--space-5) 0;
  background: var(--grad-navy);
  overflow: hidden;
}
.band-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--bg-dot) 1px, transparent 1px);
  background-size: var(--bg-dot-size) var(--bg-dot-size);
  opacity: 0.5;
}
.band-navy > .container { position: relative; z-index: 1; }
.band-navy .eyebrow { color: var(--color-primary-on-dark); }
.band-navy h2, .band-navy h3 { color: var(--color-on-dark); }
.band-navy p, .band-navy li { color: var(--color-on-dark-soft); }
/* 다크 면 위에서는 grad-em(어두운 그라디언트 텍스트)을 쓸 수 없다 — 밝은 틸로 강조한다 */
.band-navy h2 em { font-style: normal; color: var(--color-primary-on-dark); }
.band-navy p b { color: var(--color-on-dark); }

/* ===== 가격 카드 ===== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: stretch;   /* 카드 3장 높이를 맞춘다 */
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.price-card.featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-2), var(--glow-primary);
}
.price-tag {
  position: absolute;
  top: calc(-1 * var(--space-1) - 6px);
  left: var(--space-3);
  background: var(--grad-brand-strong);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.price-name { font-size: var(--fs-h3); font-weight: 700; }
.price-for { margin-top: 0.35rem; font-size: var(--fs-small); color: var(--color-ink-soft); }
.price-amount {
  margin-top: var(--space-2);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.price-num { font-size: 2.1rem; font-weight: 800; letter-spacing: var(--ls-tight); color: var(--color-primary-strong); }
.price-unit { font-size: var(--fs-small); color: var(--color-ink-soft); font-weight: 600; }
.price-vat { margin-top: 0.3rem; font-size: var(--fs-small); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.price-total {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-line);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.price-total b { color: var(--color-ink); font-weight: 700; }
.price-list { margin-top: var(--space-2); display: grid; gap: 0.55rem; }
.price-list li { position: relative; padding-left: 1.35rem; font-size: var(--fs-small); }
.price-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--color-primary);
}
.price-num.is-text { font-size: 1.5rem; }
/* 카드 높이가 맞춰지므로 꼬리말은 아래로 밀어 바닥을 정렬한다 */
.price-foot {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}
.price-note {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  text-align: center;
}
/* 한 밴드 안에서 문단 블록을 이어 놓을 때의 간격 */
.head-gap { margin-top: var(--space-4); }

/* ===== 환산 계산 — 큰 결과 + 과정 ===== */
.calc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.calc-step {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius);
  padding: var(--space-2);
}
.calc-k { font-size: var(--fs-label); color: var(--color-on-dark-soft); font-weight: 600; }
.calc-v {
  margin-top: 0.35rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-on-dark);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
.calc-step.is-result { background: rgba(0, 183, 177, 0.16); border-color: var(--color-primary); }
.calc-step.is-result .calc-v { color: var(--color-primary-on-dark); }
.calc-basis {
  margin-top: var(--space-2);
  font-size: var(--fs-label);
  font-family: var(--font-mono);
  color: var(--color-on-dark-soft);
}

/* ===== 누적 비교 차트 — 그룹 세로 막대 (--h 는 데이터 바인딩) =====
   규격: 막대 ≤ --chart-bar(24px), 차트 폭 ≤ --chart-maxw, 맞닿는 막대는 2px 서피스 갭.
   넓은 화면에서 슬롯을 다 채우면 막대가 비대해져 읽기 어려워진다 — 남는 폭은 여백으로 둔다. */
.cum { margin-top: var(--space-3); max-width: var(--chart-maxw); }
.cum-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.cum-key { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: 600; }
.cum-key::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--color-line);
}
.cum-key.is-ad::before { background: var(--chart-2); }
.cum-key.is-us::before { background: var(--chart-1); }
.cum-plot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-3);
  align-items: end;
}
.cum-group { display: grid; gap: var(--space-1); }
.cum-bars {
  display: flex;
  justify-content: center;
  gap: var(--chart-gap);
  align-items: end;
  height: var(--chart-h);
}
.cum-bar {
  position: relative;
  flex: 0 1 var(--chart-bar);      /* 두께 상한 — 슬롯을 채우지 않는다 */
  max-width: var(--chart-bar);
  height: calc(var(--h, 0) * 100%);
  min-height: 6px;
  border-radius: 4px 4px 0 0;       /* 데이터 끝만 둥글게, 기준선 쪽은 각지게 */
  background: var(--color-line);
  transition: height var(--dur-3) var(--ease-out);
}
.cum-bar.is-ad { background: var(--chart-2); }
.cum-bar.is-us { background: var(--chart-1); }
.cum-bar span {
  position: absolute;
  top: -1.6em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-ink);
}
.cum-x {
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink-soft);
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-line);
}
.cum-note { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--color-ink-soft); }

/* ===== 옵션 표 ===== */
.opt-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.opt-table caption { text-align: left; font-size: var(--fs-small); color: var(--color-ink-soft); padding-bottom: var(--space-2); }
.opt-table th, .opt-table td { text-align: left; padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--color-line); }
.opt-table thead th { font-size: var(--fs-label); color: var(--color-ink-soft); font-weight: 700; letter-spacing: 0.03em; }
.opt-table tbody th { font-weight: 600; }
.opt-table tbody th a { border-bottom: 1px solid var(--color-line); }
.opt-table tbody th a:hover { color: var(--color-primary-strong); border-color: var(--color-primary); }
.opt-desc { font-size: var(--fs-small); color: var(--color-ink-soft); }
.opt-price { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ===== 약정 FAQ ===== */
.faq { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.faq-item h3 { font-size: 1.05rem; }
.faq-item p { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--color-ink-soft); }

/* ===== 맞지 않는 경우 — 정직 블록 ===== */
.notfit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.notfit li {
  border-left: var(--rule) solid var(--color-accent);
  background: var(--color-accent-soft);
  /* 다크 밴드 안에 있지만 이 카드만 배경이 밝다 — 밴드의 밝은 글자색을 되돌린다 */
  color: var(--color-ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-2);
  font-size: var(--fs-small);
}

@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; }
  .cum-plot { gap: var(--space-2); }
  .opt-table thead { display: none; }
  .opt-table tbody th, .opt-table tbody td { display: block; border: none; padding: 0.2rem 0; }
  .opt-table tbody tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); }
}

/* ===== 언어별 구성 분기 — 같은 사이트가 언어마다 다르게 구성됨을 보인다 ===== */
.langsplit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.langsplit-col {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.langsplit-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  font-weight: 700;
  font-size: var(--fs-small);
}
.langsplit-code {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-s);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}
.langsplit-col.is-alt .langsplit-code { background: var(--color-navy-soft); color: var(--color-navy); }
.langsplit-stack { counter-reset: ls; }
.langsplit-stack li {
  position: relative;
  counter-increment: ls;
  padding: 0.7rem var(--space-2) 0.7rem 2.6rem;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-small);
}
.langsplit-stack li:last-child { border-bottom: 0; }
.langsplit-stack li::before {
  content: counter(ls);
  position: absolute;
  left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-ink-soft);
}
/* 그 언어에만 있는 항목 — 구성이 갈린다는 증거. 대조 역할이므로 로즈를 쓴다 */
.langsplit-stack li.only {
  background: var(--color-accent-soft);
  box-shadow: inset var(--rule) 0 0 var(--color-accent);
}
.langsplit-stack li.only::after {
  content: "이 언어에만";
  float: right;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-accent-text);
}

/* ===== URL 구조 — 한 벌의 사이트가 언어별 주소로 갈린다 ===== */
.urlmap { margin-top: var(--space-3); display: grid; gap: 1px; background: var(--color-on-dark-line); border-radius: var(--radius); overflow: hidden; }
.urlmap-row {
  display: grid;
  grid-template-columns: minmax(7rem, 14rem) 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2);
  background: rgba(255, 255, 255, 0.04);
}
.urlmap-row code {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-primary-on-dark);
}
.urlmap-row span { font-size: var(--fs-small); color: var(--color-on-dark-soft); }
.urlmap-note { margin-top: var(--space-2); font-size: var(--fs-label); font-family: var(--font-mono); color: var(--color-on-dark-soft); }

@media (max-width: 900px) {
  .langsplit { grid-template-columns: 1fr; }
  .urlmap-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ===== 점유율 바 — 100% 가로 누적 (--w 는 데이터 바인딩) ===== */
.share { margin-top: var(--space-3); max-width: var(--chart-maxw-wide); }
/* 맞닿는 세그먼트는 보더가 아니라 2px 서피스 갭으로 가른다 (보더는 데이터가 아닌 잉크다) */
.share-bar {
  display: flex;
  gap: var(--chart-gap);
  height: 48px;
}
.share-seg {
  width: calc(var(--w) * 1%);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-ink-soft);
  background: var(--color-band);
  border-radius: 3px;
  overflow: hidden;
  white-space: nowrap;
}
.share-seg.is-r1 { background: var(--ramp-1); color: #fff; }
.share-seg.is-r2 { background: var(--ramp-2); color: #fff; }
.share-seg.is-r3 { background: var(--ramp-3); color: #fff; }
.share-seg.is-r4 { background: var(--ramp-4); }
/* 비어 있는 자리 = 이 페이지의 논지 */
.share-seg.is-open { background: var(--chart-1); color: #fff; }
.share-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
}
.share-key { display: flex; align-items: center; gap: 0.45rem; font-size: var(--fs-small); }
.share-key::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--color-band);
  border: 1px solid var(--color-line);
}
.share-key.is-r1::before { background: var(--ramp-1); border-color: var(--ramp-1); }
.share-key.is-r3::before { background: var(--ramp-3); border-color: var(--ramp-3); }
.share-key.is-open::before { background: var(--chart-1); border-color: var(--chart-1); }
.share-key b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ===== 환자 여정 — 단계마다 홈페이지가 하는 일 ===== */
.journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
  counter-reset: jn;
}
.journey-step { position: relative; counter-increment: jn; padding-top: var(--space-3); }
/* 단계를 잇는 선 */
.journey-step::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  right: calc(-1 * var(--space-3));
  height: 2px;
  background: var(--color-line);
}
.journey-step:last-child::before { right: 0; }
.journey-step::after {
  content: counter(jn);
  position: absolute;
  top: 0;
  left: 0;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-strong);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
}
.journey-when {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-primary-strong);
  letter-spacing: 0.02em;
}
.journey-what { margin-top: 0.4rem; font-size: 1.05rem; font-weight: 700; }
.journey-role { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--color-ink-soft); }

@media (max-width: 900px) {
  /* 비율이 이 컴포넌트의 요점이므로 좁은 화면에서도 가로를 유지하고, 라벨만 범례로 넘긴다 */
  .share-bar { height: 44px; }
  .share-seg span { display: none; }
  .journey { grid-template-columns: 1fr; gap: var(--space-4); }
  .journey-step::before { top: 0; bottom: calc(-1 * var(--space-4)); left: 13px; right: auto; width: 2px; height: auto; }
  .journey-step:last-child::before { display: none; }
}

/* ===== 넓은 화면 텍스트 레이아웃 (DESIGN C7, 2026-07-26) =====
   기본 .section-head 는 46em(736px)이라 1265px 컨테이너에서 우측 529px(42%)가 빈다.
   가독 폭은 지키면서 그 공백을 없애는 네 가지 패턴. */

/* A. 섹션 헤드 2단 — 좌: 눈썹+제목 / 우: 리드. 리드가 정확히 하나일 때만 쓴다 */
.section-head.split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  /* ⚠️ 행 정의가 핵심이다 (2026-08-15 원인 규명). 두 행이 모두 auto 면 두 행에 걸친(span)
     리드문의 초과 높이가 auto 행들에 "분배"되어 1행이 늘어난다 — 눈썹과 제목 사이가
     벌어지던 전 페이지 공통의 이상한 여백이 이것이었다. auto 1fr 로 두면 초과분이
     fr 행(아래)으로만 가서 눈썹-제목이 붙고, 남는 공간은 섹션 하단 여백에 흡수된다. */
  grid-template-rows: auto 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: start;
}
.section-head.split > .eyebrow { grid-column: 1; grid-row: 1; }
.section-head.split > h2 { grid-column: 1; grid-row: 2; align-self: start; }
.section-head.split > .lede {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  margin-top: 0;
  max-width: 34em;
}

/* B. 비주얼 + 해설 나란히 — 차트가 폭 상한을 갖게 되면서 우측에 자리가 생겼다 */
.figure-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
}
.figure-row > * { min-width: 0; }
.figure-row .cum, .figure-row .share { margin-top: 0; }
.figure-row .lede { font-size: 1.05rem; margin-top: 0; }
.figure-row .lede + .lede { margin-top: var(--space-2); }
.figure-row.on-dark .lede { color: var(--color-on-dark-soft); }
.figure-row.on-dark b { color: var(--color-on-dark); }

/* C. 후속 문단 2열 — 문단이 둘 이상일 때 나란히 놓아 폭을 쓴다 */
.prose-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}
.prose-cols .lede { margin-top: 0; font-size: 1.05rem; }
.prose-cols.on-dark .lede { color: var(--color-on-dark-soft); }
.prose-cols.on-dark b { color: var(--color-on-dark); }

/* D. 홀로 남는 마무리 문단 — 좌측 룰을 붙여 "의도된 여백"으로 읽히게 한다 */
.closing-note {
  margin-top: var(--space-4);
  max-width: 44em;
  padding-left: var(--space-3);
  border-left: var(--rule) solid var(--color-primary);
  font-size: 1.12rem;
  line-height: 1.65;
}
.closing-note.on-dark { color: var(--color-on-dark-soft); border-left-color: var(--color-primary-on-dark); }
.closing-note.on-dark b { color: var(--color-on-dark); }

@media (max-width: 900px) {
  .section-head.split { grid-template-columns: 1fr; }
  .section-head.split > .eyebrow,
  .section-head.split > h2,
  .section-head.split > .lede { grid-column: 1; grid-row: auto; }
  .section-head.split > .lede { margin-top: var(--space-2); }
  .figure-row { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ===== 히어로 2단 — 우측 요약 지표 (DESIGN C7) =====
   홈·제작 허브는 .hero-slide 로 우측에 이미지를 두지만, 서브 페이지는 이미지가 없어
   우측이 통째로 비었다. 즉답 블록의 핵심 수치를 카드로 세워 그 자리를 채운다. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-4);
  align-items: center;
}
/* 카드 3장을 세우면 템플릿처럼 읽힌다 — 상자·그림자를 걷고 헤어라인 스펙 시트로.
   라벨 좌 / 값 우, 값은 모노 tabular. 제품 사양표의 문법이라 의도된 편집으로 읽힌다. */
.hero-facts { border-top: 2px solid var(--color-ink); }
.hero-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-line);
}
.hero-fact .what { font-size: var(--fs-small); color: var(--color-ink-soft); }
.hero-fact b {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero-fact b .unit {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary-strong);
  margin-left: 0.25rem;
}

/* ===== 3분할 원가 구성 — share 바를 균등 분할로 재사용 ===== */
/* 3분할 바는 색을 램프 클래스(is-r2·is-r3)와 is-make 로 받는다 — is-third 는 배경을 정하지 않는다 */
.share-seg.is-make { background: var(--chart-1); color: #fff; }

/* ===== 직접 만들기 / 맡기기 비교표 ===== */
.vs-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.vs-table th, .vs-table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-line); vertical-align: top; }
/* 네이비 다크 밴드 위에 놓인다 — 모든 글자는 밝은 쪽으로 */
.vs-table th, .vs-table td { border-bottom-color: var(--color-on-dark-line); }
.vs-table thead th { font-size: var(--fs-label); letter-spacing: 0.03em; color: var(--color-primary-on-dark); font-weight: 700; }
.vs-table thead th:first-child { width: 22%; }
.vs-table tbody th { font-weight: 700; font-size: var(--fs-small); color: var(--color-on-dark); }
.vs-table td { font-size: var(--fs-small); color: var(--color-on-dark-soft); }
/* 맡기는 쪽 열만 살짝 띄운다 — 밝은 채움 대신 반투명 판 (다크 위에서 글자가 죽지 않게) */
.vs-table .vs-us { background: rgba(0, 183, 177, 0.14); color: var(--color-on-dark); }
.vs-table thead .vs-us { color: var(--color-primary-on-dark); }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--space-3); }
  .vs-table thead { display: none; }
  .vs-table tbody tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); }
  .vs-table tbody th, .vs-table tbody td { display: block; border: none; padding: 0.2rem 0; }
  .vs-table tbody td::before { content: attr(data-label) " — "; font-weight: 700; color: var(--color-primary-on-dark); }
  .vs-table .vs-us { background: none; }
}

/* ===== 출처 줄 — 공식 자료 링크 + 확인일 (C5 인용 근거 병기) ===== */
.srcs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-label);
}
.srcs a {
  font-weight: 700;
  color: var(--color-primary-strong);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out);
}
.srcs a:hover { border-bottom-color: var(--color-primary); }
.srcs span { color: var(--color-ink-soft); }
.srcs.on-dark { border-top-color: var(--color-on-dark-line); }
.srcs.on-dark a { color: var(--color-primary-on-dark); }
.srcs.on-dark span { color: var(--color-on-dark-soft); }

/* ===== 자가 점검 체크리스트 — [data-checklist] (site.js) =====
   포인트 색은 페이지가 .hue-* 로 지정한다 (섹션마다 하나 — DESIGN A) */
.checklist-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: var(--space-3);
  align-items: start;
  margin-top: var(--space-3);
}
.checklist-score {
  position: sticky;
  top: 96px;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.checklist-score .what {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}
.checklist-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--hue-text, var(--color-primary-strong));
}
.checklist-of { font-size: var(--fs-small); color: var(--color-ink-soft); margin-left: 0.35em; }
.checklist-gauge { height: 6px; margin-top: var(--space-1); border-radius: 999px; background: var(--color-band); overflow: hidden; }
/* --p 는 이 요소에 직접 건다 (.tab-gauge 와 같은 방식) — 부모에 걸고 상속시키지 않는다 */
.checklist-gauge i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  border-radius: 999px;
  background: var(--hue, var(--color-primary));
  transition: width var(--dur-2) var(--ease-out);
}
.checklist-verdict { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-ink-soft); }
.checklist { display: grid; gap: var(--space-1); }
.checklist button {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  text-align: left;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  font-size: var(--fs-small);
  color: var(--color-ink);
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.checklist button i {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  font-size: var(--fs-label);
  font-style: normal;
  color: transparent;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.checklist button b { color: var(--hue-text, var(--color-primary-strong)); }
.checklist button:hover { border-color: var(--hue, var(--color-primary)); transform: translateX(3px); }
.checklist button:active { transform: scale(0.99); }
/* 선택 상태 — aria-pressed 와 .is-on 을 함께 건다 (스크린리더용 상태 + 스타일 훅) */
.checklist button.is-on,
.checklist button[aria-pressed="true"] {
  background: var(--hue-soft, var(--color-primary-soft));
  border-color: var(--hue, var(--color-primary));
}
.checklist button.is-on i,
.checklist button[aria-pressed="true"] i {
  background: var(--hue, var(--color-primary));
  border-color: var(--hue, var(--color-primary));
  color: #fff;
}

/* ===== 실제 구축 화면 캡처 그리드 — 사례 증거 (PLAN §12: 기관명은 캡처 그대로만) ===== */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.shots figure {
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.shots figure:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  box-shadow: var(--glow-primary);
}
.shots img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--color-line);
}
.shots figcaption { padding: var(--space-2); }
.shots figcaption b { display: block; font-size: 1.02rem; }
.shots figcaption span { display: block; margin-top: 0.25rem; font-size: var(--fs-small); color: var(--color-ink-soft); }

/* ===== 헤더 메가메뉴 v2 [개정 2026-08-15] — 허브 진입 카드 + 그룹 열 =====
   개정 이유: 주 메뉴에 hover 하면 패널이 열려서 정작 주 메뉴 자체를 클릭할 생각을
   못한다 — 패널 안에 허브로 가는 진입 카드(.nav-feature)를 넣는다.
   그룹 라벨(클릭 안 됨)과 항목(클릭됨)은 모노 소문자·색점·헤어라인으로 구분한다. */
.nav-menu.is-mega {
  min-width: 660px;
  max-width: calc(100vw - 2 * var(--space-3));   /* 좁은 데스크톱에서 화면 밖으로 나가지 않게 */
  display: grid;
  grid-template-columns: 228px 1fr;
  gap: var(--space-2);
  padding: var(--space-2);
}
.nav-side { display: flex; flex-direction: column; gap: var(--space-1); }
/* 허브 진입 카드 — 설계도 그리드 + 틸 래디얼 워시 */
.main-nav .nav-menu a.nav-feature {
  --feature-bg:
    radial-gradient(120% 90% at 88% 0%, rgba(0, 183, 177, 0.12), transparent 62%),
    repeating-linear-gradient(0deg, var(--bg-grid-line) 0 1px, transparent 1px var(--bg-grid-size)),
    repeating-linear-gradient(90deg, var(--bg-grid-line) 0 1px, transparent 1px var(--bg-grid-size));
  display: block;
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--feature-bg) var(--color-wash);
  white-space: normal;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.main-nav .nav-menu a.nav-feature:hover {
  background: var(--feature-bg) var(--color-wash);
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  box-shadow: var(--glow-primary);
}
.nav-feature-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary-strong);
}
.nav-feature b {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.02rem;
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
}
.nav-feature-desc {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--fs-label);
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.nav-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-primary-strong);
}
.nav-feature-cta .arrow { transition: transform var(--dur-1) var(--ease-out); }
.nav-feature:hover .nav-feature-cta .arrow { transform: translateX(4px); }
/* 사이드 보조 링크 (사례 보기 등) */
.main-nav .nav-menu .nav-side-link {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-primary-strong);
}
.main-nav .nav-menu .nav-side-link .arrow { display: inline-block; margin-left: 0.35em; transition: transform var(--dur-1) var(--ease-out); }
.main-nav .nav-menu .nav-side-link:hover .arrow { transform: translateX(3px); }

/* 그룹 열 — 그룹마다 확장 스펙트럼의 색점 하나씩 */
.nav-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(206px, 1fr));
  gap: 0 var(--space-2);
  align-content: start;
}
.nav-cols .nav-group { padding-bottom: var(--space-1); }
.nav-cols .nav-group:nth-child(1) { --g-hue: var(--color-primary); --gi: 1; }
.nav-cols .nav-group:nth-child(2) { --g-hue: var(--color-alt2); --gi: 2; }
.nav-cols .nav-group:nth-child(3) { --g-hue: var(--color-alt3); --gi: 3; }
.nav-cols .nav-group:nth-child(4) { --g-hue: var(--color-alt); --gi: 4; }
.nav-side > :nth-child(2) { --gi: 5; }
.nav-group-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45rem 0.75rem 0.35rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-ink-soft);
  cursor: default;
}
.nav-group-label::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-hue, var(--color-primary));
}
/* 항목 — 왼쪽 색 바가 자라며 클릭됨을 말한다 (그룹 라벨과의 구분) */
.main-nav .nav-cols a {
  position: relative;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  font-size: var(--fs-small);
}
.main-nav .nav-cols a::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  transform: translateY(-50%);
  background: var(--g-hue, var(--color-primary));
  transition: height var(--dur-1) var(--ease-out);
}
.main-nav .nav-cols a:hover::before { height: 55%; }
/* 미발행 항목 — 목록에는 두되 링크를 걸지 않는다 (정직 라벨링) */
.nav-menu .nav-soon {
  display: block;
  padding: 0.55rem 0.75rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink-soft);
  cursor: default;
}
.nav-menu .nav-soon i {
  font-style: normal;
  margin-left: 0.5em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--color-band);
  font-size: var(--fs-label);
  font-weight: 700;
}
/* 단순 목록 메뉴(마케팅)의 허브 진입 줄 — 목록 위에 굵게 */
.main-nav .nav-menu .nav-hub {
  margin-bottom: 0.3rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  font-weight: 700;
  color: var(--color-primary-strong);
}
.main-nav .nav-menu .nav-hub:hover { background: var(--color-primary-soft); }
.main-nav .nav-menu .nav-hub .arrow { display: inline-block; margin-left: 0.35em; transition: transform var(--dur-1) var(--ease-out); }
.main-nav .nav-menu .nav-hub:hover .arrow { transform: translateX(3px); }

/* 메뉴 v2 — 모바일 인라인 모드 중화. 반드시 위 메가 v2 규칙들보다 뒤에 있어야 한다
   (같은 특이도는 소스 순서가 이긴다 — 앞쪽 640px 블록에 넣었다가 무효였던 실수를 잡음) */
@media (max-width: 640px) {
  .nav-menu::before { content: none; }
  .nav-menu .nav-group,
  .nav-menu .nav-side > * { opacity: 1; transform: none; transition: none; }
  .nav-menu.is-mega { min-width: 0; grid-template-columns: 1fr; gap: 0; padding: 0 0 0.25rem 1rem; }
  .nav-cols { grid-template-columns: 1fr; gap: 0; }
  .nav-side { gap: 0; }
  .nav-item:last-child .nav-menu.is-mega { transform: none; }
  /* 허브 카드는 모바일에서 통째로 숨긴다 — 인라인 모드에서는 상위 메뉴 링크가
     바로 탭 가능해서 카드가 같은 링크의 중복이 된다 */
  .main-nav .nav-menu a.nav-feature { display: none; }
  .main-nav .nav-menu .nav-side-link { padding: 0.45rem 0.5rem; }
  .main-nav .nav-cols a { padding: 0.45rem 0.5rem; }
  .main-nav .nav-cols a::before { content: none; }
  .nav-group-label { border-bottom: 0; padding: 0.5rem 0.5rem 0.1rem; }
  .main-nav .nav-menu .nav-hub { margin-bottom: 0.2rem; padding-bottom: 0.5rem; }
}

@media (max-width: 900px) {
  .checklist-wrap { grid-template-columns: 1fr; }
  .checklist-score { position: static; }
}

/* =====================================================================
   홈 리뉴얼 [2026-08-15] — 이미지 적극 사용 · 포인트 컬러 확장 · 디테일 효과
   원칙: 사진은 그대로 얹지 않는다. 스크림·그레인·프레임 셋을 거쳐 브랜드 톤으로 당긴다.
   ===================================================================== */

/* --- 미디어 프레임: 사진 위 처리의 공용 부품 --- */
.media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-band);
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out);
}
/* 틸 스크림 — 사진의 색온도를 브랜드 쪽으로 당긴다 (mix-blend 로 명암은 보존) */
.media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-teal);
  mix-blend-mode: multiply;
  opacity: 0.55;
  transition: opacity var(--dur-3) var(--ease-out);
  pointer-events: none;
}
/* 미세 그레인 — 매끈한 사진이 "스톡 이미지"로 읽히는 것을 줄인다 */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--grain);
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.media.is-plain::before { opacity: 0.22; }
.media:hover img { transform: scale(1.04); }
.media:hover::before { opacity: 0.38; }

/* 포인트 컬러 프레임 — 이미지 뒤에서 어긋나게 깔리는 색면 */
.media-framed { position: relative; }
.media-framed::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto -14px -14px auto;
  width: 62%;
  height: 62%;
  border-radius: var(--radius);
  background: var(--frame-hue, var(--color-primary-soft));
  transition: transform var(--dur-3) var(--ease-out);
}
.media-framed .media { position: relative; z-index: 1; }
.media-framed:hover::before { transform: translate(4px, 4px); }
/* 프레임 색 — 인라인 스타일 대신 클래스로 (CLAUDE.md: 템플릿에 색·인라인 스타일 금지) */
.frame-teal  { --frame-hue: var(--color-primary-soft); }
.frame-green { --frame-hue: var(--color-alt3-soft); }
.frame-plum  { --frame-hue: var(--color-alt4-soft); }
.frame-gold  { --frame-hue: var(--color-alt-soft); }

/* --- 히어로 비주얼 --- */
.hero-visual .media { aspect-ratio: 4 / 3; box-shadow: var(--shadow-3); }
.hero-visual .media img { height: 100%; }
/* 사진 위 캡션 — 이미지가 무엇을 말하는지 한 줄로 (장식 사진이 되지 않게) */
.media-note {
  position: absolute;
  z-index: 3;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 0.55em 0.9em;
  border-radius: var(--radius-s);
  /* 알파 0.78 — 사진의 가장 밝은 부분이 뒤에 와도 흰 글자 7.4:1, 틸 강조 4.7:1 로 AA 통과.
     0.62 로는 틸 강조가 2.8:1 까지 떨어진다 (2026-08-15 계산) */
  background: rgba(14, 42, 49, 0.78);
  backdrop-filter: blur(6px);
  color: var(--color-on-dark);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.media-note b { color: var(--color-primary-on-dark); font-weight: 700; }

/* 히어로 배경 — 포인트 컬러 스포트라이트 두 점 (기존 틸 래디얼을 확장) */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(26% 34% at 16% 22%, color-mix(in srgb, var(--color-alt3) 9%, transparent), transparent 72%),
    radial-gradient(22% 30% at 72% 78%, color-mix(in srgb, var(--color-alt4) 8%, transparent), transparent 72%);
  pointer-events: none;
}

/* --- 사례 슬라이드의 실제 캡처 [2026-08-15] ---
   목업 대신 운영 중인 사이트의 첫 화면을 브라우저 크롬 안에 넣는다. 가장 강한 증거다. */
.mock-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;   /* 첫 화면이므로 위쪽을 보인다 */
  transition: object-position 1.2s var(--ease-out);
}
.case-slide:hover .mock-shot { object-position: 50% 100%; }

/* --- 파이프라인 도식 (히어로 2번 슬라이드) ---
   ⚠️ 수치 차트가 아니다. 유입량 실측이 없으므로 숫자를 만들지 않는다 (DESIGN C3 가짜 데이터 금지).
   보여주는 것은 양이 아니라 **구조** — 여러 입구가 한 곳으로 모이고 거기서 행동으로 갈린다. */
.flow {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
}
.flow-stage { display: grid; gap: 0.5rem; }
.flow-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--color-ink-soft);
}
/* 1단 — 흩어진 입구들 */
.flow-ins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.flow-in {
  padding: 0.7em 0.4em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-band);
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: center;
  color: var(--color-ink-soft);
}
/* 병원이 통제할 수 있는 출처 — 나머지 회색 칸과 구분되는 유일한 칸 (ask-ai 통제권 도식) */
.flow-in.is-own {
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-weight: 700;
}
/* 모이는 화살표 — 네 갈래가 가운데로 */
.flow-merge {
  height: 30px;
  background:
    linear-gradient(var(--color-line), var(--color-line)) 12.5% 0 / 1px 15px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) 37.5% 0 / 1px 15px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) 62.5% 0 / 1px 15px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) 87.5% 0 / 1px 15px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) 50% 15px / 75% 1px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) 50% 15px / 1px 15px no-repeat;
}
/* 2단 — 도착지 하나 (이야기의 주어라 유일하게 색을 입는다) */
.flow-hub {
  position: relative;
  padding: 1em;
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-radius: var(--radius-s);
  background: var(--color-primary-soft);
  text-align: center;
}
.flow-hub b { display: block; font-size: 1.05rem; color: var(--color-primary-hover); }
.flow-hub span { font-size: var(--fs-label); color: var(--color-ink-soft); }
.flow-hub::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 1px;
  height: 16px;
  background: var(--color-primary);
}
/* 3단 — 갈라지는 행동 (.flow-dest 는 갈래 변주의 목적지 — 같은 시각 언어) */
.flow-outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 16px; }
.flow-out,
.flow-dest {
  padding: 0.7em 0.4em;
  border: 1px solid color-mix(in srgb, var(--color-alt3) 30%, transparent);
  border-radius: var(--radius-s);
  background: var(--color-alt3-soft);
  font-size: var(--fs-label);
  font-weight: 700;
  text-align: center;
  color: var(--color-alt3-text);
}
.flow-note {
  margin-top: var(--space-1);
  font-size: var(--fs-label);
  color: var(--color-ink-soft);
  text-align: center;
}
.band-dark .flow-note { color: var(--color-on-dark-soft); }

/* 갈래 변주 (제작 허브) — 홈의 도식이 "모임"이라면 이쪽은 "갈라짐".
   도착한 방문자가 유형별로 다른 예약 동선을 탄다 (PLAN §3 예약 구현 사실관계 그대로). */
.flow-routes { max-width: 760px; margin: var(--space-4) auto 0; }
.flow-routes .flow-hub::after { display: none; }   /* 연결선은 .flow-split 이 그린다 */
.flow-split {
  height: 30px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 50% 0 / 1px 15px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) 50% 15px / calc(66.67% + 1px) 1px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) 16.67% 15px / 1px 15px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) 50% 15px / 1px 15px no-repeat,
    linear-gradient(var(--color-line), var(--color-line)) 83.33% 15px / 1px 15px no-repeat;
}
.flow-routes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.flow-route { display: grid; gap: 0.45rem; align-content: start; text-align: center; }
.flow-who { font-size: var(--fs-label); color: var(--color-ink-soft); }

/* 라이브 변주 (.is-live) — 4.8초 사이클로 유입 → 도착 → 전환이 순서대로 반응한다.
   장식이 아니라 서사다: "여러 입구에서 들어와(0~1.2s) 한 곳에 모이고(1.2~2.2s)
   행동으로 갈라진다(2.4~3.5s)". 모든 키프레임은 100%에서 중립 — reduced-motion 이
   강제 종료해도 흔적이 남지 않는다. */
.is-live .flow-in { animation: flow-in-ping 4.8s var(--ease-out) infinite; }
.is-live .flow-ins > :nth-child(2) { animation-delay: 0.25s; }
.is-live .flow-ins > :nth-child(3) { animation-delay: 0.5s; }
.is-live .flow-ins > :nth-child(4) { animation-delay: 0.75s; }
@keyframes flow-in-ping {
  0%, 9%, 100% { border-color: var(--color-line); background: var(--color-band); color: var(--color-ink-soft); }
  4% { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-hover); }
}
.is-live .flow-merge { position: relative; }
.is-live .flow-merge::after {
  content: "";
  position: absolute;
  left: calc(50% - 2.5px);
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  animation: flow-drop 4.8s linear infinite;
}
@keyframes flow-drop {
  0%, 24% { transform: translateY(0); opacity: 0; }
  27% { opacity: 1; }
  37% { transform: translateY(25px); opacity: 1; }
  40%, 100% { transform: translateY(25px); opacity: 0; }
}
.is-live .flow-hub { animation: flow-hub-glow 4.8s var(--ease-out) infinite; }
@keyframes flow-hub-glow {
  0%, 36%, 60%, 100% { box-shadow: 0 0 0 0 rgba(0, 183, 177, 0); }
  44% { box-shadow: 0 0 0 8px rgba(0, 183, 177, 0.16); }
}
.is-live .flow-out { animation: flow-out-ping 4.8s var(--ease-out) infinite; }
.is-live .flow-outs > :nth-child(2) { animation-delay: 0.35s; }
.is-live .flow-outs > :nth-child(3) { animation-delay: 0.7s; }
@keyframes flow-out-ping {
  0%, 52%, 68%, 100% { box-shadow: 0 0 0 0 rgba(57, 134, 76, 0); }
  58% { box-shadow: 0 0 0 6px rgba(57, 134, 76, 0.2); }
}

/* --- 허브 문서 링크 부품 (2026-08-15 허브 중간 섹션 재설계) ---
   문제: 카드 1~2장이 3열 그리드에 떠서 균형이 무너지고, 흰 카드 나열만 반복됐다.
   해법: 문서 수에 맞는 부품을 따로 둔다 — 1편이면 .doc-row(전폭 슬림 행),
   2편이면 .svc-grid.is-2 + a.svc-card(대형 카드 2장), 여러 편이 어두운 밴드에 서면
   a.approach-item(+.approach-go) 링크 변주. */
.doc-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 8px);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
/* 4단계 뒤에 바로 서는 경우 — .steps 도 .doc-row 도 margin 이 없어 맞붙는다.
   그리드 내부 간격(space-3)보다 확실히 커야 "다음 이야기"로 읽힌다.
   figure-row 안에서 첫 자식으로 서는 .doc-row 는 건드리지 않도록 인접 선택자로 좁힌다. */
.steps + .doc-row { margin-top: var(--space-4); }
.doc-row::before {          /* 왼쪽 세로 색 바 — 클릭되는 문서임을 말한다 */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--hue, var(--color-primary));
}
.doc-row:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--hue, var(--color-primary)) 40%, transparent);
  box-shadow: var(--hue-glow, var(--glow-primary));
}
.doc-row-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hue-text, var(--color-primary-strong));
}
.doc-row h3 { margin-top: 0.3rem; font-size: 1.15rem; letter-spacing: var(--ls-tight); color: var(--color-ink); }
.doc-row p { margin-top: 0.35rem; font-size: var(--fs-small); color: var(--color-ink-soft); }
.doc-row .doc-go { flex: 0 0 auto; }
/* 문서 카드(a.svc-card)의 하단 링크 줄 */
.doc-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--hue-text, var(--color-primary-strong));
}
.doc-go .arrow { transition: transform var(--dur-1) var(--ease-out); }
a.svc-card:hover .doc-go .arrow,
.doc-row:hover .doc-go .arrow { transform: translateX(4px); }
a.svc-card h3 { color: var(--color-ink); }
.svc-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
/* 어두운 밴드의 문서 링크 — approach 문법에 화살표 줄만 더한다 */
a.approach-item { display: block; }
.approach-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.7rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-primary-on-dark);
}
.approach-go .arrow { transition: transform var(--dur-1) var(--ease-out); }
a.approach-item:hover .approach-go .arrow { transform: translateX(4px); }
.approach-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .svc-grid.is-2 { grid-template-columns: 1fr; }
  .approach-grid.is-3 { grid-template-columns: 1fr; }
  .doc-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* --- 허브 히어로 2단 — 필러 허브의 도입부에 도식을 나란히 (2026-08-15) --- */
.hub-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-4);
  align-items: center;
}
.hub-hero > * { min-width: 0; }
@media (max-width: 900px) {
  .hub-hero { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* --- 광고 vs 자산 도식 (마케팅 허브) ---
   서사가 애니메이션 구조 그 자체다: 광고 블록은 켜졌다 꺼졌다를 반복하고(무한),
   자산 다섯 층은 한 번 쌓인 뒤 그대로 남는다(1회). 이 대비가 페이지의 논지다.
   ⚠️ 수치 없음 — 유입·비용 실측이 아니라 구조의 대비만 그린다. */
.avsa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
}
.avsa-col { display: flex; flex-direction: column; gap: 0.5rem; }
.avsa-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--color-ink-soft);
}
.avsa-ad {
  padding: 1em 0.5em;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: var(--radius-s);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: center;
  animation: avsa-blink 6s var(--ease-out) infinite;
}
@keyframes avsa-blink {
  0%, 22%, 100% { opacity: 1; }
  30%, 44% { opacity: 0.15; }
  52%, 72% { opacity: 1; }
  80%, 92% { opacity: 0.15; }
}
.avsa-ad-note, .avsa-asset-note { font-size: var(--fs-label); color: var(--color-ink-soft); }
/* 자산 더미 — DOM 순서 첫 항목(홈페이지)이 맨 아래 기반이 되도록 뒤집는다 */
.avsa-stack { display: flex; flex-direction: column-reverse; gap: 0.35rem; }
.avsa-asset {
  padding: 0.55em 0.5em;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--radius-s);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: center;
  animation: avsa-rise var(--dur-3) var(--ease-out) both;  /* 1회 — 쌓인 뒤 그대로 남는다 */
}
.avsa-stack > :nth-child(1) { animation-delay: 0.2s; }
.avsa-stack > :nth-child(2) { animation-delay: 0.5s; }
.avsa-stack > :nth-child(3) { animation-delay: 0.8s; }
.avsa-stack > :nth-child(4) { animation-delay: 1.1s; }
.avsa-stack > :nth-child(5) { animation-delay: 1.4s; }
@keyframes avsa-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 바이브 코딩 3박자 순환 도식 (바이브 코딩 허브) ---
   말하기 → AI가 만들기 → 화면으로 확인, 그리고 되돌아가는 점선 —
   "코드 대신 말로"의 정의를 도식 하나로. 하이라이트가 4.5초 주기로 세 칸을 돈다. */
.loop3 {
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
}
.loop3-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0.4rem;
  align-items: stretch;
}
.loop3-step {
  display: grid;
  gap: 0.2rem;
  align-content: center;
  padding: 0.8em 0.4em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-band);
  text-align: center;
  animation: loop3-ping 4.5s var(--ease-out) infinite;
}
.loop3-row > :nth-child(3) { animation-delay: 1.5s; }
.loop3-row > :nth-child(5) { animation-delay: 3s; }
@keyframes loop3-ping {
  0%, 24%, 100% { border-color: var(--color-line); background: var(--color-band); }
  8%, 16% { border-color: var(--color-primary); background: var(--color-primary-soft); }
}
.loop3-step b { font-size: var(--fs-small); color: var(--color-ink); }
.loop3-step span { font-size: var(--fs-label); color: var(--color-ink-soft); }
.loop3-arrow {
  align-self: center;
  font-family: var(--font-mono);
  color: var(--color-primary-strong);
  font-weight: 700;
}
/* 되돌아가는 점선 — 세 번째 칸에서 첫 칸으로 */
.loop3-return {
  position: relative;
  height: 30px;
  margin: 0.35rem 8% 0;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}
.loop3-return::before {           /* 왼쪽 끝의 위로 향하는 화살촉 */
  content: "";
  position: absolute;
  left: -4.5px;
  top: -2px;
  border: 4px solid transparent;
  border-bottom: 6px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.loop3-return span {
  position: absolute;
  left: 50%;
  bottom: -0.7em;
  transform: translateX(-50%);
  padding: 0 0.7em;
  background: var(--color-bg);
  font-size: var(--fs-label);
  color: var(--color-ink-soft);
  white-space: nowrap;
}

/* --- 서비스 카드에 이미지 --- */
.svc-card.has-media { padding-top: 0; overflow: hidden; }
.svc-media {
  position: relative;
  margin: 0 calc(var(--space-3) * -1) var(--space-3);
  height: 168px;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-band);
}
.svc-card.has-media .svc-media { margin-top: 0; }
.svc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
/* 카드마다 자기 hue 로 물든다 — 포인트 컬러가 사진까지 이어지게 */
.svc-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* hue 는 32% 까지만 — 카드 셋의 색이 균등하게 강해지면 폐기한 비비드 3색으로 돌아간다 */
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--hue) 32%, transparent) 0%,
    color-mix(in srgb, var(--color-navy) 40%, transparent) 100%);
  mix-blend-mode: multiply;
  opacity: 0.72;
  transition: opacity var(--dur-3) var(--ease-out);
}
.svc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--grain);
  opacity: 0.14;
  mix-blend-mode: overlay;
}
/* 어두운 이미지(로고·다크 UI 캡처)에는 multiply 가 아무 일도 하지 않는다 — 검은 덩어리로 남는다.
   screen 으로 뒤집어 카드의 hue 가 아래에서 은은히 올라오게 한다 (2026-08-15) */
.svc-media.is-dark::before {
  mix-blend-mode: screen;
  opacity: 0.3;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--hue) 55%, transparent) 0%,
    transparent 62%);
}
.svc-card:hover .svc-media.is-dark::before { opacity: 0.46; }
.svc-media.is-dark img { transform: scale(1.02); }        /* 로고 여백이 넓어 살짝 당겨 준다 */
.svc-card:hover .svc-media.is-dark img { transform: scale(1.06); }
.svc-card:hover .svc-media img { transform: scale(1.05); }
.svc-card:hover .svc-media::before { opacity: 0.5; }
/* 카드 안에서 아이콘을 사진 위로 띄운다 */
.svc-card.has-media .svc-top {
  position: relative;
  z-index: 3;
  margin-top: -46px;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}
.svc-card.has-media .svc-icon {
  background: var(--color-bg);
  box-shadow: var(--shadow-2);
}
.svc-card.has-media .svc-num { box-shadow: var(--shadow-2); }   /* 번호 원판도 사진 위에 뜬다 */
.svc-card.has-media > :not(.svc-media):not(.svc-top) { padding: 0 var(--space-3); }
.svc-card.has-media > :last-child { padding-bottom: var(--space-3); }

/* --- 사례 다크 밴드에 사진 층 --- */
.band-dark.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/cases-consult.jpg");
  background-size: cover;
  background-position: 50% 32%;
  opacity: 0.14;
  filter: grayscale(0.3);
}
.band-dark.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(48% 60% at 84% 10%, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(14, 42, 49, 0.55) 0%, rgba(14, 42, 49, 0.9) 78%);
  pointer-events: none;
}
.band-dark.has-photo > .container,
.band-dark.has-photo > .case-modal { position: relative; z-index: 1; }
/* 밴드별 사진 변형 — 기본은 사례 밴드(cases-consult), 아래는 페이지별 지정 */
.band-dark.has-photo.photo-way::before {
  background-image: url("../img/band-way.jpg");
  background-position: 50% 45%;
}

/* --- 포인트 컬러 디테일 --- */
/* 눈썹 앞 색점 — 섹션마다 그 섹션의 색을 한 점으로 예고한다 */
.eyebrow.dotted::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.6em;
  border-radius: 50%;
  background: var(--dot-hue, var(--color-primary));
  vertical-align: 0.08em;
}
.dot-green { --dot-hue: var(--color-alt3); }
.dot-plum  { --dot-hue: var(--color-alt4); }
.dot-gold  { --dot-hue: var(--color-alt); }
.on-dark .eyebrow.dotted::before,
.band-dark .eyebrow.dotted::before { background: var(--color-primary-on-dark); }
/* 통계 숫자 밑 색 룰 — 셋을 각각 다른 계열로 (다크 밴드용 on-dark 슬롯) */
.stat.ruled { position: relative; padding-top: var(--space-2); }
.stat.ruled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: var(--rule);
  border-radius: 2px;
  background: var(--stat-hue, var(--color-primary-on-dark));
}
.stat.rule-green { --stat-hue: var(--color-alt3-on-dark); }
.stat.rule-plum  { --stat-hue: var(--color-alt4-on-dark); }
/* 배너 — 틸 그라디언트 위에 옅은 그레인과 광택 */
.banner { position: relative; overflow: hidden; }
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.banner::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -10%;
  width: 46%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}
.banner .container { position: relative; z-index: 1; }

/* 상담 이미지도 같은 프레임 문법으로 */
.contact-media { position: relative; }
.contact-media img { transition: transform var(--dur-3) var(--ease-out); }
.contact-media:hover img { transform: scale(1.03); }
.contact-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@media (max-width: 900px) {
  .svc-media { height: 150px; }
  .media-framed::before { display: none; }
}

/* ===== 교육 신청서 (academy/apply) [신설 2026-08-15] =====
   상담 폼(.contact-form-wrap)은 자유 서술 3칸이라 카드 하나로 충분했지만, 신청서는
   "고르는 것"(기수·인원)과 "적는 것"(연락처)이 섞인다. 고르는 것은 라디오 카드로
   눈에 보이게 두고, 우측에 고른 결과를 되비추는 요약을 세워 제출 직전에 확인하게 한다.
   .field·.btn-submit·.form-success·.form-error 는 상담 폼의 것을 그대로 쓴다. */
.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-4);
}
.fset { border: none; padding: 0; margin: 0 0 var(--space-4); }
.fset legend {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  padding: 0 0 var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-ink);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}
.fset-num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-primary-strong);
}
.fset-note { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-ink-soft); }

/* 기수 선택 — 라디오 카드 */
.pick-list { display: grid; gap: var(--space-2); }
.pick { position: relative; display: block; cursor: pointer; }
.pick input {
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--color-primary-strong);
}
.pick-body {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-2) 3rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.pick:hover .pick-body { border-color: var(--color-primary); }
.pick input:focus-visible + .pick-body { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pick:active .pick-body { transform: scale(0.99); }
.pick:has(input:checked) .pick-body {
  border-color: var(--color-primary-strong);
  box-shadow: inset var(--rule) 0 0 var(--color-primary), var(--shadow-1);
}
.pick-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pick-head b { font-size: 1.05rem; }
.pick-tag {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-alt3-text);
  background: var(--color-alt3-soft);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.pick-dates {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.pick-time::before { content: " · "; }
.pick-note { display: block; margin-top: 0.3rem; font-size: var(--fs-small); color: var(--color-ink-soft); }

/* 인원 — 세그먼티드 */
.seg { display: inline-flex; border: 1px solid var(--color-line); border-radius: var(--radius-s); overflow: hidden; }
.seg-item { position: relative; }
.seg-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-item span {
  display: block;
  padding: 0.65rem 1.5rem;
  border-right: 1px solid var(--color-line);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.seg-item:last-child span { border-right: none; }
.seg-item span:hover { background: var(--color-band); }
.seg-item input:checked + span { background: var(--color-primary-strong); color: #fff; }
.seg-item input:disabled + span { opacity: 0.4; cursor: not-allowed; background: var(--color-band); }
.seg-item input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* 확인 체크 */
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-small);
  cursor: pointer;
}
.consent input { width: 18px; height: 18px; margin-top: 0.15rem; accent-color: var(--color-primary-strong); }
.consent span { color: var(--color-ink-soft); }
.consent b { color: var(--color-ink); }
.consent.invalid { color: var(--color-error); }
.consent.invalid b, .consent.invalid span { color: var(--color-error); }
.consent.shake { animation: shake var(--dur-2) var(--ease-out); }

/* 우측 요약 — 고른 것을 되비춘다 */
.apply-side { position: sticky; top: 92px; }
.apply-summary {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-top: var(--rule) solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: var(--space-3);
}
.sum-list { margin: var(--space-2) 0 0; }
.sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-line);
}
.sum-row dt { font-size: var(--fs-label); color: var(--color-ink-soft); white-space: nowrap; }
.sum-row dd { margin: 0; font-size: var(--fs-small); font-weight: 600; text-align: right; }
.sum-total { padding: var(--space-3) 0 var(--space-2); }
.sum-total .what { display: block; font-size: var(--fs-label); color: var(--color-ink-soft); }
.sum-total b {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.sum-total b .unit { font-family: var(--font-sans); font-size: 0.8rem; color: var(--color-primary-strong); margin-left: 0.25rem; }
.sum-vat { display: block; margin-top: 0.3rem; font-size: var(--fs-label); color: var(--color-ink-soft); }
.apply-summary .btn-submit { width: 100%; min-width: 0; }
.sum-note { margin-top: var(--space-2); font-size: var(--fs-label); color: var(--color-ink-soft); }
.apply-success { border-top: 1px solid var(--color-line); margin-top: var(--space-4); }
/* 접수 완료 뒤 건네는 확인 링크 — 문자에 붙여 보낼 수 있도록 주소를 그대로 보인다 */
.apply-link { margin-top: var(--space-3); }
.apply-link a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-primary-hover);
  border-bottom: 1px solid var(--color-line);
  word-break: break-all;
}
.apply-link a:hover { border-color: var(--color-primary); }

/* 신청 확인 화면 (/r/<token>) */
.confirm-wrap { max-width: 620px; }
.state-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-alt-text);
  background: var(--color-alt-soft);
}
.state-pill.is-done { color: var(--color-alt3-text); background: var(--color-alt3-soft); }
.state-pill.is-off { color: var(--color-ink-soft); background: var(--color-band); }

/* 마감된 기수 — 고를 수 없음을 카드 자체가 말한다 */
.pick.is-closed { cursor: not-allowed; }
.pick.is-closed .pick-body { background: var(--color-band); opacity: 0.72; }
.pick.is-closed:hover .pick-body { border-color: var(--color-line); }
.pick-tag.is-off { color: var(--color-ink-soft); background: var(--color-line); }
.pick-seats { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .apply-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .apply-side { position: static; }
}
@media (max-width: 640px) {
  /* 좁은 화면에서 날짜 줄이 "오후 2시~5시" 중간에서 끊긴다 — 시간은 아래 줄로 내린다 */
  .pick-time { display: block; }
  .pick-time::before { content: none; }
  .seg { display: flex; width: 100%; }
  .seg-item { flex: 1; }
  .seg-item span { text-align: center; padding: 0.65rem 0.5rem; }
}

/* ===== 법적 고지 문서 (개인정보 처리방침) [신설 2026-08-15] =====
   읽히는 것이 목적인 문서다 — 밴드 리듬이나 카드 없이 한 단 폭으로만 둔다.
   urlmap 은 원래 다크 밴드용이라 밝은 면에서는 .is-light 로 색을 뒤집는다. */
.hero.is-short { padding-bottom: var(--space-4); }
.legal { max-width: 46em; }
.legal h2 {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: 1.15rem;
  letter-spacing: var(--ls-tight);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal p { margin-top: var(--space-2); }
.legal-list { margin: var(--space-2) 0 0; padding-left: 1.1rem; }
.legal-list li { margin-top: var(--space-1); }
.legal .opt-table { margin-top: var(--space-3); }

.urlmap.is-light { background: var(--color-line); }
.urlmap.is-light .urlmap-row { background: var(--color-bg); }
.urlmap.is-light .urlmap-row code { color: var(--color-primary-hover); }
.urlmap.is-light .urlmap-row span { color: var(--color-ink); }

/* ===== 모션 감소 존중 (A1) ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;  /* 스태거 딜레이도 제거 — 즉시 종료 상태로 */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .grad-em em { animation: none; }
  .demo-caret { display: none; }
  /* 리뉴얼분 — 확대·이동은 전부 정지 (2026-08-15) */
  .media:hover img,
  .svc-card:hover .svc-media img,
  .contact-media:hover img { transform: none; }
  .media-framed:hover::before { transform: none; }
}