/* ══════════════════════════════════════════════════════════════════════
   kf-promo.css — 김빠른 등급 프로모션 (handoff4)
   전달 패키지: 「김빠른 타배대지 등급 이전 프로모션 디자인」 2026-08-17

   서비스 UI(kf-redesign.css)와 색·타입·radius·모션이 같다.
   프로모션에만 있는 것은 3개뿐 — 그라데이션 · 쿠폰 카드 · 파란 배경 위 흰 텍스트.

   스코프: 래퍼 없이 `.kfp-` 접두사로 격리한다. 홈(.kfr) 안에 배너만 끼워 넣는
   경우가 있어서 래퍼 스코프를 쓰면 홈 마크업을 건드려야 하기 때문이다.

   ★ 자주 나는 결함 3가지 — 이 파일에서 구조로 막는다
     1. 장식 원이 텍스트를 덮는다      → .kfp-banner__in / .kfp-hero__in 에 z-index:2
     2. 하단 CTA 뒤 콘텐츠가 비친다    → 불투명 --grey-100 + z-index:9
     3. 쿠폰 절취선이 문장을 자른다    → 약관 블록 border-top (고정 좌표 아님)

   대표 확정값 (2026-08-17)
     할인 10% · 최대 5,000원 / 쿠폰 60일 / 당일 확인(영업시간 내)
     + 캡처의 이메일 아이디가 김빠른 가입 이메일과 같아야 한다
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 프로모션 전용 토큰 (공통가이드 §1·§3) ──────────────────────── */
:root{
  /* 그라데이션 — 배너와 히어로 두 곳에만 쓴다 */
  --promo-grad-banner:linear-gradient(135deg,#1b64da 0%,#3182f6 100%);
  --promo-grad-hero:linear-gradient(150deg,#1b64da 0%,#3182f6 100%);
  /* 파란 배경 위 */
  --on-promo:#ffffff;
  --on-promo-sub:rgba(255,255,255,.78);   /* --blue-100 을 쓰지 않는다 (탁하다) */
  --on-promo-chip:rgba(255,255,255,.14);
  --on-promo-badge:rgba(255,255,255,.18);
  --promo-art:rgba(255,255,255,.08);
  --promo-art-2:rgba(255,255,255,.06);
  /* 쿠폰 */
  --coupon-bg:#191f28;
  --coupon-line:#4e5968;
  /* 그림자 */
  --shadow-promo:0 10px 28px rgba(27,100,218,.2);
}

/* ── 2. 프로모션 배너 (01 · 공통가이드 §5-1) ───────────────────────── */
.kfp-banner{
  display:block; width:100%; margin:20px 0 0; padding:22px 20px;
  border:0; border-radius:24px; overflow:hidden; position:relative;
  background:var(--promo-grad-banner); box-shadow:var(--shadow-promo);
  text-align:left; cursor:pointer; font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform 150ms cubic-bezier(.4,0,.2,1), box-shadow 150ms cubic-bezier(.4,0,.2,1);
}
.kfp-banner:active{ transform:scale(.985); box-shadow:0 6px 18px rgba(27,100,218,.18); }

/* ★ 장식 원이 텍스트를 덮지 않게 하는 한 줄 (z-index:2)
   + 세로 flex — 마크업이 <button> 안이라 자식이 전부 <span>(인라인)이다.
     block 으로 두지 않으면 배지·제목·부제가 한 줄로 흘러 뭉갠다. */
.kfp-banner__in{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
}
.kfp-banner__t, .kfp-banner__s{ align-self:stretch; }

/* 장식 원 2개 — 저울·비행기 그림을 넣지 않는다 */
.kfp-banner__art,
.kfp-banner__art2{ position:absolute; border-radius:50%; pointer-events:none; }
.kfp-banner__art { right:-40px; top:-40px;    width:150px; height:150px; background:var(--promo-art); }
.kfp-banner__art2{ right:8px;   bottom:-56px; width:110px; height:110px; background:var(--promo-art-2); }

/* 알약 배지 — 노란 사각 배지가 아니라 점 + 알약이다 */
.kfp-badge{
  display:inline-flex; align-items:center; gap:7px;
  height:28px; padding:0 12px 0 10px; margin:0 0 14px;
  border-radius:9999px; background:var(--on-promo-badge);
}
.kfp-badge__dot{ width:6px; height:6px; border-radius:50%; background:var(--yellow-500); flex:none; }
.kfp-badge__t{ font-size:12px; font-weight:700; color:var(--on-promo); white-space:nowrap; letter-spacing:0; }

.kfp-banner__t{
  margin:0; font-size:22px; line-height:32px; font-weight:700; letter-spacing:-.025em;
  color:var(--on-promo); text-wrap:pretty;
}
.kfp-banner__s{
  margin:10px 0 0; font-size:15px; line-height:23px; font-weight:400;
  color:var(--on-promo-sub); text-wrap:pretty;
}
.kfp-banner__s b{ font-weight:700; color:var(--on-promo); }

/* CTA 알약 — 카드 전체가 눌리므로 이건 시각 요소다 (button 안의 span) */
.kfp-banner__cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  height:46px; padding:0 20px; border-radius:9999px;
  background:var(--white); color:var(--blue-700); font-size:15px; font-weight:700;
}
.kfp-banner__cta svg{ width:15px; height:15px; flex:none; }

/* ── 3. 얇은 띠 (01) ───────────────────────────────────────────────── */
.kfp-strip{
  display:flex; align-items:center; gap:12px; width:100%;
  margin:12px 0 0; padding:16px 18px;
  border:0; border-radius:16px; background:var(--white); box-shadow:var(--shadow-card);
  text-align:left; cursor:pointer; font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform 150ms cubic-bezier(.4,0,.2,1);
}
.kfp-strip:active{ transform:scale(.99); }
.kfp-strip__dot{ width:8px; height:8px; border-radius:50%; background:var(--yellow-500); flex:none; }
.kfp-strip__t{
  flex:1; font-size:14px; line-height:21px; font-weight:400; color:var(--grey-700); text-wrap:pretty;
}
.kfp-strip__t b{ font-weight:700; color:var(--grey-900); }
/* 「보기」 글자 대신 꺾쇠 — 카드 전체가 눌리므로 글자 버튼은 이중으로 보인다 */
.kfp-strip__caret{ width:17px; height:17px; flex:none; color:var(--grey-400); }

/* 히어로 배지 — 배너보다 한 단계 크다 (30 / 13px) */
.kfp-badge--lg{ height:30px; padding:0 13px 0 11px; margin-bottom:16px; }
.kfp-badge--lg .kfp-badge__t{ font-size:13px; }

/* ── 4. 프로모션 히어로 (02 · 공통가이드 §5-2) ─────────────────────── */
/* 화면 끝까지 꽉 채우지 않는다. 좌우 여백 안에 radius 24 카드로 띄운다 */
.kfp-hero{
  position:relative; overflow:hidden; margin:20px 0 0; padding:26px 22px 28px;
  border-radius:24px; background:var(--promo-grad-hero); box-shadow:var(--shadow-promo);
}
.kfp-hero__in{ position:relative; z-index:2; }   /* ★ */
.kfp-hero__art,
.kfp-hero__art2{ position:absolute; border-radius:50%; pointer-events:none; }
.kfp-hero__art { right:-56px; top:-56px;    width:190px; height:190px; background:var(--promo-art); }
.kfp-hero__art2{ left:-40px;  bottom:-70px; width:190px; height:190px; background:var(--promo-art-2); }
.kfp-hero__t{
  margin:0; font-size:28px; line-height:39px; font-weight:700; letter-spacing:-.025em;
  color:var(--on-promo); text-wrap:pretty;
}
.kfp-hero__s{
  margin:14px 0 0; font-size:15px; line-height:22.5px; color:var(--on-promo-sub); text-wrap:pretty;
}
.kfp-hero__s b{ font-weight:700; color:var(--on-promo); }
.kfp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.kfp-chip{
  display:inline-flex; align-items:center; height:34px; padding:0 13px;
  border-radius:9999px; background:var(--on-promo-chip);
  font-size:14px; font-weight:600; color:var(--on-promo);
}

/* ── 5. 혜택 카드 2종 (02 · §5-3) ──────────────────────────────────── */
/* 순서를 바꾸지 않는다 — 할인이 위, 등급이 아래. 테두리 색으로 위계를 만든다 */
.kfp-benefit{
  background:var(--white); border-radius:18px; padding:20px;
  border:1.5px solid var(--grey-200);
}
.kfp-benefit + .kfp-benefit{ margin-top:12px; }
.kfp-benefit--main{ border-color:var(--blue-100); }        /* 할인 (위) */
/* 배지와 제목은 같은 행 — 배지 flex:none, 제목 flex:1 */
.kfp-benefit__hd{ display:flex; align-items:flex-start; gap:10px; }
.kfp-benefit__badge{
  display:inline-flex; align-items:center; flex:none; height:24px; padding:0 8px;
  border-radius:6px; font-size:12px; font-weight:700; white-space:nowrap;
  background:var(--neutral-a16); color:var(--grey-700);
}
.kfp-benefit--main .kfp-benefit__badge{ background:var(--green-a16); color:var(--green-600); }
.kfp-benefit__t{ flex:1; margin:0; font-size:17px; line-height:25.5px; font-weight:600; color:var(--grey-900); }
.kfp-benefit__b{ margin:12px 0 0; font-size:15px; line-height:22.5px; color:var(--grey-700); text-wrap:pretty; }
.kfp-benefit__calc{
  margin-top:12px; padding:12px 14px; border-radius:14px;
  background:var(--grey-50); font-size:14px; line-height:21px; color:var(--grey-700);
  font-variant-numeric:tabular-nums;
}
.kfp-benefit__calc b{ font-weight:700; color:var(--grey-900); }

/* ── 6. 타임라인 4단계 (02 · §5-4) ─────────────────────────────────── */
.kfp-step{ display:flex; gap:14px; align-items:flex-start; position:relative; }
.kfp-step + .kfp-step{ margin-top:20px; }
.kfp-step__line{
  position:absolute; left:13px; top:30px; bottom:-20px; width:2px; background:var(--grey-200);
}
.kfp-step:last-child .kfp-step__line{ background:transparent; }
.kfp-step__n{
  width:28px; height:28px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--grey-100); color:var(--grey-500);
}
.kfp-step--on .kfp-step__n{ background:var(--blue-500); color:var(--white); }
.kfp-step__t{ margin:0; font-size:17px; line-height:25.5px; font-weight:600; color:var(--grey-900); }
.kfp-step__b{ margin:2px 0 0; font-size:14px; line-height:21px; color:var(--grey-600); text-wrap:pretty; }

