/* ============================================================
   wonder micro pages — shell.css (3 type 공용 셸)
   스티키 CTA · Trust 푸터 · reveal 모션 · 공용 컴포넌트
   ============================================================ */

/* ---- 레이아웃 셸 (360 설계 → 데스크톱 스케일 레인, 모바일 리듬 유지) ----
   ★ 2026-07-16 `.wrap` → `.wrap-sm` 개명. 구 `.wrap` 은 v2 에선 1120px, v3 에선 720px 로
   **같은 이름이 다른 폭**을 뜻했다(두 페이지 공용 셸 승격 시 정면 충돌).
   이제 폭이 이름에 박힌다: .wrap-sm = 읽기 칼럼 / .wrap-lg = 본문 와이드(1440↑ 확장). */
.wrap-sm { padding-inline: var(--pad-x); max-width: var(--w-narrow); margin-inline: auto; width: 100%; }
.wrap-lg { padding-inline: var(--pad-x); max-width: var(--w-wide); margin-inline: auto; width: 100%; }
.sec { padding-block: var(--sec-y); position: relative; }
.sec-tight { padding-block: var(--s10); }
.sec-airy { padding-block: var(--sec-y-em); }

/* ★ 2026-07-16 R2 · 본문 measure 상한 (직전 라운드가 만든 회귀 회수)
   왜 필요한가: 데스크톱 레인(컨테이너 1100→1400)을 열면서 **컨테이너만 넓히고 본문에
   max-width 를 안 걸었다**. 그래서 1920 에서 본문이 컨테이너를 그대로 따라 늘어났다:
     v3 `.lead` 1304px = 72.4자 (한글 적정 25~40자의 1.8배)
     v2 `.faq-item__a` 51.3자 · v2 `blockquote` 50.9자 · v2 `.receipt__note` 59.2자
   한 줄이 길면 눈이 다음 줄 첫 글자를 못 찾는다(saccade 실패) — 넓은 화면에서 오히려 못 읽는다.
   ★ 해법은 이미 이 코드 안에 있었다: max-width 가 걸린 것들은 **전부 정확히 30.0자**였다
     (v2 .myth__lead 510px / .calc__lead 495px). 규칙이 없던 게 아니라 적용이 불균일했던 것.
   34em = 한글 34자 상한 (적정대 상단). 본문 계열에만 건다 — 헤드라인·수치는 대상 ❌. */
.body, .lead, .sec-head .lead, .rv-head .lead { max-width: 34em; }
.sec-head .lead { margin-inline: auto; }   /* 가운데 정렬 헤드 유지 */

/* ---- 미니멀 탑바 ---- */
.topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s2) var(--s2half);
}
.topbar .wm { font-weight: 900; font-size: 20.5px; letter-spacing: 0em; color: var(--ink); }

/* ---- 워드마크 (wonder 소문자 lock · WL-018) ---- */
.wordmark { font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }

/* ---- 칩 (그라디언트 보더 액센트 — 허용 위치 ④) ---- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-half);
  padding: var(--s1) var(--s2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--w-grad-bar) border-box;
  font-weight: 700; font-size: 14px; line-height: 1.6; color: var(--ink);
  box-shadow: var(--e2);
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--w-grad-bar); flex: none;
}

/* ═══ CTA (warm_accent 단독 · 1형태 절제 · 최소 48px) ═══
   ★ 2026-07-16 R2 · press 물성 재작성 (day 가 말한 "퀄리티"의 본체)
   진단 3건:
     ① 타이밍 — `transform 0.45s`. 프리미엄 press 는 80~120ms 다. 450ms 는 누른 뒤 손가락이
        떠난 다음에도 버튼이 움직이고 있다는 뜻 = 내 입력이 아니라 애니메이션을 보고 있게 된다.
     ② `scale()` — ★텍스트가 든 요소에 scale 을 걸면 글자가 **리샘플링돼 흐려진다**.
        같은 파일 `.btn-amber--sm` 만 올바른 translateY(-1px) 를 쓰고 있었다 = 패턴이 갈렸다.
     ③ 그림자 무연동 — 버튼이 뜨는데(hover) 그림자는 고정. 게다가 transition 에 box-shadow 를
        **선언만 해두고 대응 hover 값이 없어** 발화조차 못 했다(죽은 transition).
   → 90ms translateY + elevation 한 단계. scale ❌. */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1half);
  min-height: 58px; padding: 0 var(--s3) 0 var(--s4);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700; font-size: 18px; line-height: 1.6;
  box-shadow: var(--e-amber);
  transition: transform 90ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: var(--e-amber-h); }
