/* ============================================================
   세일즈스캔 — application.css 제안본 (라이트 단일 테마)
   서지우 · 2026-07-28
   현 app/assets/stylesheets/application.css 대체용. 다크 미디어쿼리 없음.
   ※ 반영은 카텍 구현 단계. 토큰·컴포넌트 규격은 01·04 문서 참조.
   ============================================================ */

:root {
  /* ── 중립 ──
     3차(2026-08-01): ui-ux-pro-max --design-system 출력 팔레트("Navy professional
     + paid green")에 맞춰 정렬. background #F8FAFC / foreground #0F172A /
     muted #F1F3F5 / border #E4E7EB 를 그대로 채택. */
  --bg:#ffffff; --surface:#ffffff;
  --panel:#f8fafc; --panel-2:#f1f3f5;
  --line:#e4e7eb; --line-strong:#cbd2da;
  --tx:#0f172a; --tx-2:#334155; --mute:#5b6675;
  /* 브랜드 — 3차에서 1색(파랑) → 3단(네이비·파랑·그린)으로 확장.
     위계가 파랑 한 색뿐이라 화면 전체가 '평이하게' 눌려 있던 문제를 푼다. */
  --ac:#2563eb; --ac-hover:#1d4ed8; --ac-soft:#eff4ff;
  /* Primary(구조·권위): 헤더/표 헤더/축 레일 — 읽는 색이 아니라 '틀'의 색 */
  --navy:#1e3a5f; --navy-hover:#16304f; --navy-soft:#eaf0f7; --navy-line:#c7d5e6;
  /* Accent/CTA(유료 전환): 스킬 원값 #059669 는 흰 글씨 대비 3.77:1 로
     4.5:1 미달 → 글자·버튼면은 #047857(5.48:1)을 쓰고, 원값은 글자가 얹히지
     않는 표식(막대·테두리·점)에만 남긴다. 근거: 스킬 우선순위 #1 접근성 CRITICAL. */
  --paid:#c2410c; --paid-hover:#9a3412; --paid-soft:#ffedd5; --paid-mark:#ea580c;
  /* 시맨틱 4단계 (+측정불가) — WCAG AA 검증 완료 */
  --bad:#c92a2a;  --bad-soft:#fbe9e9;
  --warn:#b45309; --warn-soft:#fdf4e7;
  --ok:#0f766e;   --ok-soft:#e6f4f2;
  --good:#15803d; --good-soft:#ebf7ef;
  --neutral:#5b636d; --neutral-soft:#eef1f4;
  /* 타이포 */
  --f-sans:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",system-ui,sans-serif;
  /* 숫자 전용 스택. 스킬 typography 도메인 'Dashboard Data' 페어링의 원칙
     ("Code for data, Sans for labels")을 채택하되, 한글과 라틴 모노를 섞으면
     자간이 깨지므로 별도 웹폰트를 받지 않고 시스템 모노로만 구현한다.
     이 제품이 파는 것은 점수이므로 숫자가 라벨과 같은 얼굴이면 안 된다. */
  --f-num:ui-monospace,"SF Mono","SFMono-Regular","Menlo","Consolas","Roboto Mono",monospace;
  /* 간격 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --wrap:760px; --wrap-wide:1040px;
  /* 2026-08-03: 헤더 바(고정 20px)와 본문 컨테이너(clamp 16~24px)가 서로 다른 값을
     쓰고 있어 좁은 화면·넓은 화면 양쪽에서 좌우 4px씩 어긋나 있었다(500px 부근에서만
     우연히 일치). 컨테이너 전부가 이 변수 하나를 쓰게 통일한다 — 정렬이 어긋나면
     "정직한 제품"이라는 인상부터 깨진다. */
  --gutter:clamp(16px,4vw,24px);
  /* 라운드 */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  /* 그림자 */
  --sh-1:0 1px 2px rgba(20,23,26,.04),0 1px 3px rgba(20,23,26,.06);
  --sh-2:0 4px 16px rgba(20,23,26,.08);
  --sh-focus:0 0 0 3px rgba(37,99,235,.32);
  /* 모션 */
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f-sans);
  line-height:1.65;-webkit-font-smoothing:antialiased;}
a{color:var(--ac);}

/* ── 컨테이너 ── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:40px var(--gutter) 80px;}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding:40px var(--gutter) 80px;}

/* ── 타이포 ── */
h1{font-size:clamp(24px,6vw,30px);line-height:1.25;margin:0 0 12px;letter-spacing:-.02em;}
h2{font-size:clamp(18px,4vw,20px);margin:40px 0 14px;letter-spacing:-.01em;}
h3{font-size:15px;margin:0 0 6px;}
.sub{color:var(--mute);margin:0 0 28px;font-size:15.5px;}
.mute{color:var(--mute);} .small{font-size:13.5px;}

/* ── 헤더 ── */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-1);}
/* ⚠⚠ 2026-08-03 김대표님 지시 4회차 — "메뉴 좌우 반원" 의 진짜 원인은 여기다.
   헤더 안쪽 컨테이너가 `<div class="bar">` 인데, 아래 162행의 점수 막대 컴포넌트가
   같은 이름 `.bar` 를 쓴다. 그쪽의 border-radius:999px + background 가 헤더 바에도
   그대로 걸려서, 헤더가 "좌우 끝이 반원인 회색 캡슐"로 그려졌다.
   → 히어로의 radial-gradient 광원과는 전혀 무관한 별개 건이다. 그걸 세 번 지웠는데도
     반원이 남아 있었던 이유가 이것이다. 아래 3줄이 그 상속을 끊는다.
   ※ .site-header .bar (0,2,0) 가 .bar (0,1,0) 를 항상 이기므로 선언 순서와 무관하다.
   ※ 근본 해결은 헤더 컨테이너 클래스명을 header-bar 로 바꾸는 것이나, 지금 뷰 파일에
     다른 크루의 미커밋 작업이 있어 CSS 한 파일로만 끊는다. 뷰가 정리되면 개명 권장. */
.site-header .bar{max-width:var(--wrap-wide);margin:0 auto;height:56px;
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);
  border-radius:0;          /* ← 좌우 반원 제거 */
  background:transparent;   /* ← 회색 캡슐 면 제거, 헤더 배경 한 색으로 통일 */
  overflow:visible;}        /* ← .bar 의 overflow:hidden 이 포커스 링을 자르는 것도 함께 해제 */
.site-header .brand{font-weight:700;color:var(--tx);text-decoration:none;letter-spacing:-.01em;}
.site-header nav{display:flex;gap:18px;font-size:14px;}
.site-header nav a{color:var(--mute);text-decoration:none;}
.site-header nav a:hover{color:var(--tx);}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--f-sans);padding:12px 20px;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s,box-shadow .16s;}
.btn:focus-visible{outline:none;box-shadow:var(--sh-focus);}
.btn-primary{background:var(--ac);color:#fff;}
.btn-primary:hover{background:var(--ac-hover);}
.btn-secondary{background:var(--surface);color:var(--tx);border-color:var(--line-strong);}
.btn-secondary:hover{background:var(--panel);}
.btn-quiet{background:transparent;color:var(--ac);padding:8px 10px;}
.btn-quiet:hover{background:var(--ac-soft);}
.btn-lg{font-size:16px;padding:15px 26px;}
.btn-block{width:100%;}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:progress;}

/* ── 입력 · 폼 ── */
.field{width:100%;padding:14px 16px;font:400 16px/1.2 var(--f-sans);
  color:var(--tx);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);transition:border-color .16s,box-shadow .16s;}
.field::placeholder{color:var(--mute);}
.field:focus,.field:focus-visible{outline:none;border-color:var(--ac);box-shadow:var(--sh-focus);}
.field[aria-invalid=true]{border-color:var(--bad);}
.form{display:flex;gap:8px;margin:20px 0 8px;}
.form .field{flex:1;}
.error{padding:12px 14px;border:1px solid var(--bad);background:var(--bad-soft);
  color:var(--bad);border-radius:var(--r);font-size:14px;margin:12px 0;}

/* ── 아이콘 ── */
.ico{display:inline-flex;width:20px;height:20px;flex-shrink:0;vertical-align:-4px;}
.ico svg{width:100%;height:100%;}
.ico-check{width:18px;height:18px;}

/* ── 카드 ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh-1);}
.card-lg{border-radius:var(--r-lg);padding:24px;}
.card-hover{transition:box-shadow .16s var(--ease),transform .16s;}
.card-hover:hover{box-shadow:var(--sh-2);transform:translateY(-1px);}
.axis-card{display:flex;flex-direction:column;gap:6px;}
.axis-card .ico{color:var(--tx);}
.axis-card h3{margin:0;font:600 15px/1.4 var(--f-sans);}
.axis-card p{margin:0;color:var(--mute);font-size:13.5px;}
.axis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px;}
@media(min-width:700px){.axis-grid{grid-template-columns:repeat(3,1fr);}}

/* ── 점수 게이지 ── */
.gauge{position:relative;display:inline-flex;flex-direction:column;align-items:center;}
.gauge-track{stroke:var(--line);}
.gauge-fill{stroke:currentColor;transition:stroke-dasharray .64s var(--ease);}
.gauge-good{color:var(--good);} .gauge-ok{color:var(--ok);}
.gauge-warn{color:var(--warn);} .gauge-bad{color:var(--bad);} .gauge-neutral{color:var(--neutral);}
.gauge-num{font:700 40px/1 var(--f-sans);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin-top:-8px;color:var(--tx);}
.gauge-num span{font-size:18px;font-weight:500;color:var(--mute);}
.gauge-band{font:600 17px/1 var(--f-sans);color:currentColor;margin-top:4px;}
.gauge-mini{width:96px;} .gauge-mini .gauge-num{font-size:24px;}

/* 점수 히어로 카드 */
.headline{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  background:var(--surface);box-shadow:var(--sh-1);text-align:center;margin-bottom:12px;}
.band-note{color:var(--mute);margin:8px 0 0;font-size:14.5px;}
.notes{margin:14px 0 0;padding:0;list-style:none;}
.notes li{color:var(--mute);font-size:13.5px;}

/* 병목 배너 */
.bottleneck-banner{display:flex;gap:12px;align-items:flex-start;
  background:var(--bad-soft);border:1px solid var(--bad);border-radius:var(--r);
  padding:16px 18px;margin:12px 0;color:var(--tx);}
.bottleneck-banner .ico{color:var(--bad);margin-top:2px;}
.bottleneck-banner strong{color:var(--bad);}

/* ── 축 바 ── */
.axes{margin:8px 0 0;}
.axis{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);}
.axis:last-child{border-bottom:0;}
.axis-name{display:flex;align-items:center;gap:8px;width:140px;flex-shrink:0;font-size:14.5px;}
.axis-name .ico{color:var(--tx);}
.bar{flex:1;height:8px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;}
.bar>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--ok);
  transition:width .64s var(--ease);}
.axis-val{width:60px;text-align:right;font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums;}
.axis-flag{width:84px;font-size:12px;color:var(--mute);}
.axis.is-bottleneck .bar>i{background:var(--bad);}
.axis.is-bottleneck .axis-name{font-weight:600;}
.axis.is-bottleneck .axis-name .ico,.axis.is-bottleneck .axis-flag{color:var(--bad);}
.axis.is-lowconf .bar>i{background:var(--neutral);}

/* ── 체크 · 아코디언 ── */
.acc{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;background:var(--surface);}
.acc>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;
  font:600 15px/1.4 var(--f-sans);list-style:none;}
.acc>summary::-webkit-details-marker{display:none;}
.acc[open]>summary{border-bottom:1px solid var(--line);}
.acc .axis-score{margin-left:auto;color:var(--mute);font-variant-numeric:tabular-nums;}
.acc .acc-body{padding:4px 16px 8px;}
.check{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);}
.check:last-child{border-bottom:0;}
.check .state{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;
  border-radius:8px;font-size:13px;font-weight:700;background:var(--panel-2);color:var(--mute);}
.check .state.s5{background:var(--good-soft);color:var(--good);}
.check .state.s3{background:var(--warn-soft);color:var(--warn);}
.check .state.s1,.check .state.s0{background:var(--bad-soft);color:var(--bad);}
.check .state.na{background:var(--neutral-soft);color:var(--neutral);}
.check .state .ico{width:18px;height:18px;}
.check .body{flex:1;min-width:0;}
.check h3{margin:0 0 2px;font-size:14px;}
.check p{margin:0;font-size:13.5px;color:var(--mute);}
.check .fix{margin-top:4px;color:var(--ac);font-size:13.5px;}

/* ── 배지 ── */
.badge{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--f-sans);
  padding:5px 9px;border-radius:var(--r-pill);vertical-align:middle;}
.badge .ico{width:13px;height:13px;}
.badge-bad{background:var(--bad-soft);color:var(--bad);}
.badge-warn{background:var(--warn-soft);color:var(--warn);}
.badge-ok{background:var(--ok-soft);color:var(--ok);}
.badge-good{background:var(--good-soft);color:var(--good);}
.badge-neutral{background:var(--neutral-soft);color:var(--neutral);}
.badge-outline{background:transparent;border:1px solid var(--line-strong);color:var(--mute);}

