/* =========================================================
   CND LOGIC — THE BLUEPRINT
   설계 도면 컨셉: 마케팅을 건축처럼 설계한다
   ========================================================= */

:root {
  --bg: #f7f4ec;
  --paper: #efeadd;
  --paper-deep: #e6e0cf;
  --ink: #16161a;
  --ink-soft: #353239;
  --ink-mute: #6f6a63;
  --line: #d4ccb8;
  --line-soft: rgba(22, 22, 26, 0.08);

  --blueprint: #1b2942;     /* 청사진 잉크 (네이비) */
  --blueprint-soft: #2f3f5e;
  --terra: #c0613a;          /* 설계 표시선 (주황) */
  --terra-soft: #d98a63;
  --gold: #9a7d4a;
  --olive: #5a6e3f;

  --c-color: #c0613a;        /* Cause */
  --n-color: #1b2942;        /* Narrative */
  --d-color: #5a6e3f;        /* Data */

  --grid: rgba(27, 41, 66, 0.020);
  --grid-strong: rgba(27, 41, 66, 0.045);

  --f-display: "Noto Serif KR", serif;
  --f-latin: "Cormorant Garamond", serif;
  --f-body: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1340px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--terra); color: var(--bg); }

/* 전역 청사진 그리드 배경 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* 굵은 좌표선 (10칸마다) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: 240px 240px;
}

main, header, footer { position: relative; z-index: 2; }

/* =========================================================
   도면 라벨 시스템 (모서리 좌표, DWG 번호)
   ========================================================= */
.dwg-tag {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dwg-corner {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--blueprint);
  opacity: 0.35;
  pointer-events: none;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
header.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(247, 244, 236, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line-soft);
}
header.nav.scrolled { border-bottom-color: var(--line); }

.logo { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.logo .mark {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.logo .mark b {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--terra);
  border-radius: 50%;
  margin: 0 3px 2px;
  vertical-align: middle;
}
.logo .ko {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.logo .est {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

nav.menu { display: flex; gap: 32px; align-items: center; }
nav.menu a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  position: relative;
  padding: 5px 0;
  transition: color .25s;
}
nav.menu a:not(.cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--terra);
  transition: width .3s;
}
nav.menu a:not(.cta):hover { color: var(--terra); }
nav.menu a:not(.cta):hover::after { width: 100%; }
nav.menu a.cta {
  background: var(--ink);
  color: var(--bg);
  padding: 10px 20px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.82rem;
  border: 1px solid var(--ink);
  transition: all .25s;
}
nav.menu a.cta:hover { background: var(--terra); border-color: var(--terra); }

.mobile-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  width: 42px; height: 42px;
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--ink);
}

/* =========================================================
   HERO — 감 → 논리 (캔버스)
   ========================================================= */
section.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 160px 40px 80px;
  overflow: hidden;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
}
/* 가독성 레이어: 텍스트 영역은 배경색이 이기고, 우하단만 캔버스 노출 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(102deg,
    var(--bg) 0%,
    rgba(247,244,236,0.94) 38%,
    rgba(247,244,236,0.62) 62%,
    rgba(247,244,236,0.18) 100%);
}
.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 3;
}

/* 도면 머리글 */
.hero-titleblock {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 44px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
}
.hero-titleblock .rule {
  width: 56px; height: 1px;
  background: var(--terra);
}
.hero-titleblock .sub { color: var(--ink-mute); }

h1.hero-h {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 7vw, 6.6rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 8px;
}
h1.hero-h .chaos {
  position: relative;
  color: var(--ink-mute);
}
h1.hero-h .chaos::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  top: 50%;
  height: 2px;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: left;
  animation: strike 1s cubic-bezier(.7,0,.3,1) 1.4s forwards;
}
@keyframes strike { to { transform: scaleX(1); } }

h1.hero-h .logic {
  font-family: var(--f-latin);
  font-style: italic;
  font-weight: 600;
  color: var(--terra);
}

.hero-sub {
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 1.35vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 600px;
  line-height: 1.75;
  margin: 36px 0 48px;
}
.hero-sub b { color: var(--ink); font-weight: 600; }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-fill, .btn-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 18px 32px;
  border-radius: 2px;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.btn-fill {
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
}
.btn-fill:hover {
  background: var(--terra);
  border-color: var(--terra);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(192, 97, 58, 0.3);
}
.btn-line {
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(247, 244, 236, 0.6);
}
.btn-line:hover { border-color: var(--ink); background: var(--paper); }

/* Hero 하단 도면 범례 */
.hero-legend {
  max-width: var(--maxw);
  margin: 90px auto 0;
  width: 100%;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 0;
  border-top: 1px solid var(--line);
}
.legend-cell {
  flex: 1;
  padding: 26px 28px 8px 0;
  border-right: 1px solid var(--line);
}
.legend-cell:last-child { border-right: none; padding-right: 0; }
.legend-cell .lc-no {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--terra);
}
.legend-cell .lc-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  margin-top: 4px;
}
.legend-cell .lc-en {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-mute);
}

/* =========================================================
   공통 섹션
   ========================================================= */