.btn-cta:active { transform: translateY(0); box-shadow: var(--e-amber); }
.btn-cta .arr {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.38);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-2) var(--ease-standard);
}
.btn-cta:hover .arr { transform: translateX(3px); }
.btn-cta .arr svg { width: 15px; height: 15px; }
/* ★ 앰버 CTA 는 크기가 달라도 같은 높이에 뜬다 — 아래 --lg 가 그림자를 재정의하지 않는 게 핵심.
   구: 4형제가 그림자 4종·색 2종을 각자 들고 있었다(--xl 은 hue 가 #de8a05→#f59e0b 로 튀고
   α .65 단일겹 60px blur = 싸구려 글로우). **버튼이 커졌다고 더 높이 뜨는 건 elevation 오해**다. */
.btn-cta-lg { min-height: 64px; width: 100%; font-size: 20.5px; }
/* ★ 2026-08-12 (day) 히어로 2버튼 길이 통일 — column 레이아웃이라 폭 맞춤은 100%뿐이다. */
.hero-cta-row .btn-cta { width: 100%; }
/* ★ 2026-08-12 (day) 앱 CTA 아이콘 — `.kko-mark`와 같은 자리·같은 크기(20px)로 짝을 맞춘다. */
.app-mark { width: 20px; height: 20px; flex: none; display: inline-flex; }
.app-mark svg { width: 100%; height: 100%; display: block; }

/* ---- 텍스트 링크 ----
   ★ 2026-07-16 R2 터치 타깃 44px (실측 194×29px = 손가락으로 정확히 누를 수 없었다).
   밑줄은 border-bottom → ::after 로 바꾼다: min-height 만 키우면 border 가 44px 박스
   바닥으로 내려가 **밑줄이 글자에서 떨어져 보인다**. 히트 영역만 키우고 밑줄은 글자에 붙여 둔다.
   (v2 `.link-underline` 이 같은 문제를 이미 이 방식으로 풀었다 — 두 지면의 패턴을 맞춘다.) */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 48px; position: relative;
  font-weight: 700; font-size: 16.5px; color: var(--ink);
  transition: gap var(--dur-2) var(--ease-standard);
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 11px;
  height: 1.5px; background: var(--hairline-strong);
  transition: background var(--dur-2) var(--ease-standard);
}
.link-arrow:hover { gap: var(--s1half); }
.link-arrow:hover::after { background: var(--ink-3); }
.link-arrow svg { width: 14px; height: 14px; }

/* ---- 이중 베젤 카드 (외곽 트레이 + 내부 서피스 + inset 하이라이트) ---- */
.tray {
  background: var(--bezel-tray);
  border: 1px solid var(--bezel-ring);
  border-radius: var(--r-xl);
  padding: var(--s1);
  box-shadow: var(--sh-card);
}
.tray > .surface {
  background: var(--paper);
  /* ★ R2: 트레이 padding 과 **짝**이다(안쪽 서피스의 라운드 = 바깥 라운드 - 테두리 두께).
     padding 이 7→8px(--s1)로 토큰화됐으므로 여기도 같은 토큰을 빼야 동심원이 유지된다.
     숫자를 따로 들고 있으면 한쪽만 바뀌는 순간 베젤이 어긋난다 — 짝은 짝으로 묶는다. */
  border-radius: calc(var(--r-xl) - var(--s1));
  box-shadow: var(--bezel-inset), 0 1px 2px rgba(16, 20, 37, 0.05);
  overflow: hidden;
}

