/* ============================================================
   시온에너지 태양광 구독 — 스타일시트
   ------------------------------------------------------------
   0831 대표님 피드백 팔레트 (Solarwatt 60% + Otovo 40%)
   메인 그린   --green        #7DBA3A   (채우기 전용)
   딥 그린     --green-bright #4E8F32   (호버 · 아이콘)
   다크 네이비 --deep / --ink #17212B   (텍스트 · 내비 · 푸터)
   차콜 그레이 --deep-2       #2C3138   (서브 영역 · 구분선)
   라이트그린  --surface-2    #F2F7ED   (섹션 · 카드 배경)
   오프화이트  --bg           #FAFAF7   (페이지 기본 배경)
   포인트오렌지 --amber-bright #FF6B35   (CTA · 강조 문구 · 아이콘)

   ⚠ 큰 면을 그린이나 다크로 채우지 않습니다. 페이지 기본은 오프화이트,
     그린과 오렌지는 버튼·아이콘·숫자에 포인트로만 씁니다.
   ⚠ #7DBA3A는 화이트 위 대비가 2.24:1이라 글자색으로 쓸 수 없습니다.
     글자로 그린이 필요하면 --green-text(#4F7525 · 5.14:1)를 쓰세요.
   ⚠ 오렌지 면 위 글자 규칙
       #FF6B35(--amber-bright) 위 → 네이비 #17212B (5.75:1). 흰 글자는 2.84:1 로 깨집니다.
       #D13800(--amber)        위 → 흰색      (4.91:1). 흰 글자를 쓰려면 이 값으로 채우세요.
     버튼은 흰 글자를 쓰기로 했으므로 --amber 로 채웁니다.

   폰트  Black Han Sans  헤드라인(.display) / Gothic A1  본문
         IBM Plex Mono   숫자 · 라벨(.mono)

   색은 전부 :root 변수입니다. 다크모드는 아래 세 블록이 한 세트:
     1) :root                                → 라이트 기본값
     2) @media (prefers-color-scheme: dark)  → OS 다크
     3) :root[data-theme="dark"]             → 수동 토글
   색을 추가할 때는 세 곳 모두에 넣어야 합니다.
   ============================================================ */

