/* ============================================================
   22. 당근식 레이아웃 패턴
   ------------------------------------------------------------
   당근 홈페이지에서 반복되는 "구성 방식"을 옮긴 것입니다.
   색·크기가 아니라 배치가 핵심입니다.

   당근 섹션의 기본 흐름
     [주황 라벨 18px]
       ↓ 12px
     [제목 42px · 2줄로 끊음]
       ↓ 20px
     [설명 18px]
       ↓ 48px
     [콘텐츠]

   바깥 1280px → 안쪽 960px 이중 폭.
   ============================================================ */

/* ─────────── 히어로 (당근 메인 방식) ───────────
   ★ 넓은 화면이든 좁은 화면이든 위에서 아래로 한 줄입니다.
     배지 → 제목 → 사진 → 버튼.
     좌우로 나누면 글 칸이 좁아져 제목이 3~4줄로 터지고,
     화면 폭에 따라 배치가 통째로 바뀌어 관리도 어렵습니다.

   ★ 숫자를 따로 상자에 담지 않습니다. 제목 자체가 숫자입니다.
   ★ 사진은 "그래서 어떻게 되는데?"에 대한 답입니다.
     숫자(제목) → 그림(결과) → 버튼 순으로 읽히게 배치했습니다. */
.d-hero {
  /* 위쪽(주황 헤더와의 간격)만 조금 더 넓힘 */
  padding-block: var(--space-20) var(--space-16);
  text-align: center;
  background: var(--bg);
}
.d-hero__grid {
  display: flex;
  flex-direction: column;
  /* ★ stretch 를 반드시 적어둡니다. center 로 두면 자식이 폭을 안 늘려
     버튼이 글자 크기만큼만 좁아집니다. */
  align-items: stretch;
  /* 간격은 이 gap 하나로만 잡습니다. 40px ≒ 제목 52px × 0.77 (레퍼런스 비율).
     각 요소에 margin 을 또 주면 gap 과 더해져 제멋대로 벌어집니다. */
  gap: var(--space-10);
  text-align: center;
}
/* ★ display:contents — 글 묶음 상자만 없애고 자식은 그대로 둡니다.
   그래야 사진(.d-hero__phone)을 제목과 버튼 사이에 끼워 넣을 수 있습니다.
   (일반 div 라서 낭독기 문제는 없습니다) */
.d-hero__text  { display: contents; }
.d-hero__point { order: 1; align-self: center; }
.d-hero__title { order: 2; }
.d-hero__sub   { order: 3; }
.d-hero__phone { order: 4; }
/* 수치 상자 + 근거 표기를 한 덩어리로 묶은 것이 .d-hero__proof 입니다.
   그래서 순서(order)와 등장 모션은 상자(.d-hero__stats)가 아니라 이 묶음에 겁니다. */
.d-hero__proof { order: 5; }


/* 제목 아래 설명 한 줄
   ★ 34em 은 한 줄에 담기는 글자 수를 읽기 좋은 범위로 묶는 값입니다.
     이게 없으면 넓은 화면에서 한 줄이 960px 까지 늘어나
     눈이 줄 끝에서 다음 줄 첫머리를 못 찾습니다. */
.d-hero__sub {
  max-width: 34em;
  margin-inline: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-500);
}

/* ─────────── 첫 화면 등장 ───────────
   ★ 예전엔 제목·설명·수치를 0.3초간 숨겼다 띄우는 hero-in 애니메이션이 있었는데,
     하드 새로고침(Ctrl+Shift+R) 때 휴대폰 목업만 혼자 떠 '찌꺼기'처럼 보였습니다.
     (제목 등은 숨어 있고 휴대폰만 자기 애니메이션으로 먼저 나타났기 때문)
   ★ 첫 화면은 열리자마자 '한꺼번에' 보이는 게 맞아 등장 애니메이션을 뺐습니다. */

/* 수치 상자 + 근거 표기 묶음.
   ★ 상자와 표기 사이만 좁게(6px) 붙입니다. 표기는 상자에 딸린 각주라
     멀리 떨어지면 무슨 수치의 근거인지 연결이 끊깁니다. */
.d-hero__proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* 근거 표기 — 작고 여린 각주. 읽히긴 해야 하므로 --ink-500(6.6:1) 을 씁니다.
   ★ 표시광고법상 실적 수치의 산출 기간을 밝히는 문장입니다. 지우지 마세요. */
.d-hero__note {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--ink-500);
  text-align: center;
}

/* ─────────── 실적 수치 상자 ───────────
   히어로 맨 아래에 놓이는 "믿을 만한가" 칸입니다.

   ★ 두 칸을 같은 폭으로 나눕니다(1fr 1fr). 숫자 길이가 달라도 안 흔들립니다.
   ★ 당근은 그림자를 쓰지 않습니다. 그래서 연회색 면 + 얇은 선으로만 구분합니다.
   ★ 라벨은 작고 여리게, 숫자는 크고 주황으로. 눈이 숫자에 먼저 갑니다. */
.d-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  overflow: hidden;
}
/* 가운데 칸막이 — 두 번째 칸 왼쪽에만 선을 긋습니다 */
.d-hero__stat + .d-hero__stat { border-left: var(--border-w) solid var(--line); }
.d-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
}
.d-hero__stat dt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
/* 라벨 옆 아이콘 — 글자보다 살짝 크게, 색은 주황 계열로 한 톤만.
   ★ 라벨 글자와 같은 회색으로 두면 아이콘인지 얼룩인지 헷갈립니다.
   ★ 1.15em = 글자 높이에 맞춰 자동으로 커지고 작아집니다.
     px 로 박으면 모바일에서 혼자만 커 보입니다. */
.d-hero__stat dt .ico {
  width: 1.15em;
  height: 1.15em;
  color: var(--ico-1);
  flex: none;
}
.d-hero__stat dd {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
  /* 숫자가 올라가는 동안 자릿수가 흔들리지 않게 고정폭 숫자를 씁니다.
     ★ 고정폭은 쉼표(,)에도 숫자 한 칸을 통째로 줘서 "211, 450" 처럼
       띄엄띄엄해 보입니다. 자간을 −0.04em 까지 당겨 그 빈틈을 메웁니다.
     ★★ tabular-nums 를 빼지 마세요. 빼면 숫자가 오르는 동안 폭이 들썩입니다.
       (예전에 그 문제로 한 번 고쳤던 부분입니다) */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* ─────────── 사진 자리 ───────────
   ★ max-width 를 이 상자에 겁니다. 사진이 아니라 상자에 걸어야
     위에 떠 있는 표시(.d-hero__tag)가 사진 모서리에 정확히 붙습니다. */
.d-hero__phone {
  position: relative;
  width: 100%;
  /* 넓은 화면: 글 폭(960px)까지 꽉 채웁니다.
     ★ 사진이 가로로 긴 판(2.29:1)이라 폭을 960 까지 늘려도
       높이는 419px 밖에 안 됩니다. 예전 640px×16:10 (400px) 과 거의 같습니다.
       즉 "더 넓게 보이는데 히어로는 안 길어지는" 조합입니다.
       세로로 긴 사진으로 다시 바꾸면 이 값을 640px 로 되돌리세요.
       안 그러면 노트북(높이 900px)에서 상담 버튼이 첫 화면 밖으로 밀립니다. */
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ─────────── 사진 위에 떠 있는 표시 ───────────
   ★ 사진 위에 얹는 글이라 반드시 불투명한 흰 판을 깔고 그 위에 씁니다.
     반투명으로 두면 사진 밝기에 따라 대비가 자리마다 달라져 계산이 불가능합니다. */
.d-hero__tag {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-900);
  font-size: var(--fs-body);       /* 18px — 사진 위에서 멀리서도 읽히게 */
  font-weight: var(--fw-bold);
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(var(--shadow-rgb), .20);
}
.d-hero__tag .ico { font-size: 22px; }
.d-hero__tag--time {
  top: 8%;
  left: -14px;
  color: var(--ico-2);            /* 파랑 — 흰 배경 5.92:1 */
}
.d-hero__tag--money {
  bottom: 10%;
  right: -14px;
}
.d-hero__tag--money .ico { color: var(--success); --ico-bg-opacity: .45; }
/* 금액 강조 — 당근 원본 주황 그대로 */
.d-hero__tag--money b { color: var(--brand-ink); font-size: 1.15em; }
/* "예시" 두 글자 — 이 금액이 특정 거래가 아님을 밝힙니다. 지우지 마세요. */
.d-hero__tag--money small {
  margin-left: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-tag);
  background: var(--surface-alt);
  color: var(--ink-500);
  font-size: 12px;
  font-weight: var(--fw-bold);
}

/* 좁은 화면에서는 한 단계 작게. 그대로 두면 사진을 다 덮습니다. */
@media (max-width: 560px) {
  .d-hero__tag { font-size: var(--fs-sm); padding: var(--space-2) var(--space-4); }
  .d-hero__tag .ico { font-size: 18px; }
  .d-hero__tag--time  { left: var(--space-3); }
  .d-hero__tag--money { right: var(--space-3); }
}

/* ─────────── 사진 위 알림 ───────────
   한 건씩 스르르 나타났다 사라집니다. 상자가 통째로 움직이지 않습니다.

   ★★ 이름은 넣지 않습니다. 없는 사람을 지어내는 일입니다.
   ★★ 금액은 실제 상담 캡처에서 읽은 값만 씁니다. 무작위 생성 금지.
   ★ 열 장을 "같은 칸"에 겹쳐 두고 차례로 하나씩만 보이게 합니다.
     겹치는 방법으로 grid 를 씁니다. 열 장 모두 1행 1열에 넣으면
     서로 자리를 다투지 않고 정확히 포개집니다.
   ★ justify-items: center — 글자 수가 달라도 가운데가 고정됩니다.
     (예전에는 오른쪽에 붙여뒀는데, 가운데가 더 안정적으로 보입니다) */
/* ─────────── 입금 완료 알림 — 오른쪽 빈 공간에서 위로 흐르는 피드 ───────────
   ★ 사진(hero-pc2) 오른쪽 빈 주황 공간에 알림 카드가 쌓여 계속 위로 밀려 올라갑니다.
     한 건이 아래에서 올라오면 위의 것들을 밀어 올리고, 맨 위는 사라집니다.
   ★★ 스크롤로 이 구간에 들어올 때(reveal → is-visible) 재생을 시작합니다.
     안 그러면 로드되자마자 돌아서, 도착했을 땐 이미 한참 진행돼 있습니다. */
.d-hero__ticker {
  position: absolute;
  z-index: 1;
  top: calc(30% + 5px);      /* 오른쪽 빈 영역(빨간 박스)로 내림 + 5px */
  right: 22%;                /* 왼쪽으로 더 — 빨간 영역 안으로 */
  width: 260px;
  height: 150px;             /* 슬롯 3칸 */
}
.d-hero__ticker-list { position: relative; height: 100%; }
/* ★ 카드마다 개별 애니메이션 : 아래에서 '옅게 대기' → 위로 올라오며 진해지고 →
   최상단에서 가장 크고 진하게 멈춤 → opacity 로 페이드아웃(마스크 아님).
   동시에 딱 3장(위/중간/아래 슬롯)만 보입니다. */
.d-hero__ticker-item {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: 240px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(var(--shadow-rgb), .18);
  opacity: 0;
  transform: translate(-50%, 92px) scale(.85); /* 대기 위치(아래 슬롯). 실제 흐름은 키프레임이 정함 */
  animation: notif-pc 20s ease-in-out infinite; /* PC : 아래 대기 → 위로 밀려 올라가는 피드 */
  animation-play-state: paused;      /* 스크롤로 보일 때까지 멈춰 있습니다 */
}
.d-hero__ticker.is-visible .d-hero__ticker-item { animation-play-state: running; }
/* 10장을 2초 간격으로 어긋나게(음수 딜레이) → 처음부터 3칸이 채워져 있습니다. */
.d-hero__ticker-item:nth-child(1)  { animation-delay: 0s; }
.d-hero__ticker-item:nth-child(2)  { animation-delay: -2s; }
.d-hero__ticker-item:nth-child(3)  { animation-delay: -4s; }
.d-hero__ticker-item:nth-child(4)  { animation-delay: -6s; }
.d-hero__ticker-item:nth-child(5)  { animation-delay: -8s; }
.d-hero__ticker-item:nth-child(6)  { animation-delay: -10s; }
.d-hero__ticker-item:nth-child(7)  { animation-delay: -12s; }
.d-hero__ticker-item:nth-child(8)  { animation-delay: -14s; }
.d-hero__ticker-item:nth-child(9)  { animation-delay: -16s; }
.d-hero__ticker-item:nth-child(10) { animation-delay: -18s; }
/* ★ 한 자리에서 '한 개만' 페이드로 교체합니다(요청).
   ★ 위치·크기 고정 : 올라오지도, 커지지도, 아래에서 대기하지도 않습니다.
   ★ 10장이 -2초씩 어긋나 있어(각자 20초 중 10%=2초만 보임) 항상 한 개만 떠 있고
     2초마다 다음 문구로 바뀝니다. */