/* ---- 앱 스크린샷 프레임 (native ratio 보존 · fit-contain) ---- */
.shot { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline); background: #fbfbfd; }
.shot img { width: 100%; height: auto; }

/* ---- 캡션 위계 ----
   ★ 2026-07-16 R2 유령 weight 정정: 300 → 400. Pretendard 는 300 face 를 로드하지 않아
   이 선언은 **이미 400 으로 렌더되고 있었다**(실측 잉크 폭 완전 동일 = ghost_weight_probe.py).
   선언을 실제 렌더값으로 정직하게 맞춘다 — 시각 변화 0, 유령 제거. */
.cap { font-weight: 400; font-size: var(--fs-cap); color: var(--ink-3); line-height: 1.55; }
.cap-strong { font-weight: 700; font-size: 15.5px; color: var(--ink); line-height: 1.6; }

/* ---- 타이포 공용 ---- */
.h2 { font-weight: 900; font-size: var(--fs-h2); line-height: 1.28; letter-spacing: -0.02em; }
.sub { font-weight: 700; font-size: var(--fs-sub); line-height: 1.45; }
.body { font-weight: 400; font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); }

/* ═══ Reveal 모션 (IntersectionObserver · GPU-safe) ═══
   ★ 2026-07-16 R2 재작성 — "PPT 같다"의 모션 쪽 원인.
   실측 진단:
     ① 10개 섹션이 **전부** 0.9s / translateY(26px) / 같은 이징 · distinct_trigger_times=1 ·
        spread=0ms. 즉 전 섹션이 한 덩어리로 통째 나타난다 = 슬라이드 넘김.
     ② stagger 폭 180ms vs duration 900ms = 비율 0.2 → 앞 요소가 20% 진행했을 때 다음이
        출발하니 겹쳐서 한 덩어리로 보인다. **stagger 는 duration 에 견줘야 보인다**(비율 ≥1).
     ③ `filter: blur(5px)` — 400ms 대역에선 지각되지 않는데 **매 프레임 GPU 재래스터**를 부른다.
        비용만 내고 효과는 없는 항목이라 제거.
     ④ `will-change` 가 59개 요소를 **영구 레이어 승격** — 리빌이 끝나도 해제되지 않는다.
        will-change 는 "곧 변한다"는 예고지 상태 표시가 아니다(대표적 안티패턴). 끝나면 놔줘야 한다.
   → duration 900→400ms, 거리 24→14px, stagger 는 JS 가 index 기반 70ms 로 부여(비율 1.05). */
html.js .rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-4) var(--ease-decel),
    transform var(--dur-4) var(--ease-decel);
  transition-delay: var(--d, 0s);
}
/* ★ will-change 는 **아직 안 나타난 것에만**. .in 이 붙는 순간 선택자에서 빠져 레이어가 해제된다. */
html.js .rv:not(.in) { will-change: opacity, transform; }
html.js .rv.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; transition: none; }
}

/* ---- 스티키 CTA (스크롤 50% 트리거 · 무타이머 · A13) ---- */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform var(--dur-5) var(--ease-decel);
  pointer-events: none;
}
.sticky-cta.on { transform: translateY(0); pointer-events: auto; }
/* ★ 2026-08-07 (day "CTA도 크고") 하단 고정바 = 이 페이지에서 **가장 오래 보이는 버튼**이다.
   구 50px 은 엄지 사정권 하한을 겨우 넘긴 값이라 "크다"고 읽히지 않았다 → 60px.
   폰트도 같이 올린다(16.5 → 17.5) — 버튼만 키우고 글자를 두면 빈 껍데기로 보인다. */
