@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════
   김빠른 1차 리디자인 (토스 철학) — 디자인 시스템
   기준: 개발-적용-가이드.md (2026-08-14) · 캡처 handoff/png 65장

   규칙
     · 가이드 표에 있는 값만 쓴다. 없는 색·크기·간격을 새로 만들지 않는다.
     · 모든 새 화면은 .kfr 안에 들어간다 — 기존 화면 CSS 와 섞이지 않게 스코프를 판다.
     · 화면 배경 --grey-100 / 카드 --white. 절대 반대로 두지 않는다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 색 토큰 (가이드 §2) ─────────────────────────────────────── */
:root{
  /* 그레이 (텍스트 → 배경 순) */
  --grey-900:#191f28; --grey-800:#333d4b; --grey-700:#4e5968; --grey-600:#6b7684;
  --grey-500:#8b95a1; --grey-400:#b0b8c1; --grey-300:#d1d6db; --grey-200:#e5e8eb;
  --grey-100:#f2f4f6; --grey-50:#f9fafb; --white:#ffffff;
  /* 파랑 (브랜드/주요 액션) */
  --blue-700:#1b64da; --blue-600:#2272eb; --blue-500:#3182f6;
  --blue-100:#c9e2ff; --blue-50:#e8f3ff; --blue-a16:rgba(49,130,246,.16);
  /* 초록 (완료·무료·세금 없음) */
  --green-600:#029359; --green-500:#03b26c; --green-a16:rgba(2,162,98,.16);
  /* 노랑 (주의·브랜드 점·별) */
  --yellow-600:#dd7d02; --yellow-500:#ffc342; --yellow-400:#ffb331;
  --yellow-bg:#fff9e7; --yellow-a16:rgba(255,179,49,.16);
  /* 중립 배지 (2차 가이드 §3) */
  --neutral-a16:rgba(78,89,104,.16);
  /* 예외 — 카드 승인 거절 이유 문장 앞 6px 점 하나에만 (그 밖 전부 금지) */
  --red-500:#f04452;
  /* 그 외 */
  --kakao:#fee500; --naver:#03c75a;
  --shadow-card:0 1px 3px rgba(0,23,51,.08);
  --shadow-knob:0 2px 4px rgba(0,23,51,.15);
  --shadow-float:0 4px 12px rgba(0,23,51,.16);
  --dim:rgba(0,0,0,.2);
  --toast:rgba(25,31,40,.86);
  /* 모션 (가이드 §6) */
  --ease-out:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.22,1,.36,1);
}

/* ── 2. 기반 (가이드 §1 폰트 · §3 레이아웃) ──────────────────────── */
.kfr{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--grey-100);
  color:var(--grey-900);
  font-size:16px; line-height:24px; font-weight:400;
  letter-spacing:0;
}
.kfr *,.kfr *::before,.kfr *::after{box-sizing:border-box}
/* 기존 테마(main.css/블록테마)가 section·p·h* 에 주는 패딩·마진을 무력화한다.
   이 리셋은 파일 앞쪽에 둬서, 뒤의 .kfr-* 클래스 규칙이 항상 이기게 한다.
   (실측 사고: .kfr-sec 가 padding 0 32px 89.6px 를 상속받아 그리드가 448px 로 좁아졌다) */
/* 특이도를 딱 (0,1,0) 으로 맞춘다 — `.kfr :where(p)` 는 .kfr 하나뿐이라 (0,1,0).
   · 옛 테마의 `section{padding:...}`(0,0,1) 은 이긴다
   · 내 `.kfr-q__label`(0,1,0) 과는 동점이고 리셋이 파일 앞이라 내 규칙이 이긴다
   두 번 데였다: `:where(.kfr) :where(...)` 는 특이도 0 이라 옛 규칙에 지고
   (결과 카드가 512→448 로 찌그러졌다), `.kfr p`(0,1,1) 는 내 클래스를 이겨 여백을 먹었다. */
.kfr :where(section,header,footer,main,nav,article,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dt,dd,table){
  margin:0;padding:0;border:0;background:none;max-width:none;width:auto;float:none}
.kfr :where(ul,ol){list-style:none}
/* 링크 색은 옛 테마가 파랗게 칠해버린다 — 클래스가 정한 색을 쓰게 한다 */
.kfr :where(a){color:inherit;text-decoration:none}
.kfr img{max-width:100%;display:block}
.kfr button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kfr input,.kfr select,.kfr textarea{font-family:inherit}
/* 숫자가 들어가는 값은 자리가 흔들리면 안 된다 (가이드 §1) */
.kfr .num,.kfr .kfr-amt,.kfr [data-num]{font-variant-numeric:tabular-nums}

/* 화면 컨테이너 — 모바일 100%, PC 560px 고정 가운데 (가이드 §3) */
.kfr-wrap{width:100%;margin:0 auto;padding:0 20px}
@media (min-width:768px){ .kfr-wrap{max-width:560px;padding:0 24px} }  /* 실측: 카드 512 = 560 - 24*2 */

/* ── 3. 타입 스케일 (가이드 §1) ──────────────────────────────────── */
/* 行間은 소수점까지 지킨다 — 1.5 로 두면 브라우저 반올림으로 어긋난다 */
.kfr-h-hero   {font-size:30px;line-height:40px;font-weight:700;letter-spacing:-.02em}
.kfr-h-amount {font-size:30px;line-height:40px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kfr-h-screen {font-size:24px;line-height:33px;font-weight:700;letter-spacing:-.01em}
.kfr-h-step   {font-size:22px;line-height:31px;font-weight:700;letter-spacing:-.01em}
.kfr-h-section{font-size:20px;line-height:29px;font-weight:700;letter-spacing:-.01em}
.kfr-h-strong {font-size:28px;line-height:37px;font-weight:700;letter-spacing:-.02em}
.kfr-h-box    {font-size:19px;line-height:28px;font-weight:700;letter-spacing:-.01em}
.kfr-t-list   {font-size:17px;line-height:25.5px;font-weight:500}
.kfr-t-body   {font-size:16px;line-height:24px;font-weight:400}
.kfr-t-label  {font-size:15px;line-height:22.5px;font-weight:500}
.kfr-t-sub    {font-size:14px;line-height:21px;font-weight:400}
.kfr-t-caption{font-size:13px;line-height:19.5px;font-weight:400}
.kfr-t-foot   {font-size:12px;line-height:18px;font-weight:400}
@media (min-width:768px){
  .kfr-h-hero  {font-size:40px;line-height:49px}
  .kfr-h-amount{font-size:40px;line-height:49px}
}

/* ── 4. 앱바 (가이드 §5.1 — 56px 고정, 흰 배경) ──────────────────── */
.kfr-appbar{position:sticky;top:0;z-index:50;height:56px;background:var(--white);
  display:flex;align-items:center}
.kfr-appbar__in{width:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:8px}
/* 앱바는 컬럼(560)이 아니라 화면 전폭이다 — d-03 실측: 로고 x=24 · 메뉴 오른쪽 끝 x=1094 */
@media (min-width:768px){ .kfr-appbar__in{max-width:1120px;padding:0 24px} }
.kfr-appbar__back{width:44px;height:44px;margin-left:-10px;display:flex;align-items:center;
  justify-content:center;border:0;background:none;color:var(--grey-800)}
/* 로고는 디자이너 납품 SVG 통째로 쓴다 (글자·노란 점까지 SVG 안에 있다).
   심볼 색을 바꾸거나 글자를 HTML 로 다시 짜지 말 것 — 자간이 어긋난다. */
.kfr-logo{display:flex;align-items:center;text-decoration:none}
.kfr-logo__svg{display:block;flex:none}
.kfr-appbar__sp{flex:1}
.kfr-appbar__login{font-size:15px;font-weight:600;color:var(--grey-700);text-decoration:none;
  padding:10px 4px}
.kfr-appbar__box{height:32px;display:inline-flex;align-items:center;gap:5px;padding:0 10px;
  border-radius:9999px;background:var(--blue-50);color:var(--blue-700);
  font-size:13px;font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.kfr-appbar__menu{width:44px;height:44px;margin-right:-10px;display:flex;align-items:center;
  justify-content:center;border:0;background:none;color:var(--grey-800)}
.kfr-appbar svg{stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kfr-badge-preview{margin-left:6px;height:22px;display:inline-flex;align-items:center;padding:0 8px;
  border-radius:6px;background:var(--yellow-a16);color:var(--yellow-600);font-size:12px;font-weight:600}

/* ── 5. 카드·박스 (가이드 §4) ────────────────────────────────────── */
.kfr-card{background:var(--white);border-radius:20px;box-shadow:var(--shadow-card)}
.kfr-card--pad{padding:24px 20px}
.kfr-card--list{padding:20px}
/* 강조 카드 — 테두리와 그림자를 함께 쓰는 유일한 예외 */
.kfr-card--accent{border:1.5px solid var(--blue-100)}
/* 목록 행 구분선은 border 가 아니라 inset 그림자. 첫 행에는 없다 */
.kfr-row{padding:14px 20px}
.kfr-row + .kfr-row{box-shadow:inset 0 1px 0 0 var(--grey-100)}

/* ── 6. 버튼 (가이드 §5.2) ───────────────────────────────────────── */
.kfr-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  border:0;text-decoration:none;transition:background .15s var(--ease-out),color .15s var(--ease-out)}
.kfr-btn--cta{height:56px;border-radius:16px;background:var(--blue-500);color:var(--white);
  font-size:17px;font-weight:600}
.kfr-btn--cta:hover{background:var(--blue-600)}
.kfr-btn--cta:disabled,.kfr-btn--cta[aria-disabled="true"]{background:var(--blue-100);cursor:default}
.kfr-btn--soft{height:52px;border-radius:14px;background:var(--blue-50);color:var(--blue-500);
  font-size:16px;font-weight:600}
.kfr-btn--grey{height:52px;border-radius:14px;background:var(--grey-100);color:var(--grey-700);
  font-size:16px;font-weight:600}
.kfr-btn--text{min-height:44px;background:none;color:var(--grey-600);font-size:15px;font-weight:600;
  padding:0 4px;width:auto}
.kfr-btn--text-blue{color:var(--blue-500)}
.kfr-btn--row{height:44px;border-radius:12px;font-size:15px;font-weight:600;width:auto;padding:0 14px}
.kfr-btn--kakao{height:56px;border-radius:16px;background:var(--kakao);color:#191f28;
  font-size:17px;font-weight:600}
/* 네이버 — 카카오와 같은 치수. 색은 네이버 공식 초록(#03c75a)·글자 흰색이 규정이다. */
.kfr-btn--naver{height:56px;border-radius:16px;background:var(--naver);color:#fff;
  font-size:17px;font-weight:600}
.kfr-btn--naver:hover{background:#02b351;color:#fff}

/* 소셜 버튼 세로 간격 — 셋을 한 규칙으로 묶는다.
   전에는 구글만 margin-top:10px 을 갖고 있어서, 그 사이에 네이버가 들어오자
   카카오와 네이버가 간격 0 으로 붙어 버렸다 (2026-08-18). */
.kfr-btn--kakao + .kfr-btn--naver,
.kfr-btn--kakao + .kfr-btn--googlewrap,
.kfr-btn--naver + .kfr-btn--googlewrap{margin-top:10px}

/* 아이콘 크기도 셋을 맞춘다 — 네이버만 17 이라 글자 시작점이 1px 밀렸다 */
.kfr-btn--kakao svg,.kfr-btn--naver svg{width:19px;height:19px;flex:none}
.kfr-btn:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}

/* 하단 고정 CTA — 위쪽 페이드 (가이드 §5.2) */
.kfr-cta{position:sticky;bottom:0;z-index:40;width:100%;padding:12px 20px 20px;pointer-events:none;
  background:linear-gradient(to top,#f2f4f6 62%,rgba(242,244,246,0))}
.kfr-cta > *{pointer-events:auto}
.kfr-cta__note{margin:10px 0 0;text-align:center;font-size:13px;line-height:19.5px;color:var(--grey-500)}
/* PC 는 CTA 가 컬럼 폭(560) 을 그대로 쓴다 — 실측 x280~839 */
@media (min-width:768px){
  /* flex 자식이라 margin:auto 만 쓰면 폭이 콘텐츠로 줄어든다 — width 를 함께 고정 */
  .kfr-cta{width:560px;max-width:100%;margin:0 auto;padding:12px 0 20px}
}

/* ── 7. 입력 (가이드 §5.3) ───────────────────────────────────────── */
.kfr-field{display:block}
.kfr-field__label{display:block;margin-bottom:6px;font-size:13px;line-height:19.5px;
  font-weight:500;color:var(--grey-600)}
.kfr-input{width:100%;height:52px;padding:0 16px;border-radius:14px;background:var(--grey-100);
  border:1.5px solid transparent;   /* 포커스 때 레이아웃이 밀리지 않게 평소에도 깔아둔다 */
  font-size:16px;font-weight:400;color:var(--grey-900);
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out)}
.kfr-input--lg{height:56px;border-radius:16px;font-size:17px}
.kfr-input::placeholder{color:var(--grey-400)}
.kfr-input:focus{outline:none;background:var(--white);border-color:var(--blue-500)}
.kfr-field__hint{margin:6px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr-textarea{min-height:80px;resize:none;padding:14px 16px;line-height:24px}

/* 셀렉트 — 같은 스펙 + 오른쪽 꺾쇠, 누르면 바텀시트 */
.kfr-select{width:100%;height:52px;padding:0 16px;border-radius:14px;background:var(--grey-100);
  border:1.5px solid transparent;display:flex;align-items:center;gap:10px;
  font-size:17px;font-weight:500;color:var(--grey-900);text-align:left}
.kfr-select__flag{width:24px;height:18px;border-radius:3px;object-fit:cover;flex:none}
.kfr-select__sp{flex:1}
.kfr-select__caret{width:20px;height:20px;color:var(--grey-400);flex:none}

/* ── 8. 배지 (가이드 §5.4) ───────────────────────────────────────── */
.kfr-badge{height:24px;display:inline-flex;align-items:center;padding:0 8px;border-radius:6px;
  font-size:13px;font-weight:600;white-space:nowrap}
.kfr-badge--sm{height:22px;font-size:12px}
.kfr-badge--info{background:var(--blue-a16);color:var(--blue-700)}
.kfr-badge--good{background:var(--green-a16);color:var(--green-600)}
.kfr-badge--neutral{background:rgba(78,89,104,.16);color:var(--grey-700)}
.kfr-badge--warn{background:var(--yellow-a16);color:var(--yellow-600)}

/* ── 9. 칩 (가이드 §5.5) ─────────────────────────────────────────── */
.kfr-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin:0 -20px;padding:0 20px}
.kfr-chips::-webkit-scrollbar{display:none}
@media (min-width:768px){ .kfr-chips{margin:0 -24px;padding:0 24px} }
.kfr-chip{height:38px;padding:0 14px;border-radius:9999px;border:0;flex:none;
  font-size:15px;font-weight:600;background:var(--white);color:var(--grey-700);
  transition:background .15s var(--ease-out),color .15s var(--ease-out)}
.kfr-chip.is-on{background:var(--grey-900);color:var(--white)}

/* ── 10. 토글 (가이드 §5.6) ──────────────────────────────────────── */
.kfr-toggle{width:50px;height:30px;border-radius:15px;background:var(--grey-200);border:0;
  position:relative;flex:none;transition:background .2s var(--ease-spring)}
.kfr-toggle::after{content:'';position:absolute;top:2px;left:2px;width:26px;height:26px;
  border-radius:50%;background:var(--white);box-shadow:var(--shadow-knob);
  transition:transform .2s var(--ease-spring)}
.kfr-toggle[aria-pressed="true"]{background:var(--blue-500)}
.kfr-toggle[aria-pressed="true"]::after{transform:translateX(20px)}

/* ── 11. 라디오 (가이드 §5.7) ────────────────────────────────────── */
.kfr-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--grey-300);
  background:none;flex:none;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s var(--ease-out),background .15s var(--ease-out)}
.kfr-radio svg{width:12px;height:12px;stroke:var(--white);stroke-width:3.4;opacity:0}
.kfr-radio.is-on{border-color:var(--blue-500);background:var(--blue-500)}
.kfr-radio.is-on svg{opacity:1}

/* ── 12. 아코디언 (가이드 §5.8) ──────────────────────────────────── */
.kfr-acc__q{width:100%;display:flex;align-items:center;gap:10px;padding:18px 20px;border:0;
  background:none;text-align:left}
.kfr-acc__mark{font-size:17px;font-weight:700;color:var(--blue-500);flex:none}
.kfr-acc__t{flex:1;font-size:17px;line-height:25.5px;font-weight:500;color:var(--grey-900)}
.kfr-acc__caret{width:18px;height:18px;color:var(--grey-400);flex:none;
  transition:transform .2s var(--ease-out)}
.kfr-acc.is-open .kfr-acc__caret{transform:rotate(180deg)}
.kfr-acc__a{padding:0 20px 18px 42px;font-size:15px;line-height:22.5px;color:var(--grey-600);
  animation:kfFade .2s var(--ease-out) both}
.kfr-acc + .kfr-acc{box-shadow:inset 0 1px 0 0 var(--grey-100)}

/* ── 13. 바텀시트 (가이드 §5.9) ──────────────────────────────────── */
.kfr-sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.kfr-sheet[hidden]{display:none}
.kfr-sheet__dim{position:absolute;inset:0;background:var(--dim);animation:kfFade .2s var(--ease-out) both}
.kfr-sheet__box{position:relative;width:100%;max-width:560px;max-height:80%;overflow-y:auto;
  background:var(--white);border-radius:24px 24px 0 0;padding:24px 0;
  animation:kfSheet .3s var(--ease-spring) both}
.kfr-sheet__title{margin:0 24px;font-size:20px;line-height:29px;font-weight:700;color:var(--grey-900)}
.kfr-sheet__sub{margin:4px 24px 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-sheet__item{width:100%;display:flex;align-items:center;gap:10px;padding:14px 24px;border:0;
  background:none;text-align:left;font-size:17px;line-height:25.5px;color:var(--grey-900)}
.kfr-sheet__item.is-on{color:var(--blue-500);font-weight:600}
.kfr-sheet__check{width:20px;height:20px;color:var(--blue-500);margin-left:auto;opacity:0}
.kfr-sheet__item.is-on .kfr-sheet__check{opacity:1}

/* ── 14. 토스트 (가이드 §5.10) ───────────────────────────────────── */
.kfr-toast{position:fixed;left:20px;right:20px;bottom:96px;z-index:110;
  background:var(--toast);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:14px;padding:14px 16px;color:var(--white);text-align:center;
  font-size:15px;line-height:22.5px;font-weight:500}
/* 애니메이션을 .kfr-toast 자체에 걸면 fill-mode:both 가 끝 상태(opacity 1)를 붙들어
   is-on 을 떼도 토스트가 사라지지 않는다. 2026-08-17 실측으로 발견 — 켜질 때만 건다. */
.kfr-toast.is-on{animation:kfToast .2s var(--ease-out) both}
.kfr-toast[hidden]{display:none}
@media (min-width:768px){ .kfr-toast{left:50%;right:auto;transform:translateX(-50%);min-width:320px} }

/* ── 15. 진행 표시 (가이드 §5.11) ────────────────────────────────── */
.kfr-prog{height:4px;border-radius:9999px;background:var(--grey-200);overflow:hidden}
/* i 는 inline 이라 display:block 없이는 height/width 가 통째로 무시된다 (실측 사고) */
.kfr-prog__fill{display:block;height:100%;border-radius:9999px;background:var(--blue-500);
  transition:width .3s var(--ease-spring)}
.kfr-prog--lg{height:6px}

/* ── 16. 타임라인 (가이드 §5.12) ─────────────────────────────────── */
.kfr-tl__item{position:relative;padding-left:32px;padding-bottom:18px}
.kfr-tl__item::before{content:'';position:absolute;left:0;top:0;width:20px;height:20px;
  border-radius:50%;background:var(--grey-300)}
.kfr-tl__item::after{content:'';position:absolute;left:9px;top:22px;bottom:0;width:2px;
  background:var(--grey-200)}
.kfr-tl__item:last-child{padding-bottom:0}
.kfr-tl__item:last-child::after{display:none}
.kfr-tl__item.is-done::before{background:var(--blue-500)}
.kfr-tl__dot{position:absolute;left:6.5px;top:6.5px;width:7px;height:7px;border-radius:50%;
  background:var(--white);z-index:1}

/* ── 16b. 배송 추적 (시안 d-31 / m-31, 2026-09-02) ─────────────────── */
.kfr-track__prod{margin:0 0 6px;font-size:15px;line-height:22px;color:var(--grey-600)}
.kfr-track .kfr-h-page.kfr-track__h1{margin:0 0 6px}
.kfr-track .kfr-page__sub{margin:0 0 24px}
.kfr-track__tl{margin-bottom:12px}
.kfr-tl__item b{display:block;font-size:17px;line-height:25px;font-weight:600;color:var(--grey-900)}
.kfr-tl__item p{margin:2px 0 0;font-size:14px;line-height:21px;color:var(--grey-600);font-variant-numeric:tabular-nums}
.kfr-tl__item:not(.is-done) b{color:var(--grey-500)}
.kfr-tl__item:not(.is-done) p{color:var(--grey-500)}
.kfr-track__acc{margin-top:10px}
.kfr-track__acc summary{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--grey-200);
  border-radius:10px;background:var(--white);font-size:14px;font-weight:600;color:var(--grey-700);cursor:pointer;list-style:none}
.kfr-track__acc summary::-webkit-details-marker{display:none}
.kfr-track__acc[open] summary svg{transform:rotate(180deg)}
.kfr-track__acc summary svg{transition:transform 200ms cubic-bezier(.4,0,.2,1)}
.kfr-track__evs{list-style:none;margin:10px 0 0;padding:0;animation:kfFade 200ms cubic-bezier(.4,0,.2,1)}
.kfr-track__evs li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--grey-100)}
.kfr-track__evs li:first-child{border-top:0}
.kfr-track__evs b{display:block;font-size:14px;line-height:20px;font-weight:600;color:var(--grey-800)}
.kfr-track__evs small{display:block;font-size:12px;line-height:17px;color:var(--grey-500)}
.kfr-track__evs em{flex:none;font-style:normal;font-size:13px;color:var(--grey-500);font-variant-numeric:tabular-nums}
.kfr-track__none{margin:10px 0 0;font-size:13px;line-height:19px;color:var(--grey-500)}
.kfr-track__calc{margin-bottom:12px}
.kfr-track__ch{display:block;margin:0 0 14px;font-size:17px;line-height:25px;font-weight:700;color:var(--grey-900)}
.kfr-track__calc .kfr-pay__row--note span{font-size:13px;line-height:19px;color:var(--grey-500)}
.kfr-track__photos{display:flex;align-items:center;justify-content:space-between;padding:20px;
  margin-bottom:28px;text-decoration:none;color:var(--grey-900)}