/* ── 진단 대기 ── */
.waiting{text-align:center;padding:24px 0;}
.waiting .spinner{width:64px;height:64px;margin:0 auto 16px;}
.steps{list-style:none;padding:0;margin:20px auto 0;max-width:360px;text-align:left;}
.steps li{display:flex;align-items:center;gap:10px;padding:9px 0;color:var(--mute);font-size:14px;}
.steps li.done{color:var(--tx);} .steps li.done .ico{color:var(--good);}
.steps li.active{color:var(--tx);font-weight:600;} .steps li.active .ico{color:var(--ac);}

/* ── 갤러리 ── */
.view-toggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;}
.view-toggle button{background:var(--surface);border:0;padding:8px 12px;cursor:pointer;color:var(--mute);font:600 13px var(--f-sans);}
.view-toggle button[aria-pressed=true]{background:var(--panel-2);color:var(--tx);}
.gallery-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px;}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}

/* ── 수집 정보 · 기타 ── */
.kv{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;background:var(--surface);}
.kv div{display:flex;gap:12px;padding:4px 0;font-size:14px;}
.kv dt{width:110px;color:var(--mute);flex-shrink:0;}
.kv dd{margin:0;}
.recent{list-style:none;padding:0;margin:12px 0 0;}
.recent li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;}
footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);color:var(--mute);font-size:12.5px;}

/* ── 반응형 ── */
@media(max-width:600px){
  .wrap,.wrap-wide{padding:28px 16px 64px;}
  .form{flex-direction:column;} .form .btn{width:100%;}
  .axis-name{width:auto;} .axis-flag{display:none;} .axis{flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){
  *,.gauge-fill,.bar>i,.btn,.card-hover{transition:none!important;animation:none!important;}
}

/* ── 보정 (2026-07-28) ── */
/* a 태그로 만든 버튼이 링크 색·밑줄을 상속하던 문제 */
a.btn{text-decoration:none;}
.btn-secondary,.view-toggle a.btn{color:var(--tx);}
.view-toggle a.btn{border-radius:0;border:0;background:var(--surface);padding:8px 14px;color:var(--mute);}
.view-toggle a.btn[aria-pressed="true"]{background:var(--panel-2);color:var(--tx);}

/* 점수 게이지 — 숫자를 원 안에 겹쳐 놓는다 */
.gauge-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.gauge-wrap .gauge-inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;}
.gauge-wrap .gauge-num{margin:0;font-size:34px;}
.gauge-wrap .gauge-num span{font-size:15px;}
/* ============================================================
   09 · 랜딩 리디자인 — application.css 하단에 그대로 덧붙임 (ADDITIVE)
   서지우 · 2026-07-28 · 위임: 카파시
   원칙: 기존 토큰/컴포넌트 교체 없음. 전부 새 클래스(.lp-*)로 스코프.
        결과(show)·갤러리(index) 화면에는 영향 0.
   전제: new.html.erb 컨테이너를 .wrap → 밴드 구조(.lp / .lp-band / .lp-in)로 교체.
        (09_랜딩-리디자인.md 의 ERB 제안본 참조)
   ============================================================ */

/* ── 밴드 리듬: 섹션마다 full-bleed 배경, 안쪽은 컨테이너 폭 ── */
.lp-band{ padding-block:clamp(44px,7vw,84px); }
.lp-band--tint{ background:var(--panel); }                         /* 흰색과 교차 — 다크 히어로 도입 후 아래서 --navy-soft 로 재정의 */
/* 이 레이어의 background는 파일 하단 "히어로 다크" 층에서 최종 확정되며(단일 색,
   반원 광원 없음), 여기 값은 그 전 단계 스케폴딩이라 더 이상 렌더되지 않는다. */
.lp-band--hero{ background:var(--bg); }
.lp-in{ max-width:var(--wrap-wide); margin:0 auto; padding-inline:var(--gutter); }
/* 2026-08-03: 좁은 폭(760)을 쓰면 넓은 섹션과 좌우 끝이 어긋난다. 컨테이너 폭은
   통일하고, 읽기 편의(글줄 길이)는 문단 max-width(ch)로 지킨다.
   → 파일 하단 "섹션 좌우 폭 통일" 블록 참조. 이 클래스는 이제 폭을 바꾸지 않는다. */
.lp-in--narrow{ max-width:var(--wrap-wide); }

/* ── 섹션 헤더 (eyebrow 키커 + 제목) ── */
.lp-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font:600 12.5px/1 var(--f-sans); letter-spacing:.01em;
  color:var(--ac); background:var(--ac-soft);
  padding:6px 11px; border-radius:var(--r-pill); margin:0 0 14px;
}
.lp-head{ margin:0 0 clamp(20px,3vw,30px); }
.lp-head h2{ font-size:clamp(21px,3.4vw,28px); margin:0; letter-spacing:-.02em; }
.lp-head .sub{ margin:8px 0 0; max-width:54ch; }

/* ── 히어로 ── */
.lp-hero{ display:grid; gap:clamp(26px,5vw,56px); align-items:center; }
@media(min-width:900px){ .lp-hero{ grid-template-columns:1.05fr .95fr; } }
.lp-hero h1{ font-size:clamp(30px,5vw,46px); line-height:1.12; letter-spacing:-.03em; margin:0 0 16px; }
.lp-hero .sub{ font-size:clamp(15.5px,1.6vw,17.5px); max-width:48ch; margin:0 0 22px; }
.lp-hero .form{ max-width:520px; margin:0 0 8px; }
.lp-trust{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

/* 히어로 우측: '결과 미리보기' 카드 — 제품을 즉시 보여준다 */
.lp-preview{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:clamp(18px,2.4vw,24px);
}
.lp-preview .cap{
  display:flex; align-items:center; justify-content:space-between;
  font:600 12px/1 var(--f-sans); color:var(--mute); margin:0 0 16px;
}
.lp-preview .cap .badge{ font-size:11px; }
.lp-preview .axes{ margin:0; }                                     /* 기존 .axis 재사용 */
.lp-preview .note{ margin:14px 0 0; color:var(--mute); font-size:12.5px; }

/* ── ① 최신 진단 카드: 갤러리와 다른 '가로 스캔 티저' ── */
.lp-recent{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }

/* 전시 벽(wall) — 카드 수 자체로 보여준다. 데스크톱 3열.
   2026-08-17: .lp-recent-eyebrow 삭제. 이 규칙은 인라인 알약 배지(.lp-eyebrow)를
   줄바꿈시키려고만 있던 보조 클래스였는데, 배지를 .lp-head(h2 + .sub)로 교체하면서
   쓰는 곳이 없어졌다. 하단 여백은 .lp-head 가 이미 갖고 있다. */
.lp-recent--wall{ grid-template-columns:repeat(3, 1fr); gap:10px 14px; }
.lp-recent--wall .lp-recent-card{ padding:14px 16px; }
.lp-recent--wall .lp-rc-domain{ font-size:14.5px; }
.lp-recent--wall .lp-rc-num{ font-size:21px; }
@media(max-width:980px){ .lp-recent--wall{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:640px){ .lp-recent--wall{ grid-template-columns:1fr; } }

.lp-recent-card{
  display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-left-width:3px;
  border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh-1);
  text-decoration:none; color:inherit;
  transition:box-shadow .16s var(--ease), transform .16s, border-color .16s;
}
.lp-recent-card:hover{ box-shadow:var(--sh-2); transform:translateY(-1px); }
.lp-recent-card:focus-visible{ outline:none; box-shadow:var(--sh-focus); }
/* 좌측 밴드 톤 악센트 (색+아이콘+라벨 3중이라 색 단독 아님) */
.lp-recent-card[data-tone=bad]{ border-left-color:var(--bad); }
.lp-recent-card[data-tone=warn]{ border-left-color:var(--warn); }
.lp-recent-card[data-tone=ok]{ border-left-color:var(--ok); }
.lp-recent-card[data-tone=good]{ border-left-color:var(--good); }
.lp-recent-card[data-tone=neutral]{ border-left-color:var(--neutral); }

.lp-rc-main{ min-width:0; }
.lp-rc-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:9px; }
.lp-rc-domain{ font:700 16px/1.2 var(--f-sans); color:var(--tx); word-break:break-all; }
.lp-rc-why{ display:flex; align-items:center; gap:9px; }
.lp-rc-bottleneck{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--bad); white-space:nowrap; }
.lp-rc-bottleneck .ico{ width:16px; height:16px; }
.lp-rc-minibar{ flex:1; max-width:132px; height:6px; background:var(--line); border-radius:var(--r-pill); overflow:hidden; }
.lp-rc-minibar>i{ display:block; height:100%; background:var(--bad); border-radius:var(--r-pill); }
.lp-rc-launch{ font-size:13.5px; color:var(--mute); }

.lp-rc-score{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; }
.lp-rc-num{ font:700 26px/1 var(--f-sans); letter-spacing:-.02em; color:var(--tx); font-variant-numeric:tabular-nums; }
.lp-rc-num span{ font-size:12px; font-weight:500; color:var(--mute); }
.lp-rc-go{ font-size:12.5px; color:var(--ac); font-weight:600; }
.lp-recent-more{ margin:16px 0 0; }

@media(max-width:520px){
  .lp-recent-card{ grid-template-columns:1fr; }
  .lp-rc-score{ flex-direction:row; align-items:baseline; justify-content:space-between; }
  .lp-rc-minibar{ max-width:none; }
}

/* ── ② '무엇을 보는가' 6축 카드 업그레이드 ── */
.lp-axes{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:560px){ .lp-axes{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .lp-axes{ grid-template-columns:repeat(3,1fr); } }
.lp-axis{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 20px; box-shadow:var(--sh-1);
  transition:box-shadow .16s var(--ease), transform .16s;
}
.lp-axis:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.lp-axis .num{
  position:absolute; top:18px; right:20px;
  font:700 13px/1 var(--f-sans); color:var(--line-strong); font-variant-numeric:tabular-nums;
}
.lp-axis .chip{
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:12px; background:var(--ac-soft); color:var(--ac); margin-bottom:14px;
}
.lp-axis .chip .ico{ width:24px; height:24px; }
.lp-axis h3{ margin:0 0 4px; font-size:16px; }
.lp-axis p{ margin:0; color:var(--mute); font-size:14px; }

/* ── ② 정직 원칙 3분할 ── */
.lp-principles{ display:grid; gap:14px; }
@media(min-width:800px){ .lp-principles{ grid-template-columns:repeat(3,1fr); } }
.lp-principle{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--ac);
  border-radius:var(--r); padding:20px; box-shadow:var(--sh-1);
}
.lp-principle b{ display:block; margin-bottom:6px; font-size:15px; color:var(--tx); }
.lp-principle p{ margin:0; color:var(--mute); font-size:14px; }

/* ── ①b 문제 신호 리스트 ── */
.lp-signal-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
@media(min-width:800px){ .lp-signal-list{ grid-template-columns:repeat(2,1fr); } }
.lp-signal-list li{
  position:relative; padding:12px 16px 12px 32px; font-size:14px; color:var(--tx);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
}
.lp-signal-list li::before{
  content:"·"; position:absolute; left:14px; top:8px; color:var(--ac); font-weight:700; font-size:22px; line-height:1;
}

/* ── 스크롤 시선 흐름: 등장 시 fade-up (JS 있을 때만 숨김 → no-JS 안전) ── */
.has-reveal .reveal{ opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.has-reveal .reveal.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .has-reveal .reveal{ opacity:1; transform:none; transition:none; }
}
/* ============================================================
   10 · 블루프린트 세일즈 + 결과 유도 블록 — application.css 하단에 덧붙임 (ADDITIVE)
   서지우 · 2026-07-28 · 위임: 카파시 · 카피/구조 근거: 전환 07·08번
   원칙: 기존 토큰 확장만. 새 클래스 .bp-*(유도블록) / .sales-*(세일즈페이지) 로 스코프.
   ============================================================ */

/* ============================================================
   A. 결과 페이지 유도 블록 (show.html.erb · 체크 상세 직후)
   3모드(일반/확장/출발선) 가변 폭. 상단 병목배너엔 앵커 1줄만(.bp-anchor).
   ============================================================ */
.bp-anchor{ display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  font-size:13.5px; color:var(--ac); text-decoration:none; font-weight:600; }
.bp-anchor:hover{ text-decoration:underline; }