/* ★ 2026-08-12 (day) 고정바가 2버튼(카톡+앱)으로 나뉘며 폭이 절반이 됐다.
   실측(local_mobile_probe.py): 마감 라벨 18자(`deadlineCta_check`)가 20.5px·구 패딩에서
   320px 기준 **5줄**까지 깨졌다(140px 폭). 18자를 반쪽 폭에 1줄로 넣을 폰트 크기는
   가독 한계(8px) 밑으로 내려가야 해서 애초에 불가능 — 대신 **2줄까지는 정상 레이아웃으로
   받아들이고**, 거기 맞춰 크기·줄간격·패딩을 다시 잡는다(육안 확인 후 재조정 완료). */
.sticky-cta .btn-cta { width: 100%; min-height: 56px; font-size: 14.5px; line-height: 1.3;
  padding-left: 6px; padding-right: 6px; }

/* ★ 2026-07-22 고정 CTA = [카카오 채널 추가(보조)] + [주 CTA(flex:1)] 2단.
   카카오는 폭을 고정(auto)하고 주 CTA 가 남는 폭을 전부 먹는다 = 위계가 폭으로 드러남.
   카카오 노랑은 브랜드 식별상 solid 를 써야 알아보므로 여기서만 solid 를 허용하되,
   **면적을 작게** 유지해 앰버 CTA 와 시선 경쟁을 하지 않게 한다(면적으로 위계를 만든다).

   ══ ★★ 2026-08-07 이 위계를 뒤집는다 (day: "무조건 카카오 상담으로 꽂히게") ══════════
   위 룰(07-22)을 지우지 않고 남겨 둔다 — **틀린 룰이 아니라 전제가 사라진 룰**이라서다.

   07-22 의 전제: 주 행동 = 폼 신청(앰버). 카카오는 "폼이 부담스러운 사람이 새는 옆문".
     그 세계에선 카카오를 키우면 1순위 행동이 흐려지므로 면적을 눌러 두는 게 맞았다.
   지금(`consult_mode:'kakao'`): **폼이 꺼졌고 모든 버튼이 카카오톡으로 간다.**
     옆문이 정문이 됐다. 정문을 계속 작게 두면 위계가 아니라 그냥 오작동이다.
     → 전제가 죽었으니 룰도 죽는다. 되돌리려면 `consult_mode` 를 'form' 으로 돌리면
       `html.kakao-mode` 가 안 붙어 **위 07-22 룰이 그대로 되살아난다**(원복 경로 보존).

   ── 색이 곧 목적지 (이번에 세운 규칙) ──────────────────────────────
   카카오 노랑 = "누르면 카카오톡이 열린다"  ·  앰버 = "카카오톡이 아닌 곳으로 간다"
   그래서 kakao 모드에서 노랑이 되는 건 **카카오로 가는 CTA 전부**이고,
   앰버로 남는 건 **04 선택 섹션의 「앱으로 바로」 카드(.path-app .pt-go)** 하나뿐이다.
   그 카드만 실제로 목적지가 다르다(에어브릿지 앱 링크) — 색이 그 차이를 대신 말한다.
   ★ "노랑을 전부 깔면 되지 않나" 가 아니다. 전부 노랑이면 노랑은 **그냥 버튼 색**이 되고
     「이건 카카오톡이다」라는 뜻이 사라진다. 예외가 하나 있어야 규칙이 뜻을 갖는다.
   ※ 화면당 색 = 노랑·앰버·잉크·페이퍼·브랜드 그라디언트 = 5 이하 유지. */
.sticky-cta__row { display: flex; align-items: stretch; gap: 8px; }
.sticky-cta__row .btn-cta { flex: 1 1 auto; min-width: 0; }

/* ══ 카카오 상담 모드 — 노랑 주 버튼 ══════════════════════════════════
   `html.kakao-mode` 는 index.html 의 consult_mode 분기에서만 붙는다(= 한 곳에서 켜고 끈다). */
/* ★ 선택자에서 2종을 뺀다 — **카카오로 안 가는 버튼**이기 때문이다(색=목적지 규칙 준수):
     · `.lf-submit`        = 리드폼 제출(폼 모드 전용 · 카카오와 무관)
     · `[data-privacy-close]` = 개인정보 모달의 「확인」 = 창 닫기
   여기를 안 빼면 "노랑을 누르면 카카오톡이 열린다"가 거짓이 되고, 규칙이 그 순간 무의미해진다. */