.kfr-track__photos b{font-size:17px;line-height:25px;font-weight:600}
.kfr-track__photos svg{color:var(--grey-400)}
.kfr-track__delay{margin-bottom:12px;border:1.5px solid var(--yellow-400)}
.kfr-track__delay b{display:block;font-size:16px;line-height:24px;font-weight:700;color:var(--grey-900)}
.kfr-track__delay p{margin:4px 0 10px;font-size:14px;line-height:21px;color:var(--grey-700)}
.kfr-track__delay a{font-size:14px;font-weight:600;color:var(--blue-600);text-decoration:none}
.kfr-track__refresh,.kfr-track__back{display:flex;align-items:center;justify-content:center;width:100%;
  height:52px;margin-top:10px;border-radius:14px;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}
.kfr-track__refresh{background:var(--grey-100);color:var(--grey-800);border:0}
.kfr-track__refresh.is-busy{opacity:.6;pointer-events:none}
.kfr-track__back{background:var(--white);color:var(--grey-700);border:1px solid var(--grey-200)}
.kfr-track__chk{margin:12px 0 0;text-align:center;font-size:13px;line-height:19px;color:var(--grey-400)}

/* ── 17. 모션 (가이드 §6) ────────────────────────────────────────── */
@keyframes kfUp   {from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}
@keyframes kfSheet{from{transform:translateY(100%)} to{transform:none}}
@keyframes kfFade {from{opacity:0} to{opacity:1}}
@keyframes kfPop  {from{opacity:0;transform:scale(.94)} to{opacity:1;transform:none}}
/* PC 모달 전용 — kfPop 의 `transform:none` 이 translate(-50%,-50%) 를 지워
   모달이 가운데가 아니라 오른쪽 아래로 밀린다. 중앙 이동을 유지한 채 커진다. */
@keyframes kfPopMid{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}
                    to  {opacity:1;transform:translate(-50%,-50%)}}
@keyframes kfLate {0%{opacity:0} 40%{opacity:0} 100%{opacity:1}}
@keyframes kfBar  {from{width:8%} to{width:96%}}
@keyframes kfToast{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}
@media (min-width:768px){
  @keyframes kfToast{from{opacity:0;transform:translate(-50%,12px)} to{opacity:1;transform:translateX(-50%)}}
}
.kfr-anim-up{animation:kfUp .3s var(--ease-spring) both}

@media (prefers-reduced-motion:reduce){
  /* 시트·다이얼로그·토스트는 .kfr 밖(형제)에 그려진다 —
     .kfr * 만 잡으면 정작 가장 큰 움직임이 안 꺼진다. */
  .kfr,.kfr *,.kfr *::before,.kfr *::after,
  .kfr2-sheet,.kfr2-sheet *,.kfr2-dlg,.kfr2-dlg *,.kfr-toast,.kfr-toast *{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── 18. 접근성 (가이드 §10) ─────────────────────────────────────── */
.kfr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════════════════
   홈 (d-01 / m-01) — 세로 치수는 PC 캡처 1:1 실측
   ══════════════════════════════════════════════════════════════════════ */
/* 페이지 바탕까지 grey-100 으로 — 결과 화면처럼 문서가 짧아지면 기존 테마의
   어두운 body 배경이 드러난다 (실측 사고: 결과 뜨자 화면 하단이 남색) */
body:has(.kfr){background:var(--grey-100)}
.kfr-home{min-height:100vh;display:flex;flex-direction:column;background:var(--grey-100)}
.kfr-main{flex:1;padding-bottom:108px}   /* 하단 CTA 가리지 않게 (가이드 §3) */

/* 히어로 — 가운데 정렬 */
.kfr-eyebrow{display:flex;align-items:center;justify-content:center;gap:5px;
  margin:24px 0 0;font-size:13px;line-height:19.5px;font-weight:600;color:var(--blue-500)}
.kfr-eyebrow svg{flex:none}
.kfr-hero__t{margin:6px 0 0;text-align:center;color:var(--grey-900)}
.kfr-hero__s{margin:8px 0 0;text-align:center;font-size:15px;line-height:22.5px;color:var(--grey-600)}
@media (min-width:768px){
  .kfr-eyebrow{margin-top:40px}
  .kfr-hero__s{font-size:17px;line-height:25.5px}
}

/* 조회 카드 */
.kfr-quote{margin-top:24px}
.kfr-q__label{margin:0 0 8px;font-size:15px;line-height:22.5px;font-weight:600;color:var(--grey-800)}
.kfr-q__label--2{margin-top:20px}
.kfr-quote .kfr-select{height:56px;border-radius:16px}
/* URL 행 — 인터랙션 가이드 §A-2.
   상자(배경·테두리·radius·높이)는 행이 갖고, input 은 알맹이만 담는다.
   이렇게 해야 지우기 버튼이 상자 안에 들어온다. */
.kfr-urlrow{display:flex;align-items:center;gap:8px;
  height:56px;padding:0 8px 0 16px;   /* 오른쪽만 8px — ✕ 히트박스 확보 */
  border-radius:16px;background:var(--grey-100);
  border:1.5px solid transparent;     /* 포커스 때 레이아웃이 밀리지 않게 평소에도 깔아둔다 */
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out)}
.kfr-urlrow + .kfr-urlrow{margin-top:10px;animation:kfFade .2s var(--ease-out) both}
.kfr-urlrow:has(.kfr-url:focus){background:var(--white);border-color:var(--blue-500)}
/* 상자를 행이 그리므로 input 자신의 상자는 지운다 */
.kfr-urlrow .kfr-url{flex:1;min-width:0;   /* 없으면 긴 URL 이 ✕ 를 밖으로 밀어낸다 */
  height:auto;padding:0;border:0;border-radius:0;background:none;font-size:17px}
.kfr-urlrow .kfr-url:focus{background:none;border-color:transparent}
.kfr-urlrow__del{flex:none;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--grey-500)}

/* 묶음 각주 — 칸이 하나라도 추가되면 나온다 (§A-3) */
.kfr-q__bundle{margin:8px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-600)}

/* 상품 더 넣기 — 점선 (가이드 §4) */
.kfr-addmore{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:48px;
  margin-top:10px;border:1.5px dashed var(--grey-300);border-radius:14px;background:none;
  font-size:15px;font-weight:600;color:var(--grey-700);
  transition:border-color .15s var(--ease-out),background .15s var(--ease-out)}
@media (hover:hover){ .kfr-addmore:hover{border-color:var(--grey-400);background:var(--grey-50)} }

