/* ══════════════════════════════════════════════════════════════
   김빠른 홈 — 「한 화면 = 요금조회」 CSS (2026-08)
   · 모바일 퍼스트 · @media(min-width:761px) 에서 데스크탑
   · 파란 면 하나가 100dvh · LIVE 티커까지가 첫 화면
   · 세로가 짧은 노트북(1440×768)에서도 조회 버튼이 잘리지 않도록 vh 기반 clamp
   ══════════════════════════════════════════════════════════════ */

: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-ok:#1f9d55; --kf-ok-d:#0f6b41; --kf-warn:#a33522;
}

/* 흰 상단바 제거 — 로고·로그인은 파란 영역 안으로 들어갔습니다 */
.site-header{display:none !important;}
/* 홈에서 삭제된 섹션들 (마크업까지 지우는 것을 권장, 안전망으로 남겨둠) */
.kf-banner,.kf-quick,.kf-actions,.kf-promos,.kf-svc,.kf-stats,.kf-howto,.ks-reviews,.kf-noticebar,.kf-cbar{display:none !important;}

.kf-quote{
  /* main.css 의 section{padding-block:clamp(3rem,8vw,6rem)} 가 히어로 위아래에
     48px 를 얹어 목업보다 전체가 아래로 밀린다. 이 블록에서만 해제. */
  padding:0 !important;
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,#0055b1 0%,#00306a 100%);
  color:#fff; margin:0 calc(50% - 50vw); width:100vw;
  min-height:100dvh; display:flex; flex-direction:column;
}
.kf-quote *{box-sizing:border-box;}
.kf-quote [hidden]{display:none !important;}
.kf-sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

.kf-quote__in{position:relative;
  flex:1; width:100%; max-width:1100px; margin:0 auto;
  padding:14px 16px 20px;
  display:flex; flex-direction:column; justify-content:flex-start;   /* 모바일: 로고를 화면 맨 위로 */
  gap:clamp(16px,2.8vh,20px);            /* 모바일 여백 확대 */
}

/* ── [NEW] 파란 영역 안 상단바 ──────────────────────────── */
/* 회의 지시(2026-08-09): 전역 헤더와 동일하게 햄버거가 맨 오른쪽 —
   space-between 을 쓰면 가운데 요소(로그인)가 중앙으로 퍼지므로 로고에 mr:auto */
