/* =====================================================================
   Smartolic 공개 홈 (/)
   헤더  : verdent.ai 구조 — sticky · 좌 워드마크 · 중앙 내비 · 우 버튼
   히어로: adriel 구조 — 좌 헤드라인/CTA · 우 제품 비주얼 · 분위기 배경
   색·서체·간격·라운드는 전부 theme.css 토큰 (md/design.md)
   ===================================================================== */

.home { background: var(--canvas); overflow-x: hidden; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ─── 헤더 ─────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .18s, background .18s;
}
.site-header.is-stuck { border-bottom-color: var(--border); background: rgba(255,255,255,.94); }

.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 24px;
}

.brand-mark {
  font-size: 22px; font-weight: var(--w-semibold); color: var(--text-primary);
  text-decoration: none; flex: 0 0 auto;
}
.brand-mark:hover { text-decoration: none; color: var(--text-primary); }
.brand-mark span { color: var(--sig-coral); }
.brand-mark.sm { font-size: 17px; }

/* 중앙 내비 — 한 단계 키운 15px */
.site-nav { flex: 1; display: flex; justify-content: center; gap: 30px; }
.site-nav a {
  font-size: 15px; font-weight: var(--w-medium); color: var(--text-secondary);
  text-decoration: none; padding: 6px 0;
}
.site-nav a:hover { color: var(--text-primary); text-decoration: none; }

.header-cta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* ─── 버튼 ─────────────────────────────── */
.btn-h {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 19px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  font-size: 15px; font-weight: var(--w-medium); font-family: inherit;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.btn-h:hover { text-decoration: none; }
.btn-h:active { transform: translateY(1px); }
.btn-h-primary   { background: var(--primary); color: var(--on-primary); }
.btn-h-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-h-secondary { background: var(--canvas); border-color: var(--border-strong); color: var(--text-primary); }
.btn-h-secondary:hover { background: var(--bg-elevated); color: var(--text-primary); }
.btn-h-ghost     { color: var(--text-secondary); }
.btn-h-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); }
.btn-h-onDark    { background: #fff; color: var(--ink); }
.btn-h-onDark:hover { background: #E2E4E8; color: var(--ink); }
.btn-h-lg        { padding: 14px 26px; font-size: 15.5px; border-radius: var(--r-lg); }
.btn-h-block     { width: 100%; }

/* ─── 모바일 드로어 (우측 슬라이드) ─────────────────────────────── */
/* 닫힘 상태는 hidden 속성이 아니라 transform + visibility 로 다룬다.
   [hidden] 은 display 규칙에 덮여 무력화되므로 신뢰할 수 없다. */
.nav-toggle { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--text-primary); }
.nav-toggle svg { width: 26px; height: 26px; display: block; }

.nav-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(24,29,38,.42);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.mobile-nav {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: min(320px, 84vw); height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg-surface); border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px -24px rgba(24,29,38,.30);
  transform: translateX(100%); visibility: hidden;
  transition: transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s;
}

body.nav-open .nav-scrim {
  opacity: 1; visibility: visible;
  transition: opacity .28s ease, visibility 0s;
}
body.nav-open .mobile-nav {
  transform: none; visibility: visible;
  transition: transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
body.nav-open { overflow: hidden; }   /* 드로어가 열린 동안 본문 스크롤 잠금 */

.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 16px 0 22px; border-bottom: 1px solid var(--border);
}
.mnav-close { background: none; border: 0; padding: 8px; cursor: pointer; color: var(--text-secondary); }
.mnav-close:hover { color: var(--text-primary); }
.mnav-close svg { width: 22px; height: 22px; display: block; }

.mnav-links { flex: 1; display: flex; flex-direction: column; padding: 12px 12px; overflow-y: auto; }
.mnav-links a {
  padding: 15px 12px; border-radius: var(--r-md);
  font-size: 16px; font-weight: var(--w-medium);
  color: var(--text-secondary); text-decoration: none;
}
.mnav-links a:hover { background: var(--bg-elevated); color: var(--text-primary); text-decoration: none; }

.mnav-foot { padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.mnav-foot .btn-h { padding: 14px 20px; }

/* ─── 공통 ─────────────────────────────── */
.band { padding: 96px 0; }
.band-tight { padding: 48px 0; }
.eyebrow { font-size: 13px; font-weight: var(--w-medium); color: var(--text-secondary); margin: 0 0 16px; }
.sec-h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: var(--w-regular);
  line-height: 1.3; color: var(--text-primary); margin: 0 0 40px; }
.sec-h2 em { font-style: normal; font-weight: var(--w-medium); color: var(--sig-coral); }