@keyframes notif {
  0%   { opacity: 0; }
  2%   { opacity: 1; }   /* 스르륵 등장 */
  8%   { opacity: 1; }   /* 잠깐 머무름 */
  10%  { opacity: 0; }   /* 사라지고, 같은 자리에 다음 카드가 등장 */
  100% { opacity: 0; }
}
/* ★ PC 전용 : 아래에 '옅게 대기'하는 카드가 있고, 위로 밀려 올라가며 교체됩니다(예전 피드 복원).
     동시에 3장(아래 옅음 → 중간 → 위 진하고 큼)만 보이고, 맨 위는 제자리서 페이드아웃.
     10장이 -2초씩 어긋나 항상 3칸이 채워집니다. z-index : 올라오는 카드가 위 카드를 덮음. */
@keyframes notif-pc {
  /* ★ 아래 대기 카드들은 '같은 크기'(.93). 맨 위만 강조로 조금 큽니다(1.08).
       즉 아래로 갈수록 작아지지 않고, 위·아래 두 대기칸은 동일 크기입니다. */
  0%    { opacity: 0;   transform: translate(-50%, 92px) scale(.93); z-index: 3; }
  3%    { opacity: .38; transform: translate(-50%, 92px) scale(.93); z-index: 3; }  /* 아래 슬롯 : 옅게 대기 */
  7%    { opacity: .38; transform: translate(-50%, 92px) scale(.93); z-index: 3; }
  10%   { opacity: .68; transform: translate(-50%, 54px) scale(.93); z-index: 2; }  /* 중간 슬롯 : 아래와 같은 크기 */
  17%   { opacity: .68; transform: translate(-50%, 54px) scale(.93); z-index: 2; }
  20%   { opacity: 1;   transform: translate(-50%, 0)    scale(1.08); z-index: 1; } /* 최상단 : 크고 진하게 */
  27%   { opacity: 1;   transform: translate(-50%, 0)    scale(1.08); z-index: 1; }
  31%   { opacity: 0;   transform: translate(-50%, 0)    scale(1.08); z-index: 1; } /* 제자리 페이드아웃 */
  100%  { opacity: 0;   transform: translate(-50%, 92px) scale(.93); z-index: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .d-hero__ticker-item { animation: none; opacity: 0; }
  .d-hero__ticker-item:nth-child(1) { opacity: 1; }
}
.d-hero__ticker-item .ico { flex: none; color: var(--success); font-size: 16px; --ico-bg-opacity: .4; }
.d-hero__ticker-item b {
  color: var(--brand-ink);
  font-size: 1.1em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.d-hero__ticker-item em { font-style: normal; color: var(--ink-500); font-size: .9em; }

/* 좁은 화면 : 사진 위 '중앙 상단'에 둡니다(요청).
   ★ 컨테이너 자체를 가운데로 옮기고(margin-left) 폭을 고정합니다.
     (transform 은 카드 정렬에 쓰므로 컨테이너엔 쓰지 않습니다) */
@media (max-width: 850px) {
  .d-hero__ticker {
    top: 9%;                 /* 휴대폰 위 pill 자리 — 위 잘림 방지로 조금 내림 */
    right: auto;
    left: 50%;
    width: 240px;
    margin-left: -120px;     /* 폭의 절반 = 가운데 정렬 */
    height: 48px;            /* 카드 한 장 */
    transform: none;         /* PC 의 세로중앙 이동은 모바일에선 쓰지 않음 */
  }
  /* 모바일 : 페이드 교체 + pill 폭에 맞춰 1.25배(상승 모션·큰 배율은 PC 전용) */
  .d-hero__ticker-item { transform: translate(-50%, 0) scale(1.25); animation-name: notif; }
}
@media (max-width: 560px) {
  .d-hero__ticker-item { font-size: var(--fs-xs); padding: 6px var(--space-3); max-width: 220px; }
}

/* ─────────── 히어로 사진 ───────────
   ★ 넓은 화면과 좁은 화면에 각각 다른 파일을 씁니다.
     img/hero-pc.jpg  1600×677  가로로 긴 판  → 851px 이상
     img/hero-mo.jpg   820×1025 세로로 긴 판  → 850px 이하
   ★ 두 파일 모두 원본 헤더-이미지3.jpg 에서 잘라낸 것입니다.
     세로 판은 휴대폰이 반드시 들어오도록 오른쪽을 기준으로 잘랐습니다.
   ★ 한쪽 파일만 넣어도 됩니다. 없는 쪽은 상자째 스스로 사라집니다. */

/* 바깥 상자 — 넘치는 부분을 잘라내는 역할입니다.
   사진이 확대돼도 이 둥근 네모 밖으로 나가지 못합니다. */
.d-hero__shot {
  overflow: hidden;
  border-radius: var(--radius-xl);
  /* ★ 상자 비율은 이전(가로 판) 그대로 유지합니다.
     ★ 단, 이미지를 cover(꽉 채우기)로 두면 휴대폰이 확대돼 너무 커 보여서
       contain(전체 보이기)으로 바꿨습니다(아래 .d-hero__phone-img).
       그러면 좌우에 여백이 생기는데, 그 여백을 이미지 배경과 같은 계열의
       주황→노랑 그라데이션으로 채워 이어 보이게 합니다. */
  aspect-ratio: 1600 / 677;
  background: linear-gradient(120deg, #4a34c9 0%, #8676fa 52%, #c7bcfd 100%);
}
/* 좁은 화면 사진.
   ★★ 폭이 아니라 "높이"를 첫 화면 여유에 맞춰 줄입니다.
     예전에는 정사각으로 두고 폭(max-width)을 줄였는데, 그러면 화면이 짧을 때
     사진이 좌우로 작아지면서 양옆에 흰 여백이 생겼습니다.
     (키 큰 폰은 폭을 꽉 채우고, 키 작은 폰은 여백이 크게 남는 그 증상)
   ★ 이제 폭은 항상 꽉 채우고(아래 .d-hero__phone), 높이만 줄입니다.
     높이가 줄면 정사각 사진의 위아래(빈 벽)가 잘려 나가
     여백 없이 꽉 차고 휴대폰은 그대로 보입니다.
   ★ 높이 값은 아래 .d-hero__phone 의 세로 예산과 같은 식을 씁니다. */
.d-hero__shot--mo {
  display: none;
  width: 100%;
  aspect-ratio: auto;
  /* 360 상한 / 200 하한. 200 아래로는 안 줄입니다(그보다 작으면 휴대폰이 안 보임).
     아주 짧은 기기(세로 734px 이하)에서는 수치 상자가 한 뼘 스크롤 아래로 갑니다. */
  height: min(360px, max(200px, calc(100dvh - 534px)));
}

.d-hero__phone-img {
  display: block;
  width: 100%;
  height: 100%;
  /* 새 이미지(1600×747, 2.14)는 상자 비율(2.36)과 가까워 cover 로 채워도
     위·아래만 살짝 잘리고 휴대폰이 자연스러운 크기로 들어옵니다. */
  object-fit: cover;
  object-position: center;
}
/* 휴대폰을 조금 더 크게(1.08) + 조금 왼쪽으로(-4%).
   ★ 이미지(img)에는 등장 모션이 걸려 있어, 겹치면 충돌하므로 바깥 picture 에 겁니다.
     넘치는 부분은 .d-hero__shot 의 overflow:hidden 이 잘라줍니다. */
.d-hero__shot--pc picture {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.32) translateX(-2%);   /* 1.1배 크게 + 전체 왼쪽으로 조금(요청) */
}
/* 넓은 화면 : 세로로 긴 이미지(1.62)를 가로 판(2.36)에 담으면 위·아래가 잘립니다.
   ★ object-position 세로값으로 휴대폰(세로 61%)이 판의 '세로 한가운데'에 오게 맞춥니다.
     (값을 키우면 사진이 위로 올라가 휴대폰이 내려가고, 줄이면 반대) */
.d-hero__shot--pc .d-hero__phone-img { object-position: center 84%; }

/* ─────────── 등장 모션 ───────────
   ★ 넓은 화면과 좁은 화면에 서로 다른 움직임을 줍니다.
   ★ 850px 을 넘나들면 상자가 사라졌다 다시 나타나므로
     그때마다 아래 모션이 처음부터 다시 돕니다. 따로 처리할 게 없습니다.
   ★ forwards = 끝난 자리에 그대로 멈춰 있으라는 뜻입니다. */

/* 넓은 화면 : 살짝 떠오르며 제자리 크기로 안착 (차분하게) */
.d-hero__shot--pc .d-hero__phone-img {
  animation: hero-shot-pc 1.1s cubic-bezier(.22, .8, .28, 1) both;
}
@keyframes hero-shot-pc {
  from { opacity: 0; transform: translateY(18px) scale(1.06); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* 좁은 화면 : 넓게 보여준 뒤 휴대폰 쪽으로 천천히 확대해 들어갑니다.
   ★ transform-origin 이 "확대의 중심점"입니다.
     53% 52% = 잘라둔 세로 판에서 휴대폰 화면이 있는 자리입니다.
     그래서 커지는 동안 휴대폰은 제자리에 있고 주변만 밀려납니다.
   ★ 다른 사진으로 바꾸면 이 두 값만 휴대폰 위치에 맞춰 고치면 됩니다.
   ★ 세로판(804×804)은 이미 휴대폰을 한가운데 두고 잘라둔 판입니다.
     그래서 확대의 중심점이 정확히 한가운데(50% 50%)입니다.
     예전처럼 53%/52% 같은 어중간한 값을 쓸 필요가 없어졌습니다.
   ★ 1.35 에서 멈춥니다. 이때 보이는 실제 그림이 595px 입니다.
     여기서 더 키우면 손끝과 로고 아래가 잘리고, 화면에서도 흐려집니다.
     (원본 사진 속 휴대폰 자체가 213px 밖에 안 됩니다. 이게 한계선입니다.) */
.d-hero__shot--mo .d-hero__phone-img {
  transform-origin: 50% 50%;
  animation: hero-shot-mo 2.4s cubic-bezier(.25, .7, .3, 1) both;
}
@keyframes hero-shot-mo {
  /* ★ 확대 → 축소 : 처음부터 크게(꽉 찬 상태) 나타나 최종 크기로 살짝 줄어듭니다.
       예전처럼 작게 시작하면 이미지가 상자를 못 채워 가장자리가 잘려 보였습니다. */
  from { opacity: 0; transform: scale(2.3); }
  22%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1.9); }
}

/* 움직임을 줄여달라고 설정한 분에게는 움직임 없이 결과 화면만 보여줍니다.
   ★ 좁은 화면은 "확대된 상태"가 결과이므로 크기는 그대로 유지합니다.
     여기서 scale 을 빼면 그분들만 휴대폰이 작게 보입니다. */
@media (prefers-reduced-motion: reduce) {
  .d-hero__shot--pc .d-hero__phone-img { animation: none; }
  .d-hero__shot--mo .d-hero__phone-img { animation: none; transform: scale(1.9); }
}

@media (max-width: 850px) {
  .d-hero__shot--pc { display: none; }
  .d-hero__shot--mo { display: block; position: relative; }

  /* ★ 휴대폰 사진을 상자 '아래쪽'에 붙입니다(하단 정렬).
       그러면 위쪽에 44px 빈자리가 생기고, 그 자리로 입금완료 알림이 떠오릅니다.
       (요청: "위쪽에 조금 여유있게 그래야 입금완료가 올라가지") */
  .d-hero__shot--mo > picture {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(100% - 44px);
    /* ★ 새 이미지(1.62)는 사진칸과 세로비율이 거의 같아 좌우 잘림이 없습니다.
         그래서 object-position 대신 사진 자체를 오른쪽으로 11% 밀어
         가운데-왼쪽(가로 38.6%)에 있는 휴대폰을 화면 정중앙으로 옮깁니다.
         (밀린 왼쪽 빈자리는 img 확대(1.2배)가 넘어와 덮고, 상자 배경도 같은 주황) */
    transform: translateX(18.5%) translateY(-9.8%);
  }
  .d-hero__shot--mo .d-hero__phone-img {
    object-position: center;
    /* ★ 확대 기준점을 '휴대폰 중심'(가로38.6%·세로60.5%)에 둡니다.
         그래야 크게 키워도 휴대폰이 흐트러지지 않고 그 자리서 커집니다. */
    transform-origin: 38.6% 60.5%;
  }
}
/* 이미지가 뜨면 그려둔 목업은 숨깁니다 (위 img 의 onload 가 has-img 를 붙입니다) */
.d-hero__phone.has-img .d-phone { display: none; }

/* 사진이 뜨면 아래 표기도 같이 숨깁니다.
   그 표기는 "그린 목업"용이라 사진에는 해당되지 않습니다. */
.d-hero__phone.has-img .d-phone__note--drawn { display: none; }
.d-phone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  border-radius: 28px;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), .14);
}
/* 위쪽 상태바 자리 — 기기처럼 보이게 하는 짧은 막대 */
.d-phone__bar {
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--surface);
}
.d-phone__bar::after {
  content: "";
  width: 92px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  opacity: .18;
}
.d-phone__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-w) solid var(--line);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
}
.d-phone__avatar {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--kakao-bg);
  color: var(--kakao-ink);
  font-size: 16px;
}
.d-phone__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-alt);
  text-align: left;
}
.d-phone__msg {
  max-width: 86%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}
