/* ============================================================
   31-renewal.css — '비상금비서' 페이지 구성 반영 (2026-10-20)

   ★ 색·글꼴·카드 모양은 비상금마켓 그대로 두고, 섹션 '구성'만 바꿨습니다.
     · 헤더 아래 안내 띠            .p-eventbar   (모든 페이지)
     · 첫 화면 인물 사진 + 숫자 상자  .d-kv__figure · .d-kv__stats (메인)
     · 특징 카드 5개                .p-feats      (메인)
     · 서비스 소개 배너             .p-intro      (메인)
     · 상품 카드 2종 (색 옮겨가기)   .p-plans      (메인)
     · 진행절차 사진 + 단계          .p-guide      (메인)
     · 회사 연혁                     .p-history    (메인)
     · 헤더 옆에서 나오는 메뉴       .nav · .header__cta (모든 페이지)
     · 오른쪽 아래 전화·카톡 버튼   .p-fab        (모든 페이지)
   ============================================================ */

/* ═══ 1. 헤더 아래 안내 띠 ═══
   ★ 헤더가 화면 위에 고정이라, 이 띠는 헤더 바로 아래에 두고 같이 스크롤됩니다. */
.p-eventbar { background: var(--ink-900); }
.p-eventbar a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: var(--container-max); margin-inline: auto;
  padding: 10px var(--container-x);
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.p-eventbar b { color: var(--brand-400); }
.p-eventbar__tag {
  flex: none;
  padding: 3px 8px; border-radius: var(--radius-tag);
  background: var(--brand-500); color: #fff; font-size: var(--fs-tag);
}
.p-eventbar__arrow { transition: transform var(--dur-fast) var(--ease); }
.p-eventbar a:hover .p-eventbar__arrow { transform: translateX(4px); }
@media (max-width: 768px) { .p-eventbar a { font-size: 13px; padding-block: 8px; } }

/* 메뉴가 5개로 늘어 좁은 휴대폰에서는 넘칩니다.
   ★ 오른쪽 정렬(flex-end) 그대로 두면 넘친 왼쪽 메뉴(상품소개)에 손가락이 닿지 않습니다.
     → 왼쪽부터 쌓고 옆으로 밀어서 보게 합니다. 다 들어가는 화면에서는 그대로 오른쪽에 붙습니다. */
@media (max-width: 768px) {
  .nav__list { justify-content: flex-start; gap: var(--space-3); }
}

/* ═══ 2. 첫 화면 : 배지 → 제목 → 부제 → 인물 사진 → 숫자 상자 (예시 사이트 구성) ═══
   ★ 사진은 img/hero-model.png 를 넣으면 자동으로 붙습니다(index.html 주석 참고).
   ★ 숫자 상자는 사진 아래쪽에 겹쳐 올라오는 흰 상자 하나입니다. */
.d-kv__sub {
  margin-top: var(--space-3);
  color: var(--on-brand);
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: var(--fw-bold);
  opacity: .92;
  animation: kv-in .62s var(--ease-out) .18s both;
}
.d-kv__figure {
  position: relative;
  width: min(540px, 92%);
  aspect-ratio: 1 / 1;
  margin: clamp(20px, 3vw, 36px) auto 0;
  animation: kv-in .62s var(--ease-out) .26s both;
}
/* 사진 뒤 은은한 빛 */
.d-kv__glow {
  position: absolute; left: 50%; top: 54%;
  width: 96%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, 0) 70%);
}
.d-kv__photo {
  position: relative;
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
}
.d-kv__stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 820px; margin: -64px auto 0;
  padding: clamp(16px, 2.4vw, 28px) clamp(6px, 2vw, 20px);
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), .16);
  animation: kv-in .62s var(--ease-out) .36s both;
}
.d-kv__stat + .d-kv__stat { border-left: 1px solid var(--line); }
.d-kv__stat dt { color: var(--brand-ink); font-size: clamp(12px, 1.3vw, 15px); font-weight: var(--fw-bold); }
.d-kv__stat dd {
  margin-top: 6px;
  color: var(--ink-900);
  font-weight: var(--fw-black);
  letter-spacing: -.03em; line-height: 1.1;
  white-space: nowrap;
}
.d-kv__stat dd b { font-size: clamp(22px, 3.4vw, 40px); }
.d-kv__stat dd span,
.d-kv__stat dd small { margin-left: 3px; color: var(--ink-500); font-size: clamp(12px, 1.4vw, 17px); font-weight: var(--fw-bold); }
.d-kv__stat dd small { margin: 0 3px 0 0; }
/* ★ 표시광고법 : 실적 숫자 바로 아래에 집계 기준을 밝힙니다. 지우지 마세요. */
.d-kv__note {
  margin-top: var(--space-3);
  color: var(--on-brand); opacity: .9;
  font-size: var(--fs-xs);
}
.d-kv { padding-bottom: 104px; }
/* 바로 아래 특징 카드 섹션이 회색이라, 첫 화면 끝 곡선도 같은 회색으로 */
.d-kv__curve { background: var(--surface-alt); }
@media (max-width: 768px) {
  .d-kv { padding-bottom: 80px; }
  .d-kv__figure { width: min(340px, 88%); }
  .d-kv__stats { margin-top: -40px; padding: 14px 2px; }
}
@media (prefers-reduced-motion: reduce) { .d-kv__sub, .d-kv__figure, .d-kv__stats { animation: none; } }