/* ── 7. 캡처 종류 3칸 (02 · §5-5) ──────────────────────────────────── */
/* 이모지를 쓰지 않는다. 번호 칩으로 순서만 표시한다 */
.kfp-kinds{ display:grid; grid-template-columns:1fr; gap:10px; }
.kfp-kind{ background:var(--grey-50); border-radius:14px; padding:16px 18px; }
.kfp-kind__n{
  width:24px; height:24px; border-radius:8px; margin:0 0 10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-50); color:var(--blue-700);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
}
.kfp-kind__t{ margin:0; font-size:15px; line-height:22.5px; font-weight:600; color:var(--grey-900); }
.kfp-kind__b{ margin:3px 0 0; font-size:13px; line-height:19.5px; color:var(--grey-600); text-wrap:pretty; }

/* ── 8. 섹션 제목 · 아코디언 FAQ (02) ──────────────────────────────── */
.kfp-h{ margin:0; font-size:20px; line-height:29px; font-weight:700; letter-spacing:-.01em; color:var(--grey-900); }
.kfp-sub{ margin:4px 0 0; font-size:15px; line-height:22.5px; color:var(--grey-600); text-wrap:pretty; }

/* 높이 애니메이션 금지 · 한 번에 하나만 열린다 (JS) */
.kfp-faq{ padding:0; }                       /* 행이 패딩을 가진다 */
.kfp-faq__hd{ padding:24px 20px 12px; }
/* 구분선은 border 가 아니라 inset 그림자 — 서비스 목록과 같은 방식 */
.kfp-faq__row + .kfp-faq__row{ box-shadow:inset 0 1px 0 0 var(--grey-100); }
.kfp-faq__q{
  display:flex; align-items:flex-start; gap:10px; width:100%; padding:16px 20px;
  border:0; background:none; text-align:left; cursor:pointer; font-family:inherit;
}
.kfp-faq__mark{ font-size:17px; line-height:25.5px; font-weight:700; color:var(--blue-500); flex:none; }
.kfp-faq__t{ flex:1; font-size:16px; line-height:24px; font-weight:500; color:var(--grey-900); text-wrap:pretty; }
.kfp-faq__caret{
  width:18px; height:18px; flex:none; margin-top:4px; color:var(--grey-400);
  transition:transform 200ms cubic-bezier(.4,0,.2,1);
}
.kfp-faq__row.is-open .kfp-faq__caret{ transform:rotate(180deg); }
/* 답변은 질문 글자에 맞춰 들여쓴다 (Q 글자 폭 + gap = 42px) */
.kfp-faq__a{ display:none; padding:0 20px 16px 42px; font-size:15px; line-height:22.5px; color:var(--grey-600); text-wrap:pretty; }
.kfp-faq__row.is-open .kfp-faq__a{ display:block; animation:kfFade 200ms cubic-bezier(.4,0,.2,1); }