section { position: relative; padding: 150px 40px; }
.wrap { max-width: var(--maxw); margin: 0 auto; }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 28px;
}
.sec-head .rule { width: 40px; height: 1px; background: var(--terra); align-self: center; }
.sec-head .dwg {
  margin-left: auto;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
}
.sec-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.3vw, 3.9rem);
  line-height: 1.13;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 26px;
  max-width: 1000px;
}
.sec-title em {
  font-family: var(--f-latin);
  font-style: italic;
  color: var(--terra);
}
.sec-lead {
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 1.3vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 680px;
  line-height: 1.78;
}

/* =========================================================
   CND DIAGRAM — 살아 움직이는 프레임워크
   ========================================================= */
section.cnd { background: var(--bg); overflow: hidden; }

.cnd-stage {
  position: relative;
  margin-top: 70px;
  padding: 60px 0;
}

/* SVG 다이어그램 */
.cnd-svg-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.cnd-svg { width: 100%; height: auto; display: block; overflow: visible; }

.cnd-path {
  fill: none;
  stroke: var(--terra);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(.6,0,.3,1);
}
.cnd-stage.drawn .cnd-path { stroke-dashoffset: 0; }

.cnd-node-c circle, .cnd-node-n circle, .cnd-node-d circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .7s cubic-bezier(.3,1.4,.5,1);
}
.cnd-stage.drawn .cnd-node-c circle { transition-delay: .1s; transform: scale(1); }
.cnd-stage.drawn .cnd-node-n circle { transition-delay: .55s; transform: scale(1); }
.cnd-stage.drawn .cnd-node-d circle { transition-delay: 1s; transform: scale(1); }

.cnd-node text {
  font-family: var(--f-mono);
  font-weight: 700;
  opacity: 0;
  transition: opacity .5s;
}
.cnd-node-label {
  font-family: var(--f-display) !important;
  font-weight: 600;
  opacity: 0;
  transition: opacity .5s;
}
.cnd-stage.drawn .cnd-node-c text,
.cnd-stage.drawn .cnd-node-c .cnd-node-label { transition-delay: .35s; opacity: 1; }
.cnd-stage.drawn .cnd-node-n text,
.cnd-stage.drawn .cnd-node-n .cnd-node-label { transition-delay: .8s; opacity: 1; }
.cnd-stage.drawn .cnd-node-d text,
.cnd-stage.drawn .cnd-node-d .cnd-node-label { transition-delay: 1.25s; opacity: 1; }

/* 3개 카드 */
.cnd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 70px;
  border: 1px solid var(--line);
}
.cnd-card {
  padding: 44px 36px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  transition: background .4s;
}
.cnd-card:last-child { border-right: none; }
.cnd-card:hover { background: var(--paper); }
.cnd-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 48px; height: 3px;
  background: var(--c-color);
}
.cnd-card.n::before { background: var(--n-color); }
.cnd-card.d::before { background: var(--d-color); }

.cnd-card .cc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px dashed var(--line);
}
.cnd-card .cc-letter {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 0.8;
  color: var(--c-color);
}
.cnd-card.n .cc-letter { color: var(--n-color); }
.cnd-card.d .cc-letter { color: var(--d-color); }
.cnd-card .cc-axis {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.cnd-card h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.cnd-card .cc-en {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 16px;
}
.cnd-card .cc-line {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  padding-left: 13px;
  border-left: 2px solid var(--c-color);
  margin-bottom: 16px;
}
.cnd-card.n .cc-line { border-color: var(--n-color); }
.cnd-card.d .cc-line { border-color: var(--d-color); }
.cnd-card p {
  font-size: 0.91rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* =========================================================
   DIAGNOSTIC — 인터랙티브 진단
   ========================================================= */
section.diag {
  background: var(--blueprint);
  color: var(--bg);
  overflow: hidden;
}
section.diag .sec-head { color: var(--terra-soft); }
section.diag .sec-head .rule { background: var(--terra-soft); }
section.diag .sec-head .dwg { color: rgba(247,244,236,0.5); }
section.diag .sec-title { color: var(--bg); }
section.diag .sec-title em { color: var(--terra-soft); }
section.diag .sec-lead { color: rgba(247,244,236,0.72); }

.diag-frame {
  margin-top: 60px;
  border: 1px solid rgba(247,244,236,0.18);
  background: rgba(247,244,236,0.03);
  position: relative;
}
/* 도면 모서리 마커 */
.diag-frame .corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--terra-soft);
}
.diag-frame .corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.diag-frame .corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.diag-frame .corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.diag-frame .corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.diag-inner { padding: 56px 52px; }

.diag-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
}
.diag-progress .seg {
  flex: 1;
  height: 3px;
  background: rgba(247,244,236,0.15);
  position: relative;
  overflow: hidden;
}
.diag-progress .seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--terra-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s;
}
.diag-progress .seg.done::after { transform: scaleX(1); }

