/* ============================================================
   21. 페이지 블록  ―  레퍼런스(머니프렌즈)에서 반복되는 큰 덩어리들
   ------------------------------------------------------------
   5개 업체가 공통으로 씁니다. 색·크기는 전부 토큰에서 옵니다.
   ============================================================ */

/* ─────────── 메인 히어로 ─────────── */
.hero {
  position: relative;
  padding-block: var(--space-20) 0;
  text-align: center;
  background: var(--surface-alt);
  overflow: hidden;
}
.hero__badge { margin-bottom: var(--space-6); }
.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
/* 흰/밝은 배경 위 강조 글씨 → 반드시 --brand-ink (대비 확보) */
.hero__title em { font-style: normal; color: var(--brand-ink); }
.hero__sub {
  margin-top: var(--space-5);
  color: var(--ink-500);
  font-size: var(--fs-lead);
}
.hero__cta { margin-top: var(--space-8); }

/* 인물 이미지 뒤 원형 브랜드 그래픽 */
.hero__visual {
  position: relative;
  margin-top: var(--space-10);
  display: grid;
  place-items: end center;
}
.hero__visual::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: min(460px, 62vw);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
}
.hero__visual img {
  position: relative;
  max-height: 520px;
  width: auto;
}

/* ─────────── 히어로 : 좌우 분할형 (인물 이미지용) ───────────
   가이드 2-1. 왼쪽에 글, 오른쪽에 인물.
   모바일에서는 글이 먼저 오고 인물이 아래로 갑니다.
   (인물을 위에 두면 첫 화면에서 정작 읽어야 할 문구가 밀려납니다) */
.hero--split { text-align: left; padding-block: var(--space-16) 0; }
.hero--split .container {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-10);
  align-items: center;
}
.hero--split .hero__title,
.hero--split .hero__sub { margin-inline: 0; }
.hero--split .cta-pair { text-align: left; }
.hero--split .cta-pair__btns { justify-content: flex-start; }

/* 인물 뒤에 깔리는 브랜드색 원 */
.hero__person {
  position: relative;
  display: grid;
  place-items: end center;
  align-self: end;
}
.hero__person::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: min(400px, 90%);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
}
.hero__person img {
  position: relative;
  max-height: 460px;
  width: auto;
}

/* 인물 이미지가 없거나 로드에 실패한 경우 → 한 칸짜리 가운데 정렬로 자동 전환.
   (이 처리가 없으면 오른쪽 열이 빈 채 남아 첫 화면이 반쪽으로 눌립니다) */
.hero--split.is-textonly .container { grid-template-columns: 1fr; }
.hero--split.is-textonly { text-align: center; }
.hero--split.is-textonly .hero__sub { margin-inline: auto; }
.hero--split.is-textonly .cta-pair,
.hero--split.is-textonly .cta-pair__btns,
.hero--split.is-textonly .micro-facts { justify-content: center; text-align: center; }
.hero--split.is-textonly .hero__person { display: none; }