/* ★ 2026-08-12 (day) 히어로·스티키에 앱 CTA 를 추가하며 `:not([data-app-cta])` 신설 —
   `.path-app .pt-go`(04 카드)와 동일한 「색이 곧 목적지」 규칙을 새 앱 버튼 2곳(hero/sticky)에도
   적용한다. `.path-app .pt-go` 는 애초에 `.btn-cta` 클래스가 아니라 이 선택자 자체에 안 걸렸지만,
   신규 버튼은 레이아웃(pill·flex 분할)을 그대로 물려받기 위해 `.btn-cta` 를 쓰므로 노랑 override
   에서 명시적으로 빼야 한다. */
html.kakao-mode .btn-cta:not(.lf-submit):not([data-privacy-close]):not([data-app-cta]) {
  background: #FEE500;
  color: #191600;                 /* 노랑 위 대비 — 기존 .sticky-kko 가 쓰던 값 그대로 */
  /* 앰버용 그림자(--e-amber)는 주황 틴트라 노랑 위에서 탁해 보인다 → 카카오 톤 그림자로. */
  box-shadow: 0 10px 24px -12px rgba(180, 160, 0, 0.55), 0 2px 6px -2px rgba(16, 20, 37, 0.12);
}
html.kakao-mode .btn-cta:not(.lf-submit):not([data-privacy-close]):not([data-app-cta]):hover { box-shadow: 0 16px 32px -14px rgba(180, 160, 0, 0.62), 0 2px 6px -2px rgba(16, 20, 37, 0.14); }
html.kakao-mode .btn-cta:not(.lf-submit):not([data-privacy-close]):not([data-app-cta]):active { box-shadow: 0 10px 24px -12px rgba(180, 160, 0, 0.55), 0 2px 6px -2px rgba(16, 20, 37, 0.12); }
/* 화살표 원판: 흰색 반투명(.38)은 노랑 위에서 거의 안 보인다 → 어두운 반투명으로 뒤집는다.
   (앱 버튼은 계속 앰버라 흰 반투명 화살표가 그대로 맞으므로 여기서도 제외.) */
html.kakao-mode .btn-cta:not(.lf-submit):not([data-privacy-close]):not([data-app-cta]) .arr { background: rgba(25, 22, 0, 0.14); }
/* ★★ 2026-08-07 하단 고정바에서만 **화살표를 뺀다** — 라벨 폭 확보 (실측 근거)
   이 버튼은 카카오 심볼(왼쪽 20px) + 화살표(오른쪽 30px) + gap 2벌 = **아이콘류가 50px** 을
   먹고 있었다. 그래서 360px 기기에서 라벨이 쓸 수 있는 폭이 210px 밖에 안 됐고,
   07-20 day 지정 문구 `설계사가 받던 수수료 직접 확인`(17자·210px)이 **정확히 2줄로 깨졌다.**
   ▸ 화살표를 빼는 이유 = 없어도 뜻이 안 준다. **심볼이 이미 「카카오톡이 열린다」를 말한다.**
     한 버튼에 아이콘 둘은 정보가 아니라 소음이고, 여기선 그 소음이 글자를 밀어냈다.
   ▸ 하단 고정바에만 적용한다 — 본문 CTA 는 폭이 여유롭고 화살표가 「이어진다」는 리듬을 만든다.
   실측 효과: 라벨 가용폭 **320px 기기 170→212 · 360px 210→252 · 390px 240→282**. */
html.kakao-mode .sticky-cta .btn-cta .arr { display: none; }

/* 카카오 말풍선 심볼 — 라벨 앞. 색보다 형태가 먼저 읽히는 사람을 위한 두 번째 신호.
   ★ 선택자를 `.btn-cta` 로 좁히지 말 것 — 심볼은 `.appbar-cta` 에도 붙는데(둘 다
   a[href="#app-outlink"] 라 같은 루프가 처리한다), 좁히면 그쪽 SVG 가 **크기 규칙 없는
   인라인 SVG(기본 300×150)** 로 남아 헤더를 밀어버린다. 클래스가 아니라 심볼에 건다. */