/* ═══ 공용 : 가운데 머리말 (작은 알약 + 두 줄 제목, 둘째 줄 주황) — 예시 사이트 구성 ═══ */
.p-head { text-align: center; }
.p-pill {
  display: inline-block;
  padding: 7px 18px; border-radius: var(--radius-pill);
  background: var(--brand-50); color: var(--brand-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.p-head h2 {
  margin-top: var(--space-4);
  font-size: var(--fs-h2); font-weight: var(--fw-bold);
  color: var(--ink-900); line-height: 1.32; letter-spacing: -.02em;
}
.p-head h2 em { font-style: normal; color: var(--brand-ink); }
.p-head p { margin-top: var(--space-4); font-size: var(--fs-body); color: var(--ink-500); line-height: var(--lh-normal); }

/* ═══ 3. 특징 카드 5개 — 가운데 한 줄로 쌓은 가로 카드 (예시 구성) ═══ */
.p-feats {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 520px; margin: clamp(28px, 3.4vw, 44px) auto 0;
}
.p-feat {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  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) {
  .p-feat:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--shadow-rgb), .1); }
}
.p-feat__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.p-feat__ico .ico { width: 38px; height: 38px; color: var(--brand-500); --ico-bg-opacity: .3; }
.p-feat__txt { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.p-feat__txt b { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-tight); }
.p-feat__txt span { font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-normal); }
@media (max-width: 768px) {
  .p-feat { gap: 14px; padding: 16px 18px; }
  .p-feat__ico .ico { width: 32px; height: 32px; }
}

/* ═══ 4. 서비스 소개 배너 ═══
   ★ 사진 대신 로고 심볼 + '무엇을 바꾸는지' 칩 3개로 꾸몄습니다(새 사진 없이). */
.p-intro { background: var(--brand-50); }
.p-intro__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(28px, 4vw, 64px);
}
.p-intro__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid; place-items: center;
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 50%, #fff 0, #fff 34%, rgba(255, 255, 255, .55) 35%, rgba(255, 255, 255, 0) 62%);
}
.p-intro__logo { width: clamp(110px, 14vw, 170px); height: auto; filter: drop-shadow(0 14px 26px rgba(255, 102, 0, .28)); }
.p-intro__chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-900);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  box-shadow: 0 10px 24px rgba(var(--shadow-rgb), .1);
  white-space: nowrap;
}
.p-intro__chip .ico { width: 20px; height: 20px; color: var(--brand-500); }
.p-intro__chip:nth-of-type(1) { top: 12%;  left: 4%; }
.p-intro__chip:nth-of-type(2) { top: 44%;  right: 2%; }
.p-intro__chip:nth-of-type(3) { bottom: 12%; left: 12%; }
.p-intro__eyebrow { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--brand-ink); }
.p-intro__title {
  margin-top: var(--space-3);
  font-size: clamp(28px, 3.6vw, 42px); font-weight: var(--fw-bold);
  color: var(--ink-900); line-height: 1.3; letter-spacing: -.02em;
}
.p-intro__title em { font-style: normal; color: var(--brand-ink); }
.p-intro__more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-6);
  padding: 13px 24px; border-radius: var(--radius-pill);
  background: var(--ink-900); color: #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  transition: transform var(--dur-fast) var(--ease);
}
.p-intro__more:hover { transform: translateY(-2px); }
@media (max-width: 768px) {
  .p-intro__inner { grid-template-columns: 1fr; text-align: center; }
  .p-intro__visual { max-width: 420px; width: 100%; margin-inline: auto; }
  .p-intro__chip { font-size: 13px; padding: 8px 12px; }
}