@media (max-width: 1024px) {
  .hero--split .container { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero--split { text-align: center; }
  .hero--split .cta-pair,
  .hero--split .cta-pair__btns { text-align: center; justify-content: center; }
  .hero--split .hero__sub { margin-inline: auto; }
  .hero__person img { max-height: 320px; }
}
@media (max-width: 768px) {
  .hero__person img { max-height: 240px; }
}

/* ─────────── 소요시간·운영시간 한 줄 안내 (11번·19번) ───────────
   버튼 근처에 두어 "얼마나 걸리는지" 불확실성을 없앱니다. */
.micro-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
.micro-facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.micro-facts strong { color: var(--ink-900); font-weight: var(--fw-bold); }
.hero--split .micro-facts { justify-content: flex-start; }
@media (max-width: 1024px) { .hero--split .micro-facts { justify-content: center; } }

/* ─────────── "이런 분들이 문의하십니다" (15번) ───────────
   ★ 가공 인물을 만들지 않습니다. 실제 문의 '유형'만 정리합니다.
     읽는 사람이 자기 상황을 대입하게 하는 것이 목적입니다. */
.case-list {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--gap-grid);
}
.case-item {
  position: relative;
  padding: var(--card-p);
  padding-left: calc(var(--card-p) + var(--space-3));
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
  text-align: left;
}
/* 왼쪽 브랜드색 세로 막대 */
.case-item::before {
  content: "";
  position: absolute;
  left: var(--card-p);
  top: var(--card-p);
  bottom: var(--card-p);
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
}
.case-item__situation {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}
.case-item__detail {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
/* 유형 예시임을 밝히는 주석 — 생략하지 마세요 */
.case-note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ─────────── 통계 바 (2,021년 / 110,081명 / 5분) ─────────── */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--stat-p);
  text-align: center;
}
.stat-bar__item + .stat-bar__item { border-left: var(--border-w) solid var(--line); }
.stat-bar__num {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  color: var(--ink-900);
  line-height: 1.2;
}
.stat-bar__num small {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  margin-left: 2px;
}
.stat-bar__label {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
.stat-bar__note {
  margin-top: var(--space-3);
  text-align: right;
  font-size: var(--fs-xs);
  /* 각주도 읽으라고 쓰는 글자입니다. --ink-300 은 대비 2.4:1 로 기준 미달이므로 쓰지 않습니다 */
  color: var(--ink-500);
}

@media (max-width: 768px) {
  .stat-bar { grid-template-columns: 1fr; gap: var(--space-4); }
  .stat-bar__item + .stat-bar__item {
    border-left: 0;
    border-top: var(--border-w) solid var(--line);
    padding-top: var(--space-4);
  }
}

/* ─────────── 좌측 설명 + 우측 지그재그 카드 ─────────── */
.feature-split {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.6fr;
  gap: var(--space-12);
  align-items: start;
}
.feature-split__lead h2 { margin-bottom: var(--space-4); }
.feature-split__lead h2 em { font-style: normal; color: var(--brand-ink); display: block; }

.feature-list { display: flex; flex-direction: column; gap: var(--space-4); }
.feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
}
/* 레퍼런스처럼 카드가 좌우로 번갈아 들여쓰기 */
.feature-item:nth-child(even) { margin-left: var(--space-10); }
.feature-item__ico { font-size: 34px; flex: none; }
.feature-item__cap { font-size: var(--fs-xs); color: var(--ink-500); }
.feature-item__txt { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink-900); }

@media (max-width: 1024px) {
  .feature-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .feature-item:nth-child(even) { margin-left: 0; }
}

/* ─────────── 비교표 (자사 vs 기존) ─────────── */
/* 당근 톤: 주황을 넓게 칠하지 않습니다.
   바깥은 연회색 면으로 두고, 우리 쪽 열만 주황으로 강조합니다. */
.compare {
  background: var(--surface-alt);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.compare__head {
  display: grid;
  grid-template-columns: var(--compare-label-w, 190px) 1fr 1fr;
  padding-bottom: var(--space-5);
  text-align: center;
  font-weight: var(--fw-bold);
  color: var(--ink-500);
}
/* 우리 쪽 열 제목만 주황 알약으로 강조 */
.compare__head span:nth-child(2) {
  justify-self: center;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-tag);
  /* 작은 글씨가 올라가므로 흰 글씨 4.5:1 을 만족하는 진한 주황을 씁니다 */
  background: var(--brand-500);
  color: var(--on-brand);
}
.compare__body {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.compare__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--border-w) solid var(--line);
}
.compare__row:first-child { border-top: 0; }
.compare__cell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-sm);
}
.compare__cell + .compare__cell { border-left: var(--border-w) solid var(--line); }
.compare__cell--bad { color: var(--ink-500); }
.compare__mark { flex: none; font-size: 18px; line-height: 1.3; }
.compare__mark--ok  { color: var(--success); }
.compare__mark--no  { color: var(--danger); }