.d-phone__msg--me {
  align-self: flex-end;
  background: var(--kakao-bg);
  color: var(--kakao-ink);
  border-bottom-right-radius: var(--radius-tag);
}
.d-phone__msg--them {
  align-self: flex-start;
  background: var(--surface);
  color: var(--ink-700);
  border-bottom-left-radius: var(--radius-tag);
}
/* 입금 완료 카드 — 이 그림의 결론 */
.d-phone__receipt {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: var(--border-w) solid var(--brand-100);
}
.d-phone__receipt-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--success);
}
.d-phone__receipt-top .ico { font-size: 16px; --ico-bg-opacity: .45; }
.d-phone__receipt-won {
  font-size: 26px;
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.d-phone__receipt-won small { font-size: .5em; font-weight: var(--fw-bold); margin-left: .1em; }
.d-phone__receipt-time { font-size: var(--fs-xs); color: var(--ink-500); }

.d-phone__note {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-align: center;
}

/* 제목 위 작은 포인트 배지 — 한 줄짜리 알약
   ★ 주황을 그대로 칠하고 흰 글씨를 얹습니다 (당근 버튼과 같은 방식).
     연한 주황 바탕 + 진한 주황 글씨 조합은 대비는 좋지만 색이 죽습니다. */
/* ★ 간격 원칙 : 덩어리 안은 좁게, 덩어리 사이는 넓게.
   레퍼런스를 재보니 제목 크기를 1 로 봤을 때
     배지→제목 0.79 · 제목→부제 0.94 였습니다.
   우리는 둘 다 0.38 이라 블록끼리 붙어 보였습니다. 아래 값이 그 보정입니다. */
.d-hero__point {
  display: inline-block;
  margin-bottom: 0;   /* 간격은 .d-hero__grid 의 gap 이 맡습니다 */
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--brand-500);
  color: var(--on-brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.d-hero__point b {
  font-size: 1.15em;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.d-hero__title {
  font-size: var(--fs-hero-title);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  /* ★ 큰 제목은 자간을 아주 살짝 당겨야 "짜임새 있게" 보입니다.
     normal 로 두면 굵은 한글이 띄엄띄엄 흩어져 보입니다.
     −0.02em 이 한글이 안 뭉치는 선에서 가장 단정합니다.
     ★★ em(체인지론) 도 반드시 같은 값을 써야 합니다. 다르면 한 줄 안에서
       "숨은 비상금" 과 "체인지론" 의 자간이 달라 보여 어긋나 보입니다. */
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
/* 제목 안 주황 강조 — 당근 원본색 그대로.
   ★ 예전에는 이 자리에 숫자(211,450·5분)가 들어가서
     숫자 폭 고정(tabular-nums)과 강한 자간(−0.045em)을 줬습니다.
     지금은 "체인지론" 이라는 한글이 들어가므로 그 설정을 모두 뺐습니다.
     남겨 두면 이 글자만 유독 좁아 보여 제목이 어긋나 보입니다. */
.d-hero__title em {
  font-style: normal;          /* em 은 기본이 기울임입니다. 한글은 기울이지 않습니다. */
  color: var(--brand-ink);
  white-space: nowrap;         /* "체인지론" 이 줄 끝에서 쪼개지지 않게 */
}
/* 제목 안 '실시간 문의건수' 숫자 — 카운팅 중 자리폭이 들썩이지 않게 고정.
   (숫자에만 적용. 제목 전체엔 걸지 않습니다 — 한글이 좁아 보이므로) */
.d-hero__title .d-hero__live {
  color: var(--brand-ink);              /* 포인트(브랜드) 색 */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;              /* 자간 살짝 좁힘 */
  white-space: nowrap;
}



/* 히어로 아래 인물/제품 이미지 — 당근처럼 넓은 띠로 깝니다 */
.d-hero__visual {
  position: relative;
  margin-top: var(--space-12);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  overflow: hidden;
  min-height: 260px;
  display: grid;
  place-items: end center;
}
.d-hero__visual img { max-height: 380px; width: auto; }

/* ─────────── 좁은 화면에서만 달라지는 것 ───────────
   배치는 이미 넓은 화면과 같은 세로 한 줄이라 다시 쓸 게 없습니다.
   여기서는 "크기"만 조정합니다. */
@media (max-width: 850px) {
  /* ★★ 여기 숫자들은 "첫 화면 안에 수치 상자까지 들어가게" 맞춰둔 값입니다.
     상담 버튼은 이제 화면을 따라다니는 띠(.site-cta)에만 있어서
     첫 화면 계산에 넣지 않습니다. 항상 보이니까요.

     휴대폰(390×844) 기준으로 쓸 수 있는 세로
       844(화면) − 60(상단바) − 78(하단 상담 띠) = 706
     여기에 위 여백 24 + 배지 42 + 제목 73 + 수치상자 99 + 간격 20×3
     = 298 이 고정으로 들어가고, 나머지가 사진 몫입니다.

     ★ 534px = 사진 위아래에 반드시 필요한 세로 합계입니다.
         위 : 상단바 60 + 여백 16 + 배지 42 + 간격 16 + 제목 73
              + 간격 16 + 설명 45 + 간격 16                       = 284
         아래: 간격 16 + 수치상자 99 + 근거표기 26 + 여유 16 + 하단 상담 띠 84 = 241
       그래서 사진에 쓸 수 있는 높이 = 화면높이 − 501 입니다.
       사진이 정사각이라 이 값을 그대로 가로폭 상한으로 씁니다.
     ★★ 위 목록의 숫자를 바꾸면 501 도 반드시 같이 고쳐야 합니다.
        특히 제목이나 설명 글자를 늘리면 줄 수가 늘어 이 값이 커집니다.
        (설명이 2줄 → 3줄이 되면 +23px)
        안 고치면 수치 상자가 하단 상담 띠 밑으로 숨습니다.

     ★ 240px 아래로는 안 줄입니다. 그보다 작으면 휴대폰이 안 보여
       사진을 넣은 의미가 없어집니다. 아주 짧은 기기에서는
       수치 상자가 한 번 스크롤 아래로 가는 편이 낫습니다.
       (상담 버튼은 어차피 띠에 항상 있으므로 놓칠 일이 없습니다.)
     ★ dvh 는 모바일 브라우저 주소창이 접혔다 펴지는 것까지 반영합니다.
     ★ 420px 은 태블릿용 상한입니다. 850px 화면에서 850px 짜리 사진이
       되어 첫 화면을 통째로 먹는 것을 막습니다. */

  /* ★★ 아래 두 줄은 위 계산의 전제입니다. 지우면 계산이 전부 어긋납니다.
     넓은 화면 기본값은 여백 64 / 간격 40 인데, 그대로 두면
     좁은 화면에서 80px 을 더 먹어 수치 상자가 하단 띠 밑으로 숨습니다. */
  .d-hero { padding-block: var(--space-10) var(--space-12); }
  .d-hero__grid { gap: var(--space-4); }

  /* ★ 폭은 항상 꽉 채웁니다(태블릿은 420px 상한).
     세로 조절은 사진 높이(.d-hero__shot--mo)가 맡으므로 여기선 폭만 정합니다.
     이렇게 해야 양옆 흰 여백이 안 생깁니다. */
  .d-hero__phone {
    max-width: min(100%, 420px);
  }
  /* 사진이 없을 때 나오는 그린 목업은 그대로 작게 둡니다 (꽉 채우면 너무 큽니다) */
  .d-hero__phone .d-phone { max-width: 280px; }
}


/* ─────────── 히어로 : 풀블리드 배경형 (당근비즈니스 방식) ───────────
   화면 전체를 사진/영상으로 덮고 그 위에 흰 제목 + 주황 버튼.
   사진이 없어도 성립하도록 브랜드색 그라데이션을 기본 배경으로 깔았습니다.
   ★ 사진 위 글자는 밝기를 보장할 수 없으므로 어두운 막(scrim)을 반드시 겁니다. */
.d-hero--media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  padding-block: var(--space-20);
  background: var(--brand-gradient);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.d-hero--media .d-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 어두운 막 — 사진이 밝든 어둡든 흰 글자가 읽히게 합니다 */
.d-hero--media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.52) 100%);
}
.d-hero--media .container { position: relative; z-index: 1; }
.d-hero--media .d-hero__title { color: var(--on-dark); }
.d-hero--media .d-hero__sub,
.d-hero--media .d-hero__assure { color: var(--on-dark-mid); }
.d-hero--media .micro-facts { color: var(--on-dark-mid); }
.d-hero--media .micro-facts strong { color: var(--on-dark); }
/* 어두운 배경 위 보조 버튼 */
.d-hero--media .btn--ghost {
  background: rgba(255, 255, 255, .16);
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, .4);
}
.d-hero--media .btn--ghost:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 768px) {
  .d-hero--media { min-height: 460px; }
}

/* ─────────── 카드 : 위 이미지 영역 + 아래 텍스트 (당근 "광고 상품" 방식) ───────────
   당근 실측: 이미지 영역 높이 340px, 바탕 #f2f0ef */
/* ★ PC·모바일 모두 좌우로 넘겨 봅니다.
   4장을 한 줄에 욱여넣으면 카드가 좁아져서, 한 번에 2장쯤만 넓게 보여주고
   나머지는 밀어서 보게 했습니다. (data-swipe 로 마우스 끌기도 됩니다) */
.d-cards {
  display: grid;
  grid-auto-flow: column;
  /* 데스크톱: 약 2.2장이 보이도록. 세 번째 카드가 살짝 걸쳐 "옆에 더 있다"를 알립니다. */
  grid-auto-columns: calc((100% - var(--space-6)) / 2.15);
  gap: var(--space-6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-1);   /* 카드 그림자·테두리가 안 잘리게 */
}
.d-cards::-webkit-scrollbar { display: none; }
.d-cards > .d-card { scroll-snap-align: start; }
.d-cards.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.d-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
}
.d-card__media {
  aspect-ratio: 16 / 10;
  background: var(--surface-warm);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.d-card__media img { width: 100%; height: 100%; object-fit: cover; }
.d-card__media .ico { font-size: 64px; color: var(--brand-500); }
.d-card__body { padding: var(--card-p); }
.d-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  margin-bottom: var(--space-3);
}
.d-card__text { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ink-500); }