.kfr-q__hint{display:flex;align-items:center;gap:6px;margin:14px 0 0;
  font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr-q__hint svg{flex:none}
.kfr-q__sample{display:inline-block;margin:4px 0 0;padding:2px 0;border:0;background:none;
  font-size:15px;line-height:22.5px;font-weight:600;color:var(--blue-500);
  text-decoration:underline;text-underline-offset:3px}

/* 조회 로딩 (가이드 §5.11) */
/* 로딩 — 조회 카드 자리를 대신하므로 같은 y(228)·같은 폭(512)에 선다 (시안 m-02) */
.kfr-loading{margin-top:24px;text-align:center}
.kfr-loading__t{margin:20px 0 0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr-loading__s{margin:4px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-500)}

/* 조회 결과 */
/* 조회 카드 자리를 그대로 물려받는다 — 시안 d-03 카드 상단 y=228 (조회 카드와 동일) */
.kfr-res{margin-top:24px}
.kfr-res__lab{margin:18px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-res__amt{margin:2px 0 0;color:var(--grey-900)}
.kfr-res__days{margin:2px 0 0;padding-bottom:24px;font-size:15px;line-height:22.5px;
  color:var(--grey-600);border-bottom:1px solid var(--grey-100)}
.kfr-res__tags{display:flex;align-items:flex-start;gap:8px;margin-top:18px}
/* 배지 옆에서 줄바꿈돼야 한다 — 통째 플렉스 아이템이면 좁은 화면에서 아래로 떨어진다 (m-03) */
.kfr-res__tagtxt{flex:1;min-width:0;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr-res__items{margin-top:16px;border-top:1px solid var(--grey-100);padding-top:16px;
  display:flex;flex-direction:column;gap:12px}
.kfr-res__item{display:flex;align-items:center;gap:12px}
.kfr-res__th{width:56px;height:56px;border-radius:14px;flex:none;background:var(--grey-100) center/cover no-repeat}
.kfr-res__item b{display:block;font-size:15px;line-height:22.5px;font-weight:600;color:var(--grey-900)}
.kfr-res__item span{display:block;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr-res__how{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:44px;
  margin-top:14px;border:0;background:none;font-size:15px;font-weight:600;color:var(--grey-600)}
.kfr-res__how svg{transition:transform .2s var(--ease-out)}
.kfr-res__how.is-open svg{transform:rotate(180deg)}
.kfr-res__detail{padding:14px 16px;border-radius:16px;background:var(--grey-50);
  animation:kfFade .2s var(--ease-out) both}
.kfr-res__row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;
  font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-res__row b{font-weight:600;color:var(--grey-900)}
.kfr-res__note{margin:8px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}

/* 계산 근거 — 입력값 나열이 아니라 "이렇게 나왔다" 를 보여주는 영역
   (Clarity 8/19: 한 방문자가 이 패널을 7번 열었다 닫았다 했다) */
.kfr-res__dt{margin:2px 0 6px;font-size:13px;font-weight:700;color:var(--grey-900);
  letter-spacing:-.01em}
.kfr-res__dt + .kfr-res__row{border-top:0}
.kfr-res__row + .kfr-res__dt{margin-top:16px;padding-top:14px;border-top:1px solid var(--grey-200)}
.kfr-res__row span i{display:block;font-style:normal;font-size:12px;line-height:17px;
  color:var(--grey-500);margin-top:1px}
.kfr-res__row span{padding-right:12px}
.kfr-res__row--sum{margin-top:6px;padding-top:10px;border-top:1px solid var(--grey-300)}
.kfr-res__row--sum span{font-weight:600;color:var(--grey-900)}
.kfr-res__row--sum b{font-size:16px}
.kfr-res__dnote{margin:10px 0 0;font-size:12.5px;line-height:18.5px;color:var(--grey-500)}

.kfr-res__cta{margin-top:16px}

/* 섹션 공통 */
.kfr-sec{margin-top:36px}
.kfr-sec__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kfr-sec__more{font-size:15px;font-weight:600;color:var(--grey-600);text-decoration:none;flex:none}
.kfr-sec__sub{margin:6px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-sec .kfr-h-section{margin:0;color:var(--grey-900)}

/* 이렇게 써요 — 모바일 세로 / PC 3열 */
.kfr-steps{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
@media (min-width:768px){ .kfr-steps{grid-template-columns:repeat(3,1fr)} }
.kfr-step{padding:16px}  /* 시안 d-01 실측: 글자 시작 x=495, 카드 x=478 → 안쪽 17.
                              20 이면 '그 주소로 주문하기' 가 두 줄로 깨진다. */
.kfr-step__n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:9999px;background:var(--blue-50);color:var(--blue-500);
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.kfr-step__t{display:block;margin-top:12px;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr-step__d{display:block;margin-top:2px;font-size:14px;line-height:21px;color:var(--grey-600)}

/* 배대지 6곳 — 2열 gap 10 (실측) */
.kfr-depots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.kfr-depot{padding:16px;border:1.5px solid transparent;text-align:left;
  transition:border-color .15s var(--ease-out)}
.kfr-depot.is-on{border-color:var(--blue-500)}
.kfr-depot__flag{width:24px;height:18px;border-radius:3px;object-fit:cover}
.kfr-depot__n{display:block;margin-top:10px;font-size:15px;line-height:22.5px;font-weight:600;color:var(--grey-900)}
.kfr-depot__p{display:block;margin-top:2px;font-size:15px;line-height:22.5px;font-weight:600;color:var(--blue-500)}

/* 후기 */
.kfr-revs{padding:0}
.kfr-rev{padding:18px 20px}
.kfr-rev + .kfr-rev{box-shadow:inset 0 1px 0 0 var(--grey-100)}
.kfr-revs__more{display:block;padding:16px;text-align:center;font-size:15px;font-weight:600;
  color:var(--blue-500);text-decoration:none;box-shadow:inset 0 1px 0 0 var(--grey-100)}

/* FAQ */
.kfr-faq{padding:0;overflow:hidden}

/* 푸터 */
.kfr-foot{margin-top:36px;padding-top:24px;border-top:1px solid var(--grey-200)}
.kfr-foot__b{display:block;font-size:15px;font-weight:700;color:var(--grey-700)}
.kfr-foot__nav{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px}
.kfr-foot__nav a{font-size:13px;line-height:19.5px;color:var(--grey-500);text-decoration:none}
.kfr-foot__biz{margin:12px 0 0;font-size:12px;line-height:18px;color:var(--grey-400)}
.kfr-foot__biz a{color:var(--grey-400)}
/* 민원 책임 문구 — PG 심사 필수 (2026-09-01) */
.kfr-foot__resp{margin:10px 0 0;font-size:12px;line-height:18px;color:var(--grey-400)}
.kfr-foot__resp a{color:var(--grey-400)}

/* 결과 카드 상세 (d-03) */
.kfr-res__prod{display:flex;align-items:center;gap:12px;padding-bottom:18px;
  border-bottom:1px solid var(--grey-100)}
.kfr-res__th--none{display:flex;align-items:center;justify-content:center}
.kfr-res__prod b{display:block;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr-res__prod span{display:block;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr-res__cap{margin:0;font-size:15px;line-height:22.5px;font-weight:600;color:var(--grey-800)}
.kfr-res__notice{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:var(--grey-100);
  font-size:13px;line-height:19.5px;color:var(--grey-600)}
.kfr-res__eta{margin:10px 0 0;text-align:center;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr-res__foot{margin:14px 0 0;text-align:center;font-size:12px;line-height:18px;color:var(--grey-400)}

/* 이제 어떻게 보내나요? */
/* 시안 실측: 결과 카드와 16 띄운다 */
.kfr-next{margin-top:16px}
.kfr-next__sub{margin:4px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-next__list{margin-top:19px;display:flex;flex-direction:column;gap:22px}
/* 번호 원 사이를 잇는 세로선 — 마지막 항목엔 긋지 않는다 */
.kfr-next__item{position:relative}
.kfr-next__item:not(:last-child)::before{content:'';position:absolute;left:13.5px;top:32px;
  bottom:-26px;width:1px;background:var(--grey-200)}
.kfr-next__item{display:flex;gap:14px}
.kfr-next__n{flex:none;width:28px;height:28px;border-radius:9999px;background:var(--grey-100);
  color:var(--grey-600);font-size:13px;line-height:1;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.kfr-next__item.is-now .kfr-next__n{background:var(--blue-500);color:var(--white)}
.kfr-next__item b{display:flex;align-items:center;gap:6px;font-size:15px;line-height:22.5px;
  font-weight:600;color:var(--grey-900)}
.kfr-next__item span{display:block;margin-top:2px;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr-next__cta-lab{margin:18px 0 8px;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr-next__prev{display:block;margin-top:10px;padding:10px 0;text-align:center;
  font-size:15px;font-weight:600;color:var(--grey-600);text-decoration:none}

/* 푸터 링크 구분점 */
.kfr-foot__nav{align-items:center;gap:0 6px}
.kfr-foot__nav i{font-style:normal;color:var(--grey-300);font-size:12px}

/* ══════════════════════════════════════════════════════════════
   공통 페이지 뼈대 — 앱바 있는 하위 화면 (d-08 이후 전부)
   ══════════════════════════════════════════════════════════════ */
/* 하단 고정 CTA 가 있는 화면은 그만큼 바닥을 비워야 마지막 요소가 안 가린다 */
.kfr-main--cta{padding-bottom:96px}
/* 시안 d-08 실측: 앱바(56) 아래 34 띄우고 제목 */
.kfr-h-page{margin:34px 0 0;font-size:24px;line-height:34px;font-weight:700;color:var(--grey-900);
  letter-spacing:-.02em}
.kfr-page__sub{margin:6px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-note{margin:12px 0 0;padding:16px 18px;border-radius:16px;background:var(--grey-100);
  font-size:14px;line-height:23px;color:var(--grey-600)}

/* 가로 스크롤 칩 줄 — 래퍼 밖으로 흘러 화면 끝까지 간다 (d-08) */
.kfr-chiprow{margin-top:24px;overflow-x:auto;scrollbar-width:none}
.kfr-chiprow::-webkit-scrollbar{height:6px}
.kfr-chiprow__in{display:flex;gap:8px;padding:0 20px;width:max-content}
@media (min-width:768px){
  .kfr-chiprow__in{padding-left:calc(50vw - 280px + 24px);padding-right:24px}
}

/* ── 배대지 주소 (d-08 · m-08 · m-09) ── */
/* 시안 실측: 카드 안쪽은 흰색, 테두리만 연파랑 (d-08 / m-08) */
.kfr-addr__gate{margin-top:26px;border:1.5px solid var(--blue-100)}
.kfr-addr__mine{margin-top:26px}
.kfr-addr__gatelab{margin:0;font-size:13px;line-height:19.5px;color:var(--grey-600)}
.kfr-addr__gatet{margin:4px 0 0;font-size:19px;line-height:28px;font-weight:700;color:var(--blue-500)}
.kfr-addr__gates{margin:8px 0 0;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr-addr__gate .kfr-btn--cta{margin-top:20px}
.kfr-addr__minerow{display:flex;align-items:center;gap:12px;margin-top:4px}
.kfr-addr__minen{flex:1;min-width:0;font-size:26px;line-height:36px;font-weight:800;
  color:var(--grey-900);letter-spacing:.01em}
.kfr-addr__minecp{flex:none;height:36px;padding:0 14px;font-size:14px}

/* 주소 표 — 행 51 · 라벨 96 고정 · 복사 버튼 오른쪽 끝 (d-08 실측) */
.kfr-addr__list{margin-top:28px;padding:0 20px;overflow:hidden}
.kfr-addr__row{display:flex;align-items:center;gap:12px;min-height:51px;padding:8px 0;
  border-top:1px solid var(--grey-100)}
.kfr-addr__row:first-child{border-top:0}
.kfr-addr__lab{flex:none;width:84px;font-size:14px;line-height:21px;color:var(--grey-500)}
.kfr-addr__val{flex:1;min-width:0;font-size:15px;line-height:22.5px;font-weight:600;
  color:var(--grey-900);word-break:break-word}
.kfr-addr__cp{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--grey-400);border-radius:8px}
.kfr-addr__cp:hover{background:var(--grey-50);color:var(--grey-600)}

/* 토스트 — 복사 알림 (m-10). hidden 대신 클래스로 켠다 (전환 애니메이션 때문) */
.kfr-toast{opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s}
.kfr-toast.is-on{opacity:1;visibility:visible;transform:translateY(0)}
@media (min-width:768px){
  .kfr-toast{transform:translateX(-50%) translateY(8px)}
  .kfr-toast.is-on{transform:translateX(-50%) translateY(0)}
}

/* ══════════════════════════════════════════════════════════════
   옛 테마 껍데기 걷어내기 — 리디자인 화면은 앱바·푸터를 스스로 그린다
   .kfr 이 있는 문서에서만 적용되므로 아직 전환 안 한 화면엔 영향이 없다.
   되돌리려면 이 블록만 지우면 된다. (2026-08-14)
   ══════════════════════════════════════════════════════════════ */
body:has(.kfr) .site-header,
body:has(.kfr) .site-footer,
body:has(.kfr) .kf-subhero{display:none}
body:has(.kfr) .site-main,
body:has(.kfr) .wp-block-post-content,
body:has(.kfr) .entry-content{max-width:none;width:auto;margin:0;padding:0}
body:has(.kfr) .wp-site-blocks{padding:0;gap:0}
/* is-layout-constrained 가 .kfr 자체에 max-width 1100 + 좌우 마진 10 을 물린다 */
body:has(.kfr) .kfr{max-width:none;width:auto;margin:0}

/* 푸터 링크 색 — 시안 d-01 은 회색이다 (옛 테마가 파랗게 칠하던 자리) */
.kfr-foot__nav a{color:var(--grey-600)}
.kfr-foot__biz a{color:var(--grey-500)}
.kfr-addr__chips{margin-top:24px}

/* ── 링크 못 읽음 → 무게 직접 선택 (시안 d-05 · m-05) ────────────────
   시안은 노란 경고 박스지만 대표님 지시(노랑 UI 금지)로 파란 안내로 낸다. */
.kfr-q__warn{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:12px 14px;
  border-radius:12px;background:var(--blue-50);color:var(--blue-700);
  font-size:14px;line-height:21px}
.kfr-q__warn svg{flex:none;margin-top:2px}
/* 3열 그리드 · 칩 52 · 선택은 연파랑 배경 + 파란 테두리 (d-05 실측) */
.kfr-weights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.kfr-weight{height:52px;border-radius:14px;border:1px solid var(--grey-200);background:var(--white);
  font-size:15px;font-weight:600;color:var(--grey-700)}
.kfr-weight.is-on{border-color:var(--blue-500);background:var(--blue-50);color:var(--blue-700)}
.kfr-q__foot{margin:10px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}

/* 회원의 내 번호 카드 — 시안 m-09 / d-07 */
.kfr-addr__mine{background:var(--blue-50);box-shadow:none}
.kfr-addr__minelab{margin:0;font-size:13px;line-height:19.5px;font-weight:600;color:var(--blue-700)}
.kfr-addr__minen{display:block;margin:4px 0 0;font-size:28px;line-height:38px;font-weight:800;
  color:var(--grey-900);letter-spacing:.01em}
.kfr-addr__mines{margin:8px 0 0;font-size:14px;line-height:21px;color:var(--grey-600)}
/* 받는사람 줄에서 사서함 번호만 파랗게 */
.kfr-addr__boxno{color:var(--blue-500);font-weight:700}

/* ── 가입 완료 직후 (시안 d-07) ──────────────────────────────
   실측: 카드 177 · 셀렉트 227(56) · 내 번호 박스 300..416 · 받는사람 428..508 · CTA 524(56) */
.kfr-jd{margin-top:24px}
.kfr-jd__lab{margin:0;font-size:13px;line-height:19.5px;color:var(--grey-600)}
/* 홈 밖에서는 셀렉트가 52 로 나온다 — 시안 d-07 은 56 */
.kfr-jd .kfr-select{height:56px;margin-top:6px}
.kfr-jd__box{margin-top:17px;padding:16px 18px 14px;border-radius:16px;background:var(--blue-50)}
.kfr-jd__box .kfr-addr__minen{margin-top:2px}
.kfr-jd__box .kfr-addr__mines{margin-top:6px}
.kfr-jd__ex{margin-top:12px;padding:15px 16px;border-radius:14px;border:1px solid var(--grey-200)}
.kfr-jd__ex span{display:block;font-size:12px;line-height:18px;color:var(--grey-500)}
.kfr-jd__ex b{display:block;margin-top:3px;font-size:17px;line-height:25.5px;font-weight:700;
  color:var(--grey-900)}
.kfr-jd__ex i{font-style:normal}
.kfr-jd__cta{margin-top:16px}
.kfr-jd__all{display:block;margin-top:10px;padding:10px 0;text-align:center;
  font-size:15px;font-weight:600;color:var(--grey-600)}

/* ══ 로그인 · 회원가입 (시안 d-29 / d-28) ═══════════════════════════
   실측: 제목 115 · 부제 148 · 카카오 182(56) · "또는 이메일로" 259 · 카드 285 */
.kfr-auth .kfr-h-page{margin-top:34px}
.kfr-btn--kakao{height:56px;border-radius:16px;background:#fee500;color:#191f28;
  font-size:17px;font-weight:600;margin-top:24px;text-decoration:none}
.kfr-btn--kakao:hover{background:#f2da00}
.kfr-auth__or{margin:14px 0 0;text-align:center;font-size:14px;line-height:21px;color:#8b95a1}
.kfr-auth__card{margin-top:14px}
.kfr-f{display:block}
.kfr-f + .kfr-f{margin-top:16px}
.kfr-f__lab{display:block;margin-bottom:6px;font-size:13px;line-height:19.5px;font-weight:500;
  color:var(--grey-600)}
.kfr-auth .kfr-input{width:100%;height:52px;padding:0 16px;border:1.5px solid transparent;
  border-radius:14px;background:var(--grey-100);font-size:16px;color:var(--grey-900)}
.kfr-auth .kfr-input::placeholder{color:var(--grey-400)}
.kfr-auth .kfr-input:focus{outline:0;background:var(--white);border-color:var(--blue-500)}
.kfr-auth__err{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:#fdecec;
  font-size:14px;line-height:21px;color:#d94a4a}
.kfr-auth__links{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:20px}
.kfr-auth__links a{font-size:15px;font-weight:500;color:var(--grey-600);text-decoration:none}
.kfr-auth__links a.is-blue{font-weight:600;color:var(--blue-500)}
/* 비밀번호 세기 3칸 (d-28) */
.kfr-pwbar{display:flex;gap:6px;margin-top:8px}
.kfr-pwbar i{flex:1;height:3px;border-radius:9999px;background:var(--grey-200)}
.kfr-pwbar i.is-on{background:var(--green-500)}
/* 약관 카드 */
.kfr-agree{margin-top:16px}
.kfr-agree__all{display:flex;align-items:center;gap:10px;cursor:pointer}
.kfr-agree__all input{position:absolute;opacity:0;width:0;height:0}
.kfr-agree__box{width:24px;height:24px;flex:none;border-radius:9999px;background:var(--grey-200);
  color:var(--white);display:flex;align-items:center;justify-content:center}
.kfr-agree__all input:checked + .kfr-agree__box{background:var(--blue-500)}
.kfr-agree__all b{font-size:16px;font-weight:600;color:var(--grey-900)}
.kfr-agree.is-need .kfr-agree__box{box-shadow:0 0 0 3px var(--blue-a16)}
.kfr-agree__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-left:34px;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr-agree__row a{flex:none;font-size:14px;color:var(--grey-500);text-decoration:none}

/* ══ 신청 완료 (시안 d-25) ═══════════════════════════════════════ */
.kfr-done__ico{width:64px;height:64px;margin:40px auto 0;border-radius:9999px;background:var(--blue-50);
  display:flex;align-items:center;justify-content:center}
.kfr-done__t{margin:20px 0 0;text-align:center;font-size:22px;line-height:31px;font-weight:700;
  color:var(--grey-900);letter-spacing:-.01em}
.kfr-done__s{margin:8px 0 0;text-align:center;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-done__next{margin-top:28px}
.kfr-done__nt{margin:0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr-done__list{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.kfr-done__list li{display:flex;gap:12px;align-items:flex-start}
.kfr-done__list i{flex:none;width:14px;font-style:normal;font-size:14px;font-weight:700;
  line-height:22.5px;color:var(--grey-400)}
.kfr-done__list li:first-child i{color:var(--blue-500)}
.kfr-done__list span{font-size:15px;line-height:22.5px;color:var(--grey-800)}
.kfr-done__note{margin:16px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}
/* 시안 d-25 는 노란 카드다 (PNG 절대 기준 지시) */
.kfr-done__warn{margin-top:16px;background:var(--yellow-bg);box-shadow:none}
.kfr-done__wt{margin:0;font-size:16px;line-height:24px;font-weight:600;color:var(--grey-900)}
.kfr-done__ws{margin:6px 0 0;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr-done__wb{margin:12px 0 0;font-size:17px;line-height:25.5px;font-weight:700;color:var(--grey-900)}
.kfr-done__wb b{color:var(--blue-500)}

/* ══ 쓰다 만 신청서 (시안 d-26 · m-27) ═══════════════════════════ */
.kfr-drafts__list{margin-top:20px;padding:0 20px;overflow:hidden}
.kfr-draft{padding:20px 0;border-top:1px solid var(--grey-100)}
.kfr-draft:first-child{border-top:0}
.kfr-draft__meta{margin:0;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr-draft__meta i{font-style:normal;margin:0 2px}
.kfr-draft__t{margin:6px 0 0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr-draft__step{margin:4px 0 0;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr-draft__btns{display:flex;gap:10px;margin-top:14px}
.kfr-draft__go{flex:1;height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:var(--blue-500);color:var(--white) !important;
  font-size:16px;font-weight:600;text-decoration:none}
.kfr-draft__del{flex:none;height:52px;padding:0 18px;border:0;border-radius:14px;
  background:var(--grey-100);color:var(--grey-700);font-size:15px;font-weight:600;cursor:pointer}
.kfr-drafts__foot{margin:14px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr-drafts__empty{margin-top:20px;text-align:center}
.kfr-drafts__et{margin:0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr-drafts__es{margin:6px 0 20px;font-size:15px;line-height:22.5px;color:var(--grey-600)}

/* ══ 내 배송 (시안 d-30) ═════════════════════════════════════════ */
.kfr-ship__todo{margin-top:20px;border:1.5px solid var(--blue-100)}
.kfr-ship__badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;
  background:var(--grey-100);color:var(--grey-700);font-size:13px;font-weight:600}
.kfr-ship__badge.is-now{background:var(--blue-50);color:var(--blue-700)}
.kfr-ship__todot{margin:12px 0 0;font-size:19px;line-height:28px;font-weight:700;color:var(--grey-900)}
.kfr-ship__todos{margin:8px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-ship__pay{margin-top:18px}
/* 2열 바로가기 */
.kfr-ship__quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kfr-ship__quick a{padding:18px 20px;border-radius:20px;background:var(--white);
  box-shadow:var(--shadow-card);text-decoration:none}
.kfr-ship__quick b{display:block;font-size:16px;font-weight:600;color:var(--grey-900)}
.kfr-ship__quick span{display:block;margin-top:4px;font-size:13px;line-height:19.5px;color:var(--grey-500)}
/* 받는 중인 물건 */
.kfr-ship__sech{margin-top:28px}
.kfr-ship__list{margin-top:12px;padding:0 20px;overflow:hidden}
.kfr-shiprow{display:block;padding:20px 0;border-top:1px solid var(--grey-100);text-decoration:none}
.kfr-shiprow:first-child{border-top:0}
.kfr-shiprow__hd{display:flex;align-items:center;gap:8px;margin:0}
.kfr-shiprow__hd em{font-style:normal;font-size:13px;color:var(--grey-500)}
.kfr-shiprow__t{margin:10px 0 0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr-shiprow__m{margin:4px 0 0;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr-shiprow__bar{display:block;height:4px;margin-top:14px;border-radius:9999px;
  background:var(--grey-200);overflow:hidden}
.kfr-shiprow__bar i{display:block;height:100%;border-radius:9999px;background:var(--blue-500)}

/* ══ 회원 등급 (시안 d-34) ═══════════════════════════════════════ */
.kfr-gr__now{margin-top:20px}
.kfr-gr__hd{display:flex;align-items:center;justify-content:space-between;margin:0}
.kfr-gr__hd b{font-size:17px;line-height:25.5px;font-weight:700;color:var(--grey-900)}
.kfr-gr__hd span{font-size:14px;color:var(--grey-500);font-variant-numeric:tabular-nums}
.kfr-gr__bar{display:block;height:8px;margin-top:12px;border-radius:9999px;
  background:var(--grey-200);overflow:hidden}
.kfr-gr__bar i{display:block;height:100%;border-radius:9999px;background:var(--blue-500)}
.kfr-gr__lab{margin:18px 0 0;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr-gr__list{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.kfr-gr__list li{display:flex;align-items:center;gap:10px;
  font-size:15px;line-height:22.5px;color:var(--grey-800)}
.kfr-gr__list svg{flex:none}
.kfr-gr__list--dim li{color:var(--grey-600)}
.kfr-gr__list--dim i{flex:none;width:6px;height:6px;border-radius:9999px;background:var(--grey-300)}
.kfr-gr__next{margin-top:16px}
.kfr-gr__badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;
  background:var(--yellow-bg);color:var(--yellow-600);font-size:13px;font-weight:600}
.kfr-gr__nt{margin:12px 0 0;font-size:17px;line-height:25.5px;font-weight:700;color:var(--grey-900)}
.kfr-gr__move{margin-top:16px}
.kfr-gr__mt{margin:0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr-gr__ms{margin:6px 0 16px;font-size:14px;line-height:21px;color:var(--grey-600)}

/* ══ 요금표 (시안 d-35) ══════════════════════════════════════════ */
.kfr-price__chips{margin-top:24px}
/* 요금 문장 — 2026-09-02. 크롤러·AI 가 발췌할 6요소 문장. 목록 바로 위 한 줄. */
.kfr-price__lead{margin:16px 0 0;font-size:14px;line-height:21px;color:var(--grey-700,#4e5968)}
.kfr-land__lead{margin:10px 0 0}
.kfr-price__list{margin-top:20px;padding:0 20px;overflow:hidden}
.kfr-price__row{display:flex;align-items:center;justify-content:space-between;min-height:56px;
  padding:8px 0;border-top:1px solid var(--grey-100)}
.kfr-price__row:first-child{border-top:0}
.kfr-price__row span{font-size:16px;font-weight:600;color:var(--grey-900)}
.kfr-price__row b{font-size:17px;font-weight:700;color:var(--grey-900);
  font-variant-numeric:tabular-nums}
/* 리디자인 화면은 쇼트코드 출력 하나로 완결된다. 페이지 콘텐츠에 남아 있는 빈 문단 등이
   앞에 끼면 화면 전체가 밀린다(pricing 에서 52px 밀렸다). 형제 요소를 숨긴다. */
/* 2026-08-16: 이 규칙이 사진 업로드 모달·바텀시트까지 숨기고 있었다.
   모달류는 본문 밖에 놓이는 게 정상이므로 예외로 둔다. */
/* 2026-08-17: 글 상세(single)에서는 .entry-content 가 곧 본문이다 — 이 규칙이 본문을
   통째로 지웠다. body.single 을 제외한다. */
/* 2026-08-17: 2차 시트(.kfr2-sheet)도 본문 밖에 놓이는 게 정상이다 —
   예외에 넣지 않으면 이 규칙이 특이도로 이겨서 시트가 아예 안 열린다. */
body:has(.kfr):not(.single) .entry-content > *:not(.kfr):not(.kf-imgmodal):not(.kf-sheet):not(.kfr2-sheet):not(.kfr2-dlg):not(.kf-nav):not(.kf-mb){display:none}

/* ══ FAQ (시안 d-37) ═════════════════════════════════════════════ */
.kfr-faq2__tabs{margin-top:22px}
.kfr-faq2__list{margin-top:20px;padding:0 20px;overflow:hidden}
.kfr-faq2__list .kf-faq{display:block}
.kfr-faq2__list .kf-faq__item{border-top:1px solid var(--grey-100)}
.kfr-faq2__list .kf-faq__item:first-child{border-top:0}
.kfr-faq2__list .kf-faq__q{display:flex;align-items:center;gap:10px;width:100%;min-height:62px;
  padding:12px 0;border:0;background:none;text-align:left;cursor:pointer}
.kfr-faq2__list .kf-faq__q i{flex:none;font-style:normal;font-size:15px;font-weight:700;color:var(--blue-500)}
.kfr-faq2__list .kf-faq__q span{flex:1;min-width:0;font-size:16px;line-height:24px;
  font-weight:600;color:var(--grey-900)}
.kfr-faq2__list .kf-faq__q svg{flex:none;transition:transform .2s var(--ease-out);stroke:#b0b8c1}
.kfr-faq2__list .kf-faq__item.is-open .kf-faq__q svg{transform:rotate(180deg)}
.kfr-faq2__list .kf-faq__a{padding:0 0 18px 25px;font-size:15px;line-height:24px;color:var(--grey-600)}
.kfr-faq2__list .kf-faq__a[hidden]{display:none}
/* 질문을 h3 로 감쌌다 (2026-09-02, AI·검색이 질문을 소제목으로 읽게).
   h3 기본 여백·크기를 없애 화면은 이전과 동일하게 유지한다. */
.kfr-faq2__list .kf-faq__qh{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit}
/* 요금 FAQ 안의 요금표 */
.kfr-faq2__list .kf-faq__tbl{width:100%;border-collapse:collapse;margin:12px 0 4px;font-size:14px}
.kfr-faq2__list .kf-faq__tbl caption{caption-side:top;text-align:left;padding:0 0 8px;
  font-size:12.5px;color:var(--grey-500,#8b95a1);line-height:1.5}
.kfr-faq2__list .kf-faq__tbl th,.kfr-faq2__list .kf-faq__tbl td{padding:7px 8px;text-align:right;
  border-bottom:1px solid var(--grey-100);white-space:nowrap}
.kfr-faq2__list .kf-faq__tbl thead th{font-size:12.5px;font-weight:600;color:var(--grey-500,#8b95a1)}
.kfr-faq2__list .kf-faq__tbl th[scope=row]{text-align:left;font-weight:600;color:var(--grey-900)}
.kfr-faq2__list .kf-faq__tbl tbody tr:last-child th,.kfr-faq2__list .kf-faq__tbl tbody tr:last-child td{border-bottom:0}
/* 1:1 문의 카드도 같은 컬럼에 */
.kfr-faq2 #kfContact{margin-top:16px;padding:24px 20px;border-radius:20px;background:var(--white);
  box-shadow:var(--shadow-card);border:0}

/* ══ 상담 (시안 d-39) ════════════════════════════════════════════ */
.kfr-sup__list{margin-top:20px;padding:0 20px;overflow:hidden}
.kfr-sup__row{display:flex;align-items:center;gap:14px;min-height:82px;padding:14px 0;
  border-top:1px solid var(--grey-100);text-decoration:none}
.kfr-sup__row:first-child{border-top:0}
.kfr-sup__ico{flex:none;width:44px;height:44px;border-radius:14px;background:var(--grey-100);
  display:flex;align-items:center;justify-content:center}
.kfr-sup__ico.is-kakao{background:var(--kakao)}
.kfr-sup__tx{flex:1;min-width:0}
.kfr-sup__tx b{display:block;font-size:16px;line-height:24px;font-weight:700;color:var(--grey-900)}
.kfr-sup__tx em{display:block;margin-top:2px;font-style:normal;font-size:14px;line-height:21px;
  color:var(--grey-500)}
.kfr-sup__arw{flex:none}

/* ══ 국가별 랜딩 (시안 d-40) ═════════════════════════════════════ */
.kfr-land .kfr-eyebrow{display:flex;align-items:center;justify-content:center;gap:6px}
.kfr-land__t{margin-top:8px}
.kfr-land__q{margin-top:24px}
.kfr-land__q .kfr-input{margin-top:10px}
.kfr-land__hint{margin:12px 0 0;font-size:14px;line-height:21px;color:var(--grey-500)}
.kfr-land__facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kfr-land__facts > div{padding:18px 20px;border-radius:20px;background:var(--white);
  box-shadow:var(--shadow-card)}
.kfr-land__facts b{display:block;font-size:16px;line-height:24px;font-weight:700;color:var(--grey-900)}
.kfr-land__facts span{display:block;margin-top:4px;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr-land__sech{margin-top:28px}
.kfr-land__steps{margin-top:12px;padding:0 20px;overflow:hidden}
.kfr-land__step{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;
  border-top:1px solid var(--grey-100)}
.kfr-land__step:first-child{border-top:0}
.kfr-land__step i{flex:none;width:14px;font-style:normal;font-size:14px;font-weight:700;
  color:var(--grey-400)}
.kfr-land__step:first-child i{color:var(--blue-500)}
.kfr-land__step span{font-size:15px;line-height:22.5px;color:var(--grey-800)}
/* 옛 사이트 헤더 로고가 .site-header 밖에 따로 렌더돼 살아남았다 (추적 화면에서 흰 글자로 발견) */
body:has(.kfr) .site-header__logo,
body:has(.kfr) .site-header__wrap,
body:has(.kfr) .site-header__mobile{display:none !important}

/* 앱바 미리보기 배지 (PNG m-24) — 배지 규격은 개발가이드 §5.4 */
.kfr-appbar__badge{flex:none;height:24px;display:inline-flex;align-items:center;padding:0 8px;
  margin-left:8px;border-radius:6px;background:var(--blue-a16);color:var(--blue-700);
  font-size:13px;font-weight:600;white-space:nowrap}

/* 후기 행 내용 — PNG m-44 실측
   별점 → 본문 → (이름님)(국가·무게 배지)(날짜) */
.kfr-rev__stars{display:flex;gap:4px;margin-bottom:8px;font-size:15px;line-height:1;color:var(--grey-300)}
.kfr-rev__stars i{font-style:normal}
.kfr-rev__stars i.is-on{color:var(--yellow-500)}
.kfr-rev__body{margin:0;font-size:17px;line-height:25.5px;color:var(--grey-800);
  word-break:keep-all}   /* 한글은 단어 단위로 끊는다 */
.kfr-rev__meta{display:flex;align-items:center;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.kfr-rev__meta b{font-size:15px;line-height:22.5px;font-weight:600;color:var(--grey-800)}
.kfr-rev__meta em{flex:none;height:24px;display:inline-flex;align-items:center;padding:0 8px;
  border-radius:6px;background:var(--grey-100);color:var(--grey-700);
  font-style:normal;font-size:13px;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.kfr-rev__meta time{font-size:15px;line-height:22.5px;color:var(--grey-500)}

/* FAQ 하단 '여기 없는 걸 물어볼래요' — PNG m-37. 개발가이드 §5.2 보조(파랑 연함) */
.kfr-faq2__ask{margin-top:12px}
.kfr-faq2__contact{margin-top:12px}

/* ══ 신청서 단계 제목·부제 (시안 m-17·m-19·m-22) ═══════════════════
   2·3·4단계에 제목이 아예 없었다. 1단계는 게이트(.kf-g1__t)가 갖고 있다.
   order 는 5/6 — 미리보기 배너(.kf-prevbar)가 제목 위에 와야 한다 (시안 m-24).
   크기는 PNG 실측(잉크 19.5px → 약 24px)을 따른다. 가이드 표의 22 는 시안과 어긋난다. */
.kf-apply__hero #kfStepTitle:not([hidden]){order:5;display:block !important;margin:25px 0 0;
  font-size:24px;line-height:34px;font-weight:700;color:#191f28;letter-spacing:-.02em}
.kf-apply__hero #kfStepSub:not([hidden]){order:6;display:block !important;margin:6px 0 0;
  font-size:15px;line-height:22.5px;font-weight:400;color:#6b7684;letter-spacing:normal}
.kf-apply__hero #kfStepTitle[hidden],.kf-apply__hero #kfStepSub[hidden]{display:none !important}

/* ══ 추가 상품 카드 (인터랙션 가이드 §B-2) ═════════════════════════
   머리 제목은 #333d4b, 빼기는 #8b95a1. 옛 규칙이 각각 #191f28·붉은색으로
   !important 덮어쓰고 있어 여기서 되돌린다. */
.kf-item--mini .kf-item__title{color:#333d4b !important}
.kf-item--mini .kf-item__del{color:#8b95a1 !important;border-color:transparent !important}

/* 세관 번호 안내는 두 문단 — 시안 m-22 는 사이가 12px 벌어져 있다 */
.kf-s4__hint + .kf-s4__hint{margin-top:12px}

/* ══ 신청서 좌우 여백 (시안 전 화면 20 / 카드 350) ═════════════════
   .kf-apply__body 의 12px 와 .kf-apply__in 의 20px 가 겹쳐 32px 가 됐다.
   카드가 326 으로 좁아지고 본문 제목도 32 에서 시작해 다른 화면과 어긋났다.
   겉 여백을 0 으로 두고 안쪽 20 만 남긴다. PC 는 .kf-apply__in 이 margin:auto
   로 가운데 정렬돼 있어 영향이 없다. */
.kf-apply__body{padding-left:0 !important;padding-right:0 !important}

/* ══ 3·4단계 세로 리듬 (시안 m-19·m-22 실측) ══════════════════════
   진행바→제목 24 (라이브 40), 제목→부제 6 (라이브 24).
   추천 카드는 배경이 투명이라 페이지 회색이 비쳐 보였다 — 시안은 흰색. */
#kfStep4 .kf-s3__t{margin:12px 0 0}
/* 3단계는 handoff6 가이드 — h1 위 24px (2026-08-31) */
#kfStep3 .kf-s3__t{margin:24px 0 0}
#kfStep3 .kf-s3__s,#kfStep4 .kf-s3__s{margin:6px 0 0}
#kfS3Reco{background:#fff}

/* ══ 앱바 → 화면 제목 여백 (시안 실측) ═════════════════════════════
   시안은 앱바 아래 잉크까지 29.5px, 라이브는 39.5px 였다 (전 화면 공통 +10).
   .kfr-h-page 의 34 를 24 로 낮춰 맞춘다. 신청서는 이미 22 로 따로 맞춰져 있다. */
.kfr-h-page{margin-top:24px}
.kfr-auth .kfr-h-page{margin-top:24px}

/* ══ 옛 화면 좌우 여백 통일 (모바일 20 / 카드 350) ═════════════════
   리디자인 컨테이너(.kfr-wrap)를 안 쓰는 화면들이 제각각이었다.
   실측: .kf-panel 14 · .kf-auth__card 15 · .auth-form-card 40.
   PC 는 이미 맞춰져 있어 모바일에만 건다. */
@media (max-width:767px){
  /* .site-main--page 에 패딩을 주면 .kfr-wrap·.kf-apply__in 의 20 과 겹쳐 40 이 된다.
     겉은 건드리지 말고 안쪽만 맞춘다. 인증 화면은 main 24 라 -4 로 20 을 만든다. */
  .auth-form-wrap{padding-left:0 !important;padding-right:0 !important;
    margin-left:-4px !important;margin-right:-4px !important}
  .auth-form-card,.kf-auth__card{margin-left:0 !important;margin-right:0 !important;
    max-width:none !important;width:auto !important}
}
/* .kf-tf 는 음수 마진으로 전체폭으로 나가고 안쪽 14 를 썼다 → 20.
   .kf-auth 는 15 → 20. (문의·등급이전·알림·약관·개인정보·비번찾기) */
@media (max-width:767px){
  .kf-tf__body{padding-left:20px !important;padding-right:20px !important}
  .kf-auth{padding-left:20px !important;padding-right:20px !important}
}
/* 블로그(공지·이벤트)는 키서프 시절 레이아웃이라 24 를 쓴다 → 모바일 20 통일 */
@media (max-width:767px){ .ks-wrap,.ks-wrap--narrow{padding-left:20px !important;padding-right:20px !important} }

/* ══ 공지·이벤트 목록 (리디자인 DNA) ═══════════════════════════════
   키서프 시절 표 스타일(파란 밑줄 + 가운데 정렬)이 남아 있었다.
   임시저장 목록과 같은 흰 카드 + 좌우 배치로 맞춘다. */
.kfr-board .kf-board{margin-top:20px}
.kfr-board .kf-board__list{border-top:0 !important;background:var(--white);border-radius:20px;
  overflow:hidden;box-shadow:0 1px 3px rgba(0,23,51,.08)}
.kfr-board .kf-board__list li a{display:flex !important;flex-direction:row !important;
  align-items:center;justify-content:space-between;
  gap:12px;padding:16px 20px !important;border-bottom:1px solid var(--grey-100) !important;
  text-decoration:none;color:var(--grey-900) !important;font-size:16px;line-height:24px}
.kfr-board .kf-board__list li:last-child a{border-bottom:0 !important}
.kfr-board .kf-board__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:500;text-align:left}
.kfr-board .kf-board__list time{flex:none;color:var(--grey-500) !important;font-size:13px;
  line-height:19.5px;white-space:nowrap}
.kfr-board .kf-board__new{display:inline-flex;align-items:center;height:20px;padding:0 6px;margin-left:6px;
  border-radius:6px;background:var(--blue-50);color:var(--blue-700);font-size:11px;font-weight:700}
.kfr-board .kf-board__empty{background:var(--white) !important;border-radius:20px;padding:48px 20px !important;
  color:var(--grey-600) !important;font-size:15px}
/* 상세 */
.kfr-board .kf-board__view{background:var(--white);border-radius:20px;padding:24px 20px;margin-top:20px}
.kfr-board .kf-board__view h2{margin:0;font-size:20px;line-height:29px;font-weight:700;color:var(--grey-900)}
.kfr-board .kf-board__view time{display:block;margin-top:6px;font-size:13px;color:var(--grey-500)}
.kfr-board .kf-board__body{margin-top:18px;font-size:16px;line-height:26px;color:var(--grey-800)}

/* ══ 옛 고정 헤더가 새 앱바 위에 겹쳐 보이던 문제 ══════════════════
   /support/ · /germany/ 등에서 .kf-ghead--fixed 가 y=12 에 떠서
   로그인·햄버거가 회색 박스로 두 번 보였다 (시안엔 앱바 하나뿐).
   새 앱바가 있는 화면에서는 옛 헤더를 완전히 감춘다.
   2026-08-16: inc/nav.php 에서 아예 만들지 않도록 막았고, 이 규칙은
   JS 실행 전 깜빡임을 막는 이중 안전장치로 남긴다. */
body:has(.kfr-appbar) .kf-ghead{display:none !important}

/* ══ 국가 랜딩 히어로는 가운데 정렬 (시안 m-40·d-40) ═══════════════
   배지·제목·설명이 왼쪽으로 붙어 있었다. 아래 카드들은 그대로 왼쪽. */
.kfr-land .kfr-eyebrow,
.kfr-land .kfr-land__t,
.kfr-land .kfr-hero__s{text-align:center}
.kfr-land .kfr-eyebrow{justify-content:center}

/* PC 는 제목 위가 시안보다 16 부족했다 (9개 화면 실측 −16, x 는 305 로 일치).
   모바일 24 는 이미 맞으므로 PC 에만 올린다. */
@media (min-width:768px){
  .kfr-h-page,.kfr-auth .kfr-h-page{margin-top:40px}
}

/* 신청서 1단계 제목→부제: 시안 잉크간격 18, 라이브 36 이었다.
   테마 h2 의 margin-bottom 10 + .kf-stepwrap 의 flex gap 14 가 겹쳤다.
   gap 은 다른 형제(카드·버튼)에도 쓰이므로 제목·부제 쌍만 −8 로 좁힌다. */
.kf-g1__t{margin-bottom:0 !important}
.kf-g1__s{margin-top:-8px !important}

/* ══ 메뉴는 전체 화면 (시안 m-41·m-42·d-41) ════════════════════════
   지금은 우측 패널(모바일 320 / PC 400)이라 뒤 화면이 비쳐 보였다.
   시안은 흰 바탕이 화면을 다 덮고, 내용만 본문과 같은 열에 놓인다. */
.kf-nav__panel{position:absolute !important;inset:0 !important;
  width:100% !important;max-width:none !important;box-shadow:none !important;
  animation:none !important}
.kf-nav__dim,.kf-nav::before{display:none !important}
.kf-nav__hd,.kf-nav__body,.kf-nav__ft{width:100%;max-width:390px;margin-left:auto;margin-right:auto;
  padding-left:20px !important;padding-right:20px !important;box-sizing:border-box}
@media (min-width:768px){
  .kf-nav__hd,.kf-nav__body,.kf-nav__ft{max-width:560px;padding-left:24px !important;padding-right:24px !important}
}
/* 메뉴 머리: 로고 왼쪽 · 닫기 오른쪽 (시안 m-42) */
.kf-nav__hdtop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kf-nav__x{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--grey-900);cursor:pointer;padding:0}
.kf-nav__x svg{stroke:currentColor !important}
/* 메뉴 배지 — 시안 m-42: 파란 알약 */
.kf-nav__badge{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 8px;
  border-radius:8px;background:var(--blue-50);color:var(--blue-700);
  font-size:13px;font-weight:600;font-style:normal;white-space:nowrap}

/* ══ 배송비 결제 (시안 m-32 · m-33 · d-32) ═════════════════════════ */
.kfr-pay__what{margin:24px 0 0;font-size:17px;line-height:25.5px;color:var(--grey-600)}
.kfr-pay__sum{margin:2px 0 0;font-size:30px;line-height:40px;font-weight:700;
  color:var(--grey-900);letter-spacing:-.02em}
.kfr-pay__sub{margin:6px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-pay__break{margin-top:20px}
.kfr-pay__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;font-size:16px;line-height:24px}
.kfr-pay__row span{color:var(--grey-600)}
.kfr-pay__row b{font-weight:500;color:var(--grey-900)}
.kfr-pay__free{color:var(--green-600) !important;font-weight:600 !important}
.kfr-pay__tot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;padding-top:16px;border-top:1px solid var(--grey-200)}
.kfr-pay__tot span{font-size:17px;line-height:25.5px;font-weight:700;color:var(--grey-900)}
.kfr-pay__tot b{font-size:20px;line-height:29px;font-weight:700;color:var(--grey-900)}
.kfr-pay__h{margin-top:28px}
.kfr-pay__ways{margin-top:12px;overflow:hidden}
.kfr-pay__way{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;
  border-bottom:1px solid var(--grey-100)}
.kfr-pay__ways .kfr-pay__way:last-child{border-bottom:0}
.kfr-pay__ic{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--grey-100);color:var(--grey-700)}
.kfr-pay__wt{flex:1;min-width:0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr-pay__way input{position:absolute;opacity:0;width:0;height:0}
.kfr-pay__rd{flex:none;width:24px;height:24px;border-radius:9999px;
  border:1.5px solid var(--grey-300);background:var(--white);position:relative}
.kfr-pay__way input:checked ~ .kfr-pay__rd{border-color:var(--blue-500);background:var(--blue-500)}
/* 지점 추가 작업의 사유 — 금액 줄 바로 아래 (2026-09-02) */
.kfr-pay__why{margin:-2px 0 10px;padding:10px 12px;border-radius:8px;background:var(--grey-100);
  font-size:13px;line-height:20px;color:var(--grey-600);text-wrap:pretty}
.kfr-pay__why::before{content:'현지 센터에서 추가한 이유 · ';font-weight:600;color:var(--grey-700)}
.kfr-pay__offmsg.is-warn{color:#d0342c;background:#fff3f2;transition:background 150ms cubic-bezier(.4,0,.2,1)}
.kfr-pay__off{display:block;margin-top:2px;font-size:13px;line-height:19px;font-weight:500;
  font-style:normal;color:var(--grey-500,#78828f)}
.kfr-pay__offmsg{margin:0;padding:14px 20px;border-top:1px solid var(--grey-100,#eef1f5);
  font-size:14px;line-height:21px;color:var(--grey-600,#5c6673);background:var(--grey-50,#f7f8fa)}
.kfr-pay__way input:checked ~ .kfr-pay__rd::after{content:"";position:absolute;left:7px;top:4px;
  width:6px;height:11px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.kfr-pay__note{margin:12px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}


/* ══ 3·4단계 세로 리듬 2차 (시안 d-19 잉크 실측) ═══════════════════
   제목→부제 32 (시안 18) — 1단계와 같은 .kf-stepwrap flex gap 14 겹침.
   배지→추천제목 14 (시안 23). */
/* gap:14px 상쇄용 — 3단계는 gap 을 0 으로 두므로 제외한다 (2026-08-31) */
#kfStep4 .kf-s3__s{margin-top:-8px}
#kfS3Reco .kf-s3__recot{margin-top:9px}
/* 추천제목→설명 11 (시안 15) */
#kfS3Reco .kf-s3__recos{margin-top:4px}
/* 설명→버튼 25 (시안 20) */
#kfS3Reco .kf-s3__recobtn{margin-top:13px}

/* ══ 카테고리 시트가 화면 밖으로 나가던 버그 ═══════════════════════
   .kf-apply 가 transform:translateX(-50%) 로 전체폭을 만들고 있었다.
   transform 이 걸린 조상은 position:fixed 의 기준(containing block)이 되어,
   시트가 화면(844)이 아니라 문서 높이(1477)를 기준으로 잡히고 박스가
   1181px 아래 = 화면 밖에 그려졌다. 그래서 눌러도 '깜빡'만 했다.
   같은 전체폭을 음수 마진으로 만들어 transform 을 없앤다. (PC 는 원래 none) */
.kf-apply{left:auto !important;transform:none !important;width:auto !important;
  margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important}

/* 배송 번호는 선택 입력 — 지금 몰라도 신청할 수 있다 */
.kf-optional{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:6px;
  border-radius:6px;background:var(--grey-100);color:var(--grey-600);
  font-size:12px;font-weight:600;vertical-align:middle}

/* ══ 메뉴 계정 카드·버튼 대비 (시안 m-42 · d-41) ═══════════════════
   옛 메뉴는 어두운 배경이라 흰 글자·반투명 흰 배경을 썼는데,
   전체 화면 흰 배경으로 바꾸면서 글자가 흰색 위 흰색이 됐다 (대비 1.00).
   시안: 계정 카드는 회색 바탕, 이름은 검정, 사서함 번호는 파랑. */
.kf-nav__me{background:var(--grey-100) !important;border:0 !important;
  border-radius:16px !important;padding:18px 20px !important;margin-top:16px !important}
.kf-nav__av{background:var(--grey-200) !important;color:var(--grey-700) !important}
.kf-nav__mein b{color:var(--grey-900) !important;font-size:17px;line-height:25.5px;font-weight:700}
.kf-nav__gr{color:var(--white) !important}          /* 등급 배지는 자체 배경색을 쓴다 */
.kf-nav__mbox{margin-top:10px !important;background:none !important;border:0 !important;padding:0 !important}
.kf-nav__mboxl small{display:block;color:var(--grey-700) !important;font-size:13px;line-height:19.5px}
.kf-nav__mboxl b{color:var(--blue-700) !important;font-size:15px;line-height:22.5px;font-weight:600}
.kf-nav__cp{color:var(--grey-500) !important}

/* 가입/로그인 두 버튼 — 시안 d-41: 가입 파란 채움 · 로그인 흰 바탕 + 테두리 */
.kf-nav__join .kf-nav__auth a:first-child,
.kf-nav__join .kf-nav__auth button:first-child{
  background:var(--blue-700) !important;color:var(--white) !important;border:0 !important}
.kf-nav__join .kf-nav__auth a:last-child,
.kf-nav__join .kf-nav__auth button:last-child{
  background:var(--white) !important;color:var(--grey-800) !important;
  border:1px solid var(--grey-300) !important}
.kf-nav__join .kf-nav__auth a,.kf-nav__join .kf-nav__auth button{
  height:52px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;font-size:16px;font-weight:600;text-decoration:none}

/* ══ 받을 주소 — 우편번호 찾기 한 칸 (시안 m-22 · d-22) ════════════
   예전엔 [우편번호][검색버튼] + 도로명 + 상세주소 세 칸이 한꺼번에 보였다.
   시안은 검색 칸 하나뿐이고, 고르면 그 자리에 주소가 들어차고 상세주소가 나타난다. */
.kf-zipfind{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;height:56px;padding:0 16px;border:0;border-radius:14px;
  background:var(--grey-100);color:var(--grey-400);cursor:pointer;text-align:left;
  font-size:16px;line-height:24px;font-family:inherit}
.kf-zipfind__tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kf-zipfind__tx.is-set{color:var(--grey-900)}
.kf-zipfind svg{flex:none;color:var(--grey-500)}
.kf-zipdetail{width:100%;height:56px;margin-top:10px;padding:0 16px;border:0;border-radius:14px;
  background:var(--grey-100);font-size:16px;color:var(--grey-900)}
.kf-zipdetail[hidden]{display:none}

/* ══ 상품 썸네일이 회색으로만 보이던 원인 ══════════════════════════
   background-image 는 걸렸는데 background-size 가 auto 라
   320x400 원본의 '왼쪽 위 흰 여백'만 56x56 칸에 들어왔다.
   상품은 가운데 있으므로 cover + center 로 채운다. */
.kf-item__imgprev{background-size:cover !important;background-position:center !important;
  background-repeat:no-repeat !important}

/* ══ 세관 신고 동의 줄 ══════════════════════════════════════════════
   시안 m-22 에는 이 줄이 없다(대표님 8/14 결정으로 추가된 항목).
   그래서 옛 스타일(굵은 남색 800 + '자세히'가 세로로 쪼개짐)이 그대로 남아
   주변 리디자인과 따로 놀았다. 리디자인 언어로 다시 짠다. */
.kf-g2__agree{display:flex !important;align-items:flex-start !important;gap:12px;
  background:var(--white);border-radius:16px;padding:16px 20px;margin-top:12px;
  font-size:15px !important;line-height:22.5px;font-weight:400 !important;
  color:var(--grey-800) !important;letter-spacing:normal !important;cursor:pointer}
.kf-g2__agree input{width:22px;height:22px;flex:none;margin-top:1px;
  accent-color:var(--blue-500);border-radius:6px;cursor:pointer}
.kf-g2__agree a{flex:none;margin-left:auto;align-self:center;white-space:nowrap;
  color:var(--grey-500) !important;font-size:13px;font-weight:500;text-decoration:underline}
/* 미동의 안내 */
.kf-g2__warn{display:flex;align-items:center;gap:8px;margin-top:12px;padding:14px 16px;
  border-radius:14px;background:var(--blue-50);color:var(--blue-700);
  font-size:14px;line-height:21px}
.kf-g2__warn b{font-weight:700}

/* ══ 구글 로그인 버튼 (카카오와 같은 규격) ═════════════════════════
   GSI 기본 버튼은 폭·서체가 고정이라 시안과 안 맞는다.
   우리 버튼(.kf-gbtn)을 그리고 진짜 GSI 버튼을 그 위에 투명하게 덮는다
   — 클릭은 구글이 받으므로 구글 정책도 지킨다. */
.kfr-btn--googlewrap{margin-top:10px}
.kfr-btn--googlewrap .kf-auth__google{position:relative;height:56px}
.kfr-btn--googlewrap .kf-gbtn{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:56px;border-radius:16px;background:var(--white);
  border:1px solid var(--grey-300);box-sizing:border-box}
.kfr-btn--googlewrap .kf-gbtn b{font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-800)}
.kfr-btn--googlewrap .kf-gbtn__logo{flex:none}
/* 진짜 GSI 버튼 — 투명하게 덮어 클릭만 받는다 */
.kfr-btn--googlewrap .g_id_signin{position:absolute;inset:0;opacity:0;overflow:hidden;
  border-radius:16px;cursor:pointer}
.kfr-btn--googlewrap .g_id_signin > div,
.kfr-btn--googlewrap .g_id_signin iframe{width:100% !important;height:56px !important}
.kfr-btn--googlewrap #g_id_onload{display:none}

/* ══ 등급 옮기기 (리디자인) ═════════════════════════════════════════
   파란 히어로 + 흰 글자였던 옛 화면을 다른 화면과 같은 언어로 맞춘다. */
.kfr-tf .kf-tf__body{padding:0 !important;max-width:none !important;margin:0 !important}
.kfr-tf .kf-panel{background:var(--white);border:0;border-radius:20px;padding:20px;
  margin-top:16px;box-shadow:0 1px 3px rgba(0,23,51,.08)}
.kfr-tf .kf-tf__h{display:block;margin:0 0 4px;font-size:17px;line-height:25.5px;
  font-weight:700;color:var(--grey-900)}
/* 3단계 안내 */
.kfr-tf .kf-tf__steps{list-style:none;margin:12px 0 0;padding:0}
.kfr-tf .kf-tf__steps li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--grey-100)}
.kfr-tf .kf-tf__steps li:last-child{border-bottom:0;padding-bottom:0}
.kfr-tf .kf-tf__steps li b{display:block;font-size:16px;line-height:24px;font-weight:600;color:var(--grey-900)}
.kfr-tf .kf-tf__steps li p,.kfr-tf .kf-tf__steps li span{margin:2px 0 0;font-size:15px;
  line-height:22.5px;color:var(--grey-600)}
.kfr-tf .kf-tf__steps li > i,.kfr-tf .kf-tf__steps li > em{flex:none;display:inline-flex;
  align-items:center;justify-content:center;width:26px;height:26px;border-radius:9999px;
  background:var(--blue-50);color:var(--blue-500);font-size:13px;font-weight:700;font-style:normal}
/* 업로드 영역 */
.kfr-tf .kf-tf__drop{border:1.5px dashed var(--grey-300);border-radius:16px;background:var(--grey-100);
  padding:28px 20px;text-align:center}
.kfr-tf .kf-tf__drop b{display:block;margin-top:10px;font-size:16px;line-height:24px;
  font-weight:600;color:var(--grey-900)}
.kfr-tf .kf-tf__drop small{display:block;margin-top:4px;font-size:13px;color:var(--grey-500)}
/* 대기 카드 */
.kfr-tf .kf-tf__pend{display:flex;align-items:flex-start;gap:12px}
.kfr-tf .kf-tf__go{display:inline-flex;align-items:center;height:44px;padding:0 16px;margin-top:12px;
  border-radius:12px;background:var(--grey-100);color:var(--grey-800);
  font-size:15px;font-weight:600;text-decoration:none}

/* ══ 블로그 (목록·상세) ═════════════════════════════════════════════
   구조 참고: toss.tech — 대표글 + 분류 칩 + 목록 + (PC) 많이 본 글.
   색·타이포·간격은 handoff 3 토큰을 그대로 쓴다. */
.kfr-blog__lead{margin-top:20px}
.kfr-blog__card{display:block;text-decoration:none;color:inherit}
.kfr-blog__thumb{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;
  background:var(--grey-100) center/cover no-repeat}
.kfr-blog__body{display:block;padding:14px 0 0}
.kfr-blog__cat{display:inline-flex;align-items:center;height:24px;padding:0 9px;
  border-radius:8px;background:var(--blue-50);color:var(--blue-700);
  font-size:13px;font-weight:600}
.kfr-blog__t{display:block;margin-top:10px;font-size:19px;line-height:28px;
  font-weight:700;color:var(--grey-900);letter-spacing:-.01em}
.kfr-blog__card.is-big .kfr-blog__t{font-size:24px;line-height:34px}
.kfr-blog__ex{display:block;margin-top:6px;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr-blog__date{display:block;margin-top:10px;font-size:13px;color:var(--grey-500)}

/* 분류 칩 — 가로 스크롤 */
.kfr-blog__chips{display:flex;gap:8px;margin:28px 0 0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kfr-blog__chips::-webkit-scrollbar{display:none}
.kfr-blog__chip{flex:none;display:inline-flex;align-items:center;height:38px;padding:0 14px;
  border-radius:9999px;background:var(--grey-100);color:var(--grey-700);
  font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.kfr-blog__chip.is-on{background:var(--grey-900);color:var(--white)}

/* 목록 */
.kfr-blog__cols{margin-top:24px}
.kfr-blog__list{display:grid;gap:28px}
.kfr-blog__empty{margin-top:20px;text-align:center}

/* 많이 본 글 — PC 사이드에만. 모바일에서는 바로 위 목록과 겹쳐 보여 숨긴다 */
.kfr-blog__side{display:none}
.kfr-blog__sideh{display:block;font-size:17px;line-height:25.5px;font-weight:700;color:var(--grey-900)}
.kfr-blog__pop{list-style:none;margin:12px 0 0;padding:0;counter-reset:none}
.kfr-blog__pop li + li{border-top:1px solid var(--grey-100)}
.kfr-blog__pop a{display:flex;gap:12px;align-items:flex-start;padding:12px 0;text-decoration:none}
.kfr-blog__pop i{flex:none;width:20px;font-style:normal;font-size:15px;font-weight:700;color:var(--blue-500)}
.kfr-blog__pop span{flex:1;min-width:0;font-size:15px;line-height:22.5px;color:var(--grey-800)}

/* 페이지 번호 */
.kfr-blog__pg{display:flex;gap:6px;justify-content:center;margin-top:36px}
.kfr-blog__pgn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 10px;border-radius:10px;background:var(--grey-100);color:var(--grey-700);
  font-size:15px;font-weight:600;text-decoration:none}
.kfr-blog__pgn.is-on{background:var(--grey-900);color:var(--white)}

/* PC — 본문 + 사이드 2열 */
@media (min-width:768px){
  .kfr-blog .kfr-wrap{max-width:1000px}
  .kfr-blog__cols{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
  .kfr-blog__list{grid-template-columns:1fr 1fr;gap:32px}
  .kfr-blog__side{display:block;margin-top:0;position:sticky;top:76px}
  /* 대표글 2단은 썸네일이 있을 때만 — 없으면 빈 칸이 생긴다 */
  .kfr-blog__lead .kfr-blog__card.is-big:has(.kfr-blog__thumb){display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
  .kfr-blog__lead .kfr-blog__body{padding:0}
  .kfr-blog__card.is-big .kfr-blog__t{font-size:30px;line-height:40px}
}

/* ══ 글 상세 ═══════════════════════════════════════════════════════ */
.kfr-post__head{padding-top:24px;padding-bottom:8px}
.kfr-post__t{margin:12px 0 0;font-size:26px;line-height:37px;font-weight:700;
  color:var(--grey-900);letter-spacing:-.02em}
.kfr-post__meta{margin:8px 0 0;font-size:14px;color:var(--grey-500)}
/* 본문 — 읽기 폭과 리듬 */
.site-main--single .ks-post__article{max-width:720px;margin:0 auto;padding:0 20px 40px}
.site-main--single .ks-post__article p{font-size:17px;line-height:30px;color:var(--grey-800);margin:0 0 20px}
.site-main--single .ks-post__article h2{margin:40px 0 12px;font-size:22px;line-height:31px;
  font-weight:700;color:var(--grey-900)}
.site-main--single .ks-post__article h3{margin:28px 0 10px;font-size:18px;line-height:27px;
  font-weight:700;color:var(--grey-900)}
/* 블록 테마가 list-style 을 죽여 놔서 불릿이 안 나온다 — 되살린다 */
.site-main--single .ks-post__article ul,
.site-main--single .ks-post__article ol{margin:0 0 20px;padding-left:22px;
  font-size:17px;line-height:30px;color:var(--grey-800)}
.site-main--single .ks-post__article ul{list-style:disc}
.site-main--single .ks-post__article ol{list-style:decimal}
.site-main--single .ks-post__article li{margin:0 0 6px;padding-left:2px}
.site-main--single .ks-post__article li::marker{color:var(--grey-500)}
.site-main--single .ks-post__article img{max-width:100%;height:auto;border-radius:16px;margin:8px 0 20px}
.site-main--single .ks-post__article blockquote{margin:0 0 20px;padding:16px 20px;
  border-radius:14px;background:var(--grey-100);color:var(--grey-800);font-size:16px;line-height:26px}
.site-main--single .ks-post__article a{color:var(--blue-700)}
.kfr-post__rel{margin-top:8px;padding:36px 0 60px;background:var(--grey-100)}
.kfr-post__all{margin-top:24px;max-width:280px}
@media (min-width:768px){
  .kfr-post__t{font-size:36px;line-height:50px}
  .kfr-post__head{max-width:720px}
  .kfr-post__rel .kfr-wrap{max-width:1000px}
}

/* 후기 없음 — 섹션은 켜 두되 샘플 문구로 채우지 않는다 (대표님 지시 2026-08-17) */
.kfr-revs__none{text-align:center;padding-top:28px;padding-bottom:28px}
.kfr-revs__nicon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:9999px;background:var(--grey-100);color:var(--grey-500)}
.kfr-revs__nt{margin:14px 0 0;font-size:17px;line-height:25.5px;font-weight:700;color:var(--grey-900)}
.kfr-revs__ns{margin:6px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}

/* 글 대표 이미지 */
.site-main--single .ks-post__featured{max-width:720px;margin:20px auto 24px;padding:0 20px}
.site-main--single .ks-post__featured img{width:100%;height:auto;border-radius:18px;display:block}
.site-main--single .ks-post__featured:empty{display:none}

/* 블로그 목록 푸터 — 본문 폭 전체 */
.kfr-blog .kfr-foot{margin-top:44px}
.kfr-post__rel .kfr-foot{margin-top:36px}

/* ══════════════════════════════════════════════════════════════════
   2차 시안 (handoff2) — 공통 컴포넌트
   기준: 00-common-guide.md · 값은 전부 역할 토큰. hex 직접 입력 금지.
   ══════════════════════════════════════════════════════════════════ */

/* 앱바 — 닫기 X (§6-1 결과 화면 조합) */
.kfr-appbar__close{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;color:var(--grey-800);flex:none}

/* ── 완료(결과) 화면 머리 · §6-12 ────────────────────────────────── */
.kfr2-done{text-align:center}
.kfr2-done__ic{display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;margin:40px auto 16px;border-radius:50%;
  background:var(--blue-50);color:var(--blue-500);
  animation:kfPop .3s var(--ease-spring) both}
.kfr2-done__ic--wait{background:var(--yellow-bg);color:var(--yellow-600)}
.kfr2-done__t{margin:0;font-size:24px;line-height:33px;font-weight:700;
  letter-spacing:-.01em;color:var(--grey-900);
  animation:kfPop .3s var(--ease-spring) .06s both}
.kfr2-done__s{margin:8px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600);
  animation:kfPop .3s var(--ease-spring) .12s both}
/* 머리 다음에 오는 것은 무엇이든 띄우고 왼쪽 정렬로 돌아온다.
   가이드 표는 24 라고 적혀 있지만 시안 PNG 는 모바일·PC 양쪽에서 22 다
   (카드 top 205 · 카드 바닥 466 이 두 뷰포트에서 일치). PNG 를 따른다. */
.kfr2-done > .kfr-card,
.kfr2-done > section{margin-top:22px;text-align:left;
  animation:kfPop .3s var(--ease-spring) .18s both}

/* ── 영수증 카드 (01) ────────────────────────────────────────────── */
.kfr2-rcpt{padding:20px;border-radius:20px;background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-rcpt__sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0}
.kfr2-rcpt__sum span{font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr2-rcpt__sum b{font-size:24px;line-height:33px;font-weight:700;color:var(--grey-900);
  font-variant-numeric:tabular-nums}
.kfr2-rcpt__list{margin-top:8px;padding-top:8px;box-shadow:inset 0 1px 0 0 var(--grey-100)}
/* 행 pitch 34 = 줄상자 18 + 위아래 8. 시안 실측값이다.
   목록 안의 촘촘한 행은 타입 스케일의 22.5 가 아니라 18 을 쓴다 — 22.5 로 두면
   세 행이 쌓이면서 카드가 13px 길어지고 그 아래가 전부 밀린다. */
.kfr2-rcpt__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0}
.kfr2-rcpt__row > span{font-size:15px;line-height:18px;color:var(--grey-600);flex:none}
.kfr2-rcpt__row > b{font-size:15px;line-height:18px;font-weight:500;color:var(--grey-900);
  font-variant-numeric:tabular-nums;text-align:right;min-width:0}
.kfr2-rcpt__copyrow{display:inline-flex;align-items:center;gap:8px}
.kfr2-rcpt__eta{margin:12px 0 0;padding-top:14px;border-top:1px solid var(--grey-200);
  font-size:14px;line-height:21px;color:var(--grey-700)}

/* 복사 버튼 — 히트박스 44 확보, 보이는 아이콘은 18 */
.kfr2-copy{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-13px -13px -13px 0;
  border:0;background:none;color:var(--grey-400);cursor:pointer;flex:none;
  transition:color .15s var(--ease-out)}
.kfr2-copy.is-done{color:var(--blue-500)}

/* 보조 버튼 (§6-2 보조 파랑) */
.kfr2-btn--sub{display:flex;align-items:center;justify-content:center;
  height:52px;margin-top:12px;border-radius:14px;
  background:var(--blue-50);color:var(--blue-500);
  font-size:16px;font-weight:600;text-decoration:none}

@media (min-width:768px){
  .kfr2 .kfr-wrap{max-width:560px}
}

/* 비활성 버튼 흔들림 — 한 번만. 반복 재생 금지 (§7-4) */
@keyframes kfShake{0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.kfr-btn.is-shake{animation:kfShake .3s var(--ease-out) 1}
/* 비활성 CTA — disabled 로 막지 않는다. 눌러야 무엇이 비었는지 알려줄 수 있다 (§6-2) */
.kfr-btn--cta.is-off{background:var(--blue-100)}

/* 리디자인 화면(.kfr)은 자체 앱바로 시작한다 — 테마의 페이지 제목 배너를 숨긴다.
   지금까지는 슬러그를 하나씩 적어 왔는데(kimfast.css 1405행), 새 화면을 만들 때마다
   빠뜨려 파란 배너가 튀어나왔다. :has 로 한 번에 건다. */
body:has(.kfr) .page-title,
body:has(.kfr) .kf-page__banner,
body:has(.kfr) .ks-page-banner,
body:has(.kfr) .kf-subhero{display:none!important}
body:has(.kfr) .entry-content{margin-top:0!important;padding-left:0!important;padding-right:0!important}
body:has(.kfr) .site-main--page{padding-top:0!important}

/* ── 04 사서함 번호 ───────────────────────────────────────────────── */
.kfr2-box{margin-top:20px!important;padding:24px 20px;border-radius:20px;
  background:var(--white);box-shadow:var(--shadow-card);text-align:center!important}
.kfr2-box__in{display:flex;align-items:center;justify-content:center;gap:10px}
.kfr2-box__no{font-size:34px;line-height:44px;font-weight:700;letter-spacing:-.02em;
  color:var(--grey-900);font-variant-numeric:tabular-nums}
.kfr2-copy--lg{color:var(--grey-500)}

.kfr2-eg{margin-top:12px!important;padding:20px;border-radius:20px;
  background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-eg__t{display:block;font-size:15px;line-height:22.5px;font-weight:600;color:var(--grey-800)}
.kfr2-eg__v{margin:10px 0 0;padding:14px 16px;border-radius:14px;background:var(--grey-100);
  font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr2-eg__v i{font-style:normal;color:var(--blue-500)}
.kfr2-eg__why{margin:12px 0 0;font-size:14px;line-height:21px;color:var(--grey-600)}

/* ── 06 재설정 메일 ───────────────────────────────────────────────── */
.kfr2-mail{margin-top:24px!important;padding:20px;border-radius:20px;
  background:var(--white);box-shadow:var(--shadow-card);text-align:center!important}
.kfr2-mail__t{margin:0;font-size:16px;line-height:24px;color:var(--grey-800)}
.kfr2-mail__s{margin:10px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}
/* 시안 실측: 카드 끝에서 재발송 글자까지 26 (= 12 마진 + 12 패딩 + 반 leading) */
.kfr2-resend{margin-top:12px;text-align:center}
/* 대기 중에는 누를 수 없는 텍스트다 — 버튼으로 만들지 않는다 */
.kfr2-resend__wait{display:inline-block;padding:12px;font-size:15px;font-weight:600;
  color:var(--grey-400);font-variant-numeric:tabular-nums}
/* 남은 초만 진하게 나오면 안 된다 — 시안은 줄 전체가 같은 회색이다 */
.kfr2-resend__wait b{font-weight:inherit;color:inherit}
.kfr2-resend__go{display:inline-block;min-height:44px;padding:12px;border:0;background:none;
  font-size:15px;font-weight:600;color:var(--blue-500);cursor:pointer}
.kfr2-resend__go[hidden],.kfr2-resend__wait[hidden]{display:none}

/* ── 17 · 23 답변·결과 시점 ───────────────────────────────────────── */
.kfr2-when{margin:8px 0 0;font-size:17px;line-height:25.5px;font-weight:600;
  color:var(--grey-900);text-align:center;
  animation:kfPop .3s var(--ease-spring) .12s both}
.kfr2-where{margin:6px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500);
  text-align:center;animation:kfPop .3s var(--ease-spring) .15s both}
.kfr2-recv{margin-top:24px!important;padding:16px 20px;border-radius:20px;
  background:var(--white);box-shadow:var(--shadow-card);
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
/* 한 줄짜리 카드 행은 줄상자 20 — 22.5 로 두면 카드가 2.5 길어진다 (시안 실측) */
.kfr2-recv > span{flex:none;font-size:15px;line-height:20px;color:var(--grey-600)}
.kfr2-recv > b{font-size:15px;line-height:20px;font-weight:600;color:var(--grey-900);
  font-variant-numeric:tabular-nums}
/* 23 은 합계·구분선 없이 행 두 개뿐이다 */
.kfr2-rcpt--plain{margin-top:24px!important}

@media (min-width:768px){
  .kfr2-box__no{font-size:44px;line-height:56px}
}

/* ── 먼저 써본 분들 — 후기 페이지 카드와 픽셀까지 동일하게 (지시 2026-08-17) ──
   홈에서는 카드 배경이 투명(rgba(0,0,0,0))으로, 그림자도 다르게 나왔다.
   후기 페이지 실측값(배경 #fff · 그림자 0 1px 3px rgba(16,38,61,.05) · radius 16 · padding 15)
   을 그대로 못박는다. 값을 바꿀 때는 두 화면을 함께 확인할 것. */
.kfr-revs--card{ display:flex; flex-direction:column; gap:10px; }
/* 카드 뒤 배경도 후기 페이지와 같게 (#eef2f7). 섹션 폭 밖까지 칠해 경계가 보이지 않게 한다 */
.kfr-sec:has(.kfr-revs--card){
  background:#eef2f7;
  padding-top:24px; padding-bottom:24px;
  margin-left:calc(-1 * var(--kfr-pad,20px)); margin-right:calc(-1 * var(--kfr-pad,20px));
  padding-left:var(--kfr-pad,20px); padding-right:var(--kfr-pad,20px);
}
.kfr-revs--card .kf-rv__card{
  margin:0;
  background:#fff !important;
  border-radius:16px !important;
  padding:15px !important;
  box-shadow:0 1px 3px rgba(16,38,61,.05) !important;
  border:0 !important;
}
@media (min-width:768px){
  .kfr-revs--card .kf-rv__card{ padding:20px 24px !important; }
}
/* 푸터(도움돼요 · 배송 완료 확인) — 후기 페이지 실측값 그대로:
   윗선 1px #f0f4f9 · margin-top 11.75 · padding-top 10.5 */
.kfr-revs--card .kf-rv__ft{
  border-top:1px solid #f0f4f9 !important;
  margin-top:11.75px !important;
  padding-top:10.5px !important;
}
.kfr-revs--card .kf-rv__help svg{ width:14px; height:14px; display:block; }
.kfr-revs--card .kfr-revs__more{
  display:block; text-align:center; padding:14px;
  font-size:15px; font-weight:600; color:var(--adaptiveBlue500,#3182f6);
  text-decoration:none; background:#fff; border-radius:16px;
  box-shadow:0 1px 3px rgba(16,38,61,.05);
}

/* ══ 02 · 03 · 10 — 강조 문장이 있는 화면 ═══════════════════════════ */
/* 제목: 왼쪽 정렬 · 앱바 아래 32 */
.kfr2-h{margin:32px 0 0;font-size:24px;line-height:33px;font-weight:700;
  letter-spacing:-.01em;color:var(--grey-900)}
/* 강조 문장 — 제목 다음으로 큰 글자. 한 박자 늦게 또렷해진다.
   진입 시 첫 화면 안에 보여야 한다 (스크롤해야 보이면 안 된다). */
.kfr2-lead{margin:10px 0 0;font-size:20px;line-height:29px;font-weight:700;
  letter-spacing:-.01em;color:var(--grey-900);
  animation:kfLate .6s var(--ease-out) both}
/* 기한 지남 본문 — 시안은 15/22 다(강조 문장 크기가 아니다). 두 줄 pitch 22. */
.kfr2-over{margin:8px 0 0;font-size:15px;line-height:22px;color:var(--grey-700);
  animation:kfLate .6s var(--ease-out) both}
.kfr2-body{margin:10px 0 0;font-size:15px;line-height:22px;color:var(--grey-700)}

/* 이유 문장 — 빨강은 이 6px 점 하나뿐이다. 화면 전체를 붉게 만들지 않는다. */
.kfr2-why{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0}
.kfr2-why i{flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;
  background:var(--red-500)}
/* 두 줄일 때 줄 간격 22 — 22.5 로 두면 둘째 줄부터 어긋난다 (시안 실측 pitch 22) */
.kfr2-why span{font-size:15px;line-height:22px;color:var(--grey-700)}

/* 보관 기한 — 주의는 노란 안내로 처리한다 */
.kfr2-keep{margin-top:22px;padding:18px 20px;border-radius:20px;background:var(--yellow-bg)}
.kfr2-keep b{display:block;font-size:16px;line-height:24px;font-weight:600;color:var(--grey-900)}
.kfr2-keep p{margin:4px 0 0;font-size:14px;line-height:21px;color:var(--grey-700)}

/* 테마의 `.site-main--page .wp-block-post-content h2`(18px · margin 28) 가 이걸 덮는다.
   같은 자리에서 되돌린다 — 클래스만으로는 특이도가 모자란다. */
.kfr2-h2,
.site-main--page .wp-block-post-content .kfr2-h2{margin:24px 0 0;font-size:17px;
  line-height:25.5px;font-weight:600;color:var(--grey-800)}

/* 다른 결제 수단 — 5행이 들어가도 하단 버튼이 밀리지 않아야 한다 */
.kfr2-ways{margin-top:10px;padding:0;border-radius:20px;overflow:hidden;
  background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-way{display:flex;align-items:center;gap:12px;padding:16px 20px;text-decoration:none}
.kfr2-way + .kfr2-way{box-shadow:inset 0 1px 0 0 var(--grey-100)}
.kfr2-way__chip{flex:none;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;font-size:14px;font-weight:700}
.kfr2-way__chip--kakao{background:var(--kakao);color:var(--grey-900)}
.kfr2-way__chip--naver{background:var(--naver);color:var(--white)}
.kfr2-way__chip--toss {background:var(--blue-500);color:var(--white)}
.kfr2-way__chip--grey {background:var(--grey-100);color:var(--grey-500)}
.kfr2-way__t{flex:1;min-width:0;font-size:17px;line-height:25.5px;font-weight:500;
  color:var(--grey-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kfr2-way__c{flex:none;color:var(--grey-400)}

.kfr2-help{display:block;width:100%;margin-top:12px;padding:12px 0;text-align:center;
  font-size:15px;font-weight:600;color:var(--grey-600);text-decoration:none}

/* ── 03 입금 대기 ─────────────────────────────────────────────────── */
.kfr2-dep__lb{margin:14px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr2-dep__sum{margin:2px 0 0;font-size:30px;line-height:40px;font-weight:700;
  letter-spacing:-.02em;color:var(--grey-900);font-variant-numeric:tabular-nums}
.kfr2-acct{margin-top:20px;padding:0;border-radius:20px;overflow:hidden;
  background:var(--white);box-shadow:var(--shadow-card)}
/* 라벨 폭 76 고정 — 글자 길이에 맡기면 세 행이 어긋난다 */
.kfr2-acct__row{display:flex;align-items:center;gap:12px;padding:15px 20px}
.kfr2-acct__row + .kfr2-acct__row{box-shadow:inset 0 1px 0 0 var(--grey-100)}
/* 행 높이 48 = 위아래 15 + 줄상자 18 (시안 실측 · 구분선 간격 48) */
.kfr2-acct__row > span{flex:none;width:76px;font-size:15px;line-height:18px;color:var(--grey-600)}
.kfr2-acct__row > b{font-size:15px;line-height:18px;font-weight:600;color:var(--grey-900);
  font-variant-numeric:tabular-nums}
/* 기한이 지나도 계좌는 남긴다 — 어디로 보냈는지 확인할 수 있어야 한다 */
.kfr2-dep.is-over .kfr2-acct{opacity:.5}
.kfr2-dep.is-over .kfr2-acct{margin-top:22px}

/* 입금자명 — 이 화면에서 테두리 있는 카드는 이것 하나다 */
.kfr2-who{margin-top:12px;padding:20px;border-radius:20px;background:var(--white);
  border:1.5px solid var(--blue-100);box-shadow:var(--shadow-card);
  animation:kfLate .6s var(--ease-out) both}
.kfr2-who__t{display:block;font-size:16px;line-height:24px;font-weight:600;color:var(--grey-900)}
.kfr2-who__no{margin:6px 0 0;font-size:28px;line-height:37px;font-weight:700;
  letter-spacing:-.02em;color:var(--blue-500);font-variant-numeric:tabular-nums}
.kfr2-who__s{margin:6px 0 0;font-size:14px;line-height:21px;color:var(--grey-700)}

.kfr2-due{margin-top:12px;padding:16px 18px;border-radius:16px;background:var(--white);
  box-shadow:var(--shadow-card);font-size:15px;line-height:22.5px;color:var(--grey-700)}

/* ── 10 신청서 못 보냄 ────────────────────────────────────────────── */
.kfr2-btn--gap{margin-top:20px!important}
.kfr2-btn--grey{display:flex;align-items:center;justify-content:center;height:52px;
  margin-top:8px;border-radius:14px;background:var(--grey-100);color:var(--grey-700);
  font-size:16px;font-weight:600;text-decoration:none}

@media (min-width:768px){
  .kfr2-dep__sum{font-size:40px;line-height:49px}
}

/* ══ 05 · 07 — 입력 · 비활성 CTA · 세기 막대 ═══════════════════════ */
.kfr2-sub{margin:8px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr2-form{margin-top:20px;padding:20px;border-radius:20px;
  background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-lb{display:block;margin:0 0 6px;font-size:13px;line-height:19.5px;
  font-weight:500;color:var(--grey-600)}
.kfr2-lb--gap{margin-top:20px}

/* 평상시 1.5px 투명 테두리가 없으면 포커스 때 레이아웃이 1.5px 밀린다 */
.kfr2-in{display:block;width:100%;height:56px;padding:0 16px;border-radius:16px;
  background:var(--grey-100);border:1.5px solid transparent;
  font-size:17px;color:var(--grey-900);
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out)}
.kfr2-in::placeholder{color:var(--grey-400)}
.kfr2-in:focus{outline:none;background:var(--white);border-color:var(--blue-500)}

/* 오른쪽에 버튼이 붙은 입력칸 — input 에 min-width:0 이 없으면 긴 값에서 버튼이 밀려난다 */
.kfr2-in--btn{display:flex;align-items:center;gap:8px;padding:0 8px 0 16px}
.kfr2-in--btn:focus-within{background:var(--white);border-color:var(--blue-500)}
.kfr2-in--btn input{flex:1;min-width:0;height:100%;border:0;background:none;
  font-size:17px;color:var(--grey-900)}
.kfr2-in--btn input:focus{outline:none}
.kfr2-in--btn input::placeholder{color:var(--grey-400)}
.kfr2-eye{flex:none;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:0;background:none;color:var(--grey-500);cursor:pointer}
.kfr2-eye.is-on{color:var(--blue-500)}

/* 형식 안내 — 빨강이 아니라 노랑이다 */
.kfr2-hint{margin:6px 0 0;font-size:13px;line-height:19.5px;color:var(--yellow-600)}
.kfr2-hint[hidden]{display:none}

/* 세기 막대 3칸 — 색만으로 알리지 않는다. 라벨이 항상 함께 있다. */
.kfr2-str{display:flex;align-items:center;gap:8px;margin-top:10px}
.kfr2-str__bars{display:flex;flex:1;gap:4px}
.kfr2-str__bars i{flex:1;height:4px;border-radius:9999px;background:var(--grey-200);
  transition:background .15s var(--ease-out)}
.kfr2-str__bars i.is-on{background:var(--green-500)}
/* 줄상자 16 — 기본 24 로 두면 세기 행이 8 두꺼워지고 아래가 전부 밀린다 (시안 실측) */
.kfr2-str__lb{flex:none;width:52px;text-align:right;font-size:13px;line-height:16px;
  font-weight:600;color:var(--grey-500)}
.kfr2-str__lb.is-ok{color:var(--green-600)}

/* 조건 줄 — 만족했을 때만 초록 */
.kfr2-cond{display:flex;align-items:center;gap:6px;margin:12px 0 0;
  font-size:13px;line-height:19.5px;color:var(--grey-400)}
.kfr2-cond--tight{margin-top:4px}
.kfr2-cond svg{flex:none}
.kfr2-cond.is-ok{color:var(--green-600)}

/* ══ 바텀시트 / PC 모달 (§6-8) — 08·15·18·19 가 함께 쓴다 ═══════════
   같은 컴포넌트가 뷰포트로 갈린다. 전체 화면으로 만들지 않는다 —
   바탕 화면이 딤 아래로 보여야 시트가 어디서 열렸는지 알 수 있다. */
.kfr2-sheet{position:fixed;inset:0;z-index:200;display:none}
.kfr2-sheet.is-on{display:block}
.kfr2-sheet__dim{position:absolute;inset:0;background:var(--dim);
  animation:kfFade .2s var(--ease-out) both}
.kfr2-sheet__panel{position:absolute;left:0;right:0;bottom:0;
  max-height:86%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:24px 0;border-radius:24px 24px 0 0;background:var(--white);
  animation:kfSheet .3s var(--ease-spring) both}
/* 시트 안 내용은 좌우 24 — 패널 자체 패딩은 위아래만 준다 */
.kfr2-sheet__in{padding:0 24px}
/* 테마의 `.site-main--page .wp-block-post-content h2`(18px · margin 28) 가 또 이긴다.
   .kfr2-h2 와 같은 자리에서 되돌린다 — 안 그러면 시트 제목이 28 아래로 밀리고 글자도 작아진다. */
.kfr2-sheet__t,
.site-main--page .wp-block-post-content .kfr2-sheet__t{margin:0;font-size:20px;line-height:29px;
  font-weight:700;color:var(--grey-900)}
/* 기한 안내 아래 16 — 라벨이 바로 붙으면 시트가 답답해진다 (가이드 §순서 4) */
.kfr2-sheet__s{margin:4px 0 16px;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr2-sheet__s--lg{margin:8px 0 16px;font-size:15px;line-height:22.5px;color:var(--grey-600)}
/* 시트 버튼은 하단 고정 CTA 가 아니다 — 시트 안에 있다 */
.kfr2-sheet__go{display:flex;align-items:center;justify-content:center;width:100%;
  height:56px;margin-top:20px;border:0;border-radius:16px;
  background:var(--blue-500);color:var(--white);
  font-size:17px;font-weight:600;text-decoration:none;cursor:pointer}
.kfr2-sheet__go.is-off{background:var(--blue-100)}
/* 줄상자 18 — 기본 24 면 시트가 6 길어진다 (19 실측) */
.kfr2-sheet__sub{display:block;width:100%;margin-top:6px;padding:12px 0;border:0;
  background:none;text-align:center;font-size:15px;line-height:18px;font-weight:600;
  color:var(--grey-600);text-decoration:none;cursor:pointer}
/* 테마가 body 에 overflow-x:clip 을 걸어 둬서 단축 속성만으로는 세로 스크롤이 안 잠긴다 */
body.kfr2-locked{overflow:hidden!important}

@media (min-width:768px){
  .kfr2-sheet__panel{left:50%;right:auto;top:50%;bottom:auto;width:480px;
    max-height:84%;transform:translate(-50%,-50%);border-radius:24px;
    animation:kfPopMid .2s var(--ease-spring) both}
}

/* ── 시트 안 입력칸 (08·18) — 52px 판 ─────────────────────────────── */
.kfr2-in--sm{height:52px;border-radius:14px;font-size:16px}
.kfr2-in--sm.kfr2-in--btn{padding:0 8px 0 16px}
.kfr2-in--sm.kfr2-in--btn input{font-size:16px}
.kfr2-lb--gap16{margin-top:16px}
.kfr2-lb--gap20{margin-top:20px}
/* 통화기호가 붙은 금액 칸 */
.kfr2-in--cur{display:flex;align-items:center;gap:8px}
.kfr2-in--cur span{flex:none;font-size:16px;font-weight:600;color:var(--grey-500)}
.kfr2-in--cur input{flex:1;min-width:0;height:100%;border:0;background:none;
  font-size:16px;color:var(--grey-900);font-variant-numeric:tabular-nums}
.kfr2-in--cur input:focus{outline:none}
/* 셀렉트 버튼 — <select> 를 쓰지 않는다. 누르면 시트가 올라온다. */
.kfr2-in--pick{display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-align:left;cursor:pointer}
.kfr2-in--pick span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kfr2-in--pick svg{flex:none;color:var(--grey-400)}
/* 입력칸 안 작은 버튼 */
.kfr2-in__act{flex:none;height:36px;padding:0 12px;border:0;border-radius:10px;
  background:var(--white);color:var(--grey-700);font-size:14px;font-weight:600;cursor:pointer}

/* 08 잠긴 상태 — 주의는 노란 안내로 */
.kfr2-lockbox{padding:18px 20px;border-radius:16px;background:var(--yellow-bg)}
.kfr2-lockbox b{display:block;font-size:16px;line-height:24px;font-weight:600;color:var(--grey-900)}
.kfr2-lockbox p{margin:8px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-700)}
/* 노란 박스 다음 버튼은 16 — 입력칸 다음(20)과 다르다 (PNG 실측) */
.kfr2-lockbox + .kfr2-sheet__go{margin-top:16px}

/* ── 15 운송장 ────────────────────────────────────────────────────── */
.kfr2-sheet__t--gap,
.site-main--page .wp-block-post-content .kfr2-sheet__t--gap{margin-bottom:16px}
.kfr2-wb__no{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-radius:14px;background:var(--grey-100)}
.kfr2-wb__col{flex:1;min-width:0;display:block}
.kfr2-wb__col i{display:block;font-style:normal;font-size:13px;line-height:19.5px;color:var(--grey-600)}
.kfr2-wb__col b{display:block;font-size:19px;line-height:28px;font-weight:700;
  color:var(--grey-900);font-variant-numeric:tabular-nums}
.kfr2-copy--wb{color:var(--grey-500);margin:-12px -12px -12px 0}
.kfr2-wb__prev{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:220px;margin-top:16px;border-radius:14px;background:var(--grey-50);
  border:1px solid var(--grey-200);color:var(--grey-400)}
.kfr2-wb__prev p{margin:10px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-400)}
.kfr2-wb__btns{display:flex;gap:8px;margin-top:16px}
.kfr2-wb__dl,.kfr2-wb__share{flex:1;display:flex;align-items:center;justify-content:center;
  height:52px;border:0;border-radius:14px;font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer}
.kfr2-wb__dl{background:var(--blue-50);color:var(--blue-500)}
.kfr2-wb__share{background:var(--grey-100);color:var(--grey-700)}
/* 못 불러온 상태의 [다시 해보기] 는 52 다 — 시트 주 버튼(56)과 다르다 (PNG 실측) */
/* 제목의 margin-bottom 과 상쇄되므로 여기서 36 을 준다 (시안 실측 gap 36) */
.kfr2-wb__miss{margin-top:36px;text-align:center}
.kfr2-sheet__go--sm{height:52px;margin-top:16px}
.kfr2-wb__mt{margin:0;font-size:17px;line-height:25.5px;font-weight:700;color:var(--grey-900)}
.kfr2-wb__ms{margin:6px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}

/* ── 18 상품 사진 ─────────────────────────────────────────────────── */
/* 위 여백은 부제(16)가 이미 준다 — 여기서 또 주면 상쇄돼서 아래가 붙는다 */
.kfr2-ph__prev{position:relative;height:160px;margin:0 0 16px;border-radius:14px;
  overflow:hidden;background:var(--grey-100);animation:kfFade .2s var(--ease-out) both}
.kfr2-ph__prev[hidden]{display:none}
.kfr2-ph__prev img{width:100%;height:100%;object-fit:cover;display:block}
.kfr2-ph__del{position:absolute;top:10px;right:10px;display:flex;align-items:center;
  justify-content:center;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(25,31,40,.72);color:var(--white);cursor:pointer}
.kfr2-ph__pick{display:flex;align-items:center;gap:12px;width:100%;padding:16px;
  border:0;border-radius:14px;background:var(--grey-100);text-align:left;cursor:pointer}
.kfr2-ph__chip{flex:none;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;background:var(--white);color:var(--grey-700)}
.kfr2-ph__txt{display:block}
.kfr2-ph__txt b{display:block;font-size:16px;line-height:24px;font-weight:600;color:var(--grey-900)}
.kfr2-ph__txt i{display:block;font-style:normal;font-size:13px;line-height:19.5px;color:var(--grey-500)}

/* ── 19 사서함 안내 ───────────────────────────────────────────────── */
.kfr2-bx__no{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-radius:16px;background:var(--blue-50)}
.kfr2-bx__no b{font-size:28px;line-height:37px;font-weight:700;letter-spacing:-.02em;
  color:var(--grey-900);font-variant-numeric:tabular-nums}
.kfr2-bx__no--guest{display:block;background:var(--grey-100);
  font-size:19px;line-height:28px;font-weight:700;color:var(--blue-500)}
.kfr2-copy--bx{color:var(--blue-500);margin:-11px -11px -11px 0}
.kfr2-bx__eg{margin-top:12px;padding:14px 16px;border:1px solid var(--grey-200);border-radius:16px}
.kfr2-bx__egl{margin:0;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr2-bx__egv{margin:4px 0 0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr2-bx__egv i{font-style:normal;color:var(--blue-500)}
.kfr2-bx__warn{margin-top:12px;padding:14px 16px;border-radius:16px;background:var(--yellow-bg);
  font-size:14px;line-height:21px;color:var(--grey-700)}

@media (min-width:768px){
  .kfr2-wb__prev{height:260px}
  .kfr2-wb__share{display:none}      /* PC 에서는 시스템 공유가 없다 */
  .kfr2-bx__no b{font-size:32px;line-height:42px}
}

/* 미리보기 바탕 화면 — 검수용, 실화면에는 나가지 않는다 */
.kfr2-preview__from{margin:20px 0 0;font-size:17px;line-height:25.5px;color:var(--grey-600)}
.kfr2-preview__chip{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}
.kfr2-preview__depot{font-size:15px;color:var(--grey-600)}
.kfr2-preview__name{margin:8px 0 0;font-size:19px;line-height:28px;font-weight:700;color:var(--grey-900)}

/* ══ 09 · 11 · 12 · 13 · 14 ═══════════════════════════════════════ */
/* 앱바에 제목이 있는 화면의 본문 제목은 22 (화면 제목 24 가 아니다) */
.kfr2-h2p,
.site-main--page .wp-block-post-content .kfr2-h2p{margin:24px 0 0;font-size:22px;line-height:31px;
  font-weight:700;letter-spacing:-.01em;color:var(--grey-900)}
.kfr2-h3,
.site-main--page .wp-block-post-content .kfr2-h3{margin:24px 0 10px;font-size:15px;line-height:22.5px;
  font-weight:600;color:var(--grey-700)}
.kfr2-h3--gap{margin-top:28px}

/* ── 09 지금 신청한 것 ────────────────────────────────────────────── */
.kfr2-now{margin-top:16px;padding:20px;border-radius:20px;background:var(--white);
  box-shadow:var(--shadow-card)}
.kfr2-now__t{display:block;margin-bottom:12px;font-size:15px;line-height:22.5px;
  font-weight:600;color:var(--grey-800)}
.kfr2-now__row{display:flex;justify-content:space-between;gap:12px;padding:7px 0}
.kfr2-now__row span{font-size:15px;line-height:22px;color:var(--grey-700)}
.kfr2-now__row b{flex:none;font-size:15px;line-height:22px;font-weight:500;color:var(--grey-900);
  font-variant-numeric:tabular-nums}

/* 옵션 목록 — 행 전체가 클릭 영역 */
.kfr2-opts{padding:0;border-radius:20px;overflow:hidden;background:var(--white);
  box-shadow:var(--shadow-card)}
.kfr2-opt__row{display:flex;align-items:center;gap:12px;padding:14px 20px;cursor:pointer}
.kfr2-opt__row + .kfr2-opt__row{box-shadow:inset 0 1px 0 0 var(--grey-100)}
.kfr2-opt__txt{flex:1;min-width:0}
.kfr2-opt__txt b{display:block;font-size:16px;line-height:24px;font-weight:500;color:var(--grey-900)}
/* 무료도 회색 그대로 — 초록으로 강조하지 않는다 */
.kfr2-opt__txt i{display:block;font-style:normal;font-size:13px;line-height:19.5px;color:var(--grey-500)}
.kfr2-tg__in{position:absolute;opacity:0;width:0;height:0}

/* 토글 50×30 */
.kfr2-tg{flex:none;position:relative;width:50px;height:30px;border-radius:15px;
  background:var(--grey-200);transition:background .2s var(--ease-out)}
.kfr2-tg i{position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;
  background:var(--white);box-shadow:var(--shadow-knob);
  transition:transform .3s var(--ease-spring)}
.kfr2-tg__in:checked ~ .kfr2-tg{background:var(--blue-500)}
.kfr2-tg__in:checked ~ .kfr2-tg i{transform:translateX(20px)}

/* 금액 대조 — 이 화면의 주인공이라 테두리가 있다 */
.kfr2-cmp{margin-top:16px;padding:20px;border-radius:20px;background:var(--white);
  border:1.5px solid var(--blue-100);box-shadow:var(--shadow-card)}
.kfr2-cmp__row{display:flex;justify-content:space-between;gap:12px;padding:7px 0}
/* 행 pitch 36 = 위아래 7 + 줄상자 22 (시안 실측) */
.kfr2-cmp__row span{font-size:15px;line-height:22px;color:var(--grey-600)}
.kfr2-cmp__row b{font-size:15px;line-height:22px;font-weight:500;color:var(--grey-900);
  font-variant-numeric:tabular-nums}
.kfr2-cmp__diff{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:8px;padding-top:14px;border-top:1px solid var(--grey-200)}
.kfr2-cmp__diff span{font-size:15px;line-height:22.5px;color:var(--grey-600)}
.kfr2-cmp__diff b{font-size:19px;line-height:28px;font-weight:700;color:var(--grey-900);
  font-variant-numeric:tabular-nums}
.kfr2-cmp__diff b.is-down{color:var(--green-600)}
.kfr2-opt__note{margin:10px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}

/* ── 11 다이얼로그 ────────────────────────────────────────────────── */
.kfr2-dlg{position:fixed;inset:0;z-index:210;display:none;
  align-items:center;justify-content:center;padding:0 24px}
.kfr2-dlg.is-on{display:flex}
.kfr2-dlg__dim{position:absolute;inset:0;background:var(--dim);
  animation:kfFade .2s var(--ease-out) both}
.kfr2-dlg__box{position:relative;width:100%;max-width:340px;padding:24px;border-radius:20px;
  background:var(--white);animation:kfPop .2s var(--ease-spring) both}
.kfr2-dlg__t{margin:0;font-size:19px;line-height:28px;font-weight:700;letter-spacing:-.01em;
  color:var(--grey-900);text-align:center}
.kfr2-dlg__b{margin:10px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600);text-align:center}
.kfr2-dlg__btns{display:flex;gap:8px;margin-top:20px}
.kfr2-dlg__go,.kfr2-dlg__sub{flex:1;display:flex;align-items:center;justify-content:center;
  height:52px;border:0;border-radius:14px;font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer}
.kfr2-dlg__go{background:var(--blue-500);color:var(--white)}
.kfr2-dlg__sub{background:var(--grey-100);color:var(--grey-700)}

/* ── 12 보내는 중 — 앱바 없음 ─────────────────────────────────────── */
.kfr2-send{display:flex;align-items:center;justify-content:center;
  min-height:600px;padding:40px 0}
.kfr2-send__in{width:100%;max-width:280px;text-align:center}
.kfr2-send__bar{height:6px;margin-bottom:24px;border-radius:9999px;
  background:var(--grey-200);overflow:hidden}
.kfr2-send__bar i{display:block;height:100%;border-radius:9999px;background:var(--blue-500);
  transition:width .3s var(--ease-spring)}
.kfr2-send__t{margin:0;font-size:19px;line-height:28px;font-weight:700;letter-spacing:-.01em;
  color:var(--grey-900)}
.kfr2-send__s{margin:10px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}

/* ── 배지 ─────────────────────────────────────────────────────────── */
.kfr2-badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;
  font-size:13px;font-weight:600;white-space:nowrap}
.kfr2-badge--sm{height:22px;padding:0 7px;font-size:12px}
.kfr2-badge--blue{background:var(--blue-a16);color:var(--blue-700)}
.kfr2-badge--green{background:var(--green-a16);color:var(--green-600)}
.kfr2-badge--neutral{background:var(--neutral-a16);color:var(--grey-700)}

/* ── 14 상태 알림 카드 ────────────────────────────────────────────── */
.kfr2-nc{padding:20px;border-radius:20px;background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-nc + .kfr2-nc{margin-top:12px}
.kfr2-nc__hd{display:flex;align-items:center;gap:8px}
.kfr2-nc__time{font-size:13px;line-height:19.5px;color:var(--grey-400)}
.kfr2-nc__t{margin:10px 0 0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr2-nc__b{margin:2px 0 0;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr2-nc__go{display:flex;align-items:center;justify-content:center;height:48px;margin-top:14px;
  border-radius:14px;background:var(--blue-50);color:var(--blue-500);
  font-size:15px;font-weight:600;text-decoration:none}

/* ── 13 알림 ──────────────────────────────────────────────────────── */
.kfr2-todo{margin-top:20px;padding:20px;border-radius:20px;background:var(--white);
  border:1.5px solid var(--blue-100);box-shadow:var(--shadow-card)}
.kfr2-todo__t{margin:10px 0 0;font-size:19px;line-height:28px;font-weight:700;
  letter-spacing:-.01em;color:var(--grey-900)}
.kfr2-todo__b{margin:4px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-700)}
.kfr2-todo__go{display:flex;align-items:center;justify-content:center;height:52px;margin-top:14px;
  border-radius:14px;background:var(--blue-500);color:var(--white);
  font-size:16px;font-weight:600;text-decoration:none}

.kfr2-list{padding:0;border-radius:20px;overflow:hidden;background:var(--white);
  box-shadow:var(--shadow-card)}
.kfr2-item{display:flex;align-items:flex-start;gap:10px;padding:16px 20px;text-decoration:none}
.kfr2-item + .kfr2-item{box-shadow:inset 0 1px 0 0 var(--grey-100)}
/* 읽은 항목도 점 자리를 유지한다 — 없애면 글자 시작 위치가 흔들린다 */
.kfr2-item__dot{flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;
  background:var(--blue-500)}
.kfr2-item.is-read .kfr2-item__dot{background:transparent}
.kfr2-item__body{flex:1;min-width:0}
.kfr2-item__hd{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.kfr2-item__hd time{font-size:13px;line-height:19.5px;color:var(--grey-400)}
.kfr2-item__body b{display:block;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr2-item__body i{display:block;margin-top:2px;font-style:normal;font-size:14px;line-height:21px;
  color:var(--grey-600)}

.kfr2-noti__empty{margin-top:80px;text-align:center}
.kfr2-noti__ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--white);color:var(--grey-400)}
.kfr2-noti__et{margin:16px 0 0;font-size:20px;line-height:29px;font-weight:700;
  letter-spacing:-.01em;color:var(--grey-900)}
.kfr2-noti__es{margin:8px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}

@media (min-width:768px){ .kfr2-send{min-height:520px} }

/* 앱바 제목·오른쪽 액션 (§6-1)
   ⚠ 지금까지 .kfr-appbar__t 에 스타일이 하나도 없어서 테마 h1(36px)로 렌더됐다.
   1차 화면은 전부 로고 조합이라 드러나지 않았을 뿐이다. */
.kfr-appbar__t,
.site-main--page .wp-block-post-content .kfr-appbar__t{margin:0 0 0 8px;font-size:17px;
  line-height:25.5px;font-weight:600;color:var(--grey-900);letter-spacing:0}
.kfr-appbar__act{flex:none;margin-right:-4px;padding:8px 4px;border:0;background:none;
  font-size:15px;font-weight:500;color:var(--grey-700);cursor:pointer}

/* 12 는 앱바가 없다 — 테마 헤더까지 숨겨야 「나갈 수 없는 화면」이 된다 */
body:has(.kfr2-send) .site-header,
body:has(.kfr2-send) > .wp-block-template-part:first-of-type,
body:has(.kfr2-send) header.wp-block-template-part{display:none!important}

/* ── 홈 후기 나라 필터 칩 (지시 2026-08-17) — 가로 스크롤, 후기 페이지 칩과 같은 톤 ── */
.kfr-revchips{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:2px 2px 12px; scrollbar-width:none; }
.kfr-revchips::-webkit-scrollbar{ display:none; }
.kfr-revchip{ flex:none; height:36px; padding:0 14px; border-radius:9999px;
  border:1px solid #e5e8eb; background:#fff; color:#4e5968;
  font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:background 150ms cubic-bezier(.4,0,.2,1), border-color 150ms cubic-bezier(.4,0,.2,1); }
.kfr-revchip:active{ background:rgba(2,32,71,.05); }
/* 고른 칩은 다른 화면 CTA 와 같은 파랑을 쓴다 (옛 #0055b1 은 이 한 곳만 남아 있었다) */
.kfr-revchip.is-on{ background:var(--blue-500); border-color:var(--blue-500); color:#fff; }

/* ══ 16 · 20 · 21 · 22 — 칩 · 사진 슬롯 · 별점 · 스켈레톤 ═══════════ */
.kfr2-chips{display:flex;gap:8px;margin-top:16px}
/* 가로 스크롤 — 좌우 패딩만큼 음수 마진을 줘서 화면 끝까지 흐른다 */
.kfr2-chips--scroll{overflow-x:auto;scrollbar-width:none;white-space:nowrap;
  margin-left:-20px;margin-right:-20px;padding:0 20px 14px}
.kfr2-chips--scroll::-webkit-scrollbar{display:none}
/* 제목의 margin-bottom(10)과 상쇄되게 둔다 — 16 을 또 주면 6 벌어진다 */
.kfr2-chips--wrap{flex-wrap:wrap;margin-top:0}
.kfr2-chips--gap{margin-top:16px}
.kfr2-chip{flex:none;display:inline-flex;align-items:center;height:38px;padding:0 14px;
  border:0;border-radius:9999px;background:var(--white);color:var(--grey-700);
  font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background .15s var(--ease-out),color .15s var(--ease-out)}
/* 하나 선택 (탭 역할) */
.kfr2-chip.is-on{background:var(--grey-900);color:var(--white)}
/* 여러 선택 (후기 칩) — 테두리가 함께 바뀐다 */
.kfr2-chip--multi{border:1.5px solid var(--grey-200);
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out),color .15s var(--ease-out)}
.kfr2-chip--multi.is-on{background:var(--blue-50);border-color:var(--blue-500);color:var(--blue-700)}

.kfr2-form--tight{margin-top:0}
.kfr2-in--pick.is-empty span{color:var(--grey-400)}

/* textarea */
.kfr2-ta{min-height:110px;padding:14px 16px;border-radius:14px;background:var(--grey-100);
  border:1.5px solid transparent;transition:background .15s var(--ease-out),border-color .15s var(--ease-out)}
.kfr2-ta:focus-within{background:var(--white);border-color:var(--blue-500)}
.kfr2-ta textarea{display:block;width:100%;min-height:82px;border:0;background:none;resize:none;
  font-size:16px;line-height:24px;color:var(--grey-900)}
.kfr2-ta textarea:focus{outline:none}
.kfr2-ta textarea::placeholder{color:var(--grey-400)}
/* 글자 수는 오른쪽 정렬 */
.kfr2-count{margin:6px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500);
  text-align:right;font-variant-numeric:tabular-nums}
.kfr2-count--left{text-align:left}
.kfr2-count.is-ok{color:var(--green-600)}

/* 사진 슬롯 (§6-13) */
.kfr2-slots{display:flex;flex-wrap:wrap;gap:8px}
.kfr2-slot{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:76px;height:76px;border-radius:14px;cursor:pointer}
.kfr2-slot--add{border:1.5px dashed var(--grey-300);background:none;color:var(--grey-500)}
.kfr2-slot--add i{margin-top:2px;font-style:normal;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums}
.kfr2-slot--add[hidden]{display:none}
.kfr2-slot.is-on{background:var(--grey-100);animation:kfFade .2s var(--ease-out) both}
.kfr2-slot__x{position:absolute;top:-6px;right:-6px;display:flex;align-items:center;
  justify-content:center;width:24px;height:24px;border:0;border-radius:50%;
  background:var(--grey-900);color:var(--white);cursor:pointer}

/* ── 20 별점 ──────────────────────────────────────────────────────── */
.kfr2-rw__item{display:flex;align-items:center;gap:12px;margin-top:16px;padding:16px 20px;
  border-radius:20px;background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-rw__thumb{flex:none;width:48px;height:48px;border-radius:14px;background:var(--grey-100)}
.kfr2-rw__meta{flex:1;min-width:0}
.kfr2-rw__meta b{display:block;font-size:16px;line-height:24px;font-weight:600;color:var(--grey-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kfr2-rw__meta i{display:block;font-style:normal;font-size:13px;line-height:19.5px;color:var(--grey-600)}

.kfr2-stars{margin-top:12px;padding:24px 20px;border-radius:20px;background:var(--white);
  box-shadow:var(--shadow-card);text-align:center}
.kfr2-stars__row{display:flex;gap:6px;justify-content:center}
.kfr2-star{padding:2px;border:0;background:none;color:var(--grey-200);cursor:pointer;
  transition:color .15s var(--ease-out)}
.kfr2-star.is-on{color:var(--yellow-400)}
.kfr2-stars__say{margin:14px 0 0;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-800)}
.kfr2-rw__disc{margin:12px 0 0;padding:14px 16px;border-radius:14px;background:var(--blue-50);
  font-size:14px;line-height:21px;color:var(--blue-700)}

/* ── 21 이용후기 ──────────────────────────────────────────────────── */
.kfr2-rv__sum{display:flex;gap:20px;align-items:center;margin-top:20px;padding:20px;
  border-radius:20px;background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-rv__avg{flex:none;text-align:center}
.kfr2-rv__avg b{display:block;font-size:40px;line-height:49px;font-weight:700;
  letter-spacing:-.02em;color:var(--grey-900);font-variant-numeric:tabular-nums}
.kfr2-rv__glyph{display:block;font-size:13px;line-height:19px;letter-spacing:2px;color:var(--yellow-400)}
.kfr2-rv__avg i{display:block;margin-top:2px;font-style:normal;font-size:13px;line-height:19.5px;
  color:var(--grey-500)}
.kfr2-rv__dist{flex:1;min-width:0}
/* 줄상자 13 — 기본 24 면 분포 5줄이 왼쪽 평균 블록보다 커져 카드가 47 늘어난다 */
.kfr2-rv__drow{display:flex;align-items:center;gap:8px;padding:2px 0;line-height:13px}
.kfr2-rv__drow span{flex:none;width:22px;font-size:12px;color:var(--grey-500)}
/* 분포 막대는 5px — 다른 진행바(4px)와 다르다 */
.kfr2-rv__drow i{flex:1;height:5px;border-radius:9999px;background:var(--grey-100);overflow:hidden}
.kfr2-rv__drow i b{display:block;height:100%;border-radius:9999px;background:var(--yellow-400)}
.kfr2-rv__drow em{flex:none;width:26px;text-align:right;font-style:normal;font-size:12px;
  color:var(--grey-400);font-variant-numeric:tabular-nums}

.kfr2-rv__list{padding:0;border-radius:20px;overflow:hidden;background:var(--white);
  box-shadow:var(--shadow-card)}
.kfr2-rv__item{padding:18px 20px}
.kfr2-rv__item + .kfr2-rv__item{box-shadow:inset 0 1px 0 0 var(--grey-100)}
.kfr2-rv__hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kfr2-rv__stars{font-size:14px;color:var(--yellow-400);letter-spacing:1px}
.kfr2-rv__body{margin:8px 0 0;font-size:16px;line-height:24px;color:var(--grey-800)}
.kfr2-rv__photos{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.kfr2-rv__photos::-webkit-scrollbar{display:none}
.kfr2-rv__photos span{flex:none;width:72px;height:72px;border-radius:12px;background:var(--grey-100)}
.kfr2-rv__day{margin:10px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-400)}
.kfr2-rv__empty{margin-top:80px;text-align:center}
.kfr2-rv__ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--white);color:var(--grey-400)}
.kfr2-rv__et{margin:16px 0 0;font-size:20px;line-height:29px;font-weight:700;
  letter-spacing:-.01em;color:var(--grey-900)}
.kfr2-rv__es{margin:8px 0 0;font-size:15px;line-height:22.5px;color:var(--grey-600)}

/* ── 22 캡처 · 스켈레톤 · 비교 ────────────────────────────────────── */
.kfr2-cap{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:110px;border-radius:14px;cursor:pointer}
.kfr2-cap--add{border:1.5px dashed var(--grey-300);background:none;color:var(--grey-500)}
.kfr2-cap--add b{margin-top:6px;font-size:15px;font-weight:600;color:var(--grey-700)}
.kfr2-cap--on{background:var(--blue-50);border:1.5px solid var(--blue-500);color:var(--blue-500);
  animation:kfFade .2s var(--ease-out) both}
.kfr2-cap--on b{margin-top:6px;font-size:15px;font-weight:600;color:var(--blue-700)}
.kfr2-cap__x{margin-top:6px;border:0;background:none;font-size:14px;font-weight:600;
  color:var(--grey-500);cursor:pointer}
.kfr2-caphelp{margin:6px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}

/* 스켈레톤 — 문장을 넣지 않는다. 애니메이션 없이 정적으로 둔다. */
.kfr2-sk{display:block;background:var(--grey-100);border-radius:7px}
.kfr2-sk--lb{width:60%;height:14px}
.kfr2-sk--v{width:80%;height:22px;margin-top:8px}
.kfr2-cmp2{display:flex;align-items:center;gap:12px;margin-top:12px;padding:20px;
  border-radius:20px;background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-cmp2--on{border:1.5px solid var(--blue-100);animation:kfFade .2s var(--ease-out) both}
.kfr2-cmp2__col{flex:1;min-width:0}
.kfr2-cmp2__lb{display:block;font-size:13px;line-height:19.5px;color:var(--grey-600)}
.kfr2-cmp2__lb--next{color:var(--blue-700);font-weight:600}
/* 얻게 되는 쪽(오른쪽)이 진하다 */
.kfr2-cmp2__now{display:block;margin-top:4px;font-size:19px;line-height:28px;font-weight:700;color:var(--grey-500)}
.kfr2-cmp2__next{display:block;margin-top:4px;font-size:19px;line-height:28px;font-weight:700;color:var(--grey-900)}
.kfr2-cmp2__ar{flex:none;color:var(--grey-400)}
.kfr2-reading{margin:8px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500);text-align:center}
.kfr2-nf{margin-top:12px;padding:18px 20px;border-radius:20px;background:var(--yellow-bg)}
.kfr2-nf p{margin:0;font-size:15px;line-height:22.5px;color:var(--grey-700)}
.kfr2-nf__go{display:flex;align-items:center;justify-content:center;width:100%;height:48px;
  margin-top:12px;border:0;border-radius:12px;background:var(--white);color:var(--grey-700);
  font-size:15px;font-weight:600;cursor:pointer}

@media (min-width:768px){
  .kfr2-chips--scroll{margin-left:-24px;margin-right:-24px;padding:0 24px 14px}
  .kfr2-star svg{width:40px;height:40px}
}

/* 22 는 부제 다음이라 카드 위 여백이 16 이다 (다른 화면은 20) */
.kfr2-gr .kfr2-form{margin-top:16px}

/* ══ 24 · 25 · 26 ═════════════════════════════════════════════════ */
/* 24 대상 결제 카드 */
.kfr2-rc__target{margin-top:16px;padding:20px;border-radius:20px;background:var(--white);
  box-shadow:var(--shadow-card)}
.kfr2-rc__row{display:flex;justify-content:space-between;gap:12px;padding:8px 0}
.kfr2-rc__row span{font-size:15px;line-height:18px;color:var(--grey-600)}
.kfr2-rc__row b{font-size:15px;line-height:18px;font-weight:500;color:var(--grey-900);
  font-variant-numeric:tabular-nums}
.kfr2-done__ic--done{background:var(--grey-100);color:var(--grey-500)}

/* 라디오 (§6-7) — 행 전체가 클릭 영역 */
.kfr2-radios{margin-top:24px;padding:0;border-radius:20px;overflow:hidden;
  background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-radio{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer}
.kfr2-radio + .kfr2-radio{box-shadow:inset 0 1px 0 0 var(--grey-100)}
.kfr2-radio__txt{flex:1;min-width:0}
.kfr2-radio__txt b{display:block;font-size:17px;line-height:25.5px;font-weight:500;color:var(--grey-900)}
.kfr2-radio__txt i{display:block;font-style:normal;font-size:14px;line-height:21px;color:var(--grey-600)}
.kfr2-radio input{position:absolute;opacity:0;width:0;height:0}
.kfr2-radio__dot{flex:none;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:2px solid var(--grey-300);border-radius:50%;
  background:none;color:transparent;
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out)}
.kfr2-radio input:checked ~ .kfr2-radio__dot{border-color:var(--blue-500);
  background:var(--blue-500);color:var(--white)}
.kfr2-rc__no{margin-top:16px}
.kfr2-in--num{font-variant-numeric:tabular-nums}

/* ── 문서형 레이아웃 (25 · 26) ─────────────────────────────────────
   본문 행간이 28 이다 — 다른 화면의 16px 본문(24)과 다른 유일한 예외. */
.kfr2-doc__t,
.site-main--page .wp-block-post-content .kfr2-doc__t{margin:24px 0 0;font-size:24px;line-height:33px;
  font-weight:700;letter-spacing:-.01em;color:var(--grey-900)}
.kfr2-doc__date{margin:6px 0 0;font-size:13px;line-height:19.5px;color:var(--grey-500)}

.kfr2-toc{margin-top:16px;padding:0;border-radius:20px;overflow:hidden;
  background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-toc__go{display:flex;align-items:center;gap:12px;width:100%;padding:18px 20px;
  border:0;background:none;text-align:left;cursor:pointer}
.kfr2-toc__go span{flex:1;min-width:0;font-size:17px;line-height:25.5px;font-weight:600;
  color:var(--grey-900)}
.kfr2-toc__go svg{flex:none;color:var(--grey-400);transition:transform .2s var(--ease-out)}
.kfr2-toc__go.is-open svg{transform:rotate(180deg)}
.kfr2-toc__list{animation:kfFade .2s var(--ease-out) both}
.kfr2-toc__list[hidden]{display:none}
.kfr2-toc__list a{display:block;padding:12px 20px;box-shadow:inset 0 1px 0 0 var(--grey-100);
  font-size:15px;line-height:22.5px;color:var(--grey-700);text-decoration:none}

.kfr2-doc__body{margin-top:16px;padding:24px 20px;border-radius:20px;
  background:var(--white);box-shadow:var(--shadow-card)}
.kfr2-art{padding-bottom:24px}
.kfr2-art:last-child{padding-bottom:0}
.kfr2-art b{display:block;font-size:17px;line-height:25.5px;font-weight:600;color:var(--grey-900)}
.kfr2-art p{margin:8px 0 0;font-size:16px;line-height:28px;color:var(--grey-700)}
.kfr2-art p + p{margin-top:4px}

.kfr2-top{display:block;height:44px;margin:20px auto 0;padding:0 18px;border:0;
  border-radius:9999px;background:var(--toast);color:var(--white);
  font-size:14px;font-weight:600;box-shadow:var(--shadow-float);cursor:pointer}
.kfr2-top[hidden]{display:none}

/* 26 요약 카드 — 이 화면에서 테두리가 있는 카드는 이것 하나다 */
.kfr2-sumcard{margin-top:16px;padding:20px;border-radius:20px;background:var(--white);
  border:1.5px solid var(--blue-100);box-shadow:var(--shadow-card)}
.kfr2-sumcard__t{display:block;margin-bottom:12px;font-size:17px;line-height:25.5px;
  font-weight:600;color:var(--grey-900)}
.kfr2-sumcard__row{display:flex;gap:12px;padding:7px 0}
.kfr2-sumcard__row span{flex:none;width:96px;font-size:15px;line-height:24px;color:var(--grey-600)}
.kfr2-sumcard__row b{flex:1;min-width:0;font-size:15px;line-height:24px;font-weight:400;
  color:var(--grey-900)}
.kfr2-officer{margin-top:16px;padding:20px;border-radius:20px;background:var(--white);
  box-shadow:var(--shadow-card)}
.kfr2-officer__t{display:block;margin-bottom:10px;font-size:17px;line-height:25.5px;
  font-weight:600;color:var(--grey-900)}
.kfr2-officer__row{display:flex;justify-content:space-between;gap:12px;padding:7px 0}
.kfr2-officer__row span{font-size:15px;line-height:22px;color:var(--grey-600)}
.kfr2-officer__row b{font-size:15px;line-height:22px;font-weight:500;color:var(--grey-900)}

/* 화면 맨 아래 보조 설명 한 줄 — 카드가 아니라 여백 위에 그냥 놓인다 */
.kfr2-note{margin:16px 4px 0;font-size:13px;line-height:1.55;color:var(--grey-500);
  letter-spacing:-.01em}

/* ── 신청서 안 배대지 주소 시트 ─────────────────────────────────────
   주소 페이지(.kfr-addr)와 같은 정보를 좁은 시트 폭에 담는다.
   행이 6줄이라 라벨을 왼쪽에 고정하고 값이 남은 폭을 다 쓴다. */
.kfr2-addrsheet__gate,.kfr2-addrsheet__mine{margin:0 0 16px;padding:16px;
  border-radius:14px;background:var(--blue-50)}
.kfr2-addrsheet__gatelab,.kfr2-addrsheet__minelab{margin:0 0 6px;font-size:13px;
  font-weight:600;color:var(--blue-500)}
.kfr2-addrsheet__gatet{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--grey-900)}
.kfr2-addrsheet__minen{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;
  color:var(--grey-900)}
.kfr2-addrsheet__gates{margin:0;font-size:13px;line-height:1.5;color:var(--grey-600)}

.kfr2-addrsheet__list{border:1px solid var(--grey-100);border-radius:14px;overflow:hidden}
.kfr2-addrsheet__row{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;
  border-bottom:1px solid var(--grey-100)}
.kfr2-addrsheet__row:last-child{border-bottom:0}
.kfr2-addrsheet__lab{flex:0 0 62px;padding-top:1px;font-size:13px;color:var(--grey-500)}
.kfr2-addrsheet__val{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.5;
  font-weight:600;color:var(--grey-900);word-break:break-word}
.kfr2-addrsheet__cp{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  margin:-4px 0 0;border:0;border-radius:8px;background:none;color:var(--grey-400);cursor:pointer;
  transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}
.kfr2-addrsheet__cp:hover{background:var(--grey-100);color:var(--grey-600)}

/* 주문 전 안내의 [주소 보기] — a 였다가 button 이 되어도 같은 모양이어야 한다 */
.kf-trkhelp button{padding:0;border:0;background:none;font:inherit;color:var(--blue-500);
  font-weight:600;cursor:pointer;text-decoration:none}
.kf-trkhelp button:hover{text-decoration:underline}

/* ── 내 배송 카드 안 [고치기]·[취소] ─────────────────────────────────
   카드 전체가 상세로 가는 링크(::after 로 늘림)이고, 버튼만 그 위에 뜬다. */
.kfr-shiprow{position:relative}
.kfr-shiprow__link{color:inherit;text-decoration:none}
.kfr-shiprow__link::after{content:"";position:absolute;inset:0;z-index:0}

.kfr-shiprow__acts{position:relative;z-index:1;display:flex;gap:8px;margin:14px 0 0}
.kfr-shiprow__act{display:inline-flex;align-items:center;justify-content:center;height:38px;
  padding:0 16px;border:1px solid var(--grey-200);border-radius:10px;background:#fff;
  font-size:14px;font-weight:600;color:var(--grey-700);text-decoration:none;cursor:pointer;
  transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}
.kfr-shiprow__act:hover{background:var(--grey-50);border-color:var(--grey-300)}
/* 취소는 되돌리기 어려운 쪽이라 앞으로 나서지 않는다 — 빨강도 쓰지 않는다 */
.kfr-shiprow__act--off{color:var(--grey-500)}
.kfr-shiprow__act--off:hover{color:var(--grey-700)}
.kfr-shiprow__act[disabled]{opacity:.5;pointer-events:none}

/* 고르기 칸 위에 겹쳐 두는 투명 select — 모양은 시안대로, 동작은 기기 기본 고르기 화면 */
.kfr2-pickwrap{position:relative}
.kfr2-pickwrap__sel{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
/* 링크로 쓰는 고르기 칸도 버튼과 같은 모양이어야 한다 */
a.kfr2-in--pick{text-decoration:none}

/* 15 운송장 — 실제 PDF 가 들어오면 미리보기 자리를 채운다 */
.kfr2-wb__pdf{display:block;width:100%;height:280px;border:0;border-radius:12px;background:var(--grey-100)}
.kfr2-wb__prev--miss{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.kfr2-wb__prev--miss .kfr2-sheet__go--sm{margin-top:12px}
/* 아직 못 받은 버튼 — 눌러도 아무 일 없는 상태를 눈에 보이게 */
.kfr2-wb__dl.is-off,.kfr2-wb__share.is-off{opacity:.4;pointer-events:none}

/* 12 진행 3단계 — 신청 완료 화면의 「운송장 발급 중」 자리에 들어간다 */
.kfr2-send__steps{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
.kfr2-send__step{display:flex;align-items:center;gap:10px}
.kfr2-send__step b{font-size:14px;font-weight:600;color:var(--grey-400);letter-spacing:-.01em}
.kfr2-send__step.is-now b{color:var(--grey-900)}
.kfr2-send__step.is-done b{color:var(--grey-500)}
.kfr2-send__dot{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--grey-200);color:#fff}
.kfr2-send__step.is-done .kfr2-send__dot{background:var(--blue-500)}
/* 지금 하는 단계만 숨 쉰다 — 세 개가 다 깜빡이면 뭘 하는지 안 보인다 */
.kfr2-send__step.is-now .kfr2-send__dot{background:var(--blue-500);
  animation:kfrSendPulse 1.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes kfrSendPulse{0%,100%{box-shadow:0 0 0 0 rgba(49,130,246,.45)}
  50%{box-shadow:0 0 0 6px rgba(49,130,246,0)}}

/* ══ 신청 완료 (리디자인) ═══════════════════════════════════════════
   남색 히어로를 걷어내고 다른 화면과 같은 앱바 + 흰 배경으로 맞춘다.
   .kfr-tf 규칙을 그대로 타므로 여기서는 이 화면에만 필요한 것만 더한다. */
.kf-ad5.kfr .kf-tf{position:static;left:auto;transform:none;width:auto}
.kf-ad5.kfr .kf-tf__body{padding:0 !important;background:transparent !important}
.kf-ad5.kfr .kf-panel{background:var(--white);border:0;border-radius:20px;padding:20px;
  margin-top:16px;box-shadow:0 1px 3px rgba(0,23,51,.08)}
.kf-ad5.kfr .kf-panel:first-child{margin-top:4px}

/* 이 화면만 옛 진한 남색(#0055b1) 버튼을 쓰고 있었다 — 다른 화면 CTA 색으로 맞춘다.
   (기준: .kfr-btn--cta = var(--blue-500)) */
.kf-ad5.kfr .kf-ad5__copy,
.kf-ad5.kfr .kf-ad5__go{background:var(--blue-500) !important;border-color:var(--blue-500) !important}
.kf-ad5.kfr .kf-ad5__copy:hover,
.kf-ad5.kfr .kf-ad5__go:hover{background:#1b64da !important;border-color:#1b64da !important}
.kf-ad5.kfr .kf-ad5__ghost{color:var(--grey-700);border-color:var(--grey-200)}
.kf-ad5.kfr .kf-ad5__ghost:hover{background:var(--grey-50)}

/* Tab 을 눌렀을 때만 보이는 건너뛰기 링크 — 원본 테마 색(--ks-primary)이라
   김빠른에서만 파랑을 맞춰 준다. 노랑 외곽선도 우리 색이 아니다. */
body:has(.kfr) .skip-to-content,
body.page-home-2 .skip-to-content{background:var(--blue-500)}
body:has(.kfr) .skip-to-content:focus,
body.page-home-2 .skip-to-content:focus{outline:3px solid var(--blue-100)}

/* ══ 배송 상세 (리디자인) ═══════════════════════════════════════════
   남색 그라디언트 히어로를 걷어내고 다른 화면과 같은 앱바 + 흰 배경으로. */
.kf-d5.kfr .kf-tf{position:static;left:auto;transform:none;width:auto}
.kf-d5.kfr .kf-tf__body{padding:0 !important;background:transparent !important}
.kf-d5.kfr .kf-panel{background:var(--white);border:0;border-radius:20px;padding:20px;
  margin-top:16px;box-shadow:0 1px 3px rgba(0,23,51,.08)}
.kf-d5.kfr .kf-panel:first-child{margin-top:4px}
/* 이 화면 버튼도 다른 화면 CTA 색으로 */
.kf-d5.kfr .kf-d5__go,
.kf-d5.kfr .kf-d5__pay{background:var(--blue-500) !important;border-color:var(--blue-500) !important}
.kf-d5.kfr .kf-d5__ghost{color:var(--grey-700);border-color:var(--grey-200);background:#fff}
.kf-d5.kfr .kf-d5__ghost:hover{background:var(--grey-50)}

/* ══ 국가 랜딩 SEO 본문 (2026-08-21 복원) ═════════════════════════════
   리디자인 카드 문법 그대로 — 요금·주소는 행, FAQ 는 접기, 다른 나라는 타일 */
.kfr-land__intro p{margin:0;font-size:15px;line-height:1.65;color:var(--grey-700);word-break:keep-all}
.kfr-land__pnote{margin:0 0 4px;padding:16px 20px 0;font-size:13px;line-height:1.5;color:var(--grey-500)}
.kfr-land__prow,.kfr-land__arow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:13px 20px;border-top:1px solid var(--grey-100);font-size:15px}
.kfr-land__prow:first-of-type,.kfr-land__arow:first-of-type{border-top:0}
.kfr-land__prow span,.kfr-land__arow span{flex:0 0 auto;color:var(--grey-500)}
.kfr-land__prow b,.kfr-land__arow b{font-weight:600;color:var(--grey-900);text-align:right;word-break:break-word}
.kfr-land__arow b{font-size:14px}
.kfr-land__plink{display:block;padding:14px 20px;border-top:1px solid var(--grey-100);
  font-size:14px;font-weight:600;color:var(--blue-500);text-decoration:none}
.kfr-land__plink:hover{text-decoration:underline}

/* FAQ — 원형 접기. summary 의 기본 삼각형은 빼고 오른쪽 쉐브론 */
/* 국가 고유 섹션 — 쇼핑몰 목록·주의점 (2026-09-02) */
.kfr-land__malls,.kfr-land__tips{padding:4px 0}
.kfr-land__mall{display:flex;flex-direction:column;gap:3px;padding:14px 20px;border-top:1px solid var(--grey-100)}
.kfr-land__mall:first-child{border-top:0}
.kfr-land__mall b{font-size:15px;font-weight:600;color:var(--grey-900)}
.kfr-land__mall span{font-size:13.5px;line-height:1.6;color:var(--grey-600);word-break:keep-all}
.kfr-land__tip{margin:0;padding:12px 20px 12px 34px;position:relative;border-top:1px solid var(--grey-100);
  font-size:14px;line-height:1.65;color:var(--grey-700,#4e5968);word-break:keep-all}
.kfr-land__tip:first-child{border-top:0}
.kfr-land__tip::before{content:"";position:absolute;left:20px;top:19px;width:5px;height:5px;border-radius:50%;
  background:var(--blue-500,#3182f6)}
.kfr-land__qa{border-top:1px solid var(--grey-100)}
.kfr-land__qa:first-child{border-top:0}
.kfr-land__qa summary{list-style:none;cursor:pointer;padding:16px 44px 16px 20px;position:relative;
  font-size:15px;font-weight:600;color:var(--grey-900);line-height:1.45}
/* summary 안의 h3 — 마크업만 heading 이고 화면은 기존 summary 그대로 (2026-09-02) */
.kfr-land__qa summary .kfr-qa__h{display:inline;margin:0;padding:0;font:inherit;color:inherit}
.kfr-land__qa summary::-webkit-details-marker{display:none}
.kfr-land__qa summary::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--grey-400);border-bottom:2px solid var(--grey-400);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.kfr-land__qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.kfr-land__qa p{margin:0;padding:0 20px 16px;font-size:14px;line-height:1.65;color:var(--grey-600);word-break:keep-all}

/* 관련 글 */
.kfr-land__post{display:flex;flex-direction:column;gap:4px;padding:14px 20px;border-top:1px solid var(--grey-100);
  text-decoration:none;color:inherit}
.kfr-land__post:first-child{border-top:0}
.kfr-land__post b{font-size:15px;font-weight:600;color:var(--grey-900);line-height:1.4;word-break:keep-all}
.kfr-land__post span{font-size:12px;color:var(--grey-400)}
.kfr-land__post:hover b{color:var(--blue-500)}

/* 다른 나라 — 2열 타일 */
.kfr-land__others{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--grey-100);overflow:hidden}
.kfr-land__other{display:flex;flex-direction:column;gap:3px;padding:16px 18px;background:#fff;text-decoration:none;color:inherit}
.kfr-land__other img{margin-bottom:4px}
.kfr-land__other b{font-size:15px;font-weight:600;color:var(--grey-900)}
.kfr-land__other span{font-size:12px;color:var(--grey-500)}
.kfr-land__other:hover{background:var(--grey-50)}
@media (max-width:359px){.kfr-land__others{grid-template-columns:1fr}}

/* 홈 배대지 카드 아래 나라별 안내 링크 */
.kfr-depots__links{display:flex;flex-wrap:wrap;gap:4px 0;margin:12px 4px 0;font-size:13px;line-height:1.5}
.kfr-depots__links a{color:var(--grey-600);text-decoration:none}
.kfr-depots__links a:hover{color:var(--blue-500);text-decoration:underline}
.kfr-depots__links i{margin:0 8px;color:var(--grey-300);font-style:normal}

/* 결제화면 — 부피무게로 계산된 경우의 설명 줄 */
.kfr-pay__row--note span{color:var(--blue-500);font-weight:600}
.kfr-pay__row--note b{color:var(--blue-500)}

/* ── 부피 무게 설명 (결제 화면) ────────────────────────────────
   숫자 두 줄만 놓으면 「왜 1.8kg인데 7kg 요금이냐」는 문의가 그대로 들어온다.
   기본은 한 줄로 접어두고, 궁금한 사람만 펼쳐 보게 한다. */
.kfr-vol{margin:12px 0 4px;border:1px solid var(--line,#e5e8eb);border-radius:12px;background:#f9fafb}
.kfr-vol > summary{
  list-style:none;cursor:pointer;padding:12px 14px;
  font-size:13.5px;line-height:20px;font-weight:600;color:var(--blue-500,#3182f6);
}
.kfr-vol > summary::-webkit-details-marker{display:none}
.kfr-vol > summary::after{content:"＋";float:right;font-weight:700;margin-left:8px}
.kfr-vol[open] > summary::after{content:"−"}
.kfr-vol__b{padding:0 14px 14px}
.kfr-vol__b p{margin:0 0 10px;font-size:13.5px;line-height:21px;color:#4e5968}
.kfr-vol__b p:last-child{margin-bottom:0}
.kfr-vol__b b{color:#191f28;font-weight:600}
.kfr-vol__calc{
  padding:11px 13px;border-radius:10px;background:#fff;border:1px solid #e5e8eb;
  font-variant-numeric:tabular-nums;
}
.kfr-vol__tip{padding:11px 13px;border-radius:10px;background:#e8f3ff;color:#1b64da!important}
.kfr-vol__tip b{color:#1b64da}

/* ── 현지 센터 검수 (고객 상세) ────────────────────────────── */
.kf-d5__insp{padding:4px 16px 16px}
.kf-d5__ph{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.kf-d5__ph a{
  display:block;aspect-ratio:1;border-radius:12px;background:#eef2f7 center/cover no-repeat;
  border:1px solid #e3e9f2;
}
.kf-d5__note{
  margin:12px 0 0;padding:13px 15px;border-radius:12px;background:#f7f9fc;
  font-size:14px;line-height:21px;color:#3c4f68;
}
.kf-d5__note b{display:block;margin-bottom:3px;font-size:13px;font-weight:700;color:#16263d}
.kf-d5__note.is-ok{color:#4a5b73}

/* 요금조회 중심 전환 (2026-09-01) */
.kfr-addr__fee{display:inline-flex;align-items:center;height:40px;padding:0 16px;margin:10px 0 4px;border-radius:12px;
  font-size:14px;font-weight:700;color:var(--blue-500);background:var(--blue-50,#EAF2FE);text-decoration:none}
.kfr-addr__fee:hover{background:var(--blue-100,#DCE9FF)}
.kfr-res__notice--save{background:var(--blue-50,#EAF2FE);color:var(--blue-700,#1B64DA)}
.kfr-res__notice--save b{font-weight:700}