html.kakao-mode .kko-mark { width: 20px; height: 20px; flex: none; display: inline-flex; }
html.kakao-mode .kko-mark svg { width: 100%; height: 100%; display: block; }
/* 앱바 CTA = 고스트(투명) 버튼이라 노랑 채움을 쓰면 헤더가 히어로와 시선을 다툰다.
   → 채우는 대신 **테두리만 카카오 노랑** + 심볼. "여기도 카카오"라는 건 말하되 주 버튼은 안 뺏는다.
   ※ 규칙 정정: solid 노랑 = 행동 버튼 / 노랑 테두리 = 항상 떠 있는 바로가기. 둘 다 목적지는 카카오다. */
/* ══ ★★ 2026-08-07 (day) 앱바 노랑 **강등** — 2026-07-16 진단이 노랑으로 재발했다 ══════════
   초판에서 `border-color:#FEE500`(만채도)을 줬더니 한 화면에 노랑이 셋(앱바 테두리·히어로 solid·
   하단바 solid)이 됐고, **시선이 큰 글씨보다 화면 꼭대기로 먼저 갔다.**
   이건 바로 위 07-16 주석이 이미 기록한 병이다 — 「헤더·히어로·스티키 3면이 전부 앰버 솔리드라
   시선이 [헤더 CTA → 헤드라인] 순, 즉 **결론부터 읽는 역순**」. **색만 앰버→노랑으로 바뀌었을 뿐
   같은 병이다.** 그때 내린 판단(헤더는 상시 안전망이지 1순위 시선 목적지가 아니다)이 지금도 유효하다.

   → 노랑을 빼지 않고 **채도만 죽인다.** 만채도 #FEE500 → 알파 0.5.
     · 흰 배경 위에서 만채도 1.5px 테두리는 **형광펜 링**으로 읽혀 시선을 끌어당긴다.
       알파를 내리면 「따뜻한 헤어라인」이 되어 카카오 계열인 건 남되 히어로와 경쟁하지 않는다.
     · 면적은 이미 최소다(1.5px 테두리 · 채움 없음) → 건드릴 것은 채도뿐.
     · **대비 걱정 없음** — 이 테두리는 장식이고, 라벨 텍스트(--ink)가 대비를 진다.
   ★ 카카오 식별은 **히어로 solid + 하단바 solid 두 곳으로 충분하다**(첫 화면 실측 노랑 2개).
     앱바까지 셋이면 식별이 아니라 소음이다.
   ★ 되돌리려면 알파를 1 로 올리면 된다(다른 의존 없음). */
html.kakao-mode .appbar-cta { border-color: rgba(254, 229, 0, 0.5); }
html.kakao-mode .appbar-cta:hover { border-color: rgba(254, 229, 0, 0.85); background: rgba(254, 229, 0, 0.10); }
/* ★ 2026-08-07 좁은 폭에서는 앱바 심볼을 뺀다 — **320px 에서 로고와 CTA 간격이 0px** 이었다(실측).
   심볼이 20px + gap 8px = 28px 을 먹는데, 앱바에서는 그 28px 이 **로고를 밀어내는 값**이다.
   여기선 빼도 신호가 안 죽는다 — **노란 테두리가 이미 카카오를 말하고 있다**(하단바·히어로는
   solid 노랑 + 심볼로 충분히 반복된다). 400px 이상에서는 여유가 있어 그대로 둔다. */