/* ─────────── 카드 : 금액 강조 박스 ───────────
   ★ 각 상품의 핵심 숫자(신청한도 등)를 브랜드 주황 박스로 눈에 띄게 담습니다.
   ★ width: fit-content — 박스가 글자 폭만큼만. 카드 전체 폭으로 늘어지지 않게. */
.d-card__amount {
  width: fit-content;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-btn);
  background: var(--brand-500);
  color: var(--on-brand);
  white-space: nowrap;
}
.d-card__amount span { font-size: var(--fs-xs); opacity: .9; }   /* 라벨(신청한도 등) */
.d-card__amount b    { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

/* ─────────── 카드 : 특징 목록 (세로 나열) ───────────
   ★ 예전엔 회색 태그를 좌우로 흩어놓았는데, 세로 목록이 "무엇이 되는지" 읽기 쉽습니다.
   ★ 앞의 체크 아이콘은 브랜드 주황. "이건 됩니다"를 한눈에 알립니다. */
.d-card__list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.d-card__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--ink-700);
}
.d-card__list .ico { flex: none; width: 18px; height: 18px; color: var(--brand-500); }

/* 좁은 화면 : 카드를 한 장에 가깝게(86%) 키우고, 화면 끝까지 흘러가 보이게 합니다.
   (좌우로 넘기는 기본 동작은 위 .d-cards 에 이미 들어 있습니다) */
@media (max-width: 768px) {
  .d-cards {
    grid-auto-columns: 86%;
    gap: var(--space-4);
    /* 화면 끝까지 흘러가 보이도록 좌우 여백만큼 넘겨 두고 안쪽으로 되받습니다 */
    margin-inline: calc(var(--container-x) * -1);
    padding-inline: var(--container-x);
    /* 첫 카드가 제목과 같은 선에서 멈추도록 맞춤 여백도 같은 값으로 */
    scroll-padding-inline: var(--container-x);
  }
}

/* ─────────── 캐러셀 (당근 "성공사례"·"광고 모드" 방식) ───────────
   좌우 화살표 + 번호 페이지네이션. 손가락으로 밀어도 넘어갑니다. */
.d-carousel { position: relative; }
.d-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--space-6) * 2) / 3);
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}
.d-carousel__track::-webkit-scrollbar { display: none; }
.d-carousel__track > * { scroll-snap-align: start; }

.d-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.d-carousel__arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 20px;
}
.d-carousel__arrow:hover { background: var(--surface-alt); }
.d-carousel__arrow[disabled] { opacity: .35; cursor: default; }

/* 번호 — 당근 실측: 40px 정사각, 둥글기 8px, 선택 시 주황 채움 */
.d-carousel__dots { display: flex; gap: var(--space-2); }
.d-carousel__dot {
  min-width: 40px; height: 40px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.d-carousel__dot[aria-current="true"] {
  background: var(--brand-500);
  color: var(--on-brand);
}

@media (max-width: 1024px) { .d-carousel__track { grid-auto-columns: calc((100% - var(--space-6)) / 2); } }
@media (max-width: 768px)  { .d-carousel__track { grid-auto-columns: 86%; } }

/* ─────────── 연한 주황 배경 섹션 ───────────
   흐릿한 덩어리(그라데이션) 대신 면 하나로 구분합니다.
   당근도 영역 구분에 그라데이션을 쓰지 않고 연한 면만 씁니다. */
.section--soft { background: var(--brand-50); }

/* ─────────── 후기 사진 카드 롤링 ───────────
   화면 끝까지 늘어뜨리지 않고 콘텐츠 폭(960px) 안에서 가운데 정렬합니다.
   한 번에 보이는 장수는 --reviews-cols 하나로 정합니다.
     넓은 화면 3장 · 768px 이하 2장 · 400px 이하 1.2장
   좌우 화살표로 넘기고, 손가락·마우스로 밀어도 넘어갑니다. */
.d-reviews {
  margin-top: var(--space-12);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--container-x);
}

.d-reviews__viewport { overflow: hidden; }
.d-reviews__track {
  display: grid;
  grid-auto-flow: column;
  /* 칸 사이 간격을 뺀 나머지를 --reviews-cols 장으로 정확히 나눕니다.
     그래서 딱 그 장수만 보이고, 나머지는 옆으로 밀려 있습니다. */
  grid-auto-columns:
    calc((100% - (var(--reviews-cols) - 1) * var(--space-4)) / var(--reviews-cols));
  gap: var(--space-4);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* ★ 손을 떼면 카드 경계에 딱 맞춰 섭니다.
     칸 경계에 서면 폭 계산상 정확히 --reviews-cols 장이 보입니다.
     (어중간하게 걸친 채로 멈추는 것을 막아줍니다) */
  scroll-snap-type: x mandatory;
}
/* 끄는 동안에는 손끝에 딱 붙어야 하므로 잠시 끕니다.
   손을 떼고 미끄러짐이 끝나면 JS가 이 클래스를 떼고, 그때 브라우저가 맞춰줍니다. */
.d-reviews__track.is-dragging { scroll-snap-type: none; }
.d-reviews__track::-webkit-scrollbar { display: none; }

/* 마우스로 끌어서 넘길 수 있다는 표시 */
.d-reviews__track,
.d-show__track { cursor: grab; }
.d-reviews__track.is-dragging,
.d-show__track.is-dragging { cursor: grabbing; }
/* 끄는 동안 사진·글자가 선택되지 않도록 */
.is-dragging, .is-dragging * { user-select: none; }
.d-review__img { -webkit-user-drag: none; user-select: none; }

/* 카드 = 실제 카톡 상담 캡처 + 아래쪽 글
   ★ 캡처 위에 글씨를 얹지 않습니다.
     캡처 자체가 글자 이미지라, 그 위에 또 글을 올리면 둘 다 안 읽힙니다.
     그래서 위=캡처 / 아래=글 로 나눴습니다. */
.d-review {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  transition: transform var(--dur-base) var(--ease-spring),
              border-color var(--dur-fast) var(--ease);
}
/* 누르면 후기 원본이 크게 열립니다. 눌리는 느낌이 있어야 눌러볼 마음이 듭니다.
   ★ 카드 안 사진은 아래에서 따로 살짝 확대되고, 카드 자체는 떠오릅니다.
     둘이 반대로 움직여서 안쪽에 깊이가 생깁니다. */
.d-review--clickable:hover {
  transform: translateY(var(--lift));
  border-color: var(--line-strong);
}
.d-review--clickable:active {
  transform: translateY(0) scale(var(--press));
  transition-duration: var(--dur-instant);
}
/* 캡처 자리 — 비율이 0.68~1.33 로 제각각이라 정사각 틀에 담고
   위쪽 기준으로 맞춥니다. 대화는 위에서부터 읽으니까요. */
.d-review__shot {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-alt);
}
.d-review__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-base) var(--ease);
}
.d-review--clickable:hover .d-review__shot img { transform: scale(1.03); }

.d-review__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 후기 한 줄을 없앤 뒤라 두 줄(금액·이용자)이 답답하지 않게 간격을 넉넉히. */
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: left;
}
/* ─────────── 후기 카드 : 입금 금액 줄 ───────────
   "입금완료" 라는 작은 표 + 실제 금액.
   ★ 금액을 크게, 표는 작게. 눈이 금액에 먼저 가야 합니다.
   ★ 금액은 전부 img/review/ 캡처에서 읽은 실제 값입니다. */
.d-review__paid {
  display: flex;
  align-items: center;
  /* 영수증처럼 : 왼쪽 "입금완료" 표 / 오른쪽 금액 — 양끝 정렬로 깔끔하게 */
  justify-content: space-between;
  gap: var(--space-2);
}
.d-review__paid-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-tag);
  /* 주황 면에 흰 글씨는 대비가 빠듯합니다(2.94:1).
     여기는 작은 글씨라 연한 면 + 진한 주황 글씨로 뒤집었습니다. */
  background: var(--brand-50);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.d-review__paid-tag .ico { width: 1.1em; height: 1.1em; }
.d-review__paid b {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
  /* 자릿수가 달라도 줄이 흔들리지 않게 고정폭 숫자 */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ─────────── 후기 카드 : 이용자(직업·이름) + 사용 서비스 ───────────
   ★ 굵은 "직업 이름OO님" + 그 옆 회색 서비스명(칩). */
.d-review__who {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* 이름 왼쪽 / 서비스 오른쪽 */
  gap: var(--space-2);
  /* 금액 줄과 구분선으로 끊어 "금액 / 이용자" 두 단으로 정리 */
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--border-w) solid var(--line);
}
.d-review__who b {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  white-space: nowrap;
}
.d-review__who span {
  padding: 2px var(--space-2);
  border-radius: var(--radius-tag);
  background: var(--brand-50);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.d-review__quote {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 조작부 */
.d-reviews__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.d-reviews__arrow {
  display: grid; place-items: center;
  width: 44px; height: 44px;      /* 터치 44px 확보 */
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 20px;
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.d-reviews__arrow:hover:not([disabled]) {
  background: var(--surface-alt);
  border-color: var(--ink-300);
}
/* 넘기는 버튼은 "밀어냈다"는 느낌이 나야 합니다.
   그래서 오그라들기만 하지 않고 가려는 쪽으로 살짝 밀립니다. */
.d-reviews__arrow:active:not([disabled]) {
  transform: scale(.9);
  transition-duration: var(--dur-instant);
}
.d-reviews__arrow[data-carousel-prev]:active:not([disabled]) { transform: scale(.9) translateX(-2px); }
.d-reviews__arrow[data-carousel-next]:active:not([disabled]) { transform: scale(.9) translateX(2px); }
.d-reviews__arrow[disabled] { opacity: .4; cursor: default; }

.d-reviews__dots { display: flex; gap: var(--space-2); }
.d-reviews__dot {
  min-width: 40px; height: 40px;   /* 당근 실측: 40px 정사각 */
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.d-reviews__dot:hover  { background: var(--line); }
.d-reviews__dot:active { transform: scale(.9); transition-duration: var(--dur-instant); }
.d-reviews__dot[aria-current="true"] { background: var(--brand-500); color: var(--on-brand); }

/* ※ 후기 출처·동의 안내는 캐러셀 아래가 아니라
   섹션 제목 바로 밑(.section-desc)으로 옮겼습니다.
   표시광고법상 반드시 있어야 하는 문장이라, 스크롤해야 보이는 자리보다
   제목 옆에서 먼저 눈에 들어오는 편이 맞습니다. */

@media (max-width: 768px) { .d-reviews { margin-top: var(--space-8); } }

/* ─────────── 후기 상세 팝업 ───────────
   후기 카드를 누르면 실제 상담 캡처를 크게 보여줍니다.
   바깥을 누르거나 ESC 를 누르면 닫힙니다. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: rgba(0, 0, 0, .68);
  overflow-y: auto;
}
.lightbox[hidden] { display: none; }

.lightbox__panel {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;      /* 터치 44px */
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--ink-900);
  font-size: 20px;
}
.lightbox__close:hover { background: var(--line); }

/* ★ 팝업 안이 쇼핑몰 포토리뷰 형식입니다.
   왼쪽에 상담 캡처, 오른쪽에 후기 내용. */
.lightbox__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-8);
  align-items: start;
}
/* ─── 인스타처럼 한 장씩 넘겨보는 사진 ───
   좌우 화살표 · 아래 점 · 손가락/마우스로 끌기 모두 됩니다. */
.lb-slider { position: relative; }

.lb-slider__frame {
  position: relative;
  border-radius: var(--radius-md);
  border: var(--border-w) solid var(--line);
  background: var(--surface-alt);
  overflow: hidden;
}
.lightbox__imgs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}
.lightbox__imgs::-webkit-scrollbar { display: none; }
.lightbox__imgs.is-dragging { cursor: grabbing; }

