/* 24시간 상담 입구 — 요청서 v3 · 1차 납품(2026-11-07) 규격.
   값의 출처: 납품 05_공통컴포넌트/컴포넌트명세.md · README §3 · 원본 .dc.html. 고정 검사 web/tests/consult-entry-spec-regression.php
   [기존] 토큰: grey100 #f2f4f6 · grey200 #e5e8eb · grey400 #b0b8c1 · grey700 #4e5968 · grey800 #333d4b · blue50 #e8f3ff · blue500 #3182f6 · blue700 #1b64da
   [제안] 초록 점 #03b26c(앱 토큰 green500 과 같은 값) — 대표님 11/5 지시서 「작은 초록 점」 */

/* ── 글자 한 줄(공통) — 점 7 · 「24시간 상담원 대기 중」 14/21/600 grey700 · 「·」 grey400 · 「카톡 상담」 14/700 blue700 + › 14 · gap 6 ── */
.kf-cs{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;border-radius:10px;
  box-sizing:border-box;white-space:nowrap;font-family:inherit;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;
  color:#4e5968;text-decoration:none !important;-webkit-tap-highlight-color:transparent;cursor:pointer}
.kf-cs__on,.kf-cs__off{display:inline-flex;align-items:center;gap:6px}
.kf-cs__dot{display:block;flex:none;width:7px;height:7px;border-radius:50%;background:#03b26c}
.kf-cs__t{font-weight:600;color:#4e5968}
.kf-cs__sep{font-style:normal;font-weight:600;color:#b0b8c1}
.kf-cs__go{display:inline-flex;align-items:center;font-weight:700;color:#1b64da}
.kf-cs__chev{display:block;flex:none;width:14px;height:14px}
.kf-cs:active{background:#e5e8eb}
.kf-cs:focus-visible{outline:2px solid #3182f6;outline-offset:0}
/* 대기 중 / 확인 안 됨 — 같은 자리 · 같은 높이, 글자만 바뀐다(움직임 없음) */
html.kf-cs-off .kf-cs__on{display:none !important}
html:not(.kf-cs-off) .kf-cs__off{display:none !important}

/* ── A 일반 화면: 맨 아래 가운데 줄 — 페이지 바탕 그대로(흰 바·구분선 없음), 높이 44 + 안전 영역 ──
   바탕이 불투명해서 본문은 이 줄 위에서 끝난다(뒤로 지나가지 않는다). 본문 끝은 body 아래 여백으로 줄 위에 온전히 보인다. */
.kf-cs-line{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;justify-content:center;align-items:flex-start;
  box-sizing:border-box;height:calc(44px + env(safe-area-inset-bottom));padding:0 16px env(safe-area-inset-bottom);
  background:var(--kf-cs-bg,#f2f4f6);pointer-events:none}
.kf-cs-line > .kf-cs{pointer-events:auto}
.kf-cs-line.is-standby{display:none}
body:has(> .kf-cs-line:not(.is-standby)){padding-bottom:calc(44px + env(safe-area-inset-bottom))}

/* ── B·C 하단 바 안: 버튼 바로 위 줄 — 행 전체 44 를 누른다(좌우 −8 늘림) ── */
.kf-cs-row{display:flex;height:44px;margin:0 -8px}
.kf-cs-row > .kf-cs{display:flex;flex:1 1 auto;width:100%;height:44px;padding:0 8px}
/* 신청서 하단 — 위 4 · 상담 줄 44 · 뒤로·다음 56 · 아래 안전 여백(운영 값 그대로) */
.kf-apply__foot:has(> .kf-cs-row){padding-top:4px}
.kf-apply__foot > .kf-cs-row{width:calc(100% - 24px);max-width:528px;margin:0 auto}
.kf-apply__foot > .kf-cs-row + .kf-apply__bar{padding-top:0}
/* 공용 하단 고정 버튼(.kfr-cta: 위 여백 8 → 4) */
.kfr-cta > .kf-cs-row{margin:-4px -8px 0}
@media (min-width:768px){ .kfr-cta > .kf-cs-row{margin-top:-8px} }
/* 그 밖의 하단 바 — 바 안쪽 맨 위에 붙인다(위 여백 8 → 4) */
.kfp-cta__in > .kf-cs-row,.kfi-cta__in > .kf-cs-row,.kf-pay__ft > .kf-cs-row,.kf-done__bar > .kf-cs-row,.kf-preintro__cta > .kf-cs-row{margin:-4px -8px 0}
/* 완료 화면 바는 가로 줄 — 상담 줄을 한 줄 다 쓰게 하고 버튼은 다음 줄 */
.kf-done__bar:has(> .kf-cs-row){flex-wrap:wrap;row-gap:0}
.kf-done__bar > .kf-cs-row{flex:0 0 calc(100% + 16px)}
/* 화면 위에 고정된 바(등급 이벤트·첫 이용·완료·신청 전 안내)는 줄만큼 본문 끝 여백을 더한다 */
body:has(.kfp-cta .kf-cs-row, .kfi-cta .kf-cs-row, .kf-done__bar > .kf-cs-row, .kf-preintro__cta > .kf-cs-row){padding-bottom:44px}

/* ── B 두 버튼이 떠 있는 홈: 「배송 신청」 위 오른쪽 말풍선 52 → 누르면 위로 배너 ── */
/* 버튼 줄(.kfr-cta__row) 기준 — 오른쪽 끝 = 「배송 신청」 오른쪽 끝, 아래 = 버튼 줄 위 4 */
.kfr-cta__row:has(> .kf-cs-hf){position:relative}
.kf-cs-hf{position:absolute;left:0;right:0;bottom:calc(100% + 4px);display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:none;z-index:2}
.kfr-cta__row > .kf-cs-hf{pointer-events:none}
.kf-cs-hf > *{pointer-events:auto}
.kf-cs-bubble{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;margin:0;padding:0;
  border:0;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(0,23,51,.18);color:#3182f6;cursor:pointer;
  -webkit-tap-highlight-color:transparent;font:inherit}
.kf-cs-bubble:focus-visible{outline:2px solid #3182f6;outline-offset:2px}
.kf-cs-bubble__ico{display:flex}
.kf-cs-bubble__ico svg{display:block}
.kf-cs-bubble__dot{position:absolute;right:9px;top:9px;display:block;width:10px;height:10px;box-sizing:border-box;border-radius:50%;
  background:#03b26c;border:2px solid #fff}
.kf-cs-bubble__x{display:none;color:#4e5968}
.kf-cs-bubble__x svg{display:block}
.kf-cs-bubble[aria-expanded="true"] .kf-cs-bubble__ico,
.kf-cs-bubble[aria-expanded="true"] .kf-cs-bubble__dot{display:none !important}
.kf-cs-bubble[aria-expanded="true"] .kf-cs-bubble__x{display:flex}
.kf-cs-banner{width:100%;max-width:300px}
.kf-cs-banner[hidden]{display:none !important}
.kf-cs-banner__in{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;padding:14px 14px 14px 16px;border-radius:16px;
  background:#fff;box-shadow:0 4px 16px rgba(0,23,51,.16);text-decoration:none !important;-webkit-tap-highlight-color:transparent}
.kf-cs-banner__in:focus-visible{outline:2px solid #3182f6;outline-offset:2px}
.kf-cs-banner__t{flex:1;min-width:0;display:flex;align-items:center;font-size:14px;line-height:21px;font-weight:600;color:#333d4b;white-space:nowrap}
.kf-cs-banner__t .kf-cs__on,.kf-cs-banner__t .kf-cs__off{gap:7px}
.kf-cs-banner__btn{flex:none;display:inline-flex;align-items:center;height:36px;box-sizing:border-box;padding:0 10px 0 12px;border-radius:10px;
  background:#e8f3ff;color:#1b64da;font-size:14px;line-height:21px;font-weight:700;white-space:nowrap}
.kf-cs-banner__btn .kf-cs__on,.kf-cs-banner__btn .kf-cs__off{gap:0}

/* ── 위쪽 바 「카톡 상담」 — 모바일 소프트웨어 키보드가 열린 동안만, 「로그인」(회원 번호) 자리 ── */
.kfr-appbar__chat{display:none;flex:none;align-items:center;min-height:44px;padding:0 2px;text-decoration:none !important;-webkit-tap-highlight-color:transparent}
.kfr-appbar__chatin{display:inline-flex;align-items:center;gap:4px;height:32px;box-sizing:border-box;padding:0 10px;border-radius:9px;
  background:#e8f3ff;color:#1b64da;font-size:14px;line-height:21px;font-weight:700;white-space:nowrap}
.kfr-appbar__chatin svg{display:block;flex:none}
.kfr-appbar__chat:focus-visible .kfr-appbar__chatin{outline:2px solid #3182f6;outline-offset:1px}

/* ── PC 넓은 화면: 본문 바깥 오른쪽 아래 버튼 — 오른쪽 32 · 아래 32 · 높이 60 · 반경 30 ── */
.kf-cs-pc{position:fixed;right:32px;bottom:32px;z-index:46;display:none;align-items:center;gap:10px;box-sizing:border-box;height:60px;
  padding:0 20px 0 16px;border-radius:30px;background:#fff;box-shadow:0 2px 12px rgba(0,23,51,.16);text-decoration:none !important;color:#191f28}
.kf-cs-pc:focus-visible{outline:2px solid #3182f6;outline-offset:2px}
.kf-cs-pc__ico{display:flex;color:#3182f6}
.kf-cs-pc__ico svg{display:block}
.kf-cs-pc__tx{display:flex;flex-direction:column}
.kf-cs-pc__t{font-size:16px;line-height:22px;font-weight:700;color:#191f28;white-space:nowrap}
.kf-cs-pc__s{display:flex;align-items:center;gap:5px;font-size:12px;line-height:17px;font-weight:400;color:#4e5968;white-space:nowrap}
.kf-cs-pc__s .kf-cs__dot{width:6px;height:6px}
html.kf-cs-off .kf-cs-pc__s{display:none !important}
html.kf-cs-measure .kf-cs-pc{display:flex;visibility:hidden}
html.kf-cs-wide .kf-cs-pc{display:flex}
html.kf-cs-wide .kf-cs-line,html.kf-cs-wide .kf-cs-row,html.kf-cs-wide .kf-cs-hf{display:none !important}
html.kf-cs-wide body:has(> .kf-cs-line){padding-bottom:0}

/* ── 키보드가 열린 동안: 하단 상담을 숨기고 위쪽 바로 옮긴다(위아래 동시에 보이지 않음) ── */
html.kf-typing .kf-cs-line{visibility:hidden}
html.kf-typing .kf-cs-row{display:none}
html.kf-typing .kfr-appbar__chat{display:inline-flex}
html.kf-typing .kfr-appbar__login,html.kf-typing .kfr-appbar__box,html.kf-typing .kfa-appbar-bell{display:none !important}

/* 홈 요금조회가 도는 동안에는 떠나게 하는 요소를 두지 않는다(홈 A4 — 하단 바도 숨는다) */
body:has(.kfr-home.is-loading) .kf-cs-line{display:none}

/* 하단 줄이 있는 화면 — 떠 있는 요금조회(블로그)와 안내 토스트는 줄 위에 뜬다 */
body:has(> .kf-cs-line:not(.is-standby)) .kfb-float{bottom:calc(12px + 44px + env(safe-area-inset-bottom))}

@media print{ .kf-cs-line,.kf-cs-pc,.kf-cs-row,.kf-cs-hf,.kfr-appbar__chat{display:none !important} }