/* ──────────────────────────────────────────────────────────────
   biz-landing-4 — 무이자 사업자 대출 상담 (선3)

   레퍼런스: OK저축은행 대출 랜딩(okH0123L18)
   차용한 것은 화면 구조와 색 온도다.
     · 흰 바탕에 연한 블루그레이가 대각으로 깔린 배경
     · 왼쪽 큰 카피 · 그 아래 큰 글자 하나
     · 짙은 회색 푸터
   로고·상호·심의필 번호 등 실제 기관 표기는 가져오지 않았다.

   페이지는 세 덩어리다 — 히어로(왼쪽 카피 + 오른쪽 신청 폼) → 마감 안내 띠
   (.deadline) → 실시간 신청 현황(.sec-feed). 그 아래는 푸터다.
   한때 무이자의 까닭을 풀던 0원 3칸, 신청 절차, 자주 묻는 질문 세 섹션이
   더 있었으나 걷어냈다. 지금은 히어로가 페이지 전부를 짊어지고, 뒤로는
   "왜 지금이어야 하는가"(마감 띠)와 "남들도 하고 있다"(현황) 둘만 받친다.
   폼은 히어로 오른쪽 칸에 있고 별도 신청 섹션과 CTA 패널은 두지 않는다.
   큰 비주얼은 카피 아래에 둔다
   (한때 그 왼쪽에 인물 사진을 세웠으나 쓰지 않기로 해 지웠다).

   개편의 뼈대는 "한도 소구를 빼고 무이자 하나로 좁히되, 무이자가 왜
   미덥지 않은지를 페이지가 먼저 답한다"는 것이다.
     · 한도("최대 500만원")는 상단 바·제목·큰 숫자·조건 칸에서 모두 걷어냈다.
       큰 숫자(500)가 서 있던 자리는 무이자 워드마크(.big-word)가 잇는다.
     · 대상을 "사업자"에서 "소상공인 사장님"으로 좁혀 말한다.
     · 무이자의 까닭은 "이자를 사업자 지원금이 대신 부담한다"이며, 그 까닭을
       풀던 섹션이 사라진 뒤로는 상단 바와 히어로 체크 첫 줄이 도맡는다.
       운영 주체가 정부·공공기관이 아니라는 고지는 푸터가 이어받는다.
     · 마감 압박은 그 까닭에 딸린 제약(예산 한정)과 늘 붙여 쓴다. 본 자리는
       마감 띠(.deadline)이고, 상단 바와 폼 머리가 한 줄씩만 거든다.
       근거 없는 재촉은 이 페이지가 없애려던 인상을 다시 만든다.

   포인트 색은 오렌지이고, 크게 쓰는 것은 무이자 워드마크 하나뿐이다.
   보조로 남색(--navy)과 파랑(--blue)을 쓴다 —
   말풍선·배지 테두리·마감 띠 바탕은 남색, 체크 아이콘은 파랑이다.
   차콜은 상단 띠와 푸터에 남는다.
   클래스 이름은 biz-landing-1 / 2와 맞춰 두어 셋을 나란히 손볼 수 있게 했다.
─────────────────────────────────────────────────────────────── */

:root {
  --orange: #f04e23;       /* CTA · 강조 */
  --orange-hover: #d93f17;
  --orange-2: #ff7a2f;     /* 그라데이션 밝은 쪽 */
  --orange-pale: #ffe4d8;  /* 배지 · 아이콘 바탕 */
  --orange-bg: #fff3ee;

  --sky-bg: #eef2fa;       /* 히어로 대각 배경 */
  --sky-soft: #f6f8fc;

  --ink: #2b2724;          /* 제목 */
  --ink-2: #454039;        /* 본문 */
  --ink-3: #6b645c;        /* 보조 */
  --ink-4: #8b837a;        /* 흐린 글 */
  --line: #eceef2;
  --surface: #ffffff;
  --bg: #f8f9fb;
  --dark: #332e2b;         /* 상단 알림 바 · 푸터 */
  --dark-2: #221e1c;
  --red: #e02b3f;

  --navy: #0f1e3d;         /* 말풍선 바탕 · 숫자 옆 라벨 · 배지 테두리 */
  --navy-2: #16294d;       /* 남색 그라데이션 밝은 쪽 */
  --navy-line: #1f3866;    /* 남색 테두리 · 구분선 */
  --blue: #1c5bd8;         /* 체크 아이콘 */

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", system-ui, "Malgun Gothic", sans-serif;

  --r-card: 20px;
  --r-sm: 12px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.66;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── 버튼 ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease,
    box-shadow 0.15s ease;
}

.btn-orange {
  background: var(--orange);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(240, 78, 35, 0.26);
}

.btn-orange:hover {
  background: var(--orange-hover);
}

.btn-orange:active {
  transform: translateY(1px);
}

.btn-sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

/* 제출 버튼 문구가 "신용 영향X 안심 상담 신청"으로 길어져 좁은 화면에서는
   두 줄이 된다. 세로 여백이 0이면 접힌 순간 글자가 테두리에 닿으므로
   위아래 여백을 주고 줄 간격을 좁힌다. 한 줄일 때는 min-height가 이겨
   버튼 높이가 예전 그대로다. */
.btn-lg {
  min-height: 58px;
  padding: 12px 34px;
  font-size: 17px;
  line-height: 1.35;
}