/* ─── 등장 애니메이션 ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
              transform .6s cubic-bezier(.22,.61,.36,1) var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ─── 히어로 ─────────────────────────────── */
.hero { position: relative; padding: 72px 0 104px; overflow: hidden; }

/* 분위기 배경 — 브랜드 색상(크림·코랄·민트)의 그라디언트 색면 + 블러 오브.
   design.md 의 "히어로 그라디언트 금지"에 대한 명시적 예외 (레퍼런스 요청).

   색 순환 18초, 오브 표류 16~22초. 헤드라인을 읽는 동안 배경 색조가 한 번은 갈아탄다.
   강도 조절은 두 곳: 아래 wash 의 지속시간(속도)과 각 wash 의 첫 색(세기). */
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; background: var(--canvas);
}

/* ── 색이 실제로 바뀌는 방식 ──
   background-position 만 움직이면 색은 변하지 않는다. 정지점이 전부 흰색에 가까우면
   그라디언트를 아무리 밀어도 결과가 같기 때문이다(첫 구현의 실패 원인).
   그래서 서로 다른 색조의 그라디언트 3장을 겹쳐 두고 교차 페이드시킨다.
   w1(웜 크림) → w2(쿨 민트) → w3(로즈 골드) → 다시 w1 로 18초에 걸쳐 순환한다.
   색 자체가 갈아타므로 "배경색이 변한다"가 실제로 성립한다. */
.hero-bg .wash {
  position: absolute; inset: -15%;
  background-size: 190% 190%;
  opacity: 0;
  will-change: opacity, background-position;
  /* 주기 18초 = w1 → w2 → w3 → w1 한 바퀴.
     두 값은 반드시 같아야 한다 — 색 페이드와 그라디언트 흐름이 어긋나면 부자연스럽다. */
  animation: washFade 18s ease-in-out infinite,
             washPan  18s ease-in-out infinite alternate;
}
/* animation-delay 의 첫 값은 주기의 1/3(6초)씩 벌어져야 세 장이 순서대로 등장한다.
   두 번째 값(흐름 시작점)은 일부러 어긋나게 둔다 — 딱 맞으면 반복 패턴이 눈에 잡힌다. */
.w1 {
  background-image: linear-gradient(155deg, #F9D9B8 0%, #FFF0DC 30%, #FFFFFF 62%, #E9F0F9 100%);
  animation-delay: 0s, 0s;
}
.w2 {
  background-image: linear-gradient(200deg, #CFE8DC 0%, #EDF7F1 32%, #FFFFFF 64%, #FCEBD9 100%);
  animation-delay: -6s, -3s;
}
.w3 {
  background-image: linear-gradient(135deg, #F7CFBD 0%, #FFF1CE 34%, #FFFFFF 66%, #E7EEF7 100%);
  animation-delay: -12s, -7s;
}

/* 각 장이 1/3 주기씩 늦게 등장한다 → 항상 한 장이 물러나며 다음 장이 올라온다 */
@keyframes washFade {
  0%   { opacity: 1; }
  27%  { opacity: 1; }
  40%  { opacity: 0; }
  87%  { opacity: 0; }
  100% { opacity: 1; }
}
/* 등장한 장은 가만히 있지 않고 천천히 흐른다 — 색이 "번지는" 질감 */
@keyframes washPan {
  0%   { background-position:   0% 20%; }
  100% { background-position: 100% 80%; }
}

.hero-bg .orb { position: absolute; border-radius: var(--r-full); filter: blur(72px); will-change: transform, opacity; }
/* 오브도 색 순환(18초)에 맞춰 2배 빠르게. 배경만 빨라지고 오브가 기어가면 따로 논다.
   16·19·22초 — 서로 배수가 아니어야 같은 그림이 되돌아오는 게 눈에 안 잡힌다. */
.orb-1 { width: 460px; height: 460px; top: -140px; right: -80px; background: var(--sig-peach); opacity: .42;
  animation: drift1 19s ease-in-out infinite alternate; }
.orb-2 { width: 380px; height: 380px; bottom: -160px; left: -120px; background: var(--sig-mint); opacity: .40;
  animation: drift2 22s ease-in-out infinite alternate; }
.orb-3 { width: 300px; height: 300px; top: 180px; left: 44%; background: var(--sig-yellow); opacity: .26;
  animation: drift3 16s ease-in-out infinite alternate; }
/* 오브 표류 — 서로 다른 주기·방향이라 패턴이 반복되는 게 눈에 안 잡힌다 */
@keyframes drift1 {
  0%   { transform: translate(0, 0)          scale(1);    opacity: .38; }
  50%  { transform: translate(-70px, 60px)   scale(1.16); opacity: .48; }
  100% { transform: translate(40px, 110px)   scale(.94);  opacity: .30; }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0)          scale(1);    opacity: .34; }
  50%  { transform: translate(90px, -70px)   scale(1.22); opacity: .44; }
  100% { transform: translate(-30px, -120px) scale(1.02); opacity: .28; }
}
@keyframes drift3 {
  0%   { transform: translate(0, 0)          scale(1);    opacity: .18; }
  50%  { transform: translate(-110px, 50px)  scale(1.30); opacity: .30; }
  100% { transform: translate(80px, -40px)   scale(1.10); opacity: .14; }
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 56px; align-items: center;
}
.hero-copy { max-width: 560px; }

/* 헤드라인 — 줄 단위 클립 리빌 */
.hero-title {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: var(--w-regular);
  line-height: 1.24;
  color: var(--text-primary);
  margin: 0 0 26px;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 2px; }
.hero-title .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: lineUp .82s cubic-bezier(.19,1,.22,1) var(--d, 0ms) forwards;
}
/* 굵기가 아니라 색 대비로 강조 (design.md) */
.hero-title .hl { color: var(--sig-coral); font-weight: var(--w-medium); }