.kf-quote__bar{display:flex;align-items:center;gap:12px;}
.kf-quote__logo{margin-right:auto;display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:17px;font-weight:900;color:#fff;letter-spacing:-.02em;}
.kf-quote__logo:hover{color:#fff;}
/* 지시 2026-08-10: 이메일 템플릿(notify.php)의 "김빠른." 과 똑같이 — 노란 점 #ffda47.
   홈 상단바 로고에만 적용한다 (푸터·드로어는 그대로) */
.kf-quote__name{display:inline;}
.kf-quote__dot{color:#ffda47;}
.kf-quote__logomark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);}
.kf-quote__auth{display:flex;align-items:center;gap:7px;}
/* 모바일: 버튼이 아니라 텍스트 링크 — 상단이 가벼워집니다 */
.kf-quote__auth{gap:14px;}
.kf-quote__login,.kf-quote__join{display:inline-flex;align-items:center;border:none;background:none;border-radius:9px;padding:0;font-size:13px;text-decoration:none;white-space:nowrap;}
.kf-quote__login{color:rgba(255,255,255,.78);font-weight:600;}
.kf-quote__login:hover{color:#fff;}
.kf-quote__join{color:#fff;font-weight:700;}
.kf-quote__join:hover{color:#fff;}

/* ── 헤드라인 ───────────────────────────────────────────── */
.kf-quote__hd{text-align:center;}
.kf-quote__chips{display:none;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;}
/* eyebrow 칩은 모바일에서 숨김 — 텍스트 감축 */
.kf-quote__eyebrow{display:none;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;}
.kf-quote__live{display:none;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;}
.kf-quote__live i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--kf-sky);flex:none;}
.kf-quote__live i::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--kf-sky);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-quote__hd h1{color:#fff;font-size:clamp(21px,3.1vh,24px);font-weight:850;line-height:1.16;letter-spacing:-.035em;margin:clamp(8px,1.4vh,12px) 0 0;text-wrap:balance;}
.kf-quote__hd h1 em{font-style:normal;color:var(--kf-sky);}
.kf-quote__hd p{color:rgba(255,255,255,.82);font-size:12.5px;line-height:1.5;margin:clamp(6px,1vh,8px) 0 0;}
.kf-quote__hd p b{color:#fff;}

/* ── 카드 ───────────────────────────────────────────────── */
.kf-quote__card{background:#fff;border-radius:22px;padding:10px 20px 22px;box-shadow:0 18px 44px rgba(0,25,60,.3);}
/* 단계 라벨도 모바일에서 숨김 — 셀렉트와 placeholder가 이미 설명합니다 */
.kf-quote__steplabel{display:none;align-items:center;gap:8px;margin-bottom:8px;font-size:12.5px;font-weight:800;color:var(--kf-ink);}
.kf-quote__steplabel span{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;flex:none;border-radius:6px;background:var(--kf-blue);color:#fff;font-size:11px;font-weight:800;}

.kf-quote__ctr{display:none;gap:7px;flex-wrap:wrap;margin-bottom:10px;}
.kf-quote__ctrbtn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #e2eaf4;background:#fff;color:#3c4f68;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.kf-quote__ctrbtn img{border-radius:2px;display:block;}
.kf-quote__ctrbtn:hover{border-color:#b9cde8;}
.kf-quote__ctrbtn.is-on{background:var(--kf-blue);border-color:var(--kf-blue);color:#fff !important;}

/* 국가 + URL 입력 그룹 */
/* 모바일: 상자 안 상자를 없애고 각 필드를 전체 폭으로 확장 */
.kf-quote__group{display:flex;flex-direction:column;gap:0;border:none;background:transparent;border-radius:14px;}
.kf-quote__ctrsel{display:block;position:relative;}
.kf-quote__ctrsel img{position:absolute;left:2px;top:50%;transform:translateY(-50%);border-radius:2px;pointer-events:none;}
.kf-quote__ctrsel svg{position:absolute;right:2px;top:50%;transform:translateY(-50%);pointer-events:none;}
.kf-quote__ctrsel select{
  width:100%; min-height:60px; padding:0 34px 0 38px;
  border:none; border-bottom:1px solid #edf1f7; border-radius:0; background:transparent;
  font-size:17px; font-weight:700; font-family:inherit; color:var(--kf-ink);
  appearance:none; -webkit-appearance:none; outline:none; cursor:pointer;
}
.kf-quote__ctrsel select:focus{border-bottom-color:var(--kf-blue);}

.kf-quote__rows{display:flex;flex-direction:column;gap:0;}
.kf-quote__row{display:flex;align-items:center;gap:8px;padding:0 2px;border:none;border-bottom:1px solid #edf1f7;border-radius:0;background:transparent;}
.kf-quote__row:focus-within{border-bottom-color:var(--kf-blue);}
.kf-quote__url{
  flex:1; min-width:0; min-height:64px; padding:0; border:none; background:transparent;
  font-size:17px;                      /* 16px 이상 — iOS 자동 확대 방지. 절대 낮추지 마세요 */
  font-family:inherit; color:var(--kf-ink); outline:none;
}
.kf-quote__url::placeholder{color:#9db0c6;font-size:15px;font-weight:500;}  /* input은 16px 이상 유지, placeholder만 작게 */
/* 번호 배지는 2줄 이상일 때만 — 1줄일 땐 입력 폭을 양보합니다 */
.kf-quote__num{display:none;width:22px;height:22px;flex:none;border-radius:7px;background:#e7effb;color:var(--kf-blue);font-size:12px;font-weight:800;align-items:center;justify-content:center;}
.kf-quote__rows.is-multi .kf-quote__num{display:flex;}
/* 붙여넣기 — 모바일에서는 숨김. 입력창이 폭을 다 씁니다 */
.kf-quote__paste{display:none;flex:none;align-items:center;justify-content:center;gap:5px;height:36px;padding:0 11px;border:1px solid #cfe0f7;background:#eef4ff;color:var(--kf-blue);border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;}
.kf-quote__paste em{font-style:normal;}
.kf-quote__paste:hover{background:#dde9f9;border-color:var(--kf-blue);}
.kf-quote__del{width:32px;height:32px;flex:none;border:none;background:transparent;color:#8a94a3;border-radius:8px;cursor:pointer;display:none;align-items:center;justify-content:center;}
.kf-quote__rows.is-multi .kf-quote__del{display:flex;}
.kf-quote__del:hover{background:#ffece7;color:var(--kf-warn);}

/* 액션 — 모바일은 [조회]가 위 */
.kf-quote__actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.kf-quote__go{order:2;display:flex;align-items:center;justify-content:center;gap:9px;border:none;background:var(--kf-blue);color:#fff !important;font-weight:800;font-size:17px;min-height:58px;border-radius:12px;cursor:pointer;font-family:inherit;}
.kf-quote__go:hover{background:var(--kf-blue-d);}
.kf-quote__go:disabled{background:#5a8ec7;cursor:default;}
.kf-quote__go.is-busy::before{content:'';width:17px;height:17px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:kfSpin .8s linear infinite;}
@keyframes kfSpin{to{transform:rotate(360deg)}}
/* 모바일에서는 테두리 없는 텍스트 버튼 — 카드 안 선을 하나 줄입니다 */
.kf-quote__add{order:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;background:transparent;color:var(--kf-blue);border-radius:12px;padding:0 14px;min-height:44px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.kf-quote__add:hover{background:var(--kf-soft);}

/* ── 로딩 ───────────────────────────────────────────────── */
/* 로딩 6단계 (에셋6 3차 · QA v2 D-1) — 실측: 헤드라인 ink 140 · 바 171~176 · 스텝 pitch 30 */
.kf-quote__loading{margin-top:14px;border-top:2px solid #eef2f7;padding-top:15px;}
.kf-load__now{display:flex;align-items:center;gap:10px;line-height:22px;}
.kf-load__now b{font-size:15px;font-weight:850;letter-spacing:-.035em;color:var(--kf-blue);}
.kf-load__spin{flex:none;width:22px;height:22px;border-radius:50%;border:2.4px solid #cfe0f7;border-top-color:var(--kf-blue);animation:kfSpin 1s linear infinite;}
.kf-quote__prog{height:5px;border-radius:999px;background:#eef2f7;overflow:hidden;margin:9px 0 0;}
.kf-quote__prog i{display:block;height:100%;width:8%;border-radius:999px;background:linear-gradient(90deg,#0055b1,#4a9bf0);transition:width .45s ease;}
.kf-quote__steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.kf-quote__steps li{display:flex;align-items:center;gap:10px;min-height:22px;font-size:13.5px;font-weight:600;letter-spacing:-.03em;color:#a8b4c4;}
.kf-quote__steps li span{width:22px;height:22px;flex:none;border-radius:50%;background:#f2f5f9;border:2px solid #e3e9f2;display:flex;align-items:center;justify-content:center;}
.kf-quote__steps li.is-now{color:var(--kf-blue);font-weight:850;}
.kf-quote__steps li.is-now span{background:#fff;border-color:#cfe0f7;border-top-color:var(--kf-blue);animation:kfSpin 1s linear infinite;}
.kf-quote__steps li.is-done{color:var(--kf-ink);font-weight:700;}
.kf-quote__steps li.is-done span{background:#22a45d;border-color:#22a45d;}
.kf-quote__steps li.is-done span::after{content:'';width:10px;height:5px;border:2.4px solid #fff;border-top:none;border-right:none;transform:rotate(-45deg) translate(1px,-1px);}
.kf-quote__skel{margin-top:21px;display:flex;flex-direction:column;gap:9.5px;}
.kf-quote__skel i{display:block;border-radius:12px;background:linear-gradient(90deg,#f2f6fb 25%,#e7eef7 50%,#f2f6fb 75%);background-size:320px 100%;animation:kfShim 1.3s linear infinite;}
.kf-quote__skel i:nth-child(1){height:64px;}
.kf-quote__skel i:nth-child(2){height:119px;}
@keyframes kfShim{0%{background-position:-320px 0}100%{background-position:320px 0}}

/* ── 결과 ───────────────────────────────────────────────── */
.kf-quote__result{margin-top:14px;border-top:2px solid #eef2f7;padding-top:14px;animation:kfUp .35s ease both;}
@keyframes kfUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kf-quote__items{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.kf-quote__item{display:flex;gap:11px;align-items:center;background:var(--kf-field-bg);border:1px solid #e9eef5;border-radius:12px;padding:10px 12px;}
.kf-quote__ithumb{width:46px;height:46px;flex:none;border-radius:9px;background:#e9eff7 center/cover no-repeat;display:flex;align-items:center;justify-content:center;}
.kf-quote__iinfo{min-width:0;flex:1;}
.kf-quote__iinfo b{display:block;font-size:14px;color:var(--kf-ink) !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kf-quote__iinfo span{display:block;font-size:12px;color:var(--kf-sub);margin-top:2px;}

.kf-quote__save{display:flex;align-items:center;gap:9px;background:#eafaf3;border:1.5px solid #b7e6cf;border-radius:12px;padding:11px 13px;margin-bottom:10px;font-size:12.5px;color:var(--kf-ok-d);line-height:1.5;}
.kf-quote__save svg{flex:none;}
.kf-quote__save b{font-weight:800;color:#0d5c38 !important;}
.kf-quote__save small{font-size:12.5px;color:#3f8a68;}

.kf-quote__pricefix{background:#f2f7fd;border:1.5px solid #cfe0f7;border-radius:12px;padding:13px 15px;margin-bottom:10px;}
.kf-quote__pricefix b{display:block;font-size:14px;color:var(--kf-blue) !important;}
.kf-quote__pricefix span{display:block;font-size:12.5px;color:var(--kf-sub);margin-top:3px;line-height:1.55;}
.kf-quote__pfrow{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;}
.kf-quote__pfrow input{flex:1;min-width:110px;min-height:48px;padding:0 13px;border:1.5px solid var(--kf-field);border-radius:10px;font-size:16px;font-family:inherit;background:#fff;color:var(--kf-ink);outline:none;}
.kf-quote__pfrow select{min-height:48px;padding:0 10px;border:1.5px solid var(--kf-field);border-radius:10px;font-size:14px;font-family:inherit;background:#fff;color:var(--kf-ink);}
.kf-quote__pfrow button{border:none;background:var(--kf-blue);color:#fff !important;font-weight:800;font-size:14px;padding:0 22px;min-height:48px;border-radius:10px;cursor:pointer;font-family:inherit;}

.kf-quote__sum{background:var(--kf-soft);border:1px solid var(--kf-line);border-radius:14px;padding:4px 15px 13px;}
.kf-quote__sumrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;padding:7px 0;border-bottom:1px solid #e7eefa;}
.kf-quote__sumrow span{color:var(--kf-sub) !important;}
.kf-quote__sumrow small{color:var(--kf-mute) !important;font-size:11px;}
.kf-quote__sumrow b{color:var(--kf-ink) !important;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;}
.kf-quote__sumrow--tax{border-bottom:none;}
.kf-quote__sumrow--tax b{color:var(--kf-warn) !important;}
.kf-quote__sumrow--tax b.is-free{color:var(--kf-ok) !important;}

.kf-quote__total{border-top:2px solid #cfe0f7;margin-top:5px;padding-top:12px;}
.kf-quote__totalrow{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;}
.kf-quote__totalrow span{display:block;font-size:14px;font-weight:800;color:var(--kf-ink) !important;}
.kf-quote__totalrow small{font-size:11.5px;color:var(--kf-sub) !important;}
.kf-quote__totalrow b{font-size:32px;font-weight:850;color:var(--kf-blue) !important;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;white-space:nowrap;}
.kf-quote__usd{text-align:right;font-size:13px;color:var(--kf-sub);font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;}
.kf-quote__trust{display:flex;align-items:center;gap:7px;margin-top:9px;background:#fff;border:1px solid var(--kf-line);border-radius:10px;padding:8px 10px;font-size:11.5px;color:var(--kf-sub);line-height:1.45;}
.kf-quote__trust svg{flex:none;}
.kf-quote__trust b{color:var(--kf-ink) !important;font-weight:700;}

.kf-quote__note{margin-top:11px;display:flex;flex-direction:column;}
.kf-quote__ni{display:flex;gap:9px;align-items:flex-start;padding:8px 2px;border-top:1px solid #eef2f7;}
.kf-quote__ni:first-child{border-top:none;}
.kf-quote__ni svg{flex:none;margin-top:1px;}
.kf-quote__ni b{display:block;font-size:12px;font-weight:800;color:var(--kf-ink) !important;margin-bottom:2px;}
.kf-quote__ni p{margin:0;font-size:12px;color:var(--kf-sub) !important;line-height:1.55;}
.kf-quote__ni--warn{background:#fdf3f0;border:1px solid #f3d5cc;border-radius:11px;padding:11px 12px;margin-bottom:8px;}
.kf-quote__ni--warn p{color:#8c3a26 !important;}

.kf-quote__cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--kf-blue);color:#fff !important;font-weight:800;font-size:15.5px;min-height:54px;border-radius:13px;text-decoration:none;margin-top:12px;}
.kf-quote__cta:hover{background:var(--kf-blue-d);color:#fff !important;}
.kf-quote__fx{margin-top:11px;padding-top:10px;border-top:1px solid #f0f4f9;font-size:11px;color:var(--kf-mute);text-align:center;line-height:1.4;}

/* ── 분석 실패 ──────────────────────────────────────────── */
.kf-quote__manual{margin-top:14px;border:1.5px solid #cfe0f7;background:#f2f7fd;border-radius:14px;padding:15px;animation:kfUp .3s ease both;}
.kf-quote__mhd{display:flex;gap:10px;}
.kf-quote__mhd svg{flex:none;margin-top:1px;}
.kf-quote__mhd b{display:block;font-size:14.5px;color:var(--kf-blue) !important;}
.kf-quote__mhd span{display:block;font-size:12.5px;color:var(--kf-sub);margin-top:4px;line-height:1.6;}
.kf-quote__wbtns{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:13px;}
.kf-quote__wbtns span{font-size:12px;color:#7185a0;font-weight:700;margin-right:2px;}
.kf-quote__wbtns button{border:1.5px solid var(--kf-field);background:#fff;color:var(--kf-blue);border-radius:999px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.kf-quote__wbtns button.is-on{background:var(--kf-blue);border-color:var(--kf-blue);color:#fff;}
.kf-quote__mrow2{display:grid;grid-template-columns:1fr;gap:7px;margin-top:11px;}
.kf-quote__mrow2 input,.kf-quote__mrow2 select,.kf-quote__mcat{width:100%;min-height:48px;padding:0 13px;border:1.5px solid var(--kf-field);border-radius:10px;font-size:16px;font-family:inherit;background:#fff;color:var(--kf-ink);outline:none;}
.kf-quote__mcat{margin-top:7px;}
.kf-quote__mgo{width:100%;margin-top:11px;border:none;background:var(--kf-blue);color:#fff !important;font-weight:800;font-size:15px;min-height:50px;border-radius:12px;cursor:pointer;font-family:inherit;}

/* ── 카드 아래 ──────────────────────────────────────────── */
.kf-quote__foot{display:flex;flex-direction:column;gap:12px;margin-top:auto;}
/* 안내 문구는 모바일에서 숨김 — placeholder·버튼이 이미 말합니다 */
.kf-quote__msg{display:none;font-size:12.5px;color:rgba(255,255,255,.9);text-align:center;margin:0;line-height:1.5;min-height:18px;}
/* 체크 3종 — 모바일은 아이콘 없이 가벼운 한 줄 */
.kf-quote__pts{list-style:none;margin:0;padding:0;display:flex;gap:0 6px;justify-content:center;flex-wrap:wrap;}
.kf-quote__pts li{display:flex;align-items:center;gap:0;font-size:11.5px;color:rgba(255,255,255,.7);font-weight:600;}
.kf-quote__pts li+li::before{content:'·';margin-right:6px;color:rgba(255,255,255,.45);}
.kf-quote__pts svg{display:none;color:var(--kf-sky);flex:none;}

/* LIVE 티커 — 첫 화면의 마지막 요소 */
.kf-live{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 14px;width:100%;margin:0 auto;overflow:hidden;}
.kf-live__badge{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;color:var(--kf-sky);letter-spacing:.08em;}
.kf-live__badge i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--kf-sky);}
.kf-live__badge i::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--kf-sky);animation:kfPulse 1.8s ease-out infinite;}
.kf-live__vp{flex:1;min-width:0;height:20px;overflow:hidden;position:relative;}
/* 지시 2026-08-10: 더미 200건을 계속 굴린다. 6칸짜리 kfRoll5 키프레임으로는 6건에서 멈추므로
   JS(kfLiveRoll)가 20px 씩 transform 을 옮긴다. 여기서는 전환만 정의. */
.kf-live__roll{display:block;will-change:transform;transition:transform .5s ease;}
.kf-live__item{display:flex;align-items:center;gap:7px;height:20px;font-size:12.5px;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;}
.kf-live__item img{flex:none;display:block;border-radius:2px;}   /* [NEW] 국기 */
.kf-live__item b{font-weight:600;color:rgba(255,255,255,.9);}
.kf-live__item b.is-evt{font-weight:700;color:var(--kf-sky);}    /* [NEW] 입고완료·발송시작 등 */
.kf-live__item small{font-size:11.5px;color:rgba(255,255,255,.5);}
/* (미사용 — JS 롤러로 대체 2026-08-10) @keyframes kfRoll5{0%,14%{transform:translateY(0)}20%,34%{transform:translateY(-20px)}40%,54%{transform:translateY(-40px)}60%,74%{transform:translateY(-60px)}80%,94%{transform:translateY(-80px)}100%{transform:translateY(-100px)}} */

/* ── TOP 버튼 ───────────────────────────────────────────── */
.kf-top{position:fixed;right:14px;bottom:14px;z-index:50;width:44px;height:44px;border-radius:50%;border:1px solid #d8e2ef;background:#fff;color:var(--kf-blue);box-shadow:0 6px 18px rgba(16,38,61,.18);cursor:pointer;display:none;align-items:center;justify-content:center;}
.kf-top.is-on{display:flex;}

/* ══ 데스크탑 (761px~) ═════════════════════════════════════ */
@media (min-width:761px){
  .kf-quote__in{position:relative;padding:clamp(14px,2.4vh,22px) 24px clamp(16px,2.6vh,26px);gap:clamp(12px,2.2vh,20px);}
  .kf-quote__logo{font-size:19px;}
  .kf-quote__logomark{width:30px;height:30px;}
  .kf-quote__login,.kf-quote__join{padding:9px 16px;font-size:13px;}
  .kf-quote__eyebrow{display:inline-block;}
  .kf-quote__live{display:inline-flex;}
  .kf-quote__in{position:relative;justify-content:center;}
  .kf-quote__foot{margin-top:0;}
  .kf-quote__auth{gap:7px;}
  .kf-quote__login,.kf-quote__join{padding:9px 16px;font-weight:700;}
  .kf-quote__login{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;}
  .kf-quote__login:hover{background:rgba(255,255,255,.2);}
  .kf-quote__join{background:#fff;color:var(--kf-blue);font-weight:800;}
  .kf-quote__join:hover{background:#eaf2ff;color:var(--kf-blue-d);}
  .kf-quote__eyebrow,.kf-quote__live{font-size:12.5px;padding:6px 14px;}
  .kf-quote__steplabel{display:flex;}
  .kf-quote__msg{display:block;}
  .kf-quote__pts{gap:7px 18px;}
  .kf-quote__pts li{gap:6px;font-size:12.5px;color:#fff;}
  .kf-quote__pts li+li::before{content:none;}
  .kf-quote__pts svg{display:block;}
  /* 세로가 짧은 노트북에서 h1이 화면을 잡아먹지 않도록 vh 기준 */
  .kf-quote__hd h1{font-size:clamp(32px,5.2vh,44px);}
  .kf-quote__hd p{font-size:clamp(14px,2vh,16px);}

  .kf-quote__card{border-radius:20px;padding:clamp(16px,2.4vh,20px) 24px;}
  .kf-quote__hd p{font-size:clamp(14px,2vh,16px);}
  .kf-quote__ctr{display:flex;}
  .kf-quote__ctrsel{display:none;}
  /* 데스크탑은 기존대로 한 덩어리 그룹 */
  .kf-quote__group{border:1.5px solid var(--kf-field);background:var(--kf-field-bg);overflow:hidden;gap:0;border-radius:14px;}
  .kf-quote__group:focus-within{border-color:var(--kf-blue);}
  .kf-quote__rows{gap:0;}
  .kf-quote__row{padding:0 10px 0 14px;border:none;border-top:1.5px solid var(--kf-hair);border-radius:0;background:transparent;}
  .kf-quote__row:first-child{border-top:none;}
  .kf-quote__row:focus-within{background:transparent;}
  .kf-quote__url{min-height:52px;font-size:15px;}
  .kf-quote__add{border:1.5px dashed #b9cde8;background:var(--kf-soft);}
  .kf-quote__add:hover{background:#eaf2ff;border-color:var(--kf-blue);}
  .kf-quote__actions{gap:9px;margin-top:10px;}
  .kf-quote__paste{display:inline-flex;}
  .kf-quote__actions{flex-direction:row;}
  .kf-quote__add{order:1;flex:1;min-height:52px;}
  .kf-quote__go{flex:0 0 240px;min-height:52px;font-size:16px;}
  .kf-quote__totalrow b{font-size:40px;}
  .kf-quote__mrow2{grid-template-columns:1fr 1fr auto;}
  .kf-quote__mcat{margin-top:0;}
  .kf-quote__foot{gap:12px;}
  .kf-live{max-width:520px;}
  .kf-top{right:20px;bottom:20px;}
}

@media (prefers-reduced-motion:reduce){
  .kf-live__roll,.kf-quote__skel i,.kf-quote__steps li.is-now span,.kf-quote__live i::after,.kf-live__badge i::after{animation:none;}
  .kf-quote__result,.kf-quote__manual{animation:none;}
}

/* ── [NEW] 첫 화면 하단 자주 묻는 질문 (파란 영역 안) ───── */
.kf-hfaq{width:100%;margin:0 auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:4px 16px 6px;}
.kf-hfaq__item{border-top:1px solid rgba(255,255,255,.12);}
.kf-hfaq__item:first-child{border-top:none;}
.kf-hfaq__q{width:100%;display:flex;align-items:center;gap:10px;padding:13px 0;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;}
.kf-hfaq__q i{flex:none;width:17px;height:17px;border-radius:5px;background:rgba(255,255,255,.16);color:var(--kf-sky);font-size:10px;font-weight:800;font-style:normal;display:flex;align-items:center;justify-content:center;}
.kf-hfaq__q span{flex:1;min-width:0;font-size:13px;font-weight:600;color:rgba(255,255,255,.92);line-height:1.45;}
.kf-hfaq__q svg{flex:none;transition:transform .18s ease;}
.kf-hfaq__item.is-open .kf-hfaq__q svg{transform:rotate(180deg);}
.kf-hfaq__a{padding:0 0 13px 27px;font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.65;}
.kf-hfaq__a b{color:#fff;font-weight:700;}
@media (min-width:761px){ .kf-hfaq{max-width:620px;} }

/* ══ [NEW] 배대지 주소 · 사서함 번호 즉시 확인 ═════════════ */
.kf-access{display:flex;flex-direction:column;gap:8px;max-width:100%;width:100%;margin:0 auto}
.kf-access__btns{display:flex;gap:8px}
.kf-access__btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.11);border-radius:13px;padding:13px 10px;cursor:pointer;font-family:inherit}
.kf-access__btn:hover{background:rgba(255,255,255,.18)}
.kf-access__btn span{font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.kf-access__btn svg{flex:none}
.kf-access__btn[aria-expanded="true"]{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
.kf-access__code{width:100%;display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.16);border-radius:13px;padding:12px 14px;cursor:pointer;font-family:inherit;text-align:left;animation:kfUp .2s ease both}
.kf-access__codel{flex:1;min-width:0}
.kf-access__codel small{display:block;font-size:10.5px;font-weight:800;color:rgba(255,255,255,.62);letter-spacing:.05em}
.kf-access__codel b{display:block;margin-top:2px;font-size:22px;font-weight:850;color:#fff;letter-spacing:.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.kf-access__copy{flex:none;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);border-radius:9px;padding:9px 12px;font-size:12px;font-weight:800;color:#fff}
.kf-access__copy.is-done{background:#1f9d55}
.kf-access__note{margin:0;font-size:11.5px;color:rgba(255,255,255,.62);line-height:1.5}
.kf-access__note b{color:rgba(255,255,255,.9)}

/* ══ [NEW] 배대지 주소 시트 ══════════════════════════════ */
.kf-sheet{position:fixed;inset:0;z-index:90;background:rgba(4,16,34,.62);display:flex;align-items:flex-end;justify-content:center}
.kf-sheet[hidden]{display:none}
.kf-sheet__panel{width:100%;max-height:92%;overflow:auto;background:#fff;border-radius:20px 20px 0 0;padding:14px 16px 18px;box-shadow:0 -10px 40px rgba(0,18,45,.34);animation:kfUp .24s ease both}
.kf-sheet__grab{width:44px;height:4px;border-radius:99px;background:#dbe3ee;margin:0 auto 13px}
.kf-sheet__ctr{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.kf-sheet__ctr button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #e2eaf4;background:#fff;color:#3c4f68;border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.kf-sheet__ctr button img{border-radius:2px;display:block}
.kf-sheet__ctr button.is-on{background:var(--kf-blue);border-color:var(--kf-blue);color:#fff}
.kf-sheet__rows{border:1px solid #e2eaf4;border-radius:13px;overflow:hidden}
.kf-sheet__row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-top:1px solid #eef2f7;background:#fff}
.kf-sheet__row:first-child{border-top:none;background:#f2f7fd}
.kf-sheet__row > span:first-child{flex:none;width:74px;font-size:11.5px;font-weight:700;color:#7185a0}
.kf-sheet__row > span:nth-child(2){flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--kf-ink);word-break:break-word}
.kf-sheet__row:first-child > span:nth-child(2){font-weight:800;color:var(--kf-blue)}
.kf-sheet__row button{flex:none;width:32px;height:32px;border:1px solid #d8e2ef;background:#fff;color:var(--kf-blue);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kf-sheet__all{margin-top:11px;width:100%;border:none;background:var(--kf-blue);color:#fff;border-radius:12px;min-height:50px;font-size:14.5px;font-weight:800;cursor:pointer;font-family:inherit}
.kf-sheet__all.is-done{background:#1f9d55}
.kf-sheet__note{margin:10px 0 0;font-size:12px;color:var(--kf-sub);line-height:1.6}
.kf-sheet__note b{color:var(--kf-ink)}
.kf-sheet__close{margin-top:14px;width:100%;border:1px solid #dbe3ee;background:#fff;color:var(--kf-sub);border-radius:12px;min-height:46px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}

@media (min-width:761px){
  .kf-access{max-width:620px}
  .kf-sheet{align-items:center;padding:24px}
  .kf-sheet__panel{max-width:480px;border-radius:18px;max-height:100%}
  .kf-sheet__grab{display:none}
  .kf-sheet__row > span:first-child{width:88px}
}

/* 시트 제목 — 가이드 §3-7 / 요청서 §6 (납품 마크업에 없어 추가) */
.kf-sheet__ttl{ padding:2px 4px 12px; }
.kf-sheet__ttl b{ display:block; font-size:16px; font-weight:850; color:var(--kf-ink); letter-spacing:-.02em; }
.kf-sheet__ttl span{ display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:var(--kf-sub); }

/* 테마 main.css 의 a{color:#0055b1} 가 디자이너 지정색을 덮어 파란 배경 위 파란 글씨가 된다.
   home.css 가 지정한 값(로고 #fff / 로그인 .78 흰색 / 회원가입 #fff)을 앵커에 고정. */
a.kf-quote__logo, a.kf-quote__logo:hover{ color:#fff !important; }
a.kf-quote__login{ color:rgba(255,255,255,.78) !important; }
a.kf-quote__login:hover{ color:#fff !important; }
a.kf-quote__join{ color:#fff !important; }
@media (min-width:761px){
  /* 데스크탑에서는 로그인이 흰 테두리 pill(흰 글씨), 회원가입이 흰 배경 pill(파란 글씨) */
  a.kf-quote__login{ color:#fff !important; }
  a.kf-quote__join{ color:var(--kf-blue) !important; }
  a.kf-quote__join:hover{ color:var(--kf-blue-d) !important; }
}
a.kf-quote__cta, a.kf-quote__cta:hover{ color:#fff !important; }

/* 혜택 한 줄 — 목업(01-mobile-default)은 체크 아이콘 없이 가운데 한 줄 */
p.kf-quote__pts{
  margin:0; padding:0; text-align:center;
  font-size:11.5px; font-weight:600; color:rgba(255,255,255,.7);
  letter-spacing:-.01em; line-height:1.5;
}

@media (min-width:761px){
  /* 칩은 데스크탑에서만 노출 (모바일 목업에는 없음) */
  .kf-quote__chips{ display:inline-flex; }
}

/* ══ 모바일 목업(01-mobile-default) 정합 ══════════════════════
   납품 CSS 는 .kf-quote__foot{margin-top:auto} 라 남는 세로 공간이
   카드와 하단 블록 사이로 몰린다(실측 68px). 목업은 20px 이고
   남는 공간은 FAQ 아래(푸터 전)에 있다. */
@media (max-width:760px){
  .kf-quote__foot{ margin-top:0; }
  .kf-quote__in{ padding-bottom:26px; }
}
@media (max-width:760px){
  /* 목업 대비 상단이 18px 내려와 있었다. 로고 줄높이와 H1 상단 여백에서 회수. */
  .kf-quote__logo{ line-height:1; }
  .kf-quote__hd h1{ margin-top:0; }
}

/* 목업 01-mobile-default 픽셀 정합 (실측 · CSS px)
   H1 1행 71~92 / 2행 98~119 / 서브 134~145 / 카드 top 167
   기존: H1 64, 서브 129, 카드 164 → H1 +7, 카드 -4 로 맞춘다 */
@media (max-width:760px){
  .kf-quote__hd h1{ margin-top:7px; }
  .kf-quote__card{ margin-top:-4px; }
}
@media (max-width:760px){
  /* 목업 실측: 국가행 하단 214 → 합배송 추가 332 (118px). 라이브는 122px 였다. */
  .kf-quote__url{ min-height:60px; }
}
@media (max-width:760px){
  /* 목업 실측 간격: 카드450→혜택470(20) / 혜택480→버튼510(30) / 버튼522→LIVE560(38) / LIVE572→FAQ616(44)
     납품 gap 12px 로는 각 4~6px 씩 벌어진다 → 8px */
  .kf-quote__foot{ gap:8px; }
}
@media (max-width:760px){
  /* 남은 4px — 카드 하단과 혜택 줄 사이. 목업 카드450→혜택470(20), 라이브 24 였다. */
  .kf-quote__card{ margin-bottom:-4px; }
}
@media (max-width:760px){
  /* 목업 실측: 로그인 242~275 / 회원가입 316~360, 간격 41px · 우측 여백 30px
     납품값(gap 14 · 여백 16)으로는 간격 16px · 여백 18px 이었다 */
  .kf-quote__auth{ gap:41px; margin-right:14px; }
}

/* ══ 배대지 주소 시트 — 목업 08·09 정합 ══════════════════════
   납품 마크업엔 탭이 없어 추가했다. 복사 버튼은 32×32 아이콘(목업 08). */
.kf-sheet__tabs{
  display:flex; gap:0; padding:4px; margin:2px 0 16px;
  background:#eef2f8; border-radius:13px;
}
.kf-sheet__tabs button{
  flex:1; min-height:44px; border:none; background:transparent; border-radius:10px;
  font-family:inherit; font-size:14px; font-weight:800; color:#5b7290; cursor:pointer;
  letter-spacing:-.02em;
}
.kf-sheet__tabs button.is-on{ background:#fff; color:var(--kf-blue); box-shadow:0 1px 4px rgba(16,38,72,.1); }

.kf-sheet__row button[data-cp]{
  flex:none; width:32px; height:32px; padding:0;
  border:1px solid #d8e2ef; background:#fff; color:var(--kf-blue);
  border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.kf-sheet__row button[data-cp].is-done{ background:#e8f7ef; border-color:#b7e6cf; color:#127a41; }
.kf-sheet__row b[data-v]{ flex:1; min-width:0; font-weight:700; color:var(--kf-ink); word-break:break-word; }
.kf-sheet__row.is-hi b[data-v]{ color:var(--kf-blue); font-weight:800; }

.kf-sheet__all{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:52px; margin-top:14px;
  border:none; border-radius:13px; background:var(--kf-blue); color:#fff !important;
  font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;
}
.kf-sheet__all.is-done{ background:#127a41; }

/* 사서함 번호 탭 (목업 09) */
.kf-sheet__boxcard{
  background:var(--kf-soft); border:1px solid #dbe7f7; border-radius:14px;
  padding:18px 16px; text-align:center;
}
.kf-sheet__boxcard small{ display:block; font-size:12.5px; font-weight:700; color:var(--kf-sub); }
.kf-sheet__boxcard b{
  display:block; margin:6px 0 14px; font-size:34px; font-weight:850;
  color:var(--kf-blue); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.kf-sheet__boxcopy{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:52px; border:none; border-radius:12px;
  background:var(--kf-blue); color:#fff; font-family:inherit;
  font-size:15px; font-weight:800; cursor:pointer;
}
.kf-sheet__boxcopy.is-done{ background:#127a41; }
.kf-sheet__how{
  margin-top:14px; background:var(--kf-soft); border:1px solid #dbe7f7;
  border-radius:14px; padding:16px;
}
.kf-sheet__how > b{ display:block; font-size:14px; font-weight:800; color:var(--kf-ink); }
.kf-sheet__sample{
  margin:11px 0; background:#fff; border:1px solid #e2eaf4; border-radius:11px; padding:12px 14px;
}
.kf-sheet__sample small{ display:block; font-size:12px; font-weight:600; color:var(--kf-mute); }
.kf-sheet__sample span{ display:block; margin-top:4px; font-size:16px; font-weight:800; color:var(--kf-ink); }
.kf-sheet__sample b{ color:var(--kf-blue); }
.kf-sheet__how p{ margin:0; font-size:12.5px; line-height:1.7; color:var(--kf-sub); }
.kf-sheet__how p b{ color:var(--kf-ink); font-weight:800; }
/* 목업 08: 값은 일반 굵기(700), 강조행(받는 사람)만 파랑 굵게 */
.kf-sheet__row b[data-v]{ font-weight:600; font-size:15px; }
.kf-sheet__row.is-hi b[data-v]{ font-weight:800; }
a.kf-sheet__boxcopy{ text-decoration:none; color:#fff !important; }

/* ══ 시트 내부 — 목업 08 실측 정합 (패널 top 기준 CSS px) ══
   탭 배경 31~73(42) · 제목 잉크 94~104 · 부제 잉크 114~124
   라이브는 탭 52px 이라 아래가 누적으로 밀렸다. */
.kf-sheet__tabs{ margin:2px 0 12px; padding:3px; }
.kf-sheet__tabs button{ min-height:36px; font-size:13.5px; }
.kf-sheet__ttl{ padding:0 2px 10px; }
.kf-sheet__ttl b{ font-size:15.5px; }
.kf-sheet__ttl span{ margin-top:3px; font-size:12px; }

/* 오버레이 — 목업은 rgb(0,15,44) 로 거의 불투명하다 (현재 .62 는 히어로가 비쳐 밝다) */
.kf-sheet{ background:rgba(0,10,32,.9); }
/* 목업: 칩 141~176(h35) · 첫 행 229~284. 라이브 칩 h39 · 첫행 239 였다 */
.kf-sheet__ctr button{ padding:6px 13px; font-size:12.5px; }
.kf-sheet__ctr{ gap:7px; margin-bottom:6px; }

/* 사서함 칩 — 목업 07: 파란 영역 위 반투명 알약 + 태그 아이콘 + 흰 글씨.
   테마의 .balance-chip 은 흰 배경/파란 글씨라 파란 히어로에서 튄다. */
.kf-boxchip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.16);
  color:#fff; border-radius:999px; padding:3px 12px;
  font-family:inherit; font-size:13px; font-weight:800; letter-spacing:-.01em; line-height:1.4;
  cursor:pointer; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kf-boxchip:hover{ background:rgba(255,255,255,.24); }
.kf-boxchip svg{ flex:none; opacity:.85; }

/* ══ 배대지 주소 시트 — 전체화면 + 아래에서 위로 (대표님 지시 2026-08-07) ══
   뒷배경(오버레이) 없이 화면을 통째로 덮고, 좌상단 뒤로가기로 닫는다. */
.kf-sheet{
  /* 전체화면 — 상단까지 완전히 덮는다. inset:0 만으로는 부모 스태킹/여백에 눌려
     위쪽에 뒷배경이 비칠 수 있어 뷰포트 단위로 고정한다. */
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100vw; height:100dvh; min-height:100dvh;
  margin:0 !important; padding:0 !important;
  background:#eef2f7;
  align-items:stretch; justify-content:stretch;
  z-index:2147483000;
  /* kfUp 은 translateY(10px)→none 인데, fixed 요소가 transform 을 가지면
     containing block 이 바뀌어 첫 프레임 위치가 어긋난다. 시트 전용 슬라이드 사용. */
  animation:kfSheetUp .28s ease both;
}
@keyframes kfSheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .kf-sheet{ animation:none; } }
.kf-sheet__panel{
  width:100%; max-width:none; height:100dvh; max-height:none;
  border-radius:0; box-shadow:none;
  padding:0 16px 20px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:none;              /* 슬라이드는 바깥 .kf-sheet 가 담당 */
  background:#eef2f7;
}
.kf-sheet__grab{ display:none; }

.kf-sheet__top{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:6px;
  margin:0 -16px 8px; padding:6px 10px;
  background:#eef2f7;
}
.kf-sheet__back{
  flex:none; width:40px; height:40px; padding:0;
  border:none; background:transparent; color:var(--kf-ink);
  border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.kf-sheet__back:hover{ background:rgba(16,38,72,.06); }
.kf-sheet__top b{ font-size:16px; font-weight:850; color:var(--kf-ink); letter-spacing:-.02em; }

/* 하단 [닫기] — 목업 08·09 그대로 유지 (뒤로가기와 병행) */
.kf-sheet__close{
  display:flex; align-items:center; justify-content:center;
  margin-top:14px; width:100%; min-height:52px;
  border:1px solid #dbe3ee; background:#fff; color:var(--kf-sub);
  border-radius:13px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
}

@media (min-width:761px){
  /* 데스크탑도 동일하게 전체화면으로 (목업 기준은 모바일) */
  .kf-sheet{ padding:0; align-items:stretch; }
  .kf-sheet__panel{ max-width:none; border-radius:0; }
  .kf-sheet__tabs, .kf-sheet__ttl, .kf-sheet__ctr, .kf-sheet__rows,
  .kf-sheet__all, .kf-sheet__note, .kf-sheet__box{ max-width:620px; margin-left:auto; margin-right:auto; }
  .kf-sheet__top{ justify-content:flex-start; }
}

/* 로딩 한 줄 교체형 (회의 2026-08-08) — 점점점 + 페이드 */
.kf-load__dots{ display:inline-block; width:18px; text-align:left; font-style:normal;
  color:inherit; font-weight:800; }
.kf-load__dots::after{ content:''; animation:kfDots 1.2s steps(4,end) infinite; }
@keyframes kfDots{ 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }
#kfQNow{ transition:opacity .16s; }
#kfQNow.is-swap{ opacity:0; }
/* 옛 6단계 리스트는 마크업에서 제거됨 — 남은 규칙은 무해 */

/* ══ 모드 스위치 (디자이너 납품 2026-08-12 · B-1) ═══════════════
   탭 폭 비대칭(주 246 / 체험 196) — 썸의 width/transform 은 JS(syncThumb)가 실측으로 지정.
   CSS 에 값을 쓰면 안 된다 (§2-2). */
.kf-quote__mode{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto 12px;padding:4px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kf-quote__modethumb{position:absolute;top:4px;left:4px;height:calc(100% - 8px);
  background:#fff;border-radius:999px;box-shadow:0 2px 8px rgba(0,25,60,.18);pointer-events:none;
  transition:transform .26s cubic-bezier(.4,.9,.3,1), width .26s cubic-bezier(.4,.9,.3,1)}

.kf-quote__modebtn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;padding:12px 22px;border:0;border-radius:999px;background:transparent;
  color:rgba(255,255,255,.92);font-family:inherit;font-size:16px;font-weight:800;line-height:1;
  letter-spacing:-.4px;cursor:pointer;transition:color .2s,background .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kf-quote__modebtn svg{flex:none;opacity:.85}
.kf-quote__modebtn.is-on{color:#0055b1}
.kf-quote__modebtn.is-on svg{opacity:1}
.kf-quote__modebtn em{font-style:normal;font-weight:800;color:#fff}
.kf-quote__modebtn.is-on em{color:inherit}
.kf-quote__modebtn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 폭 — 비대칭 (§2-1) */
.kf-quote__modebtn[data-mode="live"]{width:246px}
.kf-quote__modebtn--demo{width:196px;padding:12px 18px;font-size:15px;font-weight:700}

@media (hover:hover){
  .kf-quote__modebtn:not(.is-on):hover{background:rgba(255,255,255,.1);color:#fff}
}
.kf-quote__modebtn:not(.is-on):active{background:rgba(255,255,255,.16);color:#fff;transform:translateY(1px);transition:transform .09s ease-out}

@media (max-width:820px){
  .kf-quote__modebtn[data-mode="live"]{width:212px;padding:12px 16px;font-size:15px;gap:7px}
  .kf-quote__modebtn--demo{width:170px;padding:12px 14px;font-size:14px;gap:7px}
  .kf-quote__modebtn svg{width:14px;height:14px}
  .kf-quote__modebtn--demo svg{width:13px;height:13px}
}
@media (max-width:680px){
  .kf-quote__mode{width:100%}
  .kf-quote__modebtn svg{display:none}
  /* PC 블록의 [data-mode]·--demo 선택자가 특이도가 높아 이긴다 — 여기서도 같은 특이도로 덮는다 */
  .kf-quote__modebtn,
  .kf-quote__modebtn[data-mode="live"],
  .kf-quote__modebtn--demo{width:auto;padding:12px 4px;font-size:14.5px;gap:0}
  .kf-quote__modebtn[data-mode="live"]{flex:56;font-weight:800}
  .kf-quote__modebtn--demo{flex:44;font-weight:600}
}
@media (max-width:360px){
  .kf-quote__modebtn,
  .kf-quote__modebtn[data-mode="live"],
  .kf-quote__modebtn--demo{font-size:13.5px}
}

/* 시선 유도 링 (F-4) — 13px 상한, 말풍선과 같은 2600ms 주기, 함께 멈춘다 */
.kf-quote__mode.is-nudge .kf-quote__modebtn--demo{animation:kfRing 2.6s ease-out infinite}
@keyframes kfRing{
  0%  {box-shadow:0 0 0 0    rgba(255,255,255,.55)}
  70% {box-shadow:0 0 0 13px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0    rgba(255,255,255,0)}
}

/* ── 말풍선 (§2-3 · F-3) — 등장 240ms/3초 지연, 부유 ±5px, 사라질 땐 페이드만 ── */
.kf-quote__hint{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(28px);
  background:#fff;color:#0f2540;border-radius:11px;padding:9px 14px;margin:0;
  font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 6px 20px rgba(0,20,50,.28);z-index:5;
  animation:kfHintIn .24s ease both, kfHintFloat 2.6s ease-in-out .24s infinite}
.kf-quote__hint::after{content:'';position:absolute;bottom:-6px;left:34px;
  width:12px;height:12px;background:#fff;transform:rotate(45deg)}
.kf-quote__hint.is-out{animation:none;opacity:0;transition:opacity .16s ease}
@keyframes kfHintIn{from{opacity:0;transform:translateX(28px) translateY(4px)}
                    to  {opacity:1;transform:translateX(28px) translateY(0)}}
@keyframes kfHintFloat{0%,100%{transform:translateX(28px) translateY(0)}
                       50%    {transform:translateX(28px) translateY(-5px)}}
@media (max-width:680px){
  .kf-quote__hint{left:auto;right:8px;transform:none;font-size:12.5px;
    animation:kfHintInM .24s ease both, kfHintFloatM 2.6s ease-in-out .24s infinite}
  .kf-quote__hint::after{left:auto;right:38px}
}
@keyframes kfHintInM{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes kfHintFloatM{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){
  .kf-quote__hint{animation:none}
  .kf-quote__mode.is-nudge .kf-quote__modebtn--demo{animation:none}
  .kf-quote__modethumb{transition:none}
}

/* ── 인라인 프롬프트 (§2-4) — 흰 카드 안, 입력칸 바로 아래 ── */
.kf-quote__nourl{display:flex;align-items:center;gap:8px;margin:9px 0 0;padding:0 3px;
  font-size:13px;color:#5b6b7d}
/* 체험 모드: 숨기되 자리는 남긴다 — 카드 높이가 1px 도 안 변해야 한다 (QA D-1) */
.kf-quote__nourl.is-off{visibility:hidden}
.kf-quote__nourl svg{flex:none}
.kf-quote__nourl button{border:0;background:none;padding:0;font:inherit;font-weight:800;color:#0055b1;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:hover){ .kf-quote__nourl button:hover{color:#00448f} }
.kf-quote__nourl button:active{color:#003a78;transform:translateY(1px)}
.kf-quote__nourl button:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
@media (max-width:680px){
  /* flex 두 칸이면 "괜찮습니/다."로 갈라진다 — 문장처럼 자연스럽게 흐르게 한다 */
  .kf-quote__nourl{display:block;font-size:12.5px;line-height:1.6;text-align:left}
  .kf-quote__nourl svg{display:inline-block;vertical-align:-2px;margin-right:4px;width:13px;height:13px}
  .kf-quote__nourl button{display:inline;white-space:normal}
  /* 모바일 체험: 두 줄짜리 투명 공백이 카드 한가운데 뚫린 것처럼 보인다 — 여기선 완전히 접는다
     (PC 는 한 줄이라 자리 유지가 낫다 · D-1 높이 고정은 PC 기준) */
  .kf-quote__nourl.is-off{display:none}
}

/* ══ 체험 조회 카드 (납품 §3 · B-2) ═══════════════════════════
   안내 블록 52px = 합배송 버튼 52px — 토글해도 [요금 조회하기] 위치가 1px 도 안 움직인다. */
.kf-quote__add.is-demonote{border:1px solid #cfe0f5;border-style:solid;background:#f4f9ff;color:#33475b;
  cursor:default;display:flex;align-items:center;gap:9px;padding:0 14px;min-height:52px;
  overflow:hidden;text-align:left}
.kf-quote__add.is-demonote svg{display:inline}
.kf-quote__demoico{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#0055b1}
.kf-quote__demotxt{flex:1;min-width:0;font-size:12.5px;line-height:1.4;color:#33475b;overflow:hidden}
.kf-quote__demotxt b{display:block;color:#0055b1;font-weight:800}
.kf-quote__demotxt b + span{display:block;color:#5b6b7d;font-weight:400}

/* §3-1 읽기전용 URL — input 에 보더를 주면 그룹 박스와 이중 보더가 된다 (지시 2026-08-12).
   대신 그룹 박스 자체를 흰색으로 올리고, input 은 보더 없이 그 안에 얹는다. */
.kf-quote__group.is-demo{background:#fff;border-color:#cfe0f5}
.kf-quote__row.is-demo{position:relative}
.kf-quote__url.is-demo,
.kf-quote__row.is-demo .kf-quote__url{background:transparent;border:0;border-radius:0;
  color:#0f2540;font-weight:600;cursor:default;padding-right:92px;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.kf-quote__row.is-demo .kf-quote__url:focus-visible{outline:2px solid #cfe0f5;outline-offset:-2px}
.kf-quote__row.is-demo .kf-quote__del{display:none}
.kf-quote__row.is-demo .kf-quote__num{display:none}
.kf-quote__urlbadge{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:5px;background:#eef4fc;border:1px solid #d3e2f5;
  border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:800;color:#0055b1;pointer-events:none;z-index:2}

@media (max-width:680px){
  .kf-quote__add.is-demonote{min-height:46px;padding:0 12px}
  .kf-quote__demotxt{display:flex;gap:4px;white-space:nowrap}
  .kf-quote__demotxt b{display:inline}
  .kf-quote__demotxt b + span{display:inline}
  .kf-quote__demotxt b .shop{display:none}      /* 쇼핑몰명 숨김, 한 줄 유지 */
  .kf-quote__demotxt b::after{content:' ·';color:#5b6b7d;font-weight:400}
  .kf-quote__row.is-demo .kf-quote__url{padding-right:82px;font-size:13.5px}
}

/* ── 결과 상단 남색 띠 + ETA (§4 · B-3) ── */
.kf-result__demobar{display:flex;align-items:center;gap:8px;padding:9px 16px;margin:-4px -4px 10px;
  border-radius:12px 12px 0 0;background:#0f2540;color:#8fc0f5}
.kf-result__demobar svg{flex:none}
.kf-result__demobar span{flex:1;min-width:0;font-size:12px;font-weight:700;color:#c9dcf2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-result__demobar .m{display:none}
.kf-result__eta{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;
  font-size:12.5px;color:#5b6b7d}
.kf-result__eta b{color:#0f2540}
.kf-result__eta svg{flex:none}
@media (max-width:680px){
  .kf-result__demobar{padding:8px 13px;gap:7px}
  .kf-result__demobar .d{display:none}
  .kf-result__demobar .m{display:block;font-size:11.5px}
  .kf-result__eta{font-size:12px;gap:6px}
}

/* ── hover · pressed (§7) — 메인 블루 명도 단계만, 터치 잔상 방지 ── */
@media (hover:hover){
  .kf-quote__go:hover{background:#00448f;box-shadow:0 3px 10px rgba(0,60,125,.28)}
  .kf-quote__add:not(.is-demonote):hover{background:#f2f8ff;border-color:#0055b1}
  .kf-quote__cta:hover{background:#00448f;box-shadow:0 3px 10px rgba(0,60,125,.28)}
}
.kf-quote__go{transition:background .15s ease,box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kf-quote__go:active{background:#003a78;transform:translateY(1px);transition:transform .09s ease-out}
.kf-quote__go:focus-visible{outline:2px solid #8fc0f5;outline-offset:2px}
.kf-quote__add{transition:background .15s ease,border-color .15s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kf-quote__add:not(.is-demonote):active{background:#e6f0fd;border-style:solid;border-color:#0055b1;transform:translateY(1px)}

/* (구 스위치 반응형 규칙은 납품 B-1 블록으로 통합 — 잔재를 남기면 특이도 싸움이 난다) */
@media (max-width:680px){
  .kf-quote__add.is-demonote{font-size:12.5px}
}
@media (max-width:360px){
  .kf-quote__add.is-demonote{font-size:11.5px}
}