.lightbox__imgs img {
  scroll-snap-align: start;
  width: 100%;
  /* 캡처마다 비율이 달라서 잘라내면 내용이 사라집니다. 통째로 담습니다. */
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--surface-alt);
  -webkit-user-drag: none;
  user-select: none;
}
/* 인물 사진만 꽉 차게 (잘려도 얼굴만 보이면 됩니다) */
.lightbox__imgs .lightbox__photo {
  object-fit: cover;
  object-position: center 18%;
}

.lb-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .92);
  border: var(--border-w) solid var(--line);
  color: var(--ink-900);
  font-size: 18px;
  z-index: 2;
}
.lb-slider__arrow--prev { left: var(--space-3); }
.lb-slider__arrow--next { right: var(--space-3); }
.lb-slider__arrow[disabled] { opacity: 0; pointer-events: none; }

/* 몇 번째 장인지 — 인스타처럼 점으로 */
.lb-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.lb-slider__dot {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}
.lb-slider__dot[aria-current="true"] { background: var(--brand-500); }
/* 점이 작아 누르기 어려우므로 실제 누르는 영역은 넓힙니다 */
.lb-slider__dot::before {
  content: "";
  position: absolute;
  width: 44px; height: 44px;
  transform: translate(-18px, -18px);
}
.lb-slider__dot { position: relative; }

.lightbox__side { min-width: 0; }
.lightbox__badge {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-tag);
  background: var(--brand-50);
  color: var(--brand-ink);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
}
.lightbox__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--ink-900);
  margin-bottom: var(--space-3);
  padding-right: 52px;
}
.lightbox__who {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-w) solid var(--line);
  margin-bottom: var(--space-5);
}
.lightbox__text {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-700);
  white-space: pre-line;
}
.lightbox__text mark {
  background: none;
  color: var(--brand-ink);
  font-weight: var(--fw-bold);
}
.lightbox__note {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--line);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--ink-500);
}

@media (max-width: 720px) {
  .lightbox__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .lightbox__title { font-size: var(--fs-h4); }
}

/* 후기 카드를 누를 수 있다는 표시 */
.d-review--clickable { cursor: pointer; }

@media (max-width: 768px) {
  .lightbox { padding: var(--space-3); }
  .lightbox__panel { padding: var(--space-6); }
}

/* ─────────── 번호 캐러셀 (당근 "전문가모드" 방식) ───────────
   지금은 쓰지 않습니다. 설명할 내용이 많은 섹션용으로 남겨둡니다.
   큰 캔버스 좌우에 화살표, 아래에 번호(1·2·3…),
   번호와 함께 현재 항목의 제목·설명이 바뀌면서 표시됩니다. */
.d-show__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.d-show__stage { position: relative; }

/* 흰 바탕에 넓게. 회색 판 위에 작은 카드를 띄우면 어중간해 보입니다. */
.d-show__canvas {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.d-show__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.d-show__track::-webkit-scrollbar { display: none; }

.d-show__panel {
  scroll-snap-align: start;
  /* 판마다 높이가 달라지면 넘길 때 화면이 출렁입니다. 최소 높이를 맞춥니다. */
  min-height: 320px;
}

/* ─── 캔버스를 채우는 카톡 대화 목업 ───
   당근이 제품 화면 목업으로 캔버스를 채우듯,
   우리는 실제 상담 방식인 카톡 대화로 채웁니다.
   ★ 실제 대화 캡처가 아니라 예시 화면입니다. 아래 안내 문구를 반드시 유지하세요. */
/* 판 전체를 차지합니다. 흰 바탕이라 별도 카드 테두리를 두지 않습니다. */
.d-chat {
  width: 100%;
  text-align: left;
}
.d-chat__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-8);
  border-bottom: var(--border-w) solid var(--line);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
}
.d-chat__avatar {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
  color: var(--on-brand);
  font-size: 15px;
}
.d-chat__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
}
/* 말풍선은 넓히지 않습니다. 넓어지면 대화처럼 안 보이고 투박해집니다. */
.d-chat__msg {
  max-width: 400px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
/* 손님이 보낸 말 — 오른쪽, 카카오 노랑 */
.d-chat__msg--me {
  align-self: flex-end;
  background: var(--kakao-bg);
  color: var(--kakao-ink);
  border-bottom-right-radius: var(--radius-tag);
}
/* 상담원이 보낸 말 — 왼쪽, 연회색 */
.d-chat__msg--them {
  align-self: flex-start;
  background: var(--surface-alt);
  color: var(--ink-700);
  border-bottom-left-radius: var(--radius-tag);
}
.d-chat__note {
  padding: 0 var(--space-8) var(--space-6);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

@media (max-width: 768px) {
  .d-chat__head { padding: var(--space-4) var(--space-5); }
  .d-chat__body { padding: var(--space-5); gap: var(--space-3); }
  .d-chat__msg  { max-width: 86%; font-size: var(--fs-sm); }
  .d-chat__note { padding: 0 var(--space-5) var(--space-5); }
  .d-show__panel { min-height: 280px; }
}

/* 화살표 — 캔버스 바깥 좌우에 둡니다 */
.d-show__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  color: var(--ink-700);
  font-size: 20px;
  z-index: 1;
}
.d-show__arrow--prev { left: calc(-1 * var(--space-12)); }
.d-show__arrow--next { right: calc(-1 * var(--space-12)); }
.d-show__arrow[disabled] { opacity: .35; cursor: default; }
.d-show__arrow:hover:not([disabled]) { background: var(--surface-alt); }

/* 번호 — 당근 실측: 40px 정사각, 둥글기 8px, 선택 시 주황 채움 */
.d-show__dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.d-show__dot {
  min-width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.d-show__dot[aria-current="true"] { background: var(--brand-500); color: var(--on-brand); }

/* 번호 아래 설명 — 넘길 때마다 바뀝니다 */
.d-show__caption { margin-top: var(--space-8); }
.d-show__captitle {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  margin-bottom: var(--space-2);
}
.d-show__capdesc {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-500);
  max-width: 34em;
}

/* 좁은 화면에서는 화살표를 캔버스 안쪽으로 넣습니다 */
@media (max-width: 1200px) {
  .d-show__arrow--prev { left: var(--space-3); }
  .d-show__arrow--next { right: var(--space-3); }
}

/* ─────────── 숫자 줄 (당근 "4,300만 당근이웃이…" 패턴) ───────────
   좌: 큰 문장 2줄 / 우: 큰 숫자 여러 개 */
.d-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.d-stats__lead {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--ink-900);
}
.d-stats__lead span {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--ink-500);
}
.d-stats__nums {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
}
.d-stats__label {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin-bottom: var(--space-2);
}
.d-stats__num {
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);   /* 당근 실측: 48px 숫자도 1.35 */
  color: var(--ink-900);
}
.d-stats__note {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}
@media (max-width: 768px) {
  .d-stats { grid-template-columns: 1fr; gap: var(--space-8); }
  .d-stats__nums { justify-content: flex-start; gap: var(--space-8); flex-wrap: wrap; }
}

/* ─────────── 문의 유형 : 손님 말 + 저희 답변 ───────────
   ★ 설명문 대신 손님이 실제로 쓰는 말투를 크게 싣습니다.
     방문자가 "내 얘기다" 하고 알아보는 순간이 설득의 시작입니다.
   ★ 지어낸 후기가 아니라 상황 예시입니다.
     아래 고지(case-note)를 반드시 함께 두세요. */
.d-voices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.d-voice {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--surface);          /* 회색 섹션 위 흰 카드 */
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
}
/* ※ 아이콘 + 꼬리표(결제일·병원비…) 줄은 뺐습니다.
     손님 말이 이미 무슨 상황인지 말해주는데 위에 또 붙으니
     같은 말이 두 번이 되고 카드만 두꺼워졌습니다. */

/* 손님 말 — 카드에서 가장 큰 글자. 앞에 큰따옴표를 세웁니다. */
.d-voice__say {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--ink-900);
}
.d-voice__say::before {
  content: "\201C";                    /* 여는 큰따옴표 */
  position: absolute;
  left: 0;
  top: -.12em;
  font-size: 1.6em;
  line-height: 1;
  color: var(--brand-500);
}
/* 저희 답변 — 손님 말과 선으로 끊어 누가 한 말인지 구분합니다 */
.d-voice__ans {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-500);
}

@media (max-width: 768px) {
  .d-voices { grid-template-columns: 1fr; gap: var(--space-4); }
  .d-voice  { padding: var(--space-6); }
}

/* ─────────── POINT 03 : (거절 사유 → 체인지론 재검토) 통일 카드 ───────────
   ★ 위·아래 두 칸을 완전히 같은 구조로 맞춥니다:  [아이콘 라벨] → 제목 → 설명.
     구조가 같아야 눈이 위·아래를 같은 리듬으로 읽어 안 복잡합니다.
     구분은 색으로만: 거절=회색(문제) / 재검토=주황(해결).
   ★ PC 3열 그리드 · 모바일은 좌우 스와이프(아래 미디어쿼리). 빨강 안 씁니다. */
.hl-danger { color: inherit; font-style: normal; }   /* (옛 이름 호환) */

.d-gate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.d-gate__card {
  display: flex;
  flex-direction: column;
  /* ★ 세로로 선 카드. 거절은 위로, 재검토는 아래로 벌리고(space-between)
     그 사이 가운데에 구분선 + 아래화살표. min-height 로 "선 카드" 비율을 잡습니다.
     (카드 크기는 이 값으로, 카드↔아래 수치박스 간격은 .d-gate__stats 의 margin-top 으로) */
  min-height: 340px;
  justify-content: space-between;
  /* ★★ --space-7 은 토큰에 없습니다(스케일이 6 다음 8). 쓰면 padding 이 0 이 됩니다.
     있는 값만 쓰세요: 1·2·3·4·5·6·8·10·12·16·20·24. */
  padding: var(--space-8);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
}
/* 두 칸 공통 뼈대 */
.d-gate__seg { display: flex; flex-direction: column; gap: var(--space-1); }

/* 가운데 구분선 + 아래화살표 — 두 칸을 나누고 시선을 아래(해결)로 내립니다.
   ★ margin 이 거절↔재검토 사이 간격입니다. 이 값만으로 간격을 조절하세요. */
.d-gate__divider {
  position: relative;
  /* 간격은 위 카드의 space-between 이 잡으므로 여기선 0 */
  margin: 0;
  border-top: var(--border-w) solid var(--line);
}
.d-gate__arrow {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
  color: var(--on-brand);
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .18);
}
.d-gate__arrow::before {
  content: "";
  display: block;
  width: 9px; height: 9px;
  margin-top: -2px;
  border-bottom: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);      /* 아래 방향 꺾쇠 */
}
/* 라벨 (아이콘 + 글자) — 위·아래 같은 크기·자리 */
.d-gate__seg-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.d-gate__seg-tag .ico { flex: none; width: 16px; height: 16px; }
.d-gate__seg--no  .d-gate__seg-tag { color: var(--ink-500); }        /* 거절 = 회색 */
.d-gate__seg--no  .d-gate__seg-tag .ico { color: var(--ink-300); }
.d-gate__seg--yes .d-gate__seg-tag { color: var(--brand-ink); }      /* 재검토 = 주황 */
.d-gate__seg--yes .d-gate__seg-tag .ico { color: var(--brand-500); }
/* 제목·설명 — 위·아래 같은 크기 */
.d-gate__seg-t { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-tight); }
.d-gate__seg-d { font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-normal); }

/* ── 마무리 : 재검토 실적 수치 두 개 (승인률·소요시간) ──
   ★ 연주황 박스 안에 라벨(작게) + 숫자(크고 주황). 가운데 칸막이로 둘을 나눕니다.
   ★ width: fit-content + margin auto = 내용 폭만큼만 잡고 가운데 정렬. */