.btn-block {
  display: flex;
  width: 100%;
}

:where(a, button, input, select):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ── 상단 알림 바 ───────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 44px;
  padding: 7px 16px;
  background: var(--dark);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.topbar b {
  color: #ffc94d;
  font-weight: 700;
}

.pill {
  display: inline-block;
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.pill-orange {
  background: var(--orange);
  color: #ffffff;
}

/* ── 헤더 ───────────────────────────────────────────────────── */
.gnb {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.gnb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.logo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

.logo b {
  color: var(--orange);
  font-weight: 800;
}

/* 헤더 버튼 문구가 길어져("지금 바로 신청하기 →") 줄이 접히면 헤더가
   무너진다. 접지 않고 한 줄로 두되 로고 쪽을 먼저 줄인다. */
.gnb .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.gnb .logo {
  min-width: 0;
  white-space: nowrap;
}

/* ── 히어로 ─────────────────────────────────────────────────── */
/* 레퍼런스 배경은 왼쪽 위가 희고 오른쪽 아래로 갈수록 연한 블루그레이가
   대각으로 번진다. 같은 인상을 그라데이션 두 겹으로 만든다. */
/* 예전에는 min-height: 100svh로 히어로가 첫 화면을 채우게 했다. 폼이 들어온
   뒤로는 내용만으로 이미 첫 화면이 차므로 그 규칙을 걷어냈다 — 세로로 긴
   모니터에서 히어로만 늘어나 한가운데가 텅 비는 일을 막는다. */
.hero {
  position: relative;
  padding: 40px 0 44px;
  background:
    linear-gradient(118deg, #ffffff 0%, #ffffff 46%, var(--sky-bg) 46.1%, #e7ecf7 100%),
    var(--sky-bg);
  overflow: hidden;
}

/* 왼쪽 카피 / 오른쪽 폼 카드. 폼 칸은 입력칸이 접히지 않는 340px 아래로
   내려가지 않게 minmax의 아래끝을 고정한다. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.84fr);
  align-items: center;
  gap: 36px;
}

/* 긴 단어가 들어와도 격자 칸을 밀어내지 않게 한다 */
.hero-copy {
  min-width: 0;
}

/* 카피 맨 위 한 줄. 밑줄은 text-decoration이 아니라 글자 폭에만 걸리는
   오렌지 띠다 — 글자 모양 배경(linear-gradient)을 아래쪽에 깔아 두께를
   직접 잡는다. 인라인 요소라 줄 전체가 아니라 글자 폭까지만 그려진다. */
.hero-kicker {
  font-size: clamp(15px, 3.2vw, 20px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hero-kicker b {
  display: inline;
  padding-bottom: 3px;
  font-weight: 800;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-size: 100% 5px;
  background-position: 0 100%;
}

/* 두 줄 모두 같은 크기다. 아래 줄("무이자로 지원합니다")이 폭을 지배하며
   이 줄의 폭은 글자 크기의 약 10.3배다 — 예전 줄("무이자 대출 지원!", 8.6배)
   보다 20% 길어졌으므로 아래 계수도 그만큼 낮춰 잡았다.
   두 줄 구조를 지키려면 이 줄이 카피 칸 안에 한 줄로 들어와야 하므로,
   글자 크기는 칸 폭 ÷ 10.3이 상한이다.
   (윗줄 "가게 운영 자금,"은 7.5배라 폭을 지배하지 않는다.)

   한 칸 배치(≤760px)에서는 칸 폭이 화면 폭 - 40px이라 상한이
   (vw - 40) ÷ 10.3이다 — 320px에서 27.2px, 760px에서 69.9px.
   8vw / 최대 46px로 두면 전 구간에서 5% 이상 여유를 두고 한 줄에 들어온다
   (320px에서 25.6px, 46px에 걸리는 575px에서 상한 51.9px).
   두 칸 배치(≥761px)는 칸 폭이 절반 남짓으로 줄어드니 아래 미디어 쿼리에서
   따로 잡는다. */
.hero-title {
  margin-top: 10px;
  font-size: clamp(24px, 8vw, 46px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.ht-line {
  display: block;
}

.accent {
  color: var(--orange);
}

/* 체크 리스트 세 줄 */
.hero-checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 18px;
  list-style: none;
}

.hero-checks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: clamp(13.5px, 2.1vw, 16.5px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-2);
}

/* 첫 줄의 무이자 까닭만 한 단계 진하게. 색까지 바꾸면 오렌지가 늘어나
   워드마크와 다투므로 굵기와 명도로만 세운다. */
.hero-checks b {
  font-weight: 800;
  color: var(--ink);
}

/* 파란 원 안의 흰 체크. 이미지 파일 없이 원은 배경, 체크는 ::after의
   두 변(오른쪽·아래)을 45도 돌려 만든다. */
.chk {
  position: relative;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 2px 6px rgba(28, 91, 216, 0.28);
}

.chk::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 5px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 무이자 워드마크 묶음 — 오른쪽 칸을 폼에 내주고 카피 아래로 내려온 보조
   비주얼. 예전에는 이 왼쪽에 인물 사진이 서서 둘이 나란히 놓였지만 사진을
   쓰지 않기로 해, 지금은 말풍선·워드마크·배지 한 묶음만 들어간다.
   flex는 그대로 둔다 — 나중에 사진이나 다른 요소가 옆에 붙어도 받는다. */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 50px;
  user-select: none;
}

/* 말풍선 꼬리가 워드마크 가운데를 가리켜야 하므로 안쪽은 가운데 정렬이다.
   세 조각이 한 단계씩 커진 만큼 사이 간격도 함께 벌린다 — 간격을 그대로
   두면 커진 글자끼리 붙어 한 덩어리로 뭉쳐 보인다. */
.visual-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

/* 남색 말풍선. 아래 가운데 삼각 꼬리가 워드마크를 가리킨다.
   좁은 화면에서는 한 줄로 버티지 못하는 폭이 생긴다. nowrap을 풀어
   그때만 두 줄로 접히게 두었다 — 넓은 화면에서는 그대로 한 줄이다.
   두 줄이 되면 모서리가 알약이 아니라 둥근 사각이 되어야 보기 좋으므로
   반지름은 999px 대신 높이 절반쯤인 18px로 둔다. */
/* 한 마디짜리였던 말풍선이 두 줄짜리 안내로 길어졌다. 한 줄에 다 넣으려고
   글자를 줄이면 읽히지 않으므로, 폭을 24em 남짓으로 묶어 두 줄로 앉힌다
   (HTML의 <br>은 넓은 화면에서 끊길 자리를 지정할 뿐이고, 좁아지면 그 안에서
   한 번 더 접힌다). 아래 워드마크가 훨씬 크므로 글자 크기는 한 단계 낮췄다 —
   말풍선이 커지면 무이자와 크기가 맞붙어 서열이 무너진다. */
.num-bubble {
  position: relative;
  max-width: min(100%, 24em);
  padding: 12px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
  color: #ffffff;
  font-size: clamp(13px, 1.55vw, 16.5px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-align: center;
  box-shadow: 0 8px 18px rgba(15, 30, 61, 0.24);
}

/* 꼬리 — 좌우 투명 + 위쪽 남색 테두리로 만든 아래를 향한 삼각형.
   말풍선이 커진 만큼 꼬리도 같은 비율로 키운다. */
.num-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  margin-left: -11px;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 13px solid var(--navy);
}

/* 무이자 워드마크 — 예전에 "최대 500만원"의 500이 서 있던 자리다.
   숫자를 뺀 자리를 같은 크기·같은 그라데이션으로 이어받아, 첫 화면에서 가장
   큰 글자가 계속 하나만 있게 한다(예전 500 → 지금 무이자).

   "무이자" 세 글자의 실측 폭은 글자 크기의 2.46배다(자간 -0.04em 반영).
   눈대중으로는 3.4배쯤 잡았다가 실제로 재 보니 그보다 훨씬 좁아, 그만큼
   더 키울 수 있었다. 뒤 섹션들이 빠지며 히어로가 페이지 전부를 짊어지게
   되었으므로 최대 84px에서 150px까지 올렸다.

   인물 사진이 빠진 뒤로 카피 칸을 통째로 쓰므로 상한은 칸 폭 ÷ 2.46 —
   761px 화면은 330 ÷ 2.46 = 134px, 1080px 이상은 546 ÷ 2.46 = 222px이다.
   11.5vw / 최대 150px로 두면 전 구간에서 30% 넘는 여유가 남는다
   (761px에서 88px·215px, 1304px 이상에서 150px·369px).
   옆에 사진을 다시 세우면 사진 폭(높이 ÷ 1.417)과 간격 14px을 뺀
   402px가 남으므로 1080px 구간(305px)까지는 그대로 들어온다. */
.big-word {
  font-size: clamp(72px, 11.5vw, 150px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  white-space: nowrap;
  background: linear-gradient(168deg, var(--orange-2) 0%, var(--orange) 52%, #c8380f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 두께가 있어 보이도록 오른쪽 아래로 그림자를 계단처럼 쌓는다.
     숫자(500)일 때는 획이 굵고 성겨 3px/4px가 입체로 읽혔지만, 한글은 획이
     가늘고 촘촘해 같은 값이면 글자가 겹쳐 보인다. 오프셋을 한 단계 줄인다. */
  filter: drop-shadow(2px 3px 0 rgba(150, 42, 12, 0.24))
    drop-shadow(0 10px 18px rgba(200, 56, 15, 0.2));
}

/* 흰 바탕 + 남색 테두리 배지. 가운데 세로선으로 라벨과 값을 가른다.
   말풍선·워드마크와 함께 한 단계 키웠다. 가장 넓어지는 1300px 이상에서도
   240px 안쪽이라 카피 칸 546px에 넉넉히 들어온다. */
.zero-badge {
  display: flex;
  align-items: center;
  padding: 10px 5px;
  background: var(--surface);
  border: 2px solid var(--navy);
  border-radius: 17px;
  box-shadow: 0 6px 16px rgba(15, 30, 61, 0.14);
}

.zb-k {
  padding: 0 18px;
  font-size: clamp(16px, 2.05vw, 21px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--navy);
}

.zb-v {
  padding: 0 20px;
  border-left: 2px solid var(--navy-line);
  font-size: clamp(30px, 3.5vw, 39px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
}

/* ── 조건 3칸 ───────────────────────────────────────────────── */
/* 아이콘이 왼쪽, 라벨과 값이 그 오른쪽에 위아래로 쌓인다.
   카피·폼 격자 바로 아래를 전폭으로 받친다.

   칸과 글자를 한 단계 키웠다. 다만 세 칸을 늘 가로로 놓으므로 칸 폭은
   화면 폭의 1/3에 묶여 있고, 761~1050px 구간은 그 1/3이 가장 좁다
   (761px에서 232px). 고정 크기로 키우면 이 구간에서 "복잡한 서류 없이"가
   접히므로 글자는 vw로 물려 두었다 — 1050px 위에서만 최대치가 걸린다. */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin-top: 30px;
}

.hero-stats li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  max-width: 340px;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e2e7f1;
  border-radius: 16px;
}

.stat-ico {
  flex-shrink: 0;
  font-size: clamp(21px, 2.3vw, 25px);
  line-height: 1;
}

.stat-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-k {
  font-size: clamp(12px, 1.25vw, 13.5px);
  font-weight: 600;
  color: var(--ink-4);
}

.stat-v {
  font-size: clamp(16px, 1.85vw, 20px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--ink);
}

/* .accent가 .stat-v보다 위에 있어 같은 특이도로는 .stat-v의 color가 이긴다.
   강조는 특이도를 한 단계 올린 이 규칙으로 준다. */
.stat-v.accent {
  color: var(--orange);
}

.stat-v em {
  font-size: 0.78em;
  font-style: normal;
  font-weight: 700;
  color: var(--ink-3);
}

/* ── 섹션 공통 ──────────────────────────────────────────────── */
.sec {
  padding: 68px 0;
}

/* .sec를 쓰는 섹션은 이제 실시간 현황 하나뿐이다. 위가 짙은 남색 마감 띠라
   회색을 깔아야 흰 피드 카드가 떠 보인다. */
.sec-feed {
  background: var(--bg);
}

.sec-title {
  font-size: clamp(22px, 5.6vw, 33px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -0.033em;
  color: var(--ink);
  text-align: center;
}

/* ── 신청서 (히어로 오른쪽 칸) ──────────────────────────────── */
.hero-form {
  min-width: 0;
}

/* 카드 머리 — 신청 섹션 제목이던 것을 카드 안 작은 제목으로 줄이고,
   CTA 패널에 있던 마감 압박 한 줄을 그 위에 얹는다. */
.form-head {
  margin-bottom: 16px;
  text-align: center;
}

.form-note {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.form-title {
  margin-top: 2px;
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px 24px 26px;
  box-shadow: 0 8px 28px rgba(60, 40, 20, 0.08);
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}

.field-hint {
  margin: -4px 0 9px;
  font-size: 13px;
  color: var(--ink-4);
}

.field input,
.field select {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px; /* iOS 자동 확대 방지 */
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid #e3e1dd;
  border-radius: var(--r-sm);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b837a' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

.field select:invalid {
  color: #a8a099;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 78, 35, 0.14);
}

.field input.invalid,
.field select.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(224, 43, 63, 0.12);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14.5px;
  cursor: pointer;
}

/* 해제할 수 없는 동의 칸. 눌러도 상태가 바뀌지 않으므로 손가락 커서를
   거둔다 — 누를 수 있어 보이는데 반응이 없으면 고장으로 읽힌다. */
.check-fixed,
.check-fixed input {
  cursor: default;
}

.check input {
  width: 19px;
  height: 19px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--orange);
}

.check b {
  color: var(--orange);
  font-weight: 700;
  margin-right: 3px;
}

.check.invalid span {
  color: var(--red);
}

.privacy {
  margin-bottom: 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-4);
}

.btn-orange:disabled {
  background: #cbc6c0;
  box-shadow: none;
  cursor: not-allowed;
}

/* 버튼 바로 아래 한 줄. 번호를 남기기 직전에 가장 크게 걸리는 걱정
   ("광고 전화가 쏟아지는 것 아닌가")을 그 자리에서 짚는다.
   자물쇠 아이콘이 첫 줄에만 붙고 둘째 줄은 글자에 맞춰 들어가도록
   아이콘을 띄우지 않고 그냥 인라인으로 흘린다. */
.form-trust {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  text-align: center;
}

.message {
  margin-top: 12px;
  min-height: 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-3);
}

.message.error {
  color: var(--red);
}

.form-done {
  padding: 16px 0 8px;
  text-align: center;
}

.form-done:focus {
  outline: none;
}

.done-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--orange-pale);
  color: var(--orange);
  font-size: 28px;
  font-weight: 800;
  animation: pop 0.36s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

.form-done strong {
  display: block;
  margin-top: 16px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.form-done p {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--ink-3);
}

/* ── 카드 머리 아래 한 덩어리 (히어로 오른쪽 신청 폼) ────────────
   한동안 이 자리에는 채널톡 상담 버튼 한 벌(.chat-live · .chat-auto)이 있었다.
   폼이 돌아오면서 그 규칙들은 지웠고, 이 자금이 왜 다른지를 말하는 문단만
   남겼다 — 이름도 .chat-claim에서 .form-claim으로 바꿨다.
   폼 규칙(.field · .check · .privacy · .message · .form-done 등)은 위쪽에 있다. */

/* 짙은 바탕은 받은 이미지가 그러해서 따랐고, 색만 이 페이지의 남색으로
   바꿨다 — 마감 띠·후기 섹션과 같은 계열이라 따로 놀지 않는다.
   흰 카드 안에 짙은 덩어리가 하나 있으면 시선이 여기서 한 번 멈췄다가
   바로 아래 입력칸으로 떨어진다. */
.form-claim {
  margin-bottom: 20px;
  padding: 16px 18px;
  background: linear-gradient(150deg, var(--navy-2) 0%, var(--navy) 100%);
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.82);
}

/* 노란 강조는 마감 띠(.deadline-t b)·후기 제목(.review-title b)과 같은 값이다.
   짙은 바탕이 세 군데로 늘었으므로 강조색이 어긋나면 금방 눈에 띈다. */
.form-claim b {
  font-weight: 800;
  color: #ffc94d;
}

/* ── 마감 안내 띠 ───────────────────────────────────────────── */
/* 섹션 사이에 끼우는 짙은 남색 띠. 위아래 흰/회색 섹션과 명도가 크게 벌어져
   페이지를 훑을 때 눈이 여기서 한 번 걸린다.
   왼쪽에 안내 세 줄, 오른쪽에 버튼. 좁아지면 세로로 쌓인다. */
.deadline {
  padding: 26px 0;
  background: linear-gradient(115deg, var(--navy-2) 0%, var(--navy) 100%);
  color: rgba(255, 255, 255, 0.86);
}

.deadline-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.deadline-txt {
  min-width: 0;
}

/* 라벨 앞의 주황 점. 실시간 피드의 초록 점과 같은 맥박이지만 번지는 테두리
   색이 달라 keyframes를 따로 둔다(피드 쪽 blink는 초록 halo가 박혀 있다) —
   저쪽은 "지금 접수 중", 이쪽은 "예산이 줄고 있다"는 뜻이다. */
.deadline-k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffb08a;
}

.dl-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--orange-2);
  animation: blink-warm 1.5s ease-in-out infinite;
}

