/* ============================================================
   마케팅파워 — 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:#047857; --paid-hover:#036349; --paid-soft:#e7f6f0; --paid-mark:#059669;
  /* 시맨틱 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;
  /* 라운드 */
  --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 20px 80px;}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding:40px 20px 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);}
.site-header .bar{max-width:var(--wrap-wide);margin:0 auto;height:56px;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.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{ --lp-gutter:clamp(16px,4vw,24px); }
.lp-band{ padding-block:clamp(44px,7vw,84px); }
.lp-band--tint{ background:var(--panel); }                         /* 흰색과 교차 */
.lp-band--hero{
  background:
    radial-gradient(115% 85% at 88% -12%, var(--ac-soft) 0%, transparent 52%),
    var(--bg);
}
.lp-in{ max-width:var(--wrap-wide); margin:0 auto; padding-inline:var(--lp-gutter); }
.lp-in--narrow{ max-width:var(--wrap); }                            /* 읽기 섹션은 좁게 */

/* ── 섹션 헤더 (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; }
.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; }

/* ── 스크롤 시선 흐름: 등장 시 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); }
.sales-band--hero{ background:
    radial-gradient(120% 80% at 82% -10%, var(--ac-soft) 0%, transparent 55%), var(--bg); }
.sales-in{ max-width:var(--wrap); margin:0 auto; padding-inline:clamp(16px,4vw,24px); }
.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 */
.lp-band--hero{
  padding-block:clamp(40px,5.6vw,72px);
  background:
    radial-gradient(112% 82% at 88% -14%, var(--navy-soft) 0%, transparent 54%),
    linear-gradient(180deg,#fff 0%,var(--panel) 100%);
  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씩을 버리고 있었다. */
.rp{ max-width:1180px; margin:0 auto; padding:28px 20px 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-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); }

.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); }
.sales-band--hero{
  background:
    radial-gradient(118% 78% at 84% -12%, var(--navy-soft) 0%, transparent 56%),
    linear-gradient(180deg,#fff 0%,var(--panel) 100%);
  border-bottom:1px solid var(--line);
}
.sales-hero h1{ color:var(--navy); letter-spacing:-.035em; }
.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 16px 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 clamp(16px,4vw,24px);
  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; }