/* 왼쪽 항목 라벨 열 */
.compare__labels {
  display: grid;
  color: var(--ink-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.compare__layout {
  display: grid;
  grid-template-columns: var(--compare-label-w, 190px) 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
.compare__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-2);
}

@media (max-width: 768px) {
  .compare { padding: var(--space-5); }
  .compare__layout, .compare__head { grid-template-columns: 1fr; }
  .compare__head { display: none; }
  .compare__labels { display: none; }
  .compare__row { grid-template-columns: 1fr; }
  .compare__cell + .compare__cell {
    border-left: 0;
    border-top: var(--border-w) solid var(--line);
  }
  /* 모바일에서는 각 칸에 무엇을 비교하는지 라벨을 붙여줍니다 */
  .compare__cell::before {
    content: attr(data-label);
    font-weight: var(--fw-bold);
    color: var(--ink-900);
    margin-right: var(--space-2);
  }
}

/* ─────────── CTA 묶음 (카톡 주 + 전화 보조 + 안심 한 줄) ───────────
   가이드 2-2: 버튼은 딱 2개, 문구는 사이트 전체에서 동일.
   버튼 아래 안심 문구는 생략 금지. */
.cta-pair { text-align: center; }
.cta-pair__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);          /* 가이드 1-8: 오조작 방지 최소 간격 */
}
.cta-pair__assure {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
@media (max-width: 480px) {
  .cta-pair__btns { flex-direction: column; }
  .cta-pair__btns .btn { width: 100%; }
}

/* 어두운 띠 위에 올리는 변형 */
.cta-pair--band {
  background: var(--footer-bg);
  color: var(--ink-invert);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--card-p);
}
.cta-pair--band .cta-pair__assure { color: var(--on-dark-mid); }

/* ─────────── 안심 블록 (서류X 방문X 신용조회X 폼X) ───────────
   가이드 2-3 ④ : 이탈 1차 방어선 */
.assure-list {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--gap-grid);
}
.assure-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--card-p);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
  text-align: left;
}
.assure-item__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  color: var(--brand-ink);
  font-size: 18px;
  font-weight: var(--fw-black);
}
.assure-item__title { margin-bottom: var(--space-2); font-size: var(--fs-h4); }
.assure-item__text  { font-size: var(--fs-sm); color: var(--ink-500); }

/* ─────────── 사칭 경고 띠 ───────────
   가이드 2-3 ② : 역설적으로 신뢰를 올리는 장치 */
.warn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--card-p);
  background: var(--accent-50);
  border: var(--border-w) solid var(--accent-500);
  border-radius: var(--radius-lg);
}
.warn__ico   { flex: none; font-size: 28px; line-height: 1.2; }
.warn__title { margin-bottom: var(--space-3); color: var(--accent-600); }
.warn__text  { font-size: var(--fs-sm); color: var(--ink-700); }

/* ─────────── 실체 증명 (법인명·대표자·주소·등록번호) ───────────
   가이드 2-3 ① : 푸터가 아니라 본문에 노출 */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-1) var(--space-8);
  padding: var(--card-p);
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
}
.proof__row {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-w) solid var(--line);
  font-size: var(--fs-sm);
}
.proof__key {
  flex: none;
  width: 108px;
  color: var(--ink-500);
}
.proof__val { color: var(--ink-900); font-weight: var(--fw-medium); }

/* ─────────── 후기 카드 (사진 위 텍스트) ─────────── */
.review-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.review-card img { width: 100%; height: 100%; object-fit: cover; }
.review-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 아래쪽을 어둡게 깔아 흰 글씨 가독성을 확보합니다 */
  background: linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim) 45%, transparent 100%);
  z-index: 1;
}
.review-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-tag);
  background: var(--brand-500);
  color: var(--on-brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.review-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-5);
  color: var(--on-dark);
}
.review-card__quote { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.review-card__who   { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--on-dark-mid); }

/* ─────────── 후기 카드 : 분리형 (★ 기본으로 이걸 쓰세요) ───────────
   가이드 1-6: 사진 위 글씨는 밝기를 보장할 수 없어 대비가 무너집니다.
   사진과 글을 위아래로 분리하면 어떤 사진이 와도 항상 읽힙니다. */