.diag-step { display: none; }
.diag-step.active { display: block; animation: stepIn .5s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.diag-qno {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--terra-soft);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.diag-q {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--bg);
  margin-bottom: 36px;
  max-width: 760px;
}
.diag-opts { display: flex; flex-direction: column; gap: 12px; }
.diag-opt {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid rgba(247,244,236,0.2);
  background: rgba(247,244,236,0.02);
  cursor: pointer;
  transition: all .2s;
  text-align: left;
  color: var(--bg);
  font-family: var(--f-body);
}
.diag-opt:hover {
  border-color: var(--terra-soft);
  background: rgba(192,97,58,0.12);
}
.diag-opt .opt-key {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--terra-soft);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--terra-soft);
  flex-shrink: 0;
}
.diag-opt .opt-text {
  font-size: 0.98rem;
  line-height: 1.5;
}

/* 결과 화면 */
.diag-result { display: none; }
.diag-result.show { display: block; animation: stepIn .6s ease; }
.result-score-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(247,244,236,0.15);
  border: 1px solid rgba(247,244,236,0.15);
  margin-bottom: 36px;
}
.score-cell {
  background: var(--blueprint);
  padding: 30px 24px;
  text-align: center;
}
.score-cell .sc-axis {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,244,236,0.55);
  margin-bottom: 10px;
}
.score-cell .sc-val {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
}
.score-cell.c .sc-val { color: var(--terra-soft); }
.score-cell.n .sc-val { color: #8b9bc4; }
.score-cell.d .sc-val { color: #9aae7e; }
.score-cell .sc-bar {
  height: 4px;
  background: rgba(247,244,236,0.12);
  margin-top: 14px;
  position: relative;
}
.score-cell .sc-bar i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--terra-soft);
  width: 0;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.score-cell.n .sc-bar i { background: #8b9bc4; }
.score-cell.d .sc-bar i { background: #9aae7e; }

.result-verdict {
  border-left: 3px solid var(--terra-soft);
  padding: 4px 0 4px 28px;
  margin-bottom: 36px;
}
.result-verdict .rv-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra-soft);
  margin-bottom: 12px;
}
.result-verdict .rv-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--bg);
  margin-bottom: 14px;
}
.result-verdict .rv-desc {
  font-size: 0.98rem;
  line-height: 1.8;
  color: rgba(247,244,236,0.78);
  max-width: 640px;
}
.diag-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.diag-restart {
  background: none;
  border: 1px solid rgba(247,244,236,0.3);
  color: var(--bg);
  padding: 18px 28px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 2px;
  transition: all .25s;
}
.diag-restart:hover { border-color: var(--bg); background: rgba(247,244,236,0.08); }

/* =========================================================
   PHILOSOPHY (간결)
   ========================================================= */
section.philo {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.philo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.philo-quote h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.philo-quote h2 em { font-family: var(--f-latin); font-style: italic; color: var(--terra); }
.philo-quote p {
  font-family: var(--f-display);
  font-size: 1.04rem;
  color: var(--ink-soft);
  line-height: 1.8;
}
.philo-list { display: flex; flex-direction: column; }
.philo-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.philo-item:last-child { border-bottom: 1px solid var(--line); }
.philo-item .pi-no {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--terra);
  padding-top: 4px;
}
.philo-item h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.22rem;
  margin-bottom: 8px;
}
.philo-item p { font-size: 0.93rem; color: var(--ink-soft); line-height: 1.7; }

/* =========================================================
   SPECIALTIES — 동물병원 주력 강조
   ========================================================= */
section.spec { background: var(--bg); }

/* 주력 — 동물병원 큰 카드 */
.spec-flagship {
  margin-top: 56px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
}
.flag-badge {
  position: absolute;
  top: 0; left: 0;
  background: var(--terra);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 9px 18px;
  z-index: 2;
}
.flag-left { padding: 66px 48px 48px; }
.flag-left .fl-no {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--terra);
  margin-bottom: 8px;
}
.flag-left h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.flag-left .fl-en {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 22px;
}
.flag-left p {
  font-size: 0.97rem;
  line-height: 1.78;
  color: var(--ink-soft);
  margin-bottom: 26px;
  max-width: 440px;
}
.fl-points { list-style: none; }
.fl-points li {
  font-size: 0.92rem;
  color: var(--ink);
  padding: 9px 0 9px 26px;
  position: relative;
  border-top: 1px dashed var(--line);
  line-height: 1.5;
}
.fl-points li:first-child { border-top: none; }
.fl-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--terra);
  font-weight: 700;
}
.flag-right {
  border-left: 1px solid var(--line);
  padding: 56px 40px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}
.flag-right .fr-block .fr-label {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.flag-right .fr-block .fr-stat {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--terra);
  letter-spacing: -0.02em;
}
.flag-right .fr-block .fr-desc {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: 6px;
}

/* 보조 — 의사·변호사 */
.spec-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-top: none;
}
.spec-sub {
  padding: 40px 38px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  transition: background .3s;
}
.spec-sub:last-child { border-right: none; }
.spec-sub:hover { background: var(--paper); }
.spec-sub .ss-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}
.spec-sub .ss-no {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold);
}
.spec-sub h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.spec-sub h4 span {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-mute);
  font-weight: 500;
  margin-left: 6px;
}
.spec-sub p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.7; }

/* =========================================================
   JOURNAL — 인사이트/사례 글 (메인 노출)
   ========================================================= */