:root{
    --bg:#FAFAF7;
    --surface:#FFFFFF;
    --surface-2:#F2F7ED;
    --ink:#17212B;
    --ink-2:#565E68;
    --ink-3:#606871;
    --line:#E5E8E3;
    --line-strong:#C8CFC4;
    --deep:#17212B;
    --deep-2:#2C3138;
    --deep-ink:#FFFFFF;
    --deep-ink-2:#B8C0C8;
    --deep-line:#2C3138;
    --green:#7DBA3A;
    --green-bright:#4E8F32;
    --green-soft:#F2F7ED;
    /* 그린 면 위 글자 — 테마가 바뀌어도 면 색은 그대로라 값을 고정한다.
       --ink는 다크모드에서 밝아지므로 여기에 쓰면 대비가 깨진다. */
    --on-green:#17212B;
    /* 밝은 배경 위 그린 글자. #7DBA3A는 2.24:1이라 글자로 못 쓴다.
       색상·채도는 두고 명도만 낮춘 값(5.14:1). */
    --green-text:#4F7525;
    /* 포인트 오렌지 — CTA·강조 문구·아이콘에만. 메인 컬러로 쓰지 않는다. */
    --amber:#D13800;
    --amber-bright:#FF6B35;
    --amber-soft:#FFEDE5;
    --gold:#FF6B35;
    --red:#C0392B;
    --shadow:0 1px 2px rgba(23,33,43,.06), 0 8px 24px -12px rgba(23,33,43,.22);
    --shadow-lg:0 2px 4px rgba(23,33,43,.07), 0 24px 60px -24px rgba(23,33,43,.32);
    --radius:4px;
    --maxw:1140px;
    /* 모션 — 솔라온케어와 같은 이징을 전체에 공통으로 씁니다 */
    --ease:cubic-bezier(.22,.61,.36,1);
    --lift:-6px;
    --radius-pill:40px;
    /* 자간 — 글자가 클수록 좁게 (한글 제목이 벌어져 보이는 것 방지)
    자간 규칙 — 글자가 클수록 좁게 붙인다. 크기로만 정한다.
       40px+ --ls-xl · 28~40 --ls-lg · 20~28 --ls-md · 16~20 --ls-sm · 그 아래 --ls-body
     ⚠ 새 컴포넌트에 자간을 안 적으면 0 이 되어 주변보다 헐거워 보인다.
       (입력칸·칩·버튼에서 실제로 그랬다)
     ⚠ 예외: .eyebrow · .panel-tag · STEP 처럼 작은 라벨은 일부러 양수로 벌린다. */
   --ls-xl:-.045em;   /* 40px 이상 */
    --ls-lg:-.035em;   /* 28~40px */
    --ls-md:-.03em;    /* 20~28px */
    --ls-sm:-.02em;    /* 16~20px */
    --ls-body:-.01em;  /* 본문 */
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12181F;
      --surface:#1A222B;
      --surface-2:#222B35;
      --ink:#F2F5F7;
      --ink-2:#B8C0C8;
      --ink-3:#98A2AC;
      --line:#2C3138;
      --line-strong:#3C444E;
      --deep:#0D1218;
      --deep-2:#080C10;
      --deep-ink:#FFFFFF;
      --deep-ink-2:#B8C0C8;
      --deep-line:#2C3138;
      --green:#8CC94A;
      --green-bright:#A0D65F;
      --green-soft:#1E2A16;
      --on-green:#17212B;
      --green-text:#A0D65F;
      --amber:#FF8A5C;
      --amber-bright:#FF6B35;
      --amber-soft:#33190F;
      --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.65);
      --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 24px 60px -24px rgba(0,0,0,.75);
    }
  }
  :root[data-theme="dark"]{
    --bg:#12181F;
    --surface:#1A222B;
    --surface-2:#222B35;
    --ink:#F2F5F7;
    --ink-2:#B8C0C8;
    --ink-3:#98A2AC;
    --line:#2C3138;
    --line-strong:#3C444E;
    --deep:#0D1218;
    --deep-2:#080C10;
    --deep-ink:#FFFFFF;
    --deep-ink-2:#B8C0C8;
    --deep-line:#2C3138;
    --green:#8CC94A;
    --green-bright:#A0D65F;
    --green-soft:#1E2A16;
    --on-green:#17212B;
    --green-text:#A0D65F;
    --amber:#FF8A5C;
    --amber-bright:#FF6B35;
    --amber-soft:#33190F;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.65);
    --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 24px 60px -24px rgba(0,0,0,.75);
    }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);letter-spacing:var(--ls-body);
    font-size:16px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    word-break:keep-all;
  }
  h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.25;letter-spacing:-.02em;}
  p{margin:0;}
  a{color:inherit;}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--amber-bright);outline-offset:3px;}

  .display{font-family:var(--font-sub);font-weight:800;letter-spacing:var(--ls-lg);}
  /* 메인 폰트(SB 어그로)는 히어로 대형 후킹 한 곳에만 쓴다.
     다른 곳으로 번지면 페이지 톤이 산만해진다. */
  .banner h1.display{font-family:var(--font-main);font-weight:700;letter-spacing:var(--ls-xl);}
  /* 카드 제목도 서브 폰트(Paperlogy 700) */
  h3,.st b,.bshot figcaption b,.qa .qt{
    font-family:var(--font-sub);font-weight:700;letter-spacing:var(--ls-md);
  }
  /* 큰 숫자류는 더 좁게 — 글자 크기가 클수록 자간을 줄인다 */
  .rv,.sv .v,.big,.ring b,.hstat .v{letter-spacing:var(--ls-xl);}
  .mono{font-family:var(--font-body);font-variant-numeric:tabular-nums;}
  .num{font-variant-numeric:tabular-nums;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  .eyebrow{
    font-family:var(--font-body);font-size:11px;font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;color:var(--green-text);
    display:flex;align-items:center;gap:10px;
  }
  .eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:80px;}

  /* ---------- NAV ---------- */
  .nav{
    position:sticky;top:0;z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav-in{display:flex;align-items:center;gap:28px;height:76px;}
  .logo{display:flex;align-items:center;white-space:nowrap;}
  .logo img{height:40px;width:auto;display:block;}
  /* 푸터는 항상 네이비 배경이므로 흰색 로고 버전을 그대로 쓴다.
     (이전에는 어두운 글씨 로고를 흰 판 위에 올리는 편법을 썼다) */
  .foot-logo img{height:32px;width:auto;display:block;}

  /* 헤더 로고: 배경 밝기에 따라 정식 로고 2종을 교체한다 */
  .logo .logo-on-dark{display:none;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .logo .logo-on-light{display:none;}
    :root:not([data-theme="light"]) .logo .logo-on-dark{display:block;}
  }
  :root[data-theme="dark"] .logo .logo-on-light{display:none;}
  :root[data-theme="dark"] .logo .logo-on-dark{display:block;}
  .logo-mark{width:22px;height:22px;border-radius:50%;background:
    radial-gradient(circle at 35% 35%, var(--amber-bright), var(--amber) 55%, var(--green) 56%);}
  .nav-links{display:flex;gap:22px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--ink-2);}
  .nav-links a{text-decoration:none;padding:4px 0;border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s;}
  .nav-links a:hover{color:var(--ink);border-color:var(--green-text);}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:none;border-radius:var(--radius);cursor:pointer;
    font-weight:700;font-size:15px;letter-spacing:-.01em;
    padding:13px 22px;text-decoration:none;transition:transform .12s, filter .15s;
  }
  .btn:active{transform:translateY(1px);}
  /* 흰 글자를 쓰기로 했으므로 채움을 한 단계 진하게 한다.
     ⚠ #FF6B35(--amber-bright) + 흰 글자는 2.84:1 로 읽히지 않는다.
       #D13800(--amber) + 흰 글자는 4.91:1. 채움색을 밝게 되돌리려면
       글자를 네이비(#17212B, 5.75:1)로 함께 바꿔야 한다. */
  .btn-amber{background:var(--amber);color:#fff;}
  .btn-amber:hover{filter:brightness(1.08);}
  /* Apple Green 위 흰 글자는 대비 2.07:1로 읽히지 않는다. 니어블랙 사용(9.31:1) */
  .btn-green{background:var(--green);color:var(--on-green);}
  .btn-green:hover{filter:brightness(1.1);}
  .btn-ghost{background:transparent;color:var(--deep-ink);border:1px solid var(--deep-line);}
  .btn-ghost:hover{background:rgba(255,255,255,.06);}
  .btn-sm{padding:9px 16px;font-size:13.5px;min-height:44px;}
  @media (max-width:900px){ .nav-links{display:none;} }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;overflow:hidden;
    background:var(--deep);
    color:var(--deep-ink);
    border-bottom:1px solid var(--deep-line);
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(var(--deep-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--deep-line) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
    opacity:.75;
  }
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(760px 520px at 8% 92%, rgba(232,134,15,.28), rgba(232,134,15,0) 68%),
      radial-gradient(620px 480px at 96% 4%, rgba(58,102,224,.28), rgba(58,102,224,0) 66%);
  }
  .hero-in{position:relative;display:block;max-width:760px;padding:84px 24px 88px;}
  .hero .eyebrow{color:var(--green-text);}
  .hero .eyebrow::after{background:var(--deep-line);}
  .hero h1{
    font-size:clamp(38px,5.2vw,62px);line-height:1.16;margin:22px 0 0;
  }
  /* ---- banner-style hero block ---- */
  .banner{position:relative;padding:44px 34px 40px;text-align:center;}
  .bolt{
    position:absolute;top:-12%;left:50%;width:118%;height:124%;
    transform:translateX(-50%) rotate(6deg);
    background:rgba(255,255,255,.05);
    clip-path:polygon(62% 0%, 20% 47%, 45% 47%, 24% 100%, 82% 40%, 54% 40%, 88% 0%);
    pointer-events:none;
  }
  .brk{position:absolute;width:36px;height:36px;border:4px solid var(--gold);}
  .brk.tl{top:0;left:0;border-right:0;border-bottom:0;}
  .brk.tr{top:0;right:0;border-left:0;border-bottom:0;}
  .brk.bl{bottom:0;left:0;border-right:0;border-top:0;}
  .brk.br{bottom:0;right:0;border-left:0;border-top:0;}
  .bn-eyebrow{
    position:relative;font-size:clamp(14px,1.5vw,17px);font-weight:700;
    color:var(--deep-ink-2);letter-spacing:-.01em;
  }
  .banner h1{position:relative;margin-top:16px;}
  .bn-l1{
    display:block;font-size:clamp(54px,9vw,112px);line-height:.98;
    letter-spacing:-.06em;color:var(--gold);
  }
  .bn-l2{
    display:block;margin-top:8px;font-size:clamp(23px,2.9vw,38px);line-height:1.15;
    letter-spacing:-.04em;color:#fff;
  }
  /* 필 + 스탬프를 한 줄로 묶어 중앙 정렬한다.
     스탬프를 absolute 로 두면 긴 필 문구의 끝을 덮는다. */
  /* 필은 배너 정중앙, 스탬프는 오른쪽 뱃지.
     둘 다 안쪽에 두면 가운데 정렬된 필이 뱃지 폭의 두 배만큼 좁아져
     글자가 읽히지 않는다. 그래서 뱃지를 배너 밖으로 살짝 빼고,
     필에는 뱃지에 닿지 않을 만큼의 max-width 를 건다. */
  .bn-foot{
    position:relative;text-align:center;margin-top:22px;
  }
  .bn-pill{
    position:relative;display:inline-block;max-width:calc(100% - 150px);
    background:var(--red);color:#fff;border-radius:9px;
    padding:11px 22px;font-size:clamp(15px,1.5vw,20px);letter-spacing:-.035em;
  }
  .stamp{
    position:absolute;right:-46px;top:50%;z-index:3;
    margin-top:-75px;
    width:150px;height:150px;border-radius:50%;
    background:#3A3A3E;color:#fff;
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:22px;font-weight:800;line-height:1.4;letter-spacing:-.035em;
    transform:rotate(-9deg);box-shadow:0 10px 30px -12px rgba(0,0,0,.7);
  }
  .hero-cta{justify-content:center;}
  .hero-stats{justify-content:center;text-align:center;}
  .hero-sub{margin-inline:auto;text-align:center;}
  @media (max-width:900px){
    .banner{padding:38px 22px 34px;}
    .bn-pill{max-width:100%;}
    .stamp{position:static;margin:16px auto 0;width:128px;height:128px;font-size:18px;}
  }
  .hero h1 .dim{color:var(--deep-ink-2);}
  .hero h1 .hit{color:var(--green-text);}
  .hero-check{
    display:flex;align-items:center;gap:9px;margin-top:18px;
    font-size:13.5px;font-weight:600;color:var(--deep-ink-2);
  }
  .hero-check::before{
    content:"✓";width:19px;height:19px;border-radius:50%;flex-shrink:0;
    background:var(--amber-bright);color:#160B00;font-size:11px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-stats{
    display:flex;flex-wrap:wrap;gap:16px 56px;margin-top:40px;padding-top:28px;
    border-top:1px solid var(--deep-line);
  }
  .hstat .v{font-size:30px;font-weight:800;letter-spacing:-.035em;color:var(--deep-ink);line-height:1.1;}
  .hstat .v em{font-style:normal;color:var(--green-text);}
  .hstat .k{margin-top:7px;font-size:12.5px;color:var(--deep-ink-2);letter-spacing:-.01em;}

  .hero-visual{position:relative;}
  .float-chip{
    position:absolute;top:-30px;left:-16px;z-index:2;
    background:var(--surface);border:1px solid var(--line);border-radius:9px;
    padding:11px 15px;display:flex;gap:11px;align-items:center;box-shadow:var(--shadow-lg);
  }
  .float-chip .ic{
    width:31px;height:31px;border-radius:8px;background:var(--green-soft);color:var(--green-text);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;
  }
  .float-chip .t{font-size:11px;color:var(--ink-3);line-height:1.4;}
  .float-chip .b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
  .float-badge{
    position:absolute;right:-16px;bottom:-20px;z-index:2;
    background:var(--surface);border:1px solid var(--line);border-radius:9px;
    padding:11px 15px;display:flex;gap:9px;align-items:center;box-shadow:var(--shadow-lg);
    font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  }
  .float-badge .dot{
    width:19px;height:19px;border-radius:50%;background:var(--green);color:var(--on-green);
    font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  :root[data-theme="dark"] .float-badge .dot{color:#04120B;}
  @media (max-width:900px){
    .float-chip{left:0;top:-24px;}
    .float-badge{right:0;bottom:-14px;}
  }
  .hero-sub{
    margin-top:62px;font-size:16.5px;font-weight:500;
    color:var(--deep-ink-2);max-width:34ch;line-height:1.75;letter-spacing:-.01em;
  }
  .hero-sub .hit{color:var(--green-text);font-weight:700;}
  .hero-support{
    margin-top:18px;font-size:16.5px;font-weight:500;color:var(--deep-ink-2);
    max-width:36ch;line-height:1.7;
  }
  .hero-sub b{color:#fff;font-weight:800;}
  :root[data-theme="dark"] .hero-sub b{color:var(--deep-ink);}
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
  .hero-badges{
    display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:36px;padding-top:22px;
    border-top:1px solid var(--deep-line);
    font-family:var(--font-body);font-size:12px;letter-spacing:.02em;color:var(--deep-ink-2);
  }
  .hero-badges span{display:flex;align-items:center;gap:7px;}
  .hero-badges span::before{content:"";width:5px;height:5px;background:var(--green-bright);border-radius:50%;}

  /* bill card */
  .bill{
    background:var(--surface);color:var(--ink);border-radius:6px;
    box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line);
  }
  .bill-head{
    padding:14px 20px;border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;
    font-family:var(--font-body);font-size:11px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase;
  }
  .bill-row{padding:20px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
  .bill-row + .bill-row{border-top:1px dashed var(--line);}
  .bill-label{font-size:13.5px;font-weight:600;color:var(--ink-2);}
  .bill-label small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-3);letter-spacing:0;}
  .bill-amt{font-size:26px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;}
  .bill-amt.was{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1.5px;}
  .bill-amt.now{color:var(--green-text);}
  .bill-foot{background:var(--green-soft);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
  .bill-foot .k{font-size:13px;font-weight:700;color:var(--green-text);}
  .bill-foot .v{font-size:22px;font-weight:800;color:var(--green-text);letter-spacing:-.03em;}
  @media (max-width:900px){
    .hero-in{grid-template-columns:1fr;gap:40px;padding:64px 24px 56px;}
  }

  /* ---------- SECTION ---------- */
  section{padding:88px 0;}
  .sec-head{max-width:44ch;margin-bottom:44px;}
  .sec-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:18px;}
  .sec-head p{margin-top:16px;color:var(--ink-2);font-size:17px;}
  .alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

  /* ---------- CALCULATOR ---------- */
  .calc{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start;}
  .calc-ctrl{
    background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:24px;box-shadow:var(--shadow);
  }
  .alt .calc-ctrl{background:var(--bg);}
  .ctrl-label{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
  .ctrl-val{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:6px;}
  .ctrl-val span{font-size:17px;font-weight:600;color:var(--ink-2);margin-left:3px;}
  /* 예전 평수 슬라이더용 전역 규칙(input[type=range])은 제거했습니다.
     타입+속성 선택자라 특이도가 .c2-range보다 높아 높이를 4px로 눌러버렸습니다.
     슬라이더 스타일은 "섹션 2 · 절감 계산기" 블록의 .c2-range 하나로 관리합니다. */
  .chips{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap;}
  .chip{
    /* 탭 영역 44px 확보(가이드 1.4). 보이는 알약은 안쪽 패딩으로 유지 */
    min-height:44px;display:inline-flex;align-items:center;
    border:1px solid var(--line-strong);background:transparent;color:var(--ink-2);
    border-radius:100px;padding:6px 15px;font-size:13px;font-weight:600;
    letter-spacing:var(--ls-body);cursor:pointer;transition:.15s;
  }
  .chip:hover{border-color:var(--green-text);color:var(--green-text);}
  .chip[aria-pressed="true"]{background:var(--green);border-color:var(--green-text);color:var(--on-green);}
  :root[data-theme="dark"] .chip[aria-pressed="true"]{color:#04120B;}

  .compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .panel{border:1px solid var(--line);border-radius:6px;padding:26px;background:var(--surface);position:relative;}
  .alt .panel{background:var(--bg);}
  .panel.after{
    border-color:var(--green-text);background:var(--green-soft);
    box-shadow:0 0 0 1px var(--green);
  }
  .panel-tag{
    font-family:var(--font-body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-3);
  }
  .panel.after .panel-tag{color:var(--green-text);}
  .panel h3{font-size:17px;font-weight:800;letter-spacing:var(--ls-sm);}
  .panel .big{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.04em;margin-top:20px;line-height:1;}
  .panel.after .big{color:var(--green-text);}
  .panel .per{font-size:13px;color:var(--ink-3);margin-top:10px;}
  .panel .yr{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line-strong);font-size:14px;color:var(--ink-2);display:flex;justify-content:space-between;}
  .panel .yr b{font-weight:800;color:var(--ink);}

  .result{
    margin-top:16px;background:var(--deep);color:var(--deep-ink);border-radius:6px;padding:26px 28px;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  }
  .result .rl{font-size:14px;color:var(--deep-ink-2);font-weight:600;}
  .result .rv{font-size:clamp(30px,4.4vw,46px);color:var(--green-text);letter-spacing:-.02em;line-height:1.1;margin-top:4px;}
  .result .rn{font-family:var(--font-body);font-size:12.5px;color:var(--deep-ink-2);text-align:right;line-height:1.8;}
  .disclaimer{
    margin-top:18px;font-size:12.5px;color:var(--ink-3);line-height:1.8;
    border-left:2px solid var(--line-strong);padding-left:14px;
  }
  @media (max-width:900px){ .calc{grid-template-columns:1fr;} .compare{grid-template-columns:1fr;} }

  /* ---------- STEPS 3 ---------- */
  .how{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface);}
  .alt .how{background:var(--bg);}
  .how-item{padding:34px 28px;position:relative;}
  .how-item + .how-item{border-left:1px solid var(--line);}
  .how-ico{width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green-text);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;}
  .how-item h3{font-size:20px;margin-top:18px;}
  .how-item p{margin-top:12px;color:var(--ink-2);font-size:15px;}
  .how-note{margin-top:28px;text-align:center;font-size:clamp(19px,2.4vw,26px);font-weight:800;letter-spacing:-.03em;}
  .how-note em{font-style:normal;color:var(--green-text);}
  @media (max-width:820px){
    .how{grid-template-columns:1fr;}
    .how-item + .how-item{border-left:none;border-top:1px solid var(--line);}
  }

  /* ---------- DEFINE (BENTO) ---------- */
  .define{background:var(--bg);}
  .def-in{max-width:1000px;text-align:center;margin:0 auto;}
  .def-q{
    width:34px;height:34px;border-radius:50%;margin:0 auto 18px;
    background:var(--green-soft);color:var(--green-text);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
  }
  .define h2{font-size:clamp(28px,3.8vw,44px);line-height:1.3;}
  .define h2 .hit{color:var(--green-text);}
  .def-sub{margin-top:18px;color:var(--ink-2);font-size:16px;line-height:1.85;}

  .bento{
    margin-top:44px;display:grid;grid-template-columns:1fr 1fr;
    grid-auto-rows:minmax(0,auto);gap:18px;text-align:left;
  }
  .bcard{
    position:relative;overflow:hidden;border-radius:18px;padding:34px 32px;
    display:flex;flex-direction:column;min-height:216px;
  }
  .b1{grid-row:span 2;}
  .bcard h3{font-size:clamp(20px,2.3vw,27px);line-height:1.35;letter-spacing:-.035em;}
  .bcard ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px;
    font-size:14.5px;font-weight:600;line-height:1.6;}
  .bcard li{display:flex;gap:9px;}
  .bcard li::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
    opacity:.55;flex-shrink:0;margin-top:9px;}
  .b-dark{background:var(--deep);color:var(--deep-ink);}
  .b-dark h3{color:#fff;}
  .b-soft{background:var(--surface-2);color:var(--ink-2);}
  .b-soft h3{color:var(--ink);}
  .b-blue{background:var(--green-bright);color:rgba(255,255,255,.92);}
  .b-blue h3{color:#fff;}
  .bglyph{
    position:absolute;right:16px;bottom:4px;font-size:clamp(74px,9vw,116px);line-height:1;
    font-weight:800;letter-spacing:-.07em;opacity:.13;pointer-events:none;
  }
  @media (max-width:820px){
    .bento{grid-template-columns:1fr;}
    .b1{grid-row:auto;}
    .bcard{min-height:0;padding:28px 24px;}
  }

  /* ---------- CHECK (ADDRESS) ---------- */
  .exp{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .exp-in{max-width:900px;margin:0 auto;text-align:center;}
  .exp h2{font-size:clamp(27px,3.6vw,42px);line-height:1.3;}
  .exp h2 .hit{color:var(--green-text);}
  .exp .lead{margin-top:16px;color:var(--ink-2);font-size:15.5px;line-height:1.75;}
  .exp .lead .lead-note{display:inline-block;margin-top:6px;font-size:13.5px;color:var(--ink-3);}

  /* ============================================================
     입력 폼 — 라벨 + 입력상자 한 벌(.fld)로 통일
     예전에는 검색바가 알약, 상세주소가 라운드 사각, 버튼이 각진 모양이라
     한 화면에 세 가지 디자인이 섞여 보였다. 모서리·높이·폭을 하나로 맞춘다.
     ============================================================ */
  /* 위저드 안의 모든 줄은 카드 안쪽 폭을 그대로 쓴다.
     여기에만 max-width 를 걸면 제목·설명(카드 폭)과 왼쪽이 어긋난다.
     실제로 29px 밀려 있었다. */
  .wform{max-width:none;}
  .fld + .fld{margin-top:16px;}
  .fld[hidden]{display:none;}
  /* 자간은 크기대로 붙인다(토큰 기준).
       20px 이상 --ls-md · 16~20px --ls-sm · 그 아래 --ls-body
     예전에는 라벨만 -.02em, 입력칸은 0 이라 입력 글자가 헐거워 보였다. */
  .fld label{
    display:block;margin-bottom:8px;line-height:1.5;
    font-size:13.5px;font-weight:700;color:var(--ink-2);letter-spacing:var(--ls-body);
  }
  .fld label span{font-weight:500;color:var(--ink-3);}
  .fld-row{
    display:flex;align-items:center;gap:12px;
    background:var(--bg);border:1px solid var(--line-strong);border-radius:14px;
    padding:0 8px 0 16px;min-height:60px;
    transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
  }
  .fld-row:focus-within{border-color:var(--green-text);box-shadow:0 0 0 3px var(--green-soft);}
  /* 주소 칸은 칸 전체가 눌리는 목표물이라 손 모양으로 알린다 */
  .wstep[data-step="1"] .fld:first-child .fld-row{cursor:pointer;}
  .wstep[data-step="1"] .fld:first-child .fld-row:hover{border-color:var(--green-text);}
  .fld-row svg{width:20px;height:20px;flex-shrink:0;color:var(--ink-3);}
  /* iOS 자동 확대 방지를 위해 16px */
  .fld-row input{
    flex:1;min-width:0;border:0;background:transparent;outline:none;
    font-family:inherit;font-size:16px;color:var(--ink);padding:16px 0;
    letter-spacing:var(--ls-sm);line-height:1.5;
  }
  .fld-row input::placeholder{color:var(--ink-3);}
  /* 상세주소처럼 버튼이 없는 칸은 오른쪽 여백을 맞춘다 */
  .fld-row:not(:has(.fld-btn)){padding-right:16px;}
  .fld-btn{
    flex-shrink:0;min-height:44px;padding:0 18px;border-radius:10px;cursor:pointer;
    border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-2);
    font-family:inherit;font-size:14px;font-weight:700;letter-spacing:var(--ls-body);
    transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
  }
  .fld-btn:hover{color:var(--green-text);border-color:var(--green-text);background:var(--green-soft);}
  /* 필수가 아닌 칸임을 칸 안에서 바로 알린다 */
  .fld-tag{
    flex:none;margin-right:8px;padding:4px 9px;border-radius:6px;
    background:var(--surface-2);color:var(--ink-3);
    font-size:11.5px;font-weight:700;letter-spacing:var(--ls-body);line-height:1.5;
  }

  .exp .scan{margin:22px auto 0;max-width:740px;text-align:left;min-height:0;}
  .exp .scan-line{color:var(--ink-2);}
  .exp .scan-line .tick{color:var(--green-text);}
  .exp .card-score{margin-top:18px;}

  .checks{margin-top:56px;padding-top:44px;border-top:1px solid var(--line);}
  .checks .lbl{font-size:13px;color:var(--ink-3);margin-bottom:22px;letter-spacing:-.01em;}
  /* 검토 항목 5개 — 0831 지정 지표 */
  .check-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
  .chk{
    background:var(--bg);border:1px solid var(--line);border-radius:14px;
    padding:26px 18px;text-align:center;
  }
  .chk .ic{
    width:48px;height:48px;border-radius:13px;margin:0 auto 16px;
    display:flex;align-items:center;justify-content:center;
    background:var(--green-soft);color:var(--green-text);
  }
  /* 계통연계는 배점 45점으로 사실상 당락을 가르는 항목이라 오렌지 포인트로 구분 */
  .chk:first-child .ic{background:var(--amber-soft);color:var(--amber);}
  .chk .ic svg{width:22px;height:22px;}
  .chk h3{font-size:15.5px;letter-spacing:-.03em;}
  .chk p{margin-top:10px;font-size:12.8px;color:var(--ink-3);line-height:1.7;}
  @media (max-width:1040px){ .check-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:820px){ .check-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:480px){
    .check-grid{grid-template-columns:1fr;}
    .fld-row{flex-wrap:wrap;padding:14px;min-height:0;}
    .fld-row input{padding:6px 0;}
    .fld-btn{width:100%;}
    .wiz .wact .btn{min-height:52px;padding:14px 22px;}
  }

  /* ---------- SAVINGS TABLE ---------- */
  .save-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  /* 이전 버전 표(요금 비교표)용 전역 규칙을 제거했습니다.
     page에 남은 table은 개인정보 팝업(.pm-tbl) 하나뿐인데,
     tbody tr:last-child td{font-size:19px;font-weight:800} 같은 규칙이
     특이도(0,1,3)로 .pm-tbl td(0,1,1)를 눌러 마지막 행 글자가 커졌습니다.
     표 스타일은 .pm-tbl 블록에서만 관리합니다. */
  table{border-collapse:collapse;}
  .save-kicker{font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;line-height:1.2;}
  .save-kicker .hit{color:var(--green-text);}
  .save-sub{margin-top:20px;font-size:17px;color:var(--ink-2);}
  .zeros{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;}
  .zero{
    border:1px solid var(--line-strong);border-radius:100px;padding:7px 15px;
    font-family:var(--font-body);font-size:12px;letter-spacing:.06em;color:var(--ink-2);
  }
  @media (max-width:900px){ .save-grid{grid-template-columns:1fr;gap:32px;} }

  /* ---------- WHY ---------- */
  /* 0831 피드백: 큰 면을 다크로 채우지 않는다. 라이트 그린 배경으로. */
  .why{background:var(--surface-2);color:var(--ink);}
  .why-in{max-width:900px;text-align:center;}
  .why-eyebrow{font-size:15px;font-weight:700;color:var(--deep-ink-2);letter-spacing:-.01em;}
  .why h2{margin-top:14px;font-size:clamp(26px,3.5vw,42px);line-height:1.35;}
  .why h2 .hit{color:var(--gold);}
  /* 예전에는 굵은 빨간 한 줄 + 회색 한 줄이라 둘 다 힘이 없었다.
     핵심 숫자를 크게 세우고 설명을 아래에 붙여 위계를 만든다. */
  /* 박스를 두지 않는다.
     섹션 배경이 이미 --surface-2 라 같은 색 카드를 얹으면
     테두리만 떠 보여 "실수로 남은 선"처럼 읽힌다.
     대신 숫자를 키우고 색을 줘서 글자만으로 세운다. */
  .promise{
    margin:30px auto 0;max-width:660px;text-align:center;
  }
  .promise-k{
    display:block;font-family:var(--font-sub);font-weight:700;
    font-size:clamp(24px,3vw,34px);letter-spacing:var(--ls-lg);color:var(--ink);
  }
  .promise-k em{font-style:normal;color:var(--green-text);}
  /* 구분점도 글자다. --green(#7DBA3A)은 밝은 면에서 2.16:1 이라
     글자색으로 못 쓴다. 연한 회선 대신 옅은 잉크로 둔다. */
  .promise-k i{
    font-style:normal;margin:0 14px;color:var(--ink-3);font-weight:400;
  }
  .promise-s{
    display:block;margin-top:14px;
    font-size:15.5px;line-height:1.8;color:var(--ink-2);
  }
  .promise-s b{color:var(--ink);font-weight:700;}
  @media (max-width:560px){
    .promise{margin-top:24px;}
    .promise-k i{margin:0 8px;}
    .promise-s{font-size:14px;}
  }
  .why-cards{margin-top:36px;display:grid;gap:16px;text-align:left;}
  .wcard{
    background:var(--surface);color:var(--ink);border:1px solid var(--line);
    border-radius:14px;padding:26px 28px;display:flex;align-items:center;gap:26px;
  }
  .wcard .wtext{flex:1;min-width:0;}
  .wk{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink-3);}
  .wk .n{
    width:19px;height:19px;border-radius:50%;background:var(--green);color:var(--on-green);
    font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  }
  :root[data-theme="dark"] .wk .n{color:#04120B;}
  .wcard h3{font-size:clamp(19px,2.2vw,26px);line-height:1.45;}
  .wcard h3 .hit{color:var(--green-text);}
  .wcard .wsub{margin-top:10px;font-size:14px;color:var(--ink-3);}
  .wico{
    width:98px;height:98px;flex-shrink:0;border-radius:22px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-weight:800;font-size:24px;color:#fff;letter-spacing:-.04em;line-height:1.2;
    /* 흰 글자(24px w800)가 얹히므로 진한 쪽 오렌지를 쓴다.
       #FF8A5C~#FF6B35 였을 때 흰 글자가 2.4~2.84:1 로 읽히지 않았다. */
    background:linear-gradient(155deg,#E85320,#C63200);
    box-shadow:0 14px 30px -14px rgba(232,134,15,.75);
  }
  @media (max-width:640px){
    .wcard{flex-direction:column;align-items:flex-start;gap:18px;padding:22px;}
    .wico{width:76px;height:76px;font-size:20px;border-radius:18px;}
  }

  /* ---------- BENEFITS ---------- */
  .bens{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
  .ben{background:var(--bg);padding:32px 30px;}
  .alt .ben{background:var(--surface);}
  .ben-k{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;color:var(--green-text);text-transform:uppercase;}
  .ben h3{font-size:21px;margin-top:14px;}
  .ben .lead{margin-top:14px;font-size:15.5px;font-weight:700;color:var(--ink);}
  .ben p{margin-top:8px;color:var(--ink-2);font-size:15px;}
  @media (max-width:820px){ .bens{grid-template-columns:1fr;} }

  /* ---------- PROCESS ---------- */
  .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .step{border-top:2px solid var(--line-strong);padding-top:18px;position:relative;}
  .step:first-child{border-top-color:var(--green-text);}
  .step-n{font-family:var(--font-body);font-size:11.5px;letter-spacing:.14em;color:var(--ink-3);}
  .step h3{font-size:18px;margin-top:10px;}
  .step p{margin-top:8px;font-size:14.5px;color:var(--ink-2);}
  @media (max-width:820px){ .proc{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .proc{grid-template-columns:1fr;} }

  /* ---------- VS ---------- */
  .vs-sec{margin-top:64px;padding-top:56px;border-top:1px solid var(--line);}
  .vs-sec > h3{font-size:clamp(24px,3vw,34px);margin-bottom:8px;}
  .vs-sec > p.vs-lead{color:var(--ink-2);font-size:16.5px;margin-bottom:34px;}
  .vs{display:grid;grid-template-columns:1fr 56px 1fr;gap:0 12px;align-items:start;}
  .vs.one{grid-template-columns:1fr;max-width:520px;}
  .vs-col{display:flex;flex-direction:column;gap:16px;}
  .vs-card{border-radius:6px;border:1px solid var(--line);overflow:hidden;position:relative;}
  .vs-card.them{background:var(--surface-2);}
  .vs-card.us{background:var(--deep);border-color:var(--green-text);box-shadow:0 0 0 1px var(--green);}
  .vs-card.us::before{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(var(--deep-line) 1px,transparent 1px),linear-gradient(90deg,var(--deep-line) 1px,transparent 1px);
    background-size:36px 36px;opacity:.7;pointer-events:none;
  }
  .vs-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px 0;}
  .vs-tag{
    font-family:var(--font-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    padding:6px 12px;border-radius:100px;font-weight:600;
  }
  .them .vs-tag{background:var(--line-strong);color:var(--ink-2);}
  .us .vs-tag{background:var(--green);color:var(--on-green);}
  :root[data-theme="dark"] .us .vs-tag{color:#04120B;}
  .vs-dur{font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
  .them .vs-dur{color:var(--ink-3);}
  .us .vs-dur{color:var(--green-text);}

  .track{position:relative;display:flex;padding:40px 18px 26px;}
  .track-line{position:absolute;top:52px;height:2px;border-radius:1px;}
  .them .track-line{background:var(--line-strong);}
  .us .track-line{background:var(--green);}
  .node{position:relative;flex:1;text-align:center;font-size:12.5px;font-weight:700;line-height:1.45;}
  .node::before{
    content:"";display:block;width:12px;height:12px;border-radius:50%;margin:0 auto 14px;
    position:relative;z-index:1;
  }
  .them .node{color:var(--ink-3);}
  .them .node::before{background:var(--line-strong);box-shadow:0 0 0 4px var(--surface-2);}
  .us .node{color:var(--deep-ink);}
  .us .node::before{background:var(--green);box-shadow:0 0 0 4px var(--deep);}
  .us .node:last-child::before{background:var(--amber-bright);box-shadow:0 0 0 4px var(--deep);}

  .vs-cap{font-size:14.5px;line-height:1.7;padding:0 4px;}
  .vs-cap.them-cap{color:var(--ink-3);}
  .vs-cap.us-cap{color:var(--ink-2);}
  .vs-cap b{display:block;margin-top:4px;font-weight:800;}
  .them-cap b{color:var(--ink-2);}
  .us-cap b{color:var(--green-text);}

  .vs-mid{
    display:flex;align-items:center;justify-content:center;padding-top:64px;
    font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--ink-3);letter-spacing:.06em;
  }
  @media (max-width:820px){
    .vs{grid-template-columns:1fr;gap:16px;}
    .vs-mid{padding:0;}
    .track{padding:34px 12px 22px;}
    .node{font-size:11.5px;}
  }

  /* ---------- PARTNER SPLIT ---------- */
  .split{
    position:relative;overflow:hidden;border-radius:18px;padding:66px 32px;
    background:
      radial-gradient(620px 380px at 18% 62%, rgba(58,102,224,.32), rgba(58,102,224,0) 70%),
      radial-gradient(620px 380px at 82% 62%, rgba(35,178,190,.30), rgba(35,178,190,0) 70%),
      var(--deep);
    border:1px solid var(--deep-line);
  }
  .split-grid{
    position:relative;display:grid;grid-template-columns:auto minmax(200px,1fr) auto;
    align-items:center;gap:26px;max-width:860px;margin:0 auto;
  }
  .ball{
    width:186px;height:186px;border-radius:50%;flex-shrink:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    color:#fff;letter-spacing:-.03em;padding:16px;
  }
  .ball .bn{font-size:21px;font-weight:800;line-height:1.3;}
  .ball .bs{margin-top:8px;font-size:12px;font-weight:600;opacity:.85;line-height:1.5;}
  .ball-a{
    background:radial-gradient(circle at 34% 28%, #5B8CFF, #1B3B8B 72%);
    box-shadow:0 0 90px -14px rgba(91,140,255,.85);
  }
  .ball-b{
    background:radial-gradient(circle at 34% 28%, #46CBD6, #0E5F79 72%);
    box-shadow:0 0 90px -14px rgba(70,203,214,.8);
  }
  .arrows{display:grid;justify-items:center;gap:0;}
  .pill{
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
    border-radius:100px;padding:10px 20px;font-size:13.5px;font-weight:700;
    color:var(--deep-ink);letter-spacing:-.02em;text-align:center;
  }
  .ln{width:100%;height:1px;background:rgba(255,255,255,.4);position:relative;margin:13px 0;}
  .ln.to-r::after{
    content:"";position:absolute;right:0;top:-4px;
    border-left:9px solid rgba(255,255,255,.65);
    border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  }
  .ln.to-l::before{
    content:"";position:absolute;left:0;top:-4px;
    border-right:9px solid rgba(255,255,255,.65);
    border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  }
  @media (max-width:760px){
    .split{padding:44px 20px;}
    .split-grid{grid-template-columns:1fr;justify-items:center;gap:20px;}
    .ball{width:150px;height:150px;}
    .ball .bn{font-size:18px;}
    .arrows{width:100%;max-width:320px;}
  }

  .faq{margin-top:60px;}
  .faq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;flex-wrap:wrap;}
  .faq-head h3{font-size:clamp(24px,3vw,32px);letter-spacing:-.04em;}
  .faq-head p{margin-top:8px;color:var(--ink-2);font-size:15px;}
  .faq-more{
    display:inline-flex;align-items:center;gap:9px;text-decoration:none;
    border:1px solid var(--line-strong);border-radius:100px;padding:11px 20px;
    font-size:14px;font-weight:700;color:var(--ink);transition:.15s;white-space:nowrap;
  }
  .faq-more:hover{border-color:var(--green-text);color:var(--green-text);}
  details.qa{
    border:1px solid var(--line);border-radius:9px;overflow:hidden;
    background:var(--surface);margin-bottom:12px;
  }
  details.qa summary{
    cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
    padding:19px 22px;font-size:16.5px;font-weight:800;letter-spacing:-.025em;
  }
  details.qa summary::-webkit-details-marker{display:none;}
  /* Q/A 배지는 12개나 되는데 CTA 버튼과 같은 오렌지를 쓰고 있었다.
     강조색이 12곳에 흩어지면 정작 눌러야 할 버튼이 묻힌다(폰 레스토프).
     오렌지는 CTA 전용으로 두고 배지는 그린 계열로 내린다. */
  .qa .badge{
    width:32px;height:32px;border-radius:50%;flex-shrink:0;
    background:var(--green-soft);color:var(--green-text);
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  }
  .qa summary .qt{flex:1;min-width:0;}
  .qa summary::after{
    content:"";width:9px;height:9px;flex-shrink:0;
    border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;
  }
  details.qa[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
  .qa .ans{
    display:flex;gap:14px;padding:20px 22px;
    background:var(--surface-2);border-top:1px solid var(--line);
    color:var(--ink-2);font-size:15px;line-height:1.8;
  }
  .qa .ans strong{color:var(--green-text);font-weight:800;}
  .qa .ans b{color:var(--ink);font-weight:700;}
  .qa .ans a{
    display:inline-block;margin-top:10px;color:var(--green-text);font-weight:700;
    text-decoration:none;border-bottom:1.5px solid var(--green);
  }
  .qa .ans a:hover{color:var(--green-text);border-color:var(--green-text);}
  /* summary 자체가 탭 타깃이므로 44px 이상 확보 */
  details.qa summary{min-height:44px;}
  @media (max-width:560px){
    details.qa summary{font-size:15px;padding:16px 16px;gap:11px;}
    .qa .ans{padding:16px;}
  }

  /* ---------- SCORE ---------- */
  .score-sec{background:var(--deep);color:var(--deep-ink);position:relative;overflow:hidden;}
  .score-sec::before{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(var(--deep-line) 1px,transparent 1px),linear-gradient(90deg,var(--deep-line) 1px,transparent 1px);
    background-size:48px 48px;opacity:.55;
    -webkit-mask-image:radial-gradient(circle at 50% 40%, rgba(0,0,0,.8), transparent 72%);
    mask-image:radial-gradient(circle at 50% 40%, rgba(0,0,0,.8), transparent 72%);
  }
  .score-in{position:relative;text-align:center;max-width:680px;margin:0 auto;}
  .score-sec .eyebrow{color:var(--green-text);justify-content:center;}
  .score-sec .eyebrow::after{display:none;}
  .score-sec h2{font-size:clamp(30px,4.2vw,50px);margin-top:18px;}
  .score-sec .lead{margin-top:18px;color:var(--deep-ink-2);font-size:17px;}
  .addr{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap;justify-content:center;}
  .addr input{
    flex:1;min-width:260px;background:rgba(255,255,255,.06);border:1px solid var(--deep-line);
    color:var(--deep-ink);border-radius:var(--radius);padding:14px 16px;font-size:15px;font-family:inherit;
  }
  .addr input::placeholder{color:var(--deep-ink-2);}
  .addr input:focus{border-color:var(--green-text);background:rgba(255,255,255,.09);}

  .scan{margin-top:30px;text-align:left;max-width:460px;margin-inline:auto;min-height:150px;}
  /* 조회 중 화면 — 원형 스피너 + 한 줄 메시지 + 진행 막대
     (한 줄씩 갈아 끼우는 방식. 목록을 쌓지 않는다) */
  .scan-steps{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:16px;min-height:200px;padding:30px 20px;text-align:center;
  }
  .scan-steps[hidden]{display:none;}
  .scan-ring{
    width:44px;height:44px;border-radius:50%;flex:none;
    border:3px solid var(--green-soft);border-top-color:var(--green);
    animation:scanSpin .8s linear infinite;
  }
  @keyframes scanSpin{to{transform:rotate(360deg);}}
  .scan-msg{
    font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:-.02em;
    min-height:1.5em;
  }
  .scan-msg.in{animation:scanIn .32s var(--ease) both;}
  @keyframes scanIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
  .scan-bar{
    width:min(240px,80%);height:4px;border-radius:4px;overflow:hidden;
    background:var(--surface-2);
  }
  .scan-bar i{
    display:block;width:0;height:100%;border-radius:4px;background:var(--green);
    transition:width .5s var(--ease);
  }
  /* 모션 최소화 설정에서는 돌지 않게 한다 */
  @media (prefers-reduced-motion:reduce){
    .scan-ring{animation:none;border-top-color:var(--green-soft);}
    .scan-msg.in{animation:none;}
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

  .card-score{
    margin-top:30px;background:var(--surface);color:var(--ink);border-radius:6px;padding:32px;
    text-align:left;box-shadow:var(--shadow-lg);opacity:0;animation:fadeUp .4s ease forwards;
  }
  .grade-row{display:flex;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line);}
  .grade{
    width:74px;height:74px;flex-shrink:0;border-radius:50%;background:var(--green);color:var(--on-green);
    display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;letter-spacing:-.04em;
  }
  :root[data-theme="dark"] .grade{color:#04120B;}
  .grade-row h3{font-size:22px;}
  .grade-row p{color:var(--ink-2);font-size:14.5px;margin-top:6px;}
  .bars{margin-top:22px;display:grid;gap:14px;}
  .bar-row{display:grid;grid-template-columns:110px 1fr 42px;align-items:center;gap:14px;font-size:14px;}
  .bar-row .bl{color:var(--ink-2);font-weight:600;}
  .bar-track{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;}
  .bar-fill{height:100%;background:var(--green);border-radius:3px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1);}
  .bar-row .bv{font-family:var(--font-body);font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}
  .score-cta{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line-strong);}
  .score-cta p{font-size:15px;font-weight:700;}
  .score-cta p b{color:var(--green-text);}
  .score-note{
    margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
    font-size:12.5px;line-height:1.6;color:var(--ink-3);letter-spacing:-.01em;
  }

  /* ---------- 히어로 · 신청 흐름 (첫 화면에서 "어떻게" 보이게) ---------- */
  .hero-how{
    margin-top:26px;padding-top:22px;border-top:1px solid var(--deep-line);
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;
  }
  .hero-how .hh{
    font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--deep-ink-2);flex:none;
  }
  .hero-how ol{
    display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0;padding:0;
  }
  .hero-how li{
    display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.06);border:1px solid var(--deep-line);
    border-radius:100px;padding:8px 15px 8px 8px;
    font-size:13.5px;font-weight:600;color:var(--deep-ink);white-space:nowrap;
  }
  /* 원 안 숫자 정렬.
     line-height:1 로 두면 Pretendard 메트릭 때문에 숫자가 0.75px 위로 뜬다.
     normal 로 두면 브라우저가 글꼴 메트릭을 그대로 써서 정확히 가운데 온다
     (실측: -0.75px → 0.00px). 값을 바꾸지 마십시오. */
  .hero-how li b{
    width:20px;height:20px;border-radius:50%;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--green);color:var(--on-green);
    font-size:11.5px;font-weight:800;line-height:normal;
    font-variant-numeric:tabular-nums;
  }
  /* 모바일 첫 화면(약 852px) 안에 무엇→왜→얼마→어떻게가 모두 들어가야 한다.
     대표님 피드백 사항이라 여백을 공격적으로 줄인다. 값을 되돌리면
     "어떻게"가 스크롤 아래로 밀려나므로 주의. */
  @media (max-width:640px){
    /* 컨펌본 워딩이 길어져 히어로가 커졌다. 4단계가 첫 화면에 들어오도록
       제목/알약 크기와 여백을 한 단계 더 줄인다. */
    .hero-in{padding:20px 20px 26px !important;gap:16px !important;}
    .banner{padding:20px 14px 18px !important;}
    .bn-eyebrow{font-size:13px;}
    .bn-l1{font-size:clamp(34px,10vw,42px) !important;}
    .bn-l2{font-size:clamp(15px,4.2vw,18px) !important;margin-top:6px;}
    .bn-pill{padding:9px 16px;font-size:13px !important;}
    .bn-foot{margin-top:14px;}
    .stamp{margin-top:12px;width:104px;height:104px;font-size:15px;}
    .hero-sub{margin-top:26px !important;font-size:14.5px;line-height:1.6;}
    .hero-cta{margin-top:14px;gap:7px;}
    .hero-cta .btn{flex:1 1 100%;}

    .hero-stats{
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;margin-top:16px;padding-top:13px;text-align:center;
    }
    .hstat .v{font-size:21px;}
    .hstat .k{margin-top:3px;font-size:11px;line-height:1.35;}

    .hero-how{margin-top:13px;padding-top:11px;gap:6px;justify-content:flex-start;}
    .hero-how .hh{width:100%;}
    .hero-how ol{width:100%;gap:6px;}
    /* 3개를 한 줄에 넣으면 글자가 2~3줄로 접혀 읽기 어렵다.
       세로로 쌓고 번호를 왼쪽에 두어 한 줄로 읽히게 한다. */
    .hero-how ol{flex-direction:column;}
    .hero-how li{
      width:100%;white-space:normal;
      padding:9px 12px;font-size:12.5px;line-height:1.35;gap:8px;
      flex-direction:row;align-items:center;text-align:left;
    }
    .hero-how li b{width:17px;height:17px;font-size:10.5px;}
  }

  /* ---------- 섹션 2 · 절감 계산기 (전기료 1개 입력) ---------- */
  /* 그리드 자식은 기본 min-width:auto라 콘텐츠보다 작게 안 줄어든다.
     minmax(0,1fr) + min-width:0 을 함께 줘야 좁은 화면에서 넘치지 않는다. */
  .calc2{display:grid;grid-template-columns:320px minmax(0,1fr);gap:34px;align-items:start;}
  .calc2 > *{min-width:0;}
  .calc2-in{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 22px;
  }
  .c2-label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:10px;}
  .c2-field{
    display:flex;align-items:center;gap:8px;
    border:1px solid var(--line-strong);border-radius:10px;
    background:var(--bg);padding:0 14px;height:60px;
  }
  .c2-field:focus-within{border-color:var(--green-text);box-shadow:0 0 0 3px var(--green-soft);}
  /* iOS 확대 방지를 위해 16px 이상. 크게 보여야 하므로 22px */
  .c2-field input{
    flex:1;min-width:0;border:0;background:transparent;outline:none;
    font-family:var(--font-body);font-size:22px;font-weight:700;color:var(--ink);
    text-align:right;font-variant-numeric:tabular-nums;
  }
  .c2-unit{font-size:15px;font-weight:600;color:var(--ink-2);flex:none;}
  .c2-help{margin-top:9px;font-size:12.5px;color:var(--ink-3);}

  /* 전기요금 슬라이더 — 끌면 오른쪽 결과가 즉시 바뀝니다 */
  .c2-range{
    -webkit-appearance:none;appearance:none;
    display:block;width:100%;margin:20px 0 0;height:22px;
    background:transparent;cursor:pointer;
  }
  .c2-range::-webkit-slider-runnable-track{
    height:6px;border-radius:100px;background:var(--line-strong);
  }
  .c2-range::-moz-range-track{
    height:6px;border-radius:100px;background:var(--line-strong);
  }
  /* 탭 영역 44px 확보(가이드 1.4) — 보이는 손잡이는 22px */
  .c2-range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:22px;height:22px;margin-top:-8px;border-radius:50%;
    background:var(--green);border:3px solid var(--bg);
    box-shadow:0 1px 6px rgba(23,33,43,.35);
  }
  .c2-range::-moz-range-thumb{
    width:22px;height:22px;border-radius:50%;border:3px solid var(--bg);
    background:var(--green);box-shadow:0 1px 6px rgba(23,33,43,.35);
  }
  .c2-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--green-bright);outline-offset:2px;}
  .c2-ends{
    display:flex;justify-content:space-between;margin-top:8px;
    font-size:11.5px;color:var(--ink-3);
  }
  .c2-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
  .c2-chips .chip[aria-pressed="true"]{
    border-color:var(--green-text);color:var(--green-text);background:var(--green-soft);
  }
  .c2-shot{
    margin-top:18px;width:100%;min-height:52px;
    display:flex;align-items:center;justify-content:center;gap:9px;
    border:1px dashed var(--line-strong);border-radius:10px;background:transparent;
    color:var(--ink-2);font-family:inherit;font-size:14px;font-weight:600;
    letter-spacing:var(--ls-body);cursor:pointer;transition:.15s;
  }
  .c2-shot:hover{border-color:var(--green-text);color:var(--green-text);background:var(--green-soft);}
  .c2-shot svg{width:19px;height:19px;flex:none;}
  .c2-ocr{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--ink-3);}
  .c2-ocr:empty{display:none;}
  .c2-ocr.busy{color:var(--ink-2);}
  .c2-ocr.ok{color:var(--green-text);}
  .c2-ocr.warn{color:var(--green-text);}

  /* 고지서 기준 결과 — 오른쪽 큰 패널과 헷갈리지 않게 작고 조용하게 둔다 */
  .billres{
    margin-top:14px;padding:16px 18px;border-radius:14px;
    background:var(--surface-2);border:1px solid var(--line);
  }
  .billres[hidden]{display:none;}
  .billres-h{
    font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:var(--ls-body);
  }
  .billres-c{margin-top:14px;display:flex;flex-direction:column;gap:3px;min-width:0;}
  .billres-c .bk{
    font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-3);
  }
  .billres-c .bv{
    font-family:var(--font-sub);font-weight:700;font-size:24px;
    letter-spacing:var(--ls-md);color:var(--ink);font-variant-numeric:tabular-nums;
  }
  .billres-c .bv.is-after{color:var(--green-text);}
  .billres-c .bs{
    margin-top:3px;font-size:13px;color:var(--ink-2);letter-spacing:var(--ls-body);
  }
  .billres-c .bs b{color:var(--green-text);font-weight:800;font-variant-numeric:tabular-nums;}
  .billres-note{
    margin-top:8px;font-size:11.5px;line-height:1.6;color:var(--ink-3);
    letter-spacing:var(--ls-body);
  }
  /* 제목 "구독으로 바꾸면" 옆에 붙는 절감률 뱃지.
     제목과 같은 서브 폰트를 쓰되 15% 크게 해서 눈이 먼저 닿게 한다.
     (17px × 1.15 = 19.55px) */
  /* 두 패널의 제목 줄 높이를 같게 고정한다.
     After 쪽에만 뱃지가 붙어 줄이 높아지면 아래 금액이 28px 어긋난다. */
  .panel-h{
    /* 제목과 뱃지를 한 문장처럼 붙인다.
       "구독으로 ↔ 바꾸면" 사이 공백은 3.5px 인데, 알약 배경이 있는 한
       글자 사이 간격은 뱃지 좌측 패딩(8px) 아래로 못 내려간다.
       그래서 flex gap 을 0 으로 두어 가능한 만큼 붙였다. */
    display:flex;align-items:center;flex-wrap:wrap;gap:0;
    margin-top:8px;min-height:41px;
  }
  .panel-h h3{margin-top:0;}
  .cut-badge{
    flex:none;padding:4px 8px;border-radius:40px;
    background:var(--green-soft);color:var(--green-text);
    font-family:var(--font-sub);font-weight:700;
    font-size:19.5px;letter-spacing:var(--ls-sm);
    font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  /* 제목(.panel h3)이 모바일에서도 17px 이라 뱃지도 같은 19.5px 로 둔다.
     여기서 줄이면 "15% 크게"라는 관계가 깨진다. */
  /* 금액으로 다시 한 번 알려 준다 — %만 보면 얼마인지 안 와닿는다.
     "연간" 줄 아래에 둔다. 위에 두면 Before 패널에는 없는 줄이라
     두 패널의 연간 금액이 40px 어긋난다. */
  .c2-cut{
    margin-top:12px;font-size:13px;color:var(--ink-2);letter-spacing:var(--ls-body);
  }
  .c2-cut b{color:var(--green-text);font-weight:800;font-variant-numeric:tabular-nums;}

  .c2-spec{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;
  }
  .c2-spec > div{
    background:var(--surface);border:1px solid var(--line);border-radius:10px;
    padding:14px 12px;text-align:center;
  }
  .c2-spec .k{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:5px;}
  .c2-spec b{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
  @media (max-width:900px){
    .calc2{grid-template-columns:minmax(0,1fr);gap:22px;}
  }
  @media (max-width:560px){
    .c2-spec{grid-template-columns:repeat(2,1fr);}
  }

  /* ---------- HERO B (사진형) — 현재 미사용 ----------
     현재 히어로는 배너형(A안)입니다. 사진형으로 되돌리려면
     <header class="hero"> → <header class="hero photo"> 로 바꾸고
     내부에 <div class="hp-scene"></div><div class="hp-scrim"></div> 를 넣으십시오.
     배경 사진은 아래 .hp-scene에서 지정합니다. */
  .hero.photo{background:#0B1330;}
  .hero.photo::before,.hero.photo::after{display:none;}
  .hp-scene{
    position:absolute;inset:0;
    /* 2차 시안은 base64 플레이스홀더였으나 실제 항공사진으로 교체.
       다른 컷을 쓰려면 factory-aerial-01 → 02~05 로 바꾸면 됩니다. */
    background-image:url(../assets/photos/large/factory-aerial-01.jpg);
    background-size:cover;background-position:52% 58%;
  }
  .hp-scrim{
    position:absolute;inset:0;
    background:
      linear-gradient(100deg, rgba(7,13,32,.95) 0%, rgba(7,13,32,.88) 30%, rgba(7,13,32,.58) 58%, rgba(7,13,32,.22) 84%, rgba(7,13,32,.08) 100%),
      linear-gradient(0deg, rgba(7,13,32,.30) 0%, rgba(7,13,32,0) 45%);
  }
  .hero.photo .hero-in{
    position:relative;z-index:2;display:block;max-width:var(--maxw);
    padding:132px 24px 138px;text-align:left;
  }
  .hero.photo .eyebrow{color:rgba(255,255,255,.72);justify-content:flex-start;}
  .hero.photo .eyebrow::after{display:none;}
  .hero.photo h1{
    margin-top:18px;font-size:clamp(34px,4.9vw,58px);line-height:1.26;
    letter-spacing:-.045em;color:#fff;
  }
  .hero.photo h1 .hit{color:var(--gold);}
  .hero.photo .hero-sub{
    margin:22px 0 0;text-align:left;max-width:42ch;
    font-size:16px;font-weight:500;color:rgba(255,255,255,.82);line-height:1.8;
  }
  .btn-hero{
    margin-top:34px;background:var(--green);color:var(--on-green);
    padding:17px 40px;border-radius:8px;font-size:16px;
  }
  .btn-hero:hover{filter:brightness(1.15);}
  @media (max-width:760px){
    .hero.photo .hero-in{padding:96px 24px 104px;}
  }

  /* ---------- 3-STEP STRIP (태양광 구독이란?) ---------- */
  .steps3{
    display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;
    gap:12px;margin-top:34px;text-align:center;
  }
  .st{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:24px 18px;
  }
  .st .n{
    width:30px;height:30px;border-radius:50%;margin:0 auto 14px;
    background:var(--green);color:var(--on-green);font-size:14px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
  }
  .st b{display:block;font-size:16.5px;font-weight:800;letter-spacing:var(--ls-sm);color:var(--ink);}
  .st span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-2);line-height:1.6;}
  .st-ar{font-size:22px;color:var(--ink-3);font-weight:300;}
  @media (max-width:760px){
    .steps3{grid-template-columns:1fr;}
    .st-ar{transform:rotate(90deg);font-size:18px;}
  }

  /* ---------- 적합도 검토 · 카드 / 지도 / 점수 ---------- */
  /* ============================================================
     적합도 검토 — 3단계 위저드
     한 화면에 전부 펼치지 않고 한 번에 하나씩 묻는다.
     ============================================================ */
  .wiz{
    background:var(--bg);border:1px solid var(--line);border-radius:16px;
    padding:26px 26px 28px;margin-top:22px;text-align:left;box-shadow:var(--shadow);
  }
  /* 진행 표시 왼쪽 · 안내 배지 오른쪽. 예전에는 오른쪽이 빈 채로 남았다. */
  .wiz-head{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:12px 20px;margin-bottom:22px;padding-bottom:18px;
    border-bottom:1px solid var(--line);
  }
  .wiz-badge{
    display:inline-flex;align-items:center;gap:7px;flex:none;
    padding:7px 13px;border-radius:40px;
    background:var(--green-soft);color:var(--green-text);
    font-size:12.5px;font-weight:700;letter-spacing:var(--ls-body);line-height:1.5;
  }
  .wiz-badge svg{width:13px;height:13px;flex:none;}
  @media (max-width:560px){
    .wiz-head{gap:10px;}
    .wiz-badge{font-size:11.5px;padding:6px 11px;}
  }
  .wiz-nav{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;gap:10px 26px;
    font-size:13.5px;font-weight:700;color:var(--ink-3);letter-spacing:-.02em;
  }
  .wiz-nav li{display:flex;align-items:center;gap:8px;}
  .wiz-nav li span{
    width:22px;height:22px;border-radius:50%;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);color:var(--ink-3);
    font-size:11.5px;font-weight:800;line-height:normal;
    font-variant-numeric:tabular-nums;
  }
  .wiz-nav li.on{color:var(--ink);}
  .wiz-nav li.on span{background:var(--green);color:var(--on-green);}
  .wiz-nav li.done span{background:var(--green-soft);color:var(--green-text);}

  /* ⚠ .wstep 은 <section> 이다. 페이지 공통 section 여백(88px)이 그대로 붙어
     제목 위에 빈 칸이 생겼다. 위저드 안에서는 여백을 쓰지 않는다. */
  .wstep{padding:0;}
  .wstep[hidden]{display:none;}
  .wstep.on{animation:wstepIn .32s var(--ease) both;}
  @keyframes wstepIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  .wt{font-family:var(--font-sub);font-weight:700;font-size:21px;letter-spacing:var(--ls-md);
      line-height:1.35;color:var(--ink);}
  .wd{margin-top:8px;font-size:14px;color:var(--ink-2);
      letter-spacing:var(--ls-body);line-height:1.65;}
  .wd:empty{display:none;}
  .wact{
    margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  }
  .wact .btn{flex:0 0 auto;}
  /* 1단계의 버튼은 검색바(.fld-row)와 같은 폭·같은 오른쪽 끝에 맞춘다.
     주소 찾기 버튼 바로 아래 세로로 떨어지게 하기 위함이다. */
  .wstep[data-step="2"] .wact, .wstep[data-step="3"] .wact{
    justify-content:flex-end;
  }
  /* 되돌아가는 버튼은 오른쪽에 둔다 — 다음 단계 버튼과 같은 자리라
     시선이 한 곳에 머문다 */
  .wstep[data-step="2"] .wact,
  .wstep[data-step="3"] .wact{justify-content:flex-end;}
  /* 버튼줄은 카드 안쪽 폭의 오른쪽 끝에 붙인다.
     검색바·지도·점수카드의 바깥 테두리와 같은 선이 되어
     위저드 전체에 하나의 수직선이 생긴다.
     ⚠ 예전에는 9px 당겨 "주소 찾기" 버튼과 맞췄는데,
       눈은 버튼보다 상자의 테두리를 기준선으로 읽어 어긋나 보였다. */
  .wstep[data-step="1"] .wact{
    justify-content:flex-end;
  }
  /* 입력칸과 같은 모서리·같은 오른쪽 끝에 맞춰 한 벌로 보이게 한다 */
  .wiz .wact .btn{border-radius:14px;padding:16px 28px;font-size:15px;
                  letter-spacing:var(--ls-body);min-height:60px;}
  /* 좁은 화면에서는 두 버튼 높이를 같게 한다.
     (이 재정의는 반드시 위 규칙보다 뒤에 있어야 한다) */
  @media (max-width:480px){
    .fld-row .fld-btn{min-height:52px;}
    .wiz .wact .btn{min-height:52px;padding:14px 22px;}
  }
  @media (max-width:560px){
    .wiz{padding:20px 18px 22px;}
    .wiz-nav{gap:8px 16px;font-size:12.5px;}
    .wt{font-size:18.5px;}
    .wact{flex-direction:column-reverse;align-items:stretch;}
    .wact .btn{width:100%;}
  }

  .scard{
    background:var(--bg);border:1px solid var(--line);border-radius:16px;
    padding:26px 26px 28px;margin-top:20px;text-align:left;box-shadow:var(--shadow);
  }
  .scard-h{margin-bottom:18px;}
  .sc-n{
    display:block;font-family:var(--font-sub);font-weight:700;
    font-size:16.5px;letter-spacing:-.03em;color:var(--ink);
  }
  .sc-d{margin-top:6px;font-size:13.5px;color:var(--ink-3);line-height:1.6;}
  .sc-status{margin-top:12px;font-size:13px;color:var(--ink-2);}
  .sc-status:empty{display:none;}
  .sc-status .dot{
    display:inline-block;width:7px;height:7px;border-radius:50%;
    background:var(--green);margin-right:7px;vertical-align:1px;
  }
  .sc-status.warn .dot{background:var(--amber);}

  /* 주소 검색 (다음 우편번호 embed) */
  .btn-ghost-line{
    background:transparent;color:var(--ink-2);border:1px solid var(--line-strong);
    flex-shrink:0;
  }
  .btn-ghost-line:hover{border-color:var(--green-text);color:var(--green-text);background:var(--green-soft);}
  .pcwrap{
    margin-top:16px;border:1px solid var(--line-strong);border-radius:14px;
    overflow:hidden;background:var(--bg);
  }
  .pcwrap[hidden]{display:none;}
  .pc-h{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);
    font-size:12.5px;color:var(--ink-2);
  }
  .pc-x{
    min-height:32px;padding:0 12px;border-radius:7px;cursor:pointer;
    border:1px solid var(--line-strong);background:var(--bg);color:var(--ink-2);
    font-family:inherit;font-size:12.5px;font-weight:700;
  }
  .pc-x:hover{color:var(--ink);border-color:var(--ink-3);}
  .pc-box{height:420px;}
  .pc-box > div,.pc-box iframe{width:100% !important;height:100% !important;border:0;display:block;}
  @media (max-width:560px){ .pc-box{height:460px;} }

  /* ============================================================
     지도 — 카카오 기본 컨트롤을 끄고 우리 탭·버튼을 얹는다
     ============================================================ */
  .map-duo{
    margin-top:16px;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  }
  .map-cell{margin:0;min-width:0;}
  .map-cap{
    margin-bottom:7px;font-size:12.5px;font-weight:700;
    letter-spacing:var(--ls-body);color:var(--ink-3);
  }
  .map-stage{
    position:relative;aspect-ratio:4/3;overflow:hidden;
    border:1px solid var(--line-strong);border-radius:14px;background:var(--surface-2);
  }
  .map-pane{position:absolute;inset:0;width:100%;height:100%;}
  .map-pane.ph{
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:12.5px;color:var(--ink-3);padding:18px;line-height:1.6;
  }
  /* 지도/위성 전환. 카카오 기본 컨트롤은 만들지 않는다. */
  .map-tabs{
    position:absolute;left:10px;top:10px;z-index:3;
    display:flex;gap:2px;padding:3px;border-radius:9px;
    background:var(--bg);box-shadow:var(--shadow);
  }
  .map-tabs button{
    min-height:30px;padding:0 11px;border:0;border-radius:7px;cursor:pointer;
    background:transparent;color:var(--ink-2);
    font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:var(--ls-body);
    transition:background .18s var(--ease), color .18s var(--ease);
  }
  .map-tabs button.on{background:var(--green-soft);color:var(--green-text);}
  .map-zoom{
    position:absolute;right:10px;top:10px;z-index:3;
    display:flex;flex-direction:column;gap:1px;border-radius:9px;overflow:hidden;
    box-shadow:var(--shadow);
  }
  .map-zoom button{
    width:32px;height:32px;border:0;cursor:pointer;
    background:var(--bg);color:var(--ink);
    display:flex;align-items:center;justify-content:center;
  }
  .map-zoom button:hover{background:var(--green-soft);color:var(--green-text);}
  .map-zoom svg{width:15px;height:15px;}
  @media (max-width:640px){
    /* 좁은 화면에서 둘을 나란히 두면 각 지도가 너무 작아진다 */
    .map-duo{grid-template-columns:minmax(0,1fr);gap:16px;}
  }
  @media (max-width:560px){
    /* 손가락으로 누르는 화면에서는 최소 44px (제작 가이드 기준) */
    .map-tabs button{min-height:44px;padding:0 14px;}
    .map-zoom button{width:44px;height:44px;}
  }

  /* 점수 */
  .score-top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
  .ring{
    width:104px;height:104px;border-radius:50%;flex:none;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--green-soft);border:3px solid var(--green);
  }
  .ring b{
    font-family:var(--font-sub);font-weight:700;font-size:34px;line-height:1;
    letter-spacing:-.04em;color:var(--green-text);
  }
  .ring span{margin-top:3px;font-size:11.5px;color:var(--ink-3);}
  .score-sum{min-width:0;}
  .score-sum h3{font-size:20px;letter-spacing:-.03em;color:var(--green-text);}
  .score-sum p{margin-top:5px;font-size:13.5px;color:var(--ink-2);line-height:1.6;}

  .mbars{margin-top:26px;display:flex;flex-direction:column;gap:18px;}
  .mb{display:grid;grid-template-columns:190px minmax(0,1fr) 56px;gap:14px;align-items:center;}
  .mb-k{min-width:0;}
  .mb-k b{
    display:block;font-family:var(--font-sub);font-weight:700;
    font-size:14px;letter-spacing:-.02em;color:var(--ink);
  }
  .mb-k span{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-3);line-height:1.45;}
  .mb-track{height:9px;border-radius:100px;background:var(--surface-2);overflow:hidden;}
  .mb-fill{
    display:block;height:100%;width:0;border-radius:100px;
    background:var(--green);transition:width .7s ease;
  }
  .mb-v{
    text-align:right;font-size:13px;font-weight:700;color:var(--ink-2);
    font-variant-numeric:tabular-nums;
  }
  @media (max-width:640px){
    .mb{grid-template-columns:minmax(0,1fr) 56px;gap:8px 12px;}
    .mb-track{grid-column:1 / -1;}
    .score-top{gap:16px;}
    .ring{width:86px;height:86px;}
    .ring b{font-size:28px;}
  }

  /* ---------- 섹션 9 · 하단 고정 상담 바 ----------
     본문이 가리지 않도록 body의 padding-bottom은 script.js가 실측해 넣습니다.
     여기서 하드코딩하면 바 높이가 바뀔 때 겹칩니다. */
  .cbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--deep);border-top:1px solid var(--deep-line);
    box-shadow:0 -10px 34px -14px rgba(0,0,0,.6);
    transform:translateY(110%);
    /* 위 토스트와 같은 이유로 숨길 때는 visibility까지 끈다 */
    opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s var(--ease), opacity .22s var(--ease), visibility .22s;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .cbar.on{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
  .cbar-in{
    display:flex;align-items:center;justify-content:space-between;gap:26px;
    padding-top:14px;padding-bottom:14px;
  }
  .cbar-txt{min-width:0;flex:none;}
  .cbar-txt b{
    display:block;font-family:var(--font-sub);font-weight:700;
    font-size:21px;letter-spacing:var(--ls-md);color:#fff;
  }
  .cbar-txt span{
    display:block;margin-top:4px;font-size:13.5px;
    letter-spacing:var(--ls-body);color:var(--deep-ink-2);
  }

  /* 전역 form{} 규칙(카드 배경·테두리·padding·display:grid)이 여기까지 적용되므로
     하단 바 폼은 명시적으로 되돌린다. 안 하면 grid gap 때문에 바가 40px 이상 커진다. */
  .cbar-form{
    flex:1;min-width:0;
    display:block;background:none;border:0;border-radius:0;padding:0;gap:0;
  }
  .cbar-fields{display:flex;align-items:center;gap:8px;}
  /* iOS 자동 확대 방지 — 16px 유지 */
  .cbar-fields input{
    flex:1 1 0;min-width:0;height:48px;padding:0 14px;
    font-family:inherit;font-size:16px;letter-spacing:var(--ls-body);
    color:var(--deep-ink);background:rgba(255,255,255,.07);
    border:1px solid var(--deep-line);border-radius:9px;
    transition:border-color .2s var(--ease), background .2s var(--ease);
  }
  .cbar-fields input::placeholder{color:var(--deep-ink-2);}
  .cbar-fields input:focus{
    outline:none;border-color:var(--green-text);background:rgba(255,255,255,.12);
  }
  .cbar-fields input.err{border-color:var(--red);background:rgba(217,69,63,.14);}

  .cb{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-height:48px;padding:0 24px;border:none;border-radius:9px;cursor:pointer;
    font-family:inherit;font-size:15px;font-weight:700;letter-spacing:var(--ls-sm);
    text-decoration:none;white-space:nowrap;flex:none;
  }
  .cb-main{background:var(--green);color:var(--on-green);}
  .cb-main:hover{filter:brightness(1.08);box-shadow:0 10px 24px -10px rgba(255,122,47,.6);}

  .cbar-agree{
    display:flex;align-items:flex-start;gap:8px;margin-top:10px;
    font-size:12.5px;letter-spacing:var(--ls-body);color:var(--deep-ink-2);cursor:pointer;
  }
  .cbar-agree input{
    width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--green-text);
  }
  .cbar-agree a{color:var(--deep-ink);text-underline-offset:3px;}
  .cbar-agree.err{color:var(--red);}

  @media (max-width:1080px){
    .cbar-in{gap:16px;}
    .cbar-txt b{font-size:18px;}
    .cbar-txt span{display:none;}
  }
  @media (max-width:820px){
    /* 문구를 위로 올리고 폼을 아래로 — 화면을 덜 가리도록 여백을 줄인다 */
    .cbar-in{flex-direction:column;align-items:stretch;gap:10px;padding-top:11px;padding-bottom:11px;}
    .cbar-txt b{font-size:16.5px;}
  }
  /* 접기/펼치기 버튼 — 모바일에서만 노출 */
  .cbar-toggle{
    display:none;align-items:center;justify-content:center;
    min-height:46px;padding:0 18px;border:none;border-radius:9px;cursor:pointer;
    background:var(--green);color:var(--on-green);
    font-family:inherit;font-size:15px;font-weight:700;letter-spacing:var(--ls-sm);
    transition:filter .2s var(--ease), transform .15s var(--ease);
  }
  .cbar-toggle:active{transform:scale(.96);}

  /* 토글은 상태에 따라 문구가 바뀝니다(제출 버튼과 글자가 겹치지 않게) */
  .cbar-toggle .ct-close{display:none;}
  .cbar.expanded .cbar-toggle .ct-open{display:none;}
  .cbar.expanded .cbar-toggle .ct-close{display:inline;}

  @media (max-width:640px){
    /* 기본은 접힌 상태: 문구 + 버튼만 */
    .cbar-in{flex-direction:row;align-items:center;gap:10px;}
    .cbar-toggle{display:inline-flex;flex:none;}
    .cbar-form{display:none;}
    .cbar-txt b{font-size:15.5px;}
    .cbar-txt span{display:none;}

    /* 펼친 상태: 문구+닫기 한 줄, 입력 2줄, 동의 1줄 */
    .cbar.expanded .cbar-in{flex-wrap:wrap;align-items:center;}
    .cbar.expanded .cbar-txt{flex:1 1 auto;}
    .cbar.expanded .cbar-toggle{
      min-height:34px;padding:0 12px;font-size:13px;
      background:rgba(255,255,255,.1);color:var(--deep-ink);
    }
    .cbar.expanded .cbar-form{display:block;flex:1 1 100%;}

    .cbar-fields{flex-wrap:wrap;gap:6px;}
    /* 1줄: 회사명 · 담당자 / 2줄: 휴대폰 · 신청 버튼 */
    .cbar-fields input{height:42px;font-size:16px;padding:0 11px;flex:1 1 calc(50% - 3px);}
    .cbar-fields input:nth-child(3){flex:1 1 58%;}
    .cb-main{flex:1 1 38%;min-height:42px;padding:0 12px;font-size:14px;}
    .cbar-agree{margin-top:7px;font-size:11px;line-height:1.4;}
  }

  /* ---------- 섹션 6 · 진행 절차 4단계 ---------- */
  .steps{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
    list-style:none;margin:0;padding:0;counter-reset:none;
  }
  .stp{
    position:relative;min-width:0;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:22px 18px;display:flex;flex-direction:column;gap:6px;
  }
  /* STEP 01 — 원 배지로는 글자가 안 들어가서 알약형 라벨로 바꿨다 */
  .stp-n{
    display:inline-flex;align-self:flex-start;align-items:baseline;gap:4px;margin-bottom:8px;
    padding:5px 11px;border-radius:40px;
    background:var(--green);color:var(--on-green);
    font-size:14px;font-weight:800;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
  }
  .stp-n i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;opacity:.72;}
  .stp b{font-family:var(--font-sub);font-weight:700;font-size:16.5px;letter-spacing:-.03em;color:var(--ink);}
  .stp-d{
    font-size:13px;font-weight:700;color:var(--green-text);
  }
  @media (max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:520px){ .steps{grid-template-columns:minmax(0,1fr);} }

  /* ---------- 섹션 6 · 구독 구조도 ---------- */
  .flow{
    margin-top:52px;padding:34px 26px 28px;border-radius:16px;
    border:1px solid var(--line);background:var(--surface);
  }
  .flow-lbl{
    font-family:var(--font-sub);font-weight:700;font-size:15px;
    letter-spacing:var(--ls-sm);color:var(--ink);margin-bottom:24px;
  }
  .flow-grid{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.1fr);
    gap:16px;align-items:stretch;
  }

  .fnode{
    border-radius:16px;padding:24px 18px;text-align:center;min-width:0;
    border:1px solid var(--line);background:var(--bg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  }
  .fn-ic{
    width:56px;height:56px;border-radius:14px;margin-bottom:12px;
    display:flex;align-items:center;justify-content:center;
    background:var(--green-soft);color:var(--green-text);
  }
  /* 로고 심볼과 같은 크기(40px)로 맞춘다 */
  .fn-ic svg{width:40px;height:40px;}
  /* 시온에너지 노드는 실제 로고 심볼 — 배경 없이 이미지만 */
  /* 시온에너지 노드는 정사각 심볼 대신 워드마크를 쓴다.
     로고에 사명이 들어 있으므로 아래 이름표(.fn-k)는 두지 않는다. */
  .fn-ic-logo{
    background:none;width:auto;height:auto;border-radius:0;
    margin-bottom:14px;padding:0 4px;
  }
  .fn-ic-logo img{width:auto;height:34px;object-fit:contain;display:block;}
  @media (max-width:760px){
    .fn-ic-logo img{height:28px;}
  }
  .fnode-us{border-color:var(--green-text);box-shadow:0 0 0 1px var(--green);}
  .fnode-you{background:var(--deep);border-color:var(--deep-line);}
  .fnode-you .fn-ic{background:rgba(255,255,255,.1);color:var(--green-text);}
  .fnode-you .fn-k{color:#fff;}
  .fnode-you .fn-s{color:var(--deep-ink-2);}
  .fn-k{
    display:block;font-family:var(--font-sub);font-weight:700;font-size:17px;
    letter-spacing:var(--ls-md);color:var(--ink);
  }
  .fn-s{display:block;margin-top:7px;font-size:12.5px;line-height:1.55;color:var(--ink-2);}

  /* 가운데 양방향 화살표 */
  .fmid{
    display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0;
  }
  .fa{
    display:flex;align-items:center;justify-content:center;gap:8px;
    border-radius:100px;padding:10px 12px;
    font-size:12px;font-weight:700;letter-spacing:var(--ls-body);line-height:1.3;text-align:center;
  }
  .fa i{font-style:normal;}
  .fa em{font-style:normal;font-size:15px;line-height:1;flex:none;}
  .fa-r{background:var(--green);color:var(--on-green);}
  .fa-l{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);}

  /* 오른쪽 산출 3갈래 */
  .fout{display:flex;flex-direction:column;gap:10px;min-width:0;}
  .fo{
    display:flex;align-items:center;gap:11px;min-width:0;
    border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:var(--bg);
  }
  /* 세 갈래는 한 세트다. 하나만 색을 채우면 세트가 아니라
     '실수로 하나만 다른 것'처럼 보인다. 셋을 같은 모양으로 두고
     중요도는 순서로만 나타낸다. */
  .fo-arrow{
    flex:none;width:24px;height:24px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--green-soft);color:var(--green-text);font-size:12px;font-weight:800;
  }
  .fo-body{flex:1;min-width:0;}
  .fo-t{
    display:block;font-family:var(--font-sub);font-weight:700;font-size:14px;
    letter-spacing:var(--ls-sm);color:var(--ink);
  }
  .fo-w{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3);}
  /* 기관 로고 자리. 이름 텍스트 배지였다가 실제 로고로 바뀌었다. */
  .fo-logo{
    flex:none;display:flex;align-items:center;justify-content:flex-end;
    width:96px;height:24px;
  }
  .fo-logo img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;}

  .flow-note{
    margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
    font-size:13px;color:var(--ink-3);
  }

  @media (max-width:960px){
    .flow-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
    .fmid{flex-direction:row;}
    .fa{flex:1 1 0;}
    .fout{grid-column:1 / -1;}
  }
  @media (max-width:600px){
    .flow{padding:24px 16px 20px;}
    .flow-grid{grid-template-columns:minmax(0,1fr);gap:12px;}
    .fmid{flex-direction:column;}
    .fo-logo{display:none;}
  }

  /* ---------- 섹션 5 · 소유 vs 구독 대조표 ---------- */
  /* 이전 버전의 .vs{display:grid} 와 충돌하지 않도록 cmp- 접두어 사용 */
  .cmp{display:block;margin-top:38px;text-align:left;}
  .cmp-head,.cmp-row{
    display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.15fr);
    gap:12px;align-items:center;
  }
  .cmp-head{
    padding:0 18px 12px;font-size:14px;font-weight:700;color:var(--deep-ink-2);
    letter-spacing:var(--ls-body);
  }
  .cmp-head .on{color:var(--green-text);}
  .cmp-row{
    padding:18px 20px;border-radius:12px;
    border:1px solid var(--deep-line);background:rgba(255,255,255,.04);
    margin-bottom:8px;
  }
  .cmp .vk{font-size:16px;font-weight:700;letter-spacing:var(--ls-sm);color:var(--deep-ink);}
  /* 사서 쓸 때 — 눌러서 표현 */
  .cmp .vb{font-size:15.5px;line-height:1.55;color:var(--deep-ink-2);}
  /* 구독할 때 — 강조 */
  .cmp .va{font-size:15.5px;color:var(--deep-ink);}
  /* 구독 쪽 값은 그린 계열로 묶는다.
     오렌지 옅은 면은 흰 카드 위에서 분홍으로 보인다. */
  .cmp .va b{
    display:inline-block;font-weight:700;font-size:16px;letter-spacing:var(--ls-sm);
    color:var(--green-text);background:var(--green-soft);
    border:1px solid color-mix(in srgb, var(--green) 34%, transparent);
    border-radius:8px;padding:7px 14px;
  }
  .cmp-note{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--deep-ink-2);text-align:left;}

  @media (max-width:760px){
    /* 좁은 화면에서는 3열이 무너지므로 항목별 카드로 쌓는다 */
    .cmp-head{display:none;}
    .cmp-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 16px;}
    .cmp .vk{font-size:13px;color:var(--deep-ink-2);}
    .cmp .vb{font-size:13.5px;position:relative;padding-left:56px;}
    .cmp .vb::before{
      content:"사서 쓸 때";position:absolute;left:0;top:0;
      font-size:11px;font-weight:700;color:var(--deep-ink-2);opacity:.75;
    }
    .cmp .va{font-size:13.5px;position:relative;padding-left:56px;margin-top:2px;}
    .cmp .va::before{
      content:"구독하면";position:absolute;left:0;top:6px;
      font-size:11px;font-weight:700;color:var(--green-text);
    }
  }

  /* ---------- 섹션 3 · 4대 질문 ---------- */
  .q4{margin-top:52px;padding-top:40px;border-top:1px solid var(--line);}
  .q4-lbl{font-size:13px;color:var(--ink-3);margin-bottom:22px;letter-spacing:-.01em;}
  .q4-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;text-align:left;}
  .q4c{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:22px 20px;min-width:0;
  }
  .q4c .ic{
    width:40px;height:40px;border-radius:10px;margin-bottom:14px;
    display:flex;align-items:center;justify-content:center;
    background:var(--green-soft);color:var(--green-text);
  }
  .q4c .ic svg{width:21px;height:21px;}
  .q4c h3{font-size:16px;letter-spacing:-.03em;color:var(--ink);}
  .q4c p{margin-top:9px;font-size:14px;line-height:1.68;color:var(--ink-2);}
  .q4c p b{color:var(--ink);font-weight:700;}
  @media (max-width:900px){
    .q4-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:560px){
    .q4-grid{grid-template-columns:minmax(0,1fr);}
    .q4{margin-top:38px;padding-top:30px;}
  }

  /* ---------- SAVE BAND (절감 효과) ---------- */
  /* 라이트 그린 면. 다크 네이비였는데 "칙칙하다"는 지적으로 바꿨다.
     아래쪽 오렌지 광원도 밝은 면에서는 얼룩처럼 보여 없앴다. */
  .save{background:var(--surface-2);color:var(--ink);position:relative;overflow:hidden;}
  .save-in{position:relative;max-width:960px;margin:0 auto;text-align:center;}
  .save-in .eyebrow{color:var(--green-text);justify-content:center;}
  .save-in .eyebrow::after{display:none;}
  .save-in h2{
    margin-top:16px;font-size:clamp(26px,3.6vw,42px);line-height:1.3;
    /* 강제 <br> 대신 균형 잡힌 줄바꿈에 맡긴다 */
    text-wrap:balance;max-width:22ch;margin-inline:auto;
  }
  .save-in h2 .hit{white-space:nowrap;}
  .save-in h2 .hit{color:var(--green-text);}
  /* 컨펌본의 혜택 배지 3종 — 다크 면 위라 밝은 값으로 */
  .save-tags{
    list-style:none;margin:26px 0 0;padding:0;
    display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  }
  .save-tags li{
    padding:8px 16px;border-radius:40px;
    /* 밝은 면이 되었으니 흰색 5% 대신 흰 카드로. 그대로 두면 배지가 안 보인다. */
    border:1px solid var(--line);background:var(--surface);
    font-size:14px;font-weight:700;letter-spacing:var(--ls-sm);color:var(--ink-2);
  }
  .save-tags li::before{
    content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--green);margin-right:8px;vertical-align:middle;
  }
  @media (max-width:480px){
    .save-tags{gap:7px;}
    .save-tags li{padding:7px 12px;font-size:12.5px;}
  }

  .save-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;}
  .sv{
    background:var(--surface);border:1px solid var(--line);
    border-radius:14px;padding:28px 18px;
    /* 카드 높이가 서로 달라도 라벨+숫자가 정중앙에 오도록 */
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;min-height:132px;
  }
  .sv .k{font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:var(--ls-sm);}
  .sv .v{
    margin-top:10px;font-family:var(--font-body);font-weight:700;
    font-size:clamp(23px,3.1vw,38px);line-height:1.1;letter-spacing:var(--ls-xl);
    color:var(--ink);font-variant-numeric:tabular-nums;
    /* "8억 3,160만 원"이 두 줄로 끊기지 않도록 한 줄 유지 */
    white-space:nowrap;
  }
  /* 20년 누적만 강조. 오렌지 옅은 면은 흰 카드 위에서 분홍으로 보여
     그린 계열로 둔다(0831 피드백과 같은 이유). */
  .sv.hot{background:var(--green-soft);border-color:color-mix(in srgb, var(--green) 42%, transparent);}
  .sv.hot .v{color:var(--green-text);font-size:clamp(24px,3.4vw,41px);}
  .sv.hot .k{color:var(--green-text);}
  .save-note{
    margin-top:20px;font-family:var(--font-body);font-size:12px;
    color:var(--ink-3);letter-spacing:.01em;
  }
  @media (max-width:700px){
    .save-grid3{grid-template-columns:1fr;}
    .sv{min-height:112px;}
  }
  @media (max-width:980px) and (min-width:701px){
    /* 3열 유지 구간에서 칸이 좁아 숫자가 넘칠 수 있어 한 단계 줄인다 */
    .sv .v{font-size:clamp(20px,2.7vw,30px);}
    .sv.hot .v{font-size:clamp(21px,2.9vw,32px);}
  }

  /* ---------- BUILD (시공 현장) ---------- */
  .build-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  }
  .bshot{
    position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
    background:var(--surface-2);box-shadow:var(--shadow);
  }
  .bshot img{width:100%;height:100%;object-fit:cover;display:block;}
  /* 높이를 반드시 명시할 것. 없으면 그리드 행 높이가 0으로 잡히고,
     loading="lazy" 이미지가 뷰포트에 들어오지 못해 영영 로드되지 않는다. */
  .bshot{aspect-ratio:4/3;}
  /* 리드 컷은 2행을 걸치므로 다른 칸들이 만든 행 높이를 그대로 따른다 */
  .bshot-lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
  .bshot figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
    /* ⚠ 사진 위 흰 글자용 막. 값을 낮추면 바로 깨진다.
       .88/.55@55% 였을 때 제목(b)이 옅은 구간에 놓여 3.57:1 이었다.
       아래 값으로 5.54:1. 실측값이다. */
    background:linear-gradient(to top,
      rgba(23,33,43,.94), rgba(23,33,43,.78) 60%, rgba(23,33,43,.20) 86%, transparent);
    color:#fff;font-size:13px;line-height:1.5;letter-spacing:-.01em;
  }
  .bshot figcaption b{display:block;font-size:14.5px;font-weight:800;margin-bottom:2px;}
  .bshot-lead figcaption{padding:48px 22px 20px;font-size:14px;}
  .bshot-lead figcaption b{font-size:18px;}
  @media (max-width:900px){
    .build-grid{grid-template-columns:repeat(2,1fr);}
    .bshot-lead{grid-column:span 2;grid-row:auto;aspect-ratio:16/10;}
  }
  @media (max-width:520px){
    .build-grid{grid-template-columns:1fr;}
    .bshot-lead{grid-column:span 1;}
  }

  /* ---------- CASES ---------- */
  .cases-head{text-align:center;max-width:none;margin-bottom:36px;}
  .cases-head .eyebrow{justify-content:center;}
  .cases-head .eyebrow::after{display:none;}
  .cases-rail{
    position:relative;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  }
  .cases-track{display:flex;gap:20px;width:max-content;animation:caseroll 46s linear infinite;}
  .cases-rail:hover .cases-track{animation-play-state:paused;}
  @keyframes caseroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .ccard{
    width:252px;flex-shrink:0;background:var(--surface);border:1px solid var(--line);
    border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  }
  .alt .ccard{background:var(--bg);}
  .cphoto{
    aspect-ratio:4/3;background:var(--deep);position:relative;overflow:hidden;
  }
  .cphoto img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .cbody{padding:14px 18px 16px;}
  .cmeta{display:grid;gap:8px;}
  .cmeta div{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);}
  .cmeta svg{width:14px;height:14px;flex-shrink:0;color:var(--green-text);}
  .cmeta .kw{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}

  /* ---------- TRUST ---------- */
  .trust{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:44px;padding-top:36px;border-top:1px solid var(--line);}
  .tr h3{font-size:19px;display:flex;gap:10px;align-items:baseline;}
  .tr h3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0;transform:translateY(-2px);}
  .tr p{margin-top:10px;color:var(--ink-2);font-size:15.5px;padding-left:17px;}
  @media (max-width:820px){ .trust{grid-template-columns:1fr;} }

  /* ---------- FORM ---------- */
  .cta-sec{background:var(--surface);border-top:1px solid var(--line);}
  .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
  .cta-grid h2{font-size:clamp(28px,3.6vw,44px);}
  .cta-grid .lead{margin-top:18px;color:var(--ink-2);font-size:17px;}
  .assur{margin-top:28px;display:grid;gap:10px;}
  .assur li{list-style:none;display:flex;gap:10px;font-size:15px;color:var(--ink-2);}
  .assur li::before{content:"✓";color:var(--green-text);font-weight:800;}
  form{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:28px;display:grid;gap:16px;}
  .field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px;letter-spacing:.01em;}
  .field input{
    width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);
    background:var(--surface);color:var(--ink);font-size:15px;font-family:inherit;
  }
  .field input:focus{border-color:var(--green-text);}
  .field .hint{font-size:11.5px;color:var(--ink-3);margin-top:5px;}
  .agree{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-2);}
  .agree input{margin-top:3px;accent-color:var(--green-text);}
  .agree a{color:var(--green-text);}
  form .btn{width:100%;padding:16px;font-size:16.5px;}
  .form-note{font-size:12.5px;color:var(--ink-3);text-align:center;}
  @media (max-width:900px){ .cta-grid{grid-template-columns:1fr;gap:36px;} }

  /* ---------- SIGNUP FORM ---------- */
  .signup{max-width:620px;margin:0 auto;}
  .signup h2{font-size:clamp(29px,3.9vw,44px);letter-spacing:-.045em;}
  .signup .sub{margin-top:14px;font-size:16px;font-weight:700;color:var(--ink-2);}
  form.su{
    margin-top:40px;display:grid;gap:22px;
    background:transparent;border:0;padding:0;border-radius:0;
  }
  .su .f label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px;}
  .su .f input,.su .f select{
    width:100%;height:52px;padding:0 16px;font-size:16px;font-family:inherit;
    border:1px solid var(--line-strong);border-radius:9px;
    background:var(--surface);color:var(--ink);
  }
  .su .f input:focus,.su .f select:focus{border-color:var(--green-text);outline:none;box-shadow:0 0 0 3px var(--green-soft);}
  .su .f input::placeholder{color:var(--ink-3);}
  .su .f .hint{margin-top:8px;font-size:12.5px;color:var(--ink-3);}
  .su .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .su .row{display:grid;grid-template-columns:1fr auto;gap:10px;}
  .verify{
    height:52px;padding:0 20px;border-radius:9px;cursor:pointer;white-space:nowrap;
    border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);
    font-weight:700;font-size:14.5px;font-family:inherit;
    letter-spacing:var(--ls-body);transition:.15s;
  }
  .verify:hover{border-color:var(--ink-3);}
  .verify[data-done="1"]{background:var(--green);border-color:var(--green-text);color:#fff;}
  :root[data-theme="dark"] .verify[data-done="1"]{color:#04120B;}
  .agree2{display:flex;gap:10px;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--ink);}
  .agree2 input{width:18px;height:18px;accent-color:var(--green-text);flex-shrink:0;}
  .agree2 a{color:var(--ink-2);text-underline-offset:3px;}
  .su-submit{width:100%;height:58px;border-radius:9px;font-size:17px;}
  @media (max-width:560px){ .su .pair{grid-template-columns:1fr;} }

  /* ---------- FOOTER ---------- */
  footer{background:var(--deep-2);color:var(--deep-ink-2);padding:56px 0 40px;}
  /* 푸터 정보 위계 — 예전에는 회사명·연락처·링크가 모두 같은 크기·같은 색이라
     어디부터 읽어야 할지 알 수 없었다. */
  .foot-logo{margin-top:34px;margin-bottom:18px;}
  /* 법적 표기 — 레퍼런스(엔라이튼)처럼 작게 한 덩어리로.
     예전에는 상호 19px / 대표전화 26px 였는데, 법적 고지가
     홍보 문구처럼 커 보여 정작 읽어야 할 내용이 묻혔다. */
  .foot-legal{margin-top:26px;font-size:12px;line-height:1.9;color:var(--deep-ink-2);}
  .foot-legal p{margin:0;letter-spacing:var(--ls-body);}
  .foot-legal b{font-weight:700;color:var(--deep-ink);}
  .foot-legal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;}
  .foot-legal a:hover{color:var(--deep-ink);border-color:var(--deep-line);}
  /* 구분자. --deep-line 은 푸터 배경과 거의 같은 색이라 1.00:1 로
     아예 보이지 않았다. 60% 로 띄워 3.5:1 로 둔다 — 값이 아니라
     구분 기호이므로 본문만큼 진하면 오히려 시선을 뺏는다. */
  .foot-legal .fsep{
    margin:0 8px;user-select:none;
    color:color-mix(in srgb, var(--deep-ink-2) 60%, transparent);
  }
  .foot-copy{margin-top:10px !important;color:var(--deep-ink-2);}

  .foot-bot{
    margin-top:20px;padding-top:18px;border-top:1px solid var(--deep-line);
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:12.5px;
  }
  /* 레퍼런스처럼 개인정보처리방침만 굵게 — 가장 많이 찾는 항목이다 */
  .foot-bot a.is-strong{color:var(--deep-ink);font-weight:700;}

  @media (max-width:480px){
    .foot-legal{font-size:11.5px;line-height:2;}
    .foot-legal .fsep{margin:0 6px;}
  }
  .partners{padding-bottom:32px;border-bottom:1px solid var(--deep-line);}
  .partners .pt{font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--deep-ink-2);}
  .partner-row{display:flex;flex-wrap:wrap;gap:14px 32px;margin-top:16px;font-size:19px;font-weight:800;color:var(--deep-ink);letter-spacing:-.02em;}
  .foot-bot a{color:var(--deep-ink-2);text-decoration:none;border-bottom:1px solid transparent;}
  .foot-bot a:hover{color:var(--deep-ink);border-color:var(--deep-line);}
  /* 푸터는 다크 네이비 면이라 컬러 로고가 묻힌다.
     밝기를 0으로 눌러 실루엣만 남긴 뒤 반전해 흰색으로 통일한다. */
  .mq-item img{filter:brightness(0) invert(1);opacity:.85;}
  .mq-item img:hover{opacity:1;}

  .marquee{
    position:relative;overflow:hidden;margin-top:20px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .mq-track{display:flex;width:max-content;animation:mq 34s linear infinite;}
  .marquee:hover .mq-track{animation-play-state:paused;}
  .mq-item{
    display:flex;align-items:center;gap:10px;white-space:nowrap;
    height:60px;padding:0 34px;color:var(--deep-ink);opacity:.6;
    filter:grayscale(1);transition:opacity .2s;
  }
  .marquee:hover .mq-item{opacity:.78;}
  .mq-item img{height:30px;width:auto;display:block;}
  .mq-item svg{height:26px;width:auto;display:block;flex-shrink:0;}
  .mq-item .wm{font-size:20px;font-weight:800;letter-spacing:-.04em;}
  .mq-item .wm-mono{
    font-family:var(--font-body);font-size:16px;font-weight:600;letter-spacing:.16em;
  }
  .mq-item .wm-light{font-size:20px;font-weight:400;letter-spacing:.02em;}
  .mq-item.ph{
    font-size:11.5px;font-weight:600;letter-spacing:.14em;opacity:.3;
    border:1px dashed var(--deep-line);border-radius:6px;height:42px;padding:0 26px;
    margin:9px 12px;
  }
  @keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  .planning-note{
    margin-top:32px;padding:16px 18px;border:1px dashed var(--deep-line);border-radius:4px;
    font-size:12.5px;line-height:1.8;color:var(--deep-ink-2);
  }
  .planning-note b{color:var(--green-text);font-family:var(--font-body);font-size:11px;letter-spacing:.12em;display:block;margin-bottom:6px;}

  .toast{
    position:fixed;left:50%;bottom:28px;transform:translate(-50%,120%);
    background:var(--deep);color:var(--deep-ink);padding:14px 22px;border-radius:6px;
    font-size:14.5px;font-weight:600;box-shadow:var(--shadow-lg);z-index:100;
    border:1px solid var(--deep-line);
    /* transform만으로 밀어내면 요소가 화면 밖에 '존재'해서
       전체 페이지 캡처나 고무줄 스크롤에서 삐져나온다.
       숨길 때는 visibility/opacity까지 함께 끈다. */
    opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .3s var(--ease), opacity .25s var(--ease), visibility .25s;
  }
  .toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
    /* 무한 반복 애니메이션은 duration을 줄이면 초고속 반복이 되어 더 해롭다.
       마퀴는 명시적으로 정지시킨다. */
    .mq-track,.cases-track{animation:none !important;}
    .btn-amber::after{animation:none !important;display:none;}
  }

  /* ============================================================
     접수 완료 화면 (피크엔드)
     ============================================================ */
  /* ⚠ 클래스명 .done 은 위저드 네비게이션(완료된 단계 표시)에서 이미 쓴다.
     같은 이름을 쓰면 네비 항목에 이 카드 스타일이 씌워진다(실제로 그랬다).
     그래서 .lead-done 으로 분리한다. */
  .lead-done{
    max-width:560px;margin:0 auto;text-align:center;
    background:var(--surface);border:1px solid var(--line);border-radius:18px;
    padding:38px 30px 32px;box-shadow:var(--shadow-lg);
    animation:doneIn .45s var(--ease) both;
  }
  .lead-done[hidden]{display:none;}
  @keyframes doneIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

  .done-mark{
    width:64px;height:64px;border-radius:50%;margin:0 auto 18px;
    display:flex;align-items:center;justify-content:center;
    background:var(--green);color:var(--on-green);
  }
  .done-mark svg{width:30px;height:30px;stroke-dasharray:32;stroke-dashoffset:32;
    animation:doneTick .5s var(--ease) .25s forwards;}
  @keyframes doneTick{to{stroke-dashoffset:0;}}

  .done-t{font-family:var(--font-sub);font-weight:700;font-size:25px;letter-spacing:var(--ls-md);color:var(--ink);}
  .done-s{margin-top:8px;font-size:15px;line-height:1.65;color:var(--ink-2);}
  .done-s b{color:var(--green-text);}

  /* 방금 넣은 내용을 되짚어 준다 — 제대로 들어갔다는 확신을 주는 자리 */
  .done-sum{
    margin:24px 0 0;padding:18px 20px;text-align:left;
    background:var(--surface-2);border-radius:14px;
    display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:14px;
  }
  .done-sum dt{color:var(--ink-3);white-space:nowrap;}
  .done-sum dd{margin:0;color:var(--ink);font-weight:600;word-break:break-all;}

  .done-next{margin-top:24px;text-align:left;}
  .done-next-h{font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:-.02em;}
  .done-next ol{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:2px;}
  .done-next li{
    display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:baseline;
    padding:11px 0;border-top:1px solid var(--line);font-size:14px;
  }
  .done-next li b{color:var(--green-text);font-weight:700;font-variant-numeric:tabular-nums;}
  .done-next li span{color:var(--ink-2);}

  .done-note{margin-top:22px;font-size:13.5px;color:var(--ink-3);}
  .done-note a{color:var(--green-text);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;}
  #doneAgain{margin-top:16px;}

  @media (max-width:480px){
    .lead-done{padding:30px 20px 26px;}
    .done-t{font-size:21px;}
    .done-sum{grid-template-columns:1fr;gap:3px 0;}
    .done-sum dt{margin-top:8px;font-size:12.5px;}
    .done-next li{grid-template-columns:1fr;gap:2px;}
  }

  /* ============================================================
     TOP 버튼 — 스크롤을 내리면 우측 하단에 나타난다
     하단 고정 상담바 위에 앉도록 --bar-h 만큼 띄운다.
     ============================================================ */
  .totop{
    position:fixed;right:18px;z-index:60;
    bottom:calc(var(--bar-h, 0px) + 18px);
    width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
    background:var(--surface);color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-lg);cursor:pointer;
    opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .totop.on{opacity:1;visibility:visible;transform:none;}
  .totop:hover{border-color:var(--green);color:var(--green-text);}
  .totop svg{width:20px;height:20px;}
  @media (max-width:480px){
    .totop{right:12px;width:44px;height:44px;bottom:calc(var(--bar-h, 0px) + 12px);}
  }

  /* ============================================================
     Shimmer — CTA 버튼 위를 빛이 스쳐 지나간다
     (21st.dev "Shimmer Button" 의 효과를 바닐라 CSS로 구현)
     오렌지 CTA에만 건다. 여기저기 붙이면 포인트가 아니게 된다.
     ============================================================ */
  .btn-amber{position:relative;overflow:hidden;isolation:isolate;}
  .btn-amber::after{
    content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
    background:linear-gradient(100deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
    transform:skewX(-18deg);pointer-events:none;z-index:-1;
    animation:shimmer 3.6s var(--ease) 1.2s infinite;
  }
  @keyframes shimmer{
    0%{left:-60%;}
    38%,100%{left:120%;}   /* 스쳐 간 뒤에는 화면 밖에서 대기 */
  }

  /* 숫자가 올라가는 동안 폭이 흔들리지 않게 고정폭 숫자를 쓴다 */
  .ticker{font-variant-numeric:tabular-nums;}

  /* ============================================================
     인터랙션 — 그림자 · 호버 · 눌림
     솔라온케어와 같은 규칙을 전체에 공통으로 적용합니다.
       카드   transform .3s + box-shadow .3s / hover translateY(-6px)
       버튼   background .2s + transform .15s / :active scale(.96)
     ⚠ prefers-reduced-motion에서는 아래 전부 정지됩니다(문서 하단 블록).
     ============================================================ */

  /* ---- 카드: 그림자 + 살짝 떠오르는 호버 ---- */
  .st, .q4c, .stp, .chk, .fnode, .fo, .c2-spec > div,
  .bshot, .ccard, .cmp-row, .wiz, .calc2-in, .panel{
    box-shadow:var(--shadow);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .st:hover, .q4c:hover, .stp:hover, .chk:hover, .fnode:hover,
  .c2-spec > div:hover, .cmp-row:hover, .panel:hover{
    transform:translateY(var(--lift));
    box-shadow:var(--shadow-lg);
    border-color:var(--line-strong);
  }
  /* 사진 카드는 그림자를 키우고 이미지를 살짝 확대 */
  .bshot:hover, .ccard:hover{
    transform:translateY(var(--lift));
    box-shadow:var(--shadow-lg);
  }
  .bshot img, .ccard .cphoto img{transition:transform .45s var(--ease);}
  .bshot:hover img, .ccard:hover .cphoto img{transform:scale(1.05);}

  /* 어두운 배경 위 카드는 그림자 대신 테두리·배경으로 반응 */

  .fnode-you:hover{border-color:var(--green-text);}
  .cmp-row:hover{background:rgba(255,255,255,.07);}

  /* 절감 밴드 숫자 카드 */
  .save-grid3 .sv{
    transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  }
  /* 밝은 면이 되었으니 호버 테두리도 밝은 값으로.
     흰색 28% 는 라이트 그린 위에서 보이지 않는다. */
  .save-grid3 .sv:hover{transform:translateY(-4px);border-color:var(--line-strong);}
  .save-grid3 .sv.hot:hover{border-color:var(--green-text);}

  /* FAQ — 열고 닫을 때, 그리고 호버 */
  details.qa{
    box-shadow:var(--shadow);
    transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  details.qa:hover{box-shadow:var(--shadow-lg);border-color:var(--line-strong);}
  details.qa summary::after{transition:transform .25s var(--ease);}

  /* ---- 버튼: 히어로 포함 전체 공통 ---- */
  .btn, .cb, .c2-shot, .chip, .verify, .pc-x{
    transition:background .2s var(--ease), color .2s var(--ease),
               border-color .2s var(--ease), transform .15s var(--ease),
               box-shadow .2s var(--ease), filter .2s var(--ease);
  }
  .btn:active, .cb:active, .c2-shot:active, .chip:active, .verify:active, .pc-x:active{
    transform:scale(.96);
  }
  /* 히어로 CTA — 솔라온케어처럼 배경만 바뀌고 눌리는 느낌 */
  .hero-cta .btn-amber:hover{background:#B93100;box-shadow:0 10px 24px -10px rgba(210,89,12,.65);}
  .hero-cta .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);}
  .hero-how li{transition:background .2s var(--ease), border-color .2s var(--ease);}
  .hero-how li:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);}

  /* 링크형 요소 */
  .nav-links a{transition:color .2s var(--ease), border-color .2s var(--ease);}
  .foot-bot a, .qa .ans a{transition:color .2s var(--ease), border-color .2s var(--ease);}

  /* ============================================================
     히어로 첫 진입 등장 애니메이션
     솔라온케어와 같은 방식: fadeUp 1s + 요소별 지연으로 순차 등장.
     prefers-reduced-motion에서는 문서 하단 블록이 !important로 정지시킵니다.
     ============================================================ */
  @keyframes fadeUp{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:none;}
  }
  @keyframes zoomIn{
    from{opacity:0;transform:scale(.9);}
    to{opacity:1;transform:scale(1);}
  }

  .hero .bn-eyebrow{animation:fadeUp .9s var(--ease) .05s both;}
  .hero .bn-l1{animation:fadeUp 1s var(--ease) .18s both;}
  .hero .bn-l2{animation:fadeUp 1s var(--ease) .30s both;}
  .hero .bn-pill{animation:fadeUp .9s var(--ease) .42s both;}
  .hero .stamp{animation:zoomIn .8s var(--ease) .60s both;}
  .hero .hero-sub{animation:fadeUp .9s var(--ease) .52s both;}
  .hero .hero-cta{animation:fadeUp .9s var(--ease) .62s both;}
  .hero .hero-stats{animation:fadeUp .9s var(--ease) .72s both;}
  .hero .hero-how{animation:fadeUp .9s var(--ease) .82s both;}
  /* 배경 장식은 조금 늦게, 은근하게 */
  .hero .bolt{animation:fadeUp 1.4s var(--ease) .1s both;}
  .hero .brk{animation:fadeUp .8s var(--ease) .34s both;}

  /* ============================================================
     개인정보 수집·이용 동의 팝업
     ⚠ 가이드 6.4: 모달을 닫을 때 body 스크롤 복원이 다른 요소를
        건드리지 않도록 여기서만 관리합니다.
     ============================================================ */
  @keyframes pmIn{ from{opacity:0;} to{opacity:1;} }
  .pmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
  .pmodal[hidden]{display:none;}
  .pm-dim{position:absolute;inset:0;background:rgba(6,11,32,.62);backdrop-filter:blur(2px);}
  .pm-box{
    position:relative;width:100%;max-width:640px;max-height:min(84vh,720px);
    display:flex;flex-direction:column;
    background:var(--bg);border:1px solid var(--line);border-radius:16px;
    box-shadow:var(--shadow-lg);overflow:hidden;
    /* translate를 쓰면 애니메이션이 첫 프레임에 멈춘 환경에서
       모달이 아래로 밀려 버튼이 화면을 벗어난다. 위치는 건드리지 않는다. */
    animation:pmIn .28s var(--ease) both;
  }
  .pm-head{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:20px 22px;border-bottom:1px solid var(--line);flex:none;
  }
  .pm-head h3{font-size:18px;letter-spacing:var(--ls-md);color:var(--ink);}
  .pm-x{
    width:36px;height:36px;flex:none;border-radius:9px;cursor:pointer;
    border:1px solid var(--line-strong);background:var(--bg);color:var(--ink-2);
    font-size:20px;line-height:1;font-family:inherit;
    transition:background .2s var(--ease), color .2s var(--ease);
  }
  .pm-x:hover{background:var(--surface-2);color:var(--ink);}

  /* 본문만 스크롤 — 제출 버튼이 항상 보이게(가이드 6.1) */
  .pm-body{padding:24px 26px 26px;overflow-y:auto;flex:1;font-size:14px;line-height:1.8;color:var(--ink-2);}
  /* 법적 고지문이라 문단이 길다. 줄간을 1.8 로 넓히고 문단 사이를 벌린다. */
  .pm-lead{
    margin-bottom:18px;padding:13px 15px;border-radius:10px;
    background:var(--surface-2);color:var(--ink);font-size:13.5px;
  }
  /* 표 아래 보충 설명 */
  .pm-sub{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--ink-3);}
  .pm-body h4{
    margin:26px 0 8px;padding-top:16px;border-top:1px solid var(--line);
    font-family:var(--font-sub);font-weight:700;
    font-size:14.5px;letter-spacing:var(--ls-sm);color:var(--ink);
  }
  /* 첫 소제목 위에는 구분선을 두지 않는다 — 표와 붙어 답답해진다 */
  .pm-body h4:first-of-type{border-top:0;padding-top:0;}
  .pm-body a{color:var(--green-text);text-decoration:none;border-bottom:1px solid var(--line-strong);}
  .pm-body a:hover{border-color:var(--green-text);}
  .pm-body p{letter-spacing:var(--ls-body);}
  .pm-note{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);}

  /* 필수 / 선택 배지 — 어느 항목이 거부 가능한지 한눈에 보이게 */
  .pm-tag{
    display:inline-block;margin-right:6px;padding:2px 7px;border-radius:5px;
    font-family:var(--font-body);font-size:10.5px;font-weight:700;
    letter-spacing:.02em;vertical-align:1px;
  }
  .pm-tag.req{background:var(--green-soft);color:var(--green-text);}
  .pm-tag.opt{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);}

  /* 문의 항목 — 점(·)으로 이어 붙이면 어디까지가 한 값인지 안 보인다 */
  .pm-dl{margin-top:4px;display:grid;gap:8px;}
  .pm-dl > div{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px;}
  .pm-dl dt{flex:0 0 128px;color:var(--ink-3);}
  .pm-dl dd{margin:0;color:var(--ink);font-weight:600;}

  .pm-tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
  .pm-tbl th,.pm-tbl td{
    padding:12px 13px;border:1px solid var(--line);text-align:left;vertical-align:top;
    letter-spacing:var(--ls-body);font-size:13.5px;font-weight:400;line-height:1.6;
    white-space:normal;
  }
  /* 전역 table 규칙을 제거했으므로 마지막 행에 별도 override가 필요 없습니다.
     (남겨두면 td:first-child의 굵기까지 덮어써 항목명이 얇아집니다) */
  .pm-tbl td:first-child{font-weight:600;color:var(--ink);width:34%;}
  .pm-tbl td:last-child{width:24%;}
  .pm-tbl th{background:var(--surface-2);font-weight:700;color:var(--ink);}
  .pm-tbl td{color:var(--ink-2);}

  .pm-foot{
    display:flex;gap:10px;justify-content:flex-end;
    padding:16px 22px;border-top:1px solid var(--line);background:var(--surface);flex:none;
  }
  .pm-foot .btn{min-height:46px;}

  @media (max-width:560px){
    .pmodal{padding:0;align-items:flex-end;}
    .pm-box{max-width:none;max-height:92vh;border-radius:16px 16px 0 0;}
    .pm-body{padding:18px;font-size:13.5px;}
    .pm-foot{padding:14px 18px;}
    .pm-foot .btn{flex:1 1 0;}

    /* 3열 표를 좁은 화면에 밀어 넣으면 글자가 12.5px 로 줄고 셀마다 줄바꿈이
       생겨 읽기 어렵다. 행 단위 카드로 바꾼다.
       항목명은 각 td 의 data-th 에서 가져온다. */
    .pm-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
    .pm-tbl,.pm-tbl tbody,.pm-tbl tr,.pm-tbl td{display:block;width:auto;}
    .pm-tbl tr{
      border:1px solid var(--line);border-radius:12px;padding:4px 0;
      background:var(--surface);
    }
    .pm-tbl tr + tr{margin-top:10px;}
    .pm-tbl td{border:0;padding:8px 14px;font-size:13.5px;}
    .pm-tbl td + td{border-top:1px solid var(--line);}
    .pm-tbl td::before{
      content:attr(data-th);display:block;margin-bottom:2px;
      font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink-3);
    }
    .pm-tbl td:first-child{width:auto;}
    .pm-tbl td:last-child{width:auto;}
    .pm-dl dt{flex:0 0 auto;}
  }

  /* ============================================================
     다크 섹션 안의 텍스트 토큰 재정의
     글자용 그린(--green-text #4F7525)은 밝은 배경에서는 읽히지만
     다크 네이비(#17212B) 위에서는 2.79:1로 깨진다.
     어두운 면을 가진 컨테이너 안에서만 밝은 값으로 바꿔 쓴다.
     ============================================================ */
  .hero, .result, footer, .cbar, .fnode-you, .score-sec{
    --green-text:#9DD35C;
    --ink-2:var(--deep-ink-2);
    --ink-3:var(--deep-ink-2);
  }
  /* ============================================================
     .why — 0831 피드백으로 다크에서 밝은 면으로 바뀐 섹션
     안쪽 규칙들이 "어두운 배경 위 흰 글자"를 전제로 짜여 있어,
     토큰과 하드코딩된 흰색·반투명 흰 면을 여기서 밝은 값으로 되돌린다.
     규칙을 하나씩 고치면 다시 다크로 돌릴 때 되돌리기 어려우므로
     이 블록 하나만 켜고 끄면 되도록 모아 둔다.
     ============================================================ */
  .why, .save{
    --deep-ink:var(--ink);
    --deep-ink-2:var(--ink-2);
    --deep-line:var(--line-strong);
  }
  .why h2 .hit{color:var(--green-text);}
  .why .cmp-row{background:var(--surface);}
  .why .ball{background:var(--surface);border-color:var(--line-strong);}
  .why .pill{background:var(--surface);border-color:var(--line-strong);}
  .why .ln{background:var(--line-strong);}
  .why .ln.to-r::after{border-left-color:var(--line-strong);}
  .why .ln.to-l::before{border-right-color:var(--line-strong);}
  /* 어두운 면이 남아 있는 요소는 예외 — 그 안은 계속 흰 글자를 쓴다 */
  .why .fnode-you .node{color:var(--deep-ink);}

  /* 내비는 오프화이트 면이다. 예전 다크 내비 시절의 흰 글자가 남아 있어
     밝은 배경 위에서 안 보였다. 본문색 계열로 되돌린다. */
  .nav .nav-links a{color:var(--ink-2);}
  .nav .nav-links a:hover{color:var(--ink);border-color:var(--green);}

  /* ---------- 모바일 메뉴 ---------- */
  .nav-burger{
    display:none;width:44px;height:44px;flex:none;margin-left:4px;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
    border:1px solid var(--line-strong);border-radius:9px;background:transparent;cursor:pointer;
    transition:background .2s var(--ease), border-color .2s var(--ease);
  }
  .nav-burger span{
    display:block;width:18px;height:2px;border-radius:2px;background:var(--ink-2);
    transition:transform .25s var(--ease), opacity .2s var(--ease);
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav-panel{
    border-top:1px solid var(--line);background:var(--bg);
    padding:10px 20px 16px;
  }
  .nav-panel[hidden]{display:none;}
  .nav-panel a{
    display:block;padding:14px 4px;min-height:44px;
    font-size:15.5px;font-weight:600;letter-spacing:var(--ls-sm);
    color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  }
  .nav-panel a:last-child{border-bottom:none;}
  .nav-panel .np-cta{
    margin-top:12px;border-radius:9px;text-align:center;
    background:var(--green);color:var(--on-green);font-weight:700;
  }

  @media (max-width:900px){
    .nav-burger{display:flex;}
    .nav-in{gap:12px;}
    /* 오른쪽으로 밀어주던 건 .nav-links 의 margin-left:auto 였는데
       여기서 display:none 이 되어 그 역할이 사라진다.
       그래서 버튼이 로고 바로 옆에 붙어 가운데 몰려 보였다. */
    .nav .btn-amber{margin-left:auto;}
  }
  /* 좁은 화면 내비 — 로고 200px + 버튼 + 햄버거가 393px 를 정확히 채워
     "무료 상담" 이 73px 로 눌리며 두 줄로 접혔다.
     로고를 줄여 자리를 만들고, 버튼은 한 줄로 고정한다. */
  @media (max-width:560px){
    .logo img{height:30px;}
    .nav-in{gap:10px;height:64px;}
    .nav .btn-amber{white-space:nowrap;padding:9px 14px;}
  }
  @media (max-width:400px){
    .logo img{height:27px;}
    .nav .btn-amber{padding:9px 12px;font-size:13px;}
  }