.review-split {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.review-split__photo {
  aspect-ratio: 16 / 10;
  background: var(--surface-alt);
}
.review-split__photo img { width: 100%; height: 100%; object-fit: cover; }

.review-split__body { padding: var(--card-p); text-align: left; }
.review-split__badge {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.review-split__quote {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}
.review-split__who {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ─────────── 신뢰 카드 (인증서 이미지 + 설명) ─────────── */
.trust-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--card-p);
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
}
.trust-card__img {
  flex: none;
  width: 108px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}
.trust-card__title { margin-bottom: var(--space-3); }
.trust-card__text  { font-size: var(--fs-sm); color: var(--ink-500); }

@media (max-width: 480px) {
  .trust-card { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ─────────── 기관 로고 줄 ─────────── */
.authority {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-10);
}
.authority img { height: 30px; width: auto; opacity: .85; }

/* ─────────── 지그재그 진행 타임라인 (Step 1·2·3) ─────────── */
.steps { position: relative; padding-block: var(--space-8); }
/* 가운데 점선 */
.steps::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  border-left: 2px dashed var(--brand-400);
  transform: translateX(-50%);
}
.steps__item {
  position: relative;
  width: calc(50% - var(--space-12));
  margin-bottom: var(--space-10);
  padding: var(--card-p);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.steps__item:nth-child(even) { margin-left: calc(50% + var(--space-12)); }
/* 가운데 선 위의 동그란 표식 */
.steps__item::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  border: 3px solid var(--brand-500);
  border-radius: var(--radius-pill);
  background: var(--bg);
  transform: translateY(-50%);
}
.steps__item:nth-child(odd)::after  { right: calc(-1 * var(--space-12) - 8px); }
.steps__item:nth-child(even)::after { left:  calc(-1 * var(--space-12) - 8px); }

.steps__no {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-tag);
  background: var(--brand-500);
  color: var(--on-brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.steps__title { margin-bottom: var(--space-2); }
.steps__text  { font-size: var(--fs-sm); color: var(--ink-500); }

@media (max-width: 768px) {
  .steps::before { left: 12px; }
  .steps__item,
  .steps__item:nth-child(even) {
    width: auto;
    margin-left: var(--space-10);
  }
  .steps__item::after,
  .steps__item:nth-child(odd)::after,
  .steps__item:nth-child(even)::after {
    top: var(--space-8);
    left: calc(-1 * var(--space-10) + 4px);
    right: auto;
  }
}

/* ─────────── TIP 박스 ─────────── */
.tip {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.tip + .tip { margin-top: var(--space-3); }
.tip__no {
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-500);
}
.tip strong { color: var(--brand-ink); }

@media (max-width: 480px) {
  .tip { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* ─────────── 이동 경로 (빵부스러기) ───────────
   검색엔진이 사이트 구조를 이해하는 데 쓰이고,
   방문자에게는 "지금 어디에 있는지"를 알려줍니다. */
.breadcrumb {
  /* 링크 자체가 44px 높이를 갖도록 하고, 바 여백은 줄여 전체 높이를 유지합니다 */
  padding-block: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumb li { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a  { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: var(--space-2); color: var(--ink-300); }
.breadcrumb a:hover { color: var(--brand-ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-900); font-weight: var(--fw-bold); }

/* ─────────── 본문 글 묶음 (소개·안내 페이지용) ─────────── */
.article { max-width: 820px; margin-inline: auto; }
.article h2 { margin-top: var(--space-12); margin-bottom: var(--space-5); }
.article h2:first-child { margin-top: 0; }
.article h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.article p  { margin-bottom: var(--space-4); max-width: 34em; }
.article ul { margin-bottom: var(--space-5); }
.article li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  max-width: 34em;
}
.article li::before {
  content: "•";
  position: absolute;
  left: var(--space-2);
  color: var(--brand-ink);
  font-weight: var(--fw-black);
}

/* ─────────── 상품 스펙 표 ─────────── */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td {
  padding: var(--space-4) var(--space-2);
  border-bottom: var(--border-w) solid var(--line);
  font-size: var(--fs-sm);
  text-align: left;
}
.spec th {
  width: 38%;
  color: var(--ink-500);
  font-weight: var(--fw-medium);
}
.spec td { color: var(--ink-900); font-weight: var(--fw-bold); text-align: right; }

/* ─────────── 서브페이지 상단 배너 ─────────── */
.page-hero {
  display: grid;
  place-content: center;
  min-height: var(--page-hero-h);
  padding-block: var(--space-8);
  text-align: center;
  background-color: var(--hero-band);
  background-image: var(--hero-pattern);
}
.page-hero__title {
  color: var(--ink-900);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
}
/* 제목 아래 짧은 주황 선 — 브랜드색을 여기서만 씁니다 */
.page-hero__title::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: var(--space-4) auto 0;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
}
.page-hero__sub {
  margin-top: var(--space-4);
  color: var(--ink-500);
  font-size: var(--fs-sm);
}

/* ─────────── 문의 STEP 카드 (머리에 색 띠) ─────────── */
.step-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.step-card__head {
  padding: var(--space-4);
  background: var(--brand-500);
  color: var(--on-brand);
  text-align: center;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}
.step-card__body { padding: var(--card-p); text-align: center; }
.step-card__note { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--ink-500); }

/* ─────────── 하단 강조 안내 띠 ─────────── */
.notice-band {
  background: var(--brand-500);
  color: var(--on-vivid);
  text-align: center;
  padding-block: var(--section-y);
}
.notice-band__ico   { font-size: 56px; margin-bottom: var(--space-5); }
.notice-band__title { color: var(--on-brand); margin-bottom: var(--space-4); }
.notice-band__text  { font-size: var(--fs-sm); opacity: .82; }

/* ─────────── 좌우 CTA 띠 (어두운 배경) ─────────── */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-12) var(--card-p);
  border-radius: var(--radius-lg);
  background: var(--footer-bg);
  color: var(--ink-invert);
}
.cta-band__title { color: var(--ink-invert); margin-bottom: var(--space-2); }
.cta-band__sub   { font-size: var(--fs-sm); opacity: .7; }

/* ─────────── FAQ 카드형 아코디언 (레퍼런스 스타일) ─────────── */
/* ★ 당근 FAQ는 카드가 아닙니다.
   배경·테두리·그림자 없이 아래 구분선만 두고, 질문도 굵지 않습니다.
   실측: 18px / 굵기 400 / 위아래 여백 24px / 구분선 rgba(0,23,88,.05) */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: var(--border-w) solid var(--line); }

