/* ==========================================================================
   Wecha (wecha.kr) — 공통 스타일시트 (Brand 2.0 · Electric Blue · 2026-06)
   디자인 언어: 라이트 베이스, 헤어라인 보더 벤토 그리드, 대형 헤드라인 +
   포인트 단어, 네이비 사각 CTA, 모노 대문자 라벨. 다크 밴드는 Electric Navy.
   브랜드 토큰(공식 가이드라인 v1.0): Electric Navy #0B2E6B / Core Blue #1A56C4 /
   Sky Blue #2E8BE6 / Charge Cyan #36CFF5 · Ink #16213E / Mist #F4F6F9.
   대비 원칙: 네이비 주조색(≈46%), Core Blue 는 버튼·링크·강조,
   Charge Cyan 은 포인트(≤10%)로만. 시그니처 그라데이션 135° Navy→Cyan.
   ========================================================================== */

:root {
  /* 브랜드 — Electric Blue */
  --navy: #0B2E6B;        /* Electric Navy — 기준색·워드마크·다크 밴드 */
  --navy-2: #0E367E;      /* 다크 카드 hover */
  --navy-hover: #0A2658;  /* 네이비 버튼 hover */
  --core: #1A56C4;        /* Core Blue — 버튼·링크·보조강조·포커스 */
  --core-deep: #1648A6;
  --sky: #2E8BE6;         /* Sky Blue — 그라데이션·보조 UI */
  --cyan: #36CFF5;        /* Charge Cyan — 포인트·하이라이트(≤10%) */
  --cyan-deep: #1FB8E0;
  --accent-soft: #E8F0FE; /* 연한 블루 틴트 — info/ok 배경·뱃지 */
  --red: #DC2626;

  --ink: #16213E;         /* Ink — 본문·제목 */
  --surface-dark: #0A0E1A;/* Black Ink — 순다크(폰 베젤·CCTV) */
  --slate: #3A4658;       /* 본문 보조(가독) */
  --muted: #6B7280;       /* Slate — 캡션·보조 */
  --line: #E4E8EF;        /* Line — 보더 */
  --line-soft: #EEF1F6;
  --bg: #ffffff;
  --bg-soft: #FBFCFE;
  --bg-mute: #F4F6F9;     /* Mist — 카드·섹션 배경 */

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Segoe UI", Roboto, "Malgun Gothic", "맑은 고딕", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --maxw: 1280px;
  --radius: 10px;
  --radius-sm: 6px;
  --nav-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 18px; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--core); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; letter-spacing: -0.03em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.85rem, 6vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.35rem); font-weight: 800; }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.58rem); font-weight: 750; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; color: var(--slate); text-wrap: pretty; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- 유틸 ---------- */