@keyframes blink-warm {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 122, 47, 0.6); }
  70% { opacity: 0.85; box-shadow: 0 0 0 6px rgba(255, 122, 47, 0); }
}

.deadline-t {
  margin-top: 5px;
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: #ffffff;
}

.deadline-t b {
  font-weight: 800;
  color: #ffc94d;
}

.deadline-d {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.65;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.deadline-cta {
  flex-shrink: 0;
}

/* ── 실시간 신청 현황 ───────────────────────────────────────── */
.feed {
  margin-top: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 2px 12px rgba(60, 40, 20, 0.05);
  overflow: hidden;
}

.feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--orange-bg);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70% { opacity: 0.85; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.feed-date {
  font-weight: 600;
  color: var(--ink-4);
}

/* 보이는 창 높이를 고정해 두고 목록만 위로 굴린다.
   마지막 줄이 살짝 걸치게 두어 목록이 계속 이어진다는 것이 눈으로 읽히게 한다. */
.feed-view {
  height: 330px;
  overflow: hidden;
}

.feed-list {
  list-style: none;
}

.feed-list.is-rolling {
  animation: feed-roll 30s linear infinite;
}

.feed-list.is-rolling:hover {
  animation-play-state: paused;
}

@keyframes feed-roll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.feed-row {
  display: grid;
  grid-template-columns: 74px 46px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid #f4f2ef;
}

.fr-type {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
}

.fr-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--orange);
}