@keyframes lineUp { to { transform: none; } }

.hero-sub { font-size: 16.5px; line-height: 1.75; color: var(--text-secondary); margin: 0 0 32px; }
.hero-sub strong { color: var(--text-primary); font-weight: var(--w-medium); }

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }

.hero-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-badges li {
  font-size: 12.5px; font-weight: var(--w-medium); color: var(--text-secondary);
  padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.72); border: 1px solid var(--border);
}
.hero-badges li::before { content: "✓ "; color: var(--sig-coral); }

/* ─── 히어로 챕터 슬라이더 ─────────────────────────────── */
.slider { display: flex; flex-direction: column; gap: 14px; }
.slider-frame {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(24,29,38,.28), 0 2px 8px rgba(24,29,38,.06);
}
.preview-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--bg-base); border-bottom: 1px solid var(--border);
}
.preview-bar .dot { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--border); }
.preview-url { margin-left: 12px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0; color: var(--text-disabled); }

/* 슬라이드: 겹쳐 두고 활성만 보인다 (높이 점프 방지) */
.slides { position: relative; display: grid; }
.slide {
  grid-area: 1 / 1; padding: 22px; min-height: 340px;
  display: grid; gap: 16px; align-content: start;
  opacity: 0; transform: translateX(22px); pointer-events: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.slide.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* 챕터 인디케이터 */
.chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chap {
  position: relative; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 10px 2px 0; font-family: inherit;
}
.chap-t { display: block; font-size: 12.5px; font-weight: var(--w-medium);
  color: var(--text-disabled); transition: color .2s; }
.chap.is-active .chap-t { color: var(--text-primary); }
/* 진행 바 — 활성 챕터에서만 채워진다 */
.chap::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 2px; background: var(--border);
}
.chap-p {
  position: absolute; top: 0; left: 0; height: 2px; width: 0;
  border-radius: 2px; background: var(--sig-coral);
}
@keyframes chapFill { from { width: 0; } to { width: 100%; } }

