/* ══════════════════════════════════════════════════════════════
폰트 — 개발 구현 가이드 §0-5 / §14
main.css 는 Inter 를 앞에 두는데, 한글은 Pretendard 로 폴백돼도
숫자·영문(₩21,700 · URL · kg)만 Inter 로 렌더돼 목업과 글자 모양이 달라진다.
김빠른에서는 Pretendard Variable 를 최우선으로 되돌린다.
══════════════════════════════════════════════════════════════ */
:root{
--font-sans:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
body, button, input, select, textarea, .kf-quote, .kf-apply, .kf-shipments{
font-family:var(--font-sans);
}
/* ============================================================
김빠른 배대지 — 오버라이드 (main.css 뒤 로드)
히어로 / 퀵메뉴 / 버튼 글자색 / 페이지 제목 중복 제거
============================================================ */
/* ---- v5: 디자인 토큰 (디자이너 납품 kf-assets와 동일) ---- */
:root{
--kf-blue:#0055b1; --kf-blue-dark:#003c7d; --kf-bg:#f4f7fb;
--kf-yellow:#ffda47; --kf-mint:#17a2a2; --kf-coral:#ff7059; --kf-lilac:#b3a4f7;
}
/* ---- DEV-4: 인페이지 앵커(목차) 작동 복구 ----
main.css의 body{overflow-x:hidden}이 CSS 규칙상 overflow-y를 auto로 만들어
body가 자체 스크롤 컨테이너가 됨 → 앵커 점프·scrollIntoView 무효(휠만 동작).
overflow-x:clip은 스크롤 컨테이너를 만들지 않으면서 가로 넘침만 자름. */
html{ overflow-x:clip; }
body{ overflow-x:clip !important; overflow-y:visible !important; }
.kf-sec[id], [id^="g-"]{ scroll-margin-top:20px; }
/* ---- 1. 콘텐츠 페이지 히어로 (제목을 풀폭 파랑 배너로) ---- */
.site-main--page > .page-title{
background:linear-gradient(120deg,#0055b1 0%,#003c7d 100%);
color:#fff !important;
margin:0 calc(50% - 50vw) 40px !important;
padding:52px calc(50vw - 50% + 24px) !important;
max-width:none !important;
width:auto !important;
font-size:clamp(26px,4vw,38px) !important;
font-weight:800 !important;
letter-spacing:-.02em;
box-sizing:border-box;
}
/* 본문 첫 h1 이 제목과 중복되면 숨김 (페이지 제목은 히어로가 담당) */
.site-main--page .wp-block-post-content > h1:first-child,
.site-main--page .entry-content > h1:first-child{ display:none; }
/* ---- 2. 버튼 글자색 강제 (어두운 글자 안 보이는 문제) ---- */
.wp-block-button__link,
.wp-element-button,
.wp-block-button .wp-block-button__link{
color:#fff !important;
background:linear-gradient(135deg,#0055b1,#003c7d) !important;
font-weight:700 !important;
}
.wp-block-button__link:hover{ background:#003c7d !important; }
/* 흰 배경 버튼(.kf-bbtn 인라인 지정)은 예외 — 인라인 style 우선 */
/* ---- 3. 퀵메뉴 견고화 (5열 한 줄, 깨짐 방지) ---- */
.kf-quick{
display:grid !important;
grid-template-columns:repeat(5,1fr) !important;
margin-top:-26px;
}
.kf-quick a{ white-space:nowrap; }
@media(max-width:860px){
.kf-quick{ grid-template-columns:repeat(2,1fr) !important; margin-top:16px; }
.kf-quick a{ border-bottom:1px solid #eef2f7; }
}
/* ---- 4. 배너 가독성 (흰 글자 확실히) ---- */
.kf-banner h2, .kf-banner p{ color:#fff !important; }
.kf-banner__btns .kf-bbtn--y{ color:#1a1a1a !important; background:#ffda47 !important; }
.kf-banner__btns .kf-bbtn--o{ color:#fff !important; }
/* ---- 5. 신청폼/요금/주소 페이지 본문 여백 ---- */
.site-main--page .wp-block-post-content{ padding-bottom:56px; }
/* ---- 6. 키서프 숫자 느낌 (tabular-nums + 굵게) ---- */
.kf-price td.r, .kf-exch td.r, .kf-adt__v, .kf-stat__num, .kf-banner h2{
font-variant-numeric: tabular-nums slashed-zero;
}
.kf-stat__num{ font-weight:800; letter-spacing:-0.02em; }
/* ---- 7. 흰 배경 → 회색 톤으로 깊이 (섹션 교차) ---- */
.kf-band{ background:#f4f7fb; } /* 회색 밴드 */
.kf-band--white{ background:#fff; }
.kf-sec-pad{ padding:52px 0; }
.kf-h2{ font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-0.02em; color:#1a1a1a; text-align:center; margin:0 0 8px; }
.kf-h2sub{ text-align:center; color:#6a7480; font-size:15px; margin:0 0 36px; }
/* 카드 깊이 강화 (너무 밋밋한 흰색 방지) */
.kf-box, .kf-card, .kf-ctr__flag, .kf-quick{ box-shadow:0 1px 3px rgba(16,38,72,.06), 0 6px 20px rgba(16,38,72,.05); }
.kf-box{ border-color:#e3e9f0; }
/* ---- 8. 통계 밴드 ---- */
.kf-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.kf-stat{ text-align:center; padding:20px 8px; }
.kf-stat__num{ font-size:34px; color:#0055b1; line-height:1; }
.kf-stat__lb{ margin-top:8px; color:#566; font-size:14px; font-weight:600; }
@media(max-width:760px){ .kf-stats{ grid-template-columns:repeat(2,1fr); } }
/* ---- 9. 이용방법 스텝 ---- */
.kf-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.kf-steps--8{ grid-template-columns:repeat(4,1fr); }
.kf-step{ position:relative; background:#fff; border:1px solid #e3e9f0; border-radius:12px; padding:22px 20px; box-shadow:0 4px 14px rgba(16,38,72,.05); }
.kf-step__ic{ display:block; width:48px; height:48px; }
.kf-step__ic img{ width:48px; height:48px; display:block; }
.kf-step__n{ position:absolute; top:16px; right:16px; width:26px; height:26px; border-radius:8px; background:var(--kf-blue,#0055b1); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:13px; font-variant-numeric:tabular-nums; }
.kf-step h4{ margin:14px 0 6px; font-size:15px; color:#1a1a1a; }
.kf-step p{ margin:0; font-size:13px; color:#667; line-height:1.6; }
@media(max-width:860px){ .kf-steps,.kf-steps--8{ grid-template-columns:1fr 1fr; } }
/* ---- 10. 본문 텍스트 또렷하게 (얇음 보정) ---- */
.kf-ctr__sub, .kf-h2sub, .kf-box__bd{ color:#4a5560; }
body{ -webkit-font-smoothing:antialiased; }
/* ============================================================
v7: 서브페이지 히어로 + 칩 서브내비 + 본문 구조화 (D-1·D-2·D-3)
============================================================ */
/* ===== 모바일 최적화 (390px 기준) ===== */
@media (max-width:640px){
/* 터치 타깃 최소 44px + iOS 자동확대 방지(16px) */
.kf-item input, .kf-item select, .kf-apply input, .kf-apply select, .kf-apply textarea,
.kf-calc__field input, .kf-calc__field select, .kf-fx__row input, .kf-fx__row select,
.kf-search input, .kf-try__box input, .kf-rvform input, .kf-rvform textarea, .kf-rvform select{
font-size:16px !important; min-height:46px;
}
.ks-btn, .kf-auto__btn, .kf-aibtn, .kf-item__imgbtn, .kf-additem, .kf-try__box button{ min-height:46px; }
/* 마이페이지: 카운터 3열, 파이프라인 가로 스크롤 스냅 */
.kf-counters{ grid-template-columns:repeat(3,1fr) !important; gap:8px; }
.kf-counter{ padding:12px 4px; }
.kf-counter b{ font-size:19px; }
.kf-pipe{ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:12px 10px; }
.kf-pipe__step{ scroll-snap-align:center; min-width:66px; }
/* 신청 목록 표: 폭 좁을 때 트래킹·신청일 축약 */
#kfShipTbl{ font-size:13px; }
#kfShipTbl th, #kfShipTbl td{ padding:9px 7px !important; }
#kfShipTbl th:nth-child(4), #kfShipTbl td:nth-child(4){ display:none; } /* 트래킹 숨김(상세에서 확인) */
/* 문서 표만 가로 스크롤 보장. 요금표는 새 디자인에서 화면 폭에 맞춰 접힌다 */
.kf-doc table, .kf-grade__tbl{ min-width:420px; }
/* 서브히어로/본문 여백 축소 */
.kf-sec{ padding:20px 18px; border-radius:12px; }
.kf-doc{ padding:0 2px; }
/* 게시판: 날짜 아래로 */
.kf-board__list li a{ flex-direction:column; align-items:flex-start; gap:4px; }
.kf-board__list time{ font-size:12px; }
/* 홈 프로모션/퀵메뉴 2~3열 */
.kf-promo-top{ grid-template-columns:repeat(3,1fr) !important; gap:8px; }
.kf-qt{ padding:14px 4px !important; font-size:12px !important; gap:7px !important; }
.kf-promo{ grid-template-columns:1fr 1fr !important; }
/* (v4) .kf-apply 폭 제한 제거 — 목업 좌우 여백은 12px, __body 패딩이 담당 */
}
@media (max-width:390px){
.kf-counters{ grid-template-columns:repeat(2,1fr) !important; }
.kf-promo{ grid-template-columns:1fr !important; }
}
/* ============================================================
v17 — 히어로 재구성 · 전체폭(1100 콘텐츠) · 여백 확대 · 대비 교정
============================================================ */
/* ── 홈 섹션 순서: URL 체험 히어로를 최상단, 슬라이더는 하단 띠배너로 ── */
#kfHome{ display:flex; flex-direction:column; }
#kfHome > *{ order:5; }
#kfHome > .kf-cbar{ order:1; }
#kfHome > .kf-modal{ order:1; }
#kfHome > .kf-hero2{ order:2; }
#kfHome > .kf-live{ order:3; }
#kfHome > .kf-banner{ order:8; } /* 하단 띠배너 */
#kfHome > .kf-float{ order:9; }
@media(max-width:760px){
/* 헤더 로고가 세로로 깨지던 문제 */
.site-header__logo, .site-header__logo *{ white-space:nowrap !important; }
.site-header__logo{ flex-shrink:0 !important; min-width:0; }
/* 국가 시계바: 히어로 위 공간을 잡아먹어 모바일에선 숨김(하단 섹션에서 확인 가능) */
#kfHome > .kf-cbar{ display:none !important; }
/* 플로팅 버튼이 요금조회 카드를 가리지 않도록 */
.kf-float{ bottom:10px !important; right:8px !important; transform:scale(.82); transform-origin:bottom right; }
}
/* ── 구 히어로 (미사용, 잔존 시 숨김) ── */
.kf-hero2{ display:none !important; }
/* ── 메인 히어로 (URL 체험) ── */
.kf-hero2{ background:linear-gradient(120deg,#0055b1 0%,#003c7d 100%); color:#fff; margin:0 calc(50% - 50vw); width:100vw; }
.kf-hero2__in{ max-width:1100px; margin:0 auto; padding:64px 24px 68px; display:grid; grid-template-columns:1fr 460px; gap:44px; align-items:center; }
.kf-hero2__eyebrow{ display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:12.5px; font-weight:700; padding:6px 14px; border-radius:999px; letter-spacing:-.01em; }
.kf-hero2 h1{ color:#fff; font-size:clamp(28px,3.9vw,44px); font-weight:800; line-height:1.24; letter-spacing:-.03em; margin:18px 0 0; }
.kf-hero2 h1 em{ font-style:normal; color:#ffda47; }
.kf-hero2__l > p{ color:rgba(255,255,255,.9); font-size:16px; line-height:1.7; margin:16px 0 0; }
.kf-hero2__pts{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.kf-hero2__pts li{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:#fff; font-weight:600; }
.kf-hero2__pts svg{ color:#ffda47; flex-shrink:0; }
.kf-hero2__card{ background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.22); border-radius:18px; padding:22px; backdrop-filter:blur(4px); }
.kf-hero2__tag{ display:inline-block; background:#ffda47; color:#42320a; font-size:11.5px; font-weight:800; border-radius:999px; padding:5px 12px; margin-bottom:13px; }
.kf-hero2__box{ display:flex; gap:8px; flex-wrap:wrap; }
.kf-hero2__box input{ flex:1; min-width:200px; padding:14px 15px; border:none; border-radius:11px; font-size:14.5px; font-family:inherit; outline:none; color:#16263d; background:#fff; }
.kf-hero2__box button{ border:none; background:#ffda47; color:#42320a; font-weight:800; font-size:14.5px; padding:0 22px; border-radius:11px; cursor:pointer; font-family:inherit; white-space:nowrap; min-height:48px; }
.kf-hero2__box button:hover{ background:#ffcf2e; }
.kf-hero2__box button:disabled{ opacity:.6; cursor:default; }
.kf-hero2__out{ display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); border-radius:12px; padding:12px 14px; margin-top:12px; flex-wrap:wrap; }
.kf-hero2__thumb{ width:58px; height:58px; border-radius:10px; background:#fff center/cover no-repeat; flex-shrink:0; }
.kf-hero2__fields{ flex:1; min-width:150px; display:flex; flex-direction:column; gap:6px; }
.kf-hero2__fields div{ display:flex; gap:9px; align-items:baseline; }
.kf-hero2__fields i{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,.72); width:44px; flex-shrink:0; }
.kf-hero2__fields b{ font-size:13.5px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-hero2__cta{ background:#fff; color:#0055b1 !important; font-weight:800; font-size:13px; padding:10px 15px; border-radius:9px; text-decoration:none; white-space:nowrap; }
.kf-hero2__msg{ font-size:12.5px; color:rgba(255,255,255,.86); margin:11px 0 0; line-height:1.6; min-height:16px; }
.kf-hero2__btns{ display:flex; gap:9px; margin-top:16px; }
.kf-hero2__btn{ flex:1; text-align:center; padding:13px 0; border-radius:11px; font-weight:800; font-size:14.5px; text-decoration:none; min-height:48px; display:flex; align-items:center; justify-content:center; }
.kf-hero2__btn--y{ background:#ffda47; color:#42320a !important; }
.kf-hero2__btn--y:hover{ background:#ffcf2e; }
.kf-hero2__btn--o{ background:transparent; border:1.5px solid rgba(255,255,255,.6); color:#fff !important; }
.kf-hero2__btn--o:hover{ background:rgba(255,255,255,.14); }
@media(max-width:900px){ .kf-hero2__in{ grid-template-columns:1fr; gap:26px; padding:44px 20px 48px; } }
@media(max-width:600px){ .kf-hero2 h1{ font-size:26px; } .kf-hero2__box button{ width:100%; } .kf-hero2__out{ flex-direction:column; align-items:flex-start; } .kf-hero2__cta{ width:100%; text-align:center; } }
/* ── 하단 띠배너(구 히어로 슬라이더): 높이 축소 ── */
#kfHome > .kf-banner{ margin-top:8px; }
#kfHome > .kf-banner .kf-banner__in{ min-height:0 !important; padding-top:34px !important; padding-bottom:34px !important; }
#kfHome > .kf-banner .kf-slide h2{ font-size:clamp(19px,2.5vw,26px) !important; }
#kfHome > .kf-banner .kf-banner__art{ opacity:.5; }
/* ── 서브페이지 히어로: 전체폭 강제(WP 768px 제약 무력화) + 높이 확대 ── */
.kf-subhero, .kf-subnav{
max-width:none !important;
width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
}
.kf-subhero__in{ max-width:1100px !important; padding:54px 24px !important; min-height:230px !important; }
.kf-subhero__art{ width:min(1100px,100%) !important; }
.kf-subnav__in{ max-width:1100px !important; padding:14px 24px !important; }
.kf-subhero__title{ font-size:clamp(28px,4.2vw,40px) !important; }
.kf-subhero__desc{ font-size:16px !important; }
@media(max-width:760px){ .kf-subhero__in{ padding:34px 18px !important; min-height:150px !important; } }
/* ── 본문 콘텐츠 폭 1100px — WP 레이아웃 변수 자체를 확장(가장 안전) ── */
.site-main--page, .site-main--page .entry-content,
.site-main--single, .site-main--single .entry-content{
--wp--style--global--content-size:1100px;
}
/* 컴포넌트는 부모(1100px) 폭을 그대로 채움 */
.kf-board, .kf-doc, .kf-grade{ max-width:none !important; width:100%; margin-left:auto; margin-right:auto; padding-bottom:56px; }
.kf-shipments{ max-width:none !important; width:100%; }
/* ── 섹션 여백 확대 (빽빽함 해소) ── */
.kf-sec{ padding:30px 34px; margin-bottom:26px; }
.kf-board__list li a{ padding:18px 8px; }
.kf-doc .kf-sec__bd{ font-size:14.5px; line-height:1.85; }
/* ============================================================
대비 교정 — main.css의 b,strong{#1a1a1a}가 어두운 배경 위 흰 글씨를 덮는 문제
============================================================ */
[class^="kf-"] b, [class*=" kf-"] b,
[class^="kf-"] strong, [class*=" kf-"] strong{ color:inherit; }
/* 밝은 카드 본문에서는 강조를 다시 진하게 */
.kf-sec__bd b, .kf-sec__bd strong, .kf-doc .kf-sec__bd b,
.kf-board__body b, .kf-board__body strong,
.kf-price b, .kf-grade__tbl b{ color:#16263d; }
.kf-box-info b{ color:#003c7d; } .kf-box-warn b{ color:#6b4e00; } .kf-box-ban b{ color:#a33522; }
/* 흐린 회색 → 대비 확보 */
.kf-cbar__tm{ color:#5b6b80 !important; }
.kf-live__t{ color:#67768c !important; }
/* 홈 히어로는 진한 파랑 배경 — 진초록(#0f7a37)은 거의 안 보인다. 시안은 흰색이다. */
.kf-live__badge{ color:#0f7a37 !important; }
#kfHome .kf-live .kf-live__badge,.kf-quote .kf-live__badge{ color:#fff !important; }
.kf-board__list time{ color:#67768c !important; }
.kf-fx__note, .kf-fx__hd span{ color:#4a5c73 !important; }
.kf-fx__eq{ color:#54688a !important; }
.kf-grade__note{ color:#5b7290 !important; }
.kf-hint{ color:#5b7290; }
/* 푸터 로고가 흰색 → 밝은 푸터 배경에서 안 보이던 문제 */
/* 푸터 로고 색은 아래 v4 푸터 블록에서 관리 */
/* 흰 글씨 프로모 카드: 배경 폴백이 연한색이라 글씨가 사라지던 문제 → 어두운 배경 + 스크림 */
.kf-pcard--dark{ background-color:#1e2a40 !important; position:relative; }
.kf-pcard--dark::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,24,40,.62) 0%, rgba(16,24,40,.28) 55%, rgba(16,24,40,.10) 100%); border-radius:inherit; z-index:0; }
.kf-pcard--dark b, .kf-pcard--dark span{ position:relative; z-index:1; }
.kf-pcard--dark span{ opacity:1; color:rgba(255,255,255,.92); }
/* 액션 타일: 민트가 밝아 흰 글씨 대비 부족(3.1) → 진한 민트 */
.kf-act--teal{ background:#0e7a7a !important; }
.kf-act, .kf-act b, .kf-act span{ color:#fff !important; }
/* 별점: 빈 별이 너무 흐려 안 보이던 문제 */
.ks-stars__off{ color:#b9c3d1 !important; }
/* 국가바 통화 코드(빨강)·소형 라벨 대비 보강 */
.kf-cbar__c small{ color:#c0392b !important; }
/* 플로팅 버튼: 링크 색이 배경색을 덮어 글씨가 사라지던 문제 */
.kf-float__cs, .kf-float__cs span, .kf-float__cs b{ color:#fff !important; }
.kf-float__kakao, .kf-float__kakao span, .kf-float__kakao b{ color:#3c1e1e !important; }
.kf-float__top, .kf-float__top span, .kf-float__top b{ color:#0055b1 !important; }
/* 흐린 회색 소형 텍스트 일괄 보강 */
.kf-nlist .dt{ color:#67768c !important; }
.kf-exch__d{ color:#6b7a90 !important; }
[style*="color:#999"]{ color:#67768c !important; }
[style*="color:#aaa"]{ color:#67768c !important; }
.kf-calc__note, .kf-adt__warn{ color:#5b7290; }
/* 버튼 대비 — main.css의 a{color:보라/파랑}이 파란 버튼 글자를 덮어 "안 보이는" 문제 방지 */
.ks-btn--primary, a.ks-btn--primary, .ks-btn--primary:visited, .ks-btn--primary:hover{ color:#fff !important; }
.ks-btn--outline, a.ks-btn--outline{ color:var(--kf-blue) !important; }
/* 키서프 잔재 노란 안내박스(.ks-credits-guard) 사용 금지 — 김빠른에서는 노출하지 않음 */
.ks-credits-guard{ display:none !important; }
/* D-1 공통 서브 히어로 */
.kf-subhero{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--kf-blue) 0%,var(--kf-blue-dark) 100%); color:#fff; margin:0 calc(50% - 50vw); width:100vw; box-sizing:border-box; }
.kf-subhero__in{ position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:40px 24px; min-height:200px; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }
.kf-subhero__bc{ font-size:12px; color:rgba(255,255,255,.78); margin-bottom:12px; }
/* DEV-2: "홈" 링크가 파랑(main.css)에 묻혀 안 보임 → 흰색 강제 */
.kf-subhero__bc a{ color:#fff !important; text-decoration:none; opacity:.85; }
.kf-subhero__bc a:hover{ opacity:1; }
.kf-subhero__bc span{ margin:0 5px; opacity:.55; }
.kf-subhero__title{ font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.02em; margin:0; color:#fff; }
.kf-subhero__desc{ font-size:15px; color:rgba(255,255,255,.85); margin:10px 0 0; max-width:640px; line-height:1.6; }
/* DES-9: kf-sub-01~06 = 1180×200 풀폭 일러스트(좌60% 투명·우40% 그림) → 콘텐츠 폭에 정렬한 배경 레이어 */
.kf-subhero__art{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1180px,100%); padding:0 24px; box-sizing:border-box; z-index:1; pointer-events:none; }
.kf-subhero__art svg{ display:block; width:100%; height:auto; }
@media(max-width:760px){ .kf-subhero__in{ min-height:140px; padding:26px 18px; } .kf-subhero__art{ display:none; } }
/* D-2 칩 서브내비 */
.kf-subnav{ background:#fff; border-bottom:1px solid #eef0f3; margin:0 calc(50% - 50vw) 36px; width:100vw; box-sizing:border-box; }
.kf-subnav__in{ max-width:1180px; margin:0 auto; padding:12px 24px; display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kf-subnav__chip{ flex-shrink:0; padding:8px 16px; border-radius:999px; background:#f2f4f7; color:#555; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
.kf-subnav__chip:hover{ background:#e6edf6; color:#0055b1; }
/* DEV-3: 활성 칩 글자가 파랑(main.css a색)에 묻혀 안 보임 → 흰색 강제 */
.kf-subnav__chip.is-on{ background:var(--kf-blue); color:#fff !important; }
/* D-3 섹션 카드 (DES 스타일가이드 2-1) */
.kf-sec{ background:#fff; border:1px solid #e9eef4; border-left:4px solid var(--kf-blue); border-radius:14px; padding:28px 32px; margin:0 0 24px; box-shadow:0 1px 3px rgba(16,42,84,.06); }
.kf-sec__t{ display:flex; align-items:center; gap:12px; font-size:18px; font-weight:800; color:#16263d; margin:0 0 14px; }
.kf-sec__ic{ display:inline-flex; width:40px; height:40px; border-radius:50%; background:#eef4ff; color:#0055b1; align-items:center; justify-content:center; flex-shrink:0; }
.kf-sec__ic svg{ width:20px; height:20px; }
.kf-sec__bd{ font-size:14px; color:#3c4f68; line-height:1.8; }
.kf-sec__bd p{ margin:0 0 12px; } .kf-sec__bd p:last-child{ margin-bottom:0; }
.kf-sec__bd ul,.kf-sec__bd ol{ margin:0 0 12px; padding-left:20px; } .kf-sec__bd li{ margin-bottom:7px; }
.kf-sec__bd a{ color:#0055b1; }
/* 정보 박스 3종 (2-2: 안내#003c7d·주의#6b4e00·금지#ffece7/#a33522, 13/1.7) */
.kf-box-info,.kf-box-warn,.kf-box-ban{ border-radius:10px; padding:14px 18px; margin:0 0 14px; font-size:13px; line-height:1.7; }
.kf-box-info{ background:#eef4ff; border:1px solid #cfe0f7; color:#003c7d; }
/* 노랑 보더 + 누런 텍스트 금지 (지시 2026-08-11) — 경고는 붉은 계열로 통일 */
.kf-box-warn{ background:#fdf3f0; border:1px solid #f3d5cc; color:#8c3a26; }
.kf-box-ban{ background:#ffece7; border:1px solid #f6cdc6; color:#a33522; }
.kf-box-info p:last-child,.kf-box-warn p:last-child,.kf-box-ban p:last-child{ margin-bottom:0; }
/* 핵심 수치 큰 숫자 (2-3: card#fff·border#e2eaf4·18/22 · 숫자34/800 · 레이블11/700 #7185a0) */
.kf-bignum-row{ display:flex; flex-wrap:wrap; gap:14px; margin:4px 0 16px; }
.kf-bignum{ flex:1; min-width:140px; background:#fff; border:1px solid #e2eaf4; border-radius:12px; padding:18px 22px; text-align:center; }
.kf-bignum b{ display:block; font-size:34px; font-weight:800; color:var(--kf-blue); font-variant-numeric:tabular-nums slashed-zero; letter-spacing:-.02em; line-height:1.15; }
.kf-bignum i{ display:block; font-style:normal; font-size:11px; font-weight:700; color:#7185a0; letter-spacing:.06em; margin-top:6px; }
/* 출고 스케줄 칩 (2-4: bg#fff·border#e2eaf4) */
.kf-sched{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:4px 0 8px; }
.kf-sched__c{ display:flex; flex-direction:column; align-items:center; gap:5px; background:#fff; border:1px solid #e2eaf4; border-radius:10px; padding:14px 6px; font-size:13px; text-align:center; }
.kf-sched__c b{ color:#16263d; } .kf-sched__c span{ color:#51677f; font-size:12px; }
@media(max-width:680px){ .kf-sched{ grid-template-columns:repeat(2,1fr); } }
/* 목차 앵커 칩 */
.kf-toc{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.kf-toc a{ padding:7px 14px; border-radius:999px; background:#eef4ff; color:#0055b1; font-size:13px; font-weight:700; text-decoration:none; }
.kf-toc a:hover{ background:#dde9f9; }
/* 약관·정책·FAQ 본문 가독성 (카드화 없이 행간·여백만) */
.site-main--page .wp-block-post-content{ font-size:14.5px; line-height:1.78; color:#39424d; }
.site-main--page .wp-block-post-content h2{ font-size:18px; color:#0a2540; margin:28px 0 10px; }
.site-main--page .wp-block-post-content h3{ font-size:15.5px; color:#1a2a3a; margin:18px 0 6px; }
.site-main--page .wp-block-post-content li{ margin-bottom:6px; }
/* 리디자인(.kfr) 문서에서는 끈다 — 이 규칙이 (0,2,1) 이라 .kfr-* 링크 색을 전부 이긴다.
되돌리려면 앞의 :is(body:not(:has(.kfr)):not(:has(.kfb))) 만 지우면 된다. (2026-08-14) */
:is(body:not(:has(.kfr)):not(:has(.kfb))) .site-main--page .wp-block-post-content a{ color:#0055b1; }
/* 단, 구조화 쇼트코드(guide·계산기 등)가 들어간 본문은 위 규칙이 카드 안에서만 적용 */
#kfGuide{ color:#3a4654; }
/* 요금조회/홈 CSS 는 assets/css/home.css 로 분리 (가이드 §0-1) */
/* ══════ 디자이너 납품: 배대지 주소·요금표·도움말 공통 (에셋3/pages.css) ══════ */
/* ══════════════════════════════════════════════════════════════
김빠른 · 배대지 주소 / 요금표 / 도움말·문의 — 공통 CSS (2026-08)
· 모바일 퍼스트 · 기존 클래스명 유지(.kf-ctr .kf-tab .kf-price .kf-fees .kf-subnav 등)
· 요금조회·신청서·내 배송과 동일한 디자인 언어
══════════════════════════════════════════════════════════════ */
:root{
--kf-blue:#0055b1; --kf-blue-d:#003c7d; --kf-blue-g:#00306a; --kf-sky:#8ec5ff;
--kf-ink:#16263d; --kf-sub:#5b7290; --kf-mute:#8a9cb4;
--kf-line:#dbe7f7; --kf-field:#d8e2ef; --kf-hair:#e4ebf4;
--kf-soft:#f5f9ff; --kf-field-bg:#f8fafd; --kf-page:#eef2f7;
--kf-ok:#1f9d55; --kf-ok-d:#0f6b41; --kf-warn:#a33522;
}
.kf-page{position:relative;left:50%;transform:translateX(-50%);width:100vw;text-align:left;}
.kf-page *{box-sizing:border-box;}
.kf-page [hidden]{display:none !important;}
/* ── 서브페이지 히어로 (전 화면 공통) ────────────────────── */
.kf-hero{background:linear-gradient(120deg,#0055b1 0%,#00306a 100%);padding:18px 16px 20px;color:#fff;}
.kf-hero__in{max-width:1100px;margin:0 auto;}
.kf-hero__crumb{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:9px;}
.kf-hero__crumb b{color:#fff;font-weight:600;}
.kf-hero h1{margin:0;font-size:24px;font-weight:850;letter-spacing:-.03em;color:#fff;line-height:1.2;}
.kf-hero p{margin:8px 0 0;font-size:12.5px;color:rgba(255,255,255,.86);line-height:1.6;}
/* 서브내비 칩 — 도움말 하나로 합치면서 대부분 불필요해졌습니다 */
.kf-subnav{display:none;}
.kf-page__body{background:var(--kf-page);padding:16px 12px 22px;display:flex;flex-direction:column;gap:14px;max-width:1124px;margin:0 auto;}
.kf-panel{background:#fff;border-radius:16px;padding:16px 14px;box-shadow:0 2px 10px rgba(16,38,61,.06);}
.kf-panel__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:2px solid var(--kf-blue);padding-bottom:9px;margin-bottom:12px;}
.kf-panel__hd b{font-size:15.5px;font-weight:800;color:var(--kf-blue);letter-spacing:-.02em;}
.kf-panel__hd span{font-size:11.5px;color:var(--kf-mute);}
/* 안내 박스 3종 */
.kf-note{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.65;}
.kf-note svg{flex:none;margin-top:1px;}
.kf-note b{font-weight:700;}
.kf-note--info{background:var(--kf-soft);border:1px solid var(--kf-line);color:var(--kf-sub);}
.kf-note--info b{color:var(--kf-ink);}
.kf-note--warn{background:#fdf3f0;border:1px solid #f3d5cc;color:#8c3a26;}
.kf-note--ok{background:#eafaf3;border:1px solid #b7e6cf;color:var(--kf-ok-d);}
/* ── 국가 탭 (주소 · 요금표 공용) ───────────────────────── */
.kf-ctr,.kf-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px;}
.kf-tab{display:flex;flex-direction:column;align-items:center;gap:6px;border:1.5px solid #e3e9f2;background:#fff;border-radius:11px;padding:11px 4px;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:700;color:#3c4f68;}
.kf-tab:hover{border-color:#b9cde8;}
.kf-tab img{border:1px solid rgba(0,0,0,.1);border-radius:2px;display:block;}
.kf-tab.is-on{border-color:var(--kf-blue);background:#eef4ff;color:var(--kf-blue);}
/* ── 배대지 주소 ────────────────────────────────────────── */
.kf-adt__box{display:flex;align-items:center;gap:11px;background:var(--kf-soft);border:1.5px solid #cfe0f7;border-radius:13px;padding:14px 16px;}
.kf-adt__boxl{flex:1;min-width:0;}
.kf-adt__boxl span{display:block;font-size:11.5px;font-weight:700;color:var(--kf-sub);letter-spacing:.04em;}
.kf-adt__boxl b{display:block;margin-top:3px;font-size:24px;font-weight:850;color:var(--kf-blue);letter-spacing:.02em;line-height:1.1;}
.kf-adt__cp{flex:none;display:inline-flex;align-items:center;gap:6px;border:none;background:var(--kf-blue);color:#fff;border-radius:10px;padding:11px 16px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-adt__cp:hover{background:var(--kf-blue-d);}
.kf-adt__list{border:1.5px solid var(--kf-field);border-radius:13px;background:var(--kf-field-bg);overflow:hidden;}
.kf-adt__row{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-top:1.5px solid var(--kf-hair);}
.kf-adt__row:first-child{border-top:none;}
.kf-adt__lb{flex:none;width:72px;font-size:11.5px;font-weight:700;color:#7185a0;}
.kf-adt__v{flex:1;min-width:0;font-size:14px;color:var(--kf-ink);word-break:break-word;line-height:1.45;}
.kf-adt__row--hi .kf-adt__v{font-weight:800;color:var(--kf-blue);}
.kf-adt__row button{flex:none;border:1px solid #cfe0f7;background:#eef4ff;color:var(--kf-blue);border-radius:8px;padding:7px 10px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-adt__row button:hover{background:#dde9f9;}
.kf-adt__all{width:100%;margin-top:11px;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:var(--kf-blue);color:#fff;border-radius:12px;min-height:52px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-adt__all:hover{background:var(--kf-blue-d);}
/* ── 요금표 ─────────────────────────────────────────────── */
.kf-rate__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;}
.kf-rate__hd b{font-size:14px;font-weight:800;color:var(--kf-ink);}
.kf-rate__hd span{font-size:12px;color:var(--kf-sub);font-weight:600;}
/* 표는 유지하되 가로 스크롤 없이 2열 그리드로 */
.kf-price{width:100%;border-collapse:collapse;border:1px solid #e3e9f2;border-radius:12px;overflow:hidden;font-size:13px;}
.kf-price thead th{background:#f5f8fc;padding:10px 14px;font-size:11.5px;font-weight:800;color:var(--kf-sub);border-bottom:1px solid #e3e9f2;text-align:left;}
.kf-price thead th:nth-child(2),.kf-price thead th:nth-child(4){text-align:right;}
.kf-price td{padding:10px 14px;border-top:1px solid #eef2f7;color:var(--kf-sub);}
.kf-price td:nth-child(3){border-left:1px solid #e3e9f2;}
.kf-price td.r{text-align:right;font-weight:700;color:var(--kf-ink);font-variant-numeric:tabular-nums;}
/* 0.5~2kg = 최저가 구간 강조 */
.kf-price tr.is-cheap td{background:var(--kf-soft);color:var(--kf-ink);font-weight:700;}
.kf-price tr.is-cheap td.r{color:var(--kf-blue);font-weight:800;}
/* 부가 요금 — 표 대신 목록 (모바일 가로 스크롤 제거) */
.kf-fees{display:flex;flex-direction:column;width:100%;}
.kf-fees__item{display:flex;gap:12px;align-items:flex-start;padding:12px 2px;border-top:1px solid #eef2f7;}
.kf-fees__item:first-child{border-top:none;}
.kf-fees__l{flex:1;min-width:0;}
.kf-fees__l b{display:block;font-size:13.5px;font-weight:800;color:var(--kf-ink);}
.kf-fees__l span{display:block;margin-top:3px;font-size:12.5px;color:var(--kf-sub);line-height:1.6;}
.kf-fees__f{flex:none;font-size:13px;font-weight:800;color:var(--kf-blue);white-space:nowrap;font-variant-numeric:tabular-nums;}
.kf-fees__f.is-free{color:var(--kf-ok-d);}
.kf-fees__f.is-warn{color:var(--kf-warn);}
/* ── 도움말 FAQ ─────────────────────────────────────────── */
.kf-faqtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.kf-faqtabs button{border:1.5px solid #e2eaf4;background:#fff;color:#3c4f68;border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;}
.kf-faqtabs button:hover{border-color:#b9cde8;}
.kf-faqtabs button.is-on{background:var(--kf-blue);border-color:var(--kf-blue);color:#fff;}
.kf-faq{display:flex;flex-direction:column;}
.kf-faq__item{border-top:1px solid #eef2f7;}
.kf-faq__item:first-child{border-top:none;}
.kf-faq__q{width:100%;display:flex;align-items:center;gap:11px;padding:15px 2px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;}
.kf-faq__q i{flex:none;width:20px;height:20px;border-radius:6px;background:#eef4ff;color:var(--kf-blue);font-size:11px;font-weight:800;font-style:normal;display:flex;align-items:center;justify-content:center;}
.kf-faq__q span{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--kf-ink);line-height:1.5;}
.kf-faq__q svg{flex:none;transition:transform .18s ease;}
.kf-faq__item.is-open .kf-faq__q svg{transform:rotate(180deg);}
.kf-faq__a{padding:0 2px 16px 31px;font-size:13px;color:var(--kf-sub);line-height:1.75;}
.kf-faq__a b{color:var(--kf-ink);font-weight:700;}
/* ── 1:1 문의 폼 ────────────────────────────────────────── */
.kf-form{display:flex;flex-direction:column;gap:12px;}
.kf-form__dual{display:grid;grid-template-columns:1fr;gap:12px;}
.kf-field__hd{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;}
.kf-field__hd b{font-size:12px;font-weight:800;color:var(--kf-ink);}
.kf-req,.kf-optn{font-size:10px;font-weight:800;border-radius:5px;padding:2px 6px;white-space:nowrap;}
.kf-req{color:var(--kf-blue);background:#eef4ff;}
.kf-optn{color:#7185a0;background:#f2f5f9;font-weight:700;}
.kf-input{width:100%;min-height:50px;padding:0 14px;border:1.5px solid var(--kf-field);border-radius:11px;font-size:16px;font-family:inherit;color:var(--kf-ink);background:var(--kf-field-bg);outline:none;}
.kf-input:focus{border-color:var(--kf-blue);}
textarea.kf-input{min-height:96px;padding:13px 14px;line-height:1.6;resize:vertical;}
.kf-submit{width:100%;border:none;background:var(--kf-blue);color:#fff;border-radius:12px;min-height:54px;font-size:15.5px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-submit:hover{background:var(--kf-blue-d);}
/* ══ 데스크탑 (761px~) ═════════════════════════════════════ */
@media (min-width:761px){
.kf-hero{padding:30px 32px 26px;}
.kf-hero h1{font-size:34px;}
.kf-hero p{font-size:14.5px;}
.kf-page__body{padding:24px 32px 30px;}
.kf-panel{padding:22px 24px;}
.kf-panel__hd b{font-size:17px;}
.kf-ctr,.kf-tabs{grid-template-columns:repeat(6,1fr);}
.kf-adt__boxl b{font-size:28px;}
.kf-adt__lb{width:96px;}
.kf-form__dual{grid-template-columns:1fr 1fr;}
}
/* 배대지 주소: 복사/로그인 버튼이 로 렌더될 때 테마 a{color} 가 이겨서 파랑 위 파랑이 된다 */
a.kf-adt__cp, a.kf-adt__all{ color:#fff !important; text-decoration:none; }
a.kf-adt__cp:hover, a.kf-adt__all:hover{ color:#fff !important; }
/* 요금표 4열이 좁은 화면에서 잘려 오른쪽 요금이 사라지던 문제 — 여백/글자 축소로 수용 */
@media (max-width:520px){
.kf-price{ font-size:12px; table-layout:fixed; }
.kf-price thead th{ padding:8px 6px; font-size:10.5px; }
.kf-price td{ padding:8px 6px; }
.kf-price td:nth-child(1),.kf-price td:nth-child(3){ width:26%; }
.kf-price td:nth-child(2),.kf-price td:nth-child(4){ width:24%; }
}
/* ══════ 디자이너 납품: 내 배송 (에셋3/my-account.css) ══════ */
/* ══════════════════════════════════════════════════════════════
김빠른 · 「내 배송」(/my-account/) — 업그레이드 CSS (2026-08)
· 모바일 퍼스트 · 기존 클래스명·id 유지 · 신규는 [NEW]
· 삭제된 블록: .kf-coupon / .kf-counters / .kf-mypanel__grade
══════════════════════════════════════════════════════════════ */
:root{
--kf-blue:#0055b1; --kf-blue-d:#003c7d; --kf-blue-g:#00306a; --kf-sky:#8ec5ff;
--kf-ink:#16263d; --kf-sub:#5b7290; --kf-mute:#8a9cb4;
--kf-line:#dbe7f7; --kf-field:#d8e2ef; --kf-hair:#e9eef5;
--kf-soft:#f5f9ff; --kf-field-bg:#f8fafd; --kf-page:#eef2f7;
--kf-ok:#1f9d55; --kf-ok-d:#0f6b41; --kf-warn:#a33522;
}
.kf-shipments{position:relative;left:50%;transform:translateX(-50%);width:100vw;text-align:left;}
.kf-shipments *{box-sizing:border-box;}
.kf-shipments [hidden]{display:none !important;}
/* ── 회원 패널 (블루 히어로) ─────────────────────────────── */
.kf-mypanel{background:linear-gradient(120deg,#0055b1 0%,#00306a 100%);padding:20px 16px 22px;color:#fff;}
.kf-mypanel__in{max-width:1100px;margin:0 auto;position:relative;}
.kf-mypanel__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:4.5px;}
.kf-mypanel__l{min-width:0;padding-right:54px;} /* 알림 버튼 자리 — 목업은 설명이 두 줄 */
.kf-mypanel__hello{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.3;}
.kf-mypanel__hello b{font-weight:850;}
.kf-mypanel__note{margin:5px 0 0;font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.45;}
/* [NEW] 알림 버튼 — 목업 03-my: 브레드크럼 우측 상단 고정 */
.kf-notibtn{position:absolute;top:0;right:0;flex:none;width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.13);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kf-notibtn:hover{background:rgba(255,255,255,.2);}
.kf-notibtn__dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--kf-sky);border:1.5px solid #0a4a94;}
/* 사서함번호 — 이 화면에서 가장 중요한 정보 */
.kf-mypanel__box{margin-top:11.5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.kf-mypanel__boxl{flex:1;min-width:0;}
.kf-mypanel__boxl span{display:block;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.72);letter-spacing:.04em;}
/* #kfMyBox 는 파란 마이패널과 배대지 주소 페이지(밝은 배경) 두 곳에 쓰인다.
흰 글자를 ID 로 전역 지정해 배대지 주소 페이지에서 사서함 번호가 안 보였다 (2026-08-10) → 패널 안으로 한정 */
.kf-mypanel__boxl b,.kf-mypanel #kfMyBox{display:block;margin-top:3px;font-size:26px;font-weight:850;color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1.1;}
.kf-adt__cp{flex:none;display:inline-flex;align-items:center;gap:6px;border:none;background:#fff;color:var(--kf-blue);border-radius:10px;padding:11px 16px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-adt__cp:hover{background:#eaf2ff;}
.kf-mypanel__r{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.kf-qbtn{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;border-radius:11px;min-height:46px;font-size:13px;font-weight:700;text-decoration:none;}
.kf-qbtn:hover{background:rgba(255,255,255,.18);color:#fff;}
.kf-qbtn--main{border:none;background:#fff;color:var(--kf-blue);font-size:13.5px;font-weight:800;}
.kf-qbtn--main:hover{background:#eaf2ff;color:var(--kf-blue-d);}
/* ── 본문 ───────────────────────────────────────────────── */
.kf-shipments__body{background:var(--kf-page);padding:16px 12px 22px;display:flex;flex-direction:column;gap:14px;max-width:1124px;margin:0 auto;}
.kf-panel{background:#fff;border-radius:16px;padding:16px 14px;box-shadow:0 2px 10px rgba(16,38,61,.06);}
.kf-panel__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
/* 목업 03-my: 내 배송의 섹션 제목엔 파란 밑줄이 없다 (옛 407행 규칙 무력화) */
.kf-shipments .kf-panel__hd{border-bottom:none;padding-bottom:0;}
.kf-shipments .kf-panel__hd b{color:var(--kf-ink);}
.kf-panel__hd b{font-size:14px;font-weight:800;color:var(--kf-ink);}
.kf-panel__hd span{font-size:12px;color:var(--kf-mute);}
.kf-panel__hd button{border:1px solid #dbe3ee;background:#fff;color:var(--kf-sub);border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;}
/* ── [NEW] 지금 하셔야 하는 일 — 이 화면의 주인공 ───────── */
.kf-todo{animation:kfUp .3s ease both;}
@keyframes kfUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kf-todo__hd{display:flex;align-items:center;gap:8px;margin-bottom:11px;}
.kf-todo__hd b{font-size:14px;font-weight:800;color:var(--kf-ink);}
.kf-todo__hd i{position:relative;width:8px;height:8px;flex:none;border-radius:50%;background:var(--kf-warn);}
.kf-todo__hd i::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--kf-warn);animation:kfPulse 1.8s ease-out infinite;}
@keyframes kfPulse{0%{opacity:1;transform:scale(1)}70%{opacity:.25;transform:scale(2.2)}100%{opacity:0;transform:scale(2.4)}}
.kf-todo__list{display:flex;flex-direction:column;gap:8px;}
.kf-todo__item{display:flex;align-items:center;gap:12px;border:1.5px solid var(--kf-line);background:var(--kf-soft);border-radius:12px;padding:13px 14px;text-decoration:none;color:var(--kf-ink);text-align:left;font-family:inherit;cursor:pointer;}
.kf-todo__item:hover{border-color:var(--kf-blue);}
.kf-todo__item svg{flex:none;stroke:var(--kf-blue);}
.kf-todo__item > span{flex:1;min-width:0;}
.kf-todo__item b{display:block;font-size:13.5px;font-weight:800;color:var(--kf-ink);}
.kf-todo__item em{display:block;margin-top:2px;font-size:12px;font-style:normal;color:var(--kf-sub);line-height:1.5;}
.kf-todo__item--urgent{border-color:#f0cdc5;background:#fdf3f0;}
.kf-todo__item--urgent:hover{border-color:var(--kf-warn);}
.kf-todo__item--urgent svg{stroke:var(--kf-warn);}
.kf-todo__item--urgent b{color:#8c3a26;}
.kf-todo__item--urgent em{color:#a3604e;}
/* ── 파이프라인 — 가로 스크롤 제거 (4열 × 2줄) ──────────── */
.kf-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.kf-pipe__arrow{display:none;}
.kf-pipe__step{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px solid #e3e9f2;background:#fff;border-radius:12px;padding:10px 4px;cursor:pointer;font-family:inherit;}
.kf-pipe__step:hover{border-color:#b9cde8;}
.kf-pipe__step.is-on{border-color:var(--kf-blue);background:#eef4ff;}
.kf-pipe__step.is-zero{border-color:#eef2f7;background:#fafbfd;cursor:default;}
.kf-pipe__n{font-size:18px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1;color:var(--kf-ink);}
.kf-pipe__lb{font-size:11px;font-weight:700;color:#3c4f68;white-space:nowrap;}
.kf-pipe__step.is-zero .kf-pipe__n{color:#c5cfdb;}
.kf-pipe__step.is-zero .kf-pipe__lb{color:#a8b4c4;}
/* 상태색 — 기존 시스템 유지 */
.kf-pipe__step[data-filter-status="pending_arrival"] .kf-pipe__n{color:#5b7290;}
.kf-pipe__step[data-filter-status="arrived"] .kf-pipe__n{color:var(--kf-blue);}
.kf-pipe__step[data-filter-status="inspecting"] .kf-pipe__n{color:#b7791f;}
.kf-pipe__step[data-filter-status="payment_due"] .kf-pipe__n{color:var(--kf-warn);}
.kf-pipe__step[data-filter-status="paid"] .kf-pipe__n,
.kf-pipe__step[data-filter-status="delivered"] .kf-pipe__n{color:var(--kf-ok);}
.kf-pipe__step[data-filter-status="shipped"] .kf-pipe__n{color:#0e7c7c;}
.kf-pipe__step.is-zero .kf-pipe__n{color:#c5cfdb !important;}
/* ── 검색 · 국가 필터 ───────────────────────────────────── */
.kf-search{position:relative;display:flex;align-items:center;margin-bottom:9px;}
.kf-search svg{position:absolute;left:13px;pointer-events:none;}
.kf-search input{width:100%;min-height:45px;padding:0 14px 0 38px;border:1.5px solid var(--kf-field);border-radius:12px;font-size:16px;font-family:inherit;color:var(--kf-ink);background:var(--kf-field-bg);outline:none;}
.kf-search input:focus{border-color:var(--kf-blue);}
.kf-flt{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;overflow:visible;}
.kf-flt__chip{display:inline-flex;align-items:center;gap:5px;border:1.5px solid #e2eaf4;background:#fff;color:#3c4f68;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;line-height:1.35;cursor:pointer;font-family:inherit;}
.kf-flt__chip:hover{border-color:#b9cde8;}
.kf-flt__chip.is-on{background:var(--kf-blue);border-color:var(--kf-blue);color:#fff;}
/* ── [NEW] 배송 카드 (표 대체) ──────────────────────────── */
#kfShipTbl{display:flex;flex-direction:column;gap:9px;}
.kf-card{border:1.5px solid #e3e9f2;border-radius:13px;overflow:hidden;background:#fff;}
.kf-card__hd{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f5f8fc;padding:9px 13px;border-bottom:1px solid var(--kf-hair);}
.kf-card__hd > span:first-child{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.kf-card__id{font-size:12px;font-weight:800;color:var(--kf-blue);font-variant-numeric:tabular-nums;}
.kf-card__date{font-size:11.5px;font-style:normal;color:var(--kf-mute);}
.kf-card__chip{flex:none;font-size:11px;font-weight:800;border-radius:999px;padding:4px 10px;white-space:nowrap;background:#f2f5f9;color:var(--kf-sub);}
.kf-card[data-status="arrived"] .kf-card__chip{background:#eef4ff;color:var(--kf-blue);}
.kf-card[data-status="inspecting"] .kf-card__chip{background:#fdf6e7;color:#8a5a00;}
.kf-card[data-status="payment_due"] .kf-card__chip{background:#fdf3f0;color:var(--kf-warn);}
.kf-card[data-status="paid"] .kf-card__chip,
.kf-card[data-status="delivered"] .kf-card__chip{background:#eafaf3;color:var(--kf-ok-d);}
.kf-card[data-status="shipped"] .kf-card__chip{background:#e7f6f5;color:#0e7c7c;}
.kf-card__bd{display:flex;gap:12px;align-items:center;padding:12px 13px;}
.kf-card__thumb{width:48px;height:48px;flex:none;border-radius:10px;background:#e9eff7 center/cover no-repeat;display:flex;align-items:center;justify-content:center;}
.kf-card__info{flex:1;min-width:0;}
.kf-card__name{display:block;font-size:14px;font-weight:700;color:var(--kf-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kf-card__meta{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:11.5px;color:var(--kf-sub);}
.kf-card__flag{border-radius:2px;display:block;flex:none;}
.kf-card__trk{font-style:normal;}
.kf-card__edit{flex:none;border:1.5px solid #cfe0f7;background:#eef4ff;color:var(--kf-blue);border-radius:9px;padding:9px 13px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-card__edit:hover{background:#dde9f9;}
.kf-card__lock{flex:none;display:none;align-items:center;gap:5px;font-size:11.5px;color:var(--kf-mute);white-space:nowrap;}
/* 입고 전에만 [수정] — 그 외에는 잠금 표시 */
/* 회의 2026-08-08-4차: 입고 후에도 [수취인 정보수정] 버튼을 보여야 하므로 상태별 숨김 제거
(버튼 노출 여부는 shipping.php 카드 템플릿이 상태로 분기한다) */
.kf-card:not([data-status="pending_arrival"]) .kf-card__lock{display:inline-flex;}
/* ── [NEW] 빈 상태 ──────────────────────────────────────── */
.kf-empty{background:#fff;border-radius:16px;padding:40px 20px 32px;box-shadow:0 2px 10px rgba(16,38,61,.06);text-align:center;animation:kfUp .3s ease both;}
.kf-empty__ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:20px;background:#eef4ff;}
.kf-empty > b{display:block;margin-top:16px;font-size:17px;font-weight:800;color:var(--kf-ink);letter-spacing:-.02em;}
.kf-empty > p{margin:8px auto 0;max-width:300px;font-size:13px;color:var(--kf-sub);line-height:1.7;}
.kf-empty__box{color:var(--kf-blue);font-weight:800;}
.kf-empty__btns{display:flex;flex-direction:column;gap:8px;margin:20px auto 0;max-width:320px;}
.kf-empty__btns .kf-qbtn{border:1.5px solid var(--kf-field);background:#fff;color:#3c4f68;min-height:50px;font-size:14px;font-weight:800;}
.kf-empty__btns .kf-qbtn:hover{border-color:var(--kf-blue);background:#f5f9ff;color:var(--kf-blue);}
.kf-empty__btns .kf-qbtn--main{border:none;background:var(--kf-blue);color:#fff;min-height:52px;font-size:15px;}
.kf-empty__btns .kf-qbtn--main:hover{background:var(--kf-blue-d);color:#fff;}
/* ── 모달 (수정 · 알림 공용) ────────────────────────────── */
.kf-emodal{position:fixed;inset:0;z-index:9999;background:rgba(17,24,39,.55);display:flex;align-items:flex-end;justify-content:center;padding:14px;}
.kf-emodal__bd{background:#fff;border-radius:18px;width:min(480px,100%);padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.3);max-height:88vh;overflow-y:auto;}
.kf-emodal__bd--noti{width:min(440px,100%);max-height:80vh;}
.kf-emodal__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.kf-emodal__hd b{font-size:16.5px;font-weight:800;color:var(--kf-blue);}
.kf-emodal__hd b span{font-size:13px;color:var(--kf-mute);font-weight:700;}
.kf-emodal__bd--noti .kf-emodal__hd b{color:var(--kf-ink);}
.kf-emodal__x{border:none;background:none;font-size:18px;color:var(--kf-mute);cursor:pointer;padding:4px;line-height:1;}
/* 수정 모달 항목 — 목업 03-my/03: 파란 번호 배지 + 미입력 트래킹은 주황 강조 */
.kf-edit-item{margin-top:12px;}
.kf-edit-item__nm{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--kf-ink);}
.kf-edit-item__no{flex:none;width:20px;height:20px;border-radius:6px;background:#e7f0fb;color:var(--kf-blue);font-style:normal;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.kf-edit-item input{width:100%;margin-top:8px;min-height:46px;padding:0 14px;border:1.5px solid var(--kf-field);border-radius:12px;font-size:16px;font-family:inherit;color:var(--kf-ink);background:var(--kf-field-bg);outline:none;}
.kf-edit-item input:focus{border-color:var(--kf-blue);}
.kf-edit-item input.is-empty{background:#fdf0ea;border-color:#f0cdbb;}
.kf-edit-item input.is-empty::placeholder{color:#b3826d;}
.kf-emodal .kf-hint{margin:0 0 14px;font-size:12.5px;color:var(--kf-sub);line-height:1.6;}
#kfEditItems{display:flex;flex-direction:column;gap:10px;}
#kfEditItems > div > div{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
#kfEditItems .kf-eno{width:20px;height:20px;flex:none;border-radius:6px;background:#eef4ff;color:var(--kf-blue);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
#kfEditItems .kf-ename{font-size:12.5px;font-weight:700;color:var(--kf-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#kfEditItems input{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--kf-field);border-radius:11px;font-size:16px;font-family:inherit;color:var(--kf-ink);background:var(--kf-field-bg);outline:none;}
#kfEditItems input:focus{border-color:var(--kf-blue);}
#kfEditItems input.is-missing{border-color:#f0cdc5;background:#fdf3f0;}
.kf-emodal__lb{margin-top:14px;font-size:12px;font-weight:800;color:var(--kf-ink);margin-bottom:6px;}
#kfEditMemo{width:100%;padding:13px 14px;border:1.5px solid var(--kf-field);border-radius:11px;font-size:16px;font-family:inherit;color:var(--kf-ink);background:var(--kf-field-bg);outline:none;resize:vertical;line-height:1.6;}
.kf-emodal__msg{min-height:18px;font-size:13px;font-weight:700;color:var(--kf-warn);margin:8px 0 0;}
.kf-emodal__ft{display:flex;gap:10px;margin-top:12px;}
.kf-emodal__ft button{flex:1;border:1.5px solid var(--kf-field);background:#fff;color:#3c4f68;border-radius:12px;min-height:50px;font-size:14.5px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-emodal__ft button.is-primary{border:none;background:var(--kf-blue);color:#fff;}
.kf-emodal__ft button.is-primary:hover{background:var(--kf-blue-d);}
/* [NEW] 알림 목록 */
.kf-noti__list{display:flex;flex-direction:column;margin-top:8px;}
.kf-noti__item{display:flex;gap:11px;align-items:flex-start;padding:5px 2px 6px;border-bottom:1px solid #eef2f7;}
.kf-noti__item:last-child{border-bottom:none;}
.kf-noti__item i{width:8px;height:8px;flex:none;margin-top:6px;border-radius:50%;background:var(--kf-blue);}
.kf-noti__item.is-read i{background:#dfe6ef;}
.kf-noti__item > span{flex:1;min-width:0;}
.kf-noti__item b{display:block;font-size:13.5px;font-weight:700;color:var(--kf-ink);}
.kf-noti__item em{display:block;margin-top:3px;font-size:12.5px;font-style:normal;color:var(--kf-sub);line-height:1.55;}
.kf-noti__item small{display:block;margin-top:4px;font-size:11px;color:var(--kf-mute);}
.kf-noti__item.is-read b{color:var(--kf-sub);}
.kf-noti__item.is-read em{color:var(--kf-mute);}
/* ══ 데스크탑 (761px~) ═════════════════════════════════════ */
@media (min-width:761px){
.kf-mypanel{padding:30px 32px;}
.kf-mypanel__hello{font-size:22px;}
.kf-mypanel__boxl b,.kf-mypanel #kfMyBox{font-size:30px;}
.kf-mypanel__r{grid-template-columns:200px 220px;}
.kf-shipments__body{padding:24px 32px 30px;}
.kf-panel{padding:22px 24px;}
.kf-pipe{grid-template-columns:repeat(7,1fr);}
.kf-empty{padding:56px 32px 48px;}
.kf-emodal{align-items:center;padding:40px;}
}
@media (prefers-reduced-motion:reduce){
.kf-todo,.kf-empty{animation:none;}
.kf-todo__hd i::after{animation:none;}
}
/* 내 배송: .kf-qbtn 이 라 테마 a{color:#0055b1} 가 디자이너 색을 덮어 파랑 위 파랑이 된다.
디자이너 의도(패널=흰글씨 / 메인=흰배경 파랑글씨 / 빈상태=반대)를 앵커에 그대로 고정. */
a.kf-qbtn{ color:#fff !important; }
a.kf-qbtn:hover{ color:#fff !important; }
a.kf-qbtn--main{ color:#0055b1 !important; }
a.kf-qbtn--main:hover{ color:#003c7d !important; }
.kf-empty__btns a.kf-qbtn{ color:#3c4f68 !important; }
.kf-empty__btns a.kf-qbtn:hover{ color:#0055b1 !important; }
.kf-empty__btns a.kf-qbtn--main,
.kf-empty__btns a.kf-qbtn--main:hover{ color:#fff !important; }
/* ══════ 디자이너 납품: 배송대행 신청서 (에셋4/apply.css) ══════ */
/* ══════════════════════════════════════════════════════════════
김빠른 · 배송대행 신청서(/apply-shipping/) — 업그레이드 CSS (2026-08)
· 모바일 퍼스트: 기본 = 390px, @media(min-width:761px) = 데스크탑
· 기존 클래스명·id 100% 유지 · 신규는 [NEW] 주석
· 요금조회 히어로와 같은 디자인 언어 (블루 그라데이션 + 흰 카드 + 입력 그룹)
══════════════════════════════════════════════════════════════ */
:root{
--kf-blue:#0055b1; --kf-blue-d:#003c7d; --kf-blue-g:#00306a; --kf-sky:#8ec5ff;
--kf-ink:#16263d; --kf-sub:#5b7290; --kf-mute:#8a9cb4;
--kf-line:#dbe7f7; --kf-field:#d8e2ef; --kf-hair:#e4ebf4;
--kf-soft:#f5f9ff; --kf-field-bg:#f8fafd; --kf-page:#eef2f7;
--kf-ok:#1f9d55; --kf-ok-d:#0f6b41; --kf-warn:#a33522;
}
.kf-apply{position:relative;left:50%;transform:translateX(-50%);width:100vw;margin:0 0 0;text-align:left;padding-bottom:0;}
.kf-apply *{box-sizing:border-box;}
.kf-apply [hidden]{display:none !important;}
/* ── [NEW] 서브페이지 히어로 + 진행 스텝 ─────────────────── */
.kf-apply__hero{background:linear-gradient(120deg,#0055b1 0%,#00306a 100%);padding:18px 16px 20px;color:#fff;}
.kf-apply__heroin{max-width:1100px;margin:0 auto;}
.kf-apply__crumb{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:9px;}
.kf-apply__crumb b{color:#fff;font-weight:600;}
.kf-apply__hero h1{margin:0;font-size:24px;font-weight:850;letter-spacing:-.03em;color:#fff;line-height:1.2;}
.kf-apply__hero p{margin:8px 0 0;font-size:12.5px;color:rgba(255,255,255,.86);line-height:1.6;}
/* (옛 스텝 도트 CSS 삭제 — 에셋6 2차에서 진행바로 대체) */
.kf-step.is-done .kf-step__bar{background:rgba(255,255,255,.85);}
/* ── 본문 ───────────────────────────────────────────────── */
.kf-apply__body{background:var(--kf-page);padding:16px 12px 20px;max-width:none;}
.kf-apply__in{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.kf-stepwrap{display:flex;flex-direction:column;gap:14px;animation:kfUp .3s ease both;}
@keyframes kfUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* [NEW] 흰 카드 패널 */
.kf-panel{background:#fff;border-radius:16px;padding:16px 14px;box-shadow:0 2px 10px rgba(16,38,61,.06);}
.kf-sec__hd{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:2px solid var(--kf-blue);padding-bottom:9px;margin-bottom:12px;}
.kf-sec__hd h3{margin:0;font-size:15.5px;font-weight:800;color:var(--kf-blue);letter-spacing:-.02em;}
.kf-sec__hd h3 small{font-size:12px;color:var(--kf-mute);font-weight:500;margin-left:6px;}
.kf-hint{font-size:12.5px;color:var(--kf-sub);line-height:1.65;margin:10px 0 0;}
.kf-hint a{color:var(--kf-blue);}
.kf-autosave{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--kf-ok);font-weight:700;white-space:nowrap;}
/* [NEW] 필수 / 선택 배지 */
.kf-req,.kf-optn{font-size:10px;font-weight:800;border-radius:5px;padding:2px 6px;white-space:nowrap;}
.kf-req{color:var(--kf-blue);background:#eef4ff;}
.kf-optn{color:#7185a0;background:#f2f5f9;font-weight:700;}
/* [NEW] 필드 라벨 줄 */
.kf-field{display:block;}
.kf-field__hd{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;}
.kf-field__hd b{font-size:12px;font-weight:800;color:var(--kf-ink);}
.kf-field__hd em{font-style:normal;font-size:11px;color:var(--kf-mute);}
/* [NEW] 입력 그룹 (여러 입력을 한 덩어리로) */
.kf-group{border:1.5px solid var(--kf-field);border-radius:12px;background:var(--kf-field-bg);overflow:hidden;}
.kf-group:focus-within{border-color:var(--kf-blue);}
.kf-group > input,.kf-group > textarea{width:100%;min-height:48px;padding:0 14px;border:none;border-top:1.5px solid var(--kf-hair);background:transparent;font-size:16px;font-family:inherit;color:var(--kf-ink);outline:none;}
.kf-group > input:first-child{border-top:none;}
.kf-group__row{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 14px;border-top:1.5px solid var(--kf-hair);}
.kf-group__row:first-child{border-top:none;}
.kf-group__row input{flex:1;min-width:0;min-height:40px;padding:0;border:none;background:transparent;font-size:16px;font-family:inherit;color:var(--kf-ink);outline:none;}
/* 단독 입력 */
.kf-apply input[type=text],.kf-apply input[type=url],.kf-apply input[type=tel],
.kf-apply input[type=number],.kf-apply select,.kf-apply textarea{
font-family:inherit;color:var(--kf-ink);
}
.kf-input{width:100%;min-height:50px;padding:0 14px;border:1.5px solid var(--kf-field);border-radius:11px;font-size:16px;background:var(--kf-field-bg);outline:none;}
.kf-input:focus{border-color:var(--kf-blue);}
textarea.kf-input{min-height:88px;padding:13px 14px;line-height:1.6;resize:vertical;}
/* ── 1단계 게이트 ───────────────────────────────────────── */
/* ══ 에셋6 2차 04-gate — 스텝1 개편: 스크롤 게이트 제거, 핵심5+접기9, 동의만 ══ */
/* 히어로 진행바 (기존 스텝 도트 대체) */
.kf-apply__prog{margin-top:11px;height:6px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;}
.kf-apply__prog i{display:block;height:100%;border-radius:99px;background:#8ec5ff;transition:width .25s ease;}
.kf-apply__progmeta{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.kf-apply__progmeta span{font-size:12px;font-weight:700;color:rgba(255,255,255,.75);line-height:1.4;}
.kf-apply__progmeta b{font-size:12px;font-weight:800;color:#fff;line-height:1.4;}
#kfStep1 .kf-panel{padding:12px 16px 13px;}
/* 섹션 헤더: 파란 번호 배지 + 제목 (+우측 배지) */
.kf-g1__hd{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.kf-g2 .kf-g1__hd{margin-bottom:6px;}
.kf-g1__hd i{flex:none;width:20px;height:20px;border-radius:7px;background:var(--kf-blue);color:#fff;font-style:normal;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.kf-g1__hd b{flex:1;min-width:0;font-size:15px;font-weight:800;color:var(--kf-ink);letter-spacing:-.02em;line-height:1.35;}
.kf-g1__auto{flex:none;font-style:normal;font-size:11px;font-weight:800;color:#1c7a3d;background:#e6f4ea;border-radius:7px;padding:5px 9px;}
.kf-g2__all{flex:none;font-style:normal;font-size:12px;font-weight:700;color:var(--kf-blue);}
/* 배대지 드롭다운 (실제 select 를 투명 오버레이) */
.kf-gsel{position:relative;display:flex;align-items:center;gap:11px;border:1.5px solid var(--kf-blue);border-radius:12px;background:#fff;padding:14px 16px;}
.kf-gsel img{flex:none;border-radius:3px;border:1px solid rgba(0,0,0,.08);display:block;}
.kf-gsel b{flex:1;min-width:0;font-size:16px;font-weight:800;color:var(--kf-ink);letter-spacing:-.02em;line-height:1.3;}
.kf-gsel svg{flex:none;}
.kf-gsel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;}
/* 유의사항 핵심 5 카드 */
.kf-g2__top{display:flex;flex-direction:column;gap:8px;}
.kf-g2__card{display:flex;gap:7px;align-items:flex-start;background:#f6f8fb;border:1px solid #eaeff6;border-radius:12px;padding:13px 12px;}
.kf-g2__card i{flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;background:#e7f0fb;color:var(--kf-blue);font-style:normal;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.kf-g2__card p{margin:0;font-size:13.5px;color:#2c3f57;line-height:1.55;}
/* 나머지 9개 보기 / 접기 */
.kf-g2__more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;min-height:40px;border:1.5px dashed #b9cde8;border-radius:12px;background:#fbfdff;color:var(--kf-blue);font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;}
.kf-g2__rest{list-style:none;margin:6px 0 0;padding:0;}
.kf-g2__rest li{display:flex;gap:11px;align-items:flex-start;padding:13px 2px;border-bottom:1px solid #eef2f7;}
.kf-g2__rest li:last-child{border-bottom:none;padding-bottom:4px;}
.kf-g2__rest i{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#eef2f7;color:#8a9cb4;font-style:normal;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.kf-g2__rest p{margin:0;font-size:13.5px;color:#3c4f68;line-height:1.6;}
/* 미동의 경고 (D-6 — 버튼 눌렀을 때 표시) */
.kf-g2__warn{display:flex;gap:10px;align-items:flex-start;background:#fdf0ec;border:1px solid #f3cfc4;border-radius:13px;padding:14px 15px;color:#8c2a1a;animation:kfUp .25s ease both;}
.kf-g2__warn[hidden]{display:none;}
.kf-g2__warn svg{flex:none;margin-top:1px;}
.kf-g2__warn span{font-size:13px;line-height:1.55;color:#a04a36;}
.kf-g2__warn b{color:#8c2a1a;}
/* 동의 카드 */
.kf-g2__agree{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:11px 16px;font-size:15px;font-weight:800;color:var(--kf-ink);letter-spacing:-.02em;cursor:pointer;}
.kf-g2__agree input{width:26px;height:26px;flex:none;accent-color:var(--kf-blue);cursor:pointer;border-radius:8px;}
/* 미동의 CTA 시각 (클릭은 가능 — 눌러야 안내가 뜬다) */
.kf-apply__next.is-dim{background:#a9bdd6;}
/* 흔들림 — 시안(04-gate) 명시 동작이라 예외적으로 추가 (가이드 §16 시안 우선) */
@keyframes kfShakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.kf-shake{animation:kfShakeX .3s ease;}
/* ── AI 자동입력 툴바 — 이 화면의 구세주, 파랑 카드로 승격 ── */
.kf-auto{background:linear-gradient(120deg,#0055b1,#00448f);border-radius:16px;padding:16px 14px;color:#fff;box-shadow:0 6px 20px rgba(0,60,125,.22);border:none;margin:0;}
.kf-auto__l{display:block;}
.kf-auto__l b{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:4px;}
.kf-auto__l span{display:block;font-size:13px;color:rgba(255,255,255,.82);line-height:1.6;}
.kf-auto__l span b{display:inline;color:#fff;font-size:inherit;margin:0;}
.kf-auto__r{display:flex;flex-direction:column;gap:8px;margin:14px 0 0;}
.kf-auto__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;border-radius:11px;min-height:50px;padding:0 18px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}
.kf-auto__btn:hover{background:rgba(255,255,255,.18);}
.kf-auto__btn--main{background:#fff;border-color:#fff;color:var(--kf-blue);font-size:14.5px;font-weight:800;}
.kf-auto__btn--main:hover{background:#eaf2ff;}
.kf-auto__btn:disabled{opacity:.55;cursor:default;}
.kf-auto__msg{margin-top:11px;font-size:12.5px;font-weight:700;color:var(--kf-sky);min-height:16px;}
/* ── 상품 카드 ──────────────────────────────────────────── */
.kf-item{border:1.5px solid #e3e9f2;border-radius:14px;overflow:hidden;background:#fff;margin-bottom:12px;}
.kf-item--filled{animation:kfFlash 1.6s ease-out;}
@keyframes kfFlash{0%{background:#eef9f1}100%{background:#fff}}
.kf-item__no{display:flex;justify-content:space-between;align-items:center;background:#f5f8fc;padding:9px 12px;border-bottom:1px solid #e9eef5;}
.kf-item__no > span{display:inline-flex;align-items:center;gap:8px;}
.kf-item__num{width:22px;height:22px;border-radius:7px;background:var(--kf-blue);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.kf-item__title{font-size:12.5px;font-weight:700;color:#3c4f68;}
.kf-item__btns{display:flex;gap:6px;}
.kf-item__btns button{border:1px solid #d6deea;background:#fff;border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:700;color:var(--kf-sub);cursor:pointer;font-family:inherit;}
.kf-item__del{color:var(--kf-warn) !important;border-color:#f0cdc5 !important;}
.kf-item__body{display:flex;flex-direction:column;gap:14px;padding:14px;align-items:stretch;}
.kf-item__img{flex:none;width:130px;align-self:center;}
.kf-item__imgprev{position:relative;width:130px;height:130px;border:2px dashed #c2d3e8;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--kf-field-bg);background-size:cover;background-position:center;cursor:pointer;}
.kf-item__cam{display:flex;flex-direction:column;align-items:center;gap:5px;}
.kf-item__cam small{font-size:11px;font-weight:700;color:#9fb0c4;}
.kf-item__imgbtn{margin-top:8px;width:130px;border:1.5px solid var(--kf-blue);background:#eef4ff;color:var(--kf-blue);border-radius:10px;padding:9px 0;font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-item__imgnote{margin:6px 0 0;width:130px;font-size:10.5px;color:var(--kf-mute);line-height:1.45;text-align:center;}
.kf-item__imgdel{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(17,24,39,.62);color:#fff;font-size:15px;line-height:22px;text-align:center;cursor:pointer;padding:0;z-index:2;}
.kf-item__imgdel:hover{background:#dc2626;}
.kf-item__fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;}
.kf-item__name{display:flex;gap:8px;}
.kf-item__name input{flex:1;min-width:0;min-height:46px;padding:0 13px;border:1.5px solid var(--kf-field);border-radius:10px;font-size:15px;background:var(--kf-field-bg);outline:none;}
.kf-item__name input:focus{border-color:var(--kf-blue);}
.kf-aibtn{flex:none;display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--kf-blue);background:#eef4ff;color:var(--kf-blue);border-radius:10px;padding:0 13px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap;}
.kf-aibtn:hover{background:#dde9f9;}
.kf-aibtn:disabled{opacity:.55;cursor:default;}
.kf-item__trk{display:flex;align-items:center;gap:8px;padding:0 8px 0 13px;border-top:1.5px solid var(--kf-hair);}
.kf-item__trk input{flex:1;min-width:0;min-height:46px;padding:0;border:none;background:transparent;font-size:15px;outline:none;}
.kf-trk17{flex:none;display:inline-flex;align-items:center;padding:7px 12px;background:#eef4ff;color:var(--kf-blue);border-radius:8px;font-size:11.5px;font-weight:800;text-decoration:none;white-space:nowrap;}
.kf-item__row2{display:grid;grid-template-columns:1fr;gap:8px;}
.kf-item__row5{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.kf-item__row2 > *,.kf-item__row5 > *{min-width:0;}
.kf-item__row2 input,.kf-item__row2 select{width:100%;min-width:0;min-height:46px;padding:0 13px;border:1.5px solid var(--kf-field);border-radius:10px;font-size:15px;background:var(--kf-field-bg);outline:none;}
.kf-item__row5 input{width:100%;min-width:0;min-height:44px;padding:0 12px;border:1.5px solid #e3e9f2;border-radius:10px;font-size:14px;background:#fff;outline:none;}
.kf-item__row2 input:focus,.kf-item__row2 select:focus,.kf-item__row5 input:focus{border-color:var(--kf-blue);}
.kf-sel{position:relative;display:block;min-width:0;}
.kf-sel select{appearance:none;-webkit-appearance:none;padding-right:36px !important;}
.kf-sel svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;}
.kf-item__photo{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1.5px solid #e3e9f2;border-radius:10px;font-size:13px;color:#3c4f68;cursor:pointer;background:#fff;}
.kf-item__photo input{width:17px;height:17px;accent-color:var(--kf-blue);}
.kf-item__photo .kf-optn{margin-left:auto;}
.kf-urlstatus{display:block;font-size:12px;font-weight:700;margin-top:4px;}
.kf-additem{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed #b9cde8;background:var(--kf-soft);color:var(--kf-blue);border-radius:12px;min-height:50px;font-weight:800;font-size:14.5px;cursor:pointer;font-family:inherit;}
.kf-additem:hover{background:#eaf2ff;border-color:var(--kf-blue);}
/* ── 구매비용 보정 ──────────────────────────────────────── */
.kf-coach{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:13px 15px;margin-top:12px;font-size:13px;line-height:1.6;}
.kf-coach svg{flex:none;margin-top:1px;}
.kf-coach--ok{background:#eafaf3;border:1px solid #bfe5cd;color:var(--kf-ok-d);}
.kf-coach--ok b{color:var(--kf-ok-d);}
.kf-coach--warn{background:#fdf3f0;border:1px solid #f3d5cc;color:#8c3a26;}
.kf-coach--warn b{color:var(--kf-warn);}
/* ── 옵션 ───────────────────────────────────────────────── */
.kf-optbig{display:flex;gap:11px;align-items:flex-start;background:var(--kf-field-bg);border:1.5px solid #e3e9f2;border-radius:13px;padding:15px 16px;font-size:13.5px;line-height:1.65;color:#3c4f68;cursor:pointer;}
.kf-optbig:has(input:checked){background:#eafaf3;border-color:#b7e6cf;}
.kf-optbig input{margin-top:2px;width:20px;height:20px;accent-color:var(--kf-ok);flex:none;}
.kf-optbig b{color:var(--kf-ink);font-weight:800;}
.kf-optbig .kf-free{color:var(--kf-ok-d);font-weight:800;}
.kf-optbig a{color:var(--kf-blue);}
.kf-optgrid{display:grid;grid-template-columns:1fr;gap:18px;}
.kf-optcol h4{margin:0 0 9px;font-size:13px;font-weight:800;color:var(--kf-ink);}
.kf-optcol > div{display:flex;flex-direction:column;gap:7px;}
.kf-opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1.5px solid #e3e9f2;background:#fff;border-radius:10px;font-size:13.5px;color:#3c4f68;cursor:pointer;}
.kf-opt:has(input:checked){border-color:var(--kf-blue);background:#eef4ff;}
.kf-opt input{width:19px;height:19px;flex:none;accent-color:var(--kf-blue);}
.kf-opt span{flex:1;min-width:0;}
.kf-opt .kf-fee{flex:none;font-size:11.5px;font-weight:800;color:var(--kf-blue);white-space:nowrap;}
.kf-opt--free{border-color:#b7e6cf;background:#eafaf3;color:var(--kf-ok-d);cursor:default;}
.kf-opt--free .kf-fee{color:var(--kf-ok-d);}
.kf-opt--free input{accent-color:var(--kf-ok);}
/* ── 신청 요약 ──────────────────────────────────────────── */
.kf-sum{background:var(--kf-soft);border:1px solid var(--kf-line);border-radius:13px;padding:4px 15px 12px;}
.kf-sum__row{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;padding:9px 0;border-bottom:1px solid #e7eefa;}
.kf-sum__row:last-child{border-bottom:none;}
.kf-sum__row span{color:var(--kf-sub);}
.kf-sum__row b{color:var(--kf-ink);font-weight:700;font-variant-numeric:tabular-nums;}
/* ── [NEW] 하단 고정 액션 바 ────────────────────────────── */
/* 하단 고정 영역 = (예상 배송비 띠) + (액션 바). 띠가 없어도 바 모양은 그대로다. */
.kf-apply__foot{position:sticky;bottom:0;z-index:5;}
.kf-apply__quote{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid #e0e7f0;padding:10px 14px 0;}
.kf-apply__quote[hidden]{display:none;}
.kf-apply__quote > svg{flex:none;color:#0055b1;}
.kf-apply__quote > span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.kf-apply__quote em{font-style:normal;font-size:11.5px;font-weight:800;color:#16263d;letter-spacing:-.02em;}
.kf-apply__quote small{font-size:10.5px;color:#5b7290;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kf-apply__quote > b{flex:none;font-size:19px;font-weight:850;color:#0055b1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kf-apply__bar{position:sticky;bottom:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid #e0e7f0;padding:12px 14px 16px;display:flex;gap:10px;align-items:center;}
.kf-apply__foot .kf-apply__bar{position:static;}
.kf-apply__foot .kf-apply__quote:not([hidden]) + .kf-apply__bar{border-top:none;padding-top:10px;}
.kf-apply__prev{flex:none;border:1.5px solid var(--kf-field);background:#fff;color:#3c4f68;border-radius:12px;min-height:52px;padding:0 20px;font-size:14.5px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-apply__next{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:var(--kf-blue);color:#fff;border-radius:12px;min-height:52px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-apply__next:hover{background:var(--kf-blue-d);}
.kf-apply__next:disabled{background:#a8c2de;cursor:not-allowed;}
/* ── 이미지 등록 모달 ───────────────────────────────────── */
.kf-imgmodal{position:fixed;inset:0;z-index:9999;background:rgba(17,24,39,.55);display:flex;align-items:center;justify-content:center;padding:20px;}
.kf-imgmodal__bd{background:#fff;border-radius:16px;width:min(440px,100%);padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.3);}
.kf-imgmodal__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.kf-imgmodal__hd b{font-size:16.5px;font-weight:800;color:var(--kf-blue);}
.kf-imgmodal__x{border:none;background:none;font-size:18px;color:var(--kf-mute);cursor:pointer;line-height:1;padding:4px;}
.kf-imgmodal__note{margin:0 0 14px;font-size:12.5px;color:var(--kf-sub);line-height:1.6;}
.kf-imgmodal__note b{color:var(--kf-blue);}
.kf-imgmodal__modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.kf-imgmodal__modes label{display:flex;align-items:center;gap:8px;padding:12px;border:1.5px solid #e3e9f2;background:#fff;border-radius:11px;font-size:13.5px;font-weight:700;color:var(--kf-sub);cursor:pointer;}
.kf-imgmodal__modes label:has(input:checked){border-color:var(--kf-blue);background:#eef4ff;color:var(--kf-blue);}
.kf-imgmodal__modes input{width:17px;height:17px;accent-color:var(--kf-blue);}
.kf-imgmodal__pane input[type=url]{width:100%;min-height:48px;padding:0 13px;border:1.5px solid var(--kf-field);border-radius:11px;font-size:15px;background:var(--kf-field-bg);outline:none;}
.kf-imgmodal__drop{border:2px dashed #c2d3e8;border-radius:12px;background:var(--kf-field-bg);padding:22px;text-align:center;}
.kf-imgmodal__drop b{display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--kf-sub);}
.kf-imgmodal__drop small{display:block;margin-top:3px;font-size:11.5px;color:var(--kf-mute);}
.kf-imgmodal__msg{min-height:18px;font-size:13px;font-weight:700;color:var(--kf-warn);margin:10px 0 0;}
.kf-imgmodal__ft{display:flex;gap:10px;margin-top:16px;}
.kf-imgmodal__ft button{flex:1;border-radius:11px;min-height:48px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;}
/* ══ 데스크탑 (761px~) ═════════════════════════════════════ */
@media (min-width:761px){
.kf-apply__hero{padding:30px 32px 26px;}
.kf-apply__hero h1{font-size:34px;}
.kf-apply__hero p{font-size:14.5px;}
.kf-apply__steps{gap:10px;}
.kf-step{flex:1;}
.kf-step__dot{width:24px;height:24px;}
.kf-step__label{display:block;}
.kf-apply__body{padding:24px 32px 28px;}
.kf-panel{padding:22px 24px;}
.kf-sec__hd h3{font-size:17px;}
#kfGate h3{font-size:17px;}
.kf-gate__scroll{max-height:300px;}
.kf-gate__ctr{grid-template-columns:repeat(6,1fr);}
.kf-auto{padding:22px 24px;}
.kf-auto__r{flex-direction:row;}
.kf-auto__btn{flex:1;}
.kf-item__body{flex-direction:row;align-items:flex-start;gap:14px;}
.kf-item__img{align-self:flex-start;}
.kf-item__row2{grid-template-columns:1fr 1fr;}
.kf-item__row5{grid-template-columns:repeat(5,1fr);}
.kf-optgrid{grid-template-columns:1fr 1fr;}
.kf-apply__bar{padding:14px 32px;}
.kf-dual{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
}
@media (prefers-reduced-motion:reduce){
.kf-stepwrap,.kf-item--filled{animation:none;}
}
/* ══ [NEW] 상품 URL 자동 썸네일 ═══════════════════════════
.kf-item__imgprev.is-filled 로 전환 + background-image 지정 */
.kf-item__imgprev{position:relative}
.kf-item__auto{display:none}
.kf-item__imgprev.is-filled{border:1.5px solid #d8e2ef;border-style:solid;background:#e9eff7 center/cover no-repeat}
.kf-item__imgprev.is-filled .kf-item__cam{display:none}
.kf-item__imgprev.is-filled .kf-item__auto{position:absolute;left:6px;top:6px;display:inline-flex;align-items:center;gap:4px;background:rgba(0,49,106,.86);color:#fff;border-radius:6px;padding:4px 7px;font-size:9.5px;font-weight:800}
.kf-item__img.is-filled .kf-item__imgbtn{border-color:#d8e2ef;background:#fff;color:#3c4f68}
.kf-item__img.is-filled .kf-item__imgnote{color:#8a9cb4}
/* ══════ 디자이너 납품: 회원 등급 (에셋4/grade.css) ══════ */
/* ══════════════════════════════════════════════════════════════
김빠른 · 회원 등급 CSS — 모바일 퍼스트
══════════════════════════════════════════════════════════════ */
.kf-grade{max-width:660px;margin:0 auto;padding:14px;display:flex;flex-direction:column;gap:11px;font-family:Pretendard,-apple-system,sans-serif;color:var(--kf-ink,#16263d)}
.kf-grade *{box-sizing:border-box}
.kf-grade__me{background:linear-gradient(120deg,#0e2c52 0%,#123f74 100%);border-radius:16px;padding:15px;color:#fff;display:grid;grid-template-columns:1fr auto;gap:6px 12px}
.kf-grade__meL{display:flex;align-items:center;gap:9px;min-width:0}
.kf-grade__meL b{font-size:18px;font-weight:850;letter-spacing:-.02em;color:#fff}
.kf-grade__badge{display:inline-flex;align-items:center;color:#fff;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:800;letter-spacing:.09em;font-family:ui-monospace,monospace}
.kf-grade__badge[data-tier="BRONZE"]{background:#85552c} /* 흰 글씨 대비 6.2:1 */
.kf-grade__badge[data-tier="SILVER"]{background:#5f6a7a} /* 5.3:1 */
.kf-grade__badge[data-tier="GOLD"]{background:#8a6410} /* 5.4:1 */
.kf-grade__badge[data-tier="DIA"]{background:#1c6bb0} /* 5.4:1 */
.kf-grade__badge[data-tier="PLATINUM"]{background:#5b4bb5} /* 6.7:1 */
.kf-grade__meR{display:flex;align-items:baseline;gap:5px;justify-self:end}
.kf-grade__meR b{font-size:26px;font-weight:850;color:#8ec5ff;letter-spacing:-.03em;line-height:1}
.kf-grade__meR span{font-size:12.5px;color:rgba(255,255,255,.78);font-weight:700}
.kf-grade__prog{grid-column:1/-1;margin-top:10px}
.kf-grade__progtop{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:rgba(255,255,255,.82);margin-bottom:7px}
.kf-grade__progtop b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.kf-grade__progtop b.is-hi{color:#8ec5ff}
.kf-grade__bar{height:8px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.kf-grade__bar i{display:block;height:100%;background:linear-gradient(90deg,#4a9bf0,#8ec5ff);border-radius:999px}
.kf-grade__progft{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.kf-grade__card{background:#fff;border-radius:15px;padding:15px;box-shadow:0 2px 10px rgba(16,38,61,.06)}
.kf-grade__h{display:block;font-size:13px;font-weight:800;color:var(--kf-ink,#16263d);margin-bottom:11px}
.kf-grade__tiers{display:flex;flex-direction:column;gap:7px}
.kf-grade__tier{display:flex;align-items:center;gap:11px;border:1.5px solid #e9eef5;background:#fff;border-radius:12px;padding:11px 13px}
/* 등급표의 점은 텍스트가 아니므로 밝은 브랜드 색 유지 */
.kf-grade__tier i{width:9px;height:9px;flex:none;border-radius:50%;background:#c2d3e8}
.kf-grade__tier[data-tier="BRONZE"] i{background:#a97142}
.kf-grade__tier[data-tier="SILVER"] i{background:#8a94a3}
.kf-grade__tier[data-tier="GOLD"] i{background:#c8951a}
.kf-grade__tier[data-tier="DIA"] i{background:#2f8fe0}
.kf-grade__tier[data-tier="PLATINUM"] i{background:#5b4bb5}
.kf-grade__tier > span{flex:1;min-width:0}
.kf-grade__tier b{display:block;font-size:13.5px;font-weight:700;color:var(--kf-ink,#16263d)}
.kf-grade__tier small{display:block;margin-top:2px;font-size:11.5px;color:#8a9cb4}
.kf-grade__tier em{flex:none;font-style:normal;font-size:10.5px;font-weight:800;color:var(--kf-blue,#0055b1);background:#dbe9fb;border-radius:6px;padding:4px 8px}
.kf-grade__tier strong{flex:none;font-size:15px;font-weight:850;color:#5b7290;font-variant-numeric:tabular-nums}
.kf-grade__tier strong.is-zero{color:#c2d3e8}
.kf-grade__tier.is-mine{border-color:var(--kf-blue,#0055b1);background:#f2f7fd}
.kf-grade__tier.is-mine b{color:var(--kf-blue,#0055b1);font-weight:800}
.kf-grade__tier.is-mine strong{color:var(--kf-blue,#0055b1)}
.kf-grade__rule{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid #eef2f7}
.kf-grade__rule:first-child{border-top:none}
.kf-grade__rule i{width:19px;height:19px;flex:none;margin-top:1px;border-radius:6px;background:#eef4ff;color:var(--kf-blue,#0055b1);font-size:11px;font-weight:800;font-style:normal;display:flex;align-items:center;justify-content:center}
.kf-grade__rule span{flex:1;min-width:0;font-size:12.5px;color:#5b7290;line-height:1.6}
.kf-grade__savehd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kf-grade__savehd .kf-grade__h{margin:0}
.kf-grade__savetot{font-size:11.5px;font-weight:800;color:#0f6b41;background:#eafaf3;border-radius:6px;padding:4px 9px}
.kf-grade__saves{margin-top:11px}
.kf-grade__save{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid #eef2f7}
.kf-grade__save:first-child{border-top:none}
.kf-grade__save > span{flex:1;min-width:0}
.kf-grade__save b{display:block;font-size:13px;font-weight:700;color:var(--kf-ink,#16263d)}
.kf-grade__save small{display:block;margin-top:2px;font-size:11.5px;color:#8a9cb4}
.kf-grade__save strong{flex:none;font-size:13.5px;font-weight:800;color:#158550;font-variant-numeric:tabular-nums}
.kf-grade__note{margin:11px 0 0;font-size:11.5px;color:#8a9cb4;line-height:1.55}
.kf-grade__note b{color:#5b7290}
@media (min-width:761px){
.kf-grade{padding:20px 24px 30px}
.kf-grade__me{padding:18px 20px}
.kf-grade__meL b{font-size:21px}
.kf-grade__meR b{font-size:30px}
.kf-grade__card{padding:18px 20px}
}
/* ══════════════════════════════════════════════════════════════
푸터 — 모바일 목업(01-mobile-default.png) 실측 정합
배경 #0e1d31 · 좌우 여백 18px · 내부 좌표(푸터 top 기준):
로고 24~48 / 링크 1행 60~72 / 링크 2행 86~97
사업자정보 118~129 · 138~148
기존 main.css 의 밝은 회색 3컬럼 푸터를 전량 대체한다.
══════════════════════════════════════════════════════════════ */
.site-footer{
background:#0e1d31 !important;
color:rgba(255,255,255,.62);
padding:24px 18px 30px !important;
margin:0 !important;
border:none !important;
}
.site-footer > *{ max-width:1100px; margin-left:auto; margin-right:auto; }
.site-footer__logo{
display:inline-flex; align-items:center; gap:9px;
text-decoration:none; color:#fff !important;
font-size:17px; font-weight:900; letter-spacing:-.02em; line-height:1;
}
.site-footer__logo span{ color:#fff !important; }
.site-footer__mark{
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; flex:none; border-radius:9px;
background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
}
.site-footer__nav{
/* 목업 실측: 1행에 5개(배대지 주소~이용후기), 2행에 이용약관. gap 20px */
display:flex; flex-wrap:wrap; gap:14px 20px;
margin:12px 0 0;
}
.site-footer__nav a{
color:#fff !important; text-decoration:none;
font-size:12.5px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
}
.site-footer__nav a:hover{ color:#8ec5ff !important; text-decoration:underline; }
.site-footer__biz{
margin:0; padding:0;
font-size:11.5px; font-weight:500; line-height:1.6;
color:rgba(255,255,255,.42);
font-variant-numeric:tabular-nums;
}
.site-footer__biz:first-of-type{ margin-top:21px; }
.site-footer__biz a{ color:rgba(255,255,255,.42) !important; text-decoration:none; }
.site-footer__biz a:hover{ color:#8ec5ff !important; text-decoration:underline; }
/* 옛 3컬럼 푸터 잔재 제거 */
.site-footer__top,.site-footer__cols,.site-footer__col,.site-footer__brand,
.site-footer__tagline,.site-footer__bottom,.site-footer__legal{ display:none !important; }
@media (min-width:761px){
/* 에셋6 PC 시안(01-home/10) 실측: 푸터 총 170px —
로고밴드 12(≈16px) · 링크밴드 11(≈13px) · 사업자 8(≈11px) · 간격 20/21 · 하단여백 42 */
.site-footer{ padding:28px 24px 40px !important; }
.site-footer__logo{ font-size:16px; }
.site-footer__mark{ width:24px; height:24px; }
/* WP blockGap(24px)이 이겨서 간격이 시안보다 벌어진다 — !important 로 고정 */
.site-footer__nav{ gap:10px 24px; margin-top:-2px !important; }
.site-footer__nav a{ font-size:13px; }
.site-footer__biz{ font-size:11.5px; }
.site-footer__biz:first-of-type{ margin-top:15px !important; }
}
/* ══════ 디자이너 납품: 배송비 결제 (에셋4/pay.css) ══════ */
/* ══════════════════════════════════════════════════════════════
김빠른 · 배송비 결제 화면 CSS — 모바일 퍼스트
══════════════════════════════════════════════════════════════ */
.kf-pay{position:fixed;inset:0;z-index:80;background:#eef2f7;display:flex;flex-direction:column;font-family:Pretendard,-apple-system,sans-serif;color:var(--kf-ink,#16263d);padding:0 !important /* main.css section{padding} 무력화 */}
.kf-pay *{box-sizing:border-box}
.kf-pay [hidden]{display:none !important}
.kf-pay__bar{flex:none;background:var(--kf-blue,#0055b1);padding:12px 14px;display:flex;align-items:center;gap:10px}
.kf-pay__bar b{flex:1;min-width:0;font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.02em}
.kf-pay__back{flex:none;width:34px;height:34px;border:none;background:rgba(255,255,255,.16);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kf-pay__oid{flex:none;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.kf-pay__body{flex:1;min-width:0;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch}
.kf-pay__in{max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:11px}
.kf-pay__in > div{display:flex;flex-direction:column;gap:11px}
.kf-pay__ok{display:flex;gap:11px;align-items:flex-start;background:#eafaf3;border:1.5px solid #b7e6cf;border-radius:14px;padding:11.5px 15px 16px}
.kf-pay__ok svg{flex:none;margin-top:1px}
.kf-pay__ok b{display:block;font-size:13.5px;font-weight:800;color:#0f6b41;line-height:1.3}
.kf-pay__ok small{display:block;margin-top:2.5px;font-size:12.5px;color:#3f8a68;line-height:1.5}
.kf-pay__ok small b{display:inline;font-weight:800;color:#0f6b41}
.kf-pay__card{background:#fff;border-radius:15px;padding:13px 15px 15px;box-shadow:0 2px 10px rgba(16,38,61,.06)}
.kf-pay__card--sum{padding:6px 15px 15px}
.kf-pay__card--rcpt{padding:6px 15px 13px}
.kf-pay__h{display:block;font-size:13px;font-weight:800;color:var(--kf-ink,#16263d);margin-bottom:11px;line-height:1.4}
.kf-pay__card--sum .kf-pay__h{padding:11px 0 3px;margin:0}
.kf-pay__items{display:flex;flex-direction:column;gap:8px}
.kf-pay__item{display:flex;gap:11px;align-items:center;background:#f8fafd;border:1px solid #e9eef5;border-radius:12px;padding:10px 12px}
.kf-pay__thumb{width:44px;height:44px;flex:none;border-radius:10px;background:#e9eff7 center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.kf-pay__iinfo{flex:1;min-width:0}
.kf-pay__iinfo b{display:block;font-size:13.5px;font-weight:700;color:var(--kf-ink,#16263d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.kf-pay__iinfo small{display:block;margin-top:3px;font-size:11.5px;color:#5b7290;line-height:1.4}
.kf-pay__kg{display:flex;align-items:stretch;gap:9px}
.kf-pay__kg > svg{flex:none;align-self:center}
.kf-pay__kgbox{flex:1;min-width:0;background:#f8fafd;border:1px solid #e9eef5;border-radius:12px;padding:11px 12px}
.kf-pay__kgbox small{display:block;font-size:11px;font-weight:700;color:#8a9cb4;line-height:1.3}
.kf-pay__kgbox b{display:block;margin-top:2px;font-size:17px;font-weight:800;color:#5b7290;line-height:1.3;font-variant-numeric:tabular-nums}
.kf-pay__kgbox.is-real{background:#f2f7fd;border:1.5px solid #cfe0f7}
.kf-pay__kgbox.is-real small{color:var(--kf-blue,#0055b1)}
.kf-pay__kgbox.is-real b{color:var(--kf-blue,#0055b1);font-weight:850}
.kf-pay__kgnote{margin:10px 0 0;font-size:12px;color:#5b7290;line-height:1.6}
.kf-pay__line{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 0;border-top:1px solid #eef2f7}
.kf-pay__line:first-child{border-top:none}
.kf-pay__line > span{min-width:0}
.kf-pay__line > span > b{display:block;font-size:13.5px;font-weight:600;color:#5b7290;line-height:1.35}
.kf-pay__line > span > small{display:block;margin-top:3px;font-size:11.5px;color:#8a9cb4;line-height:1.4}
.kf-pay__line > b{flex:none;font-size:13.5px;font-weight:600;color:var(--kf-ink,#16263d);font-variant-numeric:tabular-nums;line-height:1.35}
.kf-pay__line > b.is-neg{color:#158550}
.kf-pay__total{border-top:2px solid #cfe0f7;margin-top:5px;padding-top:13px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.kf-pay__total span{font-size:14.5px;font-weight:800;color:var(--kf-ink,#16263d)}
.kf-pay__total b{font-size:27px;font-weight:850;color:var(--kf-blue,#0055b1);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.kf-pay__tax{display:flex;align-items:flex-start;gap:8px;margin-top:11px;background:#f8fafd;border:1px solid #e9eef5;border-radius:11px;padding:10px 12px}
.kf-pay__tax svg{flex:none;margin-top:1px}
.kf-pay__tax span{font-size:11.5px;color:#5b7290;line-height:1.55}
.kf-pay__methods{display:grid;grid-template-columns:1fr;gap:8px}
.kf-pay__m{display:flex;align-items:center;gap:9px;border:1.5px solid #e2eaf4;background:#fff;border-radius:12px;padding:12.5px 13px;cursor:pointer;font-family:inherit;text-align:left}
.kf-pay__m i{width:20px;height:20px;flex:none;border-radius:50%;border:2px solid #c2d3e8;background:#fff;display:flex;align-items:center;justify-content:center}
.kf-pay__m span{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:#3c4f68;line-height:1.35}
.kf-pay__m.is-on{border-color:var(--kf-blue,#0055b1);background:#f2f7fd}
.kf-pay__m.is-on i{border-color:var(--kf-blue,#0055b1);background:var(--kf-blue,#0055b1)}
.kf-pay__m.is-on i::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff}
.kf-pay__m.is-on span{color:var(--kf-blue,#0055b1);font-weight:800}
.kf-pay__mnote{margin-top:11px;display:flex;align-items:center;gap:9px;background:#f8fafd;border:1px solid #e9eef5;border-radius:11px;padding:11px 12px}
.kf-pay__mnote svg{flex:none}
.kf-pay__mnote span{flex:1;min-width:0;font-size:12.5px;color:#5b7290;line-height:1.5}
.kf-pay__agree{display:flex;align-items:center;gap:10px;background:none;border:none;padding:3px 2px;cursor:pointer;font-family:inherit;text-align:left}
.kf-pay__agree i{width:20px;height:20px;flex:none;border-radius:7px;border:2px solid #c2d3e8;background:#fff;display:flex;align-items:center;justify-content:center}
.kf-pay__agree[aria-pressed="true"] i{border-color:var(--kf-blue,#0055b1);background:var(--kf-blue,#0055b1)}
.kf-pay__agree[aria-pressed="true"] i::after{content:'';width:10px;height:5px;border:2.4px solid #fff;border-top:none;border-right:none;transform:rotate(-45deg) translate(1px,-1px)}
.kf-pay__agree span{flex:1;min-width:0;font-size:12.5px;color:#5b7290;line-height:1.55}
.kf-pay__agree span b{color:var(--kf-ink,#16263d);font-weight:700}
.kf-pay__done{background:#fff;border-radius:16px;padding:28px 20px;text-align:center;box-shadow:0 2px 10px rgba(16,38,61,.06)}
.kf-pay__donec{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#eafaf3;border:2px solid #b7e6cf}
.kf-pay__done > b{display:block;margin-top:12px;font-size:19px;font-weight:850;color:var(--kf-ink,#16263d);letter-spacing:-.02em;line-height:1.3}
.kf-pay__done strong{display:block;margin-top:8px;font-size:30px;font-weight:850;color:var(--kf-blue,#0055b1);letter-spacing:-.03em;line-height:1.2;font-variant-numeric:tabular-nums}
.kf-pay__done p{margin:10px 0 0;font-size:13px;color:#5b7290;line-height:1.55}
.kf-pay__done p b{color:var(--kf-ink,#16263d)}
.kf-pay__rrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #eef2f7}
.kf-pay__rrow:first-child{border-top:none}
.kf-pay__rrow span{font-size:13px;color:#5b7290;line-height:1.4}
.kf-pay__rrow b{font-size:13px;font-weight:700;color:var(--kf-ink,#16263d);font-variant-numeric:tabular-nums;text-align:right;line-height:1.4}
.kf-pay__ft{flex:none;background:#fff;border-top:1px solid #e6ecf4;padding:12px 14px 20px;box-shadow:0 -6px 20px rgba(16,38,61,.07)}
.kf-pay__ftin{max-width:100%;margin:0 auto;display:flex;gap:9px;align-items:center}
.kf-pay__later{flex:none;border:1.5px solid #d8e2ef;background:#fff;color:#3c4f68;border-radius:12px;min-height:54px;padding:0 18px;font-size:14.5px;font-weight:800;cursor:pointer;font-family:inherit}
.kf-pay__go,.kf-pay__back2{flex:1;min-width:0;border:none;background:var(--kf-blue,#0055b1);color:#fff;border-radius:12px;min-height:54px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit}
.kf-pay__go:disabled{background:#a8c2de;cursor:default}
@media (min-width:761px){
.kf-pay__bar{padding:14px 20px}
.kf-pay__body{padding:20px 24px}
.kf-pay__in,.kf-pay__ftin{max-width:620px}
.kf-pay__ft{padding:14px 24px}
.kf-pay__total b{font-size:32px}
.kf-pay__methods{grid-template-columns:1fr 1fr}
}
/* 결제 화면은 목업(06-payment/*)상 전용 화면 — 사이트 헤더 없이 자체 상단바만 쓴다 */
body.page-payment .site-header,
body.page-failed .site-header,
body.page-pending .site-header{ display:none !important; }
body.page-payment .site-footer,
body.page-failed .site-footer,
body.page-pending .site-footer{ display:none !important; }
/* ══════════════════════════════════════════════════════════════
전역 크롬 정리 — 모바일 목업 전 화면 기준
· 흰색 상단 헤더는 어느 목업에도 없다. 각 화면이 자체 파란 상단바를 쓴다.
· 블록 테마가 main 과 footer 사이에 24px 흰 여백(margin-block-start)을 넣어
파란 화면과 남색 푸터 사이에 흰 줄이 생긴다. 전부 제거.
══════════════════════════════════════════════════════════════ */
.site-header{ display:none !important; }
.wp-site-blocks > *{ margin-block-start:0 !important; margin-block-end:0 !important; }
.wp-site-blocks{ gap:0 !important; }
main.wp-block-group{ margin:0 !important; padding-top:0 !important; }
/* 목업 실측 배경: 콘텐츠 영역 #eef2f7 (홈만 파란 히어로가 100dvh 를 채운다).
전역을 푸터색(#0e1d31)으로 두면 신청서·내배송·결제 배경이 통째로 어두워진다. */
body{ background:#eef2f7; }
body.home{ background:#0e1d31; } /* 홈은 히어로 아래가 바로 푸터 */
/* 세로가 긴 모니터에서 위 남색 배경이 푸터 아래 빈 공간을 통째로 채워
푸터가 화면 절반짜리로 보였다(2026-08-10 대표 제보) —
파란 요금조회 섹션이 남는 높이를 먹고 푸터는 제 크기(≈173px)로 바닥에 붙는다 */
body.home .wp-site-blocks{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
body.home .wp-site-blocks > main{ flex:1 0 auto; display:flex; flex-direction:column; }
body.home main > .kf-quote{ flex:1 0 auto; }
main.wp-block-group{ background:#eef2f7; }
body.home main.wp-block-group{ background:transparent; }
/* 서브페이지 파란 히어로도 화면 맨 위부터 시작 */
.kf-page > .kf-hero:first-child,
.kf-apply__hero{ margin-top:0 !important; }
/* 내 배송 · 결제 대기 카드 — 가이드 §6-2 / 목업 03-my/01
[결제하기]는 상품명 옆이 아니라 별도 줄. 트래킹번호와 겹치지 않게. */
.kf-card__pay{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-top:10px; padding-top:11px; border-top:1px solid #f0e3df;
}
.kf-card__payinfo{ font-size:12px; font-weight:600; color:#a33522; letter-spacing:-.01em; }
.kf-card__payinfo b{ font-weight:800; color:#a33522; font-variant-numeric:tabular-nums; }
a.kf-card__paygo{
flex:none; display:inline-flex; align-items:center; justify-content:center;
min-height:38px; padding:0 16px; border-radius:10px;
background:var(--kf-blue,#0055b1); color:#fff !important;
font-size:13.5px; font-weight:800; text-decoration:none; white-space:nowrap;
}
a.kf-card__paygo:hover{ background:#003c7d; color:#fff !important; }
.kf-card[data-status="payment_due"]{ border-color:#f3d5cc; }
/* 알림 시트 */
.kf-noti__list{ display:flex; flex-direction:column; }
a.kf-noti__item{ display:flex; gap:11px; padding:14px 2px; border-top:1px solid #eef2f7; text-decoration:none; }
a.kf-noti__item:first-child{ border-top:none; }
.kf-noti__item i{ flex:none; width:9px; height:9px; margin-top:6px; border-radius:50%; background:#cfd8e3; }
.kf-noti__item.is-new i{ background:var(--kf-blue,#0055b1); }
.kf-noti__item span{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.kf-noti__item b{ font-size:13.5px; font-weight:800; color:#16263d; letter-spacing:-.02em; line-height:1.3; }
.kf-noti__item em{ font-style:normal; font-size:12.5px; color:#5b7290; line-height:1.4; }
.kf-noti__item small{ font-size:11.5px; color:#8a9cb4; line-height:1.4; }
.kf-noti__empty{ margin:0; padding:26px 0; text-align:center; font-size:13px; color:#5b7290; }
/* (옛 .kf-notibtn 42px 중복 정의 삭제 — 560행의 38px absolute 가 기준) */
.kf-mypanel__crumb{ display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.7); }
.kf-mypanel__crumb a{ color:rgba(255,255,255,.7) !important; text-decoration:none; }
.kf-mypanel__crumb b{ color:#fff; }
/* ══ 신청서 — 목업 02-apply/01 정합 ══════════════════════════
· 목업은 파란 히어로 안에 브레드크럼·제목·부제·진행바가 모두 들어간다.
테마의 페이지 배너와 겹치므로 신청서에서는 배너를 숨긴다.
· 진행 스텝은 한 줄(원형 번호 + 현재 단계 라벨 + 연결선 + 나머지 번호)
· 유의사항 목록은 번호 표시 */
/* 자체 파란 히어로를 가진 화면은 테마의 페이지 제목 블록을 숨긴다 (목업엔 없음) */
body.page-apply-shipping .page-title,
body.page-my-account .page-title,
body.page-grade .page-title,
body.page-payment .page-title,
body.page-apply-shipping .kf-page__banner,
body.page-apply-shipping .ks-page-banner,
body.page-apply-shipping .kf-subhero{ display:none !important; }
body.page-apply-shipping .entry-content,
body.page-my-account .entry-content,
body.page-grade .entry-content,
body.page-payment .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* 히어로가 화면 맨 위부터 시작하도록 — entry-content 의 24px 마진 제거 */
body.page-apply-shipping .entry-content{ margin-top:0 !important; }
body.page-apply-shipping .kf-apply{ margin-top:0 !important; }
.kf-apply__hero{ padding:0 !important; }
.kf-apply__heroin{ padding:13px 16px 15px; max-width:1100px; margin:0 auto; } /* 에셋6 04-gate 실측: 히어로 총 122px */
.kf-apply__hero > p, .kf-apply__heroin > p{ display:block !important; }
.kf-apply__crumb{ display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.72); margin-bottom:4.5px; }
.kf-apply__crumb a{ color:rgba(255,255,255,.72) !important; text-decoration:none; }
.kf-apply__crumb b{ color:#fff; }
.kf-apply__hero h1{ margin:1.5px 0 0; font-size:22px; font-weight:850; letter-spacing:-.035em; color:#fff; line-height:1.2; }
.kf-apply__hero > p{ margin:7px 0 0; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.82); }
.kf-apply__steps{
display:flex; align-items:center; gap:8px;
margin:16px 0 0; padding:0; list-style:none;
}
.kf-apply__steps .kf-step{
display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0;
background:transparent !important; border:none !important; padding:0 !important;
border-radius:0 !important; box-shadow:none !important;
}
.kf-apply__steps .kf-step__dot{
width:26px; height:26px; flex:none; border-radius:50%;
background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.34);
color:rgba(255,255,255,.8); font-size:12.5px; font-weight:800;
display:flex; align-items:center; justify-content:center;
}
.kf-apply__steps .kf-step.is-now .kf-step__dot{ background:#fff; border-color:#fff; color:var(--kf-blue,#0055b1); }
.kf-apply__steps .kf-step.is-done .kf-step__dot{
/* 목업 02: 완료 스텝은 흰 원 + 파란 체크 (숫자 숨김) */
background:#fff; border-color:#fff; color:transparent; position:relative; font-size:0;
}
.kf-apply__steps .kf-step.is-done .kf-step__dot::after{
content:''; position:absolute; left:50%; top:50%;
width:11px; height:6px; border:2.4px solid var(--kf-blue,#0055b1);
border-top:none; border-right:none;
transform:translate(-50%,-65%) rotate(-45deg);
}
.kf-apply__steps .kf-step__label{ display:none; font-size:12.5px; font-weight:800; color:#fff; white-space:nowrap; }
.kf-apply__steps .kf-step.is-now .kf-step__label{ display:block; }
.kf-apply__steps .kf-step.is-now{ flex:1; }
.kf-apply__steps .kf-step__bar{ display:none; }
.kf-apply__steps .kf-step.is-now .kf-step__bar{ display:block; flex:1; height:1.5px; background:rgba(255,255,255,.3); margin-left:4px; }
/* 유의사항 번호 표시 */
.kf-gate__scroll ol{ list-style:decimal outside; padding-left:20px; margin:0; }
.kf-gate__scroll ol li{ list-style:decimal; }
/* 목업 02-apply/01: 섹션 제목 앞 파란 번호 배지 */
.kf-field__hd--num{ display:flex; align-items:center; gap:8px; }
.kf-field__hd--num i{
flex:none; width:24px; height:24px; border-radius:8px;
background:var(--kf-blue,#0055b1); color:#fff;
font-style:normal; font-size:12.5px; font-weight:800;
display:flex; align-items:center; justify-content:center;
}
/* 목업: 유의사항 항목 사이 구분선 없음 */
.kf-gate__scroll ol li + li{ border-top:none !important; padding-top:0 !important; margin-top:14px; }
/* 목업: 선택된 배대지는 옅은 파랑 배경 + 파란 테두리 + 파란 글씨 */
.kf-gate__c input:checked + img + span,
.kf-gate__c:has(input:checked) span{ color:var(--kf-blue,#0055b1); font-weight:800; }
.kf-gate__c:has(input:checked){ border-color:var(--kf-blue,#0055b1); background:#f2f7ff; }
/* ══ 좌우 여백 통일 — 목업 실측 (콘텐츠 카드 좌우 12~14px) ══
등급·결제도 entry-content 의 24px 패딩에 눌려 38/16 이 됐다.
.kf-page 계열처럼 전폭으로 풀고 자체 패딩만 남긴다. */
body.page-grade .entry-content{ padding-left:0 !important; padding-right:0 !important; max-width:none !important; }
body.page-grade main.wp-block-group{ padding-left:0 !important; padding-right:0 !important; }
.kf-grade{ padding:14px 14px 56px; }
body.page-payment .kf-pay__in{ padding-left:0; padding-right:0; }
.kf-pay__body{ padding:14px 14px 90px !important; }
/* ══ 신청서 3스텝 — 목업 03 정합 ══
기본검수: 초록 배경 + 흰 배경 초록 체크 (비활성 회색 아님) */
.kf-opt--free{
background:#eafaf3 !important; border-color:#b7e6cf !important;
}
.kf-opt--free span{ color:#0f6b41; font-weight:800; }
.kf-opt--free .kf-fee{ color:#127a41 !important; }
.kf-opt--free input{
appearance:none; -webkit-appearance:none;
width:22px; height:22px; flex:none; border-radius:7px;
background:#22a35f; border:none; position:relative; opacity:1;
}
.kf-opt--free input::after{
content:''; position:absolute; left:50%; top:50%;
width:10px; height:5px; border:2.2px solid #fff; border-top:none; border-right:none;
transform:translate(-50%,-62%) rotate(-45deg);
}
/* 패널 내부 여백 — 목업 실측 (제목까지 22px) */
.kf-apply .kf-panel{ padding:18px 14px 16px; }
.kf-apply .kf-panel > .kf-field__hd:first-child{ margin-top:0; }
/* 목업 03: 옵션 행 높이 50px. 전역 input{min-height:46px} 가 체크박스까지 키우던 것 해제 */
.kf-opt input{ min-height:0 !important; height:22px !important; width:22px !important; }
.kf-opt{ min-height:50px; padding:11px 14px; } /* 실측 행 52px = 목업 */
.kf-optcol > div{ display:flex; flex-direction:column; gap:10px; }
/* 목업: 스텝 원 사이 짧은 대시(—) 연결 */
.kf-apply__steps .kf-step + .kf-step::before{
content:''; flex:none; width:14px; height:2px; margin-right:8px;
background:rgba(255,255,255,.35); border-radius:2px;
}
/* ══ ③ 신청 내용 확인 — 목업 04-apply-done/01 실측 ══════════ */
.kf-done{ background:#eef2f7; min-height:100dvh; display:flex; flex-direction:column; }
.kf-done__hero{ background:linear-gradient(120deg,#0055b1 0%,#00306a 100%); color:#fff; }
.kf-done__heroin{ max-width:1100px; margin:0 auto; padding:13px 16px 18px; }
.kf-done__crumb{ display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.72); }
.kf-done__crumb a{ color:rgba(255,255,255,.72) !important; text-decoration:none; }
.kf-done__crumb b{ color:#fff; }
.kf-done__hero h1{ margin:4.5px 0 0; font-size:22px; font-weight:850; letter-spacing:-.035em; line-height:1.2; color:#fff; }
.kf-done__hero p{ margin:4.5px 0 0; font-size:13px; color:rgba(255,255,255,.85); }
.kf-done__body{ flex:1; max-width:1100px; width:100%; margin:0 auto; padding:12px 12px 96px; display:flex; flex-direction:column; gap:12px; }
.kf-done__ok{
display:flex; gap:10px; align-items:flex-start;
background:#e8f6ee; border:1.5px solid #bfe5cd; border-radius:14px; padding:14px 15px;
}
.kf-done__ok svg{ flex:none; margin-top:2px; }
.kf-done__ok b{ display:block; font-size:14.5px; font-weight:800; color:#0f6b41; letter-spacing:-.02em; }
.kf-done__ok small{ display:block; margin-top:4px; font-size:12.5px; line-height:1.6; color:#2c6e4d; }
.kf-done__ok small b{ display:inline; font-size:inherit; }
.kf-done__card{ background:#fff; border-radius:16px; padding:18px 14px 16px; }
.kf-done__h{ display:block; font-size:14.5px; font-weight:850; color:#16263d; letter-spacing:-.02em; }
.kf-done__opts{ display:flex; flex-direction:column; gap:10px; margin-top:13px; }
.kf-done__opt{
display:flex; align-items:center; gap:11px;
background:#eef4ff; border:1.5px solid #c9dcf6; border-radius:12px;
padding:13px 14px; min-height:56px;
}
.kf-done__opt i{
flex:none; width:24px; height:24px; border-radius:8px; background:#0055b1; position:relative;
}
.kf-done__opt i::after{
content:''; position:absolute; left:50%; top:50%;
width:10px; height:5px; border:2.2px solid #fff; border-top:none; border-right:none;
transform:translate(-50%,-62%) rotate(-45deg);
}
.kf-done__opt span{ flex:1; min-width:0; }
.kf-done__opt span b{ display:block; font-size:14.5px; font-weight:800; color:#16263d; letter-spacing:-.02em; }
.kf-done__opt span small{ display:block; margin-top:2px; font-size:12px; color:#5b7290; }
.kf-done__opt em{ flex:none; font-style:normal; font-size:14px; font-weight:800; color:#0055b1; font-variant-numeric:tabular-nums; }
.kf-done__opt--free{ background:#e8f6ee; border-color:#bfe5cd; }
.kf-done__opt--free i{ background:#22a35f; }
.kf-done__opt--free span b{ color:#0f6b41; }
.kf-done__opt--free em{ color:#127a41; }
.kf-done__total{
display:flex; align-items:center; justify-content:space-between;
margin-top:14px; padding-top:14px; border-top:1.5px solid #eef2f7;
}
.kf-done__total span{ font-size:14px; font-weight:800; color:#16263d; }
.kf-done__total small{ font-weight:600; color:#8a9cb4; }
.kf-done__total b{ font-size:24px; font-weight:850; color:#0055b1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kf-done__chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
.kf-done__chip{
display:inline-flex; align-items:center; gap:6px;
border:1px solid #dbe3ee; background:#f6f8fb; color:#8a94a3;
border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:700;
}
.kf-done__hint{ margin:13px 0 0; font-size:12.5px; color:#5b7290; line-height:1.6; }
.kf-done__card--next{ background:#eef4ff; }
.kf-done__steps{ list-style:none; margin:13px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.kf-done__steps li{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:700; color:#8a94a3; }
.kf-done__steps li i{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #cfd8e3; background:#fff; position:relative; }
.kf-done__steps li.is-done i{ background:#22a35f; border-color:#22a35f; }
.kf-done__steps li.is-done i::after{
content:''; position:absolute; left:50%; top:50%;
width:9px; height:4px; border:2px solid #fff; border-top:none; border-right:none;
transform:translate(-50%,-62%) rotate(-45deg);
}
.kf-done__steps li.is-done{ color:#16263d; }
.kf-done__steps li.is-now i{ border-color:#0055b1; }
.kf-done__steps li.is-now{ color:#0055b1; }
.kf-done__steps li.is-now b{ font-weight:800; }
.kf-done__bar{
position:fixed; left:0; right:0; bottom:0; z-index:40;
display:flex; gap:10px; padding:8px 12px calc(8px + env(safe-area-inset-bottom));
background:#fff; box-shadow:0 -6px 24px rgba(16,38,72,.08);
}
a.kf-done__edit{
flex:none; display:flex; align-items:center; justify-content:center;
min-height:50px; padding:0 18px; border-radius:13px;
border:1.5px solid #d8e2ef; background:#fff; color:#3c4f68 !important;
font-size:15px; font-weight:800; text-decoration:none;
}
a.kf-done__go{
flex:1; display:flex; align-items:center; justify-content:center;
min-height:50px; border-radius:13px; background:#0055b1; color:#fff !important;
font-size:16px; font-weight:800; text-decoration:none;
}
a.kf-done__go:hover{ background:#003c7d; }
body.page-done .page-title{ display:none !important; }
body.page-done .entry-content{ margin-top:0 !important; padding:0 !important; max-width:none !important; }
body.page-done main.wp-block-group{ padding-left:0 !important; padding-right:0 !important; }
/* ══ ⑦⑧ 결제 실패 · 입금 대기 — 목업 06-payment/05·06 ══════ */
.kf-payst{ background:#eef2f7; min-height:100dvh; display:flex; flex-direction:column; }
.kf-payst__body{ flex:1; max-width:1100px; width:100%; margin:0 auto; padding:14px 14px 96px; display:flex; flex-direction:column; gap:11px; }
.kf-payst__card{ background:#fff; border-radius:16px; padding:15px 16px; }
.kf-payst__card--main{ text-align:center; padding:26px 20px 28px; }
.kf-payst__x{
display:inline-flex; align-items:center; justify-content:center;
width:58px; height:58px; border-radius:50%;
background:#fdf0ec; border:1.5px solid #f3cfc4; margin-bottom:8px;
}
.kf-payst__clock{
display:inline-flex; align-items:center; justify-content:center;
width:58px; height:58px; border-radius:50%;
background:#fdf7e7; border:1.5px solid #ecd9a8; margin-bottom:8px;
}
.kf-payst__title{ display:block; font-size:20px; font-weight:850; color:#16263d; letter-spacing:-.03em; line-height:1.3; }
.kf-payst__amt{ display:block; margin:11px 0 0; font-size:27px; font-weight:850; color:#0055b1; letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums; }
.kf-payst__sub{ margin:8px 0 0; font-size:13px; line-height:1.55; color:#3c4f68; }
.kf-payst__sub b{ color:#16263d; }
.kf-payst__reason{
margin-top:17px; text-align:left;
background:#fdf0ec; border:1.5px solid #f3cfc4; border-radius:13px; padding:11px 13px 12px;
}
.kf-payst__reason small{ display:block; font-size:11.5px; font-weight:800; color:#a33522; letter-spacing:.02em; }
.kf-payst__reason b{ display:block; margin-top:3px; font-size:14px; font-weight:850; color:#8c2a1a; letter-spacing:-.02em; }
.kf-payst__reason p{ margin:6px 0 0; font-size:12px; line-height:1.5; color:#7a4a3e; }
.kf-payst__row{
display:flex; align-items:center; gap:9px;
padding:8.5px 2px; border-top:1px solid #eef2f7; line-height:1.4;
}
/* 입금대기 계좌 카드 — 목업 실측: 텍스트 행 39px · 복사버튼 행 53px */
#kfPayPending .kf-payst__row{ padding-top:9.5px; padding-bottom:9.5px; }
#kfPayPending .kf-payst__row:first-child{ padding-top:2px; }
#kfPayPending .kf-payst__row:last-child{ padding-bottom:2px; }
#kfPayPending .kf-payst__cp{ margin:1.5px 0; }
/* 상세 rows 카드는 바닥 여백이 더 깊다(목업) */
#kfPayFailed .kf-payst__card:nth-of-type(2),
#kfPayPending .kf-payst__card:nth-of-type(2){ padding-bottom:19px; }
.kf-payst__row:first-child{ border-top:none; padding-top:2px; }
.kf-payst__row:last-child{ padding-bottom:2px; }
.kf-payst__row span{ flex:none; font-size:12.5px; font-weight:600; color:#5b7290; }
.kf-payst__row b{ flex:1; text-align:right; font-size:13.5px; font-weight:800; color:#16263d; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.kf-payst__row b.is-blue{ color:#0055b1; }
.kf-payst__row b.is-warn{ color:#a33522; }
.kf-payst__cp{
flex:none; width:30px; height:30px; padding:0;
border:1px solid #d8e2ef; background:#fff; color:#0055b1;
border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.kf-payst__cp.is-done{ background:#e8f7ef; border-color:#b7e6cf; color:#127a41; }
.kf-payst__methods{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.kf-payst__m{
display:flex; align-items:center; gap:11px;
min-height:47px; padding:0 15px;
border:1.5px solid #e3e9f2; background:#fff; border-radius:13px;
font-family:inherit; font-size:13.5px; font-weight:700; color:#3c4f68; cursor:pointer;
}
.kf-payst__m i{ flex:none; width:20px; height:20px; border-radius:50%; border:2px solid #cfd8e3; background:#fff; position:relative; }
.kf-payst__m.is-on{ border-color:#0055b1; background:#eef4ff; color:#0055b1; font-weight:800; }
.kf-payst__m.is-on i{ border-color:#0055b1; }
.kf-payst__m.is-on i::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:#0055b1; }
.kf-payst .kf-done__h{ font-size:13px; line-height:1.4; }
.kf-payst__keep{
display:flex; gap:9px; align-items:flex-start;
background:#fff; border-radius:13px; padding:10px 15px 11px;
font-size:12.5px; line-height:1.6; color:#5b7290;
}
.kf-payst__keep i{ flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%; background:#c9971c; }
.kf-payst__keep b{ color:#16263d; }
.kf-payst__warn{
display:flex; gap:10px; align-items:flex-start;
background:#fdf7e7; border:1.5px solid #ecd9a8; border-radius:13px;
padding:13px 15px; font-size:12.5px; line-height:1.6; color:#6e5a24;
}
.kf-payst__warn svg{ flex:none; margin-top:1px; }
.kf-payst__warn b{ color:#5c440e; }
/* 입금대기 — 버튼이 고정 바가 아니라 페이지 흐름 안(목업 06) */
.kf-done__bar--flow{
position:static; background:transparent; box-shadow:none;
padding:0 14px calc(14px + env(safe-area-inset-bottom)); margin-top:12px;
}
.kf-done__bar--flow a.kf-done__edit, .kf-done__bar--flow .kf-done__go{ min-height:48px; }
#kfPayPending .kf-payst__body{ padding-bottom:0; flex:0 0 auto; }
#kfPayFailed .kf-payst__body{ padding-bottom:80px; }
.kf-done__go{ border:none; cursor:pointer; font-family:inherit; }
button.kf-done__go{ background:#0055b1; color:#fff; font-size:16px; font-weight:800; border-radius:13px; min-height:54px; flex:1; }
/* ══ 게스트 제출 게이트 + 이어쓰기 토스트 (신청서 비로그인 플로우) ══ */
.kf-lgate{
position:fixed; inset:0; z-index:2147483200;
display:flex; align-items:flex-end; justify-content:center;
background:rgba(14,29,49,.55);
}
.kf-lgate[hidden]{ display:none; }
.kf-lgate__box{
width:100%; max-width:480px; background:#fff;
border-radius:20px 20px 0 0; padding:26px 20px calc(20px + env(safe-area-inset-bottom));
text-align:center; animation:kfUp .28s ease both;
}
.kf-lgate__ico{
display:inline-flex; align-items:center; justify-content:center;
width:52px; height:52px; border-radius:50%;
background:#eef4ff; border:1.5px solid #cfe0f5; margin-bottom:12px;
}
.kf-lgate__title{ display:block; font-size:18px; font-weight:850; color:#16263d; letter-spacing:-.03em; line-height:1.3; }
.kf-lgate__desc{ margin:9px 0 0; font-size:13px; line-height:1.6; color:#5b7290; }
.kf-lgate__desc b{ color:#16263d; }
a.kf-lgate__go{
display:flex; align-items:center; justify-content:center;
min-height:50px; margin-top:16px; border-radius:13px;
background:#0055b1; color:#fff !important; font-size:15.5px; font-weight:800; text-decoration:none;
}
a.kf-lgate__go:hover{ background:#003c7d; }
a.kf-lgate__join{
display:block; margin-top:12px; font-size:13px; color:#3c4f68 !important; text-decoration:none;
}
a.kf-lgate__join b{ color:#0055b1; text-decoration:underline; text-underline-offset:3px; }
.kf-lgate__later{
display:block; width:100%; margin-top:10px; padding:8px 0;
background:none; border:none; cursor:pointer;
font-family:inherit; font-size:12.5px; color:#8ea1b8;
}
@media (min-width:761px){
.kf-lgate{ align-items:center; }
.kf-lgate__box{ border-radius:20px; padding:30px 28px 24px; }
}
.kf-toast{
position:fixed; left:50%; bottom:84px; transform:translateX(-50%);
z-index:2147483100; display:flex; align-items:center; gap:7px;
background:#16263d; color:#fff; font-size:12.5px; font-weight:700;
padding:10px 15px; border-radius:99px; white-space:nowrap;
box-shadow:0 8px 24px rgba(16,38,72,.25); animation:kfUp .25s ease both;
}
.kf-toast[hidden]{ display:none; }
.kf-toast svg{ color:#7fd4a5; }
/* 목업 03-my: 내 배송 화면엔 푸터가 없다 */
body.page-my-account .site-footer{ display:none !important; }
body.page-failed .page-title, body.page-pending .page-title{ display:none !important; }
body.page-failed .entry-content, body.page-pending .entry-content{ margin-top:0 !important; padding:0 !important; max-width:none !important; }
body.page-failed main.wp-block-group, body.page-pending main.wp-block-group{ padding-left:0 !important; padding-right:0 !important; }
/* ══ 에셋6 2차 01-auth — 로그인·가입·비번찾기 (파란 풀블리드 + 흰 카드) ══ */
body.page-login, body.page-register, body.page-password-reset, body.page-lost-password{ background:linear-gradient(160deg,#0a4da3 0%,#0b3671 60%,#0a2c5d 100%) !important; }
body.page-login .page-title, body.page-register .page-title, body.page-password-reset .page-title{ display:none !important; }
body.page-login .site-footer, body.page-register .site-footer, body.page-password-reset .site-footer{ display:none !important; }
body.page-login .entry-content, body.page-register .entry-content, body.page-password-reset .entry-content{ margin:0 !important; padding:0 !important; max-width:none !important; }
.kf-auth{ max-width:420px; margin:0 auto; padding:44px 15px 60px; }
.kf-auth__hero{ text-align:center; color:#fff; margin-bottom:26px; }
.kf-auth__brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:22px; }
.kf-auth__mark{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.35); }
.kf-auth__brand b{ font-size:21px; font-weight:850; color:#fff; letter-spacing:-.02em; }
.kf-auth__hero h1{ margin:0; font-size:27px; font-weight:850; color:#fff; letter-spacing:-.03em; }
.kf-auth__hero p{ margin:11px 0 0; font-size:14.5px; color:rgba(255,255,255,.85); line-height:1.55; }
.kf-auth__card{ background:#fff; border-radius:22px; padding:24px 20px; box-shadow:0 18px 50px rgba(4,20,46,.28); }
/* 카카오 공식 노란 버튼 (QA G-1) */
.kf-auth__kakao .kf-kakao-btn{
display:flex; align-items:center; justify-content:center; gap:9px;
min-height:52px; border-radius:12px; background:#FEE500 !important; color:#191919 !important;
font-size:15.5px; font-weight:800; text-decoration:none; letter-spacing:-.02em;
}
.kf-auth__kakao .kf-kakao-btn:hover{ background:#f6dc00 !important; }
/* 네이버 버튼 — 카카오와 같은 치수(높이 52 · 라운드 12 · 15.5/800).
색은 네이버 공식 초록 #03C75A · 글자 흰색이 규정이다. */
.kf-auth__naver .kf-naver-btn{
display:flex; align-items:center; justify-content:center; gap:9px;
min-height:52px; border-radius:12px; background:#03C75A !important; color:#fff !important;
font-size:15.5px; font-weight:800; text-decoration:none; letter-spacing:-.02em;
}
.kf-auth__naver .kf-naver-btn:hover{ background:#02b351 !important; color:#fff !important; }
/* 소셜 버튼이 여럿이면 사이를 띄운다 */
.kf-auth .auth-oauth + .auth-oauth{ margin-top:10px; }
/* 구글 버튼 — 카카오 버튼과 같은 치수(높이 52 · 라운드 12 · 15.5/800)로 맞춘다.
GSI 기본 버튼은 크기·서체가 고정이라 우리 버튼을 그리고 진짜 GSI 버튼을 투명하게 위에 덮는다.
(클릭은 구글 버튼이 받는다 — 정책 준수) */
/* main.css 의 .auth-oauth{display:flex} 때문에 래퍼가 내용폭으로 줄어든다 → 풀폭 고정 */
.kf-auth .auth-oauth{ display:block; margin-bottom:0; }
.kf-auth__google{ position:relative; display:block; width:100%; }
.kf-auth__google .kf-gbtn{
display:flex; align-items:center; justify-content:center; gap:9px;
width:100%; min-height:52px; box-sizing:border-box;
border:1.5px solid #e3e9f2; border-radius:12px; background:#fff;
transition:background .15s, border-color .15s, box-shadow .15s;
}
.kf-auth__google .kf-gbtn b{ font-size:15.5px; font-weight:800; color:#16263d; letter-spacing:-.02em; }
.kf-auth__google .kf-gbtn__logo{ flex:none; }
.kf-auth__google:hover .kf-gbtn{ background:#f8fafd; border-color:#cfdcee; box-shadow:0 2px 10px rgba(10,45,95,.07); }
.kf-auth__google:active .kf-gbtn{ background:#f1f5fb; }
/* 진짜 GSI 버튼 — 보이지 않게 덮어 클릭만 받는다 */
.kf-auth__google #g_id_onload{ position:absolute; width:0; height:0; overflow:hidden; }
.kf-auth__google .g_id_signin{
position:absolute; inset:0; z-index:2; opacity:0; overflow:hidden; cursor:pointer;
}
.kf-auth__google .g_id_signin > div,
.kf-auth__google .g_id_signin iframe{ width:100% !important; height:100% !important; }
.kf-auth__div{ display:flex; align-items:center; gap:12px; margin:16px 0; }
.kf-auth__div::before, .kf-auth__div::after{ content:''; flex:1; height:1px; background:#e6ebf3; }
.kf-auth__div span{ font-size:12px; color:#8a9cb4; font-weight:600; }
.kf-auth .field{ margin-bottom:14px; }
.kf-auth .field__label{ display:block; font-size:14px; font-weight:800; color:#16263d; margin-bottom:8px; letter-spacing:-.02em; }
.kf-auth .field__control input{
width:100%; min-height:52px; padding:0 16px; font-size:16px; font-family:inherit;
border:1.5px solid #e3e9f2; border-radius:12px; background:#f8fafd; color:#16263d; outline:none;
}
.kf-auth .field__control input:focus{ border-color:#0055b1; background:#fff; }
.kf-auth .field__control input::placeholder{ color:#9aa7b8; }
.kf-auth__pw{ position:relative; }
.kf-auth__pw input{ padding-right:48px; }
.kf-auth__eye{ position:absolute; top:50%; right:8px; transform:translateY(-50%); width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:#9aa7b8; cursor:pointer; }
.kf-auth__eye.is-on{ color:#0055b1; }
.kf-auth__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 16px; }
.kf-auth__row .auth-form__checkbox{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#3c4f68; font-weight:600; cursor:pointer; }
.kf-auth__row .auth-form__checkbox input{ width:22px; height:22px; accent-color:#0055b1; }
.kf-auth__row a{ font-size:13.5px; color:#0055b1 !important; text-decoration:none; }
.kf-auth__row a b{ font-weight:800; }
.kf-auth .ks-btn--primary{ width:100%; min-height:53px; border-radius:12px; font-size:16.5px; font-weight:800; background:#0055b1; letter-spacing:-.02em; }
.kf-auth .auth-form__alt{ margin:18px 0 0; padding-top:16px; border-top:1px solid #eef2f7; text-align:center; font-size:13.5px; color:#5b7290; }
.kf-auth .auth-form__alt a{ color:#0055b1 !important; text-decoration:none; }
.kf-auth .auth-form__error{ background:#fdf0ec; border:1px solid #f3cfc4; border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.55; color:#a04a36; margin-bottom:14px; }
.kf-auth .auth-form__error a{ color:#8c2a1a !important; font-weight:800; }
/* auth 페이지 — 콘텐츠 래퍼의 회색 배경 제거 (body 그라데이션이 보여야 함) */
body.page-login main, body.page-register main, body.page-password-reset main,
body.page-login .wp-site-blocks, body.page-register .wp-site-blocks, body.page-password-reset .wp-site-blocks,
body.page-login .entry-content, body.page-register .entry-content, body.page-password-reset .entry-content{ background:transparent !important; }
body.page-login .site-header, body.page-register .site-header, body.page-password-reset .site-header{ display:none !important; }
/* 카카오 버튼 풀폭 */
.kf-auth__kakao{ display:block; }
.kf-auth__kakao .kf-kakao-btn{ width:100%; }
.kf-auth__naver .kf-naver-btn{ width:100%; }
/* 기존 auth-divider 자체 라인과 충돌 제거 */
.kf-auth .auth-divider{ border:none; margin:16px 0; }
.kf-auth .auth-divider::before, .kf-auth .auth-divider::after{ content:''; flex:1; height:1px; background:#e6ebf3; border:none; }
.kf-auth .auth-divider span{ background:none; padding:0 2px; position:static; transform:none; }
/* 체크박스 — 목업 라운드 파랑 */
.kf-auth__row .auth-form__checkbox input{ border-radius:7px; }
/* auth 미세 정합 (목업 01-auth 실측) */
body.page-login main.wp-block-group, body.page-register main.wp-block-group, body.page-password-reset main.wp-block-group{ padding-left:0 !important; padding-right:0 !important; }
.kf-auth{ padding-top:92px; }
.kf-auth__mark{ background:#2e69bd; border-color:rgba(255,255,255,.45); }
.kf-auth .auth-divider{ display:flex; align-items:center; gap:12px; text-align:center; }
.kf-auth .auth-divider span{ flex:none; }
/* 라운드 체크박스 (목업) */
.kf-auth__row .auth-form__checkbox input{ appearance:none; -webkit-appearance:none; width:24px; height:24px; border:1.5px solid #c9d6e6; border-radius:8px; background:#fff; position:relative; cursor:pointer; }
.kf-auth__row .auth-form__checkbox input:checked{ background:#0055b1; border-color:#0055b1; }
.kf-auth__row .auth-form__checkbox input:checked::after{ content:''; position:absolute; left:7px; top:3.5px; width:6px; height:11px; border:2.4px solid #fff; border-top:none; border-left:none; transform:rotate(42deg); }
/* 가입 폼 전용 (에셋6 01-auth/02) */
.kf-auth__req{ font-style:normal; font-size:10.5px; font-weight:800; color:#c0392b; background:#fdeeea; border-radius:5px; padding:2.5px 7px; margin-left:5px; vertical-align:2px; }
.kf-auth__why{ font-size:12px; font-weight:600; color:#8a9cb4; margin-left:4px; }
.kf-auth__hint{ margin:7px 0 0; font-size:12.5px; color:#8a9cb4; }
.kf-auth .field__control--phone{ display:flex; gap:9px; }
.kf-auth .field__control--phone input[type=tel]{ flex:1; min-width:0; }
.kf-auth__otpbtn{ flex:none; min-height:52px; padding:0 16px; border:1.5px solid #0055b1 !important; background:#eef4ff !important; color:#0055b1 !important; border-radius:12px !important; font-size:14.5px; font-weight:800; }
.kf-auth__terms{ border-top:1px solid #eef2f7; margin-top:6px; padding-top:15px; display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.kf-auth__t{ display:flex; align-items:center; gap:10px; font-size:14px; color:#3c4f68; cursor:pointer; }
.kf-auth__t b{ color:#16263d; font-weight:800; }
.kf-auth__t span{ flex:1; min-width:0; }
.kf-auth__t a{ flex:none; font-size:13px; color:#8a9cb4 !important; text-decoration:underline; text-underline-offset:3px; }
.kf-auth__t input{ appearance:none; -webkit-appearance:none; width:24px; height:24px; flex:none; border:1.5px solid #c9d6e6; border-radius:50%; background:#fff; position:relative; cursor:pointer; }
.kf-auth__t input:checked{ background:#0055b1; border-color:#0055b1; }
.kf-auth__t input:checked::after{ content:''; position:absolute; left:7px; top:4px; width:6px; height:10px; border:2.3px solid #fff; border-top:none; border-left:none; transform:rotate(42deg); }
.kf-auth__t input[hidden]{ display:none; }
.kf-auth__note{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:14px 15px; }
.kf-auth__note span{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.88); }
.kf-auth__note b{ color:#fff; }
.kf-auth__note svg{ flex:none; margin-top:2px; }
.kf-auth .ks-pw-meter{ margin-top:8px; }
/* 가입 폼 잔여 정합 */
.kf-auth__t input{ border-radius:8px; }
.kf-auth__t input:checked::after{ left:7.5px; top:3.5px; }
.kf-auth .auth-divider{ display:flex !important; align-items:center !important; position:static !important; }
.kf-auth .auth-divider::before, .kf-auth .auth-divider::after{ content:'' !important; position:static !important; display:block !important; flex:1 !important; width:auto !important; height:1px !important; background:#e6ebf3 !important; transform:none !important; }
.kf-auth .auth-divider span{ position:static !important; transform:none !important; background:none !important; display:inline-block !important; white-space:nowrap; }
body.page-register .kf-auth{ padding-top:52px; }
/* 강도 미터 — 입력 전엔 숨김 (목업) */
.kf-auth .ks-pw-meter{ display:none; }
.kf-auth .ks-pw-meter.is-active{ display:block; }
.kf-auth .auth-form__success{ background:#eafaf3; border:1px solid #b7e6cf; border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.6; color:#0f6b41; margin-bottom:14px; }
body.page-password-reset .kf-auth{ padding-top:168px; }
/* ══ 에셋6 2차 02-menu — 햄버거 드로어 (실측: 폭 320 · 패딩 16 · 행 63 · 아이콘 34) ══ */
.kf-quote__burger{ flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:6px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.13); border-radius:11px; color:#fff; cursor:pointer; }
.kf-quote__burger:hover{ background:rgba(255,255,255,.2); }
.kf-nav{ position:fixed; inset:0; z-index:2147483300; }
.kf-nav[hidden]{ display:none; }
.kf-nav__dim{ position:absolute; inset:0; background:rgba(4,16,34,.5); }
.kf-nav__panel{ position:absolute; top:0; right:0; bottom:0; width:320px; max-width:100%; background:#fff; box-shadow:-12px 0 40px rgba(0,18,45,.3); display:flex; flex-direction:column; overflow:auto; animation:kfNavIn .26s ease both; }
@keyframes kfNavIn{ from{ transform:translateX(100%) } to{ transform:translateX(0) } }
.kf-nav__hd{ background:linear-gradient(120deg,#0e2c52,#123f74); padding:16px; color:#fff; }
.kf-nav__hdtop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kf-nav__ttl{ font-size:13px; font-weight:800; letter-spacing:.02em; }
.kf-nav__x{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:none; border-radius:9px; background:rgba(255,255,255,.14); cursor:pointer; }
/* 회원 프로필 카드 */
.kf-nav__me{ margin-top:14px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); border-radius:13px; padding:13px 14px; }
.kf-nav__metop{ display:flex; align-items:center; gap:9px; }
.kf-nav__av{ width:34px; height:34px; flex:none; border-radius:11px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; }
.kf-nav__mein{ flex:1; min-width:0; }
.kf-nav__mein b{ display:block; font-size:14px; font-weight:800; color:#fff; }
.kf-nav__gr{ display:inline-flex; align-items:center; gap:5px; margin-top:3px; font-style:normal; font-size:11px; font-weight:800; color:#fff; background:#8a6410; border-radius:5px; padding:2px 7px; letter-spacing:.05em; }
.kf-nav__mbox{ margin-top:11px; display:flex; align-items:center; gap:9px; background:rgba(0,0,0,.18); border-radius:10px; padding:10px 12px; }
.kf-nav__mboxl{ flex:1; min-width:0; }
.kf-nav__mboxl small{ display:block; font-size:10px; font-weight:800; color:rgba(255,255,255,.6); letter-spacing:.05em; }
.kf-nav__mboxl b{ display:block; margin-top:2px; font-size:17px; font-weight:850; color:#fff; letter-spacing:.03em; font-variant-numeric:tabular-nums; }
.kf-nav__cp{ flex:none; display:inline-flex; align-items:center; gap:5px; border:none; background:rgba(255,255,255,.2); color:#fff; border-radius:8px; padding:8px 11px; font-family:inherit; font-size:11.5px; font-weight:800; cursor:pointer; }
.kf-nav__cp.is-done{ background:#127a41; }
/* 비회원 버튼 (실측 140×48 · 간격 8) */
.kf-nav__auth{ display:flex; gap:8px; margin-top:14px; }
a.kf-nav__ghost, a.kf-nav__solid{ flex:1; display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:11px; font-size:14px; font-weight:800; text-decoration:none; }
a.kf-nav__ghost{ border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.13); color:#fff !important; }
a.kf-nav__solid{ border:none; background:#fff; color:#0055b1 !important; }
/* 본문 목록 (행 63 = padding 14 + 아이콘 34 + 14 + 1px 선) */
.kf-nav__body{ flex:1; padding:8px 0 0; }
.kf-nav__lb{ margin:0; padding:14px 18px 6px; font-size:11px; font-weight:800; color:#a3b3c7; letter-spacing:.06em; }
a.kf-nav__row{ display:flex; align-items:center; gap:12px; padding:14px 18px; text-decoration:none; border-bottom:1px solid #f4f7fb; }
.kf-nav__ic{ width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.kf-nav__tx{ flex:1; min-width:0; }
.kf-nav__tx b{ display:block; font-size:14px; font-weight:800; color:#16263d; }
.kf-nav__tx small{ display:block; margin-top:2px; font-size:11.5px; color:#8a9cb4; }
.kf-nav__badge{ flex:none; font-style:normal; font-size:10.5px; font-weight:800; color:#fff; background:#a33522; border-radius:999px; padding:3px 8px; }
.kf-nav__ch{ flex:none; }
.kf-nav__ft{ padding:14px 18px 18px; border-top:1px solid #eef2f7; background:#f8fafd; }
.kf-nav__ftlinks{ display:flex; gap:8px; flex-wrap:wrap; }
.kf-nav__ftlinks a{ font-size:11.5px; color:#7185a0 !important; text-decoration:none; }
a.kf-nav__out{ display:flex; align-items:center; justify-content:center; margin-top:12px; width:100%; border:1px solid #dbe3ee; background:#fff; color:#7185a0 !important; border-radius:10px; min-height:44px; font-size:13px; font-weight:700; text-decoration:none; }
/* ══ 에셋6 2차 03-mailbox — 개인 사서함 안내 팝업 ══ */
.kf-mb{ position:fixed; inset:0; z-index:2147483310; display:flex; align-items:flex-end; justify-content:center; }
.kf-mb[hidden]{ display:none; }
.kf-mb__dim{ position:absolute; inset:0; background:rgba(4,16,34,.62); }
.kf-mb__box{ position:relative; width:100%; max-width:480px; background:#fff; border-radius:20px 20px 0 0; padding:16px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,18,45,.34); animation:kfUp .26s ease both; }
.kf-mb__grip{ display:block; width:44px; height:4px; border-radius:99px; background:#dbe3ee; margin:0 auto 15px; }
.kf-mb__hd{ display:flex; align-items:flex-start; gap:10px; }
.kf-mb__ic{ width:42px; height:42px; flex:none; border-radius:13px; background:#eef4ff; display:flex; align-items:center; justify-content:center; }
.kf-mb__hdtx{ flex:1; min-width:0; padding-top:2px; }
.kf-mb__hdtx b{ display:flex; align-items:center; gap:7px; font-size:17px; font-weight:850; color:#16263d; letter-spacing:-.02em; line-height:1.35; }
.kf-mb__hdtx small{ display:block; margin-top:5px; font-size:13px; color:#5b7290; line-height:1.65; }
.kf-mb__q{ flex:none; width:22px; height:22px; border:none; background:#eef2f7; color:#5b7290; border-radius:50%; cursor:pointer; font-family:inherit; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.kf-mb__q.is-on{ background:#0055b1; color:#fff; }
.kf-mb__tip{ position:relative; margin-top:12px; background:#16263d; border-radius:12px; padding:13px 15px; animation:kfUp .18s ease both; }
.kf-mb__tip[hidden]{ display:none; }
.kf-mb__tip i{ position:absolute; top:-6px; left:220px; width:12px; height:12px; background:#16263d; transform:rotate(45deg); }
.kf-mb__tip span{ display:block; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.92); }
.kf-mb__tip b{ color:#8ec5ff; font-weight:800; }
.kf-mb__ex{ margin-top:14px; background:#f8fafd; border:1px solid #e9eef5; border-radius:13px; padding:13px 15px; }
.kf-mb__exl{ display:block; font-size:11px; font-weight:800; color:#8a9cb4; letter-spacing:.04em; }
.kf-mb__card{ margin-top:8px; background:#fff; border:1px solid #e2eaf4; border-radius:10px; padding:11px 13px; }
.kf-mb__card small{ display:block; font-size:11px; font-weight:700; color:#8a9cb4; letter-spacing:.03em; }
.kf-mb__card span{ display:block; margin-top:4px; font-size:15px; font-weight:700; color:#16263d; }
.kf-mb__card b{ color:#0055b1; }
.kf-mb__warn{ display:flex; gap:9px; align-items:flex-start; margin-top:10px; }
.kf-mb__warn svg{ flex:none; margin-top:1px; }
.kf-mb__warn span{ flex:1; min-width:0; font-size:12px; color:#8c3a26; line-height:1.6; }
.kf-mb__warn b{ font-weight:800; }
.kf-mb__btns{ display:flex; flex-direction:column; gap:9px; margin-top:15px; }
a.kf-mb__go{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; border:none; background:#0055b1; color:#fff !important; border-radius:12px; min-height:54px; font-size:15.5px; font-weight:800; text-decoration:none; }
.kf-mb__later{ width:100%; border:1px solid #dbe3ee; background:#fff; color:#7185a0; border-radius:12px; min-height:48px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
@media (min-width:761px){
.kf-mb{ align-items:center; padding:20px; }
.kf-mb__box{ max-width:460px; border-radius:20px; }
.kf-mb__grip{ display:none; }
}
/* 드로어 픽셀 정합 — 목업 실측: 헤더 204 · 행 63(아이콘 34 + 상하 14 + 선 1) */
.kf-nav__mein b{ line-height:1.25; }
.kf-nav__gr{ line-height:1.3; }
.kf-nav__mboxl small{ line-height:1.3; }
.kf-nav__mboxl b{ line-height:1.2; }
.kf-nav__ttl{ line-height:1.2; }
.kf-nav__tx b{ line-height:1.2; }
.kf-nav__tx small{ margin-top:1px; line-height:1.35; }
.kf-nav__cp{ line-height:1.2; }
.kf-nav__hd{ padding:16px 16px 9px; }
.kf-nav__lb{ padding:9px 18px 6px; }
.kf-nav__auth{ margin-bottom:7px; } /* 비회원 헤더는 목업상 124px (회원 204px) */
/* ══ 에셋6 2차 05-tooltip — 구매비용 입력 + ? 말풍선 (실측: 입력 52 · 라벨간격 12/15.5) ══ */
.kf-cost2__hd{ margin-bottom:18px; }
.kf-cost2__hd h3{ margin:0; font-size:15.5px; font-weight:800; color:#16263d; letter-spacing:-.02em; line-height:1.3; }
.kf-cost2__hd p{ margin:8px 0 0; font-size:13px; color:#8a9cb4; line-height:1.5; }
.kf-cost2__f{ margin-bottom:15.5px; }
.kf-cost2__f:last-of-type{ margin-bottom:16px; }
.kf-cost2__lb{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.kf-cost2__lb b{ font-size:14px; font-weight:800; color:#16263d; letter-spacing:-.02em; line-height:1.25; }
.kf-cost2__lb em{ font-style:normal; font-size:13px; font-weight:600; color:#8a9cb4; line-height:1.25; }
.kf-cost2__in{ position:relative; display:flex; align-items:center; }
.kf-cost2__in input{ width:100%; min-height:52px; padding:0 62px 0 16px; border:1.5px solid #d8e2ef; border-radius:12px; background:#fff; font-size:16px; font-family:inherit; color:#16263d; outline:none; }
.kf-cost2__in input:focus{ border-color:#0055b1; }
.kf-cost2__in input[readonly]{ background:#f8fafd; color:#3c4f68; }
.kf-cost2__in input::placeholder{ color:#9aa7b8; }
.kf-cost2__in .kf-cur{ position:absolute; right:16px; font-size:14.5px; font-weight:700; color:#8a9cb4; pointer-events:none; }
.kf-cost2__total{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #eef2f7; padding-top:17px; }
.kf-cost2__total span{ font-size:15px; font-weight:800; color:#16263d; letter-spacing:-.02em; }
.kf-cost2__total b{ font-size:21px; font-weight:850; color:#0055b1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kf-cost2__total .kf-cur-sym{ margin-right:3px; }
/* ? 배지 + 말풍선 — 전 화면 공통 컴포넌트 */
.kf-tip{ flex:none; width:22px; height:22px; border:none; border-radius:50%; background:#eef4ff; color:#0055b1; font-family:inherit; font-size:12px; font-weight:800; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.kf-tip.is-on{ background:#0055b1; color:#fff; }
.kf-tipbox{ position:relative; margin:0 0 12px; background:#16263d; border-radius:12px; padding:14px 16px; animation:kfUp .18s ease both; }
.kf-tipbox i{ position:absolute; top:-6px; width:12px; height:12px; background:#16263d; transform:rotate(45deg); }
.kf-tipbox span{ display:block; font-size:13px; line-height:1.7; color:rgba(255,255,255,.93); }
/* ══ 에셋6 QA D-2 — 상품 썸네일 폴백 (요금조회 52 · 내배송 46 · 결제 44) ══ */
.kf-thumb{ position:relative; display:flex; align-items:center; justify-content:center; flex:none; width:var(--kf-thumb,46px); height:var(--kf-thumb,46px); border-radius:10px; background:#e9eff7 center/cover no-repeat; overflow:hidden; }
.kf-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.kf-thumb.is-fb{ background-color:#eef4ff; background-size:52% 52%; background-position:center; background-repeat:no-repeat; }
.kf-card__thumb.kf-thumb{ --kf-thumb:46px; }
.kf-pay__thumb.kf-thumb{ --kf-thumb:44px; }
/* 요금조회 결과 썸네일 — 3차 문서는 52px이라 적었으나 홈 시안 04-mobile-result 실측은 46px (시안 우선) */
.kf-quote__ithumb.kf-thumb{ --kf-thumb:46px; }
/* ══════════════════════════════════════════════════════════════
에셋6 2차 · 등급 이전 /grade-transfer/ (screens2/06-transfer)
실측(390px): 히어로 161 · 패널1 175~436 · 패널2 447~805
다크카드 816~1029 · CTA 1040~1096(56)
══════════════════════════════════════════════════════════════ */
.kf-tf{ position:relative; left:50%; transform:translateX(-50%); width:100vw; text-align:left; margin-bottom:0; }
.kf-tf__hero{ background:linear-gradient(135deg,#0055b1 0%,#003a7d 100%); color:#fff; }
.kf-tf__heroin{ max-width:1100px; margin:0 auto; padding:13px 16px 23px; }
.kf-tf .kf-apply__crumb{ font-size:13px; font-weight:600; line-height:18px; margin:0 0 5px; gap:6px; }
.kf-tf__hero h1{ margin:0; font-size:22px; font-weight:850; letter-spacing:-.035em; line-height:25px; color:#fff; }
.kf-tf__hero p{ margin:10px 0 0; font-size:14px; line-height:21px; color:rgba(255,255,255,.88); letter-spacing:-.02em; }
.kf-tf__hero p b{ font-weight:800; color:#fff; }
.kf-tf__body{ background:var(--kf-page); padding:14px 14px 13px; display:flex; flex-direction:column; gap:11px; }
.kf-tf__body .kf-panel{ padding:15px 16px; border-radius:16px; box-shadow:0 1px 3px rgba(16,38,61,.05); }
.kf-tf__h{ display:block; font-size:14px; font-weight:800; line-height:17px; letter-spacing:-.03em; color:#16263d; }
/* 3단계 */
.kf-tf__steps{ list-style:none; margin:8px 0 0; padding:0; }
.kf-tf__steps li{ display:flex; gap:10px; margin:0 !important; padding:8px 0 13px; border-top:1px solid #eef2f7; }
.kf-tf__steps li:first-child{ border-top:0; padding-top:9.5px; }
.kf-tf__steps i{ flex:0 0 26px; width:26px; height:26px; border-radius:8px; background:#eef4ff; color:#0055b1;
font-size:13px; font-weight:800; font-style:normal; display:flex; align-items:center; justify-content:center; }
.kf-tf__steps span{ display:block; padding-top:1px; }
.kf-tf__steps b{ display:block; font-size:14px; font-weight:800; line-height:19px; letter-spacing:-.03em; color:#16263d; }
.kf-tf__steps small{ display:block; margin-top:0; font-size:13px; line-height:20px; letter-spacing:-.02em; color:#5b7290; }
/* 업로드 */
.kf-tf__drop{ margin-top:10px; border:2px dashed #b9cde8; border-radius:14px; background:#f5f9ff;
padding:26px 16px; text-align:center; cursor:pointer; transition:border-color .15s,background .15s; }
.kf-tf__drop.is-over{ border-color:#0055b1; background:#eef4ff; }
.kf-tf__dropico{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 auto;
border-radius:15px; background:#eef4ff; }
.kf-tf__drop b{ display:block; margin-top:8px; font-size:15px; font-weight:800; line-height:20px; letter-spacing:-.03em; color:#16263d; }
.kf-tf__drop small{ display:block; margin-top:4px; font-size:12.5px; line-height:19px; letter-spacing:-.02em; color:#5b7290; }
.kf-tf__pick{ margin-top:14px; border:0; border-radius:12px; background:#0055b1; color:#fff; cursor:pointer;
font-size:14.5px; font-weight:800; letter-spacing:-.02em; padding:0 26px; height:48px; }
.kf-tf__pick:active{ transform:translateY(1px); }
.kf-tf__file{ display:flex; align-items:center; gap:11px; margin-top:11px; padding:11px 13px; border:1px solid #e9eef5;
border-radius:14px; background:#f8fafd; }
.kf-tf__fico{ flex:0 0 44px; width:44px; height:44px; border-radius:11px; background:#eef2f7;
display:flex; align-items:center; justify-content:center; }
.kf-tf__ftx{ flex:1 1 auto; min-width:0; }
.kf-tf__ftx b{ display:block; font-size:14px; font-weight:800; line-height:19px; letter-spacing:-.02em; color:#16263d;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-tf__ftx small{ display:block; margin-top:1px; font-size:12px; line-height:17px; color:#7b8ea6; }
.kf-tf__fbadge{ flex:0 0 auto; font-style:normal; font-size:12px; font-weight:800; letter-spacing:-.02em;
padding:6px 10px; border-radius:9px; background:#eef2f7; color:#5b7290; }
.kf-tf__fbadge.is-ok{ background:#e7f7ee; color:#0f6b41; }
.kf-tf__fbadge.is-ok::before{ content:'✓ '; }
.kf-tf__fbadge.is-bad{ background:#fdecec; color:#b42318; }
.kf-tf__err{ margin:10px 0 0; font-size:12.5px; line-height:19px; color:#b42318; font-weight:700; }
/* AI 판독 결과 (다크) — 실측: 카드 816~1028.5 · 좌박스 864~955 · 우박스 868~951(중앙정렬) */
.kf-tf__res{ background:linear-gradient(180deg,#0e2c53 0%,#0f3059 100%); border-radius:16px; padding:14px 16px 16px; }
.kf-tf__resh{ display:block; font-size:13px; font-weight:800; line-height:17px; letter-spacing:-.02em; color:#b7c0cc; }
.kf-tf__cmp{ display:flex; align-items:center; gap:9px; margin-top:17px; }
.kf-tf__from,.kf-tf__to{ flex:1 1 0; min-width:0; border-radius:13px; }
.kf-tf__from{ background:#0b2545; padding:6px 13px; }
.kf-tf__to{ background:#274f80; border:1px solid #5b8dc4; padding:11.25px 13px; }
.kf-tf__cmp small{ display:block; font-size:12px; font-weight:700; line-height:16px; letter-spacing:-.02em; color:#9ea8b5; }
.kf-tf__cmp b{ display:block; margin-top:4px; font-size:18px; font-weight:850; line-height:21px; letter-spacing:-.04em; color:#fff; }
.kf-tf__cmp em{ display:block; margin-top:1.5px; font-style:normal; font-size:12px; font-weight:700; line-height:16px; letter-spacing:-.02em; color:#8693a4; }
.kf-tf__to small,.kf-tf__to em{ color:#8ec5ff; }
.kf-tf__arw{ flex:0 0 20px; align-self:center; }
.kf-tf__note{ margin:17px 0 0; font-size:12.5px; line-height:20px; letter-spacing:-.03em; color:#b6c9e0; }
.kf-tf__note b{ color:#fff; font-weight:800; }
.kf-tf__submit{ display:block; width:100%; height:56px; border:0; border-radius:14px; background:#0055b1; color:#fff;
font-size:16px; font-weight:850; letter-spacing:-.03em; cursor:pointer; box-shadow:0 3px 10px rgba(0,85,177,.24); }
.kf-tf__submit:active{ transform:translateY(1px); }
.kf-tf__submit:disabled{ opacity:.6; cursor:default; }
/* 심사 중 */
.kf-tf__pend{ text-align:center; padding:24px 18px 20px !important; }
.kf-tf__pendico{ display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin:0 auto 12px;
border-radius:17px; background:#fff5dd; }
.kf-tf__pend > b{ display:block; font-size:19px; font-weight:850; letter-spacing:-.035em; color:#16263d; }
.kf-tf__pend > p{ margin:8px 0 0; font-size:13.5px; line-height:21px; letter-spacing:-.02em; color:#5b7290; }
.kf-tf__pend > p b{ color:#0055b1; font-weight:800; }
.kf-tf__go{ display:flex; align-items:center; justify-content:center; height:50px; margin-top:16px; border-radius:13px;
background:#0055b1; color:#fff !important; font-size:15px; font-weight:800; letter-spacing:-.02em; text-decoration:none !important; }
.kf-tf__ghost{ display:flex; align-items:center; justify-content:center; height:46px; margin-top:8px; border-radius:13px;
background:#eef2f7; color:#3d557a !important; font-size:14px; font-weight:800; text-decoration:none !important; }
/* ── 데스크톱 (5차 시안 기준 · 1240 캔버스) ────────────────
시안 실측: 히어로 높이 137 · 히어로 텍스트 좌측 70 · 콘텐츠 640 중앙 · 히어로→첫카드 20
글자 크기는 모바일과 같다 (여백만 커진다) — 4차 데스크톱 시안은 모바일을 늘린 것이라 따르지 않는다 */
@media (min-width:761px){
/* 테마 컨테이너(max-width:1100 + main 좌우 24)가 히어로를 가둔다 — 시안은 배경이 화면 전체 폭 */
.site-main:has(.kf-tf){ padding-left:0 !important; padding-right:0 !important; max-width:none; }
.entry-content:has(.kf-tf){ max-width:none; }
/* 컨테이너를 이미 풀었으니 100vw 탈출 트릭은 끈다 —
100vw 는 스크롤바를 포함해 15px 넘쳐서 가로 스크롤을 만든다 */
.kf-tf{ position:static; left:auto; transform:none; width:auto; max-width:none; }
/* 값은 시안 HTML(.dc.html)의 isM 분기에서 그대로 가져왔다 — 추측하지 않는다.
3·4·5차 공통: heroPad 26/24/30 (안쪽 1100 중앙) · bodyPad 20/24/30 · bodyW 660
cardPad 18/20 · h1 27px · gap 11 */
/* 시안은 padding 이 바깥(hero), max-width:1100 이 안쪽이라 텍스트가 x=70 에서 시작한다.
라이브는 한 요소에 둘 다 있어 x=94 가 됐다 → 1100+48 로 폭을 키워 같은 위치로 만든다 */
.kf-tf__heroin{ max-width:1148px; padding:26px 24px 30px; }
.kf-tf__hero h1{ font-size:27px; line-height:33px; }
.kf-tf__hero p{ font-size:13px; line-height:20px; margin-top:6px; }
/* 시안 crumb: 11.5px · 아래 여백 8 (모바일 13px/5 와 다르다) */
.kf-tf__hero .kf-apply__crumb{ font-size:11.5px; line-height:14px; margin-bottom:8px; }
.kf-tf__body{ max-width:708px; margin:0 auto; padding:20px 24px 30px; gap:11px; }
.kf-tf__body .kf-panel{ padding:18px 20px; }
/* 하단 버튼바도 본문과 같은 컬럼에 맞춘다 */
.kf-ad5__bar,.kf-d5__bar{ max-width:708px; margin:0 auto; padding:0 24px 30px; }
}
/* 등급 이전 — 테마 페이지 제목·좌우 패딩 제거 (자체 히어로) */
body.page-grade-transfer .page-title,
body.page-grade-transfer .kf-page__banner,
body.page-grade-transfer .ks-page-banner,
body.page-grade-transfer .kf-subhero{ display:none !important; }
body.page-grade-transfer .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
.kf-tf__hero{ margin-top:0 !important; }
/* ══ 4차 · 등급 이전 접수 완료 /grade-transfer/done/ (screens4/02-grade) ══
실측(390px): 히어로 110 · 접수 124~300 · 심사 311~488 · 요약 499~671
안내 682~748 · CTA 759~812.5(54) */
.kf-tfd__hd{ text-align:center; padding:24px 16px 24px !important; }
.kf-tfd__ico{ display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin:0 auto;
border-radius:50%; background:#f2f7fd; border:1px solid #cfe0f7; }
.kf-tfd__hd > b{ display:block; margin-top:11px; font-size:20px; font-weight:850; line-height:26px; letter-spacing:-.04em; color:#16263d; }
.kf-tfd__hd > em{ display:inline-block; margin-top:9px; padding:0 16px; height:29px; line-height:29px; border-radius:9px;
background:#f2f7fd; font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.01em; color:#16263d; }
/* 심사 진행 타임라인 */
.kf-tfd__tl{ list-style:none; margin:9px 0 0; padding:0; }
.kf-tfd__tl li{ display:flex; gap:11px; margin:0 0 9px !important; }
.kf-tfd__tl li:last-child{ margin-bottom:0 !important; }
.kf-tfd__tl i{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; border:2px solid #dbe3ee; background:#fff;
display:flex; align-items:center; justify-content:center; margin-top:1px; }
.kf-tfd__tl li.is-done i{ background:#1f9d55; border-color:#1f9d55; }
.kf-tfd__tl li.is-now i{ border-color:#0055b1; border-width:2.5px; }
.kf-tfd__tl b{ display:block; font-size:14px; font-weight:800; line-height:18px; letter-spacing:-.03em; color:#8a9cb4; }
.kf-tfd__tl small{ display:block; font-size:12px; font-weight:600; line-height:17px; letter-spacing:-.02em; color:#8a9cb4; }
.kf-tfd__tl li.is-done b{ color:#16263d; }
.kf-tfd__tl li.is-now b{ color:#0055b1; }
.kf-tfd .kf-panel:has(.kf-tfd__tl){ padding-bottom:13px !important; }
/* 요약 4행 */
.kf-tfd__sum{ padding:4px 16px 15px !important; }
.kf-tfd__sum > div{ display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:9.25px 0; border-bottom:1px solid #eef2f7; }
.kf-tfd__sum > div:last-child{ border-bottom:0; }
.kf-tfd__sum span{ font-size:13.5px; font-weight:600; line-height:19px; letter-spacing:-.02em; color:#5b7290; }
.kf-tfd__sum b{ font-size:13.5px; font-weight:800; line-height:19px; letter-spacing:-.02em; color:#16263d; text-align:right; }
.kf-tfd__sum b.is-blue{ color:#0055b1; }
/* 안내 박스 */
.kf-tfd__note{ display:flex; gap:9.5px; padding:10px 16px 13px; border:1px solid #cfe0f7; border-radius:13px; background:#f2f7fd; }
.kf-tfd__note svg{ flex:0 0 17px; margin-top:2px; }
.kf-tfd__note p{ margin:0; font-size:13px; line-height:20px; letter-spacing:-.025em; color:#5b7290; }
.kf-tfd__note p b{ color:#16263d; font-weight:800; }
a.kf-tfd__go{ display:flex; align-items:center; justify-content:center; height:54px; text-decoration:none !important;
color:#fff !important; font-size:16px; }
/* ══ 2차 · 이용후기 /reviews/ (screens2/07-review) ═══════════════
실측(390px): 히어로 113 · 요약 127~215 · 칩 226~261(35) · 카드 gap 11 */
.kf-rv__sum{ display:flex; align-items:stretch; gap:0; padding:13px 16px 14px 0 !important; }
.kf-rv__score{ flex:0 0 97.5px; display:flex; flex-direction:column; align-items:center; justify-content:center;
border-right:1px solid #eef2f7; }
.kf-rv__score > b{ display:block; font-size:29px; font-weight:850; line-height:33px; letter-spacing:-.05em; color:#16263d; }
.kf-rv__meta{ flex:1 1 auto; min-width:0; padding-left:12px; }
.kf-rv__meta > b{ display:block; font-size:15px; font-weight:800; line-height:20px; letter-spacing:-.03em; color:#16263d; }
.kf-rv__meta > p{ margin:1px 0 0; font-size:12.8px; line-height:19px; letter-spacing:-.02em; color:#94a3b6; }
.kf-rv__meta > p b{ color:#0055b1; font-weight:800; }
.kf-rv__stars{ display:inline-flex; gap:1px; font-size:11px; line-height:1; color:#dbe3ee; }
.kf-rv__stars i{ font-style:normal; }
.kf-rv__stars i.is-on{ color:#f5a623; }
.kf-rv__stars--sum{ margin-top:6px; font-size:12.7px; gap:2px; }
.kf-rv__chips{ display:flex; gap:9px; overflow-x:auto; scrollbar-width:none; margin:0 -14px; padding:0 14px 1px; }
.kf-rv__chips::-webkit-scrollbar{ display:none; }
.kf-rv__chip{ flex:0 0 auto; display:inline-flex; align-items:center; height:35px; padding:0 17px; border-radius:18px;
background:#fff; border:1px solid #e2eaf4; color:#3c4f68 !important; text-decoration:none !important;
font-size:13px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.kf-rv__chip.is-on{ background:#0055b1; border-color:#0055b1; color:#fff !important; }
.kf-rv__card{ padding:15px !important; }
.kf-rv__hd{ display:flex; align-items:flex-start; gap:9.5px; }
.kf-rv__av{ flex:0 0 34px; width:34px; height:34px; border-radius:10px; background:#eef4ff; color:#0055b1;
display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.kf-rv__who{ flex:1 1 auto; min-width:0; }
.kf-rv__who > b{ display:block; font-size:13.5px; font-weight:800; line-height:17.5px; letter-spacing:-.03em; color:#16263d; }
.kf-rv__line{ display:flex; align-items:center; gap:7px; margin-top:1px; line-height:15px; }
.kf-rv__line time{ font-size:11.5px; line-height:15px; font-weight:500; letter-spacing:-.01em; color:#8a9cb4; font-variant-numeric:tabular-nums; }
.kf-rv__ctr{ flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; border-radius:9px;
background:#f2f7fd; border:1px solid #d2e1f3; font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:-.02em; color:#0055b1; }
.kf-rv__body{ margin:11px 0 0; font-size:13.75px; line-height:22px; letter-spacing:-.025em; color:#3c4f68; }
.kf-rv__ph{ display:flex; gap:8.5px; margin-top:13.5px; }
.kf-rv__phi{ flex:0 0 69.5px; width:69.5px; height:70px; border-radius:12px; background:#e9eff7 center/cover no-repeat;
display:flex; align-items:center; justify-content:center; }
.kf-rv__ft{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11.75px;
padding-top:10.5px; border-top:1px solid #f0f4f9; }
.kf-rv__help{ display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:0; cursor:pointer;
font-size:12.5px; font-weight:600; line-height:14px; letter-spacing:-.02em; color:#5b7290; }
.kf-rv__help svg{ width:14px; height:14px; }
.kf-rv__help b{ font-weight:600; }
/* 눌림 상태 — 엄지가 파랗게 차오르고 한 번 통통 튄다. 다시 누르면 튕기기만(중복 반영 안 됨) */
.kf-rv__help.is-on{ color:#0055b1; }
.kf-rv__help.is-on b{ font-weight:800; color:#0055b1; }
.kf-rv__help.is-on svg{ fill:#0055b1; stroke:#0055b1; }
.kf-rv__help.is-pop svg{ animation:kf-help-pop 300ms cubic-bezier(.22,1,.36,1); }
@keyframes kf-help-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.3) rotate(-8deg)} 100%{transform:scale(1)} }
.kf-rv__ok{ font-size:12.5px; line-height:14px; font-weight:600; letter-spacing:-.02em; color:#a7b5c7; }
.kf-rv__empty{ text-align:center; padding:34px 20px !important; }
.kf-rv__empty b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.03em; color:#16263d; }
.kf-rv__empty p{ margin:9px 0 0; font-size:13px; line-height:21px; color:#5b7290; }
.kf-rv__pg{ display:flex; gap:6px; justify-content:center; }
.kf-rv__pgdot{ display:inline-flex; align-items:flex-end; padding:0 2px; color:#9db2ca; font-size:13px; }
.kf-rv__pgn--nav{ font-size:17px; line-height:1; }
.kf-rv__pgn{ display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid #e2eaf4;
border-radius:9px; background:#fff; color:#5b7290 !important; text-decoration:none !important; font-size:13.5px; font-weight:700; }
.kf-rv__pgn.is-on{ background:#0055b1; border-color:#0055b1; color:#fff !important; }
a.kf-rv__write{ display:flex; align-items:center; justify-content:center; height:52px; border-radius:14px; background:#0055b1;
color:#fff !important; text-decoration:none !important; font-size:15px; font-weight:800; letter-spacing:-.02em; }
a.kf-rv__write--ghost{ background:#fff; border:1px solid #d2e1f3; color:#0055b1 !important; }
.kf-rv__gate{ margin:0; text-align:center; font-size:12.5px; color:#8a9cb4; }
body.page-reviews .page-title,
body.page-reviews .kf-page__banner,
body.page-reviews .ks-page-banner,
body.page-reviews .kf-subhero{ display:none !important; }
body.page-reviews .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
@media (min-width:761px){
.kf-rv__card{ padding:20px 24px !important; }
.kf-rv__body{ font-size:15px; line-height:26px; }
}
/* ══ 3차 · 마이페이지 등급·예치금 카드 + 진행현황 칩 (screens3/01-my) ══
실측(390px): 등급카드 330~449(119) · 예치금 457.5~575 · 진행현황 586~697 */
.kf-todo__hd{ justify-content:space-between; }
.kf-todo__hd em{ font-style:normal; font-size:12px; font-weight:800; letter-spacing:-.02em; color:#a33522;
background:#fdece7; border-radius:8px; padding:5px 10px; }
.kf-todo__pay{ flex:none; display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 17px;
border-radius:10px; background:#0055b1; color:#fff !important; text-decoration:none !important;
font-size:14px; font-weight:800; letter-spacing:-.02em; }
.kf-todo__pay:hover{ background:#00478f; }
/* 등급 카드 */
a.kf-gcard{ display:block; border-radius:16px; padding:12.5px 15px 15px; text-decoration:none !important;
background:linear-gradient(100deg,#0d2b50 0%,#123c70 100%); box-shadow:0 2px 10px rgba(11,30,60,.18); }
.kf-gcard__top{ display:flex; align-items:center; gap:9px; line-height:20px; }
.kf-gcard__badge{ display:inline-flex; align-items:center; height:20px; padding:0 9px; border-radius:6px;
font-size:10.5px; font-weight:850; letter-spacing:.06em; color:#fff; }
.kf-gcard__name{ font-size:16px; font-weight:850; line-height:20px; letter-spacing:-.035em; color:#fff; }
.kf-gcard__go{ margin-left:auto; }
.kf-gcard__rate{ display:block; margin-top:7.5px; font-size:13px; font-weight:700; letter-spacing:-.02em; color:#c3d8f0; line-height:30px; }
.kf-gcard__rate b{ font-size:26px; font-weight:850; letter-spacing:-.04em; color:#8ec5ff; margin-right:5px; }
.kf-gcard__meta{ display:flex; align-items:center; justify-content:space-between; margin-top:2.5px; line-height:17px; }
.kf-gcard__meta em{ font-style:normal; font-size:12.5px; font-weight:600; line-height:17px; letter-spacing:-.02em; color:#9db8d8; }
.kf-gcard__meta b{ font-weight:800; color:#dce9f8; }
.kf-gcard__bar{ display:block; height:6px; margin-top:3.5px; border-radius:3px; background:#365479; overflow:hidden; }
.kf-gcard__bar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#4a9bef 0%,#8ec5ff 100%); }
/* 예치금 카드 */
a.kf-dcard{ display:block; border-radius:16px; padding:15px; background:#fff; text-decoration:none !important;
box-shadow:0 1px 3px rgba(16,38,61,.05); }
.kf-dcard__hd{ display:flex; align-items:center; gap:8.5px; }
.kf-dcard__ico{ flex:0 0 26px; width:26px; height:26px; border-radius:8px; background:#eef4ff;
display:flex; align-items:center; justify-content:center; }
.kf-dcard__hd b{ font-size:15px; font-weight:800; letter-spacing:-.03em; color:#16263d; }
.kf-dcard__go{ margin-left:auto; }
.kf-dcard__amt{ display:block; margin-top:6px; font-size:22.5px; font-weight:850; line-height:30px; letter-spacing:-.045em; color:#0055b1; }
.kf-dcard__note{ display:block; margin-top:7.5px; font-size:12px; line-height:20px; letter-spacing:-.025em; color:#5b7290; }
/* 예치금 자리를 대신하는 등급 이전 배너 — 숫자가 아닌 문구가 오므로 한 급 작게 (지시 2026-08-12) */
.kf-tcard__amt{ font-size:19px; line-height:27px; letter-spacing:-.04em; }
/* 진행 현황 — 4+3 줄바꿈 → 가로 스크롤 칩 (QA v2) */
.kf-pipe__hd{ align-items:baseline; }
.kf-pipe__hint{ margin-left:auto; font-size:12px; font-weight:600; letter-spacing:-.02em; color:#9db2ca; }
.kf-pipe{ display:flex; gap:8px; overflow-x:auto; margin:5.5px -15px 0; padding:0 15px 8px;
scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.kf-pipe::-webkit-scrollbar{ height:7px; }
.kf-pipe::-webkit-scrollbar-track{ background:#f2f4f7; border-radius:4px; }
.kf-pipe::-webkit-scrollbar-thumb{ background:#c4c9d1; border-radius:4px; }
.kf-pipe__step{ flex:0 0 auto; display:flex; flex-direction:row; align-items:center; gap:8px; height:44px; padding:0 16px;
border-radius:22px; border:1px solid #cfe0f7; background:#eff5fc; cursor:pointer; font-family:inherit; }
.kf-pipe__step i{ width:7px; height:7px; border-radius:50%; background:#5b7290; }
.kf-pipe__lb{ font-size:14px; font-weight:800; letter-spacing:-.03em; color:#16263d; white-space:nowrap; }
.kf-pipe__n{ font-size:14px; font-weight:850; line-height:1; letter-spacing:-.02em; color:#0055b1; font-variant-numeric:tabular-nums; }
.kf-pipe__step.is-zero{ border-color:#e5eaf1; background:#fff; cursor:default; }
.kf-pipe__step.is-zero i{ background:#cfd6e0; }
.kf-pipe__step.is-zero .kf-pipe__lb,
.kf-pipe__step.is-zero .kf-pipe__n{ color:#8a9cb4; }
.kf-pipe__step.is-on{ border-color:#0055b1; background:#0055b1; }
.kf-pipe__step.is-on i{ background:#fff; }
.kf-pipe__step.is-on .kf-pipe__lb,
.kf-pipe__step.is-on .kf-pipe__n{ color:#fff; }
/* ══ 3차 · 예치금 /deposit/ · 충전 /deposit/charge/ ══════════════ */
.kf-dep__bal{ border-radius:16px; padding:15px 15px 14.5px; background:linear-gradient(100deg,#0d2b50 0%,#123c70 100%); }
.kf-dep__bal > span{ display:block; font-size:13px; font-weight:700; line-height:17px; letter-spacing:-.02em; color:#9db8d8; }
.kf-dep__bal > b{ display:block; margin-top:0; font-size:29px; font-weight:850; line-height:35px; letter-spacing:-.05em; color:#fff; }
.kf-dep__btns{ display:flex; gap:9px; margin-top:16px; }
a.kf-dep__charge{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; height:48px; border-radius:13px;
background:#fff; color:#0055b1 !important; font-size:15.5px; font-weight:850; letter-spacing:-.03em; text-decoration:none !important; }
a.kf-dep__refund{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:48px; padding:0 16px;
border-radius:13px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34);
color:#fff !important; font-size:15.5px; font-weight:800; letter-spacing:-.03em; text-decoration:none !important; }
.kf-dep__note{ padding-top:12px; }
.kf-dep__note p{ color:#3c4f68; }
.kf-dep__loghd{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kf-dep__seg{ display:flex; gap:2px; padding:3px; border-radius:11px; background:#f1f5fa; }
.kf-dep__seg button{ border:0; background:none; border-radius:9px; padding:7px 14px; cursor:pointer; font-family:inherit;
font-size:13px; font-weight:800; letter-spacing:-.02em; color:#7b8ea6; }
.kf-dep__seg button.is-on{ background:#fff; color:#16263d; box-shadow:0 1px 3px rgba(16,38,61,.12); }
.kf-dep__list{ list-style:none; margin:4px 0 0; padding:0; }
.kf-dep__list li{ display:flex; align-items:center; gap:11px; margin:0 !important; padding:9.5px 0; border-top:1px solid #eef2f7; }
.kf-dep__list li:first-child{ border-top:0; }
.kf-dep__list i{ flex:0 0 34px; width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.kf-dep__list i.is-in{ background:#e8f6ee; color:#1f9d55; }
.kf-dep__list i.is-out{ background:#eef4ff; color:#5b8ac8; }
.kf-dep__t{ flex:1 1 auto; min-width:0; }
.kf-dep__t b{ display:block; font-size:14px; font-weight:800; line-height:19px; letter-spacing:-.03em; color:#16263d; }
.kf-dep__t small{ display:block; font-size:12px; line-height:17px; letter-spacing:-.02em; color:#8a9cb4; }
.kf-dep__v{ flex:0 0 auto; text-align:right; }
.kf-dep__v b{ display:block; font-size:15px; font-weight:850; line-height:20px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.kf-dep__v b.is-in{ color:#1f9d55; }
.kf-dep__v b.is-out{ color:#16263d; }
.kf-dep__v small{ display:block; font-size:12px; line-height:17px; color:#8a9cb4; font-variant-numeric:tabular-nums; }
.kf-dep__empty{ margin:14px 0 0; text-align:center; font-size:13px; color:#8a9cb4; }
.kf-dep__faq ul{ list-style:none; margin:4px 0 0; padding:0; }
.kf-dep__faq li{ position:relative; margin:0 !important; padding:8px 0 8px 12px; border-top:1px solid #eef2f7;
font-size:13px; line-height:20px; letter-spacing:-.025em; color:#3c4f68; }
.kf-dep__faq li:first-child{ border-top:0; }
.kf-dep__faq li::before{ content:''; position:absolute; left:1px; top:16px; width:5px; height:5px; border-radius:50%; background:#b9cde8; }
.kf-chg .kf-tf__body .kf-panel{ padding:15px; }
.kf-chg__amt{ display:flex; align-items:center; gap:11px; margin-top:14px; height:60px; padding:0 18px;
border:1.5px solid #0055b1; border-radius:14px; background:#f7fafd; }
.kf-chg__amt span{ font-size:22px; font-weight:850; color:#0055b1; }
.kf-chg__amt input{ flex:1 1 auto; min-width:0; border:0; background:none; outline:none; font-family:inherit;
font-size:28px; font-weight:850; letter-spacing:-.04em; color:#16263d; }
.kf-chg__pre{ display:grid; grid-template-columns:repeat(3,1fr); gap:7.5px; margin-top:10px; }
.kf-chg__p{ height:46px; border:1px solid #e0e8f2; border-radius:12px; background:#fff; cursor:pointer; font-family:inherit;
font-size:14.5px; font-weight:800; letter-spacing:-.03em; color:#3c4f68; }
.kf-chg__p.is-on{ background:#0055b1; border-color:#0055b1; color:#fff; }
.kf-chg__after{ display:flex; align-items:center; justify-content:space-between; margin-top:15.5px; padding-top:10.5px;
border-top:1px solid #eef2f7; line-height:25px; }
.kf-chg__after span{ font-size:14px; font-weight:600; letter-spacing:-.02em; color:#8a9cb4; }
.kf-chg__after b{ font-size:18px; font-weight:850; letter-spacing:-.04em; color:#0055b1; }
.kf-chg__pm{ display:flex; flex-direction:column; gap:7.5px; margin-top:11px; }
.kf-chg__m{ display:flex; align-items:center; gap:9px; height:47px; padding:0 14px; border:1px solid #e0e8f2;
border-radius:13px; background:#fff; cursor:pointer; }
.kf-chg__m.is-on{ border-color:#0055b1; border-width:1.5px; background:#f4f9ff; }
.kf-chg__m input{ position:absolute; opacity:0; pointer-events:none; }
.kf-chg__m i{ flex:0 0 19px; width:19px; height:19px; border-radius:50%; border:2px solid #cfd8e4; }
.kf-chg__m.is-on i{ border-color:#0055b1; border-width:6px; }
.kf-chg__m span{ font-size:14px; font-weight:800; letter-spacing:-.03em; color:#3c4f68; }
.kf-chg__m.is-on span{ color:#0055b1; }
body.page-deposit .page-title, body.page-charge .page-title,
body.page-deposit .kf-page__banner, body.page-charge .kf-page__banner,
body.page-deposit .ks-page-banner, body.page-charge .ks-page-banner,
body.page-deposit .kf-subhero, body.page-charge .kf-subhero{ display:none !important; }
body.page-deposit .entry-content, body.page-charge .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* ══ 4차 · 충전 완료 · 환불 신청 (screens4/03-deposit) ══════════ */
.kf-cdone__hd{ text-align:center; padding:24px 16px 22px !important; }
.kf-cdone__ico{ display:flex; align-items:center; justify-content:center; width:66px; height:66px; margin:0 auto;
border-radius:50%; background:#e8f6ee; border:1px solid #bfe5cd; }
.kf-cdone__hd > b{ display:block; margin-top:14px; font-size:20px; font-weight:850; line-height:26px; letter-spacing:-.04em; color:#16263d; }
.kf-cdone__hd > em{ display:block; margin-top:6px; font-size:31px; font-weight:850; line-height:38px; letter-spacing:-.05em; color:#0055b1; font-style:normal; }
.kf-cdone__bal{ display:flex; align-items:center; justify-content:space-between; margin-top:15px; padding:0 18px;
height:56px; border-radius:13px; background:#f4f8fd; border:1px solid #e2ecf8; }
.kf-cdone__bal span{ font-size:14px; font-weight:600; letter-spacing:-.02em; color:#5b7290; }
.kf-cdone__bal b{ font-size:19px; font-weight:850; letter-spacing:-.04em; color:#16263d; }
.kf-cdone__btns{ display:flex; gap:11px; }
a.kf-cdone__ghost,a.kf-cdone__go{ flex:1 1 0; display:flex; align-items:center; justify-content:center; height:56px;
border-radius:14px; font-size:16px; font-weight:850; letter-spacing:-.03em; text-decoration:none !important; }
a.kf-cdone__ghost{ background:#fff; border:1px solid #dbe3ee; color:#16263d !important; }
a.kf-cdone__go{ background:#0055b1; color:#fff !important; }
.kf-rfd__bal em{ display:block; margin-top:6px; font-style:normal; font-size:13px; line-height:20px; letter-spacing:-.025em; color:#9db8d8; }
.kf-rfd__seg{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:11px; }
.kf-rfd__seg button{ height:57px; border:1px solid #e0e8f2; border-radius:13px; background:#fff; cursor:pointer;
font-family:inherit; font-size:15px; font-weight:800; letter-spacing:-.03em; color:#3c4f68; }
.kf-rfd__seg button.is-on{ border:1.5px solid #0055b1; background:#f4f9ff; color:#0055b1; }
.kf-rfd__amt{ display:flex; align-items:center; gap:10px; margin-top:11px; height:56px; padding:0 18px;
border:1px solid #e0e8f2; border-radius:13px; background:#f7fafd; }
.kf-rfd__amt input{ flex:1 1 auto; min-width:0; border:0; background:none; outline:none; font-family:inherit;
font-size:20px; font-weight:850; letter-spacing:-.04em; color:#16263d; }
.kf-rfd__amt span{ font-size:14px; font-weight:700; color:#5b7290; }
.kf-rfd__lb{ display:block; margin:13px 0 7px; font-size:13.5px; font-weight:800; letter-spacing:-.03em; color:#16263d; }
.kf-rfd__sel{ position:relative; line-height:0; }
.kf-rfd__sel select{ display:block; width:100%; height:54px; padding:0 42px 0 17px; border:1px solid #e0e8f2; border-radius:13px;
background:#f7fafd; font-family:inherit; font-size:15px; font-weight:600; color:#16263d; appearance:none; }
.kf-rfd__sel svg{ position:absolute; right:15px; top:50%; transform:translateY(-50%); pointer-events:none; }
.kf-rfd__in{ display:block; width:100%; box-sizing:border-box; height:54px; padding:0 17px; border:1px solid #e0e8f2; border-radius:13px;
background:#f7fafd; font-family:inherit; font-size:15px; font-weight:600; color:#16263d; }
.kf-rfd__in.is-focus,.kf-rfd__in:focus{ border:1.5px solid #0055b1; background:#fff; outline:none; }
.kf-rfd__hint{ margin:8px 0 0; font-size:12.5px; letter-spacing:-.02em; color:#9db2ca; }
body.page-refund .page-title, body.page-done .page-title,
body.page-refund .kf-page__banner, body.page-done .kf-page__banner,
body.page-refund .ks-page-banner, body.page-done .ks-page-banner,
body.page-refund .kf-subhero, body.page-done .kf-subhero{ display:none !important; }
body.page-refund .entry-content, body.page-done .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* ══ 3차 · 상담 채널 /support/ + 플로팅 문의 버튼 (screens3/05-support) ══
실측(390px): 히어로 90 · 패널 104~397 · 채널행 h63 gap 9.5 · 아이콘 34 */
.kf-sup__sub{ margin:4px 0 0; font-size:13.5px; line-height:19px; letter-spacing:-.025em; color:#5b7290; }
a.kf-sup__row{ display:flex; align-items:center; gap:21px; margin-top:9.5px; min-height:61.5px; padding:10px 16px;
border:1px solid #e2eaf4; border-radius:14px; background:#fff; text-decoration:none !important; }
a.kf-sup__row:first-of-type{ margin-top:15.5px; }
.kf-sup__ico{ flex:0 0 34px; width:34px; height:34px; border-radius:11px; background:#eef4ff;
display:flex; align-items:center; justify-content:center; }
.kf-sup__tx{ flex:1 1 auto; min-width:0; }
.kf-sup__tx b{ display:block; font-size:15.5px; font-weight:850; line-height:20px; letter-spacing:-.035em; color:#16263d; }
.kf-sup__tx small{ display:block; margin-top:1px; font-size:12.7px; line-height:19px; letter-spacing:-.025em; color:#5b7290; }
a.kf-sup__row--kko{ background:#fee500; border-color:#fee500; }
.kf-sup__row--kko .kf-sup__ico{ background:rgba(0,0,0,.08); }
.kf-sup__row--kko .kf-sup__tx b{ color:#191600; }
.kf-sup__row--kko .kf-sup__tx small{ color:#4a4400; }
/* 플로팅 문의 버튼 — 하단 고정 바가 있는 화면(신청서·결제)에서는 72px 위로 */
a.kf-fab{ position:fixed; right:16px; bottom:16px; z-index:60; display:inline-flex; align-items:center; gap:7px;
height:52px; padding:0 21px; border-radius:26px; background:#fee500; color:#191600 !important;
text-decoration:none !important; font-size:15px; font-weight:850; letter-spacing:-.03em;
box-shadow:0 6px 18px rgba(20,30,50,.22); }
a.kf-fab:active{ transform:translateY(1px); }
a.kf-fab--lift{ bottom:88px; }
@media (min-width:761px){ a.kf-fab{ right:28px; bottom:28px; } a.kf-fab--lift{ bottom:100px; } }
body.page-support .page-title, body.page-support .kf-page__banner,
body.page-support .ks-page-banner, body.page-support .kf-subhero{ display:none !important; }
body.page-support .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* ══ 4차 · 1:1 문의 /contact/ · 접수완료 /contact/done/ (screens4/04-support) ══ */
.kf-ask__err{ margin:0; padding:13px 15px; border-radius:12px; background:#fdecec; border:1px solid #f6cdc6;
font-size:13px; font-weight:700; color:#b42318; }
.kf-ask__chips{ display:flex; flex-wrap:wrap; gap:6.5px; margin-top:9px; }
.kf-ask__chip{ height:36px; padding:0 13.5px; border-radius:18px; border:1px solid #e2eaf4; background:#fff; cursor:pointer;
font-family:inherit; font-size:13.5px; font-weight:800; letter-spacing:-.03em; color:#3c4f68; }
.kf-ask__chip.is-on{ background:#0055b1; border-color:#0055b1; color:#fff; }
.kf-ask__lb{ display:block; margin:13.5px 0 3.5px; font-size:14px; line-height:18px; font-weight:800; letter-spacing:-.03em; color:#16263d; }
.kf-ask__lb:first-child{ margin-top:0; }
.kf-ask__lb em{ font-style:normal; font-size:12.5px; font-weight:600; color:#9db2ca; margin-left:3px; }
.kf-ask__lb i{ display:inline-block; margin-left:4px; padding:3px 7px; border-radius:6px; background:#fdecec;
font-style:normal; font-size:11px; font-weight:800; color:#b42318; vertical-align:2px; }
.kf-ask__in{ margin:0; }
.kf-ask__ta{ display:block; width:100%; box-sizing:border-box; padding:14px 16px; border:1px solid #e0e8f2; border-radius:13px;
background:#f7fafd; font-family:inherit; font-size:14.5px; line-height:25px; color:#16263d; resize:vertical; }
.kf-ask__ta:focus{ border:1.5px solid #0055b1; background:#fff; outline:none; }
.kf-ask__cnt{ margin:7px 0 0; text-align:right; font-size:12.5px; color:#9db2ca; font-variant-numeric:tabular-nums; }
.kf-ask__ph{ display:flex; gap:11px; margin-top:2px; }
.kf-ask__thumb{ flex:0 0 74px; width:74px; height:74px; border-radius:13px; background:#e9eff7 center/cover no-repeat; }
.kf-ask__add{ flex:0 0 74px; width:74px; height:74px; border:1.5px dashed #b9cde8; border-radius:13px; background:#f7fafd;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; }
.kf-ask__add small{ font-size:11.5px; font-weight:800; color:#0055b1; }
.kf-ask__rep{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.kf-ask__rep .kf-chg__m{ height:47px; }
.kf-ask__rep .kf-chg__m.is-off{ opacity:.5; }
.kf-ask__foot{ margin:11px 0 0; text-align:center; font-size:12.5px; letter-spacing:-.02em; color:#9db2ca; }
.kf-askd__ico{ background:#eef4ff !important; border-color:#cfe0f7 !important; }
.kf-askd__ref{ color:#0055b1 !important; font-size:15px !important; line-height:29px !important;
background:#eef4ff !important; padding:0 17px !important; border-radius:9px !important; letter-spacing:-.01em !important; }
.kf-askd__p{ margin:13px 0 0; font-size:14px; line-height:23px; letter-spacing:-.025em; color:#5b7290; }
.kf-askd__p b{ color:#16263d; font-weight:800; }
.kf-askd__warn{ display:flex; gap:10px; padding:13px 15px; border:1px solid #f0dfae; border-radius:13px; background:#fdf7e7; }
.kf-askd__warn svg{ flex:0 0 18px; margin-top:2px; }
.kf-askd__warn p{ margin:0; font-size:13px; line-height:21px; letter-spacing:-.025em; color:#7a6320; }
.kf-askd__warn p b{ color:#5c4a10; font-weight:800; }
body.page-contact .page-title, body.page-contact .kf-page__banner,
body.page-contact .ks-page-banner, body.page-contact .kf-subhero{ display:none !important; }
body.page-contact .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
.kf-ask .kf-rfd__in, .kf-ask .kf-rfd__sel select{ height:52px; }
.kf-ask .kf-tf__body .kf-panel{ padding-top:13.5px; }
/* ══ 4차 · 가입완료 · 비번 재설정 2단계 · 후기작성 (screens4/01·05) ══ */
.kf-jd__ok{ text-align:center; padding:24px 18px 22px !important; }
.kf-jd__ico{ display:flex; align-items:center; justify-content:center; width:58px; height:58px; margin:0 auto;
border-radius:50%; background:#e8f6ee; border:1px solid #bfe5cd; }
.kf-pws__ico{ background:#eef4ff !important; border-color:#cfe0f7 !important; }
.kf-pwr__bad{ background:#fdecec !important; border-color:#f6cdc6 !important; }
.kf-jd__ok > b{ display:block; margin-top:13px; font-size:19px; font-weight:850; line-height:26px; letter-spacing:-.04em; color:#16263d; }
.kf-jd__ok > p{ margin:8px 0 0; font-size:13.5px; line-height:21px; letter-spacing:-.025em; color:#5b7290; }
.kf-jd__ok > .kf-tf__go{ margin-top:16px; }
.kf-pws__mail{ display:block; margin-top:7px; font-style:normal; font-size:16px; font-weight:850; letter-spacing:-.03em; color:#0055b1; }
.kf-jd__box{ border-radius:16px; padding:16px 16px 15px; background:linear-gradient(100deg,#0d2b50 0%,#123c70 100%); text-align:center; }
.kf-jd__box > span{ display:block; font-size:13px; font-weight:700; letter-spacing:-.02em; color:#9db8d8; }
.kf-jd__box > b{ display:block; margin-top:4px; font-size:32px; font-weight:850; line-height:38px; letter-spacing:.02em; color:#fff; }
.kf-jd__copy{ display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; height:48px; margin-top:12px;
border:0; border-radius:13px; background:#0055b1; color:#fff; cursor:pointer; font-family:inherit;
font-size:14.5px; font-weight:800; letter-spacing:-.02em; }
.kf-jd__copy.is-ok{ background:#1f9d55; }
.kf-jd__how p{ margin:11px 0 0; font-size:12.5px; line-height:20px; letter-spacing:-.025em; color:#5b7290; }
.kf-jd__how p b{ color:#16263d; font-weight:800; }
.kf-jd__ex{ margin-top:10px; padding:12px 14px; border:1px solid #e2eaf4; border-radius:12px; background:#f7fafd; }
.kf-jd__ex small{ display:block; font-size:12px; font-weight:600; color:#8a9cb4; }
.kf-jd__ex b{ display:block; margin-top:3px; font-size:15px; font-weight:800; letter-spacing:-.02em; color:#16263d; }
.kf-jd__ex em{ font-style:normal; color:#0055b1; }
.kf-pws__hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kf-pws__re{ border:1px solid #dbe3ee; border-radius:10px; background:#fff; padding:8px 13px; cursor:pointer;
font-family:inherit; font-size:12.5px; font-weight:800; color:#3c4f68; }
.kf-pws__re:disabled{ color:#a8b4c4; cursor:default; }
.kf-pws__list{ list-style:none; margin:11px 0 0; padding:0; }
.kf-pws__list li{ position:relative; margin:0 !important; padding:7px 0 7px 14px; font-size:13px; line-height:20px;
letter-spacing:-.025em; color:#5b7290; }
.kf-pws__list li::before{ content:''; position:absolute; left:1px; top:15px; width:5px; height:5px; border-radius:50%; background:#b9cde8; }
a.kf-pws__back{ height:52px; }
.kf-pwr__who{ margin:5px 0 0; font-size:13px; line-height:20px; letter-spacing:-.025em; color:#5b7290; }
.kf-pwr__wrap{ position:relative; }
.kf-pwr__eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); border:0; background:none; cursor:pointer; padding:6px; }
.kf-pwr__ok{ position:absolute; right:14px; top:50%; transform:translateY(-50%); }
.kf-pwr__bar{ display:flex; align-items:center; gap:5px; margin-top:9px; }
.kf-pwr__bar i{ flex:1 1 0; height:5px; border-radius:3px; background:#e6ebf2; }
.kf-pwr__bar i.is-w{ background:#e0a03a; } .kf-pwr__bar i.is-m{ background:#3a8fd8; } .kf-pwr__bar i.is-s{ background:#1f9d55; }
.kf-pwr__bar b{ flex:0 0 auto; font-size:12.5px; font-weight:800; color:#a8b4c4; }
.kf-pwr__bar b.is-w{ color:#a8721c; } .kf-pwr__bar b.is-m{ color:#2d6ea8; } .kf-pwr__bar b.is-s{ color:#1f9d55; }
.kf-pwr__match{ margin:7px 0 0; font-size:12.5px; font-weight:700; color:#1f9d55; }
.kf-pwr__rules{ list-style:none; margin:13px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.kf-pwr__rules li{ position:relative; margin:0 !important; padding-left:21px; font-size:13px; line-height:19px; color:#a8b4c4; }
.kf-pwr__rules li::before{ content:'✓'; position:absolute; left:2px; top:0; font-weight:850; color:#cfd8e4; }
.kf-pwr__rules li.is-on{ color:#1f9d55; }
.kf-pwr__rules li.is-on::before{ color:#1f9d55; }
.kf-pwr__go{ margin-top:17px; }
/* 후기 작성 */
.kf-rw__item{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:14px; background:#f4f7fb; }
.kf-rw__item > span{ flex:1 1 auto; min-width:0; }
.kf-rw__item b{ display:block; font-size:15px; font-weight:800; line-height:20px; letter-spacing:-.03em; color:#16263d;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-rw__item small{ display:block; margin-top:2px; font-size:12.5px; line-height:18px; color:#7b8ea6; }
.kf-rw__star{ text-align:center; padding:20px 16px 18px !important; }
.kf-rw__star > b{ display:block; font-size:15px; font-weight:850; letter-spacing:-.035em; color:#16263d; }
.kf-rw__stars{ display:flex; justify-content:center; gap:9.5px; margin-top:13px; }
.kf-rw__stars button{ border:0; background:none; cursor:pointer; padding:0; line-height:0; }
.kf-rw__stars button svg{ fill:#dbe3ee; }
.kf-rw__stars button.is-on svg{ fill:#f5a623; }
.kf-rw__star em{ display:block; margin-top:9px; font-style:normal; font-size:13.5px; font-weight:850; letter-spacing:-.03em; color:#0055b1; }
.kf-rw__opt{ font-style:normal; font-size:12.5px; font-weight:600; color:#9db2ca; margin-left:4px; }
.kf-rw__tags{ margin-top:11px; }
.kf-rw__ta{ margin-top:11px; }
.kf-rw__ph{ margin-top:11px; }
.kf-rw__thumb.kf-thumb{ --kf-thumb:52px; }
body.page-write .page-title, body.page-write .kf-page__banner,
body.page-write .ks-page-banner, body.page-write .kf-subhero{ display:none !important; }
body.page-write .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
body.page-sent .page-title, body.page-sent .kf-page__banner,
body.page-sent .ks-page-banner, body.page-sent .kf-subhero{ display:none !important; }
body.page-sent .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
body.page-register-complete .page-title, body.page-register-complete .kf-page__banner,
body.page-register-complete .ks-page-banner, body.page-register-complete .kf-subhero{ display:none !important; }
body.page-register-complete .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* ══ 4차 · 배송 상세 /my-account/{id}/ · 현금영수증 (screens4/05-shipment) ══ */
.kf-dt__hd{ padding:15px 16px 14px !important; }
.kf-dt__hdtop{ display:flex; align-items:center; justify-content:space-between; gap:10px; line-height:30px; }
.kf-dt__hdtop > b{ font-size:19px; font-weight:850; letter-spacing:-.03em; color:#16263d; }
.kf-dt__st{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 13px; border-radius:15px;
background:#e8f6ee; font-size:12.5px; font-weight:800; letter-spacing:-.02em; color:#0f6b41; }
.kf-dt__st i{ width:6px; height:6px; border-radius:50%; background:#1f9d55; }
.kf-dt__st.is-payment_due{ background:#fdecec; color:#a33522; } .kf-dt__st.is-payment_due i{ background:#d14a36; }
.kf-dt__st.is-pending_arrival, .kf-dt__st.is-arrived, .kf-dt__st.is-inspecting{ background:#eef4ff; color:#1c5aa0; }
.kf-dt__st.is-pending_arrival i, .kf-dt__st.is-arrived i, .kf-dt__st.is-inspecting i{ background:#0055b1; }
.kf-dt__hd p{ display:flex; align-items:center; gap:7px; margin:9px 0 0; font-size:13px; letter-spacing:-.025em; color:#5b7290; }
.kf-dt__hd p img{ border-radius:2px; }
.kf-dt__tl{ list-style:none; margin:11px 0 0; padding:0; }
.kf-dt__tl li{ position:relative; display:flex; gap:12px; margin:0 !important; padding-bottom:6px; }
.kf-dt__tl li:last-child{ padding-bottom:0; }
.kf-dt__tl li::after{ content:''; position:absolute; left:10px; top:22px; bottom:-2px; width:2px; background:#e3e9f2; }
.kf-dt__tl li:last-child::after{ display:none; }
.kf-dt__tl li.is-done::after{ background:#9fdcbc; }
.kf-dt__tl i{ position:relative; z-index:1; flex:0 0 22px; width:22px; height:22px; border-radius:50%;
border:2px solid #dbe3ee; background:#fff; display:flex; align-items:center; justify-content:center; }
.kf-dt__tl li.is-done i{ background:#1f9d55; border-color:#1f9d55; }
.kf-dt__tl li.is-now i{ border-color:#0055b1; border-width:2.5px; }
.kf-dt__tl b{ display:block; font-size:14.5px; font-weight:800; line-height:19px; letter-spacing:-.03em; color:#a8b4c4; }
.kf-dt__tl small{ display:block; font-size:12.5px; line-height:18px; color:#a8b4c4; font-variant-numeric:tabular-nums; }
.kf-dt__tl li.is-done b{ color:#16263d; } .kf-dt__tl li.is-done small{ color:#7b8ea6; }
.kf-dt__tl li.is-now b{ color:#0055b1; } .kf-dt__tl li.is-now small{ color:#5b7290; }
.kf-dt__domhd{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kf-dt__refresh{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid #dbe3ee;
border-radius:10px; background:#fff; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:800; color:#3c4f68; }
.kf-dt__no{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; padding:12px 14px;
border-radius:13px; background:#eef4ff; }
.kf-dt__no small{ display:block; font-size:12px; font-weight:700; color:#5b8ac8; }
.kf-dt__no b{ display:block; margin-top:2px; font-size:17px; font-weight:850; letter-spacing:.01em; color:#0055b1; font-variant-numeric:tabular-nums; }
.kf-dt__copy{ flex:0 0 42px; width:42px; height:42px; border:1px solid #cfe0f7; border-radius:11px; background:#fff; cursor:pointer;
display:flex; align-items:center; justify-content:center; }
.kf-dt__copy.is-ok{ background:#e7f7ee; border-color:#bfe5cd; }
.kf-dt__log{ list-style:none; margin:11px 0 0; padding:0; border:1px solid #eef2f7; border-radius:13px; overflow:hidden; }
.kf-dt__log li{ display:flex; gap:13px; margin:0 !important; padding:12px 14px; border-top:1px solid #f0f4f9; }
.kf-dt__log li:first-child{ border-top:0; }
.kf-dt__log li.is-now{ background:#f4f8fd; }
.kf-dt__log time{ flex:0 0 74px; font-size:12.5px; font-weight:600; color:#8a9cb4; font-variant-numeric:tabular-nums; }
.kf-dt__log b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.03em; color:#16263d; }
.kf-dt__log li.is-now b{ color:#0055b1; }
.kf-dt__log small{ display:block; margin-top:2px; font-size:12.5px; color:#7b8ea6; }
.kf-dt__empty{ margin:11px 0 0; padding:16px; border-radius:13px; background:#f7fafd; text-align:center;
font-size:12.5px; line-height:19px; color:#8a9cb4; }
.kf-dt__ph{ display:flex; gap:9px; margin-top:11px; }
.kf-dt__phi{ flex:1 1 0; height:100px; border-radius:13px; background:#e9eff7 center/cover no-repeat; }
.kf-dt__ok{ display:flex; align-items:center; gap:8px; margin-top:11px; padding:12px 14px; border:1px solid #bfe5cd;
border-radius:12px; background:#eefaf3; font-size:13px; font-weight:700; letter-spacing:-.025em; color:#0f6b41; }
.kf-dt__fee b.is-minus{ color:#1f9d55; }
.kf-rc__use{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:11px; }
.kf-rc__u{ padding:11px 15px; border:1px solid #e0e8f2; border-radius:13px; background:#fff; cursor:pointer; }
.kf-rc__u.is-on{ border:1.5px solid #0055b1; background:#f4f9ff; }
.kf-rc__u input{ position:absolute; opacity:0; pointer-events:none; }
.kf-rc__u b{ display:block; font-size:15px; font-weight:850; line-height:21px; letter-spacing:-.03em; color:#16263d; }
.kf-rc__u.is-on b{ color:#0055b1; }
.kf-rc__u small{ display:block; margin-top:2px; font-size:12.5px; line-height:18px; color:#8a9cb4; }
.kf-rc__in{ margin-top:11px; height:56px !important; font-size:16px !important; }
.kf-rc__hint{ margin:9px 0 0; font-size:12.5px; line-height:19px; letter-spacing:-.025em; color:#9db2ca; }
body.page-receipt .page-title, body.page-receipt .kf-page__banner,
body.page-receipt .ks-page-banner, body.page-receipt .kf-subhero{ display:none !important; }
body.page-receipt .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* ══ 4차 · 주소 검색 후 상태 + 비활성 버튼 토스트 (screens4/06-apply/03·04) ══ */
#kfZip.is-fixed, #kfAddr.is-fixed, #kfAddr2.is-fixed{ border-color:#8fd3ad !important; background:#f4fbf7 !important; }
#kfAddr.is-fixed, #kfAddr2.is-fixed{ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center; background-size:16px 16px; padding-right:38px !important; }
#kfAddr2.is-need{ border:1.5px solid #0055b1 !important; background:#fff !important; }
.kf-addrhint{ margin:7px 0 0; font-size:12.5px; line-height:19px; letter-spacing:-.025em; color:#0055b1; font-weight:700; }
.kf-toast--warn{ background:#16263d; color:#fff; }
.kf-toast--warn::before{ content:'!'; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
border-radius:50%; background:#ffd44d; color:#5c4a10; font-weight:850; font-size:12px; margin-right:8px; flex:none; }
.kf-toast.is-in{ animation:kfUp .18s ease both; }
/* ══ 4차 · 임시저장 신청서 /apply-shipping/drafts/ (screens4/06-apply/01) ══ */
.kf-dr__note p{ color:#3c4f68; }
.kf-dr__card{ padding:14px 15px 15px !important; }
.kf-dr__hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kf-dr__meta{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; letter-spacing:-.02em; color:#8a9cb4; }
.kf-dr__meta img{ border-radius:2px; }
.kf-dr__del{ flex:none; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #e6ebf2; border-radius:10px; background:#f7fafd; cursor:pointer; }
.kf-dr__title{ display:block; margin-top:8px; font-size:16px; font-weight:850; line-height:21px; letter-spacing:-.035em; color:#16263d;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-dr__prog{ display:flex; align-items:baseline; justify-content:space-between; margin-top:10px; }
.kf-dr__prog span{ font-size:12.5px; font-weight:600; letter-spacing:-.02em; color:#8a9cb4; }
.kf-dr__prog b{ font-size:12.5px; font-weight:850; color:#0055b1; font-variant-numeric:tabular-nums; }
.kf-dr__bar{ height:6px; margin-top:6px; border-radius:3px; background:#eef2f7; overflow:hidden; }
.kf-dr__bar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#0055b1,#4a9bf0); }
a.kf-dr__go{ display:flex; align-items:center; justify-content:center; gap:7px; height:50px; margin-top:13px; border-radius:13px;
background:#0055b1; color:#fff !important; text-decoration:none !important; font-size:15px; font-weight:850; letter-spacing:-.03em; }
a.kf-dr__new{ height:52px; }
body.page-drafts .page-title, body.page-drafts .kf-page__banner,
body.page-drafts .ks-page-banner, body.page-drafts .kf-subhero{ display:none !important; }
body.page-drafts .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* ══ 4차 · 옵션 수정 전용 /apply-shipping/{id}/options/ (screens4/06-apply/02) ══ */
.kf-oe__note p b{ color:#0055b1; }
.kf-oe__opt{ display:flex; align-items:center; gap:12px; margin-top:7.5px; min-height:44px; padding:0 14px;
border:1px solid #e0e8f2; border-radius:13px; background:#fff; cursor:pointer; }
.kf-oe__opt:first-of-type{ margin-top:7px; }
.kf-oe__opt input{ position:absolute; opacity:0; pointer-events:none; }
.kf-oe__box{ flex:0 0 22px; width:22px; height:22px; border-radius:6px; border:2px solid #cfd8e4; background:#fff;
display:flex; align-items:center; justify-content:center; }
.kf-oe__box svg{ opacity:0; }
.kf-oe__opt.is-on{ border:1.5px solid #0055b1; background:#f4f9ff; }
.kf-oe__opt.is-on .kf-oe__box{ background:#0055b1; border-color:#0055b1; }
.kf-oe__opt.is-on .kf-oe__box svg{ opacity:1; }
.kf-oe__lb{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; letter-spacing:-.03em; color:#16263d; }
.kf-oe__opt em{ flex:0 0 auto; font-style:normal; font-size:13.5px; font-weight:850; letter-spacing:-.02em; color:#0055b1; }
.kf-oe__opt.is-free{ border-color:#bfe5cd; background:#eefaf3; cursor:default; }
.kf-oe__opt.is-free .kf-oe__box{ background:#22a45d; border-color:#22a45d; }
.kf-oe__opt.is-free .kf-oe__box svg{ opacity:1; }
.kf-oe__opt.is-free em{ color:#0f6b41; }
.kf-oe__sum{ background:#f4f8fd !important; }
.kf-oe__row{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; }
.kf-oe__row span{ font-size:14px; font-weight:600; letter-spacing:-.02em; color:#8a9cb4; }
.kf-oe__row b{ font-size:16px; font-weight:800; letter-spacing:-.03em; color:#8a9cb4; font-variant-numeric:tabular-nums; }
.kf-oe__old.is-struck{ text-decoration:line-through; }
.kf-oe__row--new span{ font-size:15px; font-weight:800; color:#16263d; }
.kf-oe__row--new b{ font-size:24px; font-weight:850; letter-spacing:-.04em; color:#0055b1; }
.kf-oe__row--new b.is-up{ color:#a33522; } .kf-oe__row--new b.is-down{ color:#1f9d55; }
.kf-oe__hint{ margin-top:13px; background:#fff !important; }
.kf-oe__btns{ display:flex; gap:11px; }
a.kf-oe__cancel{ flex:0 0 96px; display:flex; align-items:center; justify-content:center; height:56px; border-radius:14px;
background:#fff; border:1px solid #dbe3ee; color:#16263d !important; text-decoration:none !important;
font-size:16px; font-weight:800; letter-spacing:-.03em; }
.kf-oe__save{ flex:1 1 auto; height:56px; border:0; border-radius:14px; background:#0055b1; color:#fff; cursor:pointer;
font-family:inherit; font-size:16px; font-weight:850; letter-spacing:-.03em; }
/* ══ 4차 · 이용약관 · 개인정보처리방침 (screens4/07-policy) ══════ */
.kf-pol__tabhd{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.kf-pol__tabhd em{ font-style:normal; font-size:12.5px; font-weight:600; letter-spacing:-.02em; color:#8a9cb4; }
.kf-pol__tab{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:11px; }
.kf-pol__tab a{ display:flex; align-items:center; justify-content:center; height:44px; border-radius:12px;
border:1px solid #e0e8f2; background:#fff; color:#3c4f68 !important; text-decoration:none !important;
font-size:14.5px; font-weight:800; letter-spacing:-.03em; }
.kf-pol__tab a.is-on{ background:#0055b1; border-color:#0055b1; color:#fff !important; }
.kf-pol__toch{ display:block; font-size:13px; font-weight:800; letter-spacing:-.02em; color:#8a9cb4; }
.kf-pol__toc ul{ list-style:none; margin:4px 0 0; padding:0; }
.kf-pol__toc li{ margin:0 !important; border-top:1px solid #eef2f7; }
.kf-pol__toc li:first-child{ border-top:0; }
.kf-pol__toc a{ display:flex; align-items:center; gap:12px; padding:7px 0; line-height:20px; text-decoration:none !important; }
.kf-pol__toc em{ flex:0 0 auto; font-style:normal; font-size:13.5px; font-weight:850; letter-spacing:-.03em; color:#0055b1; }
.kf-pol__toc span{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; letter-spacing:-.03em; color:#16263d;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-pol__sec h2{ margin:0 0 9px; font-size:16px; font-weight:850; line-height:22px; letter-spacing:-.035em; color:#16263d; }
.kf-pol__sec p{ margin:0 0 10px; font-size:13.5px; line-height:22px; letter-spacing:-.025em; color:#3c4f68; }
.kf-pol__sec p:last-child{ margin-bottom:0; }
.kf-pol__sec ul,.kf-pol__sec ol{ margin:0; padding-left:18px; }
.kf-pol__sec li{ margin:0 0 7px !important; font-size:13.5px; line-height:22px; letter-spacing:-.025em; color:#3c4f68; }
.kf-pol__sec li:last-child{ margin-bottom:0 !important; }
.kf-pol__sec strong{ color:#16263d; font-weight:800; }
.kf-pol__sec table{ width:100%; border-collapse:collapse; font-size:13px; }
.kf-pol__sec th,.kf-pol__sec td{ padding:9px 8px; border-bottom:1px solid #eef2f7; text-align:left; color:#3c4f68; }
.kf-pol__sec th{ font-weight:800; color:#16263d; background:#f7fafd; }
.kf-pol__intro p{ color:#5b7290; }
body.page-terms .page-title, body.page-privacy .page-title,
body.page-terms .kf-page__banner, body.page-privacy .kf-page__banner,
body.page-terms .ks-page-banner, body.page-privacy .ks-page-banner,
body.page-terms .kf-subhero, body.page-privacy .kf-subhero{ display:none !important; }
body.page-terms .entry-content, body.page-privacy .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* ══════════════════════════════════════════════════════════
5차 ① 신청 완료 (BLNO) — screens5/01-apply/01
══════════════════════════════════════════════════════════ */
.kf-ad5__ok{ text-align:center; padding:23px 16px 16px !important; }
.kf-ad5__ico{ display:inline-flex; align-items:center; justify-content:center; width:74px; height:74px;
border-radius:50%; background:#e9f7ee; border:1.5px solid #bde6cc; }
.kf-ad5__ok>b{ display:block; margin:15px 0 0; font-size:19px; font-weight:800; line-height:24px;
letter-spacing:-.035em; color:#16263d; }
.kf-ad5__ok>p{ margin:8px 0 0; font-size:13px; line-height:19px; color:#5d7085; letter-spacing:-.02em; }
.kf-ad5__ok>p b{ color:#16263d; font-weight:700; }
.kf-ad5__bl{ margin:17px 0 0; padding:13px 14px 14px; border-radius:13px;
background:#f1f6fd; border:1px solid #dde9f8; }
.kf-ad5__bl>span{ display:block; font-size:12px; font-weight:700; line-height:15px; color:#6d8299; letter-spacing:-.02em; }
.kf-ad5__bl>b{ display:block; margin:5px 0 0; font-size:24px; font-weight:800; line-height:30px;
letter-spacing:-.03em; color:var(--kf-blue); font-variant-numeric:tabular-nums; }
.kf-ad5__bl .kf-ad5__oid{ font-size:21px; }
.kf-ad5__bl>em{ display:block; margin:4px 0 0; font-size:12.5px; font-style:normal; line-height:16px;
color:#8195aa; letter-spacing:-.02em; }
.kf-ad5__wait{ display:flex !important; align-items:center; justify-content:center; gap:9px; font-size:19px !important; color:#5d7085 !important; }
.kf-ad5__wait i{ width:16px; height:16px; border-radius:50%; border:2.2px solid #cfe0f7;
border-top-color:var(--kf-blue); animation:kfSpin 1s linear infinite; }
.kf-ad5__blnote{ margin:9px 0 0; font-size:12.5px; line-height:18px; color:#7d8ea4; letter-spacing:-.02em; }
.kf-ad5__copy{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
margin:12px 0 0; height:48px; border:0; border-radius:11px; background:var(--kf-blue); color:#fff;
font-size:14.5px; font-weight:800; letter-spacing:-.03em; cursor:pointer; }
.kf-ad5__copy.is-done{ background:#1f9d55; }
.kf-ad5__copy svg{ flex:none; }
.kf-ad5__box>p{ margin:11px 0 0; font-size:13px; line-height:20px; color:#6d8299; letter-spacing:-.02em; }
.kf-ad5__more{ padding:0 !important; }
.kf-ad5__more>summary{ display:flex; align-items:center; justify-content:space-between;
padding:15px 16px; font-size:13.5px; font-weight:700; color:#3f556e; letter-spacing:-.025em;
cursor:pointer; list-style:none; }
.kf-ad5__more>summary::-webkit-details-marker{ display:none; }
.kf-ad5__more[open]>summary svg{ transform:rotate(180deg); }
.kf-ad5__more .kf-done{ border-top:1px solid #e9eef5; }
.kf-ad5__more .kf-done__body{ padding:13px 14px 14px; gap:11px; }
.kf-ad5__bar{ display:flex; gap:9px; padding:11px 14px calc(11px + env(safe-area-inset-bottom));
background:var(--kf-page); }
.kf-ad5__ghost,.kf-ad5__go{ display:flex; align-items:center; justify-content:center; height:52px;
border-radius:13px; font-size:15px; font-weight:800; letter-spacing:-.035em; text-decoration:none !important; }
.kf-ad5__ghost{ flex:0 0 104px; background:#fff; color:#3f556e !important; border:1px solid #d8e2ee; }
.kf-ad5__go{ flex:1; background:#0055b1; color:#fff !important; }
/* ══════════════════════════════════════════════════════════
5차 ② 배송 추적 — screens5/02-track/01·02·03
══════════════════════════════════════════════════════════ */
.kf-tr__delay{ display:flex; gap:11px; padding:15px 16px 16px; border-radius:16px;
background:#fdf6e3; border:1px solid #f2e2b6; }
.kf-tr__delay svg{ flex:none; margin-top:1px; }
.kf-tr__delay b{ display:block; font-size:14px; font-weight:800; line-height:18px; color:#7a5605; letter-spacing:-.03em; }
.kf-tr__delay p{ margin:6px 0 0; font-size:13px; line-height:20px; color:#7a5605; letter-spacing:-.02em; }
.kf-tr__delay p b{ display:inline; font-size:13px; }
.kf-tr__ask{ display:inline-flex; align-items:center; height:40px; margin:11px 0 0; padding:0 17px;
border-radius:10px; background:#fff; border:1px solid #e4cd8c; color:#7a5605 !important;
font-size:13.5px; font-weight:800; letter-spacing:-.03em; text-decoration:none !important; }
.kf-tr__eta{ padding:15px 16px 7px; border-radius:16px; background:#122c4e; color:#fff; }
.kf-tr__etatop{ display:flex; align-items:center; gap:12px; }
.kf-tr__cal{ flex:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px;
border-radius:12px; background:rgba(255,255,255,.09); }
.kf-tr__etatx{ flex:1; min-width:0; }
.kf-tr__etatx small{ display:block; font-size:12px; line-height:13px; color:#9db8dc; letter-spacing:-.02em; }
.kf-tr__etatx b{ display:block; margin:0; font-size:17px; font-weight:800; line-height:22px; letter-spacing:-.035em; }
.kf-tr__dday{ flex:none; display:flex; align-items:center; justify-content:center; min-width:56px; height:36px;
padding:0 11px; border-radius:18px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16);
font-size:14px; font-weight:800; font-style:normal; letter-spacing:-.02em; }
.kf-tr__etameta{ display:flex; flex-wrap:nowrap; gap:0 16px; margin:13px 0 0; padding:12px 0 0;
border-top:1px solid rgba(255,255,255,.13); font-size:12.5px; line-height:15px; color:#9db8dc; letter-spacing:-.02em; }
.kf-tr__etameta span:last-child{ flex:none; }
/* 운송장 번호는 끊기면 못 읽는다 — 접히는 건 가운데 항목만 */
.kf-tr__etameta span:first-child{ white-space:nowrap; }
.kf-tr__etameta span{ position:relative; }
.kf-tr__etameta span+span::before{ content:''; position:absolute; left:-9px; top:8px; width:3px; height:3px;
border-radius:50%; background:#5b7ba6; }
.kf-tr__etameta b{ color:#fff; font-weight:700; }
.kf-tr__now{ display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:13px;
background:#eef5fe; border:1px solid #d7e6fa; }
.kf-tr__now i{ flex:none; width:15px; height:15px; border-radius:50%; background:#fff;
border:4.5px solid var(--kf-blue); }
.kf-tr__now b{ font-size:13.5px; font-weight:800; line-height:19px; color:#134a91; letter-spacing:-.03em; }
.kf-tr__line{ padding:18px 16px 4px !important; }
.kf-tr__step{ position:relative; display:flex; gap:14px; padding:0 0 12px; }
.kf-tr__step:last-child{ padding-bottom:2px; }
.kf-tr__step::before{ content:''; position:absolute; left:10px; top:24px; bottom:-2px; width:2px; background:#e3e9f1; }
.kf-tr__step:last-child::before{ display:none; }
.kf-tr__step.is-done::before{ background:#2fa360; }
.kf-tr__dot{ position:relative; z-index:1; flex:none; display:flex; align-items:center; justify-content:center;
width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid #dde4ed; }
.kf-tr__step.is-done .kf-tr__dot{ background:#2fa360; border-color:#2fa360; }
.kf-tr__step.is-now .kf-tr__dot{ background:#fff; border:2.5px solid var(--kf-blue);
box-shadow:0 0 0 5px rgba(21,101,192,.16); }
.kf-tr__step.is-now .kf-tr__dot::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--kf-blue); }
.kf-tr__body2{ flex:1; min-width:0; padding-top:0; }
.kf-tr__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.kf-tr__hd b{ font-size:15px; font-weight:800; line-height:20px; letter-spacing:-.035em; color:#9aa8b8; }
.kf-tr__hd em{ flex:none; font-size:12.5px; font-style:normal; line-height:17px; color:#9aa8b8; letter-spacing:-.02em; }
.kf-tr__step.is-done .kf-tr__hd b{ color:#16263d; }
.kf-tr__step.is-done .kf-tr__hd em{ color:#5d7085; }
.kf-tr__step.is-now .kf-tr__hd b,.kf-tr__step.is-now .kf-tr__hd em{ color:var(--kf-blue); }
.kf-tr__body2>p{ margin:4px 0 0; font-size:13px; line-height:19px; color:#8194a8; letter-spacing:-.02em; }
.kf-tr__step.is-done .kf-tr__body2>p{ color:#6d8299; }
.kf-tr__acc{ margin:8px 0 0; }
.kf-tr__acc>summary{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px;
border-radius:10px; background:#fff; border:1px solid #dde4ed; font-size:13px; font-weight:700;
color:#3f556e; letter-spacing:-.03em; cursor:pointer; list-style:none; }
.kf-tr__acc>summary::-webkit-details-marker{ display:none; }
.kf-tr__acc[open]>summary svg{ transform:rotate(180deg); }
.kf-tr__acc[open]>summary::after{ content:''; }
.kf-tr__evs{ margin:11px 0 0 !important; padding:5px 0; list-style:none; border-radius:12px; background:#f5f8fc; }
.kf-tr__evs li{ display:flex; align-items:flex-start; gap:10px; margin:0 !important; padding:11px 13px;
border-bottom:1px solid #e8eef6; }
.kf-tr__evs li:last-child{ border-bottom:0; }
.kf-tr__evs li i{ flex:none; width:7px; height:7px; margin-top:6px; border-radius:50%; background:#c3d0df; }
.kf-tr__evs li.is-last i{ background:var(--kf-blue); }
.kf-tr__evs li div{ flex:1; min-width:0; }
.kf-tr__evs li b{ display:block; font-size:13px; font-weight:700; line-height:18px; color:#3f556e; letter-spacing:-.03em; }
.kf-tr__evs li.is-last b{ color:#134a91; font-weight:800; }
.kf-tr__evs li small{ display:block; margin:2px 0 0; font-size:11.5px; line-height:15px; color:#94a4b7; letter-spacing:-.02em; }
.kf-tr__evs li em{ flex:none; font-size:12px; font-style:normal; line-height:18px; color:#94a4b7; letter-spacing:-.02em; }
.kf-tr__none{ margin:10px 0 0; padding:13px; border-radius:11px; background:#f5f8fc;
font-size:12.5px; line-height:18px; color:#8194a8; letter-spacing:-.02em; }
.kf-tr__info dl{ margin:7px 0 0; }
.kf-tr__info dl>div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding:8px 0; border-bottom:1px solid #eef2f7; }
.kf-tr__info dl>div:last-child{ border-bottom:0; padding-bottom:1px; }
.kf-tr__info dt{ flex:none; font-size:13px; line-height:19px; color:#7d8ea4; letter-spacing:-.02em; }
.kf-tr__info dd{ margin:0; text-align:right; font-size:13.5px; font-weight:800; line-height:19px;
color:#16263d; letter-spacing:-.03em; }
/* 내 배송내역으로 — 다시 확인 버튼과 같은 틀, 색만 낮춘다 (2026-09-02) */
.kf-tr__back{ margin-top:10px; text-decoration:none; color:#4e5968; background:#fff; border:1px solid #e5e8eb; }
.kf-tr__back:hover{ background:#f7f8fa; }
.kf-tr__refresh{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px;
border-radius:12px; background:#fff; border:1px solid #d8e2ee; color:#3f556e;
font-size:13.5px; font-weight:700; letter-spacing:-.03em; cursor:pointer; }
.kf-tr__refresh.is-busy{ opacity:.6; }
.kf-tr__refresh.is-busy svg{ animation:kfSpin 1s linear infinite; }
.kf-tr__chk{ margin:-4px 0 0; text-align:center; font-size:11.5px; line-height:16px; color:#9aa8b8; letter-spacing:-.02em; }
/* 5차 /track/ — 자체 히어로를 쓰므로 테마 페이지 제목 배너를 감춘다 (등급이전과 동일 처리) */
body.page-track .page-title,
body.page-track .kf-page__banner,
body.page-track .ks-page-banner,
body.page-track .kf-subhero{ display:none !important; }
body.page-track .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
/* 5차 /track/ · 신청완료 — 히어로 하단 여백을 시안(모바일 110px)에 맞춘다 */
@media (max-width:760px){
.kf-tr .kf-tf__heroin,.kf-ad5 .kf-tf__heroin{ padding-bottom:18px; }
}
.kf-tr__acc[open]>summary{ padding:0 13px 0 15px; }
/* ══════════════════════════════════════════════════════════
5차 ③ 배송 상세 아코디언 (03-detail)
══════════════════════════════════════════════════════════ */
.kf-d5__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kf-d5__top b{ display:block; font-size:18px; font-weight:800; line-height:23px; letter-spacing:-.04em; color:#16263d; }
.kf-d5__top p{ margin:4px 0 0; font-size:12.5px; line-height:18px; color:#7d8ea4; letter-spacing:-.02em; }
.kf-d5__badge{ flex:none; display:flex; align-items:center; height:34px; padding:0 13px; border-radius:9px;
font-size:13px; font-weight:800; font-style:normal; letter-spacing:-.03em; background:#eef2f7; color:#5d7085; }
.kf-d5__badge--warn{ background:#fdeeee; color:#b03636; }
.kf-d5__badge--info{ background:#eaf2fd; color:#0055b1; }
.kf-d5__badge--ok{ background:#e8f6ee; color:#1a7f47; }
.kf-d5__badge--mute{ background:#eef2f7; color:#8a9cb0; }
.kf-d5__acc{ padding:0 !important; }
.kf-d5__acc>summary{ display:flex; align-items:center; gap:12px; padding:14px 16px;
cursor:pointer; list-style:none; }
.kf-d5__acc>summary::-webkit-details-marker{ display:none; }
.kf-d5__acc[open]>summary{ background:#f6f9fd; border-radius:16px 16px 0 0; }
.kf-d5__acc[open] .kf-d5__chev{ transform:rotate(180deg); }
.kf-d5__ico{ flex:none; display:flex; align-items:center; justify-content:center; width:38px; height:38px;
border-radius:11px; background:#eaf2fd; }
.kf-d5__ttl{ flex:1; min-width:0; }
.kf-d5__ttl b{ display:block; font-size:15px; font-weight:800; line-height:20px; letter-spacing:-.035em; color:#16263d; }
.kf-d5__ttl small{ display:block; margin:2px 0 0; font-size:12.5px; line-height:17px; color:#8a9cb0; letter-spacing:-.02em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-d5__chev{ flex:none; transition:transform .18s; }
.kf-d5__dl{ margin:0; padding:0 16px 4px; }
.kf-d5__dl>div{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
padding:11px 0; border-bottom:1px solid #eef2f7; }
.kf-d5__dl>div:last-child{ border-bottom:0; }
.kf-d5__dl>div.kf-d5__wrap{ display:block; }
.kf-d5__dl dt{ flex:none; font-size:13px; line-height:19px; color:#7d8ea4; letter-spacing:-.02em; }
.kf-d5__dl dd{ margin:0; text-align:right; font-size:13.5px; font-weight:800; line-height:19px;
color:#16263d; letter-spacing:-.03em; }
.kf-d5__dl>div.kf-d5__wrap dd{ margin-top:4px; text-align:left; font-weight:700; }
.kf-d5__acc>b.kf-tf__h{ display:block; padding:15px 16px 0; }
.kf-d5__acc>b.kf-tf__h+.kf-d5__dl{ padding-top:4px; }
.kf-d5__rec{ display:flex; align-items:center; gap:12px; padding:14px 15px; border-radius:14px;
background:#eef5fe; border:1px solid #d7e6fa; }
.kf-d5__rec svg{ flex:none; }
.kf-d5__rec div{ flex:1; min-width:0; }
.kf-d5__rec b{ display:block; font-size:14px; font-weight:800; line-height:19px; color:#0d4a91; letter-spacing:-.03em; }
.kf-d5__rec p{ margin:3px 0 0; font-size:12.5px; line-height:18px; color:#4a6b90; letter-spacing:-.02em; }
.kf-d5__recbtn{ flex:none; height:40px; padding:0 18px; border:0; border-radius:10px;
background:#0055b1; color:#fff; font-size:14px; font-weight:800; letter-spacing:-.03em; cursor:pointer; }
.kf-d5__bar{ display:flex; gap:8px; padding:11px 14px calc(11px + env(safe-area-inset-bottom)); background:var(--kf-page); }
.kf-d5__ghost,.kf-d5__go{ display:flex; align-items:center; justify-content:center; height:52px; flex:1;
border-radius:13px; font-size:14.5px; font-weight:800; letter-spacing:-.035em;
text-decoration:none !important; cursor:pointer; }
.kf-d5__ghost{ background:#fff; color:#3f556e !important; border:1px solid #d8e2ee; }
.kf-d5__ghost[disabled]{ opacity:.45; cursor:default; }
.kf-d5__go{ background:#0055b1; color:#fff !important; border:0; }
/* ── 바텀시트 공통 (취소·운송장) ─────────────────────── */
.kf-sheet{ position:fixed; inset:0; z-index:9999; }
.kf-sheet__dim{ position:absolute; inset:0; background:rgba(11,26,45,.42); opacity:0; transition:opacity .2s; }
.kf-sheet.is-on .kf-sheet__dim{ opacity:1; }
.kf-sheet__box{ position:absolute; left:0; right:0; bottom:0; max-height:88vh; overflow:auto;
padding:9px 18px calc(16px + env(safe-area-inset-bottom));
background:#fff; border-radius:22px 22px 0 0; transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.8,.3,1); }
.kf-sheet.is-on .kf-sheet__box{ transform:translateY(0); }
/* 배대지 시트의 '사서함 번호' 탭 패널.
모달 패널용 .kf-sheet__box(=opacity:0 / translateY(100%), .is-on 일 때만 보임)와 클래스명이 겹쳐
탭을 눌러도 내용이 통째로 안 보였다 (2026-08-10 대표 제보). 전용 이름으로 분리. */
.kf-sheet__boxpane{ display:block; }
.kf-sheet__boxpane[hidden]{ display:none; }
.kf-sheet__grip{ display:block; width:44px; height:5px; margin:0 auto 15px; border-radius:3px; background:#dde4ed; }
.kf-sheet__h{ display:block; font-size:19px; font-weight:800; line-height:25px; letter-spacing:-.04em; color:#16263d; }
.kf-sheet__p{ margin:8px 0 0; font-size:13.5px; line-height:21px; color:#5d7085; letter-spacing:-.02em; }
.kf-sheet__p b{ color:#16263d; font-weight:800; }
.kf-sheet__lb{ margin:19px 0 9px; font-size:13.5px; font-weight:800; color:#16263d; letter-spacing:-.03em; }
.kf-sheet__lb em{ font-style:normal; font-weight:500; color:#9aa8b8; }
.kf-sheet__bar{ display:flex; gap:9px; margin:17px 0 0; }
/* 취소 모달 (06-cancel/01) */
.kf-cx__opts{ display:flex; flex-direction:column; gap:8px; }
.kf-cx__opt{ display:flex; align-items:center; gap:11px; padding:14px 15px; border-radius:12px;
background:#fff; border:1px solid #e2e8f1; cursor:pointer; }
.kf-cx__opt input{ position:absolute; opacity:0; width:0; height:0; }
.kf-cx__opt i{ flex:none; width:21px; height:21px; border-radius:50%; border:2px solid #cbd6e3; background:#fff; }
.kf-cx__opt span{ font-size:14px; font-weight:600; line-height:20px; color:#3f556e; letter-spacing:-.03em; }
.kf-cx__opt:has(input:checked){ border-color:#0055b1; background:#f4f9ff; }
.kf-cx__opt:has(input:checked) i{ border:6px solid #0055b1; }
.kf-cx__opt:has(input:checked) span{ color:#0d4a91; font-weight:800; }
.kf-cx__keep,.kf-cx__do{ display:flex; align-items:center; justify-content:center; height:52px;
border-radius:13px; font-size:15px; font-weight:800; letter-spacing:-.035em; cursor:pointer; }
.kf-cx__keep{ flex:1; background:#0055b1; color:#fff; border:0; }
.kf-cx__do{ flex:0 0 132px; background:#fff; color:#c0392b; border:1px solid #edc9c4; }
.kf-cx__do[disabled]{ opacity:.6; }
/* 운송장 바텀시트 (08-waybill) */
.kf-wb__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.kf-wb__hd b{ font-size:18px; font-weight:800; letter-spacing:-.04em; color:#16263d; }
.kf-wb__hd em{ font-size:14px; font-style:normal; font-weight:700; color:#0055b1; letter-spacing:-.02em; }
.kf-wb__stage{ margin:15px 0 0; padding:18px 16px; border-radius:16px; background:#f2f5f9; min-height:210px;
display:flex; flex-direction:column; align-items:center; justify-content:center; }
.kf-wb__load{ display:flex; flex-direction:column; align-items:center; gap:11px;
font-size:13px; color:#7d8ea4; letter-spacing:-.02em; }
.kf-wb__load i{ width:26px; height:26px; border-radius:50%; border:2.6px solid #cfe0f7;
border-top-color:#0055b1; animation:kfSpin 1s linear infinite; }
.kf-wb__file{ display:flex; flex-direction:column; align-items:center; }
.kf-wb__fi{ display:flex; align-items:center; justify-content:center; width:66px; height:66px;
border-radius:15px; background:#fff; box-shadow:0 1px 4px rgba(16,38,61,.08); }
.kf-wb__file b{ margin:11px 0 0; font-size:15px; font-weight:800; letter-spacing:-.035em; color:#16263d; }
.kf-wb__file small{ margin:3px 0 0; font-size:12.5px; color:#8a9cb0; letter-spacing:-.02em; }
.kf-wb__pdf{ width:100%; height:230px; margin:14px 0 0; border:0; border-radius:12px; background:#fff; }
.kf-wb__err{ font-size:13.5px; line-height:20px; color:#7d8ea4; text-align:center; letter-spacing:-.02em; }
.kf-wb__share,.kf-wb__close{ display:flex; align-items:center; justify-content:center; height:52px;
flex:0 0 92px; border-radius:13px; background:#fff; border:1px solid #d8e2ee; color:#3f556e;
font-size:14.5px; font-weight:800; letter-spacing:-.035em; cursor:pointer; }
.kf-wb__dl{ display:flex; align-items:center; justify-content:center; height:52px; flex:1;
border-radius:13px; background:#0055b1; color:#fff !important; font-size:15px; font-weight:800;
letter-spacing:-.035em; text-decoration:none !important; }
/* ══════════════════════════════════════════════════════════
5차 ④ 요금 상세 (07-fee)
══════════════════════════════════════════════════════════ */
.kf-fee__kg{ display:flex; border-radius:13px; background:#f1f6fd; border:1px solid #e0eaf7; }
.kf-fee__kg span{ flex:1; padding:13px 6px 14px; text-align:center; position:relative; }
.kf-fee__kg span+span::before{ content:''; position:absolute; left:0; top:12px; bottom:12px; width:1px; background:#dbe6f4; }
.kf-fee__kg small{ display:block; font-size:12px; line-height:16px; color:#7d8ea4; letter-spacing:-.02em; }
.kf-fee__kg b{ display:block; margin:4px 0 0; font-size:17px; font-weight:800; line-height:22px;
letter-spacing:-.04em; color:#16263d; }
.kf-fee__kg .is-bill small{ color:#3579c6; }
.kf-fee__kg .is-bill b{ color:#0055b1; }
.kf-fee__sum{ margin:11px 0 0; }
.kf-fee__sum>summary{ display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:13px 16px 14px; border-radius:14px; background:#f4f9ff; border:1.6px solid #0055b1;
cursor:pointer; list-style:none; }
.kf-fee__sum>summary::-webkit-details-marker{ display:none; }
.kf-fee__sum summary small{ display:block; font-size:12.5px; line-height:17px; color:#4a6b90; letter-spacing:-.02em; }
.kf-fee__sum summary b{ display:block; margin:2px 0 0; font-size:26px; font-weight:800; line-height:32px;
letter-spacing:-.045em; color:#0055b1; }
.kf-fee__sum summary em{ flex:none; font-size:13.5px; font-style:normal; font-weight:700;
color:#3f556e; letter-spacing:-.03em; }
.kf-fee__lines{ margin:9px 0 0; border-radius:14px; background:#fff; border:1px solid #e7edf5; overflow:hidden; }
.kf-fee__row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:13px 15px; border-bottom:1px solid #eef2f7; }
.kf-fee__row:last-child{ border-bottom:0; }
.kf-fee__row span{ flex:1; min-width:0; }
.kf-fee__row b{ position:relative; display:inline-flex; align-items:center; gap:6px;
font-size:14px; font-weight:800; line-height:19px; color:#16263d; letter-spacing:-.035em; }
.kf-fee__row small{ display:block; margin:2px 0 0; font-size:12px; line-height:17px; color:#8a9cb0; letter-spacing:-.02em; }
.kf-fee__row em{ flex:none; font-size:15px; font-style:normal; font-weight:800; letter-spacing:-.035em; color:#16263d; }
.kf-fee__row.is-minus em{ color:#1a7f47; }
.kf-fee__row--total{ background:#f5f8fc; }
.kf-fee__row--total em{ color:#0055b1; }
.kf-fee__q{ flex:none; width:19px; height:19px; padding:0; border:0; border-radius:50%;
background:#c9d8e9; color:#fff; font-size:11.5px; font-weight:800; line-height:19px; cursor:pointer; }
.kf-fee__pop{ position:absolute; left:0; top:calc(100% + 7px); z-index:5; width:236px; padding:10px 12px;
border-radius:10px; background:#16263d; color:#fff; font-size:12px; font-weight:500; line-height:18px;
letter-spacing:-.02em; box-shadow:0 6px 20px rgba(16,38,61,.22); }
.kf-fee__note{ margin:11px 0 0; font-size:12.5px; line-height:19px; color:#8a9cb0; letter-spacing:-.02em; }
.kf-pay__card--fee{ padding:15px 16px 16px; }
/* ══════════════════════════════════════════════════════════
5차 ⑤ API 전송 중 · 오류 (05-api)
══════════════════════════════════════════════════════════ */
.kf-sd__ok{ padding:18px 16px 17px !important; }
.kf-sd__bar{ height:8px; border-radius:4px; background:#e6ecf4; overflow:hidden; }
.kf-sd__bar i{ display:block; height:100%; border-radius:4px;
background:linear-gradient(90deg,#0055b1,#3d8ce0); transition:width .35s; }
.kf-sd__ok ul{ margin:19px 0 0 !important; padding:0; list-style:none; }
.kf-sd__ok li{ display:flex; align-items:center; gap:13px; margin:0 0 15px !important;
font-size:15px; font-weight:700; line-height:20px; color:#a3b1c2; letter-spacing:-.035em; }
.kf-sd__ok li:last-child{ margin-bottom:0 !important; }
.kf-sd__ok li.is-done{ color:#16263d; font-weight:800; }
.kf-sd__ok li.is-now{ color:#0055b1; font-weight:800; }
.kf-sd__dot{ flex:none; display:flex; align-items:center; justify-content:center; width:28px; height:28px;
border-radius:50%; background:#fff; border:2px solid #e0e6ee; }
.kf-sd__ok li.is-done .kf-sd__dot{ background:#22a45d; border-color:#22a45d; }
.kf-sd__ok li.is-now .kf-sd__dot{ border-color:#cfe0f7; }
.kf-sd__ok li.is-now .kf-sd__dot i{ width:22px; height:22px; border-radius:50%;
border:2.4px solid transparent; border-top-color:#0055b1; animation:kfSpin .9s linear infinite; }
.kf-sd__hint{ margin:17px 0 0; text-align:center; font-size:12.5px; line-height:18px; color:#9aa8b8; letter-spacing:-.02em; }
.kf-sd__err{ text-align:center; padding:24px 16px 18px !important; }
.kf-sd__eico{ display:inline-flex; align-items:center; justify-content:center; width:74px; height:74px;
border-radius:50%; background:#fdf6e3; border:1.5px solid #f0dfae; }
.kf-sd__err>b{ display:block; margin:15px 0 0; font-size:19px; font-weight:800; line-height:24px;
letter-spacing:-.04em; color:#16263d; }
.kf-sd__err>p{ margin:9px 0 0; font-size:13.5px; line-height:21px; color:#5d7085; letter-spacing:-.02em; }
.kf-sd__err>p b{ color:#16263d; font-weight:800; }
.kf-sd__ebar{ display:flex; gap:9px; margin:18px 0 0; }
.kf-sd__eghost{ display:flex; align-items:center; justify-content:center; height:52px; flex:0 0 104px;
border-radius:13px; background:#fff; border:1px solid #d8e2ee; color:#3f556e !important;
font-size:14.5px; font-weight:800; letter-spacing:-.035em; text-decoration:none !important; }
.kf-sd__ego{ display:flex; align-items:center; justify-content:center; height:52px; flex:1; border:0;
border-radius:13px; background:#0055b1; color:#fff; font-size:15px; font-weight:800;
letter-spacing:-.035em; cursor:pointer; }
/* ══════════════════════════════════════════════════════════
5차 ⑥ 알림 (09-notify)
══════════════════════════════════════════════════════════ */
.kf-nt__card{ display:flex; gap:13px; }
.kf-nt__ico{ flex:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px;
border-radius:13px; background:#eaf2fd; }
.kf-nt__ico.is-ok{ background:#e8f6ee; }
.kf-nt__body{ flex:1; min-width:0; }
.kf-nt__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.kf-nt__hd b{ font-size:15.5px; font-weight:800; line-height:21px; letter-spacing:-.04em; color:#16263d; }
.kf-nt__hd em{ flex:none; font-size:12px; font-style:normal; line-height:17px; color:#9aa8b8; letter-spacing:-.02em; }
.kf-nt__body>p{ margin:5px 0 0; font-size:13.5px; line-height:21px; color:#5d7085; letter-spacing:-.02em; }
.kf-nt__body>a{ display:inline-block; margin:9px 0 0; font-size:13.5px; font-weight:800;
color:#0055b1 !important; letter-spacing:-.03em; text-decoration:none !important; }
/* ══════════════════════════════════════════════════════════
5차 ⑦ 카드 미니 진행바 (10-mini)
══════════════════════════════════════════════════════════ */
.kf-mini{ display:flex; gap:8px; margin:12px 0 0; }
.kf-mini__c{ flex:1; min-width:0; }
.kf-mini__c i{ display:block; height:3px; border-radius:2px; background:#e3e9f1; }
.kf-mini__c em{ display:block; margin:6px 0 0; font-size:11.5px; font-style:normal; font-weight:700;
line-height:15px; color:#b3bfcd; letter-spacing:-.02em; }
.kf-mini__c:first-child em{ text-align:left; }
.kf-mini__c:last-child em{ text-align:right; }
.kf-mini__c:not(:first-child):not(:last-child) em{ text-align:center; }
.kf-mini__c.is-on i{ background:#0055b1; }
.kf-mini__c.is-on em{ color:#0055b1; }
/* 5차 알림 — 자체 히어로를 쓰므로 테마 페이지 제목 배너를 감춘다 */
body.page-notifications .page-title,
body.page-notifications .kf-page__banner,
body.page-notifications .ks-page-banner,
body.page-notifications .kf-subhero,
body.page-sending .page-title,
body.page-sending .kf-page__banner,
body.page-sending .ks-page-banner,
body.page-sending .kf-subhero{ display:none !important; }
body.page-notifications .entry-content,
body.page-sending .entry-content{ margin-top:0 !important; padding-left:0 !important; padding-right:0 !important; }
.kf-fee__sum>summary>span{ flex:1; min-width:0; }
.kf-fee__chev{ flex:none; margin-left:-3px; transition:transform .18s; }
.kf-fee__sum[open] .kf-fee__chev{ transform:rotate(180deg); }
/* 히어로 하단 여백은 화면마다 다르다 — 전부 모바일 시안 값이므로 모바일에만 적용한다.
(데스크톱 공통값 35px 을 덮어버려 히어로가 짧아지던 원인) */
@media (max-width:760px){
.kf-tfd .kf-tf__heroin{ padding-bottom:18px; }
.kf-rv .kf-tf__heroin{ padding-bottom:21px; }
.kf-dep .kf-tf__heroin{ padding-bottom:18px; }
.kf-chg .kf-tf__heroin{ padding-bottom:29px; }
.kf-sup .kf-tf__heroin{ padding-bottom:29px; }
.kf-ask .kf-tf__heroin{ padding-bottom:18px; }
.kf-rw .kf-tf__heroin{ padding-bottom:18px; }
.kf-dt .kf-tf__heroin{ padding-bottom:18px; }
.kf-rc .kf-tf__heroin{ padding-bottom:18px; }
.kf-dr .kf-tf__heroin{ padding-bottom:18px; }
.kf-oe .kf-tf__heroin{ padding-bottom:18px; }
.kf-pol .kf-tf__heroin{ padding-bottom:18px; }
}
/* 회원가입 — 비밀번호 확인 일치 안내 + 강도 미터 색 (한국어 라벨) */
.kf-auth__match{ margin-top:6px; font-size:12.5px; line-height:18px; color:#c0392b; letter-spacing:-.02em; }
.kf-auth__match.is-ok{ color:#1a7f47; }
.ks-pw-meter[data-level="1"] [data-pw-meter-fill]{ background:#e05252; }
.ks-pw-meter[data-level="2"] [data-pw-meter-fill]{ background:#e8944a; }
.ks-pw-meter[data-level="3"] [data-pw-meter-fill]{ background:#e2b53e; }
.ks-pw-meter[data-level="4"] [data-pw-meter-fill]{ background:#4a9d5f; }
.ks-pw-meter[data-level="5"] [data-pw-meter-fill]{ background:#1a7f47; }
/* 내 배송 등급·예치금 — 모바일 1열, PC 2열 (3차 시안 dashCols) */
.kf-mydash{ display:flex; flex-direction:column; gap:11px; }
/* 내 배송 히어로 — 모바일은 인사말+사서함 안내, PC 는 페이지 제목 (3차 시안).
숨김은 모바일에만 걸어야 한다 — 전역으로 걸면 파일 순서상 PC 규칙을 이겨버린다 */
@media (max-width:760px){
.kf-mypanel__hello--d,.kf-mypanel__note--d{ display:none; }
}
/* 신청서 히어로 — PC 전용 제목·설명·4단계 인디케이터는 모바일에서만 감춘다
(전역으로 감추면 파일 순서상 PC 규칙을 이겨버린다) */
@media (max-width:760px){
.kf-apply__hero .kf-apply__h1--d,
.kf-apply__hero p.kf-apply__sub--d,
.kf-apply__hero .kf-apply__steps{ display:none !important; }
}
/* ══════════════════════════════════════════════════════════
PC 전용 (min-width:761px) — 파일 맨 끝에 모은다
화면별 규칙이 파일 뒤쪽에 있어, 앞쪽 미디어쿼리로는 덮이지 않는다.
값은 전부 시안 HTML(.dc.html)의 isM 분기 또는 PNG 실측에서 가져온다.
══════════════════════════════════════════════════════════ */
@media (min-width:761px){
/* 5차 카드 — 시안 cardPad 18px 20px (.kf-panel 을 안 쓰는 것들) */
.kf-tr__eta{ padding:18px 20px; }
.kf-tr__delay{ padding:18px 20px; }
.kf-tr__line{ padding:18px 20px 4px !important; }
.kf-tr__now{ padding:14px 20px; }
.kf-d5__rec{ padding:16px 20px; }
.kf-d5__acc>summary{ padding:16px 20px; }
.kf-d5__dl{ padding:0 20px 6px; }
.kf-ad5__ok{ padding:26px 20px 20px !important; }
/* 2차 인증 화면 — 시안: authW 420 · authPad 44/24/50 · cardPad 24x26 · authH1 28 */
.kf-auth{ max-width:468px; padding:44px 24px 50px; }
body.page-register .kf-auth,
body.page-login .kf-auth,
body.page-password-reset .kf-auth{ padding-top:44px; }
.kf-auth__card{ padding:24px 26px; }
.kf-auth__hero h1{ font-size:28px; }
/* 시안 대비 로고~제목 사이가 12px 넓었다 (h1·sub·카드가 통째로 밀림) */
.kf-auth__brand{ margin-bottom:10px; }
/* 내 배송 (3차 시안 screens3/01-my/03) — kf-tf 와 같은 규격.
PC 히어로에는 사서함 카드·버튼이 없다 (헤더 사서함 칩으로 접근) */
.kf-shipments{ position:static; left:auto; transform:none; width:auto; }
.site-main:has(.kf-shipments){ padding-left:0 !important; padding-right:0 !important; max-width:none; }
.entry-content:has(.kf-shipments){ max-width:none; }
.kf-mypanel{ padding:26px 24px 30px; }
.kf-mypanel__in{ max-width:1100px; } /* padding 이 바깥에 있어 1100 이 맞다 (텍스트 x=70) */
.kf-mypanel__box,.kf-mypanel__r{ display:none; }
.kf-mypanel__l{ padding-right:54px; }
.kf-mypanel__hello{ font-size:27px; line-height:33px; }
.kf-mypanel__note{ font-size:13px; line-height:20px; margin-top:6px; }
.kf-shipments__body{ max-width:708px; margin:0 auto; padding:20px 24px 30px; gap:11px; }
.kf-shipments__body .kf-panel{ padding:18px 20px; }
.kf-mydash{ flex-direction:row !important; align-items:stretch; }
.kf-mydash>*{ flex:1 1 0; min-width:0; }
.kf-mypanel__hello--m,.kf-mypanel__note--m{ display:none; }
.kf-mypanel__hello--d{ display:block; }
.kf-mypanel__note--d{ display:block; }
.kf-notibtn{ display:none; } /* PC 시안 히어로에 알림 벨이 없다 — 헤더 벨로 접근 */
/* 페이지 계열 (배대지주소·요금표·도움말) — 1차 시안 "나머지 화면":
heroPad 30/32/26 (안쪽 1100) · bodyPad 24/32/30 · 컬럼 1012 · cardPad 22x24 · h1 34 */
.kf-subhero__in{ max-width:1164px !important; padding:26px 32px 26px !important; min-height:0 !important; }
/* 크럼~제목 사이가 시안보다 7px 넓어 제목·설명이 통째로 밀렸다 */
.kf-subhero__bc{ margin-bottom:6px !important; }
.kf-subhero h1,.kf-subhero__ttl,.kf-subhero__title{ font-size:34px !important; line-height:41px !important; }
.kf-subhero__desc{ font-size:14.5px !important; line-height:23px !important; }
.kf-page__body{ max-width:1076px; padding:24px 32px 30px; gap:14px; }
.kf-page__body .kf-panel{ padding:22px 24px; }
/* 회원 등급 — 시안(screens/05-grade/02)은 kf-tf 와 같은 640 중앙 컬럼 */
body.page-grade .kf-subhero__in{ max-width:1148px !important; padding:22px 24px 30px !important; }
body.page-grade .kf-subhero h1,body.page-grade .kf-subhero__ttl{ font-size:27px !important; line-height:33px !important; }
/* 251행의 `.kf-grade{max-width:none !important}` 를 이겨야 한다 */
body.page-grade .kf-page__body{ max-width:708px; margin:0 auto; padding:20px 24px 30px; }
body.page-grade .kf-grade{ max-width:708px !important; margin:0 auto; padding:20px 24px 30px; }
/* 시안 히어로 137 — 기본 subhero 는 데스크톱에서 더 크다 */
body.page-grade .kf-subhero__title{ font-size:27px !important; line-height:33px !important; }
body.page-grade .kf-subhero__desc{ font-size:13px !important; line-height:20px !important; }
/* 배송대행 신청서 — 시안(배송대행 신청서.dc.html) PC 값:
heroPad 30/32/26 · bodyPad 24/32/28 · cardPad 22x24 · h1 34 · 컬럼 1012 */
.site-main:has(.kf-apply){ padding-left:0 !important; padding-right:0 !important; max-width:none; }
.entry-content:has(.kf-apply){ max-width:none; }
.kf-apply{ position:static; left:auto; transform:none; width:auto; max-width:none; }
.kf-apply__heroin{ max-width:1164px; margin:0 auto; padding:30px 32px 26px; }
.kf-apply__hero h1{ font-size:34px; line-height:41px; }
.kf-apply__hero p{ font-size:14.5px; line-height:23px; }
.kf-apply__body{ max-width:1076px; margin:0 auto; padding:24px 32px 28px; }
.kf-apply__in{ max-width:none; }
.kf-apply__body .kf-panel,.kf-apply__body .kf-sec{ padding:22px 24px; }
/* 배송비 결제 — 시안(회원등급·결제상태.dc.html): bodyW 660 · cardPad 18x20 · 결제수단 2열 */
.site-main:has(.kf-pay){ padding-left:0 !important; padding-right:0 !important; max-width:none; }
.entry-content:has(.kf-pay){ max-width:none; }
.kf-pay{ position:static; left:auto; transform:none; width:auto; max-width:none; }
/* 1467행이 !important 라 여기서도 !important 로 이겨야 한다 */
.kf-pay__body{ width:100%; max-width:708px; margin:0 auto; padding:20px 24px 30px !important; }
.kf-pay__card{ padding:18px 20px; }
.kf-pay__methods{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.kf-pay__foot{ max-width:708px; margin:0 auto; padding:14px 24px 30px; }
/* 옛 PC 시안(제목 고정 + 원형 4단계)에서 모바일 진행바를 감추던 규칙.
토스 시안은 PC 도 진행바 한 줄을 쓰므로 껐다. !important 라 아래에서 못 이긴다. (2026-08-14) */
/* .kf-apply__h1--m,.kf-apply__prog,.kf-apply__progmeta{ display:none !important; } */
.kf-apply__h1--d{ display:block; margin:0; font-size:34px; font-weight:850; line-height:41px;
letter-spacing:-.03em; color:#fff; }
.kf-apply__sub--d{ display:block; margin:6px 0 0; font-size:14.5px; line-height:23px;
color:rgba(255,255,255,.82); letter-spacing:-.02em; }
.kf-apply__steps{ display:flex; align-items:center; gap:0; margin:20px 0 0; padding:0; list-style:none; }
.kf-apply__steps li{ display:flex; align-items:center; gap:9px; margin:0 !important;
font-size:13px; font-weight:700; color:rgba(255,255,255,.55); letter-spacing:-.02em; white-space:nowrap; }
.kf-apply__steps li+li{ flex:1; }
.kf-apply__steps li+li::before{ content:''; flex:1; height:1px; margin:0 14px; background:rgba(255,255,255,.28); }
.kf-apply__steps li i{ display:flex; align-items:center; justify-content:center; width:24px; height:24px;
flex:none; border-radius:50%; background:rgba(255,255,255,.16); font-size:12px; font-weight:800;
font-style:normal; color:rgba(255,255,255,.7); }
.kf-apply__steps li.is-on{ color:#fff; font-weight:800; }
.kf-apply__steps li.is-on i{ background:#fff; color:var(--kf-blue); }
.kf-apply__steps li.is-done{ color:rgba(255,255,255,.85); }
.kf-apply__steps li.is-done i{ background:rgba(255,255,255,.9); color:var(--kf-blue); }
/* ── 홈 (시안: 김빠른 홈 원화면.dc.html) ──────────────────
inW 1100 · cardPad 20x24 · h1 44 · faqW 620 · 혜택 3개 체크 · 햄버거 없음 */
/* 시안 홈 PC 헤더엔 햄버거가 없지만, 라이브는 다른 페이지에도 헤더 햄버거가 없어서
이걸 감추면 PC 에서 메뉴(내 배송·배대지주소·등급 등) 진입로가 완전히 사라진다 → 유지한다 */
.kf-quote__burger{ display:inline-flex; }
.kf-quote__sub--m{ display:none !important; }
.kf-quote__sub--d{ display:block; }
.kf-quote__pts--m{ display:none !important; }
.kf-quote__perks{ display:flex; align-items:center; justify-content:center; gap:26px;
margin:9px 0 0 !important; padding:0; list-style:none; }
.kf-quote__perks li{ display:flex; align-items:center; gap:7px; margin:0 !important;
font-size:13px; font-weight:600; color:rgba(255,255,255,.86); letter-spacing:-.02em; }
.kf-quote__perks li::before{ content:''; width:13px; height:8px; flex:none;
border-left:2px solid #8ec5ff; border-bottom:2px solid #8ec5ff; transform:rotate(-45deg) translateY(-2px); }
.kf-hfaq{ max-width:620px; margin-left:auto; margin-right:auto; }
/* 시안 vh(PC)=830. 100vh 로 두면 큰 모니터에서 위아래 여백이 과하게 벌어진다 */
.kf-quote{ min-height:830px !important; }
.kf-quote__in{ min-height:830px; padding:22px 24px 26px; }
/* ── 5차 바텀시트 → PC 는 가운데 모달 (시안: modalAlign center · modalW 460 · rad 18 · pad 24) */
.kf-sheet{ align-items:center; justify-content:center; padding:24px; display:flex; }
.kf-sheet[hidden]{ display:none; }
.kf-sheet__box{ position:relative; left:auto; right:auto; bottom:auto;
width:100%; max-width:460px; max-height:82vh; border-radius:18px;
padding:22px 24px 24px; transform:translateY(14px) scale(.98); opacity:0;
transition:transform .2s cubic-bezier(.2,.8,.3,1), opacity .18s; }
.kf-sheet.is-on .kf-sheet__box{ transform:none; opacity:1; }
.kf-sheet__grip{ display:none; }
/* 운송장 시트는 PDF 를 보여주니 조금 넓게 */
#kfWaybillSheet .kf-sheet__box{ max-width:560px; }
/* 2차 사서함 안내 팝업도 같은 규칙 (시안 sheetW 480) */
.kf-mb{ align-items:center; padding:24px; }
.kf-mb__box{ max-width:480px; border-radius:18px; }
/* ── 2차 팝업·좁은 화면 (시안: 2차 추가 화면.dc.html) ──
drawerW 400 · bodyW 620 · cardPad 24x26 */
.kf-nav__panel{ width:400px !important; max-width:400px !important; }
/* 2차 시안 화면은 컬럼이 620 (kf-tf 기본 660 보다 좁다) */
.kf-rv .kf-tf__body, /* 이용후기 */
.kf-tf2 .kf-tf__body{ max-width:668px; }
body.page-grade-transfer .kf-tf__body,
body.page-reviews .kf-tf__body{ max-width:668px; }
}
@media (max-width:760px){
.kf-quote__sub--d,.kf-quote__perks{ display:none !important; }
}
/* ══════════════════════════════════════════════════════════
태블릿 전용 (761–1023px) — 시안 캔버스 768 · DPR 2
3차 시안 isT 분기: fw 768 · bodyW 620.
화면별로는 PC 값을 그대로 쓰되, 시안이 다른 것만 여기서 되돌린다.
══════════════════════════════════════════════════════════ */
@media (min-width:761px) and (max-width:1023px){
/* 내 배송 — 태블릿 시안(screens/03-my/01-tablet-list)은 모바일 구성이다:
히어로에 사서함 카드·버튼·알림벨이 있고, 본문은 거의 전체폭 */
.kf-mypanel__box{ display:flex; }
.kf-mypanel__r{ display:flex; }
.kf-notibtn{ display:flex; }
.kf-mypanel__hello--m{ display:block; }
.kf-mypanel__note--m{ display:block; }
.kf-mypanel__hello--d,.kf-mypanel__note--d{ display:none; }
.kf-mypanel__hello{ font-size:22px; line-height:29px; }
.kf-shipments__body{ max-width:none; padding:20px 32px 30px; } /* 시안 카드폭 678 */
/* 진행 현황 — 태블릿은 가로 스크롤 칩이 아니라 7칸 그리드 */
.kf-pipe{ display:grid; grid-template-columns:repeat(7,1fr); overflow:visible; }
.kf-pipe__step{ flex-direction:column; height:auto; padding:11px 4px; }
/* 시안 태블릿: 히어로 버튼 2개가 넓게 나뉜다 (내용폭이 아니라 균등) */
.kf-mypanel__r{ display:flex; gap:10px; margin-top:12px; }
.kf-mypanel__r .kf-qbtn{ flex:1; justify-content:center; height:48px; }
}
/* 안내 페이지 서브 히어로 — 모바일 시안(07-pages/01·03)은 일러스트 없이 118px 이다 */
@media (max-width:760px){
.kf-subhero__art{ display:none !important; }
.kf-subhero__in{ padding:16px 16px 22px !important; min-height:0 !important; }
/* 시안 실측(07-pages/03-mobile-help): 크럼 12 · 제목 24 · 설명 12.5(1줄) · 좌측 16 → 히어로 118 */
.kf-subhero__bc{ font-size:12px !important; line-height:19px !important; margin-bottom:5px !important; }
.kf-subhero__title{ font-size:24px !important; line-height:29px !important; }
.kf-subhero__desc{ font-size:12.5px !important; line-height:19px !important; margin-top:8px !important; }
}
/* 홈 헤더 — 로그인 아이디 칩 (회의 2026-08-08: 사서함 번호 대신 아이디) */
.kf-quote__me{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
border-radius:9px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
color:#fff !important; font-size:13px; font-weight:700; letter-spacing:-.02em; text-decoration:none !important;
max-width:190px; }
.kf-quote__me span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-quote__me svg{ flex:none; opacity:.85; }
.kf-quote__bar{ display:flex; align-items:center; gap:9px; }
.kf-quote__bar .kf-quote__logo{ margin-right:auto; }
/* 필수 미입력 칸 — 어디가 비었는지 바로 보이게 (회의 2026-08-08) */
.kf-need,
input.kf-need,
textarea.kf-need{ border-color:#d94a3d !important; background:#fff6f5 !important;
box-shadow:0 0 0 3px rgba(217,74,61,.12) !important; }
/* 하위 페이지 탈출 버튼 (회의 2026-08-08) — 뒤로가기·홈, 크럼 글자 키움 */
.kf-nav2{ display:inline-flex; align-items:center; gap:6px; margin-right:9px; }
.kf-nav2__b{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
padding:0; border-radius:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
color:#fff !important; cursor:pointer; text-decoration:none !important; }
.kf-nav2__b:hover{ background:rgba(255,255,255,.24); }
.kf-apply__crumb{ font-size:13px !important; }
.kf-subhero__bc{ font-size:13px !important; }
/* 흰 배경 위 크럼(서브히어로가 아닌 곳)에서는 색을 뒤집는다 */
.kf-page__body .kf-nav2__b,.kf-tf__body .kf-nav2__b{ background:#eef2f7; border-color:#dde4ed; color:#3f556e !important; }
@media (min-width:761px){ .kf-nav2__b{ width:30px; height:30px; } }
/* 내 배송 카드 미니 진행바 — 카드 본문 패딩 밖(article 직속)이라 테두리에 붙어 잘려 보였다
(회의 2026-08-08: "입고·출발·도착 게이지가 깨진다") */
.kf-card .kf-mini{ margin:11px 0 0; padding:0 13px 12px; }
.kf-card .kf-mini__c em{ font-size:11px; }
@media (min-width:761px){ .kf-card .kf-mini{ padding:0 16px 13px; } }
/* 부가 옵션 (회의 2026-08-08)
· 가 브라우저 기본 italic 이라 요금이 기울어 보였다
· ? 버튼이 라벨 텍스트에 바로 붙어 오타처럼 보여 간격을 준다 */
.kf-opt .kf-fee,
.kf-fee,
.kf-optn,
.kf-req{ font-style:normal !important; }
.kf-opt span{ display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; }
.kf-opt .kf-tip{ width:19px; height:19px; font-size:11.5px; }
/* 전역 헤더 — 모든 페이지 우측 상단 햄버거 (회의 2026-08-08-2차) */
.kf-ghead{ position:absolute; top:12px; right:14px; z-index:60;
display:flex; align-items:center; gap:9px; }
.kf-ghead--fixed{ position:fixed; top:12px; right:14px; }
.kf-ghead .kf-quote__burger{ display:inline-flex !important; align-items:center; justify-content:center;
width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:10px;
background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }
.kf-ghead .kf-quote__login{ display:inline-flex; align-items:center; height:34px; padding:0 14px;
border-radius:9px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
color:#fff !important; font-size:13px; font-weight:700; text-decoration:none !important; }
/* 흰 배경 페이지(로그인 등 히어로 없음)용 반전 */
.kf-ghead--fixed .kf-quote__burger{ background:#eef2f7; border-color:#dde4ed; color:#3f556e; }
.kf-ghead--fixed .kf-quote__login,.kf-ghead--fixed .kf-quote__me{ background:#eef2f7; border-color:#dde4ed; color:#3f556e !important; }
@media (min-width:761px){ .kf-ghead{ top:18px; right:24px; } }
/* 결제 대기 카드 (회의 2026-08-08-3차: "결제하기 버튼이 보더 밖으로 나와 보인다")
.kf-card__pay 가 카드 직속이라 좌우 패딩 없이 테두리에 붙어 있었다 */
.kf-card__pay{ margin:10px 13px 0 !important; padding:11px 0 0 !important; }
.kf-card__pay + .kf-mini{ margin-top:10px; }
a.kf-card__paygo{ min-height:36px; }
@media (min-width:761px){ .kf-card__pay{ margin:10px 16px 0 !important; } }
/* 회의 2026-08-08-4차 ─────────────────────────────── */
/* 전역 헤더를 홈과 같은 컬럼에 정렬 (지금은 화면 끝에 붙어 있음)
홈: 내부 컨테이너 1100 중앙 + padding 24 → 우측 여백 (100%-1100)/2+24 */
@media (min-width:1149px){
.kf-ghead{ right:calc((100% - 1100px)/2 + 24px); top:22px; }
}
/* 카드 액션: [신청서 수정]+[취소] */
.kf-card__acts{ display:inline-flex; gap:6px; flex:none; }
.kf-card__cancel{ display:inline-flex; align-items:center; height:34px; padding:0 12px;
border-radius:9px; background:#fff; border:1px solid #edc9c4; color:#c0392b;
font-size:12.5px; font-weight:800; letter-spacing:-.02em; cursor:pointer; }
.kf-card__cancel:disabled{ opacity:.55; }
a.kf-card__edit{ white-space:nowrap; }
/* ══ 국가별 배대지 랜딩 (inc/kf-country.php) ══════════════ */
.kf-cl{ max-width:660px; margin:0 auto; padding:0 18px 60px; color:#20304a; }
.kf-cl__hero{ background:linear-gradient(160deg,#0b57c9,#0a3f97); border-radius:0 0 22px 22px; margin:0 -18px;
padding:44px 22px 38px; text-align:center; color:#fff; }
.kf-cl__hero h1{ margin:0 0 10px; font-size:26px; font-weight:900; letter-spacing:-.02em; color:#fff; }
.kf-cl__sub{ margin:0 auto 20px; max-width:440px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.85); }
.kf-cl__cta{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 28px;
background:#fff; color:#0b57c9 !important; border-radius:13px; font-weight:800; font-size:15px; text-decoration:none; }
.kf-cl__cta:hover{ background:#eef4ff; }
.kf-cl__sec{ margin-top:36px; }
.kf-cl__sec h2{ font-size:19px; font-weight:800; letter-spacing:-.02em; margin:0 0 12px; }
.kf-cl__sec p{ font-size:14px; line-height:1.7; margin:0 0 10px; }
.kf-cl__steps{ margin:14px 0 0; padding:0 0 0 2px; list-style:none; counter-reset:kfcl; }
.kf-cl__steps li{ position:relative; padding:0 0 14px 40px; font-size:14px; line-height:1.55; counter-increment:kfcl; }
.kf-cl__steps li::before{ content:counter(kfcl); position:absolute; left:0; top:0; width:26px; height:26px;
border-radius:9px; background:#eef4ff; color:#0b57c9; font-weight:800; font-size:13px;
display:flex; align-items:center; justify-content:center; }
.kf-cl__price, .kf-cl__addr{ width:100%; border-collapse:collapse; font-size:14px; border:1.5px solid #e5ebf4; border-radius:12px; overflow:hidden; }
.kf-cl__price th, .kf-cl__addr th{ background:#f4f7fc; font-weight:700; text-align:left; padding:10px 14px; border-bottom:1px solid #e5ebf4; width:38%; }
.kf-cl__price td, .kf-cl__addr td{ padding:10px 14px; border-bottom:1px solid #eef2f8; }
.kf-cl__price thead th{ width:auto; }
.kf-cl__note{ font-size:12.5px; color:#6b7b93; margin-top:8px; }
.kf-cl__note a{ color:#0b57c9; font-weight:700; }
.kf-cl__faq{ border:1.5px solid #e5ebf4; border-radius:12px; padding:0 16px; margin-bottom:10px; }
.kf-cl__faq summary{ cursor:pointer; font-weight:700; font-size:14px; padding:13px 0; list-style:none; }
.kf-cl__faq summary::-webkit-details-marker{ display:none; }
.kf-cl__faq p{ padding:0 0 13px; margin:0; font-size:13.5px; color:#44546c; }
.kf-cl__others p{ display:flex; flex-wrap:wrap; gap:8px; }
.kf-cl__others a{ display:inline-flex; padding:9px 15px; border:1.5px solid #cfe0f7; background:#eef4ff;
color:#0b57c9 !important; border-radius:999px; font-size:13px; font-weight:700; text-decoration:none; }
.kf-cl__others a:hover{ background:#dde9f9; }
@media (min-width:761px){
.kf-cl{ max-width:760px; }
.kf-cl__hero{ margin:0 -18px; border-radius:0 0 26px 26px; padding:60px 24px 52px; }
.kf-cl__hero h1{ font-size:34px; }
.kf-cl__sub{ font-size:15px; max-width:560px; }
}
/* ══ 2026-08-11 지시 ══════════════════════════════════════════
① 내 배송에서 전역 헤더(햄버거)와 알림 버튼이 같은 자리에 겹쳤다.
PC(1149+)는 ghead 가 1100 컨테이너 기준이라 안 겹치고, 모바일·태블릿만 문제.
→ 내 배송에서만 ghead 를 알림 버튼 폭(38)+간격(10)만큼 왼쪽으로 민다.
② 로그인 화면 모바일 상단 여백이 과했다 → 위로 끌어올린다. */
@media (max-width:1148px){
/* 알림 버튼과 같은 줄에 나란히 — 좌우(폭 38 + 간격 10)와 세로선을 모두 맞춘다.
알림은 모바일 top:20 / 태블릿 top:26 에 있는데 ghead 기본값은 12·18 이라 8px 어긋났다. */
body.page-my-account .kf-ghead{ right:64px; top:20px; }
}
@media (min-width:761px) and (max-width:1148px){
body.page-my-account .kf-ghead{ right:74px; top:26px; }
}
@media (max-width:760px){
body.page-login .kf-auth{ padding-top:34px !important; }
body.page-login .kf-auth__hero{ margin-bottom:18px; }
body.page-login .kf-auth__brand{ margin-bottom:14px; }
}
/* 아이디 칩이 길어져도 버튼을 밀지 않도록 (7글자 + … 로 자르지만 안전망) */
.kf-quote__me span{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 카카오톡 상담 플로팅 (b2b.dotasia.eu kakao-chat.tsx 와 동일 스펙) */
.kf-kchat{
/* --kf-bar 는 화면 바닥에 붙어 있는 하단 버튼 바의 실제 높이다(support.php 가 잰다).
그만큼 위로 올라가서 「배송비 보기」 같은 버튼을 가리지 않는다. */
position:fixed; bottom:calc(20px + var(--kf-bar, 0px)); right:16px; z-index:50;
display:inline-flex; align-items:center; gap:8px;
padding:12px 16px; border-radius:999px;
background:#FEE500 !important; color:#3C1E1E !important;
text-decoration:none !important; box-shadow:0 8px 24px rgba(0,0,0,.22);
transition:transform .3s ease-out, box-shadow .3s ease-out;
}
.kf-kchat span{ font-size:14.5px; font-weight:800; line-height:1; color:#3C1E1E; letter-spacing:-.02em; }
.kf-kchat svg{ flex:none; }
.kf-kchat:hover{ transform:scale(1.05); color:#3C1E1E !important; }
.kf-kchat:active{ transform:scale(.95); }
@media (min-width:761px){ .kf-kchat{ bottom:calc(24px + var(--kf-bar, 0px)); right:24px; } }
/* 바가 나타나고 사라질 때 툭 튀지 않게 — 위치도 부드럽게 */
.kf-kchat{ transition:transform .3s ease-out, box-shadow .3s ease-out, bottom .2s ease-out,
opacity .18s ease-out; }
/* 시트·모달이 열려 있는 동안은 비켜 준다 (그 위에 겹쳐 뜨면 지저분하다) */
.kf-kchat.is-away{ opacity:0; pointer-events:none; transform:translateY(8px) scale(.96); }
/* 맨 위로 버튼도 같은 규칙으로 — 카톡 위에 쌓인다 */
.kf-top{ bottom:calc(84px + var(--kf-bar, 0px)) !important; }
@media (min-width:761px){ .kf-top{ bottom:calc(88px + var(--kf-bar, 0px)) !important; } }
/* 움직임을 줄여 달라고 한 사람에게는 위치만 바뀌고 애니메이션은 없다 */
@media (prefers-reduced-motion:reduce){ .kf-kchat{ transition:none } }
/* ══ 신청서 체험 리본 (납품 §5) ═══════════════════════════════
남색(#0f2540) 면 — 파랑+파랑 충돌 해소, "시스템 알림"으로 읽힌다.
sticky + 스크롤 40px 축소(44→32px, F-8 히스테리시스는 JS). */
.kf-demobar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
padding:11px 16px;background:#0f2540;border-bottom:0;
font-size:13px;font-weight:700;color:#c9dcf2;letter-spacing:-.2px;
transition:padding .18s ease,font-size .18s ease}
.kf-demobar__tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
padding:3px 9px;border-radius:999px;background:rgba(143,192,245,.16);
color:#8fc0f5;font-size:11.5px;font-weight:800}
.kf-demobar__tag::before{content:'';width:6px;height:6px;border-radius:50%;background:#8fc0f5}
.kf-demobar span{flex:1 1 260px;line-height:1.5}
.kf-demobar span b{color:#fff}
.kf-demobar a{flex:0 0 auto;padding:6px 12px;border-radius:8px;background:none;
border:1px solid rgba(255,255,255,.28);color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;
transition:background .15s ease,border-color .15s ease;
-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:hover){ .kf-demobar a:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)} }
.kf-demobar a:active{background:rgba(255,255,255,.2);transform:translateY(1px)}
.kf-demobar__m{display:none}
.kf-demobar.is-compact{padding-top:7px;padding-bottom:7px;font-size:12px}
.kf-demobar.is-compact .kf-demobar__d{display:none}
.kf-demobar.is-compact .kf-demobar__m{display:inline}
@media (max-width:680px){
.kf-demobar{padding:9px 14px;font-size:12px;gap:6px;flex-wrap:nowrap}
.kf-demobar__d{display:none}
.kf-demobar__m{display:inline;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-demobar__tag{font-size:11px;padding:2px 8px}
}
/* ── 404 화면 ─────────────────────────────────────────── */
.kf-404{max-width:560px;margin:0 auto;padding:64px 20px 88px;text-align:center}
.kf-404__code{display:block;font-size:64px;font-weight:800;letter-spacing:-2px;color:#cfe0f5;line-height:1}
.kf-404__title{margin:10px 0 0;font-size:24px;font-weight:800;letter-spacing:-.6px;color:#0f2540}
.kf-404__desc{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:#5b6b7d}
.kf-404__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:24px}
.kf-404__go,.kf-404__sub{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
padding:0 22px;border-radius:11px;font-size:14.5px;font-weight:700;text-decoration:none}
.kf-404__go{background:#0055b1;color:#fff}
.kf-404__go:hover{background:#00448f}
.kf-404__sub{background:#eef4fc;color:#0055b1}
.kf-404__sub:hover{background:#e2edfa}
.kf-404__links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:26px;
padding-top:20px;border-top:1px solid #e6edf5}
.kf-404__links a{font-size:13.5px;color:#5b6b7d;text-decoration:none}
.kf-404__links a:hover{color:#0055b1}
@media (max-width:680px){
.kf-404{padding:44px 18px 64px}
.kf-404__code{font-size:52px}
.kf-404__title{font-size:20px}
.kf-404__go,.kf-404__sub{width:100%}
}
/* ══ 체험 종료 팝업 (납품 §6 · B-4) — #kfDemoEnd 전용, 로그인 게이트와 분리 ══ */
.kf-lgate--demo{background:rgba(9,22,40,.55);padding:24px;align-items:center}
.kf-lgate--demo .kf-lgate__box{max-width:420px;padding:0;overflow:hidden;
box-shadow:0 12px 40px rgba(14,29,49,.2);animation:kfUp .3s ease both;border-radius:20px}
.kf-lgate--demo.is-closing .kf-lgate__box{opacity:0;transition:opacity .15s ease;animation:none}
.kf-lgate--demo.is-closing{transition:background .15s ease;background:rgba(9,22,40,0)}
.kf-lgate--demo .kf-lgate__body{padding:26px 24px 20px;text-align:center}
.kf-lgate--demo .kf-lgate__ico{width:50px;height:50px}
.kf-lgate--demo .kf-lgate__title{margin-top:12px;font-size:19px;font-weight:850;letter-spacing:-.03em}
.kf-lgate--demo .kf-lgate__go{gap:8px;min-height:52px;margin-top:22px;border-radius:13px;font-size:15.5px}
.kf-lgate--demo .kf-lgate__go:focus-visible{outline:2px solid #8fc0f5;outline-offset:2px}
.kf-lgate--demo .kf-lgate__later{margin-top:11px;padding:6px 0;font-size:13px;font-weight:600;color:#5b6b7d;
-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:hover){
.kf-lgate--demo .kf-lgate__go:hover{background:#00448f;box-shadow:0 3px 10px rgba(0,60,125,.28)}
.kf-lgate--demo .kf-lgate__later:hover{color:#0f2540;text-decoration:underline}
}
.kf-lgate--demo .kf-lgate__go:active{background:#003a78;transform:translateY(1px)}
/* 3스텝 도식 — 연결선은 아이콘 원 정중앙(top:20px), 마지막 스텝엔 선 없음 (F-9) */
.kf-lgate__steps{display:flex;align-items:flex-start;margin-top:20px}
.kf-lgate__steps>span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.kf-lgate__steps>span:not(:last-child)::after{content:'';position:absolute;top:20px;
left:calc(50% + 24px);right:calc(-50% + 24px);height:1.5px;background:#d3e2f5}
.kf-lgate__steps i{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;border-radius:13px;background:#eef4fc;border:1px solid #d3e2f5}
.kf-lgate__steps b{font-size:12.5px;font-weight:800;color:#0f2540;line-height:1.35;text-align:center}
/* "접수 안 됨" 하단 안내 바 — 본문에서 분리하되 삭제하지 않는다 (§6-2) */
.kf-lgate__safe{display:flex;align-items:center;justify-content:center;gap:7px;
padding:11px 16px;background:#f4f9ff;border-top:1px solid #e2ecf8;font-size:12px;color:#5b6b7d}
.kf-lgate__safe svg{flex:none}
.kf-lgate__safe b{color:#0f2540}
@media (max-width:680px){
.kf-lgate--demo{align-items:flex-end;padding:0}
.kf-lgate--demo .kf-lgate__box{max-width:none;border-radius:20px 20px 0 0;
animation:kfSheetUp .32s cubic-bezier(.32,.72,0,1) both}
.kf-lgate--demo.is-closing .kf-lgate__box{opacity:1;transform:translateY(100%);
transition:transform .2s ease;animation:none}
.kf-lgate--demo .kf-lgate__body{padding:12px 20px 20px}
.kf-lgate--demo .kf-lgate__body::before{content:'';display:block;width:40px;height:4px;border-radius:99px;
background:#dbe3ee;margin:0 auto 14px}
.kf-lgate--demo .kf-lgate__ico{width:44px;height:44px}
.kf-lgate--demo .kf-lgate__title{font-size:17px;margin-top:10px}
.kf-lgate--demo .kf-lgate__go{min-height:52px;font-size:15px;margin-top:18px}
.kf-lgate__steps i{width:38px;height:38px;border-radius:12px}
.kf-lgate__steps b{font-size:11.5px}
.kf-lgate__steps>span:not(:last-child)::after{top:18px;left:calc(50% + 22px);right:calc(-50% + 22px)}
}
@keyframes kfSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .kf-lgate--demo .kf-lgate__box{animation:none} }
/* ── 신청서 스텝1 = 배대지 나라 선택 (토스 시안 d-11 · 2026-08-14) ──────────
유의사항은 [신청 전에 알아둘 점] 안으로 접었고, 동의는 스텝4 제출 직전으로 옮겼다. */
.kf-g1__t{margin:0;font-size:24px;line-height:34px;font-weight:700;color:#191f28;letter-spacing:-.02em}
.kf-g1__s{margin:6px 0 0;font-size:15px;line-height:22.5px;color:#6b7684}
.kf-ctrlist{margin-top:17px;padding:0 20px;overflow:hidden}
.kf-ctrlist__row{display:flex;align-items:center;gap:12px;width:100%;min-height:61px;padding:8px 0;
border:0;border-top:1px solid #f2f4f6;background:none;text-align:left;cursor:pointer}
.kf-ctrlist__row:first-child{border-top:0}
.kf-ctrlist__row img{flex:none;border-radius:3px}
.kf-ctrlist__row b{font-size:16px;font-weight:600;color:#191f28}
.kf-ctrlist__sp{flex:1}
.kf-ctrlist__tag{flex:none;padding:5px 10px;border-radius:9999px;background:#e8f3ff;color:#1b64da;
font-size:12px;font-style:normal;font-weight:600}
.kf-ctrlist__row.is-on b{color:#3182f6}
.kf-ctrlist__more{display:block;width:100%;margin-top:14px;padding:12px 0;border:0;background:none;
text-align:center;font-size:15px;font-weight:600;color:#6b7684;cursor:pointer}
.kf-gatewrap{margin-top:6px}
/* ══════════════════════════════════════════════════════════════════════
신청서 4단계 — 토스 시안 껍데기 (d-11/13/19/22 · 2026-08-14)
필드·제출 로직은 그대로 두고 레이아웃만 시안에 맞춘다.
실측(d-11 · 크롬 43 보정): 진행 라벨 y=78 · 진행바 y=99 h=4 폭 512 · 카드 y=207
되돌리려면 이 블록만 지우면 옛 남색 히어로로 돌아간다.
══════════════════════════════════════════════════════════════════════ */
.kf-apply__hero{background:#f2f4f6;padding:0;border:0;box-shadow:none}
.kf-apply__heroin{display:flex;flex-direction:column;width:100%;max-width:552px;
margin:0 auto;padding:22px 20px 0;gap:0}
@media (min-width:768px){ .kf-apply__heroin{max-width:560px;padding:22px 24px 0} }
/* 시안엔 빵부스러기·PC 제목·부제·원형 4단계가 없다 — 진행 한 줄과 바만 남긴다 */
/* 옛 규칙이 !important 로 켜두는 것들이 있어 여기서도 !important 로 끈다 */
.kf-apply__crumb,.kf-apply__h1--d,.kf-apply__sub--d,.kf-apply__steps{display:none !important}
/* 히어로 제목은 쓰지 않는다 — 시안은 본문 제목("어디 배대지가 필요하세요?")을 쓴다 */
.kf-apply__hero .kf-apply__h1--m{display:none !important}
.kf-apply__hero .kf-apply__progmeta{order:1;display:flex;align-items:center;justify-content:flex-start;
gap:6px;margin:0 0 7px;font-size:13px;line-height:19.5px;font-weight:600;color:#3182f6}
.kf-apply__hero .kf-apply__progmeta span{color:#3182f6}
.kf-apply__progmeta span::after{content:' ·'}
.kf-apply__progmeta b{font-weight:600;color:#3182f6}
.kf-apply__prog{order:2;height:4px;border-radius:9999px;background:#e5e8eb;overflow:hidden;
margin:0;width:100%}
.kf-apply__prog i{display:block;height:100%;border-radius:9999px;background:#3182f6;
transition:width .3s cubic-bezier(.2,.8,.2,1)}
/* 모바일 전용이던 단계 제목을 전 폭에서 쓴다 (시안은 PC·모바일 동일) */
/* 옛 규칙이 폰트·여백을 잡고 있어 특이도를 올린다 (.kf-apply__hero 를 앞에 붙임) */
.kf-apply__hero .kf-apply__h1--m{order:3;display:block;margin:25px 0 0;
font-size:24px;line-height:34px;font-weight:700;color:#191f28;letter-spacing:-.02em}
/* 앱바가 없는 화면이라 시안(앱바 56 + 22)만큼 위를 띄운다 */
.kf-apply__heroin{padding-top:22px}
@media (min-width:768px){ .kf-apply__heroin{padding-top:22px} }
/* 본문 컬럼 — 시안은 512 지만 스텝2 상품 행이 가로로 긴 그리드라 512 에선 화면 밖으로 넘친다.
그래서 컬럼 축소는 **스텝1에만** 적용하고, 스텝2~4 는 옛 폭을 그대로 둔다.
스텝2~4 카드 내부를 세로 스택으로 다시 짜면 그때 512 로 좁힌다. (2026-08-14) */
.kf-apply__body{background:#f2f4f6;padding-top:0}
.kf-apply__in{width:100%;margin:0 auto;padding:12px 20px 120px}
#kfStep1{width:100%;max-width:512px;margin:0 auto}
.kf-apply__body .kf-panel{border-radius:20px;box-shadow:0 1px 3px rgba(0,23,51,.08);border:0}
/* 스텝1 제목은 히어로가 이미 보여준다 — 본문에서 중복 제거 */
/* 시안 d-11: 진행바(102+4) 아래 제목 127 · 부제 167 · 카드 207 */
.kf-g1__t{display:block;margin:2px 0 0}
.kf-g1__s{margin:6px 0 0}
/* 하단 고정 바 — 컬럼 폭에 맞춘다 */
.kf-apply__foot{background:#f2f4f6;border-top:0}
.kf-apply__foot > *{max-width:552px;margin-left:auto;margin-right:auto}
@media (min-width:768px){ .kf-apply__foot > *{max-width:560px} }
/* sub--d 는 p 를 붙인 선택자(.kf-apply__hero p.kf-apply__sub--d)로 켜져 있어 특이도를 맞춰 끈다 */
.kf-apply__hero p.kf-apply__sub--d,
.kf-apply__hero h1.kf-apply__h1--d,
.kf-apply__hero ol.kf-apply__steps,
.kf-apply__hero nav.kf-apply__crumb{display:none !important}
/* 신청서 입력칸 — 토스 시안 d-13/19/22: 회색 배경(#f2f4f6) · 테두리 없음 · 56 · radius 14 */
.kf-apply__in .kf-field input:not([type="checkbox"]):not([type="radio"]),
.kf-apply__in .kf-field select,
.kf-apply__in .kf-field textarea{
width:100%;height:56px;padding:0 16px;border:0;border-radius:14px;background:#f2f4f6;
font-size:16px;line-height:1.5;color:#191f28;box-shadow:none;appearance:none}
.kf-apply__in .kf-field textarea{height:auto;min-height:96px;padding:16px;line-height:24px}
.kf-apply__in .kf-field input::placeholder,
.kf-apply__in .kf-field textarea::placeholder{color:#8b95a1}
.kf-apply__in .kf-field input:focus,
.kf-apply__in .kf-field select:focus,
.kf-apply__in .kf-field textarea:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px #3182f6}
/* 라벨은 작고 흐리게, 굵기는 죽인다 (옛 12px/800 → 시안 13px/500) */
.kf-apply__in .kf-field__hd{margin-bottom:6px}
.kf-apply__in .kf-field__hd b{font-size:13px;font-weight:500;color:#6b7684}
.kf-apply__in .kf-field__hd em{font-size:12px;color:#8b95a1}
.kf-apply__in .kf-field__hd .kf-req{color:#3182f6;font-weight:600}
/* ══════════════════════════════════════════════════════════════════════
신청서 스텝2~4 카드 내부 = 토스 시안 세로 스택 (d-13/19/22 · 2026-08-14)
시안은 한 줄에 한 필드다. PC 에서 가로로 벌리던 옛 규칙을 전부 1열로 되돌린다.
이걸 넣어야 컬럼 512 로 좁혀도 안 넘친다 (넘침 회귀의 재발 방지).
══════════════════════════════════════════════════════════════════════ */
.kf-apply__in{max-width:552px}
@media (min-width:768px){ .kf-apply__in{max-width:560px;padding:12px 24px 120px} }
/* 상품 블록: 이미지 열을 위로 올리고 필드는 1열 */
#kimfast-ship-form .kf-item__body{flex-direction:column !important;gap:16px;padding:18px 20px}
#kimfast-ship-form .kf-item__img{width:100% !important;align-self:stretch !important;
display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#kimfast-ship-form .kf-item__imgprev{width:56px;height:56px;flex:none;border-radius:14px;
border:0;background:#f2f4f6;display:flex;align-items:center;justify-content:center}
#kimfast-ship-form .kf-item__imgprev small{display:none}
#kimfast-ship-form .kf-item__imgbtn{width:auto;height:auto;padding:0;border:0;background:none;
color:#3182f6;font-size:15px;font-weight:600;order:3}
#kimfast-ship-form .kf-item__imgnote{flex:1;min-width:120px;margin:0;order:2;
font-size:15px;line-height:22px;font-weight:600;color:#191f28;text-align:left}
#kimfast-ship-form .kf-item__row2,
#kimfast-ship-form .kf-item__row5{grid-template-columns:1fr !important;gap:10px}
/* 입력칸 — 시안: 회색 배경 · 무테 · 56 · radius 14 */
#kimfast-ship-form .kf-item__fields input:not([type="checkbox"]):not([type="radio"]),
#kimfast-ship-form .kf-item__fields select,
#kimfast-ship-form .kf-item__fields textarea{
min-height:56px;height:56px;padding:0 16px;border:0 !important;border-radius:14px !important;
background:#f2f4f6 !important;font-size:16px;color:#191f28;box-shadow:none}
#kimfast-ship-form .kf-item__fields textarea{height:auto;min-height:96px;padding:16px}
#kimfast-ship-form .kf-item__fields input::placeholder{color:#8b95a1}
#kimfast-ship-form .kf-item__fields input:focus,
#kimfast-ship-form .kf-item__fields select:focus{
outline:0;background:#fff !important;box-shadow:inset 0 0 0 1.5px #3182f6}
/* body 가 column 이 되면서 fields 가 폭을 안 먹는다 — 명시적으로 채운다 */
#kimfast-ship-form .kf-item__fields{width:100%;flex:1 1 auto}
#kimfast-ship-form .kf-item__row2 > *,
#kimfast-ship-form .kf-item__row5 > *{width:100%}
/* 컬럼 폭: 옛 PC 규칙이 이겨서 964 가 됐다 — 특이도를 올려 시안 560 으로 */
.kf-apply__body .kf-apply__in{max-width:552px}
@media (min-width:768px){ .kf-apply__body .kf-apply__in{max-width:560px} }
/* ── 구매비용 카드 (가이드 §8) ─────────────────────────────────────
총액 한 칸만 보이고 부가세·현지배송비·할인은 접는다. */
.kf-cost2__hd h3{font-size:17px;line-height:25.5px;font-weight:600;color:#191f28;margin:0 0 4px}
.kf-cost2__hd p{font-size:14px;line-height:21px;color:#6b7684;margin:0 0 14px}
/* 총액 칸만 크다 — 이 화면의 주인공 (52 로 만들지 말 것) */
.kf-cost2 .kf-cost2__f:first-child .kf-cost2__in input{height:56px;font-size:19px;font-weight:600;
font-variant-numeric:tabular-nums;color:#191f28}
.kf-cost2 .kf-cost2__f:first-child .kf-cost2__in{border-radius:16px;background:#f2f4f6}
.kf-cost2__more{display:flex;align-items:center;gap:4px;width:100%;padding:12px 0 0;border:0;
background:none;font-size:14px;font-weight:600;color:#3182f6;cursor:pointer}
.kf-cost2__more svg{transition:transform .2s cubic-bezier(.4,0,.2,1)}
.kf-cost2__more.is-open svg{transform:rotate(180deg)}
.kf-cost2__extra{margin-top:12px;animation:kfFadeIn .2s ease-out}
.kf-cost2__extra[hidden]{display:none}
@keyframes kfFadeIn{from{opacity:0}to{opacity:1}}
.kf-cost2__note{margin:6px 0 0;font-size:13px;line-height:19.5px;color:#8b95a1}
/* 총 구매비용 합계 행 (§8-4) */
.kf-cost2__total{margin-top:16px;padding-top:16px;border-top:1px solid #e5e8eb;
display:flex;align-items:center;justify-content:space-between}
.kf-cost2__total span{font-size:15px;color:#6b7684}
.kf-cost2__total b{font-size:19px;line-height:28px;font-weight:700;color:#191f28;
font-variant-numeric:tabular-nums}
/* 점선 버튼은 배경을 채우지 않는다 (§7·실수9) */
#kimfast-ship-form .kf-additem,#kimfast-ship-form .kf-item__add,
#kimfast-ship-form [class*="additem"]{background:transparent !important;
border:1.5px dashed #d1d6db !important;border-radius:16px;height:52px;
font-size:16px;font-weight:600;color:#4e5968}
/* 총액 칸 — 통화기호 왼쪽 고정 (가이드 §8-2) */
.kf-cost2__in--total{display:flex;align-items:center;gap:8px;height:56px;padding:0 16px;
border-radius:16px;background:#f2f4f6}
.kf-cur-pre{flex:none;font-size:17px;font-weight:600;color:#8b95a1}
.kf-cost2__in--total input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0;
font-size:19px;font-weight:600;color:#191f28;font-variant-numeric:tabular-nums;outline:0}
.kf-cost2__in--total input::placeholder{color:#b0b8c1}
/* 세금 판정 행 (§8-5) — 초과해도 빨강을 쓰지 않는다 */
.kf-taxline{margin-top:10px;display:flex;align-items:center;gap:8px}
.kf-taxbadge{flex:none;height:24px;display:inline-flex;align-items:center;padding:0 8px;
border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap}
.kf-taxbadge.is-ok{background:rgba(2,162,98,.16);color:#029359}
.kf-taxbadge.is-warn{background:rgba(255,179,49,.16);color:#dd7d02}
.kf-taxdesc{font-size:14px;line-height:21px;color:#4e5968}
/* ── 하단 고정 CTA (가이드 §9) ──────────────────────────────────
배경은 회색 판이 아니라 위로 사라지는 페이드다. 컨테이너는 클릭을 통과시키고
버튼만 받는다. 스크롤 하단 여유 108px 이 없으면 마지막 카드가 가린다. */
.kf-apply__foot{background:linear-gradient(to top,#f2f4f6 62%,rgba(242,244,246,0)) !important;
border-top:0 !important;pointer-events:none;padding:0}
.kf-apply__foot > *{pointer-events:auto}
.kf-apply__bar{width:100%;max-width:552px;margin:0 auto;padding:12px 20px 20px;
display:flex;gap:10px}
@media (min-width:768px){ .kf-apply__bar{max-width:560px;padding:12px 24px 20px} }
.kf-apply__next{flex:1;height:56px;border:0;border-radius:16px;background:#3182f6;color:#fff;
font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer}
.kf-apply__next:hover{background:#2272eb}
.kf-apply__prev{flex:none;height:56px;padding:0 20px;border:0;border-radius:16px;
background:#f2f4f6;color:#4e5968;font-size:16px;font-weight:600;cursor:pointer}
.kf-apply__quote{width:100%;max-width:552px;margin:0 auto;padding:0 20px}
@media (min-width:768px){ .kf-apply__quote{max-width:560px;padding:0 24px} }
/* 마지막 카드가 CTA 에 가리지 않게 (§9·실수12) */
.kf-apply__body .kf-apply__in{padding-bottom:108px}
/* PNG d-13 재확인: 하단은 "다음" 버튼 하나뿐이다. 흰 판도 없고 이전 버튼도 없다.
(앞 화면으로는 앱바 뒤로가기로 간다) */
.kf-apply__bar{background:none !important;box-shadow:none !important;border:0 !important}
.kf-apply__prev{display:none !important}
.kf-apply__foot{box-shadow:none !important}
/* PNG 실측: CTA 는 카드(512)보다 넓은 컬럼 폭 560 이다 (x=280..840). 홈과 같은 규칙. */
.kf-apply__bar{max-width:560px;padding:12px 0 20px}
@media (min-width:768px){ .kf-apply__bar{max-width:560px;padding:12px 0 20px} }
/* ── 미리보기 배너 (시안 d-24/m-24 · 가이드 §3) ─────────────────
진행 표시 아래 16px. 실제 신청 모드에서는 DOM 에 아예 없다. */
.kf-prevbar{order:4;margin-top:16px;padding:14px 16px;border-radius:16px;background:#e8f3ff;
display:flex;align-items:center;gap:12px}
.kf-prevbar__tx{flex:1;min-width:0}
.kf-prevbar__tx b{display:block;font-size:14px;line-height:21px;font-weight:500;color:#1b64da}
.kf-prevbar__tx em{display:block;font-style:normal;font-size:14px;line-height:21px;color:#4e5968}
.kf-prevbar__btn{flex:none;height:38px;display:inline-flex;align-items:center;padding:0 14px;
border-radius:10px;background:#3182f6;color:#fff;font-size:14px;font-weight:600;text-decoration:none}
.kf-prevbar__btn:hover{background:#2272eb}
.kf-prevlab{color:#1b64da}
.kf-apply__hero .kf-prevlab::after{content:none}
/* 미리보기 배너는 제목 위에 온다 */
.kf-apply__hero .kf-apply__h1--m{order:5}
/* 옛 체험 바 잔재 제거 */
.kf-demobar{display:none !important}
/* ── 품목 버튼 + 바텀시트 (가이드 §5-5 · m-14) ─────────────────── */
.kf-catbtn{display:flex;align-items:center;justify-content:space-between;width:100%;height:52px;
padding:0 16px;border:0;border-radius:14px;background:#f2f4f6;cursor:pointer;
font-size:16px;color:#b0b8c1;text-align:left}
.kf-catbtn.is-set{color:#191f28}
.kf-sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end}
.kf-sheet[hidden]{display:none}
.kf-sheet__dim{position:absolute;inset:0;background:rgba(0,0,0,.2);animation:kfFadeIn .2s ease-out}
.kf-sheet__box{position:relative;width:100%;max-height:80%;overflow-y:auto;background:#fff;
border-radius:24px 24px 0 0;padding:24px 0;
animation:kfSheetUp .3s cubic-bezier(.22,1,.36,1)}
@media (min-width:768px){ .kf-sheet__box{max-width:560px;margin:0 auto;border-radius:24px 24px 0 0} }
@keyframes kfSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.kf-sheet__t{margin:0 0 4px;padding:0 24px;font-size:20px;line-height:29px;font-weight:700;color:#191f28}
.kf-sheet__s{margin:0 0 12px;padding:0 24px;font-size:15px;line-height:22.5px;color:#6b7684}
.kf-sheet__it{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
padding:14px 24px;border:0;background:none;cursor:pointer;
font-size:17px;line-height:25.5px;font-weight:500;color:#191f28;text-align:left;
box-shadow:inset 0 1px 0 0 #f2f4f6}
.kf-sheet__list > .kf-sheet__it:first-child{box-shadow:none}
.kf-sheet__it svg{opacity:0;flex:none;color:#3182f6}
.kf-sheet__it.is-on{font-weight:600;color:#3182f6}
.kf-sheet__it.is-on svg{opacity:1}
/* ── 상품 주소 읽기 전용 박스 (가이드 §5-3) ─────────────────────
홈에서 넘어온 주소는 고칠 수 없다. 그래서 글자색이 #191f28 이 아니라 #4e5968 이다. */
.kf-urlbox{min-height:52px;padding:14px 16px;border-radius:14px;background:#f2f4f6;
font-size:15px;line-height:21px;color:#4e5968;word-break:break-all}
.kf-urlbox[hidden]{display:none}
/* ── 배송번호 빈칸 안내 (가이드 §5-4) — 빨강은 이 화면에 없다 ── */
.kf-trkhelp{margin-top:10px;padding:14px 16px;border-radius:14px;background:#e8f3ff;
display:flex;align-items:center;gap:12px;animation:kfFadeIn .2s ease-out}
.kf-trkhelp[hidden]{display:none}
.kf-trkhelp span{flex:1;min-width:0;font-size:14px;line-height:21px;color:#1b64da}
.kf-trkhelp a{flex:none;height:36px;display:inline-flex;align-items:center;padding:0 12px;
border-radius:10px;background:#3182f6;color:#fff !important;font-size:14px;font-weight:600;
text-decoration:none}
/* 배송번호 칸: 만졌는데 비면 파란 테두리 (에러 빨강 아님) */
#kimfast-ship-form .kf-item__trk input{border:1.5px solid transparent !important}
#kimfast-ship-form .kf-item__trk input:focus{background:#fff !important;
border-color:#3182f6 !important}
/* PNG m-15 대조 수정 — 배송번호 칸은 카드 폭 전체다. [조회] 버튼은 시안에 없다. */
#kimfast-ship-form .kf-trk17{display:none !important}
#kimfast-ship-form .kf-item__trk{display:block}
#kimfast-ship-form .kf-item__trk input{width:100%;background:#f2f4f6 !important}
#kimfast-ship-form .kf-item__trk input:focus{background:#fff !important;
border:1.5px solid #3182f6 !important}
/* 안내 블록은 그룹 안쪽 여백을 벗어나 카드 폭에 맞춘다 */
#kimfast-ship-form .kf-group{padding:0 !important;border:0 !important;background:none !important;
display:flex;flex-direction:column;gap:10px}
.kf-trkhelp{width:100%}
/* ── 두 번째부터의 상품 카드는 이름·배송번호 2칸만 (가이드 §6 · §11-8) ──
첫 카드와 똑같이 만들면 화면이 두 배로 길어져 의도가 무너진다.
나머지 정보는 창고에서 확인한다. */
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-item__img,
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-item__copy,
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-field__hd,
#kimfast-ship-form .kf-item:not(:first-of-type) [data-f="url"],
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-urlbox,
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-catbtn,
#kimfast-ship-form .kf-item:not(:first-of-type) [data-f="price"],
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-item__row5{display:none !important}
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-item__no{margin-bottom:12px}
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-item__num{display:none}
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-item__title{font-size:15px;line-height:22.5px;
font-weight:600;color:#333d4b}
/* '빼기' 는 텍스트 버튼 (시안 §6) */
#kimfast-ship-form .kf-item:not(:first-of-type) .kf-item__del{border:0;background:none;padding:0;
font-size:14px;font-weight:600;color:#8b95a1}
/* PNG m-13 — 첫 카드에는 머리 행("1 첫 번째 상품 / 복사·삭제")이 없다. 사진 행부터 시작한다. */
#kimfast-ship-form .kf-item:first-of-type .kf-item__no{display:none}
/* 사진 행: 썸네일 56 + 제목(15/600) + 파란 텍스트 버튼(14/600) 세로 2줄 (§5-1) */
/* 썸네일 | (제목 / 사진 올리기) — flex 로는 두 줄 배치가 안 잡혀 그리드로 못박는다 */
#kimfast-ship-form .kf-item__img{display:grid !important;
grid-template-columns:56px 1fr;grid-template-rows:auto auto;
column-gap:12px;row-gap:2px;align-items:center;width:100% !important}
#kimfast-ship-form .kf-item__imgprev{grid-column:1;grid-row:1/3;align-self:start}
#kimfast-ship-form .kf-item__imgnote{grid-column:2;grid-row:1;margin:0;align-self:end;
font-size:15px;line-height:22.5px;font-weight:600;color:#333d4b;text-align:left}
#kimfast-ship-form .kf-item__imgbtn{grid-column:2;grid-row:2;justify-self:start;align-self:start;
width:auto;height:auto;margin:0;padding:0;border:0;background:none;
color:#3182f6;font-size:14px;font-weight:600}
#kimfast-ship-form .kf-item__imgdel{grid-column:2;grid-row:1;justify-self:end}
#kimfast-ship-form .kf-item__imgprev .kf-item__auto{display:none}
/* 옛 규칙(.kf-item__img{width:130px} 등)이 남아 그리드 폭이 198 로 잘렸다 — 특이도를 올려 못박는다 */
#kimfast-ship-form .kf-item__body > .kf-item__img{width:100% !important;max-width:none !important;
flex:none !important;align-self:stretch !important}
#kimfast-ship-form .kf-item__body .kf-item__imgbtn{height:auto !important;min-height:0 !important;
border-radius:0 !important;box-shadow:none !important;line-height:21px}
/* body 가 column flex 인데 align-items 가 center 라 자식이 콘텐츠 폭으로 줄었다 (그리드가 198 로 잘린 원인) */
#kimfast-ship-form .kf-item__body{align-items:stretch !important}
/* 그리드 1fr 이 콘텐츠 폭으로 줄지 않게 명시 (min-width:auto 기본값 회피) */
#kimfast-ship-form .kf-item__body .kf-item__imgnote{width:100% !important;min-width:0;
justify-self:stretch}
/* PNG m-13 은 흰 카드 한 겹이다. 라이브는 .kf-panel(흰 카드) 안에 .kf-item 이 또 한 겹이라
폭이 두 번 깎여 298 이 됐다 → 안쪽 겹의 테두리·배경·패딩을 없앤다. */
#kimfast-ship-form .kf-item{border:0 !important;background:none !important;
box-shadow:none !important;margin:0 !important}
#kimfast-ship-form .kf-item__body{padding:0 !important}
#kimfast-ship-form .kf-item + .kf-item{margin-top:20px !important;padding-top:20px !important;
border-top:1px solid #f2f4f6 !important}
/* ══ 스텝3 = 어떻게 받을지 (시안 d-19) ═══════════════════════════ */
.kf-s3__t{margin:0;font-size:22px;line-height:31px;font-weight:700;color:#191f28;letter-spacing:-.01em}
.kf-s3__s{margin:6px 0 0;font-size:15px;line-height:22.5px;color:#6b7684}
/* 추천 카드 — 파란 테두리 */
/* 무료 목록 */
.kf-s3__lab{margin:24px 0 10px;font-size:15px;line-height:22.5px;font-weight:600;color:#4e5968}
/* 더 필요한 게 있나요 */
/* ══ 스텝4 = 어디로 받으시겠어요 (시안 d-22) ══════════════════════ */
.kf-s4__card{margin-top:16px}
.kf-s4__hint{margin:6px 0 0;font-size:13px;line-height:19.5px;color:#8b95a1}
.kf-s4__link{display:inline-block;margin-top:6px;font-size:14px;font-weight:600;
color:#3182f6 !important;text-decoration:underline}
.kf-s4__sumt{font-size:17px !important;line-height:25.5px;font-weight:600 !important;color:#191f28 !important}
/* 2026-08-16: 옛 #kfZipBtn 아이콘 규칙 제거.
버튼이 32x32 · font-size:0 이 되어 새 '우편번호 찾기' 칸이 찌그러졌다.
현재 규격은 kf-redesign.css 의 .kf-zipfind 가 갖는다. */
/* ══ 배송 추적 (시안 d-31) ═══════════════════════════════════════ */
/* 추적 히어로는 흰 배경이다. 이제 kf-tf__hero(남색)를 같이 붙이지 않으므로
!important 로 덮을 필요가 없다. 글자색·h1 은 kf-tf__hero 규칙을 못 타니 여기서 준다. */
.kf-tr__hero{background:#f2f4f6;padding:0;border:0;box-shadow:none;color:#191f28}
.kf-tr__hero h1{margin:0;color:#191f28}
.kf-tr__hero .kf-tf__heroin{width:100%;max-width:552px;margin:0 auto;padding:34px 20px 0}
@media (min-width:768px){ .kf-tr__hero .kf-tf__heroin{max-width:560px;padding:34px 24px 0} }
.kf-tr__prod{margin:0;font-size:15px;line-height:22.5px;color:#8b95a1}
.kf-tr__h1{margin:6px 0 0 !important;font-size:22px !important;line-height:31px !important;
font-weight:700 !important;color:#191f28 !important;letter-spacing:-.01em}
.kf-tr__now{margin:6px 0 0 !important;font-size:15px !important;line-height:22.5px !important;
color:#6b7684 !important}
.kf-tr .kf-tf__body{background:#f2f4f6}
.kf-tr .kf-tf__body > *{width:100%;max-width:552px;margin-left:auto;margin-right:auto}
@media (min-width:768px){ .kf-tr .kf-tf__body > *{max-width:560px} }
/* ══ 배송비 결제 (시안 d-32) ═════════════════════════════════════ */
.kf-pay__body{background:#f2f4f6}
.kf-pay__in{width:100%;max-width:552px;margin:0 auto;padding:34px 20px 120px}
@media (min-width:768px){ .kf-pay__in{max-width:560px;padding:34px 24px 120px} }
.kf-pay__prod{margin:0;font-size:15px;line-height:22.5px;color:#8b95a1}
.kf-pay__amt{margin:6px 0 0;font-size:34px;line-height:44px;font-weight:800;color:#191f28;
letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kf-pay__sub{margin:6px 0 0;font-size:15px;line-height:22.5px;color:#6b7684}
.kf-pay__card{margin-top:20px;border-radius:20px;box-shadow:0 1px 3px rgba(0,23,51,.08);border:0}
.kf-pay__h--ask{display:block;margin:0 0 12px;font-size:17px;line-height:25.5px;font-weight:600;color:#191f28}
/* 수단: 그리드 → 세로 리스트 + 오른쪽 라디오 (시안 d-32) */
.kf-pay__methods{display:flex !important;flex-direction:column;gap:0 !important}
.kf-pay__m{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 0;
border:0 !important;border-top:1px solid #f2f4f6 !important;border-radius:0 !important;
background:none !important;text-align:left;cursor:pointer;font-size:16px;color:#191f28}
.kf-pay__methods .kf-pay__m:first-child{border-top:0 !important}
.kf-pay__m i{flex:none;width:40px;height:40px;border-radius:12px;background:#f2f4f6}
.kf-pay__m span{flex:1;min-width:0}
.kf-pay__m::after{content:'';flex:none;width:22px;height:22px;border-radius:9999px;
box-shadow:inset 0 0 0 1.5px #d1d6db}
.kf-pay__m.is-on::after{box-shadow:none;
background:no-repeat center/22px url("data:image/svg+xml;utf8,")}
/* 동의는 각주 모양으로 (기능은 유지) */
.kf-pay__agree{margin-top:12px;padding:0;border:0;background:none;display:flex;align-items:center;
gap:8px;font-size:13px;line-height:19.5px;color:#8b95a1;cursor:pointer}
.kf-pay__agree i{flex:none;width:18px;height:18px;border-radius:6px;box-shadow:inset 0 0 0 1.5px #d1d6db}
.kf-pay__agree[aria-pressed="true"] i{box-shadow:none;background:#3182f6 no-repeat center/12px
url("data:image/svg+xml;utf8,")}
.kf-pay__ft{background:linear-gradient(to top,#f2f4f6 62%,rgba(242,244,246,0)) !important;border-top:0 !important}
/* ══ 메뉴 드로어 (시안 d-41 · m-41/42) ═══════════════════════════
시안엔 아이콘이 없다. 텍스트만 53px 행으로 나열하고 구분선으로 나눈다. */
.kf-nav__panel{background:#fff}
.kf-nav__hd{background:#fff !important;padding:20px 20px 0 !important}
.kf-nav__ttl{color:#191f28 !important;font-size:17px;font-weight:700}
.kf-nav__x svg{stroke:#8b95a1 !important}
/* 게스트 상단 카드 */
.kf-nav__join{margin-top:16px;padding:20px;border-radius:16px;background:#f2f4f6}
.kf-nav__join b{display:block;font-size:17px;line-height:25.5px;font-weight:700;color:#191f28}
.kf-nav__join span{display:block;margin-top:4px;font-size:14px;line-height:21px;color:#6b7684}
.kf-nav__join .kf-nav__auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.kf-nav__solid{height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;
background:#3182f6;color:#fff !important;font-size:15px;font-weight:600;text-decoration:none}
.kf-nav__ghost{height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;
background:#fff;color:#4e5968 !important;font-size:15px;font-weight:600;text-decoration:none;
box-shadow:inset 0 0 0 1px #e5e8eb}
/* 목록 — 아이콘·꺾쇠 없이 텍스트만 */
.kf-nav__body{padding:0 20px 24px}
.kf-nav__lb{margin:22px 0 2px;font-size:13px;line-height:19.5px;color:#8b95a1}
.kf-nav__ic,.kf-nav__ch{display:none !important}
.kf-nav__row{display:flex;align-items:center;gap:10px;min-height:53px;padding:8px 0;
border-top:1px solid #f2f4f6;text-decoration:none}
.kf-nav__lb + .kf-nav__row{border-top:0}
.kf-nav__tx{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.kf-nav__tx b{font-size:16px;font-weight:600;color:#191f28}
.kf-nav__tx small{font-size:13px;color:#8b95a1;margin-left:auto;text-align:right}
.kf-nav__badge{flex:none;padding:4px 8px;border-radius:8px;background:#e8f3ff;color:#1b64da;
font-size:12px;font-weight:600;font-style:normal}
/* 특이도를 올려 못박는다 — 시안 d-11: 제목 127 · 부제 167 · 카드 207 */
.kf-apply__in .kf-g1__t{margin-top:2px !important}
.kf-apply__in .kf-ctrlist{margin-top:0 !important}
/* 옛 남색(#0a2540·#1a2a3a)이 남아 시안 #191f28 을 이기고 있었다 — 특이도를 올려 못박는다.
(PNG 픽셀 실측 결과 시안 제목은 전부 #191f28 이다) */
.kf-apply__in .kf-g1__t,
.kf-apply__in .kf-cost2__hd h3,
.kf-apply__in .kf-s3__t,
.kf-apply__in .kf-item__title{color:#191f28 !important}
/* 추적 상품명이 흰색(#fff)이었다 — 남색 히어로 시절 색이 남아 회색 배경에서 안 보였다.
PNG d-31 실측은 #8b95a1 이다. */
.kf-tr__hero .kf-tr__prod{color:#8b95a1 !important}
/* 추적 화면: 남색 카드 시절 흰 글자가 남아 회색 배경에서 안 보였다.
배경을 바꿀 때 글자색을 같이 안 바꾼 잔재 — 시안 d-31 색으로 되돌린다. */
.kf-tr .kf-tr__eta{background:#fff !important;border-radius:20px;box-shadow:0 1px 3px rgba(0,23,51,.08);
padding:20px}
.kf-tr .kf-tr__eta b,.kf-tr .kf-tr__eta strong{color:#191f28 !important}
.kf-tr .kf-tr__eta small,.kf-tr .kf-tr__eta span{color:#6b7684 !important}
.kf-tr .kf-tr__etatx small{color:#8b95a1 !important}
/* 추적 히어로 안의 옛 계정 헤더(.kf-ghead) — 시안 d-31 에 없다. 흰 글자로 남아 회색 배경에 묻혔다. */
.kf-tr__hero .kf-ghead{display:none !important}
/* ══ 인터랙션 가이드 §B — 신청서 2단계 상품 추가 ════════════════════
추가 상품은 간소 카드(이름·배송번호 2칸)다. 전체 복제 금지. */
.kf-additem{border-color:#d1d6db;background:none;color:#4e5968;border-radius:16px;
min-height:52px;font-size:16px;font-weight:600}
.kf-additem:hover{background:#f9fafb;border-color:#b0b8c1}
.kf-item--mini{background:#fff;border-radius:20px;padding:20px;margin-top:12px;
box-shadow:0 1px 3px rgba(0,23,51,.08);border:0;
animation:kfFadeIn .2s cubic-bezier(.4,0,.2,1) both}
.kf-item--mini .kf-item__no{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:0;border:0}
.kf-item--mini .kf-item__title{font-size:15px;line-height:22.5px;font-weight:600;color:#333d4b}
.kf-item--mini .kf-item__del{flex:none;border:0;background:none;padding:0;
font-size:14px;font-weight:600;color:#8b95a1;cursor:pointer;font-family:inherit}
.kf-item__feebadge{flex:none;height:22px;display:inline-flex;align-items:center;padding:0 7px;
border-radius:6px;background:rgba(78,89,104,.16);color:#4e5968;
font-size:12px;font-weight:600;white-space:nowrap}
.kf-mini__in{width:100%;height:52px;padding:0 16px;border-radius:14px;background:#f2f4f6;
border:1.5px solid transparent;font-size:16px;color:#191f28;font-family:inherit}
.kf-mini__in::placeholder{color:#b0b8c1}
.kf-mini__in:focus{outline:none;background:#fff;border-color:#3182f6}
.kf-mini__in + .kf-mini__in{margin-top:10px}
/* 묶음 요약 행 (§B-5) — 그림자 없음, radius 16 */
.kf-bsum{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:12px;padding:16px 20px;border-radius:16px;background:#fff;
animation:kfFadeIn .2s cubic-bezier(.4,0,.2,1) both}
.kf-bsum__t{font-size:15px;line-height:22.5px;color:#4e5968}
.kf-bsum__b{flex:none;height:24px;display:inline-flex;align-items:center;padding:0 8px;
border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap;
background:rgba(2,162,98,.16);color:#029359}
.kf-bsum__b.is-fee{background:rgba(78,89,104,.16);color:#191f28}
/* 각주 (§B-6) */
.kf-bnote{margin:8px 0 0;font-size:13px;line-height:19.5px;color:#8b95a1}
/* 위 3964 행이 .kf-item 을 납작하게 눌러놨다(첫 카드는 .kf-panel 안이라 맞다).
추가 상품(간소 카드)은 그 자체가 흰 카드라 같은 세기로 되살린다 — 인터랙션 가이드 §B-2. */
#kimfast-ship-form .kf-item--mini{background:#fff !important;border:0 !important;
border-radius:20px !important;padding:20px !important;
box-shadow:0 1px 3px rgba(0,23,51,.08) !important;margin:12px 0 0 !important}
#kimfast-ship-form .kf-item + .kf-item--mini{margin-top:12px !important;padding-top:20px !important;
border-top:0 !important}
#kimfast-ship-form .kf-item--mini .kf-item__no{margin-bottom:12px !important}
/* ══ 인터랙션 가이드 §C·§D — 3단계 옵션 ═══════════════════════════ */
/* §C-1 폴리백 추천 버튼: 미선택 파랑 / 선택됨 연파랑. 카드 테두리·배지·제목은 그대로 */
/* §D-2 옵션 9행 — 목록 카드는 토글 버튼과 붙여 한 덩어리로 (위 8px) */
/* kf-redesign.css 의 :where 리셋(margin-top:0)이 나중에 로드돼 이긴다 → ID 로 세기를 올린다 */
/* §D-4 선택 요약 카드 — 목록을 접어도 남는다 */
/* 시트 제목이 워드프레스 본문 h3 규칙(.site-main--page .wp-block-post-content h3, 0-2-1)에
눌려 15.5px 로 나왔다. 클래스 3개(0-3-0)로 올려서 되찾는다. 개발가이드 §5.9 = 20px/700 */
.kf-sheet .kf-sheet__box .kf-sheet__t{font-size:20px;line-height:29px;font-weight:700;color:#191f28}
/* 시트/메뉴가 열렸을 때 뒤 배경 스크롤 잠금 (개발가이드 §10).
body 인라인 style 은 기존 !important 규칙에 밀려서 클래스로 잡는다. */
body.kf-noscroll{overflow:hidden !important}
/* 신청서 2단계 카드 — PNG m-13/m-24 대조 정리 */
.kf-fhint{margin:6px 0 0;font-size:13px;line-height:19.5px;color:#8b95a1}
.kf-field__hd--sub{margin-top:14px}
/* 토스트가 화면 밖으로 나가던 문제 (개발가이드 §5.10: 좌우 20px, 하단에서 96px 위) */
.kf-toast{left:20px;right:20px;max-width:calc(100% - 40px);box-sizing:border-box}
/* 하단 CTA — 개발가이드 §5.2. 1008 행의 `.kf-apply__foot .kf-apply__bar{position:static}` 가
리디자인 규칙보다 세서 버튼이 문서 흐름에 박혀 내용 중간에 나타났다(대표님 보고 2026-08-16).
같은 세기 이상으로 붙잡아 하단 고정 + 위쪽 페이드로 되돌린다. */
.kf-apply__foot .kf-apply__bar,
#kimfast-apply .kf-apply__bar{
position:sticky;bottom:0;z-index:20;
background:linear-gradient(to top,#f2f4f6 62%,rgba(242,244,246,0));
backdrop-filter:none;border-top:0;
padding:12px 20px 20px;pointer-events:none}
.kf-apply__foot .kf-apply__bar > *,
#kimfast-apply .kf-apply__bar > *{pointer-events:auto}
@media (min-width:768px){
.kf-apply__foot .kf-apply__bar,
#kimfast-apply .kf-apply__bar{padding:12px 24px 20px}
}
/* 스크롤 끝에서 내용이 CTA 에 가리지 않게 (가이드 §3 — 하단 여유 108px) */
.kf-apply__body{padding-bottom:108px}
/* 신청서 2단계 — PNG m-13/m-24 잔여 차이 (2026-08-16 대조) */
/* ① 상품 주소 · 배송 번호는 시안에서 별개의 칸이다. 옛 .kf-group 은 둘을 한 상자로 묶고
사이에 가로선을 그었다 — 시안에 그 선이 없다. */
#kimfast-ship-form .kf-group{border:0 !important;background:none !important;overflow:visible}
#kimfast-ship-form .kf-item__trk{border-top:0 !important;padding:0 !important;
background:#f2f4f6;border-radius:14px}
#kimfast-ship-form .kf-item__trk input{min-height:52px;padding:0 16px !important}
#kimfast-ship-form .kf-group > input[data-f=url]{width:100%;min-height:52px;padding:0 16px;
border-radius:14px;background:#f2f4f6;border:1.5px solid transparent}
#kimfast-ship-form .kf-group > input[data-f=url]:focus{background:#fff;border-color:#3182f6;outline:none}
/* ② 초록 면세 안내 박스 — 시안(m-13/m-24)에 없다 */
#kimfast-ship-form #kfDutyCoach{display:none !important}
/* ③ 사진 삭제 ⓧ — 시안에 없다. 실제 이미지가 붙었을 때만 의미가 있는데
체험 모드는 이미지가 비어 있어 회색 상자 위에 ⓧ 만 떠 있었다. */
#kimfast-ship-form .kf-item__imgdel{display:none !important}
/* ④ '자동 저장됨' 은 카드 안이 아니라 진행바 옆이다 (개발가이드 §5.11). 카드 안 것은 감춘다. */
#kimfast-ship-form #kfAutosave{display:none !important}
/* ══ 워드프레스 본문 제목 규칙 무력화 ═══════════════════════════════
`.site-main--page .wp-block-post-content h1~h4` (0-2-1) 이
우리 클래스(0-1-0)를 이겨서 제목 크기가 제멋대로 줄어든다.
이미 세 번 당했다: 시트 제목 20→15.5, 신청서 단계 제목 22→18, 게이트 제목 24→18.
여기서 한 번에 막는다 — 우리 화면 안에서는 태그 규칙이 클래스를 이기지 못하게 한다.
(0-3-1 이라 위 규칙보다 세다. 값은 '상속' 이 아니라 각 클래스가 정한 값을 쓰게 revert.) */
/* revert-layer 는 쓰면 안 된다 — 워드프레스 테마의 h1{clamp()} 로 돌아가 32px 이 된다.
(실측 사고 2026-08-16: 제목이 24 → 32 로 커졌다.)
각 클래스가 정한 값을 같은 자리에서 다시 못박는 방식만 안전하다. */
.site-main--page .wp-block-post-content .kfr-h-hero{font-size:30px;line-height:40px;font-weight:700}
.site-main--page .wp-block-post-content .kfr-h-page,
.site-main--page .wp-block-post-content .kfr-h-screen{font-size:24px;line-height:33px;font-weight:700}
.site-main--page .wp-block-post-content .kfr-h-step{font-size:22px;line-height:31px;font-weight:700}
.site-main--page .wp-block-post-content .kfr-h-section{font-size:20px;line-height:29px;font-weight:700}
@media (min-width:768px){
.site-main--page .wp-block-post-content .kfr-h-hero{font-size:40px;line-height:49px}
}
.site-main--page .wp-block-post-content .kf-g1__t{font-size:24px;line-height:33px;font-weight:700}
.site-main--page .wp-block-post-content .kf-s3__t{font-size:22px;line-height:31px;font-weight:700}
.site-main--page .wp-block-post-content .kf-tf__hero h1{font-size:24px;line-height:33px;font-weight:700}
/* 신청 전에 알아둘 점 시트 (PNG m-12) */
.kf-notice__body{padding:0 24px;max-height:52vh;overflow-y:auto}
.kf-notice__body .kf-g2{margin:0;padding:0;background:none;border:0;box-shadow:none}
.kf-notice__close{display:block;width:calc(100% - 48px);margin:16px 24px 0;height:56px;
border:0;border-radius:16px;background:#f2f4f6;color:#4e5968;
font-size:17px;font-weight:600;font-family:inherit;cursor:pointer}
/* 1단계에서는 '다음' 버튼을 감춘다 — 나라를 고르면 바로 넘어간다 (PNG m-11) */
#kfStep1:not([hidden]) ~ .kf-apply__foot #kfGateGo,
body:has(#kfStep1:not([hidden])) #kfGateGo{visibility:hidden}
/* `.kf-apply__foot > *{max-width:560px;margin:0 auto}` 는 하단 CTA 폭을 잡으려는 규칙인데,
같은 부모에 들어 있는 바텀시트까지 잡아버렸다. 그래서 PC 에서 딤이 화면을 못 덮고
콘텐츠 컬럼(560)만 가려 앱바가 딤 위로 올라와 클릭을 가로챘다 (2026-08-16 실측).
시트는 화면 전체를 덮어야 한다 (개발가이드 §5.9). */
.kf-apply__foot > .kf-sheet,
.kf-apply__foot > .kf-mb,
.kf-apply__foot > .kf-imgmodal{max-width:none !important;margin:0 !important}
/* 시트는 앱바(z:50)·하단 CTA(z:20) 보다 위에 있어야 한다 */
.kf-sheet{z-index:200}
/* `.kf-apply__foot{position:sticky;z-index:5}` 가 쌓임 맥락을 만들어서
그 안의 시트는 z-index 를 아무리 올려도 앱바(z:50) 위로 못 올라간다.
시트가 자식으로 들어 있으므로 부모 쪽을 올려야 한다 (2026-08-16 실측). */
.kf-apply__foot{z-index:200}
/* ══════════════════════════════════════════════════════════════════
신청서 3/4 · 부가 옵션 — handoff6 시안 (2026-08-31)
치수는 전부 Desktop/handoff6 각 폴더의 가이드.md 실측값이다. 눈으로 고치지 말 것.
모바일 콘텐츠 열 335px · PC 512px — 글자 크기와 padding 은 둘이 같다.
══════════════════════════════════════════════════════════════════ */
/* 배지 — 화면 전체에 두 색뿐이다. 파랑 = 옵션명 · 초록 = 값이 없음 */
/* 배지를 inline 으로 두면 부모 줄 상자에 여분이 붙어 행이 2px 커진다.
flex + fit-content 로 블록화해 자기 높이(22px)만 정확히 차지하게 한다. */
#kfStep3 .kfr6-bdg{display:flex;width:fit-content;align-items:center;height:22px;padding:0 7px;border-radius:6px;
font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
#kfStep3 .kfr6-bdg--blue{background:rgba(49,130,246,.16);color:#1b64da}
#kfStep3 .kfr6-bdg--green{background:rgba(2,162,98,.16);color:#029359}
/* ── 추천 카드 · 정밀검수 전용 (모바일 229px · PC 208px) ── */
#kfStep3 .kfr6-reco{margin-top:16px;padding:20px;background:#fff;border:1.5px solid #c9e2ff;border-radius:20px;
box-shadow:0 4px 16px rgba(49,130,246,.12);transition:border-color 150ms cubic-bezier(.4,0,.2,1)}
#kfStep3 .kfr6-reco.is-on{border-color:#3182f6}
#kfStep3 .kfr6-reco__top{display:flex;align-items:flex-start;gap:12px}
#kfStep3 .kfr6-reco__ico{flex:none;display:flex;align-items:center;justify-content:center;
width:38px;height:38px;margin-top:1px;border-radius:12px;background:#e8f3ff}
#kfStep3 .kfr6-reco__tx{flex:1;min-width:0;line-height:0}
#kfStep3 .kfr6-reco__h{display:block;margin-top:5px;font-size:18px;line-height:26px;font-weight:700;
color:#191f28;letter-spacing:-.015em}
#kfStep3 .kfr6-reco__p{margin:4px 0 0;font-size:14px;line-height:21px;font-weight:400;color:#4e5968;
text-wrap:pretty}
#kfStep3 .kfr6-reco__btn{display:flex;align-items:center;justify-content:center;gap:7px;
width:100%;height:52px;margin-top:14px;border:0;border-radius:14px;cursor:pointer;
background:#3182f6;color:#fff;font-family:inherit;font-size:16px;font-weight:600;
transition:background 150ms cubic-bezier(.4,0,.2,1),color 150ms cubic-bezier(.4,0,.2,1)}
#kfStep3 .kfr6-reco__btn.is-on{background:#e8f3ff;color:#1b64da}
#kfStep3 .kfr6-reco__chk{display:none;flex:none}
#kfStep3 .kfr6-reco__btn.is-on .kfr6-reco__chk{display:block}
/* ── 목록 라벨 · 각주 ── */
#kfStep3 .kfr6-lab{margin:28px 0 10px;font-size:15px;line-height:22.5px;font-weight:600;color:#4e5968}
#kfStep3 .kfr6-note{margin:10px 0 0;font-size:13px;line-height:19.5px;font-weight:400;color:#8b95a1}
/* ── 옵션 목록 (821px = 유료 136×3 + 무료 108×3 + 구분선) ── */
#kfStep3 .kfr6-list{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 1px 3px rgba(0,23,51,.08)}
/* 구분선을 border-top 으로 넣으면 overflow:hidden 과 만나 첫 행에 선이 남는다 */
#kfStep3 .kfr6-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:16px 20px;
border:0;background:transparent;text-align:left;font-family:inherit;
box-shadow:inset 0 1px 0 0 #f2f4f6;transition:background 150ms cubic-bezier(.4,0,.2,1)}
#kfStep3 .kfr6-row:first-child{box-shadow:none}
#kfStep3 .kfr6-row--paid{cursor:pointer}
#kfStep3 .kfr6-row--paid.is-on{background:#f4f9ff}
#kfStep3 .kfr6-row--free{cursor:pointer}
#kfStep3 .kfr6-row__tx{flex:1;min-width:0;display:block;line-height:0}
#kfStep3 .kfr6-row__h{display:block;margin-top:5px;font-size:17px;line-height:25.5px;font-weight:600;color:#191f28}
#kfStep3 .kfr6-row__d{display:block;margin-top:2px;font-style:normal;font-size:14px;line-height:21px;
font-weight:400;color:#6b7684;text-wrap:pretty}
#kfStep3 .kfr6-row__f{display:block;margin-top:6px;font-style:normal;font-size:15px;line-height:22.5px;
font-weight:600;color:#4e5968;font-variant-numeric:tabular-nums;
transition:color 150ms cubic-bezier(.4,0,.2,1)}
#kfStep3 .kfr6-row--paid.is-on .kfr6-row__f{color:#1b64da}
/* ── 토글 — 트랙과 노브의 이징이 다르다 (노브가 탄성) ── */
#kfStep3 .kfr6-sw{flex:none;position:relative;width:50px;height:30px;margin-top:6px;border-radius:15px;
background:#d1d6db;transition:background 200ms cubic-bezier(.4,0,.2,1)}
#kfStep3 .kfr6-sw i{position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;
background:#fff;box-shadow:0 2px 4px rgba(0,23,51,.15);
transition:transform 200ms cubic-bezier(.22,1,.36,1)}
#kfStep3 .kfr6-row--paid.is-on .kfr6-sw{background:#3182f6}
#kfStep3 .kfr6-row--paid.is-on .kfr6-sw i{transform:translateX(20px)}
/* 무료 토글 — disabled·opacity 를 쓰면 「막혀 있다」로 읽힌다. 파란 채로 고정한다 */
#kfStep3 .kfr6-sw--fixed{background:#3182f6}
#kfStep3 .kfr6-sw--fixed i{left:26px;transition:none}
/* ── 예상 결제액 (기본 154 / 1개 187 / 3개 252) ── */
#kfStep3 .kfr6-sum{margin-top:16px;padding:20px;background:#fff;border-radius:20px;
box-shadow:0 1px 3px rgba(0,23,51,.08)}
#kfStep3 .kfr6-sum__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0}
#kfStep3 .kfr6-sum__row--opt{animation:kfFade 200ms cubic-bezier(.4,0,.2,1)}
#kfStep3 .kfr6-sum__lb{font-size:15px;line-height:22.5px;font-weight:400;color:#6b7684}
#kfStep3 .kfr6-sum__v{flex:none;font-size:15px;line-height:22.5px;font-weight:500;color:#191f28;
font-variant-numeric:tabular-nums}
#kfStep3 .kfr6-sum__v--plus{color:#1b64da}
#kfStep3 .kfr6-sum__tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
margin-top:10px;padding-top:14px;border-top:1px solid #e5e8eb}
#kfStep3 .kfr6-sum__tlb{font-size:16px;line-height:24px;font-weight:600;color:#191f28}
#kfStep3 .kfr6-sum__tv{flex:none;font-size:20px;line-height:29px;font-weight:700;color:#191f28;
font-variant-numeric:tabular-nums}
#kfStep3 .kfr6-sum__note{margin:8px 0 0;font-size:13px;line-height:19.5px;font-weight:400;color:#8b95a1}
@keyframes kfFade{from{opacity:0}to{opacity:1}}
/* 폼 계약용 숨긴 입력 — display:none 이면 일부 브라우저가 값을 안 보낸다 */
.kfr6-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 스크롤 끝 여백 — 마지막 카드가 하단 고정 [다음] 에 가리지 않게 */
/* .kf-stepwrap 이 flex + gap:14px 이라 자식 사이마다 14px 이 얹힌다.
handoff6 는 요소마다 margin 으로 간격을 정하므로 gap 을 0 으로 눕힌다.
(다른 단계는 gap 을 그대로 쓰므로 이 화면에만 적용한다) */
#kfStep3{gap:0;padding-bottom:108px}
/* h1·부제는 4단계와 공유하는 클래스라 이 화면에서만 가이드 값으로 덮는다.
옛 규칙의 margin-top:-8px 은 위 gap:14px 를 상쇄하려던 값이다 — gap 을 없앴으니 걷어낸다. */
#kfStep3 .kf-s3__t{margin-top:24px}
#kfStep3 .kf-s3__s{margin-top:6px}
/* 현지에서 알려온 내용 — 지점 신고 사진을 고객이 마이페이지에서 본다 (2026-09-02) */
.kf-pb__r{margin-top:13px;padding-top:13px;border-top:1px solid #eef1f5}
.kf-pb__r:first-of-type{margin-top:11px;padding-top:0;border-top:0}
.kf-pb__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kf-pb__h b{font-size:15px;line-height:22.5px;font-weight:600;color:#e0332f}
.kf-pb__h em{flex:none;font-style:normal;font-size:12px;line-height:18px;color:#8a9cb0}
.kf-pb__m{margin:7px 0 0;font-size:14px;line-height:21px;color:#333d4b;white-space:pre-line}
.kf-pb__f{margin:13px 0 0;padding:12px 14px;border-radius:12px;background:#f4f7fb;
font-size:13px;line-height:19.5px;color:#4e5968}
/* 창고 회신 폼 — 고객이 사진을 보고 그 자리에서 결정한다 (2026-09-02) */
.kf-pb__rp{margin-top:10px;padding:11px 13px;border-radius:12px;background:#f4f7fb;border-left:3px solid #0055b1}
.kf-pb__rph{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kf-pb__rph b{font-size:14px;line-height:21px;font-weight:600;color:#0055b1}
.kf-pb__rph em{flex:none;font-style:normal;font-size:12px;line-height:18px;color:#8a9cb0}
.kf-pb__rpm{margin:5px 0 0;font-size:13px;line-height:19.5px;color:#4e5968;white-space:pre-line}
.kf-pb__f2{margin-top:13px;padding-top:13px;border-top:1px dashed #dbe3ec}
.kf-pb__ask{margin:0 0 10px;font-size:13px;line-height:19.5px;font-weight:600;color:#333d4b}
.kf-pb__opts{display:block}
.kf-pb__op{display:block;margin-bottom:8px;cursor:pointer}
.kf-pb__op input{position:absolute;opacity:0;width:0;height:0}
.kf-pb__opb{display:block;padding:12px 14px;border:1.5px solid #e1e7ef;border-radius:13px;background:#fff}
.kf-pb__opb b{display:block;font-size:14px;line-height:21px;font-weight:600;color:#191f28}
.kf-pb__opb i{display:block;margin-top:2px;font-style:normal;font-size:12px;line-height:18px;color:#8a9cb0}
.kf-pb__op input:checked+.kf-pb__opb{border-color:#0055b1;background:#f4f8ff;box-shadow:0 0 0 1px #0055b1 inset}
.kf-pb__op input:focus-visible+.kf-pb__opb{outline:2px solid #0055b1;outline-offset:2px}
.kf-pb__ta{width:100%;box-sizing:border-box;margin-top:4px;padding:12px 14px;border:1.5px solid #e1e7ef;
border-radius:13px;font:400 14px/21px inherit;color:#191f28;background:#fff;resize:vertical}
.kf-pb__ta:focus{border-color:#0055b1;outline:0}
.kf-pb__go{display:block;width:100%;margin-top:10px;padding:14px;border:0;border-radius:13px;
background:#0055b1;color:#fff;font-size:15px;font-weight:600;line-height:22.5px;cursor:pointer}
.kf-pb__go:disabled{background:#b0c4dd;cursor:default}
.kf-pb__msg{margin:8px 0 0;font-size:13px;line-height:19.5px;color:#4e5968}
.kf-pb__msg.is-bad{color:#e0332f}
/* 지금 어디쯤인지 — 「결제 창이 어디 있냐」는 문의를 막는 4단계 (2026-09-02) */
.kf-pb__flow{display:flex;gap:6px;margin:14px 0 0;padding:0;list-style:none;counter-reset:none}
.kf-pb__flow li{flex:1 1 0;min-width:0;padding:9px 6px;border-radius:10px;background:#f4f7fb;text-align:center}
.kf-pb__flow li b{display:block;font-size:12px;line-height:17px;font-weight:600;color:#8a9cb0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-pb__flow li i{display:block;margin-top:1px;font-style:normal;font-size:10.5px;line-height:15px;color:#adb9c7}
.kf-pb__flow li.is-now{background:#0055b1}
.kf-pb__flow li.is-now b{color:#fff}
.kf-pb__flow li.is-now i{color:#bcd8f7}
.kf-pb__f b{color:#191f28}
.kf-pb__flow li.is-done{background:#eef4fb}
.kf-pb__flow li.is-done b{color:#5b7fa6}
/* 「결제는 언제 하나요?」 — 입고 알림 뒤 반복되던 문의를 화면에서 먼저 답한다 (2026-09-02) */
.kf-ps__flow{display:flex;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.kf-ps__flow li{flex:1 1 0;min-width:0;padding:9px 6px;border-radius:10px;background:#f4f7fb;text-align:center}
.kf-ps__flow li b{display:block;font-size:12px;line-height:17px;font-weight:600;color:#8a9cb0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-ps__flow li i{display:block;margin-top:1px;font-style:normal;font-size:10.5px;line-height:15px;color:#adb9c7}
.kf-ps__flow li.is-done{background:#eef4fb}
.kf-ps__flow li.is-done b{color:#5b7fa6}
.kf-ps__flow li.is-now{background:#0055b1}
.kf-ps__flow li.is-now b{color:#fff}
.kf-ps__flow li.is-now i{color:#bcd8f7}
.kf-ps__msg{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#f4f7fb;
font-size:13.5px;line-height:20px;color:#4e5968}
.kf-ps__msg b{color:#191f28}