.eyebrow {
  display: inline-block; font-family: var(--font); font-size: .86rem; font-weight: 750;
  letter-spacing: .06em; color: var(--core); text-transform: uppercase; margin-bottom: 16px;
}
.section--navy .eyebrow { color: var(--cyan); }
.lead { font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--slate); max-width: 56ch; line-height: 1.6; font-weight: 500; text-wrap: pretty; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.accent { color: var(--core); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--soft { background: var(--bg-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section--navy { background: var(--navy); color: #C9D6EF; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #9DB4DC; }
.section--navy .eyebrow { color: var(--cyan); }
.section-head { max-width: 62ch; margin: 0 auto clamp(40px, 5vw, 64px); }
.section-head.left { margin-left: 0; }

/* ---------- 버튼 (렌더식: 잉크 사각 + 아웃라인) ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: inherit; font-weight: 650; font-size: 1rem; line-height: 1;
  padding: 16px 26px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease,
    transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.btn::after { content: "→"; font-weight: 600; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.btn:hover { text-decoration: none; }
.btn:hover::after { transform: translateX(4px); }

/* ── Primary — 누르고 싶은 CTA (그라데이션·광택·글로우·리프트) ── */
.btn--primary {
  color: #fff;
  background-image: linear-gradient(135deg, var(--navy) 0%, var(--core) 52%, var(--sky) 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 6px 16px -6px rgba(11,46,107,.55),
    0 2px 6px -2px rgba(11,46,107,.35);
  transition: background-position .5s ease, transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease;
}
.btn--primary::before {                 /* 빛이 훑고 지나가는 광택 */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.45) 50%, transparent 72%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.btn--primary:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 14px 28px -8px rgba(26,86,196,.6),
    0 6px 16px -6px rgba(54,207,245,.5);
}
.btn--primary:hover::before { transform: translateX(130%) skewX(-12deg); }
.btn--primary:active { transform: translateY(0) scale(.985); box-shadow: 0 4px 12px -6px rgba(11,46,107,.5); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost::after { content: none; }
.btn--lg { padding: 18px 32px; font-size: 1.08rem; }
.btn--block { width: 100%; }

/* 다크(네이비) 섹션 위의 Primary — 시안 그라데이션 */
.section--navy .btn--primary {
  color: var(--ink);
  background-image: linear-gradient(135deg, var(--cyan) 0%, var(--sky) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 8px 22px -6px rgba(54,207,245,.5);
}
.section--navy .btn--primary:hover {
  background-position: 100% 50%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 16px 30px -8px rgba(54,207,245,.7);
}
.section--navy .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.section--navy .btn--ghost:hover { border-color: #fff; }

/* ---------- 플로팅 문의 버튼 (FAB) ---------- */
.fab {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px 14px 17px;
  border-radius: 999px;
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1; color: #fff;
  background-image: linear-gradient(135deg, var(--navy) 0%, var(--core) 55%, var(--sky) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 10px 26px -8px rgba(11,46,107,.6),
    0 4px 14px -4px rgba(54,207,245,.42);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease,
    opacity .3s ease, visibility .3s;
  animation: fabIn .55s cubic-bezier(.2,.8,.2,1) both;
}
.fab:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 16px 32px -8px rgba(26,86,196,.62),
    0 6px 18px -4px rgba(54,207,245,.5);
}
.fab:active { transform: translateY(-1px) scale(.98); }
.fab__ic { display: inline-flex; flex: none; }
.fab__ic svg { width: 22px; height: 22px; display: block; }
.fab__label { white-space: nowrap; }
.fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(18px) scale(.92); pointer-events: none; }
@keyframes fabIn { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .fab { padding: 13px 18px 13px 15px; font-size: .95rem; }
  .fab__ic svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab { animation: none; }
  .fab:hover, .fab:active { transform: none; }
}

/* ---------- 내비게이션 ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); font-size: 1.55rem; letter-spacing: -.04em; }
.brand:hover { text-decoration: none; }
.brand__logo { height: 30px; width: auto; display: block; }
.footer__brand .brand__logo { height: 30px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { color: var(--slate); font-weight: 550; font-size: 1rem; }
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__cta .btn { padding: 11px 18px; font-size: .9rem; }
.nav__toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center; flex-direction: column; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 4px 0; border-radius: 2px; transition: .2s; }
.nav__mcta { display: none; }

/* ---------- 히어로 (렌더식: 라이트 + 그리드 셀 + 포인트 단어) ---------- */
.hero { position: relative; overflow: hidden; background: var(--bg); padding: clamp(72px, 10vw, 130px) 0 clamp(64px, 9vw, 110px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(70% 90% at 80% 0%, rgba(0,0,0,.9), transparent 70%);
  mask-image: radial-gradient(70% 90% at 80% 0%, rgba(0,0,0,.9), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; z-index: 0; right: -140px; top: -160px; width: 560px; height: 560px;
  background: radial-gradient(closest-side, rgba(54, 207, 245, .35), transparent 70%);
}
.hero__inner { position: relative; z-index: 1; max-width: 820px; }
.hero h1 { margin-bottom: 24px; font-weight: 800; }
.hero h1 .accent { color: var(--core); }
.hero .lead { max-width: 54ch; font-size: clamp(1.24rem, 2.1vw, 1.58rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__note { margin-top: 20px; font-size: .92rem; letter-spacing: 0; color: var(--muted); }

/* ---------- 분기 카드 ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.branch { position: relative; padding: 36px 32px; background: #fff; transition: background .15s ease; }
.branch + .branch { border-left: 1px solid var(--line); }
.branch:hover { background: var(--bg-soft); text-decoration: none; }
.branch h3 { margin: 10px 0 8px; }
.branch p { margin-bottom: 18px; font-size: 1.06rem; }
.branch__tag { font-family: var(--font); font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--core); }
.branch__arrow { font-weight: 650; color: var(--ink); font-size: .95rem; }
.branch:hover .branch__arrow { color: var(--core); }

/* ---------- 카드 그리드 (벤토: 헤어라인 보더) ---------- */
.grid { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.grid { gap: 1px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card { background: #fff; padding: 38px 32px; transition: background .15s ease; }
.card:hover { background: var(--bg-soft); }
.card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.card p { margin-bottom: 0; font-size: 1.08rem; }
.card__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; margin-bottom: 16px;
  background: var(--cyan); color: var(--ink); font-family: var(--font); font-weight: 700; font-size: .82rem;
}
.section--navy .grid { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.14); }
.section--navy .card { background: var(--navy); }
.section--navy .card:hover { background: var(--navy-2); }
.section--navy .card h3 { color: #fff; }
.section--navy .card p { color: #8FA6CE; }
.section--navy .card__num { background: var(--cyan); color: var(--ink); }

/* ---------- 통계 스트립 ---------- */
.stats-band { padding: 0 0 clamp(48px, 7vw, 88px); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { text-align: center; padding: clamp(30px, 4vw, 48px) 16px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__v { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 600; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; }
.stat__l { font-size: 1rem; color: var(--muted); max-width: 30ch; margin: 8px auto 0; }
.section--navy .stat__v { color: #fff; }
.section--navy .stat__l { color: #8FA6CE; }

/* ---------- 절차(스텝) — 렌더식 숫자 칩 ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; counter-reset: step; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.step { padding: 28px 24px; background: #fff; transition: background .15s ease; }
.step:hover { background: var(--bg-soft); }
.step__n { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 5px; background: var(--cyan); color: var(--ink); font-family: var(--font); font-weight: 700; font-size: .72rem; letter-spacing: .06em; margin-bottom: 14px; }
.step h4 { color: var(--ink); margin: 0 0 6px; font-size: 1.18rem; font-weight: 700; }
.step p { margin: 0; font-size: 1rem; }

/* ---------- 체크 리스트 ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; color: var(--slate); font-size: 1.08rem; }
.checks li strong { color: var(--ink); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px; border-radius: 6px;
  background: var(--cyan);
}
.checks li::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px;
  background: var(--navy);
  -webkit-mask: center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask: center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq details { padding: 4px 22px; background: #fff; }
.faq details + details { border-top: 1px solid var(--line-soft); }
.faq details:hover { background: var(--bg-soft); }
.faq summary { cursor: pointer; font-weight: 650; color: var(--ink); padding: 18px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 1.06rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--core); font-weight: 500; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; }

/* ---------- CTA 밴드 ---------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 12px; }
.cta-band .lead { margin: 0 auto 28px; }
.cta-band .hero__actions { justify-content: center; margin-top: 0; }
.cta-band:not(.section--navy) { padding-top: 0; }
.cta-band:not(.section--navy) .container {
  position: relative; overflow: hidden;
  background: var(--navy); border-radius: var(--radius);
  padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 56px);
}
.cta-band:not(.section--navy) .container::before {
  content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(54, 207, 245, .28), transparent 70%);
}
.cta-band:not(.section--navy) h2 { color: #fff; position: relative; }
.cta-band:not(.section--navy) .lead { color: #9DB4DC; position: relative; }
.cta-band:not(.section--navy) .hero__actions { position: relative; }
.cta-band:not(.section--navy) .btn--primary { background: var(--cyan); color: var(--ink); }
.cta-band:not(.section--navy) .btn--primary:hover { background: var(--cyan-deep); }
.cta-band:not(.section--navy) .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.cta-band:not(.section--navy) .btn--ghost:hover { border-color: #fff; }

/* ---------- 폼 ---------- */
.form-wrap { max-width: 640px; margin: 0 auto; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 650; color: var(--ink); font-size: .9rem; margin-bottom: 7px; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .12s ease, box-shadow .12s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--core); box-shadow: 0 0 0 3px rgba(26, 86, 196, .25);
}
.field textarea { resize: vertical; min-height: 130px; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--slate); }
.consent input { width: auto; margin-top: 4px; }
.form-msg { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: .94rem; display: none; }
.form-msg.is-ok { display: block; background: var(--accent-soft); color: var(--core); border: 1px solid var(--cyan); }
.form-msg.is-err { display: block; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ---------- 문서(본문 텍스트) ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 1.4rem; margin-top: 2em; }
.prose h3 { font-size: 1.1rem; margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; color: var(--slate); }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .94rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--bg-mute); color: var(--ink); }

/* ---------- 푸터 ---------- */
.footer { background: var(--navy); color: #C2CFE6; padding: 64px 0 40px; font-size: 1rem; }
.footer a { color: #DCE6F5; }
.footer p { color: #9DB4DC; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer__brand { color: #fff; font-weight: 800; font-size: 1.5rem; letter-spacing: -.04em; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 10px; }
.footer__col h4 { color: #fff; font-family: var(--font); font-size: .95rem; letter-spacing: .02em; margin-bottom: 14px; font-weight: 750; }
.footer__col a { display: block; margin-bottom: 10px; color: #C2CFE6; }
.footer__col a:hover { color: #fff; }
.footer__legal { padding-top: 24px; color: #8295B5; line-height: 1.9; font-size: .84rem; }
.footer__legal .placeholder { color: #D9A0A0; }
.badge-soft { display: inline-block; padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.08); font-size: .76rem; margin-top: 8px; }

/* ---------- 진입 애니메이션 ---------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .38s ease, transform .38s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn--primary::before { display: none; }
  .btn--primary:hover, .btn--primary:active { transform: none; }
}

/* ---------- 접근성 ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(26, 86, 196, .8); outline-offset: 2px; border-radius: 6px;
}
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: flex; }
  .nav[data-open="true"] .nav__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: var(--nav-h); left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--line); padding: 12px 24px 18px;
  }
  .nav[data-open="true"] .nav__links a { padding: 10px 0; width: 100%; }
  .nav[data-open="true"] .nav__links .nav__mcta { display: inline-flex; width: 100%; margin-top: 10px; padding: 13px 18px; }
  .split, .grid--2, .grid--3, .stats { grid-template-columns: 1fr; }
  .branch + .branch { border-left: 0; border-top: 1px solid var(--line); }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
}

/* 벤토 그리드 안의 체크리스트 셀 */
.grid .checks { background: #fff; padding: 30px 28px; }
.grid .checks:hover { background: var(--bg-soft); }

/* ==========================================================================
   v3 — 홈 리뉴얼 (2026-06-06): 히어로 2단 + 폰 목업, 딜레마/제3의 길, 비교표
   ========================================================================== */

/* ---------- 히어로 2단 ---------- */
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__grid .hero__inner { max-width: none; }

/* ---------- 폰 목업 (위차 앱) ---------- */
.phone {
  width: min(330px, 100%); margin: 0 auto; border-radius: 46px; position: relative;
  background: linear-gradient(145deg, #2B3450 0%, #0B0E18 52%, #181E30 100%);
  padding: 8px;
  box-shadow: 0 46px 92px rgba(9,16,34,.38), 0 18px 38px rgba(9,16,34,.24),
              inset 0 2px 1px rgba(255,255,255,.22), inset 0 0 0 1.5px rgba(255,255,255,.06);
}
.phone::before { content: ""; position: absolute; left: -3px; top: 150px; width: 3px; height: 62px; border-radius: 3px; background: #1B2236; }
.phone::after { content: ""; position: absolute; right: -3px; top: 172px; width: 3px; height: 50px; border-radius: 3px; background: #1B2236; }
.phone__screen {
  border-radius: 38px; overflow: hidden; background: var(--bg-mute); position: relative;
  aspect-ratio: 9 / 18.2; display: flex; flex-direction: column;
}
.phone__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 15%, transparent 33%); }
.phone__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 8px; font-family: var(--font); font-size: .62rem; color: var(--slate); background: var(--bg-mute); }
.phone__notch { width: 90px; height: 24px; border-radius: 13px; background: #05070C; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.app { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.app__greet { display: flex; justify-content: space-between; align-items: center; }
.app__greet b { font-size: .92rem; color: var(--ink); letter-spacing: -.02em; }
.app__greet span { font-size: .62rem; color: var(--muted); }
.app__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800; color: var(--ink); }
.app-kpi { background: var(--navy); border-radius: 16px; padding: 16px 16px 14px; color: #9DB4DC; }
.app-kpi__l { font-size: .62rem; font-weight: 650; letter-spacing: .03em; color: #7E93B8; }
.app-kpi__v { font-size: 1.7rem; font-weight: 750; color: var(--cyan); letter-spacing: -.03em; line-height: 1.2; }
.app-kpi__v small { font-size: .85rem; font-weight: 600; color: #C9D6EF; }
.app-kpi__row { display: flex; justify-content: space-between; margin-top: 8px; font-size: .7rem; }
.app-kpi__row b { color: #fff; font-weight: 650; }
.app__quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.app__quick span { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 9px 2px; text-align: center; font-size: .6rem; font-weight: 650; color: var(--ink); word-break: keep-all; }
.app__sect { font-size: .68rem; font-weight: 700; color: var(--slate); margin-top: 2px; }
.app-row { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; }
.app-row__t { font-size: .68rem; font-weight: 650; color: var(--ink); }
.app-row__s { font-size: .58rem; color: var(--muted); display: block; margin-top: 2px; }
.app-row__v { font-size: .7rem; font-weight: 700; color: var(--ink); text-align: right; }
.app-badge { display: inline-block; font-size: .52rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--core); margin-left: 4px; }
.app__tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); padding-top: 9px; margin-top: auto; }
.app__tabs span { text-align: center; font-size: .56rem; color: var(--muted); font-weight: 600; }
.app__tabs span.on { color: var(--core); font-weight: 750; }

/* 폰 목업 3종 나란히 */
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.phones .phone { width: min(300px, 100%); }
.phone__cap { text-align: center; margin-top: 16px; }
.phone__cap b { display: block; font-size: 1.04rem; color: var(--ink); letter-spacing: -.02em; }
.phone__cap span { font-size: .88rem; color: var(--muted); }

/* ---------- 딜레마 (문제 제기) ---------- */
.dilemma { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.dilemma__cell { background: #fff; padding: clamp(28px, 4vw, 44px); }
.dilemma__tag { display: inline-block; font-family: var(--font); font-size: .8rem; font-weight: 750; letter-spacing: .01em; padding: 5px 12px; border-radius: 7px; background: #FEF2F2; color: #991B1B; margin-bottom: 14px; }
.dilemma__cell h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.dilemma__cell ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.dilemma__cell li { position: relative; padding-left: 28px; color: var(--slate); font-size: 1.1rem; }
.dilemma__cell li::before { content: "\00d7"; position: absolute; left: 2px; top: -1px; color: #B91C1C; font-weight: 800; font-size: 1.05rem; }
.dilemma__quote { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--line); background: var(--bg-soft); border-radius: 0 8px 8px 0; font-size: 1rem; color: var(--slate); }
.srcnote { margin-top: 18px; font-size: .88rem; color: var(--muted); line-height: 1.8; }
.srcnote a { color: var(--muted); text-decoration: underline; }

/* ---------- 제3의 길 (다크 솔루션 밴드) ---------- */
.savior { position: relative; overflow: hidden; }
.savior::before { content: ""; position: absolute; right: -160px; top: -180px; width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(54,207,245,.2), transparent 70%); }
.savior .container { position: relative; }
.savior h2 .accent { color: var(--cyan); }

/* ---------- 비교표 ---------- */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: clamp(1rem, 1.5vw, 1.1rem); }
.cmp th, .cmp td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cmp thead th { background: var(--bg-mute); font-weight: 700; color: var(--ink); font-size: .95em; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { font-weight: 650; color: var(--ink); background: var(--bg-soft); width: 18%; }
.cmp td { color: var(--slate); width: 27%; }
.cmp .is-wecha { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.cmp thead th.is-wecha { background: var(--cyan); color: var(--ink); }
.cmp .bad { color: #991B1B; }
.cmp .ok { color: var(--core); font-weight: 700; }
.cmp-wrap { overflow-x: auto; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__grid .phone { display: none; }
  .dilemma { grid-template-columns: 1fr; }
  .phones { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .cmp { font-size: .85rem; }
  .cmp th, .cmp td { padding: 12px 12px; }
}

/* ---------- 입주민 시나리오 2분기 ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.duo__cell { background: #fff; padding: clamp(26px, 4vw, 40px); }
.duo__tag { display: inline-block; font-family: var(--font); font-size: .8rem; font-weight: 750; letter-spacing: .01em; padding: 5px 12px; border-radius: 7px; background: var(--accent-soft); color: var(--core); margin-bottom: 14px; }
.duo__cell h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.duo__cell p { font-size: 1.1rem; margin-bottom: 0; }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }

/* ---------- 픽토그램 칩 ---------- */
.card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--navy), var(--sky)); color: #fff;
}
.card__ico svg { width: 24px; height: 24px; }
.branch .card__ico { width: 40px; height: 40px; margin-bottom: 4px; }
.branch .card__ico svg { width: 21px; height: 21px; }
.duo__cell .card__ico { margin-bottom: 6px; margin-left: 12px; vertical-align: middle; }
.duo__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section--navy .card__ico { background: var(--cyan); color: var(--ink); }

/* ==========================================================================
   v4 — 안전 섹션 관제실 리디자인
   ========================================================================== */
.safety { background: linear-gradient(180deg, #0C2F6E 0%, #07193D 100%); color: #C9D6EF; position: relative; overflow: hidden; }
.safety::before { content: ""; position: absolute; left: -180px; top: -180px; width: 560px; height: 560px;
  background: radial-gradient(closest-side, rgba(220, 38, 38, .16), transparent 70%); }
.safety::after { content: ""; position: absolute; right: -180px; bottom: -200px; width: 640px; height: 640px;
  background: radial-gradient(closest-side, rgba(54, 207, 245, .14), transparent 70%); }
.safety .container { position: relative; z-index: 1; }
.safety h2, .safety h3 { color: #fff; }
.safety .eyebrow { color: var(--cyan); }
.safety .lead { color: #CBD8EF; }
.safety__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-bottom: clamp(40px, 6vw, 72px); }

/* 골든타임 비교 바 */
.gtime { display: grid; gap: 20px; margin-top: 30px; }
.gtime__row { display: grid; gap: 8px; }
.gtime__label { display: flex; justify-content: space-between; font-size: .98rem; }
.gtime__label b { color: #fff; font-weight: 700; }
.gtime__label span { color: #9FB4D6; }
.gtime__track { position: relative; height: 20px; border-radius: 10px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.gtime__bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; }
.gtime__bar--ai { width: 38%; background: linear-gradient(90deg, #2E8BE6, #5FE3FF); box-shadow: 0 0 16px rgba(54, 207, 245, .55); }
.gtime__bar--old { width: 89%; background: linear-gradient(90deg, #8094BE, #E5484D); box-shadow: 0 0 14px rgba(229, 72, 77, .4); }
.gtime__gap { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 14px; border-radius: 8px;
  background: rgba(54, 207, 245, .16); border: 1px solid rgba(54, 207, 245, .42); color: var(--cyan); font-weight: 750; font-size: 1.12rem; }

/* CCTV 관제 모니터 목업 */
.monitor { border-radius: 18px; background: #0A1124; border: 1px solid rgba(54,207,245,.22); overflow: hidden; position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 54px rgba(54,207,245,.12); }
.monitor__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px;
  background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font); font-size: .74rem; color: #7E93B8; letter-spacing: .03em; }
.monitor__rec { color: #F87171; display: inline-flex; align-items: center; gap: 6px; }
.monitor__rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #EF4444; animation: blink 1.2s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.monitor svg { display: block; width: 100%; height: auto; }

/* 타임라인 (연결선) */
.tline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 32px); margin-top: 10px; }
.tline::before { content: ""; position: absolute; left: 2%; right: 2%; top: 13px; height: 2px;
  background: linear-gradient(90deg, var(--cyan), rgba(54,207,245,.25)); }
.tline__item { position: relative; padding-top: 38px; }
.tline__item::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--navy); border: 3px solid var(--cyan); }
.tline__t { display: inline-block; font-family: var(--font); font-weight: 700; font-size: .78rem; color: var(--ink);
  background: var(--cyan); padding: 3px 10px; border-radius: 6px; margin-bottom: 10px; }
.tline__item h4 { color: #fff; font-size: 1.12rem; margin: 0 0 6px; }
.tline__item p { color: #B3C4E0; font-size: .98rem; margin: 0; }
.safety .srcnote { color: #9DB4DC; }
.safety .srcnote a { color: #9DB4DC; }

@media (max-width: 900px) {
  .safety__grid { grid-template-columns: 1fr; }
  .tline { grid-template-columns: 1fr; gap: 22px; }
  .tline::before { left: 7px; right: auto; top: 2%; bottom: 2%; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--cyan), rgba(54,207,245,.25)); }
  .tline__item { padding-top: 0; padding-left: 36px; }
}

/* ==========================================================================
   v5 — 모바일 최적화 (2026-06-07)
   ========================================================================== */

/* 한국어 줄바꿈: 단어 단위 (전 해상도 공통) */
h1, h2, h3, h4, p, li, summary, dt, dd, .lead, .stat__l, .branch__tag, .phone__cap,
.gtime__label, .tline__item, .cmp th, .cmp td { word-break: keep-all; overflow-wrap: break-word; }

@media (max-width: 720px) {
  html { font-size: 17px; }

  /* 데스크톱용 수동 줄바꿈 해제 → 자연 줄바꿈 */
  h1 br, h2 br, h3 br { display: none; }

  /* 타이포 스케일 */
  h1 { font-size: clamp(2.05rem, 8.6vw, 2.5rem); line-height: 1.22; }
  h2 { font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.26; }
  .lead { font-size: 1.14rem; }
  .hero .lead { font-size: 1.2rem; }

  /* 여백 압축 */
  .section { padding: 56px 0; }
  .hero { padding: 52px 0 56px; }
  .section-head { margin-bottom: 34px; }

  /* CTA 풀폭 */
  .hero__actions { gap: 10px; }
  .hero__actions .btn { width: 100%; }

  /* 카드·셀 패딩 */
  .card { padding: 26px 22px; }
  .dilemma__cell, .duo__cell { padding: 26px 22px; }
  .branch { padding: 28px 22px; }

  /* 수치 스트립 */
  .stat { padding: 24px 14px; }
  .stat__v { font-size: 2.1rem; }

  /* 비교표: 엣지 투 엣지 가로 스크롤 */
  .cmp-wrap { margin: 0 -24px; padding: 0 24px 6px; }
  .cmp { min-width: 660px; font-size: .92rem; }
  .cmp th, .cmp td { padding: 12px 12px; }

  /* 골든타임 라벨 줄바꿈 허용 */
  .gtime__label { flex-wrap: wrap; row-gap: 2px; }
  .gtime__gap { font-size: .98rem; }

  /* 안전 섹션 좌측 텍스트 크기 보정 */
  .safety__grid h3 { font-size: 1.5rem !important; }

  /* 푸터 */
  .footer { padding: 48px 0 32px; }
  .footer__legal { font-size: .8rem; }

  /* FAQ */
  .faq details { padding: 2px 16px; }
  .faq summary { font-size: 1rem; }

  /* 스크롤 길이 압축: 일러스트 높이 캡 + 섹션 내부 리듬 축소 */
  .section { padding: 50px 0; }
  .features { gap: 40px; }
  .feature { gap: 16px; }
  .feature__media { padding: 18px; }
  .feature__media svg { max-height: 218px; }
  .probs { gap: 44px; }
  .prob__title { margin-bottom: 24px; }
  .prob__media { max-width: 440px; margin-bottom: 28px; }
  .prob__list { gap: 18px; margin-bottom: 24px; }
  .solgrid { gap: 14px; }
  .sol__media svg { max-height: 190px; }
  .sol__body { padding: 22px 22px 24px; }
  .phone__cap { margin-top: 12px; }
  .tline { gap: 18px; }
  .totalcare { gap: 10px; margin-top: 28px; }
  .steps { grid-template-columns: 1fr; }
  .step { padding: 22px 20px; }

  /* 앱 목업 3종: 세로 나열 → 가로 스와이프 (다음 카드 살짝 보이는 피크) */
  .phones {
    display: flex; max-width: none; gap: 14px;
    margin: 0 -24px; padding: 4px 24px 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .phones::-webkit-scrollbar { display: none; }
  .phones > div { flex: 0 0 76%; max-width: 290px; scroll-snap-align: center; }
  .phones .phone { width: 100%; }
}

/* 초소형 (360px 이하) */
@media (max-width: 380px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  .container { padding: 0 18px; }
  .cmp-wrap { margin: 0 -18px; padding: 0 18px 6px; }
}

/* ==========================================================================
   v6 — 무료 진단 (직영 충전 원가 계산기) 페이지 (2026-06-16)
   ========================================================================== */
.dg { }
.dg-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line);
}
.dg-inputs { background: #fff; padding: clamp(24px, 3.4vw, 40px); }
.dg-result { background: var(--bg-soft); padding: clamp(24px, 3.4vw, 40px); }
@media (max-width: 900px) { .dg-grid { grid-template-columns: 1fr; } }

.dg-h { font-size: 1.18rem; margin: 0; }
.dg-sub { font-size: .96rem; color: var(--muted); margin: 8px 0 22px; }
.dg-hint { font-size: .82rem; color: var(--muted); margin: 6px 0 0; line-height: 1.55; }

.dg-panel__head, .dg-result__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* 모드 토글 (세그먼트) */
.dg-modes { display: inline-flex; padding: 4px; gap: 4px; background: var(--bg-mute); border: 1px solid var(--line); border-radius: 9px; }
.dg-modes button {
  font: inherit; font-weight: 650; font-size: .88rem; padding: 7px 16px; border: 0; border-radius: 6px;
  background: transparent; color: var(--slate); cursor: pointer; transition: background .14s ease, color .14s ease;
}
.dg-modes button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.1); }

/* 입력 그리드 */
.dg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dg-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .dg-row2 { grid-template-columns: 1fr; } }

/* 슬라이더 */
.dg-range { width: 100%; accent-color: var(--core); height: 28px; cursor: pointer; }
.dg-util-out { font-family: var(--font); font-weight: 700; color: var(--core); margin-left: 6px; }

/* 상세 입력 */
.dg-adv { display: none; margin-top: 8px; padding-top: 20px; border-top: 1px dashed var(--line); }
.dg[data-mode="expert"] .dg-adv { display: block; }
.dg-adv__h { font-size: .78rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--core); margin-bottom: 4px; }

/* 결과 패널 */
.dg-live {
  display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700;
  color: var(--core); background: var(--accent-soft); border: 1px solid var(--cyan); border-radius: 999px; padding: 4px 11px;
}
.dg-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--core); animation: blink 1.4s infinite; }
.dg-result__head { margin-bottom: 18px; }

.dg-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dg-num { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.dg-num--primary { background: var(--navy); border-color: var(--navy); }
.dg-num__l { font-size: .8rem; font-weight: 600; color: var(--muted); }
.dg-num--primary .dg-num__l { color: #7E93B8; }
.dg-num__v { display: flex; align-items: baseline; gap: 5px; }
.dg-num__v b { font-size: clamp(2.1rem, 5.2vw, 3.1rem); font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; }
.dg-num__v small { font-size: .92rem; font-weight: 600; color: var(--slate); }
.dg-num--primary .dg-num__v b { color: var(--cyan); }
.dg-num--primary .dg-num__v small { color: #C9D6EF; }

/* 요약 메타 */
.dg-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.dg-meta > div { background: #fff; padding: 13px 16px; display: flex; flex-direction: column; gap: 3px; }
.dg-meta span { font-size: .78rem; color: var(--muted); }
.dg-meta b { font-size: 1rem; color: var(--ink); font-weight: 650; }

/* 명세 / 계산 과정 */
.dg-steps { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.dg-steps > summary { cursor: pointer; font-weight: 650; color: var(--ink); padding: 15px 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .98rem; }
.dg-steps > summary::-webkit-details-marker { display: none; }
.dg-steps > summary::after { content: "+"; font-size: 1.3rem; color: var(--core); font-weight: 500; }
.dg-steps[open] > summary::after { content: "\2212"; }
.dg-steps__note { font-size: .84rem; color: var(--muted); margin: 0 18px 6px; }
.dg-break { padding: 2px 18px 14px; }
.dg-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.dg-line:last-child { border-bottom: 0; }
.dg-line__t { font-size: .96rem; color: var(--ink); font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.dg-line__f { font-size: .78rem; color: var(--muted); font-weight: 400; font-family: var(--font); letter-spacing: -.01em; }
.dg-line__a { font-size: 1rem; color: var(--ink); font-weight: 650; text-align: right; white-space: nowrap; }
.dg-line--sum { border-top: 1px solid var(--line); margin-top: 2px; }
.dg-line--strong .dg-line__t, .dg-line--strong .dg-line__a { font-weight: 750; }
.dg-line--total { border-top: 2px solid var(--ink); margin-top: 2px; }
.dg-line--total .dg-line__a { color: var(--core); font-size: 1.12rem; }

.dg-result__foot { font-size: .86rem; color: var(--muted); margin: 16px 0 0; line-height: 1.7; }

/* 위차 위탁 비교 패널 */
.dg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.dg-compare__cell { padding: clamp(26px, 3.4vw, 40px); }
.dg-compare__cell--direct { background: #fff; }
.dg-compare__cell--wecha { background: var(--navy); position: relative; overflow: hidden; }
.dg-compare__cell--wecha::before { content: ""; position: absolute; right: -120px; top: -130px; width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(54,207,245,.22), transparent 70%); }
.dg-compare__cell--wecha > * { position: relative; }
.dg-compare__tag { display: inline-block; font-size: .8rem; font-weight: 750; letter-spacing: .01em; padding: 5px 12px; border-radius: 7px; margin-bottom: 16px; }
.dg-compare__tag--direct { background: #FEF2F2; color: #991B1B; }
.dg-compare__tag--wecha { background: var(--cyan); color: var(--ink); }
.dg-compare__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.dg-compare__cell--wecha .dg-compare__head { border-bottom-color: rgba(255,255,255,.14); }
.dg-compare__big { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.dg-compare__cell--wecha .dg-compare__big { color: var(--cyan); }
.dg-compare__unit { font-size: .9rem; color: var(--muted); }
.dg-compare__cell--wecha .dg-compare__unit { color: #9DB4DC; }
.dg-compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dg-compare__list li { position: relative; padding-left: 28px; font-size: 1.02rem; line-height: 1.55; }
.dg-compare__list--x li { color: var(--slate); }
.dg-compare__list--x li::before { content: "\00d7"; position: absolute; left: 2px; top: -1px; color: #B91C1C; font-weight: 800; font-size: 1.05rem; }
.dg-compare__list--ok li { color: #C9D6EF; }
.dg-compare__list--ok li strong { color: #fff; }
.dg-compare__list--ok li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 5px; background: var(--cyan);
  -webkit-mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
/* 라임 칩 위에 잉크 체크 */
.dg-compare__list--ok li::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--navy);
  -webkit-mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.dg-compare__note { margin: 16px 0 0; font-size: .98rem; color: var(--slate); }
.dg-compare__note a { color: var(--core); font-weight: 650; }

/* 액션 버튼 */
.dg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dg-actions .btn--ghost::after { content: none; }

@media (max-width: 720px) {
  .dg-nums { grid-template-columns: 1fr; }
  .dg-compare { grid-template-columns: 1fr; }
  .dg-actions .btn { width: 100%; }
}

/* 토스트 */
.dg-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 100;
  max-width: min(92vw, 460px); background: var(--navy); color: #fff; font-size: .94rem; line-height: 1.5;
  padding: 13px 18px; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.dg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 인쇄 (PDF 저장) */
@media print {
  .nav, .footer, .dg-inputs, .dg-actions, #dg-apply, .cta-band, .dg-live, .hero__note { display: none !important; }
  .hero { padding: 16px 0 8px !important; }
  .section { padding: 8px 0 !important; }
  .dg-grid { grid-template-columns: 1fr; border: 0; }
  .dg-result { background: #fff; padding: 0; }
  .dg-steps[open] { break-inside: avoid; }
  .dg-compare { break-inside: avoid; }
  .dg-compare__cell--wecha { background: #fff !important; color: var(--ink) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dg-compare__cell--wecha .dg-compare__big { color: var(--core) !important; }
  .dg-compare__list--ok li { color: var(--slate) !important; }
  .dg-compare__list--ok li strong { color: var(--ink) !important; }
  .dg-num--primary { background: #fff !important; border: 1px solid var(--line) !important; }
  .dg-num--primary .dg-num__v b { color: var(--ink) !important; }
  .dg-num--primary .dg-num__l, .dg-num--primary .dg-num__v small { color: var(--slate) !important; }
  a[href]::after { content: none !important; }
}

/* ==========================================================================
   v7 — 제안서 반영 (2026-06): 가격 증명칩 · 신뢰 지표바 · 화재 토탈관리 칩
   ========================================================================== */

/* 히어로 가격 증명칩 (완속 249원) */
.pricechip {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 26px;
  padding: 14px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 6px 24px rgba(11, 46, 107, .06);
}
.pricechip__main { display: inline-flex; align-items: baseline; gap: 4px; line-height: 1; }
.pricechip__main b { font-size: 2.4rem; font-weight: 750; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.pricechip__main span { font-size: 1rem; font-weight: 650; color: var(--core); }
.pricechip__meta { display: flex; flex-direction: column; gap: 3px; font-size: .9rem; word-break: keep-all; }
.pricechip__meta em { font-style: normal; font-weight: 650; color: var(--ink); }
.pricechip__meta > span { color: var(--muted); }
.pricechip__meta s { color: var(--muted); white-space: nowrap; }
.pricechip__meta strong { color: var(--core); font-weight: 750; white-space: nowrap; }
/* 모바일: 세로 스택 — 숫자·문구가 어색하게 끊기지 않게 */
@media (max-width: 560px) {
  .pricechip { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 18px; }
  .pricechip__meta { align-items: center; gap: 2px; }
  .pricechip__main b { font-size: 2.1rem; }
}

/* 화재 토탈 관리 칩 (안전 섹션 · 네이비 배경) */
.totalcare { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; }
.totalcare__cell { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 22px 20px; display: flex; flex-direction: column; }
.totalcare__ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(54,207,245,.14); color: var(--cyan); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.totalcare__ico svg { width: 24px; height: 24px; }
.totalcare__cell .ph { font-family: var(--font); font-size: .72rem; font-weight: 700; color: var(--cyan); letter-spacing: .04em; }
.totalcare__cell b { display: block; color: #fff; font-size: 1.06rem; margin: 6px 0 6px; letter-spacing: -.01em; }
.totalcare__d { color: #AFC0DD; font-size: .88rem; line-height: 1.55; }
@media (max-width: 720px) { .totalcare { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .totalcare { grid-template-columns: 1fr; } }

/* 비교표 셀 보조 문구 */
.cmp-sub { display: block; font-size: .8rem; color: var(--muted); margin-top: 3px; font-weight: 400; }
.cmp .is-wecha .cmp-sub { color: var(--slate); }

/* 기능 행(좌우 교차 일러스트) — 6가지 책임 */
.features { display: grid; gap: clamp(40px, 6vw, 86px); }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature:nth-child(even) .feature__media { order: -1; }
.feature__eyebrow { display: inline-block; font-family: var(--font); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--core); margin-bottom: 14px; }
.feature__body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.feature__body p { font-size: 1.08rem; color: var(--slate); margin: 0; max-width: 46ch; }
.feature__media {
  border-radius: 24px; background: linear-gradient(150deg, #EEF4FF 0%, #DCE9FF 100%);
  padding: clamp(22px, 3vw, 40px); display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.feature__media svg { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 20px; }
  .feature:nth-child(even) .feature__media { order: 0; }
}

/* 마일스톤 리스트 (회사소개 연혁 카드) */
.mlist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.mlist li { position: relative; padding-left: 18px; color: var(--slate); font-size: 1rem; }
.mlist li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }

/* 가격형 3-카드 비교 (세 가지 길) */
.pcards { display: grid; grid-template-columns: 1fr 1.06fr 1fr; gap: 16px; align-items: center; max-width: 1060px; margin: 0 auto; }
.pcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 34px 30px; display: flex; flex-direction: column; box-shadow: 0 18px 44px rgba(11,46,107,.07); }
.pcard--feat { background: linear-gradient(160deg, #2A63D4 0%, var(--navy) 100%); border-color: transparent; color: #fff; padding: 46px 32px; box-shadow: 0 30px 66px rgba(11,46,107,.34); z-index: 2; }
.pcard__badge { position: absolute; top: 26px; right: 26px; font-size: .68rem; font-weight: 750; letter-spacing: .05em; color: #fff; background: rgba(255,255,255,.22); padding: 6px 12px; border-radius: 999px; }
.pcard__price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 2px; }
.pcard__price b { font-size: 2.5rem; font-weight: 750; letter-spacing: -.03em; color: var(--navy); line-height: 1.05; }
.pcard__price span { font-size: .92rem; font-weight: 600; color: var(--muted); }
.pcard--feat .pcard__price b { color: #fff; }
.pcard--feat .pcard__price span { color: rgba(255,255,255,.82); }
.pcard__name { font-size: 1.4rem; font-weight: 700; margin: 12px 0 6px; color: var(--ink); }
.pcard--feat .pcard__name { color: #fff; }
.pcard__desc { font-size: .95rem; color: var(--muted); margin: 0 0 22px; line-height: 1.5; }
.pcard--feat .pcard__desc { color: rgba(255,255,255,.85); }
.pcard__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 13px; }
.pcard__list li { position: relative; padding-left: 30px; font-size: .96rem; line-height: 1.45; color: var(--slate); }
.pcard--feat .pcard__list li { color: #fff; }
.pcard__list .mk { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.pcard__list .mk--ok { background: var(--accent-soft); color: var(--core); }
.pcard__list .mk--no { background: #FCE3E3; color: #D7263D; }
.pcard--feat .pcard__list .mk { background: rgba(255,255,255,.24); color: #fff; }
.pcard__cta { margin-top: auto; display: block; text-align: center; padding: 14px 16px; border-radius: 12px; font-weight: 700; font-size: .95rem; transition: background .15s ease, color .15s ease; }
.pcard__cta::after { content: none; }
.pcard__cta--muted { background: var(--accent-soft); color: var(--core); }
.pcard__cta--muted:hover { background: #DCE7FB; text-decoration: none; }
.pcard--feat .pcard__cta { background: #fff; color: var(--navy); }
.pcard--feat .pcard__cta:hover { background: #EAF1FF; text-decoration: none; }
@media (max-width: 860px) {
  .pcards { grid-template-columns: 1fr; max-width: 440px; gap: 16px; }
  .pcard--feat { order: -1; padding: 38px 30px; }
}

/* 문제 카드(선택지 1·2) — 일러스트 + 아이콘 항목 (개선판) */
.probs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.prob { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 18px 44px rgba(11,46,107,.06); }
.prob__media { aspect-ratio: 460 / 240; background: linear-gradient(150deg, #FFF6E8 0%, #FBE8CB 100%); display: flex; align-items: center; justify-content: center; }
.prob__media svg { width: 100%; height: 100%; display: block; }
.prob__body { padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; flex: 1; }
.prob__tag { align-self: flex-start; font-size: .8rem; font-weight: 750; letter-spacing: .01em; padding: 5px 12px; border-radius: 8px; background: #FDECEC; color: #C0362F; margin-bottom: 14px; }
.prob__title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.25; margin: 0 0 22px; }
.prob__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 16px; }
.prob__item { display: flex; gap: 14px; align-items: flex-start; }
.prob__ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.prob__ico svg { width: 22px; height: 22px; }
.prob__ico--amber { background: #FFF0D6; color: #D98A0B; }
.prob__ico--blue { background: var(--accent-soft); color: var(--core); }
.prob__ico--red { background: #FFE4E2; color: #D7263D; }
.prob__txt b { display: block; font-size: 1.04rem; color: var(--ink); margin-bottom: 3px; letter-spacing: -.01em; }
.prob__txt p { margin: 0; font-size: .94rem; color: var(--muted); line-height: 1.55; }
.prob__quote { margin-top: auto; padding: 15px 17px; border-radius: 12px; background: #FBF3EF; border-left: 3px solid #E7B7AF; font-size: .96rem; color: var(--slate); line-height: 1.6; }
@media (max-width: 820px) { .probs { grid-template-columns: 1fr; } }

/* 솔루션(제3의 길) 카드 — 소프트3D 일러스트 */
.solgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sol { display: flex; flex-direction: column; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; overflow: hidden; }
.sol__media { aspect-ratio: 360 / 240; background: linear-gradient(160deg, #EAF2FE 0%, #D6E6FA 100%); display: flex; align-items: center; justify-content: center; }
.sol__media svg { width: 100%; height: 100%; display: block; }
.sol__body { padding: 26px 26px 30px; }
.sol__body h3 { color: #fff; font-size: 1.26rem; margin: 0 0 10px; }
.sol__body p { color: #9DB4DC; font-size: 1.02rem; line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .solgrid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }


/* 안전 섹션 업그레이드 — 골든타임 감지 마커 + 관제 스캔라인 */
.gtime__bar::after { content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.gtime__bar--ai::after { box-shadow: 0 0 0 3px rgba(54,207,245,.4), 0 0 16px 2px rgba(54,207,245,.75); }
.gtime__bar--old::after { background: #FCA5A5; box-shadow: 0 0 0 3px rgba(220,38,38,.4); }
.monitor::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100px; pointer-events: none; background: linear-gradient(180deg, rgba(54,207,245,.18), transparent); animation: scan 3.8s linear infinite; }
@keyframes scan { 0% { transform: translateY(-110px); } 100% { transform: translateY(470px); } }
@media (prefers-reduced-motion: reduce) { .monitor::after { animation: none; opacity: .22; } }

/* ===== 하단(최종 CTA + 푸터) 업그레이드 ===== */
.cta-band:not(.section--navy) .container {
  background:
    repeating-linear-gradient(135deg, transparent 0 40px, rgba(255,255,255,.022) 40px 43px),
    linear-gradient(135deg, #0B2E6B 0%, #143F8C 55%, #1A56C4 100%);
}
.cta-band .eyebrow { color: var(--cyan); position: relative; z-index: 1; }
.cta-band:not(.section--navy) .lead { color: #CBD8EF; }
.cta-trust { list-style: none; margin: 28px 0 0; padding: 0; position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.cta-trust li { color: #CBD8EF; font-size: .95rem; display: inline-flex; align-items: center; gap: 7px; }
.cta-trust li::before { content: "✓"; color: var(--cyan); font-weight: 800; }

.footer { position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, transparent 0 46px, rgba(255,255,255,.013) 46px 50px), var(--navy); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--core) 45%, var(--navy) 100%); }
.footer .container { position: relative; z-index: 1; }
.footer__top { padding-top: 12px; }
.footer__legal { color: #94A7C8; }
.footer__contact { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 650; color: #fff !important; }
.footer__contact svg { width: 16px; height: 16px; flex: 0 0 auto; }
.footer__contact:hover { color: var(--cyan) !important; text-decoration: none; }

/* ===== [2/3] 히어로 센터형 + 소프트3D 씬 ===== */
.hero { text-align: center; padding: clamp(70px, 9vw, 132px) 0 0;
  background: linear-gradient(180deg, #EBF1FF 0%, #F5F9FF 50%, #ffffff 100%); }
.hero::before { display: none; }
.hero::after { display: none; }
.hero__inner { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.hero .lead { margin-left: auto; margin-right: auto; }
.hero .pricechip { margin-top: 28px; }
.hero__actions { justify-content: center; }
.hero__note { margin-left: auto; margin-right: auto; }
.hero__scene { margin-top: clamp(30px, 4.5vw, 60px); width: 100%; }
.hero__scene svg { display: block; width: 100%; max-width: 1320px; height: auto; margin: 0 auto; }
@media (max-width: 720px) { .hero__scene { margin-top: 26px; overflow: hidden; } .hero__scene svg { width: 150%; margin-left: -25%; } }


/* ===== [3/3] 딜레마 센터형 ===== */
.probs { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 100px); }
.prob { display: block; background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; max-width: 1000px; margin: 0 auto; text-align: center; }
.prob__tag { display: inline-block; align-self: auto; margin: 0 0 18px; font-size: .92rem; }
.prob__title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.22; margin: 0 auto 36px; max-width: 20ch; }
.prob__media { aspect-ratio: 460 / 240; max-width: 560px; margin: 0 auto 44px; border-radius: 24px; overflow: hidden; box-shadow: 0 26px 64px rgba(11,46,107,.12); }
.prob__list { grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px); max-width: 1000px; margin: 0 auto 34px; }
.prob__item { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.prob__ico { width: 52px; height: 52px; }
.prob__ico svg { width: 26px; height: 26px; }
.prob__txt { display: block; }
.prob__txt b { font-size: 1.14rem; }
.prob__txt p { font-size: 1.01rem; }
.prob__quote { margin: 0 auto; max-width: 700px; text-align: center; border-left: 0; background: var(--bg-mute); padding: 18px 26px; border-radius: 14px; font-size: 1.05rem; color: var(--slate); }
@media (max-width: 760px) { .prob__list { grid-template-columns: 1fr; max-width: 440px; } }

/* ===== 히어로 헤드라인 (정적) + 뱃지 + 핵심 요약 ===== */
.hero__badge { width: 66px; height: 66px; border-radius: 20px; margin: 4px auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #EAF1FF 0%, #ffffff 100%);
  box-shadow: 0 18px 42px rgba(11,46,107,.20), inset 0 1px 0 #fff; }
.hero__badge svg { width: 36px; height: 36px; display: block; }
.hero__badge { animation: heroIcIn .5s cubic-bezier(.18,.9,.25,1.12) both; }
.hero__title { text-wrap: balance; }
.hero__title .accent { background-image: linear-gradient(transparent 60%, rgba(54,207,245,.38) 0); padding: 0 .05em; border-radius: 3px; }
@keyframes heroIcIn {
  0%   { opacity: 0; transform: translateY(12px) scale(.82); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hero__badge { animation: none !important; } }

/* 히어로 핵심 요약 3종 (정적 체크 라인) */
.hero__points { list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.hero__points li { display: inline-flex; align-items: center; gap: 7px;
  font-size: .95rem; font-weight: 600; color: var(--slate); letter-spacing: -.01em; }
.hero__points li::before {
  content: ""; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-soft);
  -webkit-mask: none; mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E8F0FE'/%3E%3Cpath d='M7.2 12.4l3.2 3.2 6.4-7' fill='none' stroke='%231A56C4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
@media (max-width: 720px) {
  .hero__points { flex-direction: column; align-items: center; gap: 9px; margin-top: 18px; }
}


/* 페이지 정리: 딜레마 앵커 오프셋 + 동의 '필수' 배지 */
#dilemma { scroll-margin-top: 90px; }
.req-badge { display: inline-flex; align-items: center; flex: 0 0 auto; font-size: .72rem; font-weight: 750; color: #fff; background: var(--red); padding: 3px 9px; border-radius: 6px; margin-top: 1px; }


/* 모바일 메뉴: 도입 문의(nav__mcta) 버튼 텍스트 흰색 고정 (네이비 버튼 가독성) */
.nav__links a.nav__mcta, .nav__links a.nav__mcta:hover { color: #fff; }

/* ==========================================================================
   충전 원가 진단(계산기) — 친화형 컨트롤 + 결과 중심 (Brand 2.0 적용)
   ========================================================================== */

/* 계산기 레이아웃 */
.cx-calc { padding: 8px 0 clamp(48px, 7vw, 88px); }
.cx-grid { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 30px); align-items: start; max-width: 760px; margin-inline: auto; }
.cx-inputs { display: grid; gap: 16px; }

/* 입력 블록 카드 */
.cx-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 30px); }
.cx-block__head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.cx-block__head h2 { font-size: 1.2rem; margin: 0; }
.cx-step-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: .82rem; }
.cx-field { margin-bottom: 18px; }
.cx-field:last-child { margin-bottom: 0; }
.cx-label { display: block; font-weight: 700; color: var(--ink); font-size: .95rem; margin-bottom: 10px; }
.cx-note { font-size: .84rem; color: var(--muted); margin: 9px 0 0; line-height: 1.55; }
.cx-note b { color: var(--ink); font-weight: 700; }
.cx-help { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--bg-mute); color: var(--slate); font-size: .72rem; font-weight: 700; cursor: help; vertical-align: 1px; }

.cx-input { width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: border-color .12s, box-shadow .12s; }
.cx-input:focus { outline: none; border-color: var(--core); box-shadow: 0 0 0 3px rgba(26,86,196,.18); }

/* 스테퍼 */
.cx-stepper { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; max-width: 280px; }
.cx-stepbtn { flex: none; width: 52px; border: 0; background: var(--bg-mute); color: var(--navy); font-size: 1.5rem; font-weight: 500; cursor: pointer; transition: background .12s; }
.cx-stepbtn:hover { background: var(--accent-soft); }
.cx-stepbtn:active { background: #DCE6F8; }
.cx-stepval { flex: 1; min-width: 0; text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  font-family: inherit; font-size: 1.4rem; font-weight: 800; color: var(--ink); padding: 12px 6px; -moz-appearance: textfield; }
.cx-stepval::-webkit-outer-spin-button, .cx-stepval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cx-stepval:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(26,86,196,.3); }

/* 빠른 칩 */
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cx-chip { font: inherit; font-size: .86rem; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--slate); cursor: pointer; transition: all .12s; }
.cx-chip:hover { border-color: var(--navy); color: var(--navy); }
.cx-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* 세그먼트 (출력/종별) */
.cx-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-seg--full { display: grid; grid-template-columns: repeat(2, 1fr); }
.cx-segbtn { flex: 1 1 auto; min-width: 82px; font: inherit; font-size: .92rem; font-weight: 600; padding: 12px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--slate); cursor: pointer; transition: all .12s; }
.cx-segbtn:hover { border-color: var(--navy); color: var(--navy); }
.cx-segbtn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.cx-custom { display: flex; align-items: center; gap: 8px; margin-top: 10px; max-width: 240px; }
.cx-custom .cx-input { text-align: right; }
.cx-suffix { font-size: .92rem; font-weight: 700; color: var(--slate); }

/* 슬라이더 */
.cx-slider-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cx-slider-top .cx-label { margin-bottom: 0; }
.cx-slider-val { font-family: var(--mono); font-weight: 800; font-size: 1.5rem; color: var(--core); letter-spacing: -.02em; }
.cx-range { width: 100%; accent-color: var(--core); height: 30px; cursor: pointer; }
.cx-range-scale { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-top: -2px; }
.cx-range-scale span:nth-child(2) { color: var(--core); font-weight: 600; }

/* 정밀 입력 (details) */
.cx-adv { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cx-adv > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
  padding: 16px clamp(20px, 2.6vw, 30px); font-weight: 700; color: var(--ink); font-size: 1rem; }
.cx-adv > summary::-webkit-details-marker { display: none; }
.cx-adv > summary::after { content: "+"; font-size: 1.35rem; color: var(--core); font-weight: 500; margin-left: auto; }
.cx-adv[open] > summary::after { content: "\2212"; }
.cx-adv__hint { font-size: .82rem; font-weight: 500; color: var(--muted); }
.cx-adv__body { padding: 0 clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--line-soft); }
.cx-adv__body .cx-note { margin: 14px 0 16px; }
.cx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cx-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cx-adv .cx-label { font-size: .86rem; font-weight: 600; margin-bottom: 7px; }
/* 그리드 내부 필드는 gap만으로 간격 통일(이중 여백 제거), 그리드 자체엔 일관된 하단 여백 */
.cx-adv__body > .cx-grid2 { margin-bottom: 18px; }
.cx-adv__body .cx-grid2 > .cx-field,
.cx-adv__body .cx-grid3 > .cx-field { margin-bottom: 0; }

/* 월→연 환산 readout (월 요금 입력 시 우측에 연간 자동 표기) */
.cx-annual { display: block; text-align: right; font-size: .78rem; font-weight: 600; color: var(--core); margin-top: 5px; }
.cx-annual--sub { font-size: .74rem; margin-top: 0; }
/* 수선 적립금 종류별 + 부하 비중(경/중/최대) 입력 */
.cx-subfield { display: flex; flex-direction: column; gap: 6px; }
.cx-sublabel { font-size: .82rem; font-weight: 700; color: var(--navy); }
/* 시간대별(갑Ⅱ) 비활성 시 부하 비중 필드 음영 */
.cx-field.is-muted { opacity: .5; transition: opacity .15s; }

/* 충전기 종류별 입력 */
.cx-typegrid { display: grid; gap: 10px; }
.cx-typerow { display: grid; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface, #fff); }
.cx-typerow__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cx-typerow__name { font-weight: 700; color: var(--navy); }
.cx-typeseg { gap: 6px; }
.cx-typeseg .cx-segbtn { min-width: auto; flex: 0 1 auto; padding: 7px 13px; font-size: .85rem; }

/* 손익 카드 */
.cx-pl { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--line-soft); }
.cx-pl__head { font-size: .82rem; font-weight: 700; color: var(--slate); margin-bottom: 10px; }
.cx-pl__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; }
.cx-pl__grid > div { display: flex; flex-direction: column; gap: 3px; }
.cx-pl__grid span { font-size: .76rem; color: var(--muted); }
.cx-pl__grid b { font-size: .98rem; font-weight: 700; color: var(--navy); }
.cx-pl__res b { font-size: 1.05rem; }
.cx-pl__note { font-size: .82rem; color: var(--muted); margin: 0; }
.cx-pl[data-state="none"] .cx-pl__grid { display: none; }
.cx-pl[data-state="profit"] .cx-pl__note,
.cx-pl[data-state="loss"] .cx-pl__note { display: none; }
.cx-pl[data-state="profit"] .cx-pl__res b { color: #0a7d3c; }
.cx-pl[data-state="loss"] .cx-pl__res b { color: #c0341d; }
.cx-pl[data-state="loss"] { border-color: rgba(192,52,29,.35); background: rgba(192,52,29,.06); }
.cx-pl[data-state="profit"] { border-color: rgba(10,125,60,.3); background: rgba(10,125,60,.06); }

/* 결과 */
.cx-result { display: grid; gap: 14px; }
.cx-rcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.8vw, 32px);
  box-shadow: 0 18px 50px -28px rgba(11,46,107,.35); }
.cx-rcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cx-rcard__eyebrow { font-size: .88rem; font-weight: 700; color: var(--slate); }
.cx-live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--core);
  background: var(--accent-soft); border: 1px solid #C9DBFB; border-radius: 999px; padding: 3px 10px; }
.cx-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: blink 1.4s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.cx-big { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.cx-big b { font-size: clamp(3.2rem, 8vw, 4.8rem); font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.cx-big__u { font-size: 1.2rem; font-weight: 700; color: var(--slate); }
.cx-big__sub { font-size: .9rem; color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
.cx-big__sub b { color: var(--ink); font-weight: 700; }

.cx-arrow { position: relative; text-align: center; margin: 22px 0 18px; }
.cx-arrow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.cx-arrow span { position: relative; background: #fff; padding: 0 12px; font-size: .84rem; font-weight: 700; color: var(--core); }

.cx-wecha { background: var(--navy); border-radius: var(--radius); padding: 22px 22px 20px; position: relative; overflow: hidden; }
.cx-wecha::before { content: ""; position: absolute; right: -90px; top: -100px; width: 280px; height: 280px;
  background: radial-gradient(closest-side, rgba(54,207,245,.28), transparent 70%); }
.cx-wecha > * { position: relative; }
.cx-wecha__num { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.cx-wecha__num b { font-size: 2rem; font-weight: 800; color: var(--cyan); }
.cx-wecha__desc { font-size: .9rem; color: #B7C8E6; margin: 8px 0 14px; line-height: 1.6; }
.cx-wecha__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-wecha__chips span { font-size: .8rem; font-weight: 700; color: var(--navy); background: var(--cyan); border-radius: 999px; padding: 5px 12px; }

.cx-rcard__cta { margin-top: 22px; }
.cx-rcard__mini { display: flex; gap: 10px; margin-top: 12px; }
.cx-minibtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: .9rem; font-weight: 600;
  padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--slate); cursor: pointer; transition: all .12s; }
.cx-minibtn:hover { border-color: var(--navy); color: var(--navy); }
.cx-minibtn svg { width: 17px; height: 17px; }

/* 명세 / 계산 과정 */
.cx-steps { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cx-steps > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; font-weight: 700; color: var(--ink); font-size: .96rem; }
.cx-steps > summary::-webkit-details-marker { display: none; }
.cx-steps > summary::after { content: "+"; font-size: 1.3rem; color: var(--core); font-weight: 500; }
.cx-steps[open] > summary::after { content: "\2212"; }
.cx-steps__body { padding: 0 20px 16px; border-top: 1px solid var(--line-soft); }
.cx-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 14px 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--line); }
.cx-meta > div { background: #fff; padding: 11px 14px; display: flex; flex-direction: column; gap: 2px; }
.cx-meta span { font-size: .76rem; color: var(--muted); }
.cx-meta b { font-size: .96rem; color: var(--ink); font-weight: 700; }
.cx-break { display: grid; }
.cx-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.cx-line:last-child { border-bottom: 0; }
.cx-line__t { font-size: .94rem; color: var(--ink); font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.cx-line__t i { font-style: normal; font-size: .76rem; color: var(--muted); font-weight: 400; font-family: var(--mono); letter-spacing: -.01em; }
.cx-line__a { font-size: .98rem; color: var(--ink); font-weight: 700; text-align: right; white-space: nowrap; }
.cx-line--sum { border-top: 1px solid var(--line); margin-top: 2px; }
.cx-line--strong .cx-line__t, .cx-line--strong .cx-line__a { font-weight: 800; }
.cx-line--total { border-top: 2px solid var(--navy); margin-top: 2px; }
.cx-line--total .cx-line__a { color: var(--core); font-size: 1.1rem; }

.cx-src { margin-top: 22px; }

/* 확신 스트립 (계산기 상단 · 첫 화면 이탈 방지) */
.cx-assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cx-assure__item { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px; }
.cx-assure__item svg { flex: none; width: 19px; height: 19px; color: var(--core); margin-top: 1px; }
.cx-assure__t { font-size: .82rem; line-height: 1.4; color: var(--muted); }
.cx-assure__t b { display: block; color: var(--ink); font-weight: 700; font-size: .9rem; margin-bottom: 2px; }

/* 폼 직전 결과 에코 + 신뢰 배지 (제출 완료율) */
.cx-apply-echo { display: inline-block; text-align: center; font-size: .92rem; font-weight: 700; color: var(--core);
  background: var(--accent-soft); border: 1px solid #C9DBFB; border-radius: 999px; padding: 9px 18px; margin: 14px 0 0; }
.cx-formtrust { display: flex; flex-wrap: wrap; gap: 9px 20px; justify-content: center; margin: 0 0 16px; }
.cx-formtrust span { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--slate); }
.cx-formtrust svg { flex: none; width: 15px; height: 15px; color: #0a7d3c; }

/* 고정 실시간 결과 + 신청 바 (입력 중 보상 루프 + 상시 CTA) */
.cx-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 10px 0;
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); box-shadow: 0 -12px 32px -20px rgba(11,46,107,.5);
  transform: translateY(115%); transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.cx-cta-bar.is-on { transform: translateY(0); }
.cx-cta-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cx-cta-bar__cmp { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cx-cta-bar__stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cx-cta-bar__label { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--slate); white-space: nowrap; }
.cx-cta-bar__stat--live .cx-cta-bar__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: blink 1.4s infinite; }
.cx-cta-bar__stat--wecha .cx-cta-bar__label { color: var(--core); }
.cx-cta-bar__val { font-size: 1rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cx-cta-bar__val b { font-size: 1.35rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.cx-cta-bar__stat--wecha .cx-cta-bar__val b { color: var(--core); }
.cx-cta-bar__val i { font-style: normal; }
.cx-cta-bar__vs { flex: none; color: var(--slate); font-weight: 800; font-size: 1.1rem; }
.cx-cta-bar__btn { flex: none; white-space: nowrap; }
/* 바가 보일 때 FAB 숨김(겹침 방지). app.js의 .is-hidden과 독립적으로 합성 */
body.dg-bar-on .fab { opacity: 0; visibility: hidden; transform: translateY(18px) scale(.92); pointer-events: none; }

/* 직영 vs 위차 상세 비교 */
.cx-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.cx-vs__cell { padding: clamp(26px, 3.4vw, 40px); }
.cx-vs__cell--direct { background: #fff; }
.cx-vs__cell--wecha { background: var(--navy); position: relative; overflow: hidden; }
.cx-vs__cell--wecha::before { content: ""; position: absolute; right: -120px; top: -130px; width: 380px; height: 380px;
  background: radial-gradient(closest-side, rgba(54,207,245,.25), transparent 70%); }
.cx-vs__cell--wecha > * { position: relative; }
.cx-vs__tag { display: inline-block; font-size: .8rem; font-weight: 800; padding: 5px 12px; border-radius: 7px; margin-bottom: 16px; }
.cx-vs__tag--direct { background: #FEF2F2; color: #991B1B; }
.cx-vs__tag--wecha { background: var(--cyan); color: var(--navy); }
.cx-vs__big { display: flex; flex-direction: column; gap: 3px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.cx-vs__cell--wecha .cx-vs__big { border-bottom-color: rgba(255,255,255,.14); }
.cx-vs__big b { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.cx-vs__cell--wecha .cx-vs__big b { color: var(--cyan); }
.cx-vs__big span { font-size: .9rem; color: var(--muted); }
.cx-vs__cell--wecha .cx-vs__big span { color: #B7C8E6; }
.cx-vs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cx-vs__list li { position: relative; padding-left: 28px; font-size: 1.02rem; line-height: 1.55; }
.cx-vs__list--x li { color: var(--slate); }
.cx-vs__list--x li::before { content: "\00d7"; position: absolute; left: 2px; top: -1px; color: #B91C1C; font-weight: 800; font-size: 1.05rem; }
.cx-vs__list--ok li { color: #D4E0F4; }
.cx-vs__list--ok li strong { color: #fff; }
.cx-vs__list--ok li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 5px; background: var(--cyan);
  -webkit-mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.cx-vs__list--ok li::after { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--navy);
  -webkit-mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.cx-vs__foot { text-align: center; margin: 22px 0 0; }
.cx-vs__foot a { color: var(--core); font-weight: 700; }

.footer .container { position: relative; }
/* 푸터 숨은 진입점 — 'All rights reserved.'의 All 을 눌러 내부 계산기(/diagnosis)로 진입.
   일반 방문자에게는 계산기가 완성될 때까지 노출하지 않고, 직원 테스트 용도로만 사용한다.
   저작권 문구와 완전히 동일하게 보이도록 색·굵기를 상속받고 밑줄·호버 강조를 제거한다. */
.footer__legal a.footer__egg { color: inherit; font-weight: inherit; cursor: text; }
.footer__legal a.footer__egg:hover { color: inherit; text-decoration: none; }

/* 토스트 */
.dg-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 120; max-width: min(92vw, 460px);
  background: var(--navy); color: #fff; font-size: .94rem; line-height: 1.5; padding: 13px 18px; border-radius: 10px;
  box-shadow: 0 14px 40px rgba(11,46,107,.32); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.dg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 반응형 */
@media (max-width: 720px) {
  .cx-vs { grid-template-columns: 1fr; }
  .cx-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cx-assure { grid-template-columns: 1fr; }
  .cx-cta-bar__val i { display: none; }          /* 월 ○만원 · 단지 부담 0원 suffix 숨김 */
  .cx-cta-bar__val b { font-size: 1.18rem; }
}
@media (max-width: 480px) {
  .cx-cta-bar__label { font-size: .64rem; }
  .cx-cta-bar__cmp { gap: 8px; }
  .cx-cta-bar__val { font-size: .82rem; }
  .cx-cta-bar__val b { font-size: 1.02rem; }
  .cx-cta-bar__vs { font-size: .95rem; }
  .cx-cta-bar__btn { padding-left: 14px; padding-right: 14px; }
}

/* ===== 전화 문의(대표번호 1660-0653) 노출 ===== */
/* 헤더 전화 링크 */
.nav__tel { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; font-size: 1.02rem;
  color: var(--navy); letter-spacing: -.01em; padding: 8px 12px; border-radius: 10px;
  transition: background .14s, color .14s; }
.nav__tel svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--core); }
.nav__tel:hover { background: var(--accent-soft); color: var(--core-deep); text-decoration: none; }

/* 문의 섹션 연락 CTA — 전화 + 카카오톡 나란히 */
.contact-row { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 560px; margin: 0 auto 22px; }
@media (min-width: 720px) { .contact-row { grid-template-columns: 1fr 1fr; max-width: 760px; } }

.calltel { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0; padding: 18px 22px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--core);
  border-radius: var(--radius); box-shadow: 0 8px 26px rgba(11,46,107,.08);
  transition: box-shadow .16s, transform .16s; }
.calltel:hover { text-decoration: none; box-shadow: 0 12px 32px rgba(11,46,107,.14); transform: translateY(-2px); }
.calltel__ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--core) 0%, var(--navy) 100%); color: #fff; }
.calltel__ic svg { width: 24px; height: 24px; }
.calltel__txt { display: flex; flex-direction: column; line-height: 1.2; }
.calltel__txt b { font-size: .92rem; color: var(--slate); font-weight: 650; }
.calltel__txt em { font-style: normal; font-size: 1.72rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.calltel__hint { flex: 1 1 100%; margin: 0; font-size: .88rem; color: var(--muted); }
@media (min-width: 520px) and (max-width: 719px) { .calltel__hint { flex: 1 1 auto; text-align: right; } }

/* 카카오톡 상담 카드 — 카카오 브랜드 옐로 포인트 */
.calltel--kakao { border-left-color: #FEE500; }
.calltel__ic--kakao { background: #FEE500; }
.calltel--kakao .calltel__txt em { color: #391B1B; }

/* 푸터: 전화·이메일·카카오 세로 정렬 */
.footer__contact { display: flex; }
.footer__contact--tel { margin-top: 18px; }
.footer__contact + .footer__contact { margin-top: 8px; }
.footer__legal a { color: #C2CFE6; font-weight: 650; }
.footer__legal a:hover { color: var(--cyan); }

/* ===== WECHA APP 스토어 설치 버튼 ===== */
.appstores { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(30px, 4vw, 46px); }
.storebtn { display: inline-flex; align-items: center; gap: 12px; min-width: 200px;
  padding: 11px 22px; border-radius: 13px; background: #12141A; border: 1px solid #12141A;
  color: #fff; transition: transform .15s, box-shadow .15s, background .15s; }
.storebtn:hover { text-decoration: none; background: #000; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11,46,107,.22); }
.storebtn__ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.storebtn__ic svg { width: 26px; height: 26px; display: block; }
.storebtn__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.storebtn__txt small { font-size: .74rem; color: #C7CFDD; font-weight: 500; letter-spacing: .01em; }
.storebtn__txt b { font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; }
@media (max-width: 460px) { .storebtn { flex: 1 1 100%; justify-content: center; } }

/* 인쇄 (PDF) */
@media print {
  .nav, .footer__top, .footer__legal, .footer__secret, .fab, .cx-inputs, .cx-rcard__cta, .cx-rcard__mini,
  #dg-apply, .cta-band, .cx-live, .cx-adv, .cx-cta-bar, .cx-assure { display: none !important; }
  .hero { padding: 12px 0 6px !important; }
  .section, .cx-calc { padding: 8px 0 !important; }
  .cx-grid { grid-template-columns: 1fr; gap: 12px; }
  .cx-result { position: static; }
  .cx-steps[open], .cx-vs { break-inside: avoid; }
  .cx-wecha, .cx-vs__cell--wecha { background: #fff !important; color: var(--ink) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; border: 1px solid var(--line); }
  .cx-wecha__num, .cx-wecha__desc { color: var(--ink) !important; }
  .cx-wecha__num b, .cx-vs__cell--wecha .cx-vs__big b { color: var(--core) !important; }
  .cx-wecha__chips span { color: var(--navy) !important; }
  .cx-vs__list--ok li { color: var(--slate) !important; }
  .cx-vs__list--ok li strong { color: var(--ink) !important; }
  a[href]::after { content: none !important; }
}