/* 약관 각주 — 한 문단에 가운뎃점으로 잇는다 (시안 m-02) */
.kfp-terms{
  margin:0; background:var(--white); border-radius:16px; padding:16px 18px;
  font-size:13px; line-height:19.5px; color:var(--grey-500); text-wrap:pretty;
}

/* ── 9. 캡처 슬롯 (03 · §5-6) ──────────────────────────────────────── */
.kfp-slots{ display:flex; gap:8px; flex-wrap:wrap; }
/* 빈 상태 (첫 장) — 폭 100% · 높이 120 */
.kfp-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:100%; height:120px; padding:0;
  border:1.5px dashed var(--grey-300); border-radius:14px; background:none;
  cursor:pointer; font-family:inherit; color:var(--grey-600);
  transition:border-color 150ms cubic-bezier(.4,0,.2,1), background 150ms cubic-bezier(.4,0,.2,1);
}
.kfp-drop:active{ background:var(--grey-50); border-color:var(--blue-500); }
.kfp-drop__plus{ width:24px; height:24px; color:var(--grey-500); }
.kfp-drop__t{ font-size:15px; font-weight:600; color:var(--grey-800); }
.kfp-drop__f{ font-size:13px; line-height:19.5px; color:var(--grey-500); }
/* 채운 슬롯 88×88 */
.kfp-slot{
  position:relative; width:88px; height:88px; border-radius:14px;
  background:var(--blue-50); border:1.5px solid var(--blue-500);
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
  animation:kfFade 200ms cubic-bezier(.4,0,.2,1);
}
.kfp-slot__ic{ width:24px; height:24px; color:var(--blue-500); }
.kfp-slot__x{
  position:absolute; top:-6px; right:-6px; width:24px; height:24px;
  border:0; border-radius:50%; background:var(--grey-900); color:var(--white);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.kfp-slot__x svg{ width:12px; height:12px; }
/* 추가 슬롯 88×88 — 3장이면 감춘다 (JS) */
.kfp-add{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:88px; height:88px; padding:0;
  border:1.5px dashed var(--grey-300); border-radius:14px; background:none;
  cursor:pointer; font-family:inherit; color:var(--grey-500);
}
.kfp-add__plus{ width:20px; height:20px; }
.kfp-add__n{ font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ── 10. 확인 카드 (03 · §5-7) ─────────────────────────────────────── */
/* 자동 판독을 하지 않는다 — 스켈레톤·등급 비교·판독 실패 상태가 없다 */
.kfp-confirm{
  background:var(--white); border:1.5px solid var(--blue-100); border-radius:20px;
  padding:20px; box-shadow:var(--shadow-card);
  animation:kfFade 200ms cubic-bezier(.4,0,.2,1);
}
.kfp-confirm__t{ margin:0 0 12px; font-size:15px; line-height:22.5px; font-weight:600; color:var(--grey-800); }
.kfp-confirm__row{
  display:flex; justify-content:space-between; gap:12px; align-items:center; padding:7px 0;
}
.kfp-confirm__k{ font-size:15px; line-height:22.5px; color:var(--grey-600); }
.kfp-confirm__v{ font-size:15px; line-height:22.5px; font-weight:500; color:var(--grey-900); text-align:right; }
.kfp-confirm__row--disc{
  margin-top:8px; padding-top:14px; border-top:1px solid var(--grey-200);
}
.kfp-confirm__row--disc .kfp-confirm__k{ color:var(--grey-700); }
.kfp-confirm__badge{
  display:inline-flex; align-items:center; height:26px; padding:0 9px; border-radius:6px;
  background:var(--green-a16); color:var(--green-600);
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ── 11. 쿠폰 카드 (05 · §5-8) ─────────────────────────────────────── */
.kfp-coupon{
  background:var(--coupon-bg); border-radius:20px; padding:24px 20px;
  position:relative; overflow:hidden;
}
.kfp-coupon__badge{
  display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:6px;
  background:var(--yellow-500); color:var(--grey-900); font-size:12px; font-weight:700;
}
.kfp-coupon__amt{
  margin:10px 0 0; font-size:28px; line-height:38px; font-weight:700; letter-spacing:-.02em;
  color:var(--white); font-variant-numeric:tabular-nums;
}
.kfp-coupon__cap{ margin:4px 0 0; font-size:15px; line-height:22.5px; color:var(--grey-400); }
/* ★ 절취선은 약관 블록의 border-top 이다. 고정 좌표(top:96px)로 만들면
      문구가 한 줄 늘거나 PC 에서 금액이 커질 때 혜택 문장을 자른다. */
.kfp-coupon__terms{
  margin-top:20px; padding-top:20px;
  border-top:1.5px dashed var(--coupon-line); position:relative;
}
.kfp-coupon__notch{
  position:absolute; top:-9.75px; width:18px; height:18px; border-radius:50%;
  background:var(--grey-100); pointer-events:none;
}
.kfp-coupon__notch--l{ left:-29px; }
.kfp-coupon__notch--r{ right:-29px; }
.kfp-coupon__row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; line-height:21px; }
.kfp-coupon__row + .kfp-coupon__row{ margin-top:6px; }
.kfp-coupon__k{ color:var(--grey-500); }
.kfp-coupon__v{ color:var(--grey-300); font-variant-numeric:tabular-nums; text-align:right; }

/* ── 12. 하단 CTA (§4) — 가장 많이 틀린다 ──────────────────────────── */
.kfp-cta{
  position:fixed; left:0; right:0; bottom:0;
  padding:14px 20px 20px;
  background:var(--grey-100);      /* ★ 불투명. 반투명 그라데이션 금지 */
  z-index:9;                       /* ★ */
  pointer-events:none;
}
.kfp-cta--sub{ padding:16px 20px 20px; }
.kfp-cta__fade{
  position:absolute; left:0; right:0; top:-28px; height:28px; pointer-events:none;
  background:linear-gradient(to top, var(--grey-100), rgba(242,244,246,0));
}
.kfp-cta__in{ position:relative; pointer-events:auto; }
/* 부제는 버튼 **위**에 놓는다. 아래에 두면 컨테이너가 위로 자라 본문을 덮는다 */
.kfp-cta__sub{
  margin:0 0 10px; text-align:center; font-size:13px; line-height:19.5px; color:var(--grey-600);
}
.kfp-btn{
  display:flex; align-items:center; justify-content:center; width:100%; height:56px;
  border:0; border-radius:16px; background:var(--blue-500); color:var(--white);
  font-family:inherit; font-size:17px; font-weight:600; cursor:pointer;
  transition:background 150ms cubic-bezier(.4,0,.2,1), transform 150ms cubic-bezier(.4,0,.2,1);
}
.kfp-btn:active{ transform:scale(.99); background:var(--blue-600); }
.kfp-btn[disabled]{ background:var(--grey-300); color:var(--white); cursor:default; }
.kfp-btn.is-shake{ animation:kfpShake 300ms cubic-bezier(.4,0,.2,1) 1; }
/* 스크롤 여유 — 부제 없음 116 / 있음 152 */
.kfp-pad  { padding-bottom:116px; }
.kfp-pad--sub{ padding-bottom:152px; }

/* ── 13. 완료 원 · 안내 박스 · 토스트 ──────────────────────────────── */
.kfp-done{
  width:64px; height:64px; border-radius:50%; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-500); color:var(--white);
  animation:kfPop 300ms cubic-bezier(.22,1,.36,1);
}
.kfp-done svg{ width:30px; height:30px; }
/* 안내 박스 — 시안은 노란 배경이지만 대표님 지시(노랑 UI 금지)에 따라 파란 안내로 낸다.
   「확인이 조금 더 필요」한 상태이지 실패가 아니므로 붉은색도 쓰지 않는다. */
.kfp-note{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--blue-50); border-radius:14px; padding:14px 16px;
  font-size:14px; line-height:21px; color:var(--grey-700); text-wrap:pretty;
}
.kfp-note svg{ width:16px; height:16px; flex:none; margin-top:2.5px; color:var(--blue-700); }
.kfp-note b{ font-weight:700; color:var(--grey-900); }
.kfp-toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  max-width:calc(100% - 40px); padding:13px 18px; border-radius:12px;
  background:var(--toast, rgba(25,31,40,.86)); color:var(--white);
  font-size:14px; line-height:21px; z-index:20; pointer-events:none;
  animation:kfPop 200ms cubic-bezier(.22,1,.36,1);
}
/* 06 강조 문장 — 한 박자 늦게 또렷해진다 */
.kfp-late{
  font-size:20px; line-height:29px; font-weight:700; letter-spacing:-.01em; color:var(--grey-900);
  animation:kfLate 600ms cubic-bezier(.4,0,.2,1);
}