section.journal {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.journal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 52px;
}
.journal-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: color .25s, border-color .25s;
  white-space: nowrap;
}
.journal-more:hover { color: var(--terra); border-color: var(--terra); }

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}
.journal-card {
  background: var(--bg);
  padding: 36px 32px 30px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  transition: background .3s;
  position: relative;
}
.journal-card:hover { background: var(--paper); }
.journal-card:hover .jc-go { transform: translateX(6px); color: var(--terra); }
.jc-cat {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 18px;
}
.jc-cat.case { color: var(--olive); }
.jc-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
.jc-sum {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
  flex: 1;
}
.jc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.jc-date {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.jc-go {
  font-family: var(--f-latin);
  font-size: 1.3rem;
  color: var(--ink-mute);
  transition: transform .3s, color .3s;
}
.journal-empty {
  border: 1px dashed var(--line);
  padding: 70px 20px;
  text-align: center;
  font-family: var(--f-display);
  color: var(--ink-mute);
  font-size: 1.05rem;
}


/* =========================================================
   STICKY CTA — 항상 따라다니는 문의 버튼
   ========================================================= */
.sticky-cta {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--terra);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 16px 24px;
  border-radius: 2px;
  box-shadow: 0 14px 38px rgba(192,97,58,0.42);
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .4s, transform .4s, background .25s;
}
.sticky-cta.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sticky-cta:hover { background: var(--ink); }
.sticky-cta .sc-pulse {
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: scpulse 1.6s infinite;
  flex-shrink: 0;
}
@keyframes scpulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.7); }
}

/* =========================================================
   SYMPTOM — 1. 문제 공감
   ========================================================= */
section.symptom {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.symptom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 54px;
}
.symptom-item {
  background: var(--bg);
  padding: 28px 30px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: background .3s;
}
.symptom-item:hover { background: var(--paper); }
.symptom-item .sx-mark {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 1.5px solid var(--terra);
  color: var(--terra);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  margin-top: 2px;
}
.symptom-item .sx-text {
  font-family: var(--f-display);
  font-size: 1.03rem;
  line-height: 1.62;
  color: var(--ink);
}
.symptom-item .sx-text b { color: var(--terra); font-weight: 700; }
.symptom-bridge {
  margin-top: 48px;
  padding: 40px;
  background: var(--ink);
  color: var(--bg);
  text-align: center;
}
.symptom-bridge p {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.3vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.45;
}
.symptom-bridge em { font-family: var(--f-latin); font-style: italic; color: var(--terra-soft); }

/* =========================================================
   URGENCY — 4. 문의해야 하는 이유
   ========================================================= */
section.urgency {
  background: var(--blueprint);
  color: var(--bg);
}
section.urgency .sec-head { color: var(--terra-soft); }
section.urgency .sec-head .rule { background: var(--terra-soft); }
section.urgency .sec-head .dwg { color: rgba(247,244,236,0.5); }
section.urgency .sec-title { color: var(--bg); }
section.urgency .sec-title em { color: var(--terra-soft); }
section.urgency .sec-lead { color: rgba(247,244,236,0.72); }
.urgency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(247,244,236,0.15);
  border: 1px solid rgba(247,244,236,0.15);
  margin-top: 54px;
}
.urgency-cell {
  background: var(--blueprint);
  padding: 42px 32px;
}
.urgency-cell .uc-no {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--terra-soft);
  margin-bottom: 22px;
}
.urgency-cell h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.38;
  color: var(--bg);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.urgency-cell p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(247,244,236,0.72);
}
.urgency-cta {
  margin-top: 50px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.urgency-cta .uc-line {
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: rgba(247,244,236,0.8);
}

/* =========================================================
   CTA STRIP — 섹션 사이 반복 CTA
   ========================================================= */
.cta-strip {
  background: var(--ink);
  color: var(--bg);
}
.cta-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 48px 0;
  flex-wrap: wrap;
}
.cta-strip .cs-text {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.cta-strip .cs-text em {
  font-family: var(--f-latin);
  font-style: italic;
  color: var(--terra-soft);
}
.cta-strip .cs-sub {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(247,244,236,0.55);
  margin-top: 8px;
}

/* =========================================================
   PROGRAM — 회원 동물병원 지원 프로그램
   ========================================================= */
section.program {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.program-block { margin-top: 54px; }
.program-block + .program-block { margin-top: 60px; }
.pb-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}
.pb-head .pb-no {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--terra);
}
.pb-head h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  letter-spacing: -0.02em;
}
.pb-head .pb-en {
  margin-left: auto;
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-mute);
  white-space: nowrap;
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: none;
}
.program-item {
  background: var(--bg);
  padding: 28px 26px;
  transition: background .3s;
}
.program-item:hover { background: var(--paper); }
.program-item .prg-no {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--terra);
  margin-bottom: 12px;
}
.program-item h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin-bottom: 9px;
}
.program-item p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.program-note {
  margin-top: 40px;
  padding: 26px 30px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--f-display);
  font-size: 0.98rem;
  line-height: 1.7;
  border-left: 3px solid var(--terra);
}
.program-note strong { color: var(--terra-soft); }