/* 나이를 빼면서 두 줄이던 칸이 업종 한 줄만 남았다. 줄 높이를 다른 칸에
   맞추고, 긴 업종("치킨전문점")이 좁은 폭에서 칸을 밀지 않게 잘라 준다. */
.fr-who {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-4);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-amt {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fr-state {
  padding: 3px 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

.fr-state.is-ok {
  background: var(--orange);
}

/* ── 이용자 후기 (가로로 끌어 보는 카드) ─────────────────────────
   짜임새는 레퍼런스에서 가져왔다 — 왼쪽 정렬 두 줄 제목, 그 아래 흰 카드가
   옆으로 늘어서고 오른쪽 끝 카드가 잘려 나간다. 잘린 카드가 "더 있다"고
   말해 주는 장치라 일부러 화면 끝까지 흘린다.
   색은 레퍼런스의 빨강을 쓰지 않았다. CTA가 주황이라 빨강을 깔면 서로
   다투고, 짙은 남색은 위쪽 마감 띠와 이미 한 가족이다. 위가 회색
   (.sec-feed)이라 짙은 바탕이 그대로 대비가 되어 눈이 여기서 한 번 걸린다. */
.sec-review {
  background: linear-gradient(
    165deg,
    var(--navy) 0%,
    var(--navy-2) 60%,
    var(--navy-line) 100%
  );
}

/* .sec-title은 검정 · 가운데 정렬이다. 짙은 바탕에서는 읽히지 않고, 옆으로
   늘어선 카드는 왼쪽에서 시작하므로 제목도 왼쪽으로 옮긴다. */
.review-title {
  color: #ffffff;
  text-align: left;
}

/* 노란 강조는 마감 띠(.deadline-t b)와 같은 값이다. 두 짙은 섹션에서
   강조색이 어긋나면 같은 페이지로 읽히지 않는다. */
.review-title b {
  font-weight: 800;
  color: #ffc94d;
}

.review-sub {
  margin-top: 4px;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.72);
}

/* ── 카드 줄 ─────────────────────────────────────────────────── */
/* 기본 스크롤바는 감춘다 — 아래 진행 막대가 그 몫을 대신하고, 짙은 바탕에
   회색 막대가 걸리면 지저분하다. 감추더라도 스크롤 자체는 살아 있어,
   ui.js가 없어도 트랙패드·휠·키보드로 넘길 수 있다. */
.rv-scroller {
  margin-top: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rv-scroller::-webkit-scrollbar {
  display: none;
}

/* 끌고 있는 동안에는 붙임(snap)을 끈다. 손을 따라와야 하는데 붙임이 계속
   끌어당기면 덜컹거린다. 글자가 잡혀 끌리는 것도 같이 막는다. */
.rv-scroller.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.rv-track {
  list-style: none;
  display: flex;
  gap: 16px;
  /* 첫 카드의 왼쪽을 제목과 맞춘다. .wrap은 최대 1080에 좌우 20이라 안쪽이
     1040이므로, 남는 폭의 절반이 곧 .wrap의 왼쪽 여백이다. 좁은 화면에서는
     계산값이 음수가 되어 max가 20px을 골라 준다 — 따로 손볼 것이 없다.
     오른쪽도 같은 값을 줘서 마지막 카드가 화면 끝에 붙지 않게 한다.
     세로 6px은 카드 그림자가 잘리지 않게 두는 자리다. */
  padding: 6px max(20px, calc((100% - 1040px) / 2));
}

.rv-card {
  position: relative;
  flex: 0 0 auto;
  width: 340px;
  padding: 24px 26px 26px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(6, 14, 30, 0.22);
  scroll-snap-align: start;
  /* 아래 따옴표가 카드 밖으로 새지 않게 자른다. 그림자는 바깥 요소라
     함께 잘리지 않는다. */
  overflow: hidden;
}

/* 카드 오른쪽 아래에 옅게 깔리는 큰 닫는 따옴표. 후기라는 성격을 글자
   없이 말한다. 반쯤 잘려 나가는 자리에 두어 장식으로만 읽히게 한다. */
.rv-card::after {
  content: "”";
  position: absolute;
  right: 14px;
  bottom: -34px;
  z-index: 0;
  font-size: 112px;
  font-weight: 800;
  line-height: 1;
  color: var(--orange-pale);
  pointer-events: none;
}

/* 따옴표(::after)는 카드의 마지막 자식이라 그냥 두면 글 위에 얹힌다.
   내용을 한 층 올려 덮이지 않게 한다. */
.rv-card > * {
  position: relative;
  z-index: 1;
}

.rv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rv-trade {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.rv-name {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-4);
}

/* 받은 사진이 이미 흐리게 처리돼 있어 여기서 더 흐리게 하지 않는다.
   대신 옅은 주황 테를 둘러 흰 카드 바탕과 경계를 만든다.
   background는 사진이 아직 안 왔을 때 동그라미가 비어 보이지 않게 둔다. */
.rv-face {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sky-soft);
  box-shadow: 0 0 0 3px var(--orange-pale);
}

/* 별은 글자(★)로 찍는다. 자간을 조금 벌려야 다섯 개가 뭉쳐 보이지 않는다. */
.rv-stars {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--orange);
}