/* ── 14. 모션 ──────────────────────────────────────────────────────── */
@keyframes kfpShake{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-6px) } 75%{ transform:translateX(6px) }
}
@keyframes kfLate{ from{ opacity:0 } to{ opacity:1 } }
/* kfFade · kfPop · kfUp 은 kf-redesign.css 에 이미 있다 (같은 정의를 두 번 쓰지 않는다) */

@media (prefers-reduced-motion:reduce){
  .kfp-banner, .kfp-strip, .kfp-btn, .kfp-faq__caret,
  .kfp-slot, .kfp-confirm, .kfp-done, .kfp-toast, .kfp-late{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}

/* ── 15. PC (min-width:1024px) — 콘텐츠 컬럼 560 가운데 ─────────────── */
@media (min-width:1024px){
  .kfp-banner{ padding:26px 24px; }
  .kfp-banner__t{ font-size:26px; line-height:37px; }
  .kfp-banner__art { width:176px; height:176px; }
  .kfp-banner__art2{ width:132px; height:132px; }

  .kfp-hero{ margin-top:28px; padding:36px 32px 38px; }
  .kfp-hero__t{ font-size:38px; line-height:50px; }
  .kfp-hero__s{ font-size:17px; line-height:26px; }
  .kfp-hero__art, .kfp-hero__art2{ width:240px; height:240px; }

  .kfp-kinds{ grid-template-columns:repeat(3,1fr); }

  .kfp-coupon__amt{ font-size:32px; line-height:43px; }

  .kfp-cta{ padding:14px 24px 20px; }
  .kfp-cta--sub{ padding:16px 24px 20px; }
  .kfp-cta__in{ max-width:560px; margin:0 auto; }
}

/* ── 16. 랜딩(02) 낱개 간격 — 4px 그리드 ──────────────────────────── */
.kfp-page{ background:var(--grey-100); min-height:100vh; }
.kfp-sec{ margin-top:16px; }          /* 섹션 사이 */
.kfp-sub--gap{ margin-bottom:20px; }  /* 부제와 첫 항목 사이 */
.kfp-note--gap{ margin-top:14px; }
.kfp-hero__in > .kfp-badge{ margin-bottom:16px; }
@media (min-width:1024px){
  .kfp-sec{ margin-top:20px; }
}

/* ── 17. 테마 제목 규칙 무력화 ─────────────────────────────────────
   숏코드가 .wp-block-post-content 안에서 렌더되므로 테마의
   `.site-main--page .wp-block-post-content h2`(18px) 가 우리 클래스를 이긴다.
   kf-redesign.css §.kfr2-h2 와 같은 방식으로 특이도를 맞춘다 (!important 없이). */
.site-main--page .wp-block-post-content .kfp-hero__t{
  margin:0; font-size:28px; line-height:39px; font-weight:700; letter-spacing:-.025em; color:var(--on-promo);
}
.site-main--page .wp-block-post-content .kfp-h{
  margin:0; font-size:20px; line-height:29px; font-weight:700; letter-spacing:-.01em; color:var(--grey-900);
}
.site-main--page .wp-block-post-content .kfp-benefit__t{
  margin:0; font-size:17px; line-height:25.5px; font-weight:600; color:var(--grey-900);
}
@media (min-width:1024px){
  .site-main--page .wp-block-post-content .kfp-hero__t{ font-size:38px; line-height:50px; }
}

/* ── 18. 03 이용내역 올리기 ────────────────────────────────────────── */
.kfp-title{ margin:0; font-size:22px; line-height:31px; font-weight:700; letter-spacing:-.01em; color:var(--grey-900); }
.kfp-title__s{ margin:8px 0 0; font-size:15px; line-height:22.5px; color:var(--grey-600); }
.kfp-card{ padding:20px; }
.kfp-label{ margin:0 0 6px; font-size:13px; line-height:19.5px; font-weight:500; color:var(--grey-600); }
.kfp-label--gap{ margin-top:20px; }
/* 탭 — 배경·테두리·글자색이 **함께** 150ms 바뀐다 */
.kfp-tabs{ display:flex; gap:8px; }
.kfp-tab{
  flex:1; height:52px; border-radius:14px; cursor:pointer; font-family:inherit;
  font-size:15px; font-weight:600;
  background:var(--white); border:1.5px solid var(--grey-200); color:var(--grey-700);
  transition:background 150ms cubic-bezier(.4,0,.2,1), border-color 150ms cubic-bezier(.4,0,.2,1), color 150ms cubic-bezier(.4,0,.2,1);
}
.kfp-tab.is-on{ background:var(--blue-50); border-color:var(--blue-500); color:var(--blue-700); }
.kfp-tabnote{ margin:8px 0 0; font-size:13px; line-height:19.5px; color:var(--grey-500); text-wrap:pretty; }
.kfp-help{ margin:8px 0 0; font-size:13px; line-height:19.5px; color:var(--grey-500); text-wrap:pretty; }
/* 비활성 CTA 는 disabled 로 막지 않는다 — 눌리게 두고 흔들림+토스트+초점으로 알린다 */
.kfp-btn.is-off{ background:var(--grey-300); }
.kfp-btn.is-off:active{ transform:none; background:var(--grey-300); }
.site-main--page .wp-block-post-content .kfp-title{
  margin:0; font-size:22px; line-height:31px; font-weight:700; letter-spacing:-.01em; color:var(--grey-900);
}

/* ── 19. 04·05·06 결과 화면 ────────────────────────────────────────── */
.kfp-center{ text-align:center; }
.kfp-left{ text-align:left; }
.kfp-sec--md{ margin-top:20px; }
.kfp-sec--lg{ margin-top:24px; }
.kfp-done{ margin-top:40px; }
.kfp-done--blue { background:var(--blue-50);  color:var(--blue-500); }   /* 04 접수 */
.kfp-done--green{ background:var(--green-a16); color:var(--green-600); } /* 05 확인됨 */
.kfp-scr-t{ margin:16px 0 0; font-size:24px; line-height:33px; font-weight:700; letter-spacing:-.01em; color:var(--grey-900); }
.kfp-scr-t--left{ margin-top:32px; }
.kfp-scr-s{ margin:8px 0 0; font-size:15px; line-height:22.5px; color:var(--grey-600); }
/* 이 화면에서 가장 중요한 한 줄 — 접수 내용보다 크다 */
.kfp-when{ margin:8px 0 0; font-size:17px; line-height:25.5px; font-weight:600; color:var(--grey-900); }
.kfp-chip-wait{
  display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:6px;
  background:var(--neutral-a16); color:var(--grey-700); font-size:13px; font-weight:600;
}
/* 기다리는 동안 안내 — 시안은 노란 카드지만 노랑 UI 금지에 따라 파란 안내 */
.kfp-wait{ background:var(--blue-50); border-radius:20px; padding:18px 20px; }
.kfp-wait__t{ margin:0; font-size:15px; line-height:22.5px; font-weight:600; color:var(--grey-900); }
.kfp-wait__b{ margin:6px 0 0; font-size:14px; line-height:21px; color:var(--grey-700); text-wrap:pretty; }
/* 등급 혜택 · 확인 목록 */
.kfp-ben__t{ margin:0 0 12px; font-size:17px; line-height:25.5px; font-weight:600; color:var(--grey-900); }
.kfp-ben__row{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:15px; color:var(--grey-800); }
.kfp-ben__row svg{ width:18px; height:18px; flex:none; color:var(--green-500); }
.kfp-ben__foot{ margin:10px 0 0; font-size:13px; line-height:19.5px; color:var(--grey-500); }
.kfp-dot__row{ display:flex; align-items:flex-start; gap:10px; padding:7px 0; font-size:15px; line-height:22.5px; color:var(--grey-700); }
.kfp-dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-500); margin-top:9px; flex:none; }
.kfp-body{ margin:10px 0 0; font-size:15px; line-height:22.5px; color:var(--grey-700); text-wrap:pretty; }
/* 보조 버튼 */
.kfp-btn2{
  display:flex; align-items:center; justify-content:center; width:100%; height:52px; margin-top:12px;
  border:0; border-radius:14px; background:var(--grey-100); color:var(--grey-700);
  font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; text-decoration:none;
}
.kfp-btn2:active{ background:var(--grey-200); }
/* 링크로 만든 CTA 도 버튼처럼 */
a.kfp-btn{ text-decoration:none; }
.site-main--page .wp-block-post-content .kfp-scr-t{
  margin:16px 0 0; font-size:24px; line-height:33px; font-weight:700; letter-spacing:-.01em; color:var(--grey-900);
}
.site-main--page .wp-block-post-content .kfp-scr-t--left{ margin-top:32px; }

/* 결제 내역의 할인 줄 — 추가 요금처럼 보이지 않게 파랑 마이너스로 (등급 할인·쿠폰 공통) */
.kfr-pay__minus{ color:var(--blue-600); }