/* ═══ 5. 상품 카드 2종 — 가운데 머리말 + 카드 2장 (예시 구성) ═══
   ★ 칠해진 카드(.is-fill)는 주황 그라데이션 + 흰 글씨입니다.
     마우스를 댄 카드로 옮겨가고, 떼도 마지막 카드가 칠해진 채 남습니다(js: setupPlanHover).
   ★ 그라데이션 배경은 바로 바꾸면 '툭' 바뀌므로, 뒤에 깐 층(::before)의 투명도로 부드럽게 넘깁니다. */
.p-plans {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 24px);
  max-width: 880px; margin: clamp(28px, 3.4vw, 44px) auto 0;
}
.p-plan {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 12px rgba(var(--shadow-rgb), .05);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.p-plan::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(150deg, var(--brand-500), var(--brand-700));
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.p-plan.is-fill { border-color: transparent; transform: translateY(-4px); box-shadow: 0 18px 36px rgba(255, 102, 0, .26); }
.p-plan.is-fill::before { opacity: 1; }
.p-plan:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 3px; }

.p-plan__head { display: flex; align-items: center; gap: 12px; }
.p-plan__ico {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--brand-50);
}
.p-plan__ico .ico { width: 24px; height: 24px; color: var(--brand-500); }
.p-plan__type { min-width: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink-900); }
/* ★ '큰 금액' 이 두 줄로 깨지지 않게 줄바꿈을 막고, 줄어들지도 않게 둡니다 */
.p-plan__badge {
  flex: none; margin-left: auto;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--brand-50); color: var(--brand-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.4;
  white-space: nowrap;
}
.p-plan__amount { margin-top: var(--space-6); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.p-plan__amount i { font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-500); }
.p-plan__amount b {
  font-size: clamp(40px, 4.4vw, 56px); font-weight: var(--fw-black);
  color: var(--brand-ink); letter-spacing: -.03em; line-height: 1.05;
}
.p-plan__amount b span { font-size: .42em; margin-left: 3px; }
.p-plan__desc { margin-top: var(--space-3); text-align: center; font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-normal); }
.p-plan__feats {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.p-plan__feats li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-700); }
.p-plan__feats .ico { width: 18px; height: 18px; color: var(--brand-500); flex: none; }
/* 색이 옮겨갈 때 글자색도 같이 부드럽게 */
.p-plan__type, .p-plan__amount i, .p-plan__amount b, .p-plan__desc, .p-plan__feats li,
.p-plan__ico, .p-plan__ico .ico, .p-plan__feats .ico, .p-plan__feats, .p-plan__badge {
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
/* 칠해진 카드 — 흰 글씨 */
.p-plan.is-fill .p-plan__type,
.p-plan.is-fill .p-plan__amount i,
.p-plan.is-fill .p-plan__amount b,
.p-plan.is-fill .p-plan__desc,
.p-plan.is-fill .p-plan__feats li { color: #fff; }
.p-plan.is-fill .p-plan__ico { background: rgba(255, 255, 255, .2); }
.p-plan.is-fill .p-plan__ico .ico,
.p-plan.is-fill .p-plan__feats .ico { color: #fff; --ico-bg-opacity: .35; }
.p-plan.is-fill .p-plan__feats { border-top-color: rgba(255, 255, 255, .35); }
.p-plan.is-fill .p-plan__badge { background: #fff; }
@media (max-width: 768px) { .p-plans { grid-template-columns: 1fr; } }

/* 카드 아래 한 줄 + '상품권 · 기타 상품 보기' — 가운데 */
.p-plans__foot {
  margin-top: var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  text-align: center;
}
.p-plans__note { font-size: var(--fs-sm); color: var(--ink-500); }
.p-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-ink);
}
.p-more::after { content: "→"; transition: transform var(--dur-fast) var(--ease); }
.p-more:hover::after { transform: translateX(4px); }
.p-more-wrap { margin-top: var(--space-8); text-align: center; }

/* ═══ 6. 진행절차 : 사진 + 단계 (한 장의 흰 상자) ═══
   PC = 사진 왼쪽 · 단계 오른쪽 / 좁은 화면 = 사진 위 · 단계 아래
   ★ 마지막 단계(입금 완료)만 주황으로 칠해 '도착점'을 보여줍니다. */
.p-guide {
  display: grid; grid-template-columns: 1.1fr 1fr;
  align-items: center; gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(14px, 1.8vw, 22px);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 12px rgba(var(--shadow-rgb), .05);
}
.p-guide__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  border-radius: var(--radius-lg);
}
.p-guide__steps { list-style: none; padding-right: clamp(4px, 1.6vw, 20px); }
.p-guide__step { position: relative; display: flex; gap: var(--space-4); padding-block: var(--space-4); }
/* 단계 사이 세로선 */
.p-guide__step:not(:last-child)::before {
  content: ""; position: absolute;
  left: 21px; top: calc(var(--space-4) + 44px); bottom: calc(-1 * var(--space-4));
  width: 2px; background: var(--brand-100);
}
.p-guide__badge {
  position: relative; z-index: 1;
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--brand-50); color: var(--brand-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-black);
}
.p-guide__txt b { display: block; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink-900); }
.p-guide__txt span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-normal); }
.p-guide__step--on .p-guide__badge { background: var(--brand-500); color: #fff; box-shadow: 0 0 0 5px var(--brand-50); }
.p-guide__step--on .p-guide__txt b { color: var(--brand-ink); }
@media (max-width: 768px) { .p-guide { grid-template-columns: 1fr; } }

/* 진행절차 아래 검은 띠 — 핵심 약속 한 줄 + 자세히 보기 */
.p-usp {
  margin-top: var(--space-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 18px 24px; border-radius: var(--radius-lg);
  background: var(--ink-900); color: #fff;
  font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.p-usp b { color: var(--brand-400); }
.p-usp a { color: #fff; font-weight: var(--fw-bold); white-space: nowrap; }
.p-usp a span { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.p-usp a:hover span { transform: translateX(4px); }

/* ═══ 9. 회사 연혁 (메인) — 어두운 배경 + 가로 타임라인 (예시 구성) ═══
   PC = 가운데 가로선 위아래로 번갈아 / 좁은 화면 = 왼쪽 세로선 따라 아래로
   ★ 맨 앞(최근) 항목만 노란 점(.is-now). 항목 수는 style="--n:3" 으로 맞춥니다. */
.p-history { background: var(--ink-900); color: #fff; padding-block: var(--section-y); }
.p-history__photo { margin: 0 0 clamp(28px, 4vw, 48px); }
.p-history__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1400 / 620; object-fit: cover;
  border-radius: var(--radius-xl);
}
.p-history__title { font-size: clamp(24px, 3.2vw, 36px); font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: -.02em; color: #fff; }
.p-history__line {
  position: relative; list-style: none;
  display: grid; grid-template-columns: repeat(var(--n, 3), 1fr);
  margin-top: clamp(32px, 4vw, 48px);
}
.p-history__line::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(255, 255, 255, .22);
}
.p-history__item { position: relative; height: 260px; }
/* 점 */
.p-history__item::before {
  content: ""; position: absolute; z-index: 1; left: 0; top: 50%;
  width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(255, 102, 0, .22);
}
.p-history__item.is-now::before { background: #ffc21a; box-shadow: 0 0 0 5px rgba(255, 194, 26, .25); }
/* 글 상자 — 점에서 위(또는 아래)로 가는 세로 눈금선을 왼쪽 테두리로 그립니다 */
.p-history__box { position: absolute; left: 6px; right: 12px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .22); }
.p-history__item.is-top .p-history__box { bottom: 50%; padding-bottom: 22px; }
.p-history__item.is-bottom .p-history__box { top: 50%; padding-top: 22px; }
.p-history__year { display: block; font-size: var(--fs-h4); font-weight: var(--fw-black); color: var(--brand-400); }
.p-history__item.is-now .p-history__year { color: #ffc21a; }
.p-history__box p { margin-top: 8px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .8); line-height: 1.7; }
@media (max-width: 768px) {
  .p-history__line { display: block; padding-left: 28px; }
  .p-history__line::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .p-history__item { height: auto; padding-bottom: 28px; }
  .p-history__item:last-child { padding-bottom: 0; }
  .p-history__item::before { left: -28px; top: 6px; margin-top: 0; }
  .p-history__box,
  .p-history__item.is-top .p-history__box,
  .p-history__item.is-bottom .p-history__box { position: static; padding: 0; border: 0; }
}

/* ═══ 10. 정식 등록 인증서 — 흰 카드 3장 가로 배치 (메인·마켓론이란?) ═══
   ★ 예전 '회색 줄 상자' 는 섹션 배경도 회색이 되면서 상자가 묻혀 보였습니다.
     → 흰 카드 3장 : 위 = 서류 그림(옅은 주황 바탕), 아래 = 제목·설명. */
.d-cert__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.d-cert__row {
  flex-direction: column; align-items: stretch; gap: 0;
  min-height: 0; padding: 0; overflow: hidden;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 12px rgba(var(--shadow-rgb), .05);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease);
}
@media (hover: hover) {
  .d-cert__row:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(var(--shadow-rgb), .1); }
}
.d-cert__thumb {
  width: 100%; height: 200px; padding: 22px 0;
  background: linear-gradient(160deg, var(--brand-50), #fff6f0);
}
.d-cert__thumb img { max-height: 156px; box-shadow: 0 10px 24px rgba(var(--shadow-rgb), .16); }
.d-cert__body { padding: 22px 24px 26px; text-align: center; }
.d-cert__title { justify-content: center; }
.d-cert__desc br { display: none; }
@media (max-width: 900px) {
  .d-cert__list { grid-template-columns: 1fr; }
  .d-cert__row { flex-direction: row; align-items: center; }
  .d-cert__thumb { width: 110px; height: auto; align-self: stretch; padding: 14px 0; }
  .d-cert__thumb img { max-height: 110px; }
  .d-cert__body { padding: 16px 18px; text-align: left; }
  .d-cert__title { justify-content: flex-start; }
}

/* 모델 사진(세로형 3:4)에 맞춰 사진 칸도 세로로 — 숫자 상자는 허리 아래쪽에 겹칩니다 */
.d-kv__figure { width: min(440px, 80%); aspect-ratio: 780 / 1033; }
@media (max-width: 768px) { .d-kv__figure { width: min(300px, 78%); } }
.d-kv__figure picture { position: relative; display: block; height: 100%; }

/* ═══ 12. 배경 색 바꿈 (2026-10-20 요청) ═══
   · 첫 화면 = 흰색 + 아주 옅은 주황 그라데이션 → 글자는 진한 색, 강조만 주황
   · 바로 아래 특징 카드 섹션 = 주황 그라데이션 → 머리말 흰 글씨, 카드는 흰색 그대로 */
.d-kv--model {
  background-color: #fff;
  background-image:
    radial-gradient(60% 50% at 50% 62%, rgba(255, 140, 60, .18), rgba(255, 140, 60, 0) 70%),
    linear-gradient(180deg, #ffffff 0%, #fff6ef 60%, #ffe9d9 100%);
  color: var(--ink-900);
}
.d-kv--model .d-kv__lead { background: var(--brand-50); color: var(--brand-ink); }
.d-kv--model .d-kv__title { color: var(--ink-900); }
.d-kv--model .d-kv__title em { color: var(--brand-ink); }
.d-kv--model .d-kv__sub { color: var(--ink-500); opacity: 1; }
.d-kv--model .d-kv__note { color: var(--ink-500); opacity: 1; }
.d-kv--model .d-kv__glow {
  background: radial-gradient(circle, rgba(255, 120, 40, .30) 0, rgba(255, 150, 70, .12) 46%, rgba(255, 150, 70, 0) 70%);
}
.d-kv--model .d-kv__stats { border: 1px solid var(--line); }
/* 첫 화면 끝 곡선 = 아래 주황 섹션의 첫 색 */
.d-kv--model .d-kv__curve { background: var(--brand-500); }

.p-feats-sec { background: linear-gradient(180deg, var(--brand-500) 0%, #ff8a1f 70%, #ffa53a 100%); }
.p-feats-sec .p-pill { background: rgba(255, 255, 255, .22); color: #fff; }
.p-feats-sec .p-head h2 { color: #fff; }
.p-feats-sec .p-head h2 em { color: #fff3c4; }
.p-feats-sec .p-feat { box-shadow: 0 10px 24px rgba(160, 50, 0, .18); }

/* 모델 사진 교체(2026-10-20, 900×848 거의 정사각) — 사진 칸 비율·크기 다시 맞춤 */
.d-kv__figure { width: min(560px, 92%); aspect-ratio: 900 / 835; }
@media (max-width: 768px) { .d-kv__figure { width: min(360px, 94%); } }

/* 사람 크게 + 숫자 상자 조금 아래로 (2026-10-20 요청) */
.d-kv__figure { width: min(680px, 96%); }
.d-kv__stats { margin-top: -36px; }
@media (max-width: 768px) {
  .d-kv__figure { width: min(420px, 100%); }
  .d-kv__stats { margin-top: -24px; }
}

/* 소개 배너 : 손에 든 휴대폰을 아래에 깔고, 가방 로고는 그 화면 위에 (2026-10-20)
   ★ 휴대폰 그림(598×636)에서 화면 가운데 = 가로 50% · 세로 37% 지점입니다. */
.p-intro__visual { aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, 0) 62%); }
.p-intro__visual picture { position: absolute; inset: 0; display: block; }
.p-intro__phone {
  position: absolute; left: 50%; bottom: 0;
  height: 100%; width: auto; transform: translateX(-50%);
  filter: drop-shadow(0 20px 30px rgba(var(--shadow-rgb), .14));
}
.p-intro__logo {
  position: absolute; left: 50%; top: 37%;
  width: 21%; transform: translate(-50%, -50%);
}
.p-intro__chip { z-index: 2; }
.p-intro__chip:nth-of-type(1) { top: 16%; left: 0; }
.p-intro__chip:nth-of-type(2) { top: 40%; right: 0; }
.p-intro__chip:nth-of-type(3) { bottom: 26%; left: 2%; }
/* 팔 아래쪽이 일자로 잘린 그림이라, 맨 아래 18% 를 배경으로 서서히 녹입니다 */
.p-intro__phone {
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

/* 소개 배너 다시 맞춤 (2026-10-20)
   ★ 손 그림의 잘린 아랫부분이 섹션 바닥에 '딱' 붙도록 섹션 아래 여백을 없애고 그림을 바닥에 내립니다.
   ★ 휴대폰은 그림 칸 정가운데, 뒤에 하얀 빛 원(아이콘 뒤 빛 효과)을 깝니다. */
.p-intro { padding-bottom: 0; overflow: hidden; }
.p-intro__inner { align-items: end; }
.p-intro__copy { align-self: center; padding-bottom: var(--section-y); }
.p-intro__visual { background: none; }
.p-intro__phone { -webkit-mask-image: none; mask-image: none; }
.p-intro__visual picture { z-index: 1; }
.p-intro__visual::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 40%; width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .55) 32%, rgba(255, 255, 255, 0) 64%);
}
.p-intro__logo { z-index: 2; filter: drop-shadow(0 10px 22px rgba(255, 102, 0, .35)); }
.p-intro__chip { z-index: 3; }
@media (max-width: 768px) {
  .p-intro__copy { order: 1; padding-bottom: var(--space-8); }
  .p-intro__visual { order: 2; }
}
/* 연혁 5칸 — 글이 길어 위·아래 칸이 제목과 닿지 않게 높이를 넉넉히 */
@media (min-width: 769px) {
  .p-history__line { margin-top: clamp(40px, 5vw, 64px); }
  .p-history__item { height: 380px; }
  .p-history__box p { word-break: keep-all; }
}

/* ═══ 연혁 줄바꿈 정리 (2026-10-20) ═══
   ★ 한 줄은 꺾이지 않게(nowrap) 하고, 줄은 <br> 로 직접 나눕니다.
   ★ 글 상자가 자기 칸보다 넓어도 됩니다 — 같은 쪽(위·아래) 이웃은 두 칸 떨어져 있어 겹치지 않습니다.
   ★ 가로 타임라인은 칸이 넉넉한 넓은 화면(1025px 이상)에서만, 그보다 좁으면 세로형입니다. */
.p-history__box p { white-space: nowrap; font-size: 15px; }
@media (min-width: 1025px) {
  .p-history__box { right: auto; }
  .p-history__item { height: 300px; }
}
@media (max-width: 1024px) {
  .p-history__line { display: block; padding-left: 28px; }
  .p-history__line::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .p-history__item { height: auto; padding-bottom: 28px; }
  .p-history__item:last-child { padding-bottom: 0; }
  .p-history__item::before { left: -28px; top: 6px; margin-top: 0; }
  .p-history__box,
  .p-history__item.is-top .p-history__box,
  .p-history__item.is-bottom .p-history__box { position: static; padding: 0; border: 0; }
  .p-history__box p { white-space: normal; word-break: keep-all; }
}

/* ═══ 13. 진행절차 — 태블릿 테두리 안에 '사진 위 · 단계 아래' (예시 사이트 구성, 2026-10-20) ═══ */
.p-guide--tablet {
  position: relative;
  grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px);
  max-width: 640px; margin-inline: auto;
  padding: clamp(18px, 3vw, 34px);
  background: var(--surface);
  border: clamp(10px, 1.6vw, 14px) solid #16171b;
  border-radius: clamp(28px, 4vw, 44px);
  box-shadow: 0 24px 50px rgba(var(--shadow-rgb), .18);
}
/* 위 가운데 카메라 홈 */
.p-guide--tablet::before {
  content: ""; position: absolute; left: 50%; top: -2px;
  width: 64px; height: 16px; transform: translateX(-50%);
  background: #16171b; border-radius: 0 0 10px 10px;
}
.p-guide--tablet .p-guide__photo img { aspect-ratio: 1400 / 1022; object-position: center; border-radius: var(--radius-lg); }
.p-guide--tablet .p-guide__steps { padding: 0 clamp(8px, 2vw, 24px); }
/* 아래 검은 띠도 태블릿 폭(640px)에 맞춰 가운데로 */
.p-guide--tablet + .p-usp { max-width: 640px; margin: var(--space-6) auto 0; }
@media (max-width: 560px) { .p-guide--tablet + .p-usp { flex-direction: column; align-items: flex-start; } }
/* 진행절차 페이지 요약 칸 4개 (2026-10-20 4단계로) */
[data-page="request"] .d-steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { [data-page="request"] .d-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { [data-page="request"] .d-steps { grid-template-columns: 1fr; } }

/* 모델 사인 '서효미' — 사진 오른쪽 빈 공간 (예시 사이트의 사인 자리) */
.d-kv__sign {
  position: absolute; z-index: 1;
  right: -2%; top: 20%;
  width: 26%; height: auto;
  opacity: .9;
  pointer-events: none;
}
@media (max-width: 768px) { .d-kv__sign { right: 0; top: 14%; width: 28%; } }
/* 사인 교체(가로로 긴 손사인) — 폭·위치 다시 맞춤 */
.d-kv__sign { width: 34%; right: -6%; top: 22%; opacity: 1; }
@media (max-width: 768px) { .d-kv__sign { width: 36%; right: -2%; top: 16%; } }

/* ═══ 14. 헤더 : 로고 · '1초만에 문의하기' · 햄버거 → 오른쪽에서 나오는 메뉴 (나우페이 방식, 2026-10-21) ═══
   ★ 메뉴 판은 헤더 안에 있어 헤더(z-index 1000) 위로만 올라옵니다.
     그래서 어두운 막은 헤더보다 아래(990)에 깔아 본문만 어둡게 합니다. */
body { padding-bottom: 0; }
.header__inner { gap: 10px; }
.header__logo { margin-right: auto; }
.header__cta {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 20px; border-radius: var(--radius-pill);
  background: var(--brand-500); color: #fff;
  font-size: 15px; font-weight: var(--fw-black); white-space: nowrap;
  box-shadow: 0 6px 14px rgba(255, 102, 0, .25);
  transition: transform var(--dur-fast) var(--ease);
}
.header__cta:hover { transform: translateY(-1px); background: var(--brand-600); }
.header__burger { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; flex: none; }
.header__burger span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--ink-900); }
.nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100;
  width: min(300px, 82vw); min-width: 0;
  padding: 80px 24px 28px;
  background: var(--surface);
  box-shadow: -12px 0 30px rgba(0, 0, 0, .12);
  overflow-y: auto;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s var(--ease-out), visibility .3s;
}
.nav.is-open { transform: none; visibility: visible; }
.nav__close {
  display: grid !important; place-items: center;
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px;
  font-size: 36px; line-height: 1; color: var(--ink-900);
}
.nav__list { flex-direction: column !important; justify-content: flex-start !important; gap: 4px !important; overflow: visible !important; }
.nav__list a {
  display: flex !important; align-items: center; gap: 14px;
  padding: 14px 6px; border-radius: var(--radius-md);
  font-size: 18px !important; font-weight: var(--fw-black); color: var(--ink-900);
}
.nav__list a::after { display: none !important; }
.nav__list a .ico { flex: none; width: 26px; height: 26px; color: var(--brand-500); --ico-bg-opacity: .3; }
.nav__list a:hover { background: var(--brand-50); }
.nav__list a[aria-current="page"] { color: var(--brand-ink); }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 990;
  background: rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }
@media (max-width: 768px) {
  .header__cta { height: 34px; padding: 0 14px; font-size: 13px; }
}

/* ═══ 15. 오른쪽 아래 따라다니는 상담 버튼 (나우페이 방식, 2026-10-21) ═══
   위 = 말풍선(오늘 N명 문의) / 아래 = 전화(주황) · 카톡(노랑) 동그라미 */
.p-fab {
  position: fixed; z-index: 900;
  right: clamp(12px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.p-fab__bubble {
  position: relative; margin-bottom: 4px;
  padding: 10px 14px; border-radius: 16px;
  background: var(--surface); color: var(--ink-900);
  box-shadow: 0 8px 22px rgba(var(--shadow-rgb), .16);
  font-size: 13px; font-weight: var(--fw-black); line-height: 1.35; text-align: center;
  animation: p-fab-bob 2.4s ease-in-out infinite;
}
.p-fab__bubble b { color: var(--brand-ink); font-size: 16px; }
.p-fab__bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
  width: 12px; height: 12px; background: var(--surface); transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(var(--shadow-rgb), .06);
}
@keyframes p-fab-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.p-fab__btn {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  box-shadow: 0 10px 22px rgba(var(--shadow-rgb), .22);
  transition: transform var(--dur-fast) var(--ease);
}
.p-fab__btn:hover { transform: translateY(-3px); }
.p-fab__btn--tel { background: var(--brand-500); color: #fff; }
.p-fab__btn--tel .ico { width: 28px; height: 28px; --ico-bg-opacity: 0; }
.p-fab__btn--kakao { background: var(--kakao-bg); }
.p-fab__btn--kakao img { width: 30px; height: 30px; }
@media (max-width: 768px) {
  .p-fab__btn { width: 52px; height: 52px; }
  .p-fab__bubble { font-size: 12px; padding: 8px 11px; }
  .p-fab__bubble b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .p-fab__bubble { animation: none; } }

/* ═══ 16. PC(769px 이상)는 예전처럼 상단에 메뉴를 나란히 — 햄버거·옆 메뉴는 휴대폰에서만 (2026-10-21) ═══ */
@media (min-width: 769px) {
  .header__burger, .nav__close, .nav-backdrop { display: none !important; }
  .header__logo { margin-right: 0; }
  .nav {
    position: static; z-index: auto;
    width: auto; padding: 0; margin-left: auto;
    background: none; box-shadow: none; overflow: visible;
    transform: none; visibility: visible; transition: none;
  }
  .nav__list { flex-direction: row !important; align-items: center; gap: var(--nav-gap) !important; }
  .nav__list a {
    display: inline !important; padding: 0; border-radius: 0;
    font-size: var(--nav-fs) !important; font-weight: var(--fw-bold); color: var(--ink-700);
  }
  .nav__list a .ico { display: none; }
  .nav__list a:hover { background: none; color: var(--brand-ink); }
  .nav__list a::after { display: block !important; }
  .header__cta { margin-left: var(--space-4); }
}
/* PC 순서 : 로고 → (오른쪽) 메뉴 → '1초만에 문의하기' */
@media (min-width: 769px) { .nav { order: 1; } .header__cta { order: 2; } }