.rv-title {
  margin-top: 8px;
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.rv-text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.72;
  letter-spacing: -0.02em;
  color: var(--ink-3);
}

/* ── 안내와 진행 막대 ────────────────────────────────────────── */
.rv-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

/* .rv-foot의 display가 UA의 [hidden]을 이기므로 따로 눌러 준다.
   카드가 다 보여 끌 것이 없을 때 ui.js가 hidden을 건다. */
.rv-foot[hidden] {
  display: none;
}

/* 가로로 끌 수 있다는 것은 눈에 보이지 않는다. 한 줄로 말해 주고 한 번
   움직이면 지운다 — 이미 알아낸 사람에게 계속 시키는 꼴이 되지 않게. */
.rv-hint {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.66);
  transition: opacity 0.3s ease;
}

.rv-scrolled .rv-hint {
  opacity: 0;
}

.rv-bar {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

/* 폭과 왼쪽 위치는 ui.js가 넣는다. 스크립트가 없으면 30%짜리 막대가
   왼쪽에 그대로 남는데, 틀린 그림은 아니라서 그냥 둔다. */
.rv-bar-in {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  border-radius: 999px;
  background: var(--orange-2);
}

/* ── 푸터 ───────────────────────────────────────────────────── */
.footer {
  padding: 30px 0 34px;
  background: #55504b;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.logo-foot {
  display: inline-block;
  color: #ffffff;
  font-size: 17px;
}

.logo-foot b {
  color: #ff8a5c;
}

/* 사업자 정보(상호·대표·등록번호 등). index.html에서 주석 상태이며
   실제 값을 채우고 주석을 풀면 로고 바로 아래에 붙는다. */
.foot-biz {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.foot-info {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.66;
}

/* 민간 서비스임을 밝히는 대목만 흰색으로 띄운다 — 이 한 줄이 사칭 의심을
   가장 크게 덜어 주는 자리라 흐린 글씨에 묻히면 안 된다. */
.foot-info b {
  font-weight: 700;
  color: #ffffff;
}

.foot-copy {
  margin-top: 12px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.48);
}

/* ── 하단 고정 CTA (모바일) ─────────────────────────────────── */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.sticky-cta.is-hidden {
  transform: translateY(130%);
  opacity: 0;
  pointer-events: none;
}

/* ── 등장 ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .done-ico { animation: none; }

  /* 굴리지 않고 첫 화면만 보여준다.
     .dl-dot(마감 띠의 주황 점)도 같이 멈춘다 — 맥박이 둘 다 남아 있으면
     움직임을 줄여 달라는 설정을 절반만 지키는 셈이다. */
  .feed-list.is-rolling,
  .live-dot,
  .dl-dot {
    animation: none;
  }
}