/* =========================================================
   VERSUS — 감으로 하는 마케팅 vs 논리로 설계하는 마케팅
   ========================================================= */
section.versus { background: var(--bg); }
.versus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 56px;
  border: 1px solid var(--line);
}
.versus-col { padding: 46px 40px; position: relative; }
.versus-col.old { background: var(--paper); }
.versus-col.new {
  background: var(--ink);
  color: var(--bg);
  border-left: 1px solid var(--line);
}
.versus-col .vs-tag {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.versus-col.old .vs-tag { color: var(--ink-mute); }
.versus-col.new .vs-tag { color: var(--terra-soft); }
.versus-col h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.versus-col .vs-sub {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 1rem;
  margin-bottom: 26px;
}
.versus-col.old .vs-sub { color: var(--ink-mute); }
.versus-col.new .vs-sub { color: var(--terra-soft); }
.versus-col ul { list-style: none; }
.versus-col li {
  font-size: 0.93rem;
  line-height: 1.6;
  padding: 13px 0 13px 26px;
  position: relative;
  border-top: 1px dashed;
}
.versus-col.old li { border-color: var(--line); color: var(--ink-soft); }
.versus-col.new li { border-color: rgba(247,244,236,0.18); color: rgba(247,244,236,0.82); }
.versus-col li:first-child { border-top: none; }
.versus-col.old li::before {
  content: "✕";
  position: absolute; left: 0;
  color: var(--ink-mute);
  font-weight: 700;
}
.versus-col.new li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--terra-soft);
  font-weight: 700;
}

/* =========================================================
   DELEGATE — 직접 운영 vs CND LOGIC 위임
   ========================================================= */
section.delegate {
  background: var(--blueprint);
  color: var(--bg);
  overflow: hidden;
}
section.delegate .sec-head { color: var(--terra-soft); }
section.delegate .sec-head .rule { background: var(--terra-soft); }
section.delegate .sec-head .dwg { color: rgba(247,244,236,0.5); }
section.delegate .sec-title { color: var(--bg); }
section.delegate .sec-title em { color: var(--terra-soft); }
section.delegate .sec-lead { color: rgba(247,244,236,0.72); }