.d-gate__stats {
  /* 가로로 길게 — 콘텐츠 폭을 꽉 채우고 두 칸을 정확히 반반(1fr 1fr)으로.
     ★ margin-top 이 "카드 묶음 ↔ 이 수치 박스" 사이 간격입니다. 작게. */
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  background: var(--brand-50);
  border: var(--border-w) solid var(--brand-100);
  overflow: hidden;
}
.d-gate__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-5);
}
.d-gate__stat + .d-gate__stat { border-left: var(--border-w) solid var(--brand-100); }
.d-gate__stat dt { font-size: var(--fs-sm); color: var(--ink-500); }
.d-gate__stat dd {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.d-gate__stat dd span { font-size: .6em; margin-left: 1px; }   /* % · 분 은 한 단계 작게 */

/* 중간 폭(태블릿)에서는 2열로 */
@media (max-width: 1000px) and (min-width: 769px) {
  .d-gate { grid-template-columns: 1fr 1fr; }
}
/* 좁은 화면 : 그리드를 접고 좌우 스와이프 캐러셀로 (상품 카드와 같은 방식). */
@media (max-width: 768px) {
  .d-gate {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* 화면 끝까지 흘러가 보이도록 좌우 여백만큼 넘겨 두고 안쪽으로 되받습니다 */
    margin-inline: calc(var(--container-x) * -1);
    padding-inline: var(--container-x);
    scroll-padding-inline: var(--container-x);
    scrollbar-width: none;
  }
  .d-gate::-webkit-scrollbar { display: none; }
  .d-gate > .d-gate__card { scroll-snap-align: start; }
  .d-gate.is-dragging { scroll-snap-type: none; cursor: grabbing; }

  /* 수치 박스는 좁은 화면에서 좌우 여백을 줄여 두 칸이 나란히 들어가게 합니다 */
  .d-gate__stat { padding: var(--space-4) var(--space-5); }
}

/* ─────────── POINT 05 : 3단계 진행 카드 ───────────
   ★ 각 단계 = 번호 배지 + 주황 원 안 아이콘 + 제목 + 설명. 우리 색만 씁니다.
   ★ PC 3열 · 모바일 세로 1열. */
/* 제목 안 주황 강조 (POINT 05 "가장 빠른 입금" 등) */
.section-head h2 em { color: var(--brand-ink); font-style: normal; }

.d-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  list-style: none;
}
.d-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6) var(--space-8);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
}
.d-step__num {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
  color: var(--on-brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.d-step__ico {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--radius-pill);
  background: var(--brand-50);
}
.d-step__ico .ico { width: 34px; height: 34px; color: var(--brand-500); }
.d-step__t { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-tight); }
.d-step__d { font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-normal); }

/* "문의 방법 자세히 보기" — 단계 아래 가운데 */
.d-steps__more { margin-top: var(--space-8); text-align: center; }

/* 좁은 화면 : 세로로 쌓지 않고 좌우 스와이프 (상품·거절 카드와 같은 방식). */
@media (max-width: 768px) {
  .d-steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--container-x) * -1);
    padding-inline: var(--container-x);
    scroll-padding-inline: var(--container-x);
    scrollbar-width: none;
  }
  .d-steps::-webkit-scrollbar { display: none; }
  .d-steps > .d-step { scroll-snap-align: start; }
  .d-steps.is-dragging { scroll-snap-type: none; cursor: grabbing; }
  .d-step { padding: var(--space-8) var(--space-6); }
}

/* ─────────── 카드류 공통 : 은은한 그림자 + PC hover 확대 ───────────
   ★ 그림자는 모바일·PC 모두 들어갑니다.
   ★ hover 확대는 "마우스가 있는 기기(PC)"에서만.
     @media (hover: hover) 라 손가락만 쓰는 기기(모바일)는 자동으로 빠집니다.
     그래서 모바일은 그림자만, 확대는 없습니다 (요청 그대로). */
.d-card,
.d-review,
.d-gate__card,
.d-step {
  box-shadow: 0 2px 12px rgba(var(--shadow-rgb), .05);
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .d-card:hover,
  .d-review:hover,
  .d-gate__card:hover,
  .d-step:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 30px rgba(var(--shadow-rgb), .12);
    z-index: 1;                 /* 확대된 카드가 옆 카드 위로 */
  }
}
/* 가로 스크롤 카드는 확대될 때 위아래가 잘리지 않게 여백을 줍니다 */
.d-cards { padding-block: var(--space-2); }
.d-reviews__track { padding-block: var(--space-2); }

/* ─────────── 좌우 분할 (당근 "비즈프로필" 패턴) ───────────
   한쪽에 그림, 반대쪽에 라벨+제목+설명+버튼 */
.d-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.d-split--reverse .d-split__media { order: 2; }
.d-split__media {
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.d-split__media img { width: 100%; height: 100%; object-fit: cover; }
.d-split__body .section-label { margin-bottom: var(--space-3); }
.d-split__body h2 { font-size: var(--fs-h2); }
.d-split__body .section-desc { margin-top: var(--space-5); }
.d-split__body .btn { margin-top: var(--space-8); }
@media (max-width: 768px) {
  .d-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .d-split--reverse .d-split__media { order: 0; }
  .d-split__media { min-height: 220px; }
}

/* ─────────── 비교표 (항목명은 한 번만) ───────────
   ★ 같은 항목명을 양쪽에 두 번 쓰면 읽을 것이 두 배가 됩니다.
     왼쪽에 항목명을 한 번만 두고, 값만 좌우로 비교합니다. */
.d-cmp {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
}
/* ★ 2열입니다. 왼쪽에 항목명 열을 따로 두지 않습니다.
     좁은 화면에서 항목명이 한 줄을 통째로 먹어 줄이 밀렸습니다. */
.d-cmp__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.d-cmp__row + .d-cmp__row { border-top: var(--border-w) solid var(--line); }

/* 머리줄 */
.d-cmp__row--head { font-weight: var(--fw-bold); }
.d-cmp__row--head .d-cmp__ours {
  background: var(--brand-500);
  color: var(--on-brand);
  font-size: var(--fs-h4);
}
.d-cmp__row--head .d-cmp__theirs {
  background: var(--surface-alt);
  color: var(--ink-500);
}

.d-cmp__ours,
.d-cmp__theirs {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
/* 우리 쪽 열을 연한 브랜드 톤으로 깔아 시선이 먼저 가게 합니다 */
.d-cmp__ours   { background: var(--brand-50); color: var(--ink-900); font-weight: var(--fw-bold); }
.d-cmp__theirs { color: var(--ink-500); }
/* ★ 아이콘에 색을 확실히 줍니다.
   체크는 초록, 엑스는 빨강. 둘 다 회색이면 어느 쪽이 좋은지 눈으로 구분이 안 됩니다.
   ★ 이 아이콘은 두 겹(연한 바탕 + 진한 앞면)이라 기본 농도 25% 로는 흐릿합니다.
     --ico-bg-opacity 를 올려 바탕도 또렷하게 보이게 했습니다. */
.d-cmp__ours .ico {
  color: var(--success);          /* 초록 — 흰 배경 5.73:1 */
  --ico-bg-opacity: .45;
  font-size: 22px;
  flex: none;
}
.d-cmp__theirs .ico {
  color: var(--accent-500);       /* 빨강 — 흰 배경 5.0:1 */
  --ico-bg-opacity: .30;          /* 상대편이라 조금 여리게 */
  font-size: 22px;
  flex: none;
}

/* 좁은 화면: 열 구성은 그대로 두고 여백만 줄입니다.
   2열이라 어느 폭에서도 줄이 밀리지 않습니다. */
@media (max-width: 640px) {
  .d-cmp__ours,
  .d-cmp__theirs { padding: var(--space-4); gap: var(--space-2); }
  .d-cmp__ours .ico,
  .d-cmp__theirs .ico { font-size: 18px; }
}

/* ─────────── 화면별 전환 : 좁은 화면=표(.d-cmp) / 넓은 화면=2열 카드(.d-vs) ───────────
   ★ 모바일에서는 이 좌우 비교 '표'(.d-cmp)를 그대로 씁니다.
   ★ PC 에서는 표를 숨기고, 아래 .d-vs (좌·우 두 장의 카드)를 대신 보여줍니다.
     두 구조를 따로 두는 이유 : 카드를 '통째로' 마우스 확대하려면 각 열을
     감싸는 요소가 필요한데, 표(줄 구조)로는 열을 통으로 감쌀 수 없어서입니다.
     (내용은 두 곳에 같게 유지 — 한쪽을 고치면 다른 쪽도 같이 고치세요.) */
@media (min-width: 769px) {
  .d-cmp { display: none; }
}

/* ─────────── 대조 카드 : 좌 체인지론 / 우 기존 대출 (PC 전용) ───────────
   ★ 두 카드는 '붙어' 보이되(가운데 틈 0) 실제로는 분리된 카드라,
     마우스를 올리면 각각 따로 떠오르며 커집니다.
   ★ 테두리(검은 선)는 쓰지 않습니다 — 배경색과 그림자로만 카드를 구분합니다. */
.d-vs {
  display: none;                 /* 모바일에선 숨김 — 위 표(.d-cmp)를 대신 씁니다 */
  grid-template-columns: 1fr 1fr;
  gap: 0;                        /* 두 카드를 붙여 놓습니다 */
}
@media (min-width: 769px) {
  .d-vs { display: grid; }
}
.d-vs__card {
  overflow: hidden;
  background: var(--surface);
  border: none;                  /* ★ 검은 테두리 제거 */
  box-shadow: 0 2px 12px rgba(var(--shadow-rgb), .06);
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease);
}
/* 붙어 있으니 바깥쪽 모서리만 둥글게, 맞닿는 안쪽은 각지게 둡니다 */
.d-vs__card--ours {
  background: var(--brand-50);
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}
.d-vs__card--theirs {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
/* ★ 마우스를 올리면 그 카드만 떠오르며 커집니다 (터치기기 제외) */
@media (hover: hover) {
  .d-vs__card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 16px 34px rgba(var(--shadow-rgb), .14);
    border-radius: var(--radius-lg);   /* 떠오를 땐 네 모서리 모두 둥글게 */
    z-index: 1;
    position: relative;
  }
}
.d-vs__head {
  padding: var(--space-5) var(--space-6);
  /* ★ 19px 아래로 내려가면 안 됩니다.
     주황 배경 + 흰 글씨는 '큰 굵은 글씨'(19px 이상 + 700) 기준으로만 통과합니다.
     모바일에서 --fs-h4 가 17px 로 줄어들기 때문에 하한선을 걸어둡니다. */
  font-size: max(19px, var(--fs-h4));
  font-weight: var(--fw-bold);
  background: var(--surface-alt);
  color: var(--ink-700);
}
.d-vs__card--ours .d-vs__head { background: var(--brand-500); color: var(--on-brand); }
.d-vs__list { padding: var(--space-2) var(--space-6) var(--space-6); }
.d-vs__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: var(--border-w) solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.d-vs__list li:last-child { border-bottom: 0; }
.d-vs__list .ico { font-size: 20px; margin-top: 1px; }
.d-vs__card--ours .ico { color: var(--success); }
.d-vs__card--theirs .ico { color: var(--danger); }
.d-vs__card--theirs .d-vs__list li { color: var(--ink-500); }
.d-vs__key {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  margin-bottom: 2px;
}
/* (모바일에서는 .d-vs 를 아예 숨기므로 별도 세로 배치는 두지 않습니다) */

/* ─────────── 알림 상자 (사칭 경고 등) ─────────── */
/* ★ 아이콘을 가운데 위에 두고 글은 그 아래로 내립니다.
     아이콘을 글 왼쪽에 두면 글줄을 옆으로 밀어 읽는 폭이 들쭉날쭉해집니다. */
.d-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  text-align: center;
}
.d-note__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 30px;
  color: var(--danger);
}
.d-note__title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.d-note__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-500);
  max-width: 34em;      /* 가운데 정렬 글은 폭을 좁혀야 읽힙니다 */
  margin-inline: auto;
}
/* 붉은 사칭 주의 상자 — 인증서 아래에 옅은 빨강으로 경고 톤을 줍니다. */
.d-note--warn {
  margin-top: var(--space-8);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

/* ─────────── 정식 등록·인증 문서 (사칭 경고와 한 세트) ───────────
   ★ 문서 썸네일을 누르면 라이트박스로 크게 봅니다(js: setupCertBox). */
.d-cert { margin-top: var(--space-8); }
.d-cert__lead {
  text-align: center;
  font-size: var(--fs-body);
  color: var(--ink-700);
  margin-bottom: var(--space-5);
}
.d-cert__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* 한 줄 = 문서(좌) + 제목·설명(우). 테두리 없는 소프트 박스(가이드 기본). */
.d-cert__row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 132px;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}
/* ★ 문서는 '고정 크기 틀'(100×120)에 넣습니다. 비율이 다른 문서도 이 안에서
   contain 되어 같은 자리를 차지 → 세 상자 높이가 널뛰지 않고 통일됩니다.
   액자(테두리·배경)는 없이, 문서 자체에 옅은 그림자만 줍니다. */