/* ── 넓은 화면 ──────────────────────────────────────────────── */
@media (min-width: 761px) {
  /* 두 칸 배치에서 카피 칸은 전체 폭에서 폼 칸(최소 340px)과 간격 36px을 뺀
     나머지다 — 761px에서 약 345px, 1080px 이상에서 약 546px.
     아래 줄 폭 = 글자 크기 × 10.3이므로 한 줄 상한은 각각 33.5px과 53.0px이다.
     4.2vw / 최대 50px로 두면 전 구간에서 4% 이상 여유를 두고 두 줄을
     유지한다 — 761px에서 32.0px, 1080px에서 45.4px, 1191px 이상에서 50px에
     걸리는데 이때 칸 폭은 546px로 고정이라 515px가 들어간다.
     (폼 칸을 밀지 않는 것도 이 상한을 지켜야 보장된다.) */
  .hero-title {
    font-size: clamp(30px, 4.2vw, 50px);
  }

  /* 피드도 다른 섹션과 같은 좌우 여백(.wrap)에 맞춘다.
     누가 신청했는지는 왼쪽에 붙여 두고, 남는 폭은 통째로 가운데 빈칸으로
     두어 금액과 상태를 오른쪽 끝으로 민다. */
  .feed-row {
    grid-template-columns: 116px 76px 190px minmax(0, 1fr) 68px;
    gap: 14px;
    padding: 12px 30px;
  }

  .feed-row .fr-who {
    text-align: left;
  }

  .feed-head {
    padding: 15px 30px;
  }

  .sticky-cta {
    display: none;
  }
}