.delegate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 56px;
  background: rgba(247,244,236,0.15);
  border: 1px solid rgba(247,244,236,0.15);
}
.delegate-col { background: var(--blueprint); padding: 40px 36px; }
.delegate-col .dg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(247,244,236,0.18);
}
.delegate-col .dg-label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.delegate-col.self .dg-label { color: rgba(247,244,236,0.55); }
.delegate-col.trust .dg-label { color: var(--terra-soft); }
.delegate-col .dg-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.delegate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px dashed rgba(247,244,236,0.14);
  font-size: 0.9rem;
}
.delegate-row:first-of-type { border-top: none; }
.delegate-row .dr-task { color: rgba(247,244,236,0.8); line-height: 1.5; }
.delegate-row .dr-val {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.delegate-col.self .dr-val { color: #d98a63; }
.delegate-col.trust .dr-val { color: #9aae7e; }
.delegate-total {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px solid rgba(247,244,236,0.25);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.delegate-total .dt-label {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
}
.delegate-total .dt-val {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}
.delegate-col.self .dt-val { color: #d98a63; }
.delegate-col.trust .dt-val { color: #9aae7e; }
.delegate-note {
  margin-top: 40px;
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.delegate-note em { font-family: var(--f-latin); font-style: italic; color: var(--terra-soft); }

/* =========================================================
   FAQ — 자주 묻는 질문
   ========================================================= */
section.faq { background: var(--paper); border-top: 1px solid var(--line); }
.faq-list {
  margin-top: 52px;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 4px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--terra); }
.faq-item summary .faq-q-no {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--terra);
  flex-shrink: 0;
}
.faq-item summary .faq-icon {
  margin-left: auto;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--terra);
  transition: transform .3s;
  flex-shrink: 0;
}
.faq-item[open] summary .faq-icon { transform: rotate(45deg); }
.faq-answer {
  padding: 0 4px 30px 44px;
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.faq-answer strong { color: var(--ink); font-weight: 600; }

/* =========================================================
   FINALE
   ========================================================= */
section.finale {
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  padding: 180px 40px;
  overflow: hidden;
  position: relative;
}
.finale::before {
  content: "C·N·D";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: clamp(10rem, 26vw, 26rem);
  color: rgba(247,244,236,0.04);
  letter-spacing: 0.04em;
  pointer-events: none;
  white-space: nowrap;
}
.finale .wrap { position: relative; z-index: 2; }
.finale h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin-bottom: 44px;
}
.finale h2 em { font-family: var(--f-latin); font-style: italic; color: var(--terra-soft); }
.finale .btn-fill { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.finale .btn-fill:hover { background: var(--terra); color: var(--bg); border-color: var(--terra); }

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  background: var(--ink);
  color: rgba(247,244,236,0.6);
  padding: 70px 40px 34px;
  border-top: 1px solid rgba(247,244,236,0.1);
}
.foot-grid {
  max-width: var(--maxw);
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
}
.foot-brand .mark {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--bg);
}
.foot-brand .mark b {
  display: inline-block; width: 5px; height: 5px;
  background: var(--terra); border-radius: 50%;
  margin: 0 3px 2px; vertical-align: middle;
}
.foot-brand p {
  font-family: var(--f-display);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 18px;
  max-width: 320px;
}
.foot-col h5 {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra-soft);
  margin-bottom: 18px;
}
.foot-col a {
  display: block;
  color: rgba(247,244,236,0.6);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 5px 0;
  transition: color .2s;
}
.foot-col a:hover { color: var(--terra-soft); }
.foot-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 26px;
  border-top: 1px solid rgba(247,244,236,0.1);
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: rgba(247,244,236,0.4);
  letter-spacing: 0.04em;
}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .cnd-cards { grid-template-columns: 1fr; }
  .cnd-card { border-right: none; border-bottom: 1px solid var(--line); }
  .cnd-card:last-child { border-bottom: none; }
  .philo-grid { grid-template-columns: 1fr; gap: 44px; }
  .program-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  header.nav { padding: 14px 20px; }
  nav.menu { display: none; }
  nav.menu.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(22,22,26,0.12);
    padding: 8px 20px 20px;
    z-index: 99;
  }
  nav.menu.open a {
    padding: 15px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
  }
  nav.menu.open a:not(.cta)::after { display: none; }
  nav.menu.open a.cta {
    margin-top: 14px;
    text-align: center;
    border: 1px solid var(--ink);
    padding: 14px;
  }
  .mobile-toggle { display: flex; align-items: center; justify-content: center; }
  section { padding: 100px 20px; }
  section.hero { padding: 130px 20px 70px; }
  /* 모바일: 텍스트가 위쪽 → 상단을 강하게 덮는 세로 그라데이션 */
  .hero::after {
    background: linear-gradient(180deg,
      var(--bg) 0%,
      rgba(247,244,236,0.95) 50%,
      rgba(247,244,236,0.7) 78%,
      rgba(247,244,236,0.3) 100%);
  }
  .hero-legend { flex-wrap: wrap; }
  .legend-cell { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; }
  .diag-inner { padding: 36px 24px; }
  .result-score-row { grid-template-columns: 1fr; }
  .spec-flagship { grid-template-columns: 1fr; }
  .flag-right { border-left: none; border-top: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; }
  .spec-sub-grid { grid-template-columns: 1fr; }
  .spec-sub { border-right: none; border-bottom: 1px solid var(--line); }
  .spec-sub:last-child { border-bottom: none; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-card { min-height: auto; }
  .program-grid { grid-template-columns: 1fr; }
  .pb-head .pb-en { display: none; }
  .symptom-grid { grid-template-columns: 1fr; }
  .urgency-grid { grid-template-columns: 1fr; }
  .versus-grid { grid-template-columns: 1fr; }
  .versus-col.new { border-left: none; border-top: 1px solid var(--line); }
  .delegate-grid { grid-template-columns: 1fr; }
  .faq-answer { padding-left: 4px; }
  .sticky-cta { right: 16px; bottom: 16px; padding: 14px 20px; font-size: 0.84rem; }
  .cta-strip .wrap { flex-direction: column; align-items: flex-start; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .sec-head .dwg { display: none; }
}

/* =========================================================
   SUBPAGE — 공통 페이지 헤더
   ========================================================= */
.page-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 150px 40px 64px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.page-head .ph-dwg {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.page-head .ph-dwg::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--terra);
}
.page-head h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.page-head h1 em {
  font-family: var(--f-latin);
  font-style: italic;
  font-weight: 600;
  color: var(--terra);
}
.page-head .ph-lead {
  margin-top: 22px;
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.subpage-section { padding: 80px 40px; }
.subpage-section .wrap { max-width: var(--maxw); margin: 0 auto; }

/* =========================================================
   SUBPAGE — PROCESS (4단계)
   ========================================================= */
.prc-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.prc-item {
  background: var(--bg);
  display: grid;
  grid-template-columns: 200px 1fr 240px;
  gap: 36px;
  padding: 44px 40px;
  align-items: start;
}
.prc-item .pi-mark { }
.prc-item .pi-no {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--terra);
  letter-spacing: -0.03em;
}
.prc-item .pi-en {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 10px;
}
.prc-item .pi-axis {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.prc-item .pi-body h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.prc-item .pi-body .pi-latin {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 1rem;
  color: var(--terra);
  margin-bottom: 16px;
}
.prc-item .pi-body p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.prc-item .pi-deliver {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.prc-item .pi-deliver .pd-label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.prc-item .pi-deliver ul { list-style: none; }
.prc-item .pi-deliver li {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 8px 0 8px 18px;
  position: relative;
  border-top: 1px dashed var(--line);
}
.prc-item .pi-deliver li:first-child { border-top: none; }
.prc-item .pi-deliver li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--terra);
}

/* =========================================================
   SUBPAGE — CHANNELS (12 도구함)
   ========================================================= */