.d-cert__thumb {
  flex: none;
  width: 100px;
  height: 120px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.d-cert__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(var(--shadow-rgb), .18);
}
.d-cert__body { flex: 1; min-width: 0; }
/* 제목 앞 초록 ✓ = "인증 완료" 신호. 밋밋함을 덜고 신뢰감을 줍니다. */
.d-cert__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  margin-bottom: var(--space-2);
}
.d-cert__title .ico { flex: none; color: var(--success); font-size: 20px; --ico-bg-opacity: .4; }
.d-cert__desc { font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-normal); }

/* 모바일 : 가로 배치 유지(이미지 좌·글 우)하되 작게 → 세로로 안 쌓여 짧게 끝납니다. */
@media (max-width: 560px) {
  .d-cert__list { gap: var(--space-3); }
  .d-cert__row { gap: var(--space-4); min-height: 140px; padding: var(--space-4); }
  .d-cert__thumb { width: 74px; height: 92px; padding: 0; }
  .d-cert__title { font-size: var(--fs-body); gap: 6px; }
  .d-cert__title .ico { font-size: 17px; }
  .d-cert__desc { font-size: var(--fs-xs); }
}

/* ─────────── 자리표시(placeholder) — 아직 안 만든 섹션의 공간을 예약합니다 ───────────
   ★ 실제 내용이 준비되면 이 .d-ph 블록을 통째로 지우고 진짜 섹션으로 교체하세요.
     (점선 상자 = "여기 아직 비어 있음"을 눈에 보이게 알리는 임시 표시입니다.) */
.d-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  border: 2px dashed var(--line-strong, var(--line));
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  text-align: center;
}
.d-ph__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  color: var(--brand-ink, var(--brand-600));
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.d-ph__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink-700); }
.d-ph__desc  { font-size: var(--fs-sm); color: var(--ink-500); max-width: 40em; }

/* ─────────── 메인 헤더 (키비주얼) ───────────
   ★ 첫 화면 '간판'. 브랜드 색 면으로 화면을 꽉 채워 "여기가 시작"임을 눈으로 구분합니다.
     (지금까지는 히어로가 흰 배경이라 본문과 경계가 없어 존재감이 약했습니다)
   ★ 색은 브랜드 '한 계열'만. 보색을 섞으면 대부업 광고처럼 보여 신뢰가 깎입니다.
   ★ 아래를 곡선으로 깎아 흰 본문과 부드럽게 잇습니다. */
.d-kv {
  position: relative;
  /* ★★ space 토큰은 1·2·3·4·5·6·8·10·12·16·20·24 만 있습니다.
     없는 값(예: --space-14)을 쓰면 이 선언 '전체'가 무효가 되어 여백이 0 이 됩니다.
     실제로 --space-14 를 썼다가 위쪽 여백이 통째로 사라졌던 자리입니다.
   ★ 아래 여백은 0 — 인물 일러스트가 밴드 바닥을 채우고 흰 곡선이 덮습니다. */
  padding-block: var(--space-24) 0;   /* 위쪽 여백을 조금 더(답답함 완화) */
  /* ★ 배경 = 브랜드 주황 + 아래쪽으로 앰버·노랑 글로우 그라데이션.
     아래 히어로 이미지(hero-pc2)의 오렌지→노랑 배경과 자연스럽게 이어집니다.
     ★★ 글씨(흰색)가 있는 '위쪽'은 브랜드 주황(#ff6600) 그대로 유지합니다.
       위까지 노랑을 올리면 흰 글씨가 안 보입니다. 노랑은 인물 이미지가 있는
       '아래·우하단'에만 깝니다(거긴 흰 글씨가 없습니다). */
  background-color: var(--brand-500);
  /* 블루 밴드 : 위쪽은 브랜드 블루(흰 글씨 자리), 아래로 밝은 블루 글로우 */
  background-image:
    radial-gradient(70% 55% at 88% 100%, rgba(150, 190, 255, .55), rgba(150, 190, 255, 0) 60%),
    linear-gradient(180deg, var(--brand-500) 0%, var(--brand-500) 42%, #8676fa 74%, #c7bcfd 100%);
  color: var(--on-brand);
  text-align: center;
  overflow: hidden;
}
/* ① 카피 2단 — 혜택을 작게 먼저, 브랜드를 크게 마무리 */
/* ─── 첫 화면 등장 모션 ───
   ★★ 반드시 '모든' 요소에 함께 겁니다.
     일부만 숨기면(예전 hero-in) 안 숨긴 요소만 혼자 떠 있어 찌꺼기처럼 보입니다.
   ★ 순서: 문구 → 버튼 → 그림 → 말풍선. 읽는 순서와 같게 맞췄습니다.
   ★ 말풍선이 마지막인 이유: 그림이 자리를 잡은 뒤 말이 얹혀야 '사람이 말한다'로 읽힙니다. */
@keyframes kv-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.d-kv__lead,
.d-kv__title,
.d-kv__search,
.d-kv__artwrap,
.d-kv__voice {
  animation: kv-in .62s var(--ease-out) both;
}
.d-kv__lead    { animation-delay: .05s; }
.d-kv__title   { animation-delay: .14s; }
.d-kv__search  { animation-delay: .24s; }
.d-kv__artwrap { animation-delay: .32s; }
/* 말풍선은 '작게 있다가 톡 하고 퍼지듯' 나타납니다.
   같이 위로 올라오기만 하면 문구·버튼과 구분이 안 돼 눈에 안 띕니다. */
@keyframes kv-voice-in {
  from { opacity: 0; transform: translateY(8px) scale(.82); }
  to   { opacity: 1; transform: none; }
}
.d-kv__voice { animation-name: kv-voice-in; animation-duration: .5s; }
.d-kv__voice:nth-child(1) { animation-delay: .50s; }
.d-kv__voice:nth-child(2) { animation-delay: .62s; }
.d-kv__voice:nth-child(3) { animation-delay: .74s; }
@media (prefers-reduced-motion: reduce) {
  .d-kv__lead,
  .d-kv__title,
  .d-kv__search,
  .d-kv__artwrap,
  .d-kv__voice { animation: none; }
}

/* 윗줄 — 알약 배지로 감싸 '조건 요약'임을 한눈에 보이게 합니다.
   제목만 크게 키우면 윗줄이 묻히므로, 배경을 줘서 따로 읽히게 만듭니다. */
.d-kv__lead {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .2);
  /* 주황 면 위에서는 반투명 흰색이 더 흐려집니다. 불투명 흰색으로 둡니다. */
  color: var(--on-brand);
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: -0.02em;   /* 글자 사이를 살짝 좁혀 한 덩어리로 */
}
.d-kv__lead b { color: var(--on-brand); }
.d-kv__title {
  margin-top: var(--space-2);
  color: var(--on-brand);
  /* 첫 화면 대표 문구 — 토큰(--fs-display 52px)보다 더 커야 해서 clamp 를 씁니다.
     화면 폭에 따라 34px ~ 68px 로 자동 조절됩니다. */
  font-size: clamp(34px, 5vw, 68px);
  font-weight: var(--fw-black);
  /* ★ --lh-tight(1.35) 는 여러 줄 글용입니다. 이 제목은 한 줄이라
     1.35 를 쓰면 글자 위아래로 빈 공간이 그대로 남아 배지·버튼과 멀어 보입니다. */
  line-height: 1.15;
  /* ★ --ls-tight 는 normal(0) 이라 자간이 전혀 안 좁혀집니다.
     본문에서 한글 자간을 좁히면 읽기 나빠지지만, 이건 큰 제목이라
     조금 좁혀야 글자가 흩어져 보이지 않고 한 덩어리로 읽힙니다. */
  letter-spacing: -0.035em;
}
/* ★ 강조 표시를 넣지 않습니다.
   반투명 흰 밑줄을 깔았더니 주황과 섞여 '연주황 얼룩'처럼 보였습니다.
   제목이 이미 충분히 크므로 흰 글씨 그대로가 가장 깔끔합니다. */
.d-kv__title em { font-style: normal; }

/* ② 그림 + USP 말풍선 ------------------------------------------------
   ★ USP 를 문장으로 늘어놓지 않고 그림 주변에 띄웁니다(레퍼런스 방식).
     PC 는 그림 둘레에 절대배치, 모바일은 그림 아래 한 줄로 흐르게 합니다. */
/* 말풍선 — PC 에서는 인물 그림 위에 '여기저기 흩어지게' 띄웁니다.
   나란히 줄세우면 광고 배너처럼 보이고, 인물과 말이 따로 놉니다. */
.d-kv__voices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (min-width: 769px) {
  /* .d-kv 가 기준(position:relative)이라 밴드 전체에 자유롭게 배치됩니다.
     아래(bottom) 기준으로 두어 인물 그림 영역 위에 얹힙니다. */
  .d-kv__voices { position: static; margin: 0; }
  /* 그림 영역(하단 520px)의 '위쪽'에 흩어 둡니다.
     아래로 내리면 인물 얼굴을 가려서 그림이 안 보입니다.

     ★★ 가로 위치를 밴드 폭의 %(10%·41%…)로 잡으면 안 됩니다.
       그림은 1040px 로 고정돼 가운데 정렬인데, %는 화면 폭을 따라가므로
       모니터가 넓어질수록 말풍선만 좌우로 멀어집니다(실제로 그랬습니다).
     → 그림 중앙(50%)에서 px 로 재는 calc() 를 씁니다. 화면 폭이 변해도
       말풍선이 그림에 붙어 있습니다. (그림 반폭 = 520px) */
  .d-kv__voice { position: absolute; z-index: 2; }
  /* ★ bottom 값은 그림 높이(640px)에 맞춰 계산돼 있습니다.
     그림 높이를 바꾸면 이 세 값도 같이 옮겨야 말풍선이 위쪽에 남습니다. */
  .d-kv__voice:nth-child(1) { left: calc(50% - 380px); bottom: 553px; }
  .d-kv__voice:nth-child(2) { left: calc(50% - 265px); bottom: 438px; }
  .d-kv__voice:nth-child(3) { left: calc(50% + 285px); bottom: 515px; }
}

/* ★ 중간 화면(769~1080px) — 그림이 1040px 를 못 채우고 화면 폭에 맞춰 줄어듭니다.
   이 구간에서 calc(50% - 380px) 같은 값을 그대로 쓰면 말풍선이 화면 밖으로 나갑니다.
   그래서 이 대역만 %로 다시 잡습니다. */
@media (min-width: 769px) and (max-width: 1080px) {
  /* ★ right 를 쓸 때는 left:auto 로 풀어야 합니다.
     안 풀면 위(PC)에서 지정한 left 값이 그대로 이겨서 화면 밖으로 나갑니다. */
  .d-kv__voice:nth-child(1) { left: 5%;  right: auto; bottom: 500px; }
  .d-kv__voice:nth-child(2) { left: 26%; right: auto; bottom: 425px; }
  .d-kv__voice:nth-child(3) { left: auto; right: 5%;  bottom: 480px; }
}

/* 인물 일러스트 — 밴드 아래쪽에 크게. 높이를 고정하고 object-fit:cover 로
   확대해 채운 뒤, object-position 을 위쪽에 두어 '아랫부분(다리)'이 잘리게 합니다. */