/* ── 좁은 화면 ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero {
    padding: 28px 0 32px;
    /* 좁은 화면에서는 대각선이 조각처럼 보인다. 위아래 그라데이션으로 바꾼다. */
    background: linear-gradient(180deg, #ffffff 0%, var(--sky-bg) 100%);
  }

  /* 카피 아래에 숫자, 그 아래에 폼을 쌓는다 */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    text-align: center;
  }

  /* 한 칸 배치의 가운데 정렬이 폼 안까지 스며들지 않게 한다.
     카드 머리(.form-head)는 자체 규칙으로 계속 가운데다. */
  .hero-form {
    text-align: left;
  }

  /* 카피는 가운데로 몰리지만 체크 리스트는 줄끼리 왼쪽을 맞춰야 읽힌다.
     덩어리째 가운데 두고 안쪽만 왼쪽 정렬한다. */
  .hero-checks {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 14px;
    gap: 6px;
    text-align: left;
  }

  .chk {
    width: 19px;
    height: 19px;
    margin-top: 1px;
  }

  .chk::after {
    left: 6.5px;
    top: 4px;
    width: 4.5px;
    height: 8px;
  }

  /* 한 칸 배치에서는 카피가 가운데 정렬이므로 워드마크 묶음도 가운데로 모은다 */
  .hero-visual {
    justify-content: center;
    margin-top: 14px;
    gap: 10px;
  }

  /* 한 칸 배치의 칸 폭은 화면 폭 - 40px이라 상한은 (vw - 40) ÷ 2.46이다 —
     320px에서 114px, 390px에서 142px. 22vw / 최대 120px로 두면 전 구간에서
     35% 넘는 여유가 남는다(320px에서 70px·173px, 390px에서 86px·211px,
     545px 이상에서 120px·295px). 데스크톱과 같은 폭으로 키운 값이다. */
  .big-word {
    font-size: clamp(68px, 22vw, 120px);
  }

  /* 말풍선은 데스크톱 clamp의 vw 항이 좁은 화면에서 최솟값에 붙어 버려
     따로 잡는다. 안내 두 줄이 들어가는 자리라 폭을 다 쓰게 두고, 320px에서는
     세 줄까지 접힌다 — 잘리지 않으므로 문제되지 않는다. */
  .num-bubble {
    font-size: clamp(12.5px, 3.4vw, 15px);
    padding: 11px 16px;
  }

  /* 문구가 긴 제출 버튼이 좁은 화면에서 두 줄이 된다. 좌우 여백을 줄여
     접히는 폭을 늦추고, 접혀도 세로 여백 덕에 글자가 테두리에 닿지 않는다. */
  .btn-lg {
    padding: 12px 18px;
  }

  /* 배지 글자가 커진 만큼 좌우 여백만 줄여 320px에서 190px 안쪽으로 맞춘다. */
  .zb-k {
    padding: 0 14px;
  }

  .zb-v {
    padding: 0 15px;
  }

  .hero-stats {
    gap: 8px;
    margin-top: 16px;
  }

  .hero-stats li {
    gap: 8px;
    padding: 12px 9px;
    border-radius: 14px;
  }

  .stat-ico {
    font-size: 18px;
  }

  .stat-k {
    font-size: 11.5px;
  }

  /* "복잡한 서류 없이"·"당일 신청 가능"은 좁은 칸에 한 줄로 못 들어가 두 줄로
     접히는데, "99%"만 한 줄이라 그대로 두면 칸끼리 라벨 높이가 어긋난다.
     두 줄 높이를 최소값으로 잡아 세 칸의 글 덩어리를 같은 높이로 맞춘다.
     값은 어차피 접히는 자리라 라벨보다 여유가 있어 한 단계 더 키웠다. */
  .stat-v {
    font-size: 13.5px;
    line-height: 1.25;
    min-height: 2.5em;
  }

  .stat-v em {
    font-size: 0.86em;
  }

  /* 헤더 버튼이 "지금 바로 신청하기 →"로 길어졌다. 좁은 폭에서 로고와
     부딪히지 않게 로고와 버튼을 함께 줄인다. */
  .logo {
    font-size: 17px;
  }

  .gnb-inner {
    gap: 10px;
  }

  .gnb .btn-sm {
    min-height: 36px;
    padding: 0 12px;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .sec {
    padding: 48px 0;
  }

  /* 마감 띠는 세로로 쌓고 버튼을 전폭으로 깐다. 한 줄에 붙여 두면 버튼이
     문구를 눌러 두 요소가 다 작아진다. */
  .deadline {
    padding: 22px 0;
  }

  .deadline-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    text-align: center;
  }

  .deadline-k {
    justify-content: center;
  }

  .deadline-cta {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }

  /* 고정 CTA가 마지막 내용(피드·푸터)을 가리지 않게 자리를 확보한다 */
  .footer {
    padding-bottom: 104px;
  }

  .feed-row {
    grid-template-columns: 66px 42px minmax(0, 1fr) auto 40px;
    gap: 6px;
    padding: 11px 14px;
  }

  .fr-type,
  .fr-name {
    font-size: 11.5px;
  }

  .fr-who {
    font-size: 11px;
  }

  .fr-amt {
    font-size: 13px;
  }

  .form-card {
    padding: 24px 18px 22px;
  }

  /* 카드 좌우 여백이 줄어든 만큼 안쪽 덩어리도 같이 조인다.
     줄간은 데스크톱보다 살짝 좁혀 네 줄이 다섯 줄로 늘어지지 않게 한다. */
  .form-claim {
    padding: 14px 15px;
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.66;
  }

  /* 후기 카드. 화면 폭의 82%로 두면 다음 카드가 한 손가락쯤 걸쳐 보여,
     안내 문구를 읽지 않아도 옆으로 넘긴다는 것이 눈으로 읽힌다.
     .rv-track의 좌우 여백은 max()가 알아서 20px을 골라 주므로 손댈 것이 없다. */
  .rv-card {
    width: min(82vw, 320px);
    padding: 20px 20px 22px;
  }

  .rv-scroller {
    margin-top: 20px;
  }

  .rv-track {
    gap: 12px;
  }

  .rv-face {
    width: 48px;
    height: 48px;
    box-shadow: 0 0 0 2px var(--orange-pale);
  }

  .rv-trade {
    font-size: 15px;
  }

  .rv-stars {
    margin-top: 13px;
    font-size: 14px;
  }

  .rv-title {
    font-size: 16px;
  }

  .rv-text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.68;
  }

  .rv-foot {
    gap: 10px;
    margin-top: 16px;
  }

  .rv-hint {
    font-size: 12px;
  }

  .rv-card::after {
    right: 10px;
    bottom: -28px;
    font-size: 92px;
  }
}