@media (max-width: 400px) {
  html.kakao-mode .appbar-cta .kko-mark { display: none; }
}
.sticky-kko {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 0 14px; border-radius: var(--r-pill);
  background: #FEE500; color: #191600; text-decoration: none;
  font-weight: 700; font-size: 15.5px; white-space: nowrap;
}
.sticky-kko b { font-weight: 700; }
.sticky-kko .kko-ic { background: transparent; width: 18px; height: 18px; border-radius: 0; }
.sticky-kko .kko-ic svg { width: 18px; height: 18px; }
/* 360 등 좁은 폭에서는 라벨을 접고 아이콘만 — 주 CTA 문구가 2줄로 깨지는 것 방지 */
@media (max-width: 400px) {
  /* 라벨을 접으면 폭만 줄어 pill 이 계란형으로 눌린다 → 높이와 같은 폭을 줘 **정원**으로.
     정원 + 카카오 노랑 + 말풍선 = 국내 사용자가 즉시 '카톡 채널'로 읽는 형태다. */
  .sticky-kko { width: 50px; padding: 0; border-radius: 50%; }
  .sticky-kko b { display: none; }
}

/* ══ ★★ 2026-08-07 긴급 장치 한 줄 (고정바 버튼 **위**) — 로직 = urgency.js ══════════
   day: "밑에 카운트다운이라도 넣어줘" · "지금 카톡 상담 몰리고 있는 중이라 빨리 하라고"

   ▸ 크기를 **일부러 작게** 잡았다(13px). 이건 버튼이 아니라 버튼을 미는 말이다 —
     여기가 커지면 정작 눌러야 할 노랑 버튼과 시선을 다투고, day 가 지적한 "말이 너무 많아"로
     되돌아간다. **한 줄 · 한 문장 · 볼드 없음**이 이 자리의 상한이다.
   ▸ 배경·테두리를 안 준다. 칩·배지로 만들면 요소가 하나 더 생긴 것처럼 보인다(고정바가 3층으로 읽힌다).
   ▸ 색 = `--ink-2`. 빨강·주황을 안 쓴 이유 = 보험에서 경고색 재촉은 신뢰를 깎고,
     day 가 푼 「색 5개 이하」 락과 별개로 **노랑 버튼의 주목도를 잡아먹는다.** */
/* ★★ 2026-08-07 (day "카운트다운 더 세게") 위계 재조정.
   구 13px 회색 한 줄은 「꽂히게」와 정반대로 **소극적**이었다. 세 상태를 같은 위계로 올린다:
     · 문장 13 → **15px · --ink**(회색 --ink-2 에서 본문색으로) = 읽히는 문장이 된다
     · 숫자(.urg__n)만 **17.5px 900** = 버튼 글자와 같은 크기. **숫자가 주인공**이다
   ⚠️ 빨강 단독 ❌ (design-language § 2 forbidden · 보험사 위험 연상).
      대비는 **잉크 농도**로 만든다 — 색을 더 쓰지 않고 위계를 만드는 게 이 지면의 방식이다.
   ⚠️ 높이 상한 = 하단바가 화면의 13% 를 넘지 않을 것. 15px 로 올려도 한 줄이라 높이는 그대로다
      (실측으로 확인 — 107px 유지). 여기서 더 키우면 본문을 먹는다. */
.urg {
  margin: 0 0 2px;
  text-align: center;
  font-weight: 600; font-size: 16.5px; line-height: 1.6;
  color: var(--ink);
  letter-spacing: 0em;
}
/* 숫자 = 이 줄의 주인공. 버튼 라벨과 같은 크기로 올려 「지금」이 눈에 박히게. */
.urg__n {
  font-family: var(--font-head);
  font-weight: 900; font-size: 19px;
  letter-spacing: 0em;
  /* 잉크 최대 농도 + 아래 밑줄로 강조 — 색을 늘리지 않고 대비만 올린다 */
  color: var(--ink);
  box-shadow: inset 0 -0.32em 0 rgba(254, 229, 0, 0.55);   /* 카카오 노랑 형광펜(계열 유지) */
  padding: 0 1px;
}
/* ★★ 2026-08-07 **깜빡이는 상태점 제거.** 초판은 몰림 상태에 맥박치는 초록 점을 붙였다
   (「지금 벌어지는 일」이라 상태점이 붙어야 사실처럼 읽힌다는 판단).
   그런데 day 확정으로 문안이 `지금은 문의가 몰려요` → **`먼저 보낸 순서대로 답장 와요.`** 로 바뀌었다.
   문장에서 **관측 주장을 빼기로 해 놓고 그 주장을 그림으로 남기면 같은 거짓말이다** —
   맥박치는 초록 점은 「지금 실시간으로 뭔가 일어나는 중」이라는 신호이고, 우리는 카톡방 안을
   못 보므로 그걸 참이라 말할 수 없다. 문장에서 뺀 주장은 **시각 신호에서도 빼야** 한다.
   ※ 남은 재촉 장치 = 「순서」(문장) + 카운트다운 숫자. 둘 다 우리가 참이라 말할 수 있는 것이다. */