.chn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.chn-cell {
  background: var(--bg);
  padding: 32px 28px;
  transition: background .2s;
}
.chn-cell:hover { background: var(--paper); }
.chn-cell .cc-code {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--terra);
}
.chn-cell h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 4px;
}
.chn-cell .cc-en {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-mute);
}
.chn-cell p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 14px 0 18px;
}
.chn-cell .cc-fit {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.chn-note {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--paper);
  border-left: 3px solid var(--terra);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.chn-note strong { color: var(--ink); }

/* =========================================================
   SUBPAGE — POST LIST (게시판 목록)
   ========================================================= */
.plist {
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.plist-row {
  display: grid;
  grid-template-columns: 130px 1fr 150px 40px;
  gap: 28px;
  align-items: center;
  padding: 30px 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .2s, padding .2s;
}
.plist-row:hover { background: var(--paper); padding-left: 20px; }
.plist-row .pl-id {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--terra);
}
.plist-row .pl-main .pl-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 8px;
}
.plist-row .pl-main .pl-sum {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-mute);
}
.plist-row .pl-meta {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--ink-mute);
  text-align: right;
}
.plist-row .pl-go {
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: var(--terra);
  text-align: center;
}
.plist-empty {
  padding: 90px 20px;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--ink-mute);
}
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.pager a {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  padding: 10px 15px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  background: var(--bg);
  transition: background .2s, color .2s;
}
.pager a:hover { background: var(--paper); }
.pager a.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* =========================================================
   SUBPAGE — POST DETAIL (글 상세)
   ========================================================= */
.pdetail {
  max-width: 880px;
  margin: 0 auto;
  padding: 140px 40px 120px;
}
.pdetail .pd-back {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
  text-decoration: none;
  display: inline-flex;
  gap: 8px;
  margin-bottom: 28px;
}
.pdetail .pd-head {
  padding-bottom: 32px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
.pdetail .pd-head h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 22px;
}
.pdetail .pd-head .pd-summary {
  font-family: var(--f-display);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
.pdetail .pd-head .pd-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}
.pdetail .pd-thumb { margin-bottom: 48px; }
.pdetail .pd-thumb img { width: 100%; height: auto; display: block; }
.pdetail .pd-foot {
  margin-top: 72px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.post-content { font-size: 1.02rem; line-height: 1.85; color: var(--ink); }
.post-content h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; margin: 52px 0 18px; letter-spacing: -0.02em; }
.post-content h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.28rem; margin: 38px 0 14px; letter-spacing: -0.015em; }
.post-content h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; margin: 30px 0 12px; }
.post-content p { margin-bottom: 1.4em; }
.post-content ul, .post-content ol { margin: 1em 0 1.4em 1.4em; }
.post-content li { margin-bottom: 0.4em; }
.post-content blockquote { border-left: 3px solid var(--terra); padding: 16px 24px; margin: 32px 0; background: var(--paper); font-family: var(--f-display); font-style: italic; font-size: 1.06rem; }
.post-content a { color: var(--terra); border-bottom: 1px solid currentColor; text-decoration: none; }
.post-content img { max-width: 100%; height: auto; margin: 24px 0; display: block; }
.post-content table { border-collapse: collapse; width: 100%; margin: 24px 0; }
.post-content th, .post-content td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; }
.post-content th { background: var(--paper); font-weight: 600; }
.post-content hr { border: none; border-top: 1px solid var(--line); margin: 44px 0; }

/* =========================================================
   SUBPAGE — CONTACT FORM (문의)
   ========================================================= */
.cf-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  margin-top: 8px;
}
.cf-info {
  background: var(--ink);
  color: var(--bg);
  padding: 40px 36px;
}
.cf-info h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--bg);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.cf-info p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(247,244,236,0.72);
  margin-bottom: 16px;
}
.cf-info ul { list-style: none; margin-top: 28px; }
.cf-info li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px dashed rgba(247,244,236,0.18);
  font-size: 0.88rem;
}
.cf-info .ci-label { color: rgba(247,244,236,0.5); font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.06em; }
.cf-info .ci-val { color: var(--bg); text-align: right; }
.cf-info .ci-val a { color: var(--terra-soft); text-decoration: none; }
.cf-form { }
.cf-row { margin-bottom: 22px; }
.cf-row label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 9px;
}
.cf-row label .req { color: var(--terra); }
.cf-row input, .cf-row select, .cf-row textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 13px 15px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 0;
}
.cf-row input:focus, .cf-row select:focus, .cf-row textarea:focus {
  outline: none;
  border-color: var(--terra);
}
.cf-row textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.cf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-spec { display: flex; gap: 10px; flex-wrap: wrap; }
.cf-spec-btn {
  flex: 1;
  min-width: 130px;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 14px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  transition: all .2s;
}
.cf-spec-btn .cf-spec-en {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--ink-mute);
  margin-top: 4px;
}
.cf-spec-btn.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.cf-spec-btn.active .cf-spec-en { color: var(--terra-soft); }
.cf-submit {
  width: 100%;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 17px;
  background: var(--terra);
  color: #fff;
  border: 1px solid var(--terra);
  cursor: pointer;
  transition: background .2s;
  margin-top: 6px;
}
.cf-submit:hover { background: var(--ink); border-color: var(--ink); }
.cf-disclaimer {
  margin-top: 18px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-mute);
}
.cf-flash-ok {
  margin: 32px 0;
  padding: 26px 30px;
  background: var(--ink);
  color: var(--bg);
  border-left: 4px solid var(--terra-soft);
}
.cf-flash-ok h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: var(--bg); margin-bottom: 8px; }
.cf-flash-ok p { font-size: 0.95rem; color: rgba(247,244,236,0.85); line-height: 1.65; }
.cf-flash-err {
  margin: 32px 0;
  padding: 22px 26px;
  background: var(--paper);
  border-left: 4px solid #b8694a;
}
.cf-flash-err strong { font-family: var(--f-display); font-weight: 700; display: block; margin-bottom: 6px; }
.cf-flash-err p { white-space: pre-line; font-size: 0.9rem; color: var(--ink-soft); }