/* ── 아주 좁은 화면 ─────────────────────────────────────────── */
/* ── 좁은 화면의 조건 3칸 ───────────────────────────────────── */
/* 세 칸을 늘 가로로 놓으므로 칸 폭이 화면 폭의 1/3에 묶인다. 라벨 중 가장
   긴 "자금 승인율"(5자)이 한 줄에 들어가야 세 칸의 높이가 맞는데, 폭이
   좁아질수록 그 여유가 먼저 사라진다. 그래서 좁은 쪽을 두 단계로 나눠
   여백·간격·아이콘·라벨을 순서대로 줄인다. 값(.stat-v)은 어차피 두 줄로
   접히는 자리라 두 단계 모두에서 라벨보다 크게 남겨 둔다.

   ≤420px — 라벨 11.5px는 이 아래에서 접힌다(375px 화면 기준 필요 61px,
   남는 폭 59px). 10.5px로 낮추면 375px에서 24% 여유가 생긴다. */
@media (max-width: 420px) {
  .hero-stats {
    gap: 6px;
  }

  .hero-stats li {
    gap: 6px;
    padding: 11px 7px;
  }

  .stat-ico {
    font-size: 16px;
  }

  .stat-k {
    font-size: 10.5px;
  }

  .stat-v {
    font-size: 13px;
  }
}

/* ≤360px — 여기서는 10.5px도 들어가지 않는다. 한 단계 더 조여
   320px에서 라벨에 60px를 남긴다(칸 90px - 여백 10 - 아이콘 16 - 간격 4). */
@media (max-width: 360px) {
  .hero-stats {
    gap: 5px;
  }

  .hero-stats li {
    gap: 4px;
    padding: 10px 5px;
  }

  .stat-ico {
    font-size: 14px;
  }

  .stat-k {
    font-size: 10px;
  }

  .stat-v {
    font-size: 12.5px;
  }
}