/* 스크린리더 전용 — 30초마다 바뀌는 숫자 대신 **안 바뀌는 사실**을 읽힌다.
   `display:none` 이면 스크린리더도 못 읽으므로 화면 밖으로 밀어내는 고전 패턴을 쓴다. */
.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;
}

/* ---- Trust 푸터 (저채도 공식 톤 · 300/11px · 대비 4.5:1+)
   ★ 2026-07-16: "심의필" 제거 — day 확인 "준법감시인 심의필은 받지 않아도 된다".
   .review-no 는 심의필 행 전용이었으므로 현재 미사용 (재도입 시에만 사용). ---- */
.trust-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--hairline);
  padding: var(--s6) 0 calc(var(--s10) + 72px); /* 스티키 CTA 여유 */
}
.trust-footer .lockup { display: flex; align-items: baseline; gap: var(--s1); margin-bottom: var(--s3); }
.trust-footer .lockup .wm-sm { font-weight: 900; font-size: 18.5px; letter-spacing: 0em; color: var(--ink); }
.trust-footer .lockup .co { font-weight: 400; font-size: 13px; color: var(--ink-3); }  /* ★ R2 유령 300→400 */
.trust-footer .links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-half) 0; margin-bottom: var(--s3); }
/* ★ 2026-07-16 R2 터치 타깃 — 구 실측 83×20px. 개인정보처리방침은 **눌러야 뜨는 고지**라
   "누를 수 없는 링크" = 곧 고지 미제공이다. 텍스트 위치는 그대로 두고 히트 영역만 44px. */
.trust-footer .links a {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 400; font-size: 13px; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.trust-footer .links a + a::before { content: "·"; margin: 0 var(--s1); color: var(--ink-4); }
.trust-footer .legal { display: grid; gap: var(--s-half); }
.trust-footer .legal p { font-weight: 400; font-size: var(--fs-legal); line-height: 1.6; color: var(--ink-3); }  /* ★ R2 유령 300→400 */
.trust-footer .legal .review-no { font-weight: 400; color: var(--ink-2); }
.trust-footer .divider { height: 1px; background: var(--hairline); margin: var(--s3) 0; }

/* ---- 768px+ ---- */
@media (min-width: 768px) {
  /* --pad-x 등 컨테이너 토큰의 브레이크포인트는 전부 tokens.css(SOT)에 모아둔다.
     여기서 다시 선언하면 나중에 로드되는 shell.css 가 tokens 의 1440↑ 값을 덮어써서
     데스크톱 레인이 조용히 죽는다. (동일 특이도 = 후순위 승) */
  /* ★ 2026-07-22 가운데 정렬 주체를 btn-cta → .sticky-cta__row 로 이관.
     구 규칙은 btn-cta 에 margin-inline:auto 를 걸어 가운데로 밀었는데, 카카오 버튼이 생기면서
     같은 flex 행 안에서 btn-cta 만 auto 마진을 먹어 **카카오만 화면 왼쪽 끝에 홀로 떨어졌다**.
     이제 행 전체를 하나의 레인으로 묶어 가운데 두고, btn-cta 는 그 레인 안에서만 늘어난다. */
  .sticky-cta__row { max-width: 520px; margin-inline: auto; }
  .sticky-cta .btn-cta { max-width: none; margin-inline: 0; display: flex; }
}