.bp-cta-block{
  margin:28px 0; padding:clamp(20px,3vw,28px);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.bp-cta-block h2{ margin:0 0 8px; font-size:clamp(18px,2.6vw,22px); letter-spacing:-.01em; }
.bp-cta-block .bp-lead{ margin:0 0 4px; color:var(--tx-2); font-size:15px; }
.bp-cta-block .bp-lead strong{ color:var(--tx); }
.bp-cta-block .bp-note{ margin:8px 0 0; color:var(--mute); font-size:13.5px; }

/* 경계선 표 (2-5절) — 좌 '이미 받음' / 우 '블루프린트' */
.bp-diff{ width:100%; border-collapse:collapse; margin:18px 0 6px; font-size:14px; }
.bp-diff caption{ text-align:left; color:var(--mute); font-size:13px; margin-bottom:8px; }
.bp-diff th{ text-align:left; font:600 13px/1.3 var(--f-sans); padding:8px 12px; }
.bp-diff thead th:first-child{ color:var(--mute); }
.bp-diff thead th:last-child{ color:var(--ac); }
.bp-diff td{ padding:9px 12px; border-top:1px solid var(--line); vertical-align:top; }
.bp-diff td:first-child{ color:var(--mute); }
.bp-diff td:last-child{ color:var(--tx); font-weight:500; background:var(--ac-soft); }
.bp-diff tr:last-child td:last-child{ font-weight:700; }

.bp-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.bp-cta-row .btn{ flex:0 0 auto; }
.bp-cta-micro{ color:var(--mute); font-size:13px; }
/* 좁은 화면에서 CTA가 문단처럼 보이지 않게 폭 전체를 쓴다 */
@media (max-width:560px){
  .bp-cta-row .btn{ flex:1 1 100%; text-align:center; }
}

/* ============================================================
   B. 세일즈 페이지 (/blueprint) — 신규 뷰
   레이아웃/헤더/푸터/스프라이트는 기존 application 레이아웃 재사용.
   폭: 기본 .sales-in(760), 리포트 실물 블록만 .sales-in--wide(1040).
   ============================================================ */
.sales-band{ padding-block:clamp(40px,6vw,72px); }
.sales-band--tint{ background:var(--panel); }
/* ⚠ 2026-08-03: 좌우 반원 광원(radial-gradient) 제거, 단일 색 — 아래 "10. 세일즈 페이지" 층에서 최종 확정 */
.sales-band--hero{ background:var(--bg); }
/* 2026-08-03: 기본값이 760이라 --wide(1040) 섹션과 좌우 끝이 어긋났다.
   폭은 1040으로 통일하고 읽기 편의는 문단 max-width(ch)로 지킨다.
   → 파일 하단 "섹션 좌우 폭 통일" 블록 참조. --wide 는 이제 같은 값(호환용). */
.sales-in{ max-width:var(--wrap-wide); margin:0 auto; padding-inline:var(--gutter); }
.sales-in--wide{ max-width:var(--wrap-wide); }
.sales-eyebrow{ display:inline-flex; align-items:center; gap:6px;
  font:600 12.5px/1 var(--f-sans); color:var(--ac); background:var(--ac-soft);
  padding:6px 11px; border-radius:var(--r-pill); margin:0 0 14px; }

/* 블록 1 · 히어로 */
.sales-hero h1{ font-size:clamp(28px,4.6vw,42px); line-height:1.14; letter-spacing:-.03em; margin:0 0 16px; }
.sales-hero .sub{ font-size:clamp(15.5px,1.6vw,17px); max-width:50ch; margin:0 0 24px; color:var(--tx-2); }
.sales-hero .sub strong{ color:var(--tx); }
.sales-cta{ display:inline-flex; align-items:center; gap:10px; }
.sales-hero .micro{ margin:12px 0 0; color:var(--mute); font-size:13.5px; }

/* 히어로 2단 — 좌: 문장 / 우: 세일즈 영상 슬롯(지금은 포스터 이미지)
   좁은 화면은 한 단으로 접고 이미지가 문장 아래로 간다. 문장이 먼저 읽혀야 한다. */
.sales-hero--split{ display:grid; gap:clamp(24px,4vw,44px); align-items:center; }
@media (min-width:960px){
  .sales-hero--split{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
}
.sales-hero-copy{ min-width:0; }
.sales-hero-copy .sub{ margin-bottom:0; }
.sales-hero-media{ margin:0; min-width:0; }
.sales-hero-media img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--sh-2);
}

/* 블록 2 · 받는 것 5개 (아이콘 + 한 줄, 설명 문단 금지) */
.sales-what{ display:grid; grid-template-columns:1fr; gap:10px; margin:0; padding:0; list-style:none; }
@media(min-width:640px){ .sales-what{ grid-template-columns:repeat(2,1fr); } }
.sales-what li{ display:flex; align-items:flex-start; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--sh-1); }
.sales-what .chip{ display:grid; place-items:center; width:38px; height:38px; flex-shrink:0;
  border-radius:10px; background:var(--ac-soft); color:var(--ac); }
.sales-what .chip .ico{ width:22px; height:22px; }
.sales-what b{ display:block; font-size:15px; margin-bottom:2px; }
.sales-what span{ color:var(--mute); font-size:13.5px; }
.sales-what .li-emph{ border-color:var(--ac); }                  /* 5번 '실행 우선순위' 강조 */
.sales-format{ margin:18px 0 0; padding:14px 16px; background:var(--panel);
  border-radius:var(--r); color:var(--tx-2); font-size:14px; }

/* 블록 3 · 리포트 실물 ★ (최대 면적) — 목차 전부 + 내용 첫 줄 + 하드 크롭 */
.sales-sample{ display:grid; gap:clamp(20px,3vw,32px); }
@media(min-width:860px){ .sales-sample{ grid-template-columns:.85fr 1.15fr; align-items:start; } }
.sales-toc{ margin:0; padding:0; list-style:none; }
.sales-toc li{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.sales-toc li:last-child{ border-bottom:0; }
.sales-toc .n{ display:grid; place-items:center; width:24px; height:24px; flex-shrink:0;
  border-radius:7px; background:var(--panel-2); color:var(--mute); font:700 12px/1 var(--f-sans); }
.sales-toc .locked{ margin-left:auto; }

/* 리포트 프리뷰 프레임: 진짜 문서처럼. 하단은 '그냥 잘림'(블러·페이드·오버레이 없음) */
.sales-doc{ background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); overflow:hidden; }
.sales-doc-bar{ display:flex; align-items:center; gap:6px; padding:11px 16px;
  background:var(--panel); border-bottom:1px solid var(--line); }
.sales-doc-bar i{ width:10px; height:10px; border-radius:50%; background:var(--line-strong); display:block; }
.sales-doc-bar span{ margin-left:8px; color:var(--mute); font-size:12.5px; }
.sales-doc-body{ padding:clamp(18px,2.6vw,26px); }
.sales-doc-h{ font:700 15px/1.4 var(--f-sans); margin:0 0 6px; }
.sales-doc-h .kls{ font:600 11px/1 var(--f-sans); color:var(--ac); background:var(--ac-soft);
  padding:4px 8px; border-radius:var(--r-pill); margin-left:8px; vertical-align:middle; }
.sales-doc-line{ color:var(--tx-2); font-size:14px; margin:0 0 4px; }
.sales-graphics{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:16px 0; }
.sales-graphic{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px; }
.sales-graphic figcaption{ margin:8px 0 0; color:var(--mute); font-size:12px; text-align:center; }
.sales-graphic svg{ display:block; width:100%; height:auto; }
/* 하드 크롭 경계: 실선 + 캡션 (감춤 신호 없음) */
.sales-crop{ position:relative; max-height:none; }
.sales-crop-edge{ border-top:2px dashed var(--line-strong); margin-top:4px; padding-top:12px; }
.sales-crop-cap{ color:var(--mute); font-size:12.5px; text-align:center; }

/* 블록 4 · 무료 vs 블루프린트 (표는 .bp-diff 재사용) */
.sales-punch{ margin:16px 0; padding:16px 18px; background:var(--surface);
  border:1px solid var(--line-strong); border-left:3px solid var(--ac);
  border-radius:var(--r); font:600 16px/1.5 var(--f-sans); color:var(--tx); }

/* 블록 5 · 만들어지는 5단계 */
.sales-steps{ margin:0; padding:0; list-style:none; counter-reset:step; display:grid; gap:12px; }
.sales-step{ display:flex; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh-1); }
.sales-step .n{ display:grid; place-items:center; width:30px; height:30px; flex-shrink:0;
  border-radius:8px; background:var(--ac-soft); color:var(--ac); font:700 14px/1 var(--f-sans); }
.sales-step b{ display:block; font-size:15px; margin-bottom:2px; }
.sales-step p{ margin:0; color:var(--mute); font-size:14px; }
.sales-trust{ margin:16px 0 0; padding:18px 20px; background:var(--ac-soft);
  border:1px solid var(--ac); border-radius:var(--r); color:var(--tx); font-size:15px; line-height:1.6; }
.sales-trust b{ color:var(--tx); }

/* 블록 6 · 하지 않는 것 (정직 결정타) */
.sales-no{ display:grid; gap:12px; }
@media(min-width:800px){ .sales-no{ grid-template-columns:repeat(3,1fr); } }
.sales-no-item{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--line-strong);
  border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh-1); }
.sales-no-item b{ display:block; margin-bottom:6px; font-size:15px; }
.sales-no-item span{ color:var(--mute); font-size:14px; }

/* 블록 7 · 가격 + CTA (앵커 없음, 취소선 없음) */
.sales-price{ text-align:center; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:clamp(28px,4vw,44px); }
.sales-price .amount{ font:700 clamp(36px,6vw,52px)/1 var(--f-sans); letter-spacing:-.03em;
  color:var(--tx); font-variant-numeric:tabular-nums; }
.sales-price .terms{ margin:10px 0 22px; color:var(--mute); font-size:14.5px; }
.sales-price .btn{ min-width:min(320px,100%); }
.sales-price .after{ margin:14px 0 0; color:var(--mute); font-size:13px; }

/* 블록 8 · FAQ = 기존 .acc 재사용 (추가 스타일 불필요) */

/* 블록 9 · 최종 CTA + 각주 (기존 footer 재사용) */
.sales-recta{ text-align:center; }
.sales-recta h2{ margin:0 0 18px; }

/* ============================================================
   11 · 디자인 3차 — UI UX Pro Max 적용 (ADDITIVE)
   서지우 · 2026-08-01 · 브랜치 feat/design-uiuxpromax-20260801

   근거 (실행 출력):
     search.py --design-system --stack html-tailwind
       → Pattern : Real-Time / Operations Landing
                   (CTA in nav + after metrics / 섹션2 = Key metrics·indicators
                    / "Data-dense but scannable" / status colors)
       → Style   : Data-Dense Dashboard
                   (KPI cards, data tables, minimal padding, grid layout,
                    space-efficient, maximum data visibility)
       → Colors  : Navy #1E3A5F + Blue #2563EB + Paid green #059669
       → Effects : row highlighting on hover, hover tooltips
       → Avoid   : Ornate design / Low trust signals / 과도한 애니메이션

   진단: 1·2차는 '읽기 좋은 문서'로는 완성돼 있었으나, 스킬이 지정한
        Data-Dense Dashboard 와 정반대로 여백이 넓고 위계가 파랑 한 색뿐이라
        "데이터가 믿을 만해 보이는 밀도"가 나오지 않았다. 3차는 카피를 그대로 둔 채
        밀도·위계·질감만 올린다.
   ============================================================ */

/* ── 0. 숫자는 라벨과 다른 얼굴을 갖는다 (스킬 'Code for data, Sans for labels') ── */
.gauge-num,.axis-val,.acc .axis-score,.lp-rc-num,.sales-price .amount,
.kpi-num,.rp-rail .gauge-num,.lp-axis .num{
  font-family:var(--f-num); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}