/* SUBPAGE 반응형 */
@media (max-width: 1024px) {
  .prc-item { grid-template-columns: 1fr; gap: 20px; }
  .prc-item .pi-deliver { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 20px; }
  .chn-grid { grid-template-columns: repeat(2, 1fr); }
  .cf-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .page-head { padding: 130px 20px 52px; }
  .subpage-section { padding: 64px 20px; }
  .chn-grid { grid-template-columns: 1fr; }
  .plist-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 8px; }
  .plist-row .pl-meta { text-align: left; }
  .plist-row .pl-go { display: none; }
  .plist-row:hover { padding-left: 8px; }
  .cf-row-2 { grid-template-columns: 1fr; }
  .pdetail { padding: 120px 20px 90px; }
}

/* =========================================================
   SUBPAGE — ABOUT (C·N·D 프레임워크)
   ========================================================= */
.cnd-stack { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 56px; }
.cnd-row {
  background: var(--bg);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 36px;
  padding: 44px 40px;
  align-items: start;
}
.cnd-row .cnd-letter {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 0.9;
  color: var(--terra);
  letter-spacing: -0.04em;
}
.cnd-row .cnd-axis {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.cnd-row .cnd-body h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.35;
}
.cnd-row .cnd-body p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.cnd-check { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cnd-check li {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 10px 0 10px 22px;
  position: relative;
  border-top: 1px dashed var(--line);
}
.cnd-check li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--terra);
  font-weight: 700;
}
.cnd-equation {
  margin-top: 40px;
  padding: 36px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cnd-equation .ce-term {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2rem;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--terra);
  color: #fff;
}
.cnd-equation .ce-op, .cnd-equation .ce-eq {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: rgba(247,244,236,0.6);
}
.cnd-equation .ce-result {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--bg);
  letter-spacing: -0.02em;
}
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 56px;
}
.approach-item { background: var(--bg); padding: 36px 32px; }
.approach-item .ai-no {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--terra);
  margin-bottom: 12px;
}
.approach-item h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.approach-item p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
@media (max-width: 768px) {
  .cnd-row { grid-template-columns: 1fr; gap: 16px; padding: 32px 22px; }
  .cnd-row .cnd-letter { font-size: 4rem; }
  .cnd-check { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   SUBPAGE — SPECIALTIES 상세 (의사·변호사)
   ========================================================= */
.spec-detail-wrap { background: var(--bg); }
.spec-detail {
  border: 1px solid var(--line);
  margin-top: 36px;
}
.spec-detail .spd-head {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 30px 36px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.spec-detail .spd-no {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--terra);
  line-height: 1;
  letter-spacing: -0.03em;
}
.spec-detail .spd-title h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.spec-detail .spd-title .spd-en {
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
}
.spec-detail .spd-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.spec-detail .spd-tags span {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--bg);
}
.spec-detail .spd-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
}
.spec-detail .spd-pain { padding: 32px 36px; }
.spec-detail .spd-channels {
  padding: 32px 36px;
  background: var(--paper);
  border-left: 1px solid var(--line);
}
.spec-detail .spd-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.spec-detail .spd-quote {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
}
.spec-detail .spd-list { list-style: none; }
.spec-detail .spd-list li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 10px 0 10px 22px;
  position: relative;
  border-top: 1px dashed var(--line);
}
.spec-detail .spd-list li:first-child { border-top: none; }
.spec-detail .spd-list li::before {
  content: "✕";
  position: absolute; left: 0;
  color: var(--ink-mute);
  font-weight: 700;
}
.spec-detail .spd-ch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px dashed var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.spec-detail .spd-ch:first-of-type { border-top: none; }
.spec-detail .spd-ch b {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  background: var(--terra);
  color: #fff;
  flex-shrink: 0;
}
.spec-detail .spd-ch b.sup { background: var(--bg); color: var(--ink-mute); border: 1px solid var(--line); }
@media (max-width: 768px) {
  .spec-detail .spd-head { grid-template-columns: 1fr; gap: 12px; padding: 24px; }
  .spec-detail .spd-body { grid-template-columns: 1fr; }
  .spec-detail .spd-channels { border-left: none; border-top: 1px solid var(--line); }
  .spec-detail .spd-pain, .spec-detail .spd-channels { padding: 26px 24px; }
}