.faq-item__q {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;              /* 터치 영역 확보 */
  padding: var(--space-6) 0;
  text-align: left;
  font-size: var(--fs-body);      /* 당근 실측 18px */
  font-weight: var(--fw-regular); /* 당근은 굵게 쓰지 않습니다 */
  color: var(--ink-900);
}
.faq-item__q::after {
  content: "›";
  margin-left: auto;
  color: var(--ink-300);
  font-size: 22px;
  /* 90도까지 갔다가 살짝 지나쳐 되돌아옵니다. 돌리는 손맛이 납니다. */
  transition: transform var(--dur-base) var(--ease-spring),
              color var(--dur-fast) var(--ease);
}
.faq-item.is-open .faq-item__q { font-weight: var(--fw-bold); }
.faq-item.is-open .faq-item__q::after { transform: rotate(90deg); color: var(--brand-ink); }
/* 누르는 순간 화살표만 살짝 오그라듭니다.
   ★ 질문 줄 전체를 오그라뜨리면 글자가 흔들려 읽기 나쁩니다. */
.faq-item__q:active::after { transform: scale(.85); transition-duration: var(--dur-instant); }
.faq-item.is-open .faq-item__q:active::after { transform: rotate(90deg) scale(.85); }
/* 마우스를 올리면 화살표가 가야 할 쪽을 미리 알려줍니다 */
.faq-item__q:hover::after { color: var(--ink-500); }

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  /* visibility 를 함께 전환해 접힌 답변이 화면낭독기·탭 이동에서 빠지게 합니다 (WCAG 4.1.2) */
  visibility: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}
.faq-item.is-open .faq-item__a {
  grid-template-rows: 1fr;
  visibility: visible;
}
.faq-item__a > div { overflow: hidden; }
.faq-item__a p {
  padding: 0 0 var(--space-6);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-500);
  max-width: 34em;
}

/* ─── 질문/답변 앞 Q · A 배지 : 무엇이 질문이고 답인지 한눈에 ─── */
.faq-item__q::before,
.faq-item__a > div::before {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
/* Q = 브랜드 주황(질문) */
.faq-item__q::before {
  content: "Q";
  background: var(--brand-500);
  color: var(--on-brand);
}
/* A = 옅은 회색(답변).
   ★★ 배지를 문단(p)이 아니라 '바깥 상자'에 겁니다.
     p 를 flex 로 만들면 문단 안의 <strong> 같은 태그가 저마다 한 칸이 되어
     글이 세로로 쪼개집니다(실제로 그 버그가 났습니다). 절대 되돌리지 마세요. */
.faq-item__a > div { display: flex; align-items: flex-start; gap: var(--space-4); }
.faq-item__a > div::before {
  content: "A";
  margin-top: 1px;
  background: var(--surface-alt);
  color: var(--ink-700);
}
.faq-item__a p { flex: 1; min-width: 0; }