/* ── 1. 헤더 — 브랜드 마크 + nav CTA ── */
.site-header{ background:rgba(255,255,255,.92); backdrop-filter:saturate(1.6) blur(8px); }
.site-header .bar{ height:60px; gap:16px; }
.site-header .brand{ display:inline-flex; align-items:center; gap:9px; }
.brand-mark{ display:grid; place-items:center; width:28px; height:28px; flex-shrink:0;
  border-radius:8px; background:var(--navy); color:#fff; }
.brand-mark svg{ width:16px; height:16px; fill:currentColor; }
.brand-name{ font-weight:700; letter-spacing:-.02em; font-size:16px; color:var(--navy); }
.site-header nav{ align-items:center; gap:14px; }
.site-header nav .nav-link{ color:var(--mute); text-decoration:none; font-weight:500;
  padding:8px 4px; border-radius:var(--r-sm); transition:color .16s var(--ease); }
.site-header nav .nav-link:hover{ color:var(--navy); }
.site-header nav .nav-link:focus-visible{ outline:none; box-shadow:var(--sh-focus); }
/* ⚠ 기존 `.site-header nav a{color:var(--mute)}` 는 특정도 (0,2,1) 이라
   `.btn-primary{color:#fff}` (0,1,0) 을 이겨 버튼 글자를 회색으로 만든다.
   파란 버튼 위 회색 글자는 명암비 불합격이므로 같은 특정도로 되돌린다. */
.site-header nav a.btn-primary{ color:#fff; }
.site-header nav a.btn-paid{ color:#fff; }
.btn-sm{ font-size:13.5px; padding:9px 15px; border-radius:var(--r-sm); }

/* ── 2. 섹션 제목에 네이비 규칙선 — '문서'가 아니라 '패널'로 읽히게 ── */
.lp-head h2,.sales-in .lp-head h2{ color:var(--navy); }
.lp-eyebrow,.sales-eyebrow{
  background:var(--navy-soft); color:var(--navy); border:1px solid var(--navy-line);
  font-weight:700; letter-spacing:.02em; text-transform:none;
}

/* ── 3. 랜딩 — 밀도 조정 (스킬: minimal padding / space-efficient) ── */
.lp-band{ padding-block:clamp(38px,5.2vw,64px); }        /* 기존 44~84 → 38~64 */
/* 이 레이어의 background도 파일 하단 "히어로 다크" 층에서 최종 확정되며 더 이상
   렌더되지 않는다 — padding-block만 여기서 유효하다. */
.lp-band--hero{
  padding-block:clamp(40px,5.6vw,72px);
  border-bottom:1px solid var(--line);
}
.lp-hero h1{ letter-spacing:-.035em; }
.lp-hero h1{ color:var(--navy); }

/* 히어로 미리보기 카드 — 계기판처럼 보이게 상단 바를 얹는다 */
.lp-preview{ padding:0; overflow:hidden; border-color:var(--line-strong); }
.lp-preview .cap{
  margin:0; padding:12px 18px; background:var(--navy); color:#fff;
  border-bottom:1px solid var(--navy);
}
.lp-preview .cap span:first-child{ color:#fff; font-weight:700; letter-spacing:.01em; }
.lp-preview .axes{ padding:6px 18px 0; }
.lp-preview .note{ margin:0; padding:12px 18px; border-top:1px solid var(--line);
  background:var(--panel); }

/* ── 4. KPI 지표 스트립 (스킬 섹션순서 #2 "Key metrics/indicators") ──
   ※ 새 카피가 아니다. 페이지에 이미 있던 사실(6축·24항목·0·1·3·5·2분)을
      숫자로 세워 보여주는 시각 재배치일 뿐이다. 없는 수치는 만들지 않는다. */
.kpi-strip{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
}
@media(min-width:760px){ .kpi-strip{ grid-template-columns:repeat(4,1fr); } }
.kpi{ background:var(--surface); padding:18px 20px; }
.kpi-num{ display:block; font:700 clamp(24px,3.2vw,30px)/1 var(--f-num); color:var(--navy); }
.kpi-num small{ font-size:.55em; font-weight:600; color:var(--mute); margin-left:3px; }
.kpi-label{ display:block; margin-top:7px; font-size:13px; color:var(--mute); line-height:1.45; }

/* ── 5. 6축 카드 — 네이비 칩 + 번호를 '데이터 라벨'로 ── */
.lp-axis{ padding:20px 18px; border-radius:var(--r); }
.lp-axis .chip{ width:40px; height:40px; border-radius:10px;
  background:var(--navy-soft); color:var(--navy); border:1px solid var(--navy-line); margin-bottom:12px; }
.lp-axis .chip .ico{ width:21px; height:21px; }
.lp-axis .num{ top:16px; right:16px; font-size:12px; color:var(--mute); opacity:.6; }
.lp-axis h3{ color:var(--navy); }
.lp-axis:hover{ border-color:var(--navy-line); }

/* ── 6. 최근 진단 카드 — 표처럼 촘촘하게 ── */
.lp-recent{ gap:8px; }
.lp-recent-card{ padding:14px 18px; border-left-width:4px; border-radius:var(--r-sm); }
.lp-recent-card:hover{ background:var(--panel); }   /* 스킬 Key Effect: row highlighting */
.lp-rc-domain{ color:var(--navy); }

/* ── 7. 스킬 Key Effect: row highlighting on hover (축·체크 행) ── */
.axis{ padding:9px 10px; margin-inline:-10px; border-radius:var(--r-sm);
  transition:background .16s var(--ease); }
.axes .axis:hover{ background:var(--panel); }
.check{ padding:12px 10px; margin-inline:-10px; border-radius:var(--r-sm);
  transition:background .16s var(--ease); }
.acc .check:hover{ background:var(--panel); }
.acc>summary{ transition:background .16s var(--ease); }
.acc>summary:hover{ background:var(--panel); }
.acc>summary:focus-visible{ outline:none; box-shadow:inset var(--sh-focus); }

/* 축 바 — 굵기 올려 계기판 느낌. 값은 모노. */
.bar{ height:9px; background:var(--panel-2); }
.axis-val{ width:66px; font-size:13px; color:var(--tx-2); font-weight:600; }
.axis-name{ font-weight:500; }
.axis.is-bottleneck{ background:var(--bad-soft); }
.axes .axis.is-bottleneck:hover{ background:var(--bad-soft); }

/* ── 8. 결과 리포트 — 2단(고정 점수 레일 + 본문) ──
   스킬 Style 'Data-Dense Dashboard' = grid layout / maximum data visibility.
   1440px에서 760px 한 줄만 쓰던 기존 구성은 좌우 340px씩을 버리고 있었다. */
/* 2026-08-03: 폭이 1180이라 헤더 바(1040)보다 140px 넓어, 로고 왼쪽 끝과 본문
   왼쪽 끝이 어긋나 있었다. 사이트 전체를 한 폭(--wrap-wide)으로 통일한다.
   2단 구성(352 레일 + 본문)은 1040에서도 그대로 성립한다. */
.rp{ max-width:var(--wrap-wide); margin:0 auto; padding:28px var(--gutter) 72px; }
.rp-grid{ display:grid; gap:28px; align-items:start; }
@media(min-width:1040px){
  .rp-grid{ grid-template-columns:352px minmax(0,1fr); gap:36px; }
  .rp-rail{ position:sticky; top:76px; }
}
.rp-main{ min-width:0; }
.rp-main h2:first-child{ margin-top:0; }

/* 좌측 레일: 점수판 */
.rp-rail .headline{ margin-bottom:10px; border-color:var(--line-strong); box-shadow:var(--sh-2); }
.rp-rail .rp-axes-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); overflow:hidden; margin-top:10px;
}
.rp-axes-card .rp-card-h{
  margin:0; padding:11px 16px; background:var(--navy); color:#fff;
  font:700 12.5px/1 var(--f-sans); letter-spacing:.02em;
}
.rp-axes-card .axes{ padding:4px 16px 10px; }
.rp-axes-card .axis-name{ width:auto; flex:1; font-size:13.5px; }
.rp-axes-card .bar{ flex:0 0 76px; }
.rp-axes-card .axis-val{ width:58px; font-size:12.5px; }
.rp-axes-card .axis-flag{ display:none; }
.rp-permalink{ margin:10px 0 0; font-size:12.5px; color:var(--mute); word-break:break-all; }
.rp-rail-cta{ margin:14px 0 0; }
.rp-rail-cta .btn{ font-size:14px; }

/* 리포트 본문 제목 — 네이비 + 좌측 규칙선 */
.rp-main h2{
  color:var(--navy); font-size:clamp(17px,2.2vw,20px);
  margin:34px 0 12px; padding-left:11px; border-left:3px solid var(--navy);
  line-height:1.3;
}
.rp-head{ margin-bottom:18px; }
.rp-head h1{ font-size:clamp(22px,3.2vw,28px); color:var(--navy); margin:0 0 4px;
  letter-spacing:-.03em; word-break:break-all; }

/* 아코디언을 표처럼: 붙여서 한 덩어리로 */
.rp-main .acc{ margin-bottom:6px; border-radius:var(--r-sm); }
.rp-main .acc>summary{ padding:13px 16px; font-size:14.5px; }
.rp-main .acc[open]{ border-color:var(--line-strong); box-shadow:var(--sh-1); }

/* 수집 정보 — 표 질감 */
.kv{ padding:6px 20px; }
.kv div{ padding:10px 0; border-bottom:1px solid var(--line); }
.kv div:last-child{ border-bottom:0; }
.kv dt{ width:96px; font-size:13px; }
.kv dd{ font-size:14px; font-weight:500; }

/* 병목 배너 — 좌측 굵은 띠로 '경보'답게 */
.bottleneck-banner{ border-width:1px; border-left-width:4px; border-radius:var(--r-sm);
  background:var(--bad-soft); }

/* ── 9. 유료 전환 = 그린 (스킬 Accent/CTA "paid green") ──
   무료 진단의 파랑과 유료 결제의 초록을 색으로 분리해, 어디서 돈이 드는지
   색만 봐도 알게 한다. 정직을 파는 제품이므로 이 구분이 곧 신뢰다. */
.btn-paid{ background:var(--paid); color:#fff; border-color:transparent; }
.btn-paid:hover{ background:var(--paid-hover); }
.btn-paid:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(4,120,87,.34); }

.btn-cta-bounce{
  background:var(--paid); font-size:18px; padding:19px 34px;
  box-shadow:0 10px 28px rgba(194,65,12,.38);
  animation:btn-cta-bounce-y 1.8s ease-in-out infinite;
}
.btn-cta-bounce:hover{ background:var(--paid-hover); }
@keyframes btn-cta-bounce-y{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.xp-price{ box-shadow:0 20px 48px rgba(194,65,12,.18), var(--sh-2); border-width:1.5px; }

.bp-cta-block{ border-color:var(--paid); border-left:4px solid var(--paid);
  background:linear-gradient(180deg,var(--paid-soft) 0%,var(--surface) 92px); }
.bp-cta-block h2{ color:var(--navy); }
.bp-diff thead th:last-child{ color:var(--paid); }
.bp-diff td:last-child{ background:var(--paid-soft); }
.bp-anchor{ color:var(--paid); }

/* ── 10. 세일즈 페이지 ── */
.sales-band{ padding-block:clamp(36px,5vw,60px); }
/* 2026-08-03 김대표님 지시(랜딩과 동일 건): 좌우에 반원으로 걸린 광원(radial-gradient)을
   빼고 단일 색으로 통일. 이 히어로는 우측에 실물 이미지가 있어 배경은 순수 흰색으로 —
   이미지·문구가 배경 없이 그대로 도드라지게 한다. */
.sales-band--hero{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.sales-hero h1{ color:var(--navy); letter-spacing:-.035em; }
/* ── 히어로 네이비 강조(2026-08-13, 사장님 지시) — blueprint/show + execution_plan 히어로 전용.
   2026-08-03 "히어로는 순수 흰색" 결정을 이 2곳에 한해 뒤집는다. .sales-band--hero 전역은
   그대로 두고(blueprint/order 등 다른 페이지 영향 없음) 이 클래스가 붙은 곳만 오버라이드. */
.hero-navy{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-hover) 100%);
  border-bottom:none;
}
.hero-navy .sales-eyebrow{
  background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.32);
}
.hero-navy h1{ color:#fff; }
.hero-navy .sub{ color:rgba(255,255,255,.82); }
.hero-navy .sub strong{ color:#fff; }
.hero-navy .micro{ color:rgba(255,255,255,.65); }
.hero-navy .micro a{ color:#fff; text-decoration:underline; }
.hero-navy .sales-hero-media img{ border-color:rgba(255,255,255,.18); }
.sales-what li{ padding:14px 16px; }
.sales-what .chip{ background:var(--navy-soft); color:var(--navy); border:1px solid var(--navy-line); }
.sales-what .li-emph{ border-color:var(--paid); background:var(--paid-soft); }
.sales-what .li-emph .chip{ background:var(--paid); color:#fff; border-color:var(--paid); }
.sales-step .n{ background:var(--navy); color:#fff; }
.sales-punch{ border-left-color:var(--navy); color:var(--navy); }
.sales-trust{ background:var(--navy-soft); border-color:var(--navy-line); }
.sales-toc .n{ background:var(--navy-soft); color:var(--navy); }
.sales-doc-h .kls{ background:var(--navy-soft); color:var(--navy); }

/* 가격 블록 — 결제 지점이므로 유일하게 초록 */
.sales-price{ border:1px solid var(--paid); border-top:4px solid var(--paid);
  background:linear-gradient(180deg,var(--paid-soft) 0%,var(--surface) 120px); }
.sales-price .amount{ color:var(--navy); }
.sales-recta h2{ color:var(--navy); }

/* ── 11. 접근성·모션 마감 ── */
a:focus-visible,summary:focus-visible,.lp-recent-card:focus-visible{
  outline:2px solid var(--ac); outline-offset:2px;
}
.acc>summary,.view-toggle button,.lp-recent-card{ cursor:pointer; }
@media(prefers-reduced-motion:reduce){
  .axis,.check,.acc>summary,.lp-recent-card,.lp-axis,.site-header nav .nav-link{
    transition:none!important;
  }
}
@media(max-width:600px){
  .rp{ padding:20px var(--gutter) 56px; }
  .rp-main h2{ margin-top:26px; }
  .site-header .bar{ height:56px; }
  .site-header nav{ gap:8px; }
  .site-header nav .nav-link{ display:none; }   /* 좁은 화면에선 CTA 하나만 남긴다 */
}

/* ── 12. 3차 마감 — 자동 감사(12개 컨텍스트) 결과 반영 ──
   CDP로 375/768/1024/1440 × 3페이지를 돌려 측정한 뒤 남은 항목만 고쳤다.
   측정 결과: 명암비 위반 0 · 가로스크롤 0 · 이모지 0 · cursor 누락 0 · 300ms 초과 전환 0.
   남았던 것 = 터치 타깃 44px 미만, 12px 미만 라벨. 둘 다 스킬 우선순위 #2·#6. */

/* 스킬 우선순위 #2 CRITICAL: 최소 44×44px.
   btn-sm(34px)·btn-quiet(33px)·좁은 화면의 btn-secondary(41px)가 걸렸다.
   개별 보정 대신 .btn 전체에 하한을 둬서 앞으로 추가될 버튼도 자동으로 지킨다. */
.btn{ min-height:44px; }
.btn-quiet{ padding-inline:12px; }

/* 스킬 우선순위 #6: 12px 미만 금지 */
.lp-preview .cap .badge{ font-size:12px; }
.sales-doc-h .kls{ font-size:12px; }

/* ============================================================
   13 · 블루프린트 세일즈 페이지 — 후킹 개편 (ADDITIVE)
   서지우 · 2026-08-01 · 카피 = 하람 / 전환 구조 = 전환

   실측 근거(전환): 첫 구매 가능 CTA가 데스크톱 83% · 모바일 86%(5.3화면째)에 있었다.
   → 가격 블록을 후킹 3연타 직후(≈45%)로 올리고 스티키 CTA를 붙인다.
   원칙 유지: 가짜 타이머·잔여수량 없음, 블러/페이드 오버레이 없음, 이모지 없음.
   ============================================================ */

/* ── 증거 스트립 — 규모감을 숫자로 즉시 준다 (스킬: Key metrics 섹션) ── */
.sales-band--strip{
  padding-block:clamp(22px,3vw,32px);
  background:var(--navy-soft);
  border-block:1px solid var(--navy-line);
}
.sales-proof{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  margin:12px 0 0; padding:0; list-style:none;
}
@media(min-width:720px){ .sales-proof{ grid-template-columns:repeat(5,1fr); } }
.sales-proof li{
  display:flex; align-items:baseline; gap:7px;
  background:var(--surface); border:1px solid var(--navy-line);
  border-radius:var(--r); padding:13px 15px;
}
.sales-proof b{
  font:700 clamp(24px,3.4vw,30px)/1 var(--f-num);
  color:var(--navy); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.sales-proof span{ color:var(--tx-2); font-size:13.5px; font-weight:500; }
.sales-proof-note{ margin:12px 0 0; color:var(--navy); font-size:14px; font-weight:600; }

/* ── 실물 캡처 프레임 — 리포트를 '화면'이 아니라 '문서'로 보이게 ── */
.sales-shot{ margin:20px 0 0; }
.sales-shot img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--sh-2);
}
.sales-shot figcaption{ margin:9px 0 0; color:var(--mute); font-size:12.5px; }
/* 3단 축소본은 읽는 이미지가 아니라 '분량을 보는' 이미지다 */
.sales-shot--stack{ margin:0 0 clamp(22px,3vw,30px); }
.sales-shot--stack img{ box-shadow:var(--sh-2); }
.sales-shots{ display:grid; gap:16px; }

/* 목차 — 섹션명 + 안에 든 것 2행 구조 */
.sales-toc--full li{ align-items:flex-start; gap:12px; padding:13px 0; }
.sales-toc--full .n{ margin-top:1px; }
.sales-toc--full b{ display:block; font-size:14.5px; margin-bottom:3px; }
.sales-toc--full span{ display:block; color:var(--mute); font-size:12.5px; line-height:1.5; }

.sales-sub-h{
  margin:clamp(26px,4vw,36px) 0 8px; font-size:clamp(18px,2.4vw,21px);
  letter-spacing:-.02em; color:var(--navy);
}

/* ── 가격 정당화 — 앵커는 '직접 했을 때의 작업량'과 '잘못된 순서의 비용' ── */
.sales-worth{
  margin:20px auto 0; max-width:58ch;
  border-left:3px solid var(--paid); padding:2px 0 2px 18px;
}
.sales-worth p{ margin:0 0 12px; color:var(--tx-2); font-size:15px; line-height:1.72; }
.sales-worth p:last-child{ margin-bottom:0; }
.sales-worth strong{ color:var(--tx); }

.sales-faq{ margin-top:clamp(26px,4vw,36px); }

/* 가격 숫자만 예외 — 모노 자간이 콤마 주변을 벌려 "19 , 000원"으로 읽힌다.
   표(tabular-nums)는 유지하되 얼굴은 sans로 되돌린다. */
.sales-price .amount{
  font-family:var(--f-sans); letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}

/* ── 스티키 CTA — 히어로를 지나면 나타나고 최종 CTA에서 사라진다 ── */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:rgba(255,255,255,.96); backdrop-filter:saturate(1.6) blur(8px);
  border-top:1px solid var(--line-strong); box-shadow:0 -4px 16px rgba(20,23,26,.08);
}
.sticky-cta[hidden]{ display:none; }
.sticky-in{
  max-width:var(--wrap-wide); margin:0 auto;
  padding:10px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.sticky-txt{ font-size:14px; color:var(--tx-2); }
.sticky-txt b{ color:var(--tx); }
.sticky-cta .btn{ flex:0 0 auto; }
@media(max-width:520px){
  .sticky-txt b{ display:block; }
  .sticky-txt{ font-size:12.5px; line-height:1.45; }
  .sticky-cta .btn{ padding-inline:18px; }
}
/* 스티키 바에 마지막 문단이 가리지 않도록 */
.sales-band:last-of-type{ padding-bottom:clamp(72px,9vw,104px); }

/* ── 진단 결과 페이지 · 블루프린트 유도 블록 강화 ── */
.bp-peek{ margin:18px 0 4px; }
.bp-peek img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--sh-2);
}
.bp-peek figcaption{ margin:9px 0 0; color:var(--mute); font-size:12.5px; }
/* 축소본은 클릭 가능한 실물이다 — 이미지를 눌러도 세일즈 페이지로 간다 */
.bp-peek-shot{ display:block; border-radius:var(--r); }
.bp-peek-shot img{ transition:transform .18s ease, border-color .18s ease; }
.bp-peek-shot:hover img{ transform:translateY(-2px); border-color:var(--paid); }
.bp-peek-shot:focus-visible{ outline:2px solid var(--paid); outline-offset:3px; }
/* 두 번째 장은 '읽히는' 증거다. 축소본과 위계를 나눠 테두리를 죽인다 */
.bp-peek picture{ display:block; }
.bp-peek--zoom{ margin-top:18px; }
.bp-peek--zoom img{ border-color:var(--line); box-shadow:var(--sh-1); }
@media (prefers-reduced-motion:reduce){
  .bp-peek-shot img{ transition:none; }
  .bp-peek-shot:hover img{ transform:none; }
}
.bp-peek-num{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0 0; padding:0; list-style:none;
}
.bp-peek-num li{ color:var(--tx-2); font-size:13.5px; }
.bp-peek-num b{ font-family:var(--f-num); font-weight:700; color:var(--navy); font-size:15px; }

/* ============================================================
   랜딩 히어로 · 다크 (2026-08-02 · 김대표님 지시)
   히어로 밴드 하나만 뒤집는다. 페이지 나머지와 다른 화면은 라이트 그대로 —
   전체 다크모드가 아니고, 시스템 설정(prefers-color-scheme)도 따르지 않는다.
   모든 선택자를 .lp-band--hero 안으로 한정해 스타일이 밖으로 새지 않게 한다.
   명암비는 전부 다크 배경 기준으로 다시 잡았다(측정값은 각 줄 주석).
   ============================================================ */
.lp-band--hero{
  --d-ink:#f2f7fd;        /* 본문 최상위 — 대비 16.1:1 */
  --d-ink-2:#c2d2e6;      /* 보조 본문 — 대비 10.2:1 */
  --d-mute:#9badc4;       /* 캡션·단위 — 대비 6.6:1 */
  --d-line:rgba(255,255,255,.13);
  --d-line-strong:rgba(255,255,255,.28);
  --d-surface:#152a44;
  /* 2026-08-03 김대표님 지시: 좌우에 반원으로 걸린 파랑·그린 광원(radial-gradient
     2겹)을 빼고 단일 색으로 통일. 이전 그라디언트의 두 색상 정지점(#0b1a2d~#102340)
     사이 중간값을 골라 톤은 유지하면서 배경을 완전한 단색 평면으로 만든다.
     본문 대비값(16.1:1 등, 위 주석)은 이 범위 안에서 계산된 값이라 그대로 유효하다. */
  background:#0e1f37;
  border-bottom:1px solid rgba(255,255,255,.10);
  color:var(--d-ink);
}
/* 특정도: 앞선 `.lp-hero h1{color:var(--navy)}` 를 확실히 덮는다 */
.lp-band--hero .lp-hero h1{ color:#fff; }
.lp-band--hero .sub{ color:var(--d-ink-2); }
.lp-band--hero .sub b,
.lp-band--hero .sub strong{ color:#fff; }
.lp-band--hero .mute{ color:var(--d-mute); }
.lp-band--hero .lp-eyebrow{
  background:rgba(96,165,250,.15); color:#cfe1fb; border-color:rgba(147,197,253,.36);
}

/* 입력 — 어두운 면 위의 유리질. 테두리로 필드 경계를 세운다(비텍스트 3:1) */
.lp-band--hero .field{
  background:rgba(255,255,255,.07); border-color:var(--d-line-strong); color:#fff;
}
/* 원안 #8698b0 은 이 필드 바탕에서 4.33:1 로 4.5 미달 → 5.15:1 로 올렸다 */
.lp-band--hero .field::placeholder{ color:#94a6be; }
.lp-band--hero .field:focus,
.lp-band--hero .field:focus-visible{
  border-color:#7dafff; background:rgba(255,255,255,.11);
  box-shadow:0 0 0 3px rgba(125,175,255,.28);
}

/* CTA — 브랜드 파랑을 유지한다(흰 글씨 5.17:1 합격).
   다만 #2563eb 는 이 배경과 2.7:1 이라 버튼 '면'이 뭉개진다.
   색을 밝히면 흰 글씨가 4.5:1 아래로 떨어지므로, 색 대신 테두리와
   그림자로 면을 분리한다 — 글자 대비와 형태 대비를 둘 다 지키는 방법. */
.lp-band--hero .btn-primary{
  border-color:rgba(255,255,255,.26);
  box-shadow:0 8px 24px rgba(37,99,235,.42);
}
.lp-band--hero .btn-primary:hover{ background:#3b82f6; }

.lp-band--hero .badge-outline{ border-color:var(--d-line-strong); color:var(--d-ink-2); }
.lp-band--hero .badge-bad{ background:rgba(248,113,113,.18); color:#fdb4b4; }
.lp-band--hero .error{
  background:rgba(248,113,113,.12); border-color:#f87171; color:#fdb4b4;
}

/* 우측 결과 미리보기 카드 */
.lp-band--hero .lp-preview{
  background:var(--d-surface); border-color:var(--d-line-strong);
  box-shadow:0 20px 54px rgba(0,0,0,.48);
}
.lp-band--hero .lp-preview .cap{
  background:rgba(255,255,255,.07); color:#fff; border-bottom-color:var(--d-line);
}
.lp-band--hero .lp-preview .note{
  background:rgba(255,255,255,.04); border-top-color:var(--d-line); color:var(--d-mute);
}
.lp-band--hero .lp-preview .axis{ border-bottom-color:var(--d-line); }
.lp-band--hero .lp-preview .axis-name{ color:var(--d-ink); }
.lp-band--hero .lp-preview .axis-name .ico{ color:var(--d-ink-2); }
.lp-band--hero .lp-preview .axis-val,
.lp-band--hero .lp-preview .axis-flag{ color:var(--d-mute); }
/* 막대 — 라이트용 --ok(#0f766e)·--bad(#c92a2a)는 이 배경에서 거의 안 보인다.
   같은 의미를 유지한 채 밝기만 올린 값으로 바꾼다. */
.lp-band--hero .lp-preview .bar{ background:rgba(255,255,255,.14); }
.lp-band--hero .lp-preview .bar>i{ background:#2dd4bf; }
/* 병목 행 바탕 — 라이트의 --bad-soft(#fbe9e9)가 그대로 살아 있으면
   밝은 분홍 위에 밝은 글씨가 얹혀 글자가 사라진다. 어두운 붉은 면으로 바꾸고
   왼쪽에 선을 세워 '여기가 병목'이라는 신호를 색이 아닌 형태로도 남긴다. */
.lp-band--hero .lp-preview .axis.is-bottleneck,
.lp-band--hero .lp-preview .axes .axis.is-bottleneck:hover{
  background:rgba(248,113,113,.15);
  box-shadow:inset 2px 0 0 #f87171;
}
.lp-band--hero .lp-preview .axis.is-bottleneck .bar{ background:rgba(255,255,255,.2); }
.lp-band--hero .lp-preview .axis.is-bottleneck .bar>i{ background:#f87171; }
.lp-band--hero .lp-preview .axis.is-bottleneck .axis-name,
.lp-band--hero .lp-preview .axis.is-bottleneck .axis-name .ico,
.lp-band--hero .lp-preview .axis.is-bottleneck .axis-val,
.lp-band--hero .lp-preview .axis.is-bottleneck .axis-flag{ color:#fdc0c0; }

/* ── 브랜드 태그라인 · 히어로 약속 문장 (2026-08-03 · 사이트명 세일즈스캔 전환) ── */
/* 헤더: 브랜드 옆 한 줄. 세로 규칙선으로 로고와 분리한다. */
.brand-tagline{
  display:none; margin-left:12px; padding-left:12px;
  border-left:1px solid var(--line-strong);
  color:var(--mute); font-size:13px; line-height:1.3; letter-spacing:-.01em;
  white-space:nowrap;
}
@media(min-width:1080px){ .brand-tagline{ display:inline-block; } }
.site-header .bar{ justify-content:flex-start; }
.site-header nav{ margin-left:auto; }
/* 다크 히어로 위에서는 헤더가 그대로 흰색이므로 태그라인 색도 그대로 둔다. */

/* 히어로: h1 바로 아래 약속 한 줄. sub보다 크고 진하게 — 위계가 뒤집히면
   제품 설명이 먼저 읽혀 이 문장이 묻힌다. */
.lp-promise{
  margin:0 0 14px; font-size:clamp(17px,2vw,20px); line-height:1.45;
  font-weight:600; letter-spacing:-.02em; color:var(--tx);
}
.lp-band--hero .lp-promise{ color:#fff; }

/* ── 교차 밴드 색 — 히어로 톤에 맞춘다 (2026-08-03) ──
   히어로가 다크 네이비로 바뀌면서, 그 아래 회색조 교차 밴드(--panel #f8fafc)가
   색 계열이 안 맞아 붕 떠 보인다는 지적. 새 색을 만들지 않고 이미 있는
   --navy-soft(#eaf0f7 · 브랜드 네이비에서 파생된 톤)로 바꿔 톤을 맞추고,
   --panel보다 살짝 어둡게(약 14 단계) 만든다. */
.lp-band--tint{ background:var(--navy-soft); }

/* ── 밴드 순서 교체 (2026-08-17 김대표님 지시) ──
   "히어로 밑 섹션을 아래로 내리고, 아래 최근 진단을 위로 올려라. 교차 색상도 맞춰라."
   → 새 순서: 히어로(다크) → 최근 진단(tint) → [KPI 스트립 + 사이트 유형](흰)
              → 설명·미리보기(tint) → 점수보다 병목(흰) → 6축(tint) → …
   색은 클래스 교체만으로 끝났고(새 색 없음), CSS에서 손댈 건 아래 한 가지뿐이다.

   최근 진단 밴드의 하단 패딩:
   바로 아래 KPI 스트립 섹션은 padding-block:0 + margin-top:-26px 라 윗 밴드 경계에
   걸쳐 떠 있다. 예전 윗 밴드는 미리보기 카드로 끝나 여백이 넉넉했지만, 이제는
   '사례 전체 보기 →' 버튼으로 끝난다. 모바일에서 밴드 하단 패딩이 38px까지 줄어
   버튼과 스트립 사이가 12px 밖에 안 남는다 — 겹치는 26px 만큼 되돌려 준다.
   (스트립의 -26px 를 없애면 '경계에 걸친 스트립' 효과 자체가 사라지므로 그쪽은 안 건드린다.) */
.lp-band--recent-top{ padding-bottom:calc(clamp(38px,5.2vw,64px) + 26px); }

/* ============================================================
   법정 고지 · 판매자 정보 (2026-08-03 카파시)
   ------------------------------------------------------------
   본문 마크업은 funnelbrain.net 정본을 기계 변환한 것이라 손댈 수 없다.
   (텍스트 한 글자라도 바뀌면 3도메인 정본과 갈라진다)
   그래서 스타일은 전부 여기 `.legal` 스코프에서만 입힌다.
   ============================================================ */

/* ── 법정 고지 본문 ── */
.legal{ max-width:820px; }
.legal .meta{
  color:var(--mute); font-size:14px; margin:0 0 32px;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.legal h2{ font-size:clamp(17px,3.4vw,19px); margin:36px 0 10px; color:var(--tx); }
.legal h3{ font-size:15.5px; margin:22px 0 6px; color:var(--navy); }
.legal p,.legal li{ color:var(--tx-2); font-size:15px; line-height:1.85; }
.legal ol,.legal ul{ padding-left:20px; margin:10px 0; }
.legal li{ margin:6px 0; }
.legal strong{ color:var(--tx); }
.legal a{ color:var(--ac); }

.legal table{
  width:100%; border-collapse:collapse; margin:14px 0;
  font-size:14.5px; color:var(--tx-2);
}
.legal th,.legal td{
  border:1px solid var(--line); padding:10px 12px;
  text-align:left; vertical-align:top;
}
.legal th{ background:var(--panel); color:var(--tx); font-weight:600; white-space:nowrap; }
.legal .seller th{ width:34%; }

.legal .box{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px; margin:18px 0;
}
.legal .calc{
  background:var(--ac-soft); border:1px dashed var(--ac);
  border-radius:var(--r-sm); padding:14px 16px; margin:18px 0;
  font-size:15px; color:var(--tx-2);
}
@media(max-width:600px){
  .legal th{ white-space:normal; }
  .legal .seller th{ width:38%; }
}

/* ── 사이트 푸터 · 판매자 정보 ──
   전자상거래법 제13조 표시사항이라 "작지만 읽히는" 크기를 지킨다.
   --mute(#5b6675) on --panel 은 AA 통과. 더 흐리게 만들지 말 것. */
.site-footer{
  margin-top:0; padding:32px 0 40px;
  background:var(--panel); border-top:1px solid var(--line);
  color:var(--mute); font-size:13px;
}
.site-footer-inner{ max-width:var(--wrap-wide); margin:0 auto; padding:0 var(--gutter); }

/* 푸터 브랜드 줄 (지시서 §15) — 서비스명 · 한 줄 설명 · 모브랜드 순.
   모브랜드는 가장 약한 위계로 둔다. 여기서 커지면 서비스가 종속돼 보인다. */
.site-footer-brand{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.site-footer-brand-name{ font-size:15px; font-weight:700; color:var(--tx); letter-spacing:-.01em; }
.site-footer-brand-desc{ font-size:13px; color:var(--tx-2); }
.site-footer-powered{ margin-left:auto; font-size:12.5px; color:var(--mute); }
.site-footer-powered a{ color:var(--tx-2); text-decoration:none; font-weight:600; }
.site-footer-powered a:hover{ color:var(--ac); text-decoration:underline; }
@media (max-width:560px){ .site-footer-powered{ margin-left:0; } }

.site-footer-links{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:18px; }
.site-footer-links a{
  color:var(--tx-2); text-decoration:none; font-size:13.5px; font-weight:500;
}
.site-footer-links a:hover{ color:var(--ac); text-decoration:underline; }
/* 개인정보처리방침은 다른 고지보다 눈에 띄게 두는 것이 관행이다. */
.site-footer-links a.is-strong{ color:var(--tx); font-weight:700; }

.seller-info{
  margin:0; display:grid; grid-template-columns:1fr; gap:2px 24px;
  line-height:1.6;
}
.seller-info > div{ display:flex; gap:8px; }
.seller-info dt{ color:var(--mute); flex-shrink:0; }
.seller-info dt::after{ content:""; }
.seller-info dd{ margin:0; color:var(--tx-2); }
.seller-info a{ color:var(--tx-2); }
@media(min-width:720px){
  .seller-info{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .seller-info dt{ width:132px; }
}

.site-footer-copy{ margin:18px 0 0; font-size:12.5px; color:var(--mute); }

/* ============================================================
   히어로 재구성 — 검색 필드가 주인공 (2026-08-03)
   "검색 필드가 강조돼야 하는데 글씨가 많아 파묻혔다" 지적 반영.
   기존 2단 그리드(좌 텍스트/우 미리보기 카드)를 버리고 단일 축으로 세운다:
     한 줄 헤드카피 → 검색 필드(가장 무거운 요소) → 충분한 여백 → 설명 →
     신뢰 배지 → (그 아래 펼쳐지는) 결과 미리보기 카드.
   기존 .lp-hero/.lp-eyebrow/.sub/.mute/.lp-trust/.lp-preview 클래스는 그대로 둬서
   다크 히어로용 색 재정의(파일 하단 "히어로 다크" 블록)를 그대로 물려받는다.
   ============================================================ */
.lp-hero.lp-hero-search{ display:block; }
.lp-hero-search-in{ max-width:760px; margin:0 auto; text-align:center; }
.lp-hero-search .lp-eyebrow{ margin-bottom:20px; }
.lp-hero-search h1{
  font-size:clamp(21px,2.8vw,30px); line-height:1.4; letter-spacing:-.015em;
  margin:0 0 26px; word-break:keep-all; /* 모바일에서 "판매/력" 처럼 단어 중간이 잘리지 않게 */
}

/* 검색 필드 — 페이지에서 가장 무거운 요소. 다크 배경 위에 흰 카드로 확실히 띄운다. */
.lp-search{
  display:flex; gap:10px; max-width:580px; margin:0 auto;
  background:#fff; border-radius:16px; padding:8px;
  box-shadow:0 24px 56px -14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07);
}
.lp-search .field{
  flex:1; min-width:0; border:0; background:transparent; color:var(--tx);
  font-size:17px; padding:16px 18px; border-radius:10px;
}
.lp-search .field::placeholder{ color:var(--mute); }
.lp-search .field:focus,.lp-search .field:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35); background:var(--panel);
}
.lp-search .btn{ flex-shrink:0; font-size:16px; padding:16px 24px; border-radius:10px; }
@media(max-width:560px){
  .lp-search{ flex-direction:column; border-radius:14px; }
  .lp-search .btn{ width:100%; }
}
.lp-search-note{ margin:14px 0 0 !important; }

/* 필드 다음 — "충분한 여백" 뒤에 설명. .sub 기본기(다크 색 상속)에 간격·폭만 얹는다. */
.lp-hero-desc{
  margin:44px auto 0 !important; max-width:56ch; text-align:center;
}
.lp-hero-desc strong{ display:block; margin-bottom:8px; font-size:1.08em; color:#fff; }

.lp-trust--center{ justify-content:center; }

/* 그 아래 펼쳐지는 결과 미리보기 — 더 이상 그리드 2열이 아니라 독립된 쇼케이스 블록 */
.lp-preview--wide{ max-width:620px; margin:56px auto 0; text-align:left; }

@media(max-width:640px){
  .lp-hero-search h1{ margin-bottom:22px; }
  .lp-preview--wide{ margin-top:40px; }
}

/* ============================================================
   히어로 2분할 — 검색 밴드 / 설명 밴드 (2026-08-03)
   "필드쪽과 아래 설명 섹션을 분리하자. 색상도 다르게. 설명 섹션은 2컬럼으로
   아래 섹션들과 좌우를 맞추자." 검색 밴드(다크)는 검색만 한다. 설명 밴드는
   .lp-band--tint(=--navy-soft, 다크와 확실히 구분)로 바꾸고, 폭도 .lp-in
   표준(=KPI 스트립 등 아래 섹션과 동일)으로 맞춰 좌우 정렬을 일치시킨다.
   ============================================================ */
.lp-band--hero-compact{ padding-bottom:clamp(36px,5vw,56px); }

.lp-explain-grid{ display:grid; gap:clamp(32px,5vw,64px); align-items:start; }
@media(min-width:900px){
  .lp-explain-grid{ grid-template-columns:1.05fr .95fr; align-items:center; }
}
/* 2026-08-04 김대표님 지시: 모바일(1열로 쌓이는 900px 미만)에서 결과 미리보기 카드를
   설명 텍스트보다 앞에 오게 한다. "24개 항목을 왜 보는지" 설명보다 "무엇을 받는지"
   실물을 먼저 보여주는 편이 스크롤 초반 이탈을 줄인다는 판단.
   DOM 순서(마크업)는 그대로 두고 900px 미만에서만 order 로 시각 순서만 바꾼다 —
   HTML 순서를 바꾸면 900px 이상(2단 레이아웃)의 좌우 배치까지 뒤집혀 버린다. */
@media(max-width:899.98px){
  .lp-preview{ order:-1; }
}
.lp-explain-copy{ min-width:0; }
.lp-explain-copy .sub{ margin:0 0 20px; font-size:clamp(15.5px,1.6vw,17.5px); max-width:52ch; }
.lp-explain-copy .sub strong{ display:block; margin-bottom:6px; color:var(--tx); font-size:1.05em; }

/* ============================================================
   섹션 좌우 폭 통일 (2026-08-03 김대표님 지시)
   ------------------------------------------------------------
   원인: 컨테이너 폭이 두 종류로 섞여 있었다.
     랜딩   .lp-in(1040)  vs  .lp-in--narrow(760)
     세일즈 .sales-in--wide(1040) vs .sales-in(760, 기본값)
   그래서 "무엇을 보는가"(1040) 아래 "세일즈스캔이 필요한 순간"(760)이
   좌우로 140px씩 안쪽으로 들어가 섹션 끝이 어긋나 보였다.

   해법: 컨테이너 폭은 하나(1040)로 못 박아 모든 섹션의 좌우 끝을 맞춘다.
   좁은 폭이 원래 지키려던 것은 '읽기 편한 글줄 길이'였으므로, 그 역할은
   컨테이너가 아니라 문단 자체의 max-width(ch)가 대신한다. 문단은 좌측
   정렬이라 섹션 왼쪽 끝은 그대로 일치한다.
   ============================================================ */
/* 컨테이너 폭 자체는 위쪽 원본 규칙(.lp-in--narrow / .sales-in)에서 이미
   1040으로 통일했다. 여기서는 그 결과로 필요해진 '글줄 길이 방어'만 한다. */

/* 글줄 길이 방어 — 1040px 폭에서 문단이 한 줄로 길게 늘어지지 않게 */
.lp-in--narrow .lp-head .sub,
.lp-in--narrow > p,
.sales-in > p,
.sales-in .lp-head .sub,
.sales-in .sales-punch{ max-width:72ch; }

/* 가운데 정렬을 의도한 블록은 글줄 상자도 가운데로 되돌린다 */
.lp-center{ text-align:center; }
.lp-center > p{ margin-inline:auto; }
.sales-recta > p{ margin-inline:auto; }

/* 가격 카드는 넓은 컨테이너 안에서도 카드 크기를 유지한다 */
.sales-price{ max-width:560px; margin-inline:auto; }
.sales-worth{ max-width:72ch; margin-inline:auto; }

/* ── 하단 리드 폼 (2026-08-03 리드 캡처 절충안) ──
   .form(flex row)과 달리 세로로 쌓는다: URL → 이메일(선택) → 동의 2개 → 버튼.
   히어로의 .lp-search는 그대로 URL 전용으로 남긴다 — 여긴 하단 폼 전용. */
.lp-lead-form{ display:flex; flex-direction:column; gap:10px; margin:20px 0 8px; }
.lp-consent{
  display:flex; flex-direction:column; gap:8px;
  padding:12px 14px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); text-align:left;
}
.lp-consent label{
  display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--tx-2);
  cursor:pointer; line-height:1.5;
}
.lp-consent input[type="checkbox"]{ flex-shrink:0; margin-top:2px; width:16px; height:16px; }
.lp-consent .tag-req{ color:var(--ac); font-weight:600; }
.lp-consent .tag-opt{ color:var(--mute); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════
   11. 랜딩 재포지셔닝 (2026-08-03 지시서 sales-scan-landing-agent-handoff.md)
   ─────────────────────────────────────────────────────────────────────
   새로 만든 컴포넌트는 3종뿐이다. 기존 토큰(--navy, --r, --sp-*)만 쓰고
   새 색·새 간격 값을 만들지 않는다 — 디자인 시스템이 갈라지는 것이 더 비싸다.
   ═══════════════════════════════════════════════════════════════════════ */

/* (a) 강조 한 줄 — 섹션의 결론을 한 문장으로 못 박는 자리.
   따옴표 장식 대신 왼쪽 굵은 선 하나. 인용이 아니라 '주장'이기 때문이다. */
.lp-pull{
  margin:18px 0 0; padding:12px 0 12px 16px;
  border-left:3px solid var(--navy);
  font-size:17px; font-weight:600; line-height:1.5; color:var(--tx);
}

/* (b) 사이트 유형 칩 묶음 — 특정 업종을 크게 강조하지 않으려고
   전부 같은 크기·같은 색이다. 정렬만 가운데로 모은다. */
.lp-kinds{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}

/* (c) 결과 미리보기 안의 "병목 → 이유 → 첫 행동" 블록.
   ⚠ 2026-08-04 김대표님 지적: 글자가 카드 벽에 붙어 있었다.
     .lp-preview 는 padding:0 이고 안쪽 요소가 각자 좌우 18px 을 갖는 구조인데
     (.axes{padding:6px 18px 0} / .note{padding:12px 18px}) 이 블록만 그걸 안 따랐다.
     같은 카드 안에서는 같은 좌우 여백을 쓴다 — 한 곳만 어긋나도 카드가 흐트러져 보인다. */
.lp-pb{
  padding:16px 18px 18px; border-top:1px solid var(--line);
  text-align:left; background:var(--panel);
}
.lp-pb-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lp-pb-k{
  display:block; font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--mute);
}
.lp-pb-head .lp-pb-k{ display:inline-block; }
.lp-pb-name{
  display:inline-flex; align-items:center; gap:6px;
  font-size:16px; font-weight:800; color:var(--bad);
}
.lp-pb-why{
  margin:8px 0 14px; font-size:14px; line-height:1.65; color:var(--tx);
}
.lp-pb-todo{
  margin:8px 0 0; padding-left:20px;
  font-size:14px; line-height:1.75; color:var(--tx);
}
.lp-pb-todo li{ margin:0 0 4px; }
/* 번호를 본문보다 세게 — 눈이 "몇 개인지" 부터 세게 된다 */
.lp-pb-todo li::marker{ color:var(--navy); font-weight:700; }

/* ─────────────────────────────────────────────────────────────
   (d) 강조·가독성 (2026-08-04 김대표님 지시)
   원칙: 강조는 색 하나 + 굵기 하나까지만. 셋 이상 겹치면 강조가 아니라 소음이다.
   본문 강조색은 --navy(구조·권위) 하나로 통일한다. 빨강(--bad)은 '병목'
   한 가지 의미에만 남긴다 — 색이 뜻을 잃으면 다시는 회복이 안 된다.
   ───────────────────────────────────────────────────────────── */

/* 리드 문단 안의 <strong> — 지금까지 굵기만 달라 스캔이 안 됐다. 색까지 준다. */
.sub strong,
.lp-explain-copy .sub strong,
.lp-head .sub strong{ color:var(--navy); font-weight:700; }

/* 강조 한 줄 — 섹션의 결론이므로 색도 네이비로 올린다 */
.lp-pull{ color:var(--navy); }

/* 원칙 카드 제목 — 카드에서 먼저 읽혀야 하는 줄 */
.lp-principle b{ color:var(--navy); font-weight:700; }
/* 본문은 --mute(회색) 였다. 카드 안 본문까지 흐리면 읽히지 않는다 */
.lp-principle p{ color:var(--tx-2); }

/* 6축 카드 설명도 같은 이유로 한 단계 진하게 */
.lp-axis p{ color:var(--tx-2); }

/* 문제 신호 리스트 — 항목이 8개라 한 톤 키워야 훑어진다 */
.lp-signal-list li{ font-size:14.5px; line-height:1.55; }

/* FAQ 본문 — 12~14px 회색이라 가장 안 읽히던 자리 */
.acc-body p{ color:var(--tx-2); }

@media (max-width:560px){
  .lp-pull{ font-size:15.5px; padding-left:13px; }
  .lp-pb{ padding:14px 16px 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   신청 3종 UI (2026-08-04, 서지우) — 카파시가 인라인으로 낸 것을 CSS로 이관
   ══════════════════════════════════════════════════════════════════ */

/* ── [P0] hidden 전역 안전망 ────────────────────────────────────────
   UA 기본 `[hidden]{display:none}` 은 명시도 (0,1,0) 이라 **인라인 style 에 진다.**
   `<div hidden style="display:flex">` 를 쓰면 hidden 이 무력화돼 요소가 그대로 보인다.
   2026-08-04 이탈 팝업이 결과 페이지 진입 즉시 전면 노출된 사고의 원인이 이것이다.
   (같은 함정을 앞서 `.sticky-cta[hidden]` 로 한 번 개별 처방한 이력이 있다 — 전역으로 올린다.)
   ⚠️ 새 오버레이를 만들 때 display 를 인라인에 쓰지 마라. 이 규칙이 있어도 습관이 위험하다. */
[hidden]{ display:none !important; }

/* ── 이탈 팝업(마스터클래스 사전등록) ──────────────────────────────
   노출 조건은 JS 가 정한다: 세션당 1회 · 결과 페이지 전용.
   랜딩에 붙이지 마라 — 8/2 확정 기획 "랜딩 URL 미입력 시 exit-intent 금지"와 충돌한다.

   ⚠️ `display` 는 여기서 정하지 않는다. 초기 `display:none` 은 뷰의 인라인 style 에 두고
      JS 가 flex 로 토글한다. CSS 로드가 실패해도 팝업이 화면을 덮지 않게 하려는 의도적 이중화다
      (2026-08-04 상시 노출 사고 대응, 통합 테스트가 이 인라인을 못박고 있다).
      나머지 시각 스타일은 전부 이 블록에서 관리한다. */
#exit-intent{
  position:fixed; inset:0; z-index:9999;
  background:rgba(9,17,30,.62);
  align-items:center; justify-content:center; padding:20px;
}
#exit-intent .ei-panel{
  position:relative; width:100%; max-width:520px;
  background:var(--surface,#fff); border-radius:14px; padding:26px 26px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  max-height:calc(100dvh - 40px); overflow-y:auto;
}
/* 2026-08-05 (서지우 위임, 이탈팝업 3페이지 확장) — 아래 .ei-* 규칙은 원래 전부
   `#exit-intent` 로 스코프돼 있었다. 폼 마크업을 shared/_webinar_signup_form 파셜로
   뽑아 모달(#exit-intent 안)과 인라인 섹션(#webinar-inline/#consult-chat 옆 .card 안)
   양쪽에서 재사용하면서, 파셜이 항상 감싸고 나오는 `.wsf` 래퍼로 스코프를 옮겼다 —
   `#exit-intent .wsf .ei-title` 처럼 안 써도 된다, `.wsf`가 어디 있든(모달이든 카드든)
   같은 모양을 낸다. 모달 전용 껍데기(.ei-panel/.ei-close/.ei-later)만 `#exit-intent`
   스코프에 그대로 남아 있다 — 인라인 섹션엔 "닫는다"는 개념이 없다. */
.wsf .ei-title{ margin:0 0 10px; font-size:22px; line-height:1.35; }
.wsf .ei-lede{ margin:0 0 14px; }
.wsf .ei-note{ margin:2px 0 0; text-align:center; }

/* 웨비나 배지 — 2026-08-05, 로컬↔서버 불일치 병합(서지우 스펙). 무채색 eyebrow 문구는
   안 읽힌다는 피드백으로 색 배지로 바꿨다. "라이브"라는 긴급성은 색으로만 전달하지
   않는다(색약 대응) — 글자 자체가 "무료 웨비나 · 라이브". */
.wsf .ei-badge{
  display:inline-block; margin:0 0 10px; padding:4px 10px;
  background:var(--bad-soft); color:var(--bad); border-radius:var(--r-pill);
  font-size:12px; font-weight:700; letter-spacing:.01em;
}
.wsf .ei-fields{ display:grid; gap:8px; }

/* 2026-08-05 라벨 줄을 sr-only 로 숨기며 생긴 여유만큼 입력 padding 도 축소한다.
   단 8/4 확립한 44px 탭 영역 아래로는 절대 내려가지 않는다 —
   줄높이 19.2px(16px×1.2) + 상하 padding 24px + border 2px = 45.2px, 44px 상회 확인. */
.wsf .field{ padding:12px 14px; }

/* 사전등록 보너스(전자책) — 2026-08-05. 헤드라인/리드 폰트 확대(910e492)는 원복하고,
   대신 이 블록(표지+보너스 문구)만 1.5배로 새로 반영한다(사장 지시, 스코프 최종 확정).
   WIP(wip/서지우-webinar-badge-bonus-20260804, d279f231)의 1배 값을 1.5배로 조정했다 —
   배지·노출로직·CTA문구는 그 WIP에 같이 있지만 이번 스코프에 포함하지 않는다. */
.wsf .ei-bonus{
  display:flex; align-items:center; gap:18px; margin:0 0 20px;
  padding:15px 18px; background:var(--panel,#f8fafc); border:1px solid var(--line);
  border-radius:var(--r-sm,8px);
}
.wsf .ei-bonus-cover{
  flex:0 0 auto; width:66px; height:auto; border-radius:3px;
  box-shadow:0 3px 8px rgba(0,0,0,.22);
}
.wsf .ei-bonus-copy{ margin:0; font-size:19px; line-height:1.5; color:var(--tx-2); }
.wsf .ei-bonus-tag{
  display:block; font-size:16px; font-weight:700; letter-spacing:.03em;
  color:var(--paid,#047857); text-transform:uppercase; margin-bottom:2px;
}

/* 신청 완료 상태(전자책 버튼) — 폼 블록과 자리를 바꿔 낀다(JS가 hidden 토글). */
.wsf-done .btn{ margin-top:10px; }

/* 닫기 — 터치타깃 44×44 확보(WCAG 2.5.8). 보이는 글리프는 그대로 두고
   히트영역만 키운다. 색은 --mute(#5b6675, 흰 배경 5.83:1)로 AA 를 넘긴다. */
#exit-intent .ei-close{
  position:absolute; top:6px; right:6px;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:0; background:none; border-radius:var(--r-sm,8px);
  font-size:24px; line-height:1; color:var(--mute); cursor:pointer;
}
#exit-intent .ei-close:hover{ background:var(--panel,#f1f4f8); color:var(--tx); }
#exit-intent .ei-close:focus-visible{ outline:none; box-shadow:var(--sh-focus); }

/* "지금은 괜찮습니다" — 거절 경로. 눈에 띄되 1순위 액션과 경쟁하지 않는 무게.
   ⚠️ 이전 #8a97a8 은 흰 배경 2.97:1 로 본문 대비 4.5:1 에 한참 못 미쳤다.
      13px 소형 텍스트라 가장 안 읽히던 자리다 — --mute(5.83:1)로 올린다. */
#exit-intent .ei-later{
  border:0; background:none; color:var(--mute); font-size:13px;
  cursor:pointer; min-height:44px; padding:12px 6px; margin-top:2px;  /* 터치타깃 44px */
  border-radius:var(--r-sm,8px); text-decoration:underline; text-underline-offset:3px;
}
#exit-intent .ei-later:hover{ color:var(--tx-2); background:var(--panel,#f8fafc); }
#exit-intent .ei-later:focus-visible{ outline:none; box-shadow:var(--sh-focus); }

/* 동의 체크박스 줄 — 상담 폼·팝업·블루프린트가 같은 모양이어야 한다 */
/* 라벨이 체크박스를 감싸므로 클릭 타깃은 이 줄 전체다.
   한 줄로 끝나는 [선택] 동의도 24px(WCAG 2.5.8) 아래로 내려가지 않게 여유를 준다. */
.consent-row{
  display:flex; gap:8px; align-items:flex-start; font-size:13.5px;
  min-height:32px; padding:3px 0; cursor:pointer;
}
.consent-row input[type=checkbox]{ margin-top:3px; width:19px; height:19px; flex:0 0 auto; cursor:pointer; }
.consent-row input[type=checkbox]:focus-visible{ outline:none; box-shadow:var(--sh-focus); }
#exit-intent .consent-row{ font-size:13px; }

/* 배경 스크롤 잠금 — 팝업이 열린 동안 뒤 페이지가 같이 굴러가지 않게 */
body.modal-open{ overflow:hidden; }

/* ── 상담 폼(결과 페이지 보조 CTA) ─────────────────────────────── */
#consult{ margin-top:28px; }
#consult .consult-h{ margin:0 0 6px; font-size:20px; }
#consult .consult-lede{ margin:0 0 16px; }
#consult .consult-fields{ display:grid; gap:8px; max-width:520px; }

/* ── 채널톡(카카오톡 채널) 상담 CTA(#consult 대체, 2026-08-05) — .card/.btn/.mute/.small 재사용, 이 한 줄만 추가 ── */
#consult-chat{ margin-top:28px; }
.consult-chat-icon{ height:20px; width:20px; vertical-align:-4px; flex-shrink:0; }

/* ── 웨비나 신청 인라인 섹션(결과 페이지·카카오 신청 페이지 하단, 2026-08-05) —
   내용은 .wsf(위 규칙들)가 낸다. 여기는 카드 간격만 맞춘다. ── */
#webinar-inline{ margin-top:28px; }

/* 입력 라벨 — placeholder 만으로는 입력을 시작하는 순간 무엇을 적는 칸인지 사라진다.
   시각 라벨을 항상 남기고 placeholder 는 예시로만 쓴다. */
.field-label{ display:block; }
.field-label > span{ display:block; margin-bottom:4px; }
/* "(선택)" — 필수/선택 구분은 색이 아니라 글자로 전달한다(색약 대응) */
.field-label .opt{ display:inline; font-weight:400; opacity:.85; }

/* 화면에서만 숨기고 스크린리더에는 남긴다(표준 visually-hidden 기법).
   ⚠️ display:none / visibility:hidden 은 절대 쓰지 않는다 — 스크린리더도 함께 못 읽는다.
   2026-08-04 사고(placeholder만 있고 시각 라벨이 DOM에 아예 없었던 결함) 재발 방지용.
   label 태그는 DOM/접근성 트리에 그대로 남고, for/id 로 입력과 연결된다. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width:560px){
  #exit-intent{ padding:12px; }
  #exit-intent .ei-panel{ padding:22px 18px 20px; }
  #exit-intent .ei-title{ font-size:19.5px; }
}

/* ============================================================
   14 · 퍼널 구축(빌드) 페이지 — 신설 (2026-08-13, 카텍)
   사장님 지시로 신설된 3번째 세일즈 단계(blueprint/build). 사장님이 주신 참고 디자인
   (독립형 다크테마 HTML)의 구조를 이 파일의 기존 토큰·컴포넌트 문법으로 재구성했다.
   신규 추가 3종만 새로 만들고(증거 비교표·상태 체크리스트·패키지 카드), 나머지는
   기존 .sales-*, .card, .badge, .acc 를 그대로 재사용한다.
   ============================================================ */

/* ── 증거 비교표(30점→95점) ── */
.scoreproof{ padding:0; overflow:hidden; margin:22px 0; }
.scp-head{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:24px 22px; border-bottom:1px solid var(--line); background:var(--panel);
  margin:-1px -1px 0; border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.scp-score{ text-align:center; }
.scp-score b{ display:block; font:800 42px/1 var(--f-num); letter-spacing:-.02em; }
.scp-score .scp-date{ display:block; margin-top:5px; font-size:12px; color:var(--mute); }
.scp-score .badge{ justify-content:center; }
.scp-arrow{ font-size:22px; color:var(--mute); }
.scp-table{ padding:6px 22px 4px; }
.scp-row{
  display:grid; grid-template-columns:1fr 52px 26px 52px; gap:8px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.scp-row:last-child{ border:0; }
.scp-row .lbl{ color:var(--tx-2); }
.scp-row .b{ color:var(--bad); text-align:right; font-variant-numeric:tabular-nums; font-family:var(--f-num); font-size:13.5px; }
.scp-row .ar{ color:var(--mute); text-align:center; font-size:11px; }
.scp-row .a{ color:var(--good); text-align:right; font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--f-num); font-size:13.5px; }
.scp-row.scp-tot{ border-top:2px solid var(--line-strong); margin-top:4px; padding-top:13px; font-weight:700; }
.scp-row.scp-tot .lbl{ color:var(--tx); }
.scp-foot{ padding:14px 22px; background:var(--panel-2); border-top:1px solid var(--line);
  font-size:13px; color:var(--mute); margin:0 -1px -1px; border-radius:0 0 var(--r-lg) var(--r-lg); }
.scp-foot a{ color:var(--tx-2); }

/* ── 상태 체크리스트("지금 위치") — 완료/미완료 표식 ── */
.gap-list{ display:block; }
.gap-row{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.gap-row:last-child{ border:0; }
.gap-ic{ flex:0 0 26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:13px; font-weight:800; }
.gap-ic.done{ background:var(--good-soft); color:var(--good); }
.gap-ic.todo{ background:var(--bad-soft); color:var(--bad); }
.gap-row b{ display:block; font-size:15.5px; margin-bottom:2px; color:var(--tx); }
.gap-row p{ margin:0; font-size:14px; color:var(--mute); }

/* ── 패키지 카드(3단 가격) ── */
.pk-grid{ display:grid; gap:14px; margin-top:18px; }
.pk{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.pk.pk-hot{ border:1px solid var(--paid); border-top:4px solid var(--paid); box-shadow:var(--sh-2); }
.pk-h{ padding:20px 22px 16px; border-bottom:1px solid var(--line); }
.pk-tag{ margin-bottom:9px; }
.pk-h h3{ margin:0 0 5px; font-size:18px; letter-spacing:-.015em; }
.pk-h .who{ font-size:13.5px; color:var(--mute); }
.pk-price{ margin-top:12px; font:800 27px/1 var(--f-sans); letter-spacing:-.03em; color:var(--navy); }
.pk-price small{ font-size:13px; font-weight:500; color:var(--mute); margin-left:4px; }
.pk-b{ padding:16px 22px 20px; }
.pk-list{ margin:0; padding:0; list-style:none; }
.pk-list li{ font-size:14.5px; color:var(--tx-2); padding:5px 0 5px 21px; position:relative; }
.pk-list li::before{ content:'✓'; position:absolute; left:0; color:var(--good); font-weight:700; }
.pk-note{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--mute); }

/* ── 착수 슬롯 표시 ── */
.slot-row{ display:flex; gap:9px; margin:16px 0 8px; flex-wrap:wrap; }
.slot-i{ font-style:normal; width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
  font-size:12px; font-weight:700; border:1px solid var(--line); background:var(--surface); color:var(--mute); }
.slot-i.x{ background:var(--bad-soft); border-color:var(--bad); color:var(--bad); }
.slot-i.o{ background:var(--good-soft); border-color:var(--good); color:var(--good); }

/* ── 예약 CTA 2버튼 행 ── */
.cta-row{ display:flex; gap:10px; margin-top:14px; justify-content:center; }
.cta-row .btn{ flex:0 1 auto; min-width:220px; }
@media (max-width:480px){ .cta-row{ flex-direction:column; } .cta-row .btn{ width:100%; min-width:0; } }

/* ============================================================
   8/27 AI 웨비나 홍보 — 인라인 배너 + 20초 팝업 (2026-08-23, 페퍼 위임)
   대상: https://funnelbrain.net/webinar-ai/ · 컷오프는 뷰(webinar_promo_active?)가
   서버 시각으로 판정한다(app/helpers/application_helper.rb). 여기는 시각 노출 순수 시각 스타일만.
   ============================================================ */

/* ── 인라인 CTA 배너 (audits/show.html.erb, 체크 상세 직후) ── */
.wp-banner{
  margin:28px 0; padding:clamp(18px,3vw,24px);
  background:var(--ac-soft); border:1px solid var(--ac); border-left:4px solid var(--ac);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.wp-banner-badge{
  display:inline-block; margin:0 0 10px; padding:4px 10px;
  background:var(--bad-soft); color:var(--bad); border-radius:var(--r-pill);
  font-size:12px; font-weight:700; letter-spacing:.01em;
}
.wp-banner-h{ margin:0 0 6px; font-size:clamp(17px,2.4vw,20px); letter-spacing:-.01em; }
.wp-banner-sub{ margin:0 0 16px; color:var(--tx-2); font-size:14.5px; }
.wp-banner-btn{ flex:0 0 auto; }
/* 2026-08-24 — 히어로 목업 이미지(배너·팝업 공용 톤) */
.wp-banner-img{
  display:block; width:100%; height:auto;
  border-radius:var(--r,10px); margin:0 0 16px;
}

/* ── 20초 자동 팝업 (audits/show.html.erb) — #exit-intent 와 시각적으로 통일하되
   .ei-* 클래스는 `#exit-intent .ei-panel` 로 ID 스코프돼 있어 재사용이 안 되므로
   새 클래스로 둔다(이탈팝업 스타일·통합 테스트 회귀 방지). ── */
#webinar-promo-popup{
  position:fixed; inset:0; z-index:9999;
  background:rgba(9,17,30,.62);
  align-items:center; justify-content:center; padding:20px;
}
#webinar-promo-popup .wp-popup-panel{
  position:relative; width:100%; max-width:480px; text-align:center;
  background:var(--surface,#fff); border-radius:14px; padding:30px 26px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  max-height:calc(100dvh - 40px); overflow-y:auto;
}
/* 2026-08-24 — 닫기 버튼(top:6px;right:6px)과 안 겹치게 패널 패딩 안쪽에 둔다(풀블리드 아님) */
#webinar-promo-popup .wp-popup-img{
  display:block; width:100%; height:auto;
  border-radius:10px; margin:0 0 16px;
}
#webinar-promo-popup .wp-popup-badge{
  display:inline-block; margin:0 0 10px; padding:4px 10px;
  background:var(--bad-soft); color:var(--bad); border-radius:var(--r-pill);
  font-size:12px; font-weight:700; letter-spacing:.01em;
}
#webinar-promo-popup .wp-popup-title{ margin:0 0 10px; font-size:21px; line-height:1.35; }
#webinar-promo-popup .wp-popup-lede{ margin:0 0 20px; }
#webinar-promo-popup .wp-popup-btn{ width:100%; justify-content:center; }

#webinar-promo-popup .wp-popup-close{
  position:absolute; top:6px; right:6px;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:0; background:none; border-radius:var(--r-sm,8px);
  font-size:24px; line-height:1; color:var(--mute); cursor:pointer;
}
#webinar-promo-popup .wp-popup-close:hover{ background:var(--panel,#f1f4f8); color:var(--tx); }
#webinar-promo-popup .wp-popup-close:focus-visible{ outline:none; box-shadow:var(--sh-focus); }

#webinar-promo-popup .wp-popup-later{
  display:block; width:100%; border:0; background:none; color:var(--mute); font-size:13px;
  cursor:pointer; min-height:44px; padding:12px 6px; margin-top:8px;
  border-radius:var(--r-sm,8px); text-decoration:underline; text-underline-offset:3px;
}
#webinar-promo-popup .wp-popup-later:hover{ color:var(--tx-2); background:var(--panel,#f8fafc); }
#webinar-promo-popup .wp-popup-later:focus-visible{ outline:none; box-shadow:var(--sh-focus); }

@media (max-width:560px){
  #webinar-promo-popup{ padding:12px; }
  #webinar-promo-popup .wp-popup-panel{ padding:24px 18px 20px; }
  #webinar-promo-popup .wp-popup-title{ font-size:18.5px; }
}