/* ================================================================
   base.css — 네 화면(이용후기·로그인·견적·안면인식 견적)의 바탕.

   여기 있는 것: kbz.co.kr 라이브 토큰(common.css :root)과 김반장 3.0
   디자인 시스템 토큰, 그리고 리셋·타이포 세 줄뿐이다.
   여기 없는 것: 화면 고유 스타일. 그것은 각 HTML 의 <style> 안에 남겨 뒀다
   — 화면 하나를 고치려면 그 파일 하나만 보면 되게.

   ⚠ 토큰은 네 화면이 같은 값을 쓰는 것만 모았다(값이 엇갈리는 토큰은 없다).
      화면마다 다른 것(body 바탕색 같은)은 옮기지 않았다.
   ⚠ 견적 두 화면은 --ink · --line · --accent 같은 **다른 이름 체계**도 함께
      쓴다. 그쪽은 그 화면들 안에 정의돼 있다 — 이름이 둘인 것은 알고 있다.
   ================================================================ */

/* 이 디자인에는 어두운 모드가 없다. 선언해 두지 않으면 OS 가 어두운 모드일 때
   select 의 옵션 목록 같은 네이티브 위젯만 검게 그려져 페이지와 따로 논다 */
:root{color-scheme:light}

:root{
  --header-height:70px;
  --color-white-rgb:255,255,255;
  --color-gray-rgb:230,232,234;   /* #E6E8EA */
  --color-black-rgb:19,20,22;     /* #131416 */
  --color-blue-rgb:17,90,198;     /* #115AC6 */
  --color-navy-rgb:14,59,99;      /* #0E3B63 */
  --color-w-gray-rgb:244,245,246; /* #F4F5F6 */
  --color-d-gray-rgb:109,120,130; /* #6D7882 */
  --color-d-blue-rgb:17,71,151;   /* #114797 */
  --color-cyan-rgb:27,159,226;    /* #1B9FE2 */
  --color-p-blue-rgb:220,232,249; /* #DCE8F9 */
  --color-p-cyan-rgb:183,225,245; /* #B7E1F5 */
  --color-sky-rgb:220,238,255;    /* #DCEEFF */
  --color-lake-rgb:138,218,255;   /* #8ADAFF */

  --main-white:rgba(var(--color-white-rgb),1);
  --main-gray:rgba(var(--color-gray-rgb),1);
  --main-black:rgba(var(--color-black-rgb),1);
  /* 오류 — 네 페이지가 같이 본다. 테두리는 비텍스트라 3:1 이면 되지만
     칸 아래 문구는 4.5:1 이 필요해 한 단계 짙은 값을 따로 둔다 */
  --danger:#D93F45;            /* 테두리·아이콘 */
  --danger-rgb:217,63,69;      /* 위 값의 rgb — 투명도를 쓸 때 */
  --danger-text:#B8353A;       /* 칸 아래 문구 — 흰 바탕 5.82:1 */
  --main-blue:rgba(var(--color-blue-rgb),1);
  --main-navy:rgba(var(--color-navy-rgb),1);
  --sub-w-gray:rgba(var(--color-w-gray-rgb),1);
  --sub-d-gray:rgba(var(--color-d-gray-rgb),1);
  --sub-d-blue:rgba(var(--color-d-blue-rgb),1);
  --sub-cyan:rgba(var(--color-cyan-rgb),1);
  --pastel-blue:rgba(var(--color-p-blue-rgb),1);
  --pastel-cyan:rgba(var(--color-p-cyan-rgb),1);
  --sky:rgba(var(--color-sky-rgb),1);
  --lake:rgba(var(--color-lake-rgb),1);

  /* 라이브 폰트 스택: 본문/CTA=Wanted Sans, 타이틀=SUITE, 폴백=Apple SD Gothic Neo */
  --font-body:"Wanted Sans Variable","Wanted Sans","Apple SD Gothic Neo",sans-serif;
  --font-title:"SUITE Variable","SUITE","Apple SD Gothic Neo",sans-serif;
  /* 라이브 로그인 화면의 안내 배지는 Pretendard 를 쓴다 */
  --font-pretendard:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",sans-serif;

  /* 김반장 3.0 디자인 시스템 시맨틱 토큰 (index.html 의 .ui-demo 와 같은 출처)
     로그인 화면이 쓰는 것만 가져왔다 */
  --ds-text-body:#131416;
  --ds-text-subtle:#6d7882;
  --ds-text-disabled:#8a949e;
  --ds-border-subtle:#cdd1d5;
  --ds-text-label:#464c53;
  --ds-text-disabled:#8a949e;
  --ds-bg-disabled:#e6e8ea;

  /* 라이브 radial-sky 그라디언트 */
  --grad-radi-sky-top:radial-gradient(66.24% 130.23% at 51.11% -20.35%, rgba(var(--color-sky-rgb),.8) 0%, rgba(var(--color-sky-rgb),0) 100%);
  --grad-radi-sky-bottom:radial-gradient(49.14% 96.61% at 51.11% 100%, rgba(var(--color-sky-rgb),.8) 0%, rgba(var(--color-sky-rgb),0) 100%);

  /* 견적 두 화면이 쓰는 값 */
  --transparent-black-60:rgba(var(--color-black-rgb),0.6);
  --transparent-black-10:rgba(var(--color-black-rgb),0.1);
  --btn-blue:#387eff;

  /* 김반장 3.0 디자인 시스템 — 이용후기 화면이 쓰는 값.
     여백·모서리는 토큰으로 두고 값을 박지 않는다: 시스템이 바뀌면 여기만 고친다 */
  --ds-border-selected:#6d7882;
  --ds-icon-primary:#166dee;
  --pad-1:2px;
  --pad-2:4px;
  --pad-3:6px;
  --pad-4:10px;
  --pad-5:12px;
  --pad-6:16px;
  --rad-sm:4px;
  --rad-md:6px;
}

/* ── 리셋 · 타이포 ─────────────────────────────────────────────
   body 의 바탕색과 커서는 화면마다 달라 각 HTML 에 남겨 뒀다 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* display 를 주는 클래스가 hidden 속성을 이겨서 숨김이 안 먹는다 — 못을 박는다.
   목록 팝업(.sel-pop 은 display:flex)처럼 숨겼다 폈다 하는 것이 여기 걸린다 */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--main-black);line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* 눈으로는 안 보이고 보조기술에만 닿는 글 — 폼 부품이 아니라 여기 둔다 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}