.d-kv__artwrap {
  /* ★ 위 여백 — 그림 맨 위(치켜든 동전·상자)가 CTA·말풍선에 닿지 않게 띄웁니다.
     좁히면 동전이 '내 한도 조회하기' 버튼과 겹쳐 보입니다. */
  margin-top: var(--space-12);
  /* ★ 세로 높이 — 주황 면이 아래로 내려오는 양이자, 그림이 보이는 양입니다.
     키울수록 다리가 덜 잘리고 주황 영역이 넓어집니다. */
  height: 640px;
}
.d-kv__artwrap picture { display: block; height: 100%; }
.d-kv__art {
  display: block;
  width: min(1040px, 100%);
  height: 100%;
  margin-inline: auto;
  object-fit: cover;
  /* ★ 맨 위(top) 기준 — 치켜든 팔·택배상자가 잘리지 않습니다.
     영역 높이(520px)가 원본의 약 68% 라, 위는 다 보이고 '다리만' 잘립니다.
     ※ 0% 보다 내리면(12%·25%) 위쪽 팔이 잘립니다. 내리지 마세요. */
  object-position: center top;
}
/* USP 를 '손님이 직접 말하는' 말풍선으로 — 이름표 + 흰 말풍선.
   ★ 딱딱한 라벨("신용조회 X")보다 남의 경험담이 훨씬 잘 읽힙니다. */
.d-kv__voice { width: max-content; max-width: 250px; text-align: left; }
.d-kv__voice-who {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--on-brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.d-kv__voice-say {
  padding: var(--space-3) var(--space-4);
  /* 왼쪽 아래만 각지게 → 말풍선 꼬리 느낌 */
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
  background: var(--surface);
  color: var(--ink-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .22);
}
.d-kv__voice-say b { color: var(--brand-ink); }
@media (max-width: 768px) {
  /* ★ 모바일도 말풍선을 줄세우지 않고 '흩어서' 띄웁니다.
       그림과 겹쳐도 괜찮습니다(업체 요청). 다만 말풍선끼리는 겹치면 못 읽으므로
       세로로 60px 씩 어긋나게 두고, 좌·우·좌 로 지그재그 배치합니다. */
  .d-kv__voices { position: static; margin: 0; }
  /* ★ 말풍선은 CTA 와 그림 사이의 '빈 주황 공간'에 계단식으로 넣습니다.
     bottom 값은 그림 높이(340px) 위쪽부터 시작하므로, 그림이 아래에 붙어 있는 한
     화면 크기가 달라져도 항상 그 빈칸 안에 머뭅니다. */
  .d-kv__voice { position: absolute; z-index: 2; max-width: 66vw; }
  /* ★ 화면 좌우 끝에 붙이지 않습니다. 가장자리에 딱 붙으면 잘린 것처럼 보입니다.
     왼쪽에서 시작해 오른쪽 아래로 내려가는 '계단식'으로 두어
     세 마디가 순서대로 읽히게 합니다. */
  /* ★ 좌 → 우 → 가운데 로 '중앙에서 퍼지듯' 벌려 놓고,
     아래로 갈수록 그림에 붙게 해서 말풍선과 인물이 이어져 보이게 합니다.
     말풍선 높이가 58px 이므로 세로 간격 68px = 약 10px 틈(붙지 않는 최소치). */
  /* ★ 말풍선 높이가 59px 이므로 세로 간격은 73px(=59+14) 로 잡습니다.
     이보다 좁으면 서로 겹칩니다. 위 margin-top(빈 공간)도 여기에 맞춰 늘려야 합니다. */
  .d-kv__voice:nth-child(1) { left: 10%;  right: auto; bottom: 480px; }
  .d-kv__voice:nth-child(2) { left: auto; right: 6%;   bottom: 407px; }
  .d-kv__voice:nth-child(3) { left: 20%;  right: auto; bottom: 334px; }
  /* 모바일에서는 말풍선이 작아 잘 안 읽혀서 약 1.3배로 키웁니다 */
  .d-kv__voice { max-width: 76vw; }
  .d-kv__voice-who { font-size: 14px; }
  .d-kv__voice-say { font-size: 17px; padding: 10px var(--space-4); }
  /* ★ 375px 화면에서 이 그림의 자연 높이는 약 302px 입니다.
       그보다 높이면 cover 가 '좌우'를 잘라내 바깥쪽 인물이 깎입니다.
       340px = 좌우 6% 정도만 깎이는 균형점입니다.
     ★ margin-top 190px = 그림을 아래로 내리면서 생기는 '빈 주황 공간'입니다.
       이 공간에 말풍선이 들어가고, 밴드가 화면을 꽉 채워
       아래 '상담고객 95%' 배지가 첫 화면에 안 보이게 됩니다. */
  .d-kv__artwrap { height: 340px; margin-top: 230px; }
}

/* ③ 검색창 모양 CTA — 버튼보다 "알아보세요" 느낌이 납니다 */
.d-kv__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(470px, 100%);
  min-height: 68px;
  margin: var(--space-5) auto 0;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  /* ★ 흰색은 주황 면 위에서 묻힙니다(둘 다 밝아 경계가 약함).
     카톡 노랑(--kakao-bg)은 주황과 명도 차가 커서 확 튀고,
     실제로 카톡 상담으로 연결되는 버튼이라 색이 곧 안내가 됩니다. */
  background: var(--kakao-bg);
  color: var(--kakao-ink);
  font-weight: var(--fw-bold);
  box-shadow: 0 14px 34px rgba(var(--shadow-rgb), .32);
  transition: transform var(--dur-fast) var(--ease-spring);
}
@media (hover: hover) { .d-kv__search:hover { transform: translateY(-2px); } }
.d-kv__search-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; }
.d-kv__search-ico img { width: 34px; height: 34px; object-fit: contain; }
.d-kv__search-txt { flex: 1; text-align: left; font-size: var(--fs-h3); }
/* 오른쪽 화살표(꺾쇠) — 노란 버튼 위에서 주황 원이 시선을 끌어당깁니다.
   ★ 살짝 커졌다 작아지며 "여기를 누르세요"를 알립니다.
     애니메이션 최소화 설정에서는 자동으로 멈춥니다(아래 media 규칙). */
.d-kv__search-go {
  flex: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  /* 노란 버튼 위 → 흰 원 + 검정 화살표.
     무채색이라 어떤 배경과도 안 싸우고, 화살표가 가장 또렷하게 보입니다. */
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(var(--shadow-rgb), .2);
  position: relative;
  animation: kv-go-pulse 1.8s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes kv-go-pulse {
  0%, 70%, 100% { transform: scale(1); }
  35%           { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .d-kv__search-go { animation: none; }
}
.d-kv__search-go::before {
  content: "";
  position: absolute;
  top: 50%; left: 45%;
  width: 8px; height: 8px;
  /* 흰 원 위 → 진한 먹색 화살표(가장 또렷). 살짝 굵게 해 더 잘 보이게 합니다. */
  border-right: 2.5px solid var(--ink-900);
  border-bottom: 2.5px solid var(--ink-900);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ─────────── 이미지 자리표시 (아직 못 받은 그림) ───────────
   ★ 실제 이미지가 오면 이 .img-todo 요소를 <img> 로 바꾸면 됩니다. */
.img-todo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 2px dashed rgba(255, 255, 255, .55);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .12);
  color: var(--on-brand);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  text-align: center;
}
.img-todo span {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--on-brand);
  max-width: 30em;
}
/* 아래 곡선 — 흰 본문이 위로 살짝 밀고 올라오는 모양 */
.d-kv__curve {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -1px;
  height: 56px;
  background: var(--bg);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
@media (max-width: 768px) {
  /* 아래 여백 0 — 인물 일러스트가 밴드 바닥까지 닿아야 자연스럽게 잘립니다 */
  .d-kv { padding-block: var(--space-16) 0; }

  /* ★ 첫 화면 대표 문구 — 모바일 기본 토큰(27px)은 이 자리에선 작습니다.
     CTA 버튼보다 제목이 커야 시선 순서가 '문구 → 버튼' 으로 잡힙니다. */
  .d-kv__lead  { font-size: 19px; padding: var(--space-2) var(--space-4); }
  .d-kv__title { font-size: 37px; margin-top: var(--space-2); }
  /* 반대로 버튼은 한 단계 줄여 제목과 크기 순서를 정리합니다 */
  .d-kv__search { min-height: 60px; }
  .d-kv__search-txt { font-size: var(--fs-h4); }
  .d-kv__search-ico { width: 32px; height: 32px; }
  .d-kv__search-ico img { width: 28px; height: 28px; }
  .d-kv__search-go { width: 36px; height: 36px; }
  .d-kv__chips { gap: 6px; margin-top: var(--space-6); }
  .d-kv__chips li { padding: 6px var(--space-3); font-size: var(--fs-xs); }
  .d-kv__curve { height: 38px; }
}

/* ─────────── 첫 방문 팝업 배너 ───────────
   ★ 하단 고정 CTA 띠(z-index 1000)보다 위에 떠야 하므로 1200 을 씁니다. */
.d-pop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: var(--space-5); }
.d-pop[hidden] { display: none; }
.d-pop__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.d-pop__card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  text-align: center;
  animation: pop-in .28s var(--ease-out) both;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .d-pop__card { animation: none; } }
.d-pop__x {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  color: var(--ink-500); font-size: 18px; line-height: 1;
}
.d-pop__x:hover { background: var(--surface-alt); }
.d-pop__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--brand-50); color: var(--brand-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.d-pop__badge .ico { width: 1.1em; height: 1.1em; }
.d-pop__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h3); font-weight: var(--fw-black);
  line-height: var(--lh-tight); color: var(--ink-900);
}
.d-pop__title em { font-style: normal; color: var(--brand-ink); }
.d-pop__sub { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-normal); }
.d-pop__list {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  text-align: left;
}
.d-pop__list li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--ink-700);
}
.d-pop__list li + li { margin-top: var(--space-2); }
.d-pop__list .ico { flex: none; width: 18px; height: 18px; color: var(--success); --ico-bg-opacity: .4; }
.d-pop__cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: var(--space-5);
  min-height: 54px;
  border-radius: var(--radius-lg);
  background: var(--kakao-bg); color: var(--kakao-ink);
  font-size: var(--fs-body); font-weight: var(--fw-bold);
}
.d-pop__cta:hover { filter: brightness(.97); }
.d-pop__today {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-4);
  font-size: var(--fs-xs); color: var(--ink-500); cursor: pointer;
}

/* ─────────── 하단 CTA 띠 (당근 하단 풀블리드 패턴) ─────────── */
.d-band {
  position: relative;
  padding-block: var(--space-20);
  /* 마무리 CTA 는 어두운 띠 (가이드 정의). 순검정이 아닌 브랜드 다크 #2a3038.
     (예전엔 없는 배경사진용 55% 검정 오버레이가 얹혀 거의 블랙이 됐습니다) */
  background: var(--footer-bg);
  text-align: center;
  overflow: hidden;
}
/* 사진을 깔 때 쓰는 변형 — 당근 하단은 사진 위 흰 제목입니다 */
.d-band--media .d-band__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.d-band--media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);   /* 사진 밝기와 무관하게 흰 글자가 읽히도록 */
}
.d-band--media .container { position: relative; z-index: 1; }
.d-band__title {
  color: var(--on-dark);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.d-band__sub {
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  color: var(--on-dark-mid);
}
/* 어두운 띠 위 강조 칩 — 핵심 4가지를 알약으로. 앞에 주황 점으로 살짝 강조. */
.d-band__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.d-band__chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  border: var(--border-w) solid var(--on-dark-line);
  color: var(--on-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.d-band__chips li::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--brand-500);   /* 주황 점 = 살짝 강조 */
}
/* ★ 좁은 화면 : 알약 4개가 3+1 로 어정쩡하게 접히던 걸
     2×2 격자로 반듯하게 맞춥니다. 칸 폭이 같아 줄바꿈이 깔끔해집니다. */
@media (max-width: 560px) {
  .d-band__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    max-width: 340px;
    margin-inline: auto;
  }
  .d-band__chips li { justify-content: center; }
}
.d-band__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
/* 어두운 띠 위의 보조 버튼 (혹시 남아 있는 .btn--ghost 용) */
.d-band .btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--on-dark-line);
}
.d-band .btn--ghost:hover { background: var(--on-dark-line); }

@media (max-width: 480px) {
  .d-band__cta { flex-direction: column; }
  /* ★ 좁은 화면에서 버튼은 예외 없이 좌우로 꽉 채웁니다. */
  .d-band__cta .btn,
  .d-band__cta .cta-btn,
  .d-split__body .btn { width: 100%; max-width: none; }
}