/* ── 목업 1: 랜딩페이지 ── */
.slide .mock-lp, .slide .mock-side { border: 1px solid var(--border); border-radius: var(--r-md); }
.slide:first-child { grid-template-columns: 1fr 1fr; }
.mock-lp { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.lp-bar { height: 5px; border-radius: var(--r-pill); background: var(--bg-elevated); overflow: hidden; }
.lp-bar i { display: block; height: 100%; width: var(--w); background: var(--sig-coral); border-radius: var(--r-pill); }
.lp-q { font-size: 15px; font-weight: var(--w-medium); line-height: 1.45; color: var(--text-primary); }
.lp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.lp-opts span {
  font-size: 12.5px; text-align: center; padding: 9px 4px;
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-secondary);
}
.lp-opts span.on {
  border-color: var(--sig-coral); color: var(--sig-coral);
  background: color-mix(in srgb, var(--sig-coral) 7%, #fff); font-weight: var(--w-medium);
}
.lp-cta { margin-top: auto; text-align: center; padding: 10px; border-radius: var(--r-sm);
  background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: var(--w-medium); }

.mock-side { padding: 16px 14px; }
.ms-h { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.ms-row { display: flex; align-items: center; gap: 9px; padding: 9px 0;
  font-size: 13px; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.ms-row:last-child { border-bottom: 0; }
.sq { width: 20px; height: 20px; border-radius: var(--r-sm); flex: none; }
.sq.c1 { background: var(--sig-peach); }
.sq.c2 { background: var(--sig-mint); }
.sq.c3 { background: var(--sig-yellow); }
.sq.c4 { background: var(--sig-cream); }

/* ── 목업 2: 리드 DB ── */
.mock-table { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.mt-head, .mt-row {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px;
  padding: 11px 16px; align-items: center; font-size: 13px;
}
.mt-head { background: var(--bg-base); color: var(--text-secondary); font-weight: var(--w-medium); }
.mt-row { border-top: 1px solid var(--border); color: var(--text-primary); }
.bdg { font-style: normal; display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: var(--w-medium); color: #fff; }
.b-new  { background: var(--st-new); }
.b-call { background: var(--st-callback); }
.b-apt  { background: var(--st-appointment); color: var(--st-appointment-fg); }
.b-done { background: var(--st-done); }
.b-no   { background: var(--st-no_answer); color: var(--st-no_answer-fg); }
.b-hold { background: var(--st-hold); }

/* ── 목업 3: 유입 분류 ── */
.mock-src { border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 16px; }
.src-row { display: grid; grid-template-columns: 88px 1fr 40px; gap: 12px; align-items: center; margin-bottom: 13px; }
.src-row b { font-size: 12.5px; font-weight: var(--w-medium); color: var(--text-primary); }
.src-row i { display: block; height: 9px; width: var(--w); border-radius: var(--r-pill); }
.src-row em { font-style: normal; font-size: 12.5px; text-align: right; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.s1 { background: var(--sig-coral); } .s2 { background: var(--sig-mustard); }
.s3 { background: var(--accent); }    .s4 { background: var(--sig-mint); }
.s5 { background: var(--border-strong); }
.src-note { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-secondary); }
.src-note code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0;
  padding: 1px 5px; border-radius: var(--r-xs); background: var(--bg-base); }

/* ── 목업 4: 성과 리포트 ── */
.pv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pv-kpi { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 5px; }
.pv-kpi span { font-size: 11.5px; color: var(--text-secondary); }
.pv-kpi b { font-size: 18px; font-weight: var(--w-semibold); color: var(--text-primary);
  letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pv-kpi.is-hi { background: var(--sig-forest); border-color: var(--sig-forest); }
.pv-kpi.is-hi span { color: rgba(255,255,255,.72); }
.pv-kpi.is-hi b { color: #fff; }

.pv-chart { border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 14px 12px; }
.pv-bars { display: flex; align-items: flex-end; gap: 8px; height: 118px; }
.pv-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--sig-coral); opacity: .9; }
.pv-bars i:nth-child(3n+2) { background: var(--sig-mustard); }
.pv-bars i:nth-child(3n+3) { background: var(--accent); }
.pv-legend { display: flex; gap: 14px; margin-top: 12px; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); }
.lg::before { content: ""; width: 9px; height: 9px; border-radius: 2px; }
.lg-1::before { background: var(--sig-coral); }
.lg-2::before { background: var(--sig-mustard); }
.lg-3::before { background: var(--accent); }

/* ─── 시그니처 색면 ─────────────────────────────── */
.sig { border-radius: var(--r-lg); padding: 56px 48px; }
.sig h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: var(--w-regular); line-height: 1.3; margin: 0 0 20px; }
.sig p { font-size: 16px; line-height: 1.75; margin: 0; }
.sig b { font-weight: var(--w-medium); }
.sig code { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0;
  padding: 1px 6px; border-radius: var(--r-xs); background: rgba(24,29,38,.08); color: inherit; }

.sig-coral { background: var(--sig-coral); color: #fff; }
.sig-coral p { color: rgba(255,255,255,.82); max-width: 780px; }
.sig-dark { background: var(--surface-dark); color: #fff; text-align: center; }
.sig-dark p { color: rgba(255,255,255,.72); }
.sig-cream { background: var(--sig-cream); color: var(--ink); }
.sig-cream .eyebrow { color: rgba(24,29,38,.62); }
.sig-cream .sig-lead { color: rgba(24,29,38,.78); max-width: 800px; margin-bottom: 40px; }

.cta-final h2 { margin-bottom: 12px; }
.cta-final p { margin-bottom: 32px; }

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.flow li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px;
  border-top: 1px solid rgba(24,29,38,.18); }
.flow span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0;
  color: var(--sig-coral); font-weight: var(--w-semibold); }
.flow b { font-size: 16px; font-weight: var(--w-medium); }
.flow i { font-style: normal; font-size: 13.5px; line-height: 1.6; color: rgba(24,29,38,.66); }

/* ─── 설계 철학 ─────────────────────────────── */
.phil-head { max-width: 760px; margin-bottom: 48px; }
.phil-head .sec-h2 { margin-bottom: 24px; }
.phil-lead { font-size: 16px; line-height: 1.85; color: var(--text-secondary); margin: 0; }
.phil-lead b { color: var(--text-primary); font-weight: var(--w-medium); }

.phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.phil { padding-top: 20px; border-top: 2px solid var(--ink); }
.phil b { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0;
  color: var(--sig-coral); font-weight: var(--w-semibold); margin-bottom: 10px; }
.phil h3 { font-size: 17px; font-weight: var(--w-medium); color: var(--text-primary); margin: 0 0 10px; }
.phil p { font-size: 14.5px; line-height: 1.75; color: var(--text-secondary); margin: 0; }

/* 하는 것 / 하지 않는 것 */
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.scope-col { padding: 28px 32px; }
.scope-do { background: var(--bg-surface); }
.scope-dont { background: var(--bg-base); border-left: 1px solid var(--border); }
.scope-h { font-size: 13px; font-weight: var(--w-medium); margin: 0 0 16px; }
.scope-do .scope-h { color: var(--success); }
.scope-dont .scope-h { color: var(--text-disabled); }
.scope ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.scope li { font-size: 14.5px; line-height: 1.6; display: flex; gap: 9px; }
.scope-do li { color: var(--text-primary); }
.scope-do li::before { content: "✓"; color: var(--success); font-weight: var(--w-semibold); flex: none; }
.scope-dont li { color: var(--text-disabled); }
.scope-dont li::before { content: "—"; flex: none; }

/* ─── 기능 카드 ─────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feat { background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px 28px; }
.feat-ico { width: 40px; height: 40px; border-radius: var(--r-md); margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-base); color: var(--sig-coral); }
.feat-ico svg { width: 21px; height: 21px; }
.feat h3 { font-size: 18px; font-weight: var(--w-medium); margin: 0 0 12px; color: var(--text-primary); }
.feat p { font-size: 14.5px; line-height: 1.75; color: var(--text-secondary); margin: 0; }
.feat b { color: var(--text-primary); font-weight: var(--w-medium); }

/* ─── 숫자 ─────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-surface); padding: 32px; }
.stat { display: flex; align-items: baseline; gap: 14px; }
.stat b { font-size: 40px; font-weight: var(--w-semibold); color: var(--text-primary);
  letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1; }
.stat span { font-size: 14px; font-weight: var(--w-medium); color: var(--text-primary); line-height: 1.5; }
.stat small { font-size: 12.5px; font-weight: var(--w-regular); color: var(--text-secondary); }

/* ─── 푸터 ─────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-copy { flex: 1; font-size: 13px; color: var(--text-secondary); }
.foot-login { font-size: 13px; font-weight: var(--w-medium); color: var(--text-secondary); text-decoration: none; }
.foot-login:hover { color: var(--text-primary); }

/* ─── 반응형 ─────────────────────────────── */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { max-width: none; }
}
@media (max-width: 900px) {
  .site-nav, .header-cta { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .band { padding: 64px 0; }
  .hero { padding: 48px 0 72px; }
  .br-pc { display: none; }
  .sig { padding: 40px 28px; }
  .feat-grid, .phil-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; padding: 24px; }
  .scope { grid-template-columns: 1fr; }
  .scope-dont { border-left: 0; border-top: 1px solid var(--border); }
  .chapters { grid-template-columns: 1fr 1fr; gap: 10px 8px; }
}
@media (max-width: 560px) {
  .flow, .stat-row { grid-template-columns: 1fr; }
  .hero-actions .btn-h { width: 100%; }
  .slide { padding: 16px; min-height: 300px; }
  .slide:first-child { grid-template-columns: 1fr; }
  .pv-kpis { grid-template-columns: 1fr 1fr; }
  .pv-bars { height: 96px; gap: 6px; }
}

/* 움직임을 줄여달라는 사용자에겐 전부 정지.
   배경은 숨기지 않고 "멈춘 상태"로 남긴다 — 분위기는 모션이 아니라 색에서 오기 때문. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-title .line > span { transform: none; animation: none; }
  .slide { transition: none; }
  .chap-p { animation: none !important; }
  .hero-bg, .hero-bg::after, .hero-bg .orb,
  .mobile-nav, .nav-scrim { animation: none; transition: none; }
}