/* ============================================================
   케어플로우 브랜드 시스템 — 단일 소스 (모든 페이지/채팅/관리자 공통)
   추출 출처: 기존 careflow-site styles.css의 정확한 DNA
   ============================================================ */
:root{
  /* --- 브랜드 컬러 (verbatim) --- */
  --blue:#0046FF;        /* 주 브랜드 블루 (CTA·링크·강조) */
  --blue2:#0B63FF;       /* 보조 블루 (그라데이션·채팅헤더) */
  --blue-hover:#0039d6;  /* 블루 hover */
  --navy:#061A3A;        /* 헤딩·다크밴드 */
  --deep:#031226;        /* 최심 네이비 (탑바·로더) */
  --sky:#EAF2FF;         /* 연블루 칩 */
  --pale:#F6F9FF;        /* 페일 배경 */
  --mint:#E9F8FF;
  --line:#D7E3F3;        /* 보더·구분선 */
  --text:#111827;        /* 본문 */
  --muted:#526276;       /* 보조 텍스트 */
  --white:#fff;
  --green:#12B886;       /* 성공 */
  --orange:#FF8A00;      /* 리본·뱃지 */
  --kakao:#FAE100;       /* 카카오 옐로우 */

  /* --- 다크 그라데이션 --- */
  --grad-dark:linear-gradient(135deg,#0b2a5e,#0026a8);
  --footer-bg:#0a1526;

  /* --- 라운드 --- */
  --radius:24px;         /* 카드/미디어 */
  --radius-sm:14px;
  --pill:999px;          /* 버튼/칩 */

  /* --- 섀도우 --- */
  --shadow:0 18px 40px rgba(0,40,120,.10);
  --shadow-sm:0 10px 26px rgba(0,70,255,.06);

  /* --- 타이포 --- */
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Segoe UI",Arial,sans-serif;

  /* --- 레이아웃 --- */
  --wrap:1180px;
  --sec:88px;

  /* --- 아이콘 시스템 (라인 / viewBox24 / stroke 1.75) --- */
  --ico-sm:16px;   /* 인라인(리스트·메타·뱃지) */
  --ico-md:20px;   /* 버튼·핀·칩·nav */
  --ico-lg:24px;   /* 기본·카드헤더·채팅버블 */
  --ico-xl:28px;   /* 히어로·강조 픽토 */
}

/* ============================================================
   표준 라인 아이콘 — "파란 배경 흰 아이콘" 대체 시스템
   라인=--blue · fill 없음 · 컨테이너=흰/--sky 옅은 배경
   ============================================================ */
.cf-ico{color:var(--blue);display:inline-flex;line-height:0;flex:none}
.cf-ico svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* 타일형 컨테이너 (서비스카드·nav·픽토·아바타 대체) */
.cf-ico-box{width:var(--sz,48px);height:var(--sz,48px);border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,40,120,.07);display:inline-flex;align-items:center;justify-content:center;color:var(--blue);flex:none}
.cf-ico-box.tint{background:var(--sky);border-color:transparent;box-shadow:none}
.cf-ico-box svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* on-dark(다크밴드·푸터·채팅헤더 위) — 옅은 배경 유지, 라인은 가독 위해 흰색 */
.band-dark .cf-ico,.footer .cf-ico,.sec-dark .cf-ico{color:#fff}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--white);
  line-height:1.75;letter-spacing:-.018em;word-break:keep-all;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--blue);text-decoration:none}
img{max-width:100%;display:block}

/* --- 레이아웃 --- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:var(--sec) 0}
.sec-pale{background:var(--pale)}
.sec-dark{background:var(--deep);color:#dbe6ff}

/* --- 타이포 스케일 --- */
.kicker{font-size:12.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.h-xl{font-size:46px;font-weight:900;line-height:1.16;letter-spacing:-.028em;color:var(--navy);margin:.2em 0}
.h-lg{font-size:34px;font-weight:900;line-height:1.2;letter-spacing:-.028em;color:var(--navy);margin:.2em 0}
.h-md{font-size:22px;font-weight:800;letter-spacing:-.022em;color:var(--navy);margin:.2em 0}
.lead{font-size:18px;color:var(--muted)}
.muted{color:var(--muted)}
/* 시그니처 하이라이트: 블루 박스 */
.hl{background:var(--blue);color:#fff;padding:1px 10px;border-radius:9px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* --- 버튼 (pill) --- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  padding:14px 24px;border-radius:var(--pill);font-weight:800;font-size:15.5px;font-family:inherit;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;text-decoration:none}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:scale(.97);opacity:.94}   /* 토스 디테일: 누른 곳에서 가볍게 — 누름 피드백 */
/* 숫자 고정폭 유틸(KPI·견적·정산 등 자릿수 정렬) */
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover)}
.btn-dark{background:var(--navy);color:#fff}
.btn-light{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-light:hover{border-color:var(--blue);color:var(--blue)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff}
.btn-lg{padding:16px 30px;font-size:17px}
.btn-kakao{background:var(--kakao);color:#3a1d1d}

/* --- 카드 --- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px}
.card-hover{transition:transform .18s ease,box-shadow .25s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--pill);background:var(--sky);color:var(--blue);font-weight:700;font-size:13px;border:1px solid var(--line)}

/* --- 상태 뱃지 (문의 라이프사이클) --- */
.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--pill);font-size:12.5px;font-weight:800}
.badge-new{background:#eaf0ff;color:#1c4dff}        /* 신규접수 */
.badge-consult{background:#fff4e0;color:#b9750a}     /* 상담중 */
.badge-quote{background:#e9f7ee;color:#1d864a}       /* 견적발송 */
.badge-done{background:#eef0f3;color:#6b7686}        /* 완료 */

/* --- 폼 --- */
.field{margin-bottom:14px}
.label{display:block;font-weight:700;font-size:14px;color:var(--navy);margin-bottom:6px}
.input,.textarea,.select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:16px;color:var(--text);background:#fff;transition:border-color .15s ease}
.input:focus,.textarea:focus,.select:focus{outline:0;border-color:var(--blue)}
.textarea{min-height:110px;resize:vertical}

/* --- 헤더/푸터 베이스 --- */
.topbar{background:var(--deep);color:#cfe0ff;font-size:12.5px;letter-spacing:.02em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.header.scrolled{box-shadow:0 6px 20px rgba(0,40,120,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav .logo{height:30px}
.footer{background:var(--footer-bg);color:#9fb2cf;padding:56px 0 40px}
.footer a{color:#bcd0ee}

/* --- 로더 (무한대 로고 라이즈) --- */
#cf-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,#0b2a5e,#031226 72%);transition:opacity .55s ease,visibility .55s ease}
#cf-loader.hide{opacity:0;visibility:hidden}
#cf-loader .cf-logo{height:46px;filter:drop-shadow(0 6px 24px rgba(0,70,255,.5));animation:cf-rise .7s ease both}
#cf-loader .cf-sub{margin-top:14px;color:#9fc0ff;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
@keyframes cf-rise{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* --- 유틸 --- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.grid{display:grid;gap:18px}
.flex{display:flex}
.center{display:flex;align-items:center;justify-content:center}
.hide{display:none!important}

@media (max-width:760px){
  :root{--sec:56px}
  .h-xl{font-size:32px}.h-lg{font-size:26px}.h-md{font-size:19px}
  .wrap{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── 역할 스위처 (로그인 화면 공통 — 고객·매니저·관리자, 무해온식 하단 진입) ── */
.role-switch{margin-top:22px}
.role-switch .rs-label{display:block;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}
.rs-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rs-chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--navy);font-weight:800;font-size:12.5px;text-decoration:none;transition:border-color .15s ease,background .15s ease,transform .1s ease}
.rs-chip .rs-ic{font-size:18px;line-height:1}
.rs-chip:hover{border-color:var(--blue);background:var(--sky)}
.rs-chip:active{transform:translateY(1px)}
.rs-chip.on{border-color:var(--blue);background:var(--blue);color:#fff;cursor:default;box-shadow:0 6px 16px rgba(0,70,255,.22)}
.rs-chip.on:hover{background:var(--blue)}
@media (max-width:560px){.rs-chip{min-height:58px}}

/* ============================================================
   피드백 시스템 (FEEDBACK_SYSTEM §2·§3·§6) — cf-feedback.js 와 짝
   "펑 터지는" 성공: SVG 체크 드로우 + 경량 컨페티 + 해요체 토스트.
   토스 톤·브랜드 토큰만 사용. 위 규칙 일절 변경 없이 "추가만".
   모든 신규 모션은 159행 전역 prefers-reduced-motion 으로 자동 무력화됨.
   ============================================================ */

/* ── 전역 토스트 (cf-toast) — §3.2. 하단 중앙, 스택 최대 3, 누름 피드백 ── */
.cf-toasts{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:9997;display:flex;flex-direction:column-reverse;
  gap:8px;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.cf-toast{display:flex;align-items:center;gap:10px;pointer-events:auto;cursor:pointer;
  background:var(--navy);color:#fff;padding:12px 16px;border-radius:14px;
  font-size:14px;font-weight:600;line-height:1.45;letter-spacing:-.012em;
  box-shadow:0 12px 30px rgba(0,40,120,.22);animation:cf-tin .2s ease both;max-width:100%}
.cf-toast.out{animation:cf-tout .22s ease forwards}
.cf-toast:active{transform:scale(.98)}
.cf-toast .ti{flex:none;width:20px;height:20px;display:grid;place-items:center}
.cf-toast .tx{word-break:keep-all}
.cf-toast.success .ti{color:#5ff0c0}
.cf-toast.info .ti{color:#7fb0ff}
.cf-toast.warn{background:#7a3e00}
.cf-toast.warn .ti{color:#ffd089}
.cf-toast .ta{margin-left:6px;flex:none;border:0;background:transparent;cursor:pointer;
  color:#9fd0ff;font-family:inherit;font-weight:800;font-size:14px;white-space:nowrap;padding:2px 2px}
.cf-toast .ta:active{transform:scale(.96)}
@keyframes cf-tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cf-tout{to{opacity:0;transform:translateY(12px)}}
@media (min-width:761px){.cf-toasts{max-width:420px}}

/* ── 성공 '펑' (cf-success) — §2.2. ①원 펄스 → ②체크 stroke 드로우 → ③카피 페이드업 ── */
.cf-success{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.cf-success .ck{width:56px;height:56px;border-radius:50%;
  background:rgba(18,184,134,.12);display:grid;place-items:center;
  animation:cf-ck-pop .22s cubic-bezier(.2,.7,.3,1.4) both}
.cf-success .ck svg{width:30px;height:30px;fill:none;stroke:var(--green);
  stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.cf-success .ck path{stroke-dasharray:36;stroke-dashoffset:36;
  animation:cf-ck-draw .3s ease .12s forwards}
.cf-success .ttl{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.02em;
  animation:cf-cs-up .3s ease .18s both}
.cf-success .sub{font-size:14px;color:var(--muted);animation:cf-cs-up .3s ease .26s both}
@keyframes cf-ck-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cf-ck-draw{to{stroke-dashoffset:0}}
@keyframes cf-cs-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* overlay 모드(중대 전환: 결제·서명) — dim + 중앙 패널, 클릭/자동 페이드 */
.cf-success-ovl{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;
  background:rgba(3,18,38,.45);backdrop-filter:blur(2px);animation:cf-ovl-in .2s ease both}
.cf-success-ovl .panel{background:#fff;border-radius:24px;padding:32px 28px;
  box-shadow:var(--shadow);min-width:260px;max-width:88vw}
@keyframes cf-ovl-in{from{opacity:0}to{opacity:1}}
/* reduced-motion: 전역 159행이 animation 무력화 → 체크가 안 그려지는 문제 방지(보이게 강제) */
@media (prefers-reduced-motion:reduce){
  .cf-success .ck path{stroke-dashoffset:0}
  .cf-success .ck{background:rgba(18,184,134,.12)}
}

/* ── 알림센터 (cf-bell / panel) — §4.4. 백엔드 GET 과 짝. 마운트는 후속 단계 ── */
.cf-bell{position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--navy)}
.cf-bell:active{transform:scale(.96)}
.cf-bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cf-bell .dot{position:absolute;top:7px;right:8px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:#ff3b30;color:#fff;font-size:10px;font-weight:800;
  display:grid;place-items:center;line-height:1}
.cf-bell .dot:empty{padding:0;min-width:9px;height:9px;top:9px;right:10px}
.cf-noti-panel{position:absolute;top:48px;right:0;width:360px;max-width:calc(100vw - 24px);
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden;z-index:60;animation:cf-np-in .16s ease both}
.cf-noti-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-weight:800;color:var(--navy)}
.cf-noti-head button{border:0;background:transparent;color:var(--blue);font-family:inherit;font-weight:800;font-size:13px;cursor:pointer}
@keyframes cf-np-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cf-noti-row{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-top:1px solid var(--line);
  text-decoration:none;color:var(--text);min-height:56px}
.cf-noti-row.unread{background:var(--sky)}
.cf-noti-row .nr-t{font-size:15px;font-weight:700;color:var(--navy);line-height:1.4}
.cf-noti-row .nr-m{font-size:13px;color:var(--muted);margin-top:2px}
.cf-noti-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:14px}

/* ── 공용 스켈레톤 (cf-skel) — §6.1. 라이브피드 패턴 공용화 ── */
.cf-skel{background:linear-gradient(90deg,#eef2f9 25%,#f6f9ff 37%,#eef2f9 63%);
  background-size:400% 100%;animation:cf-shim 1.2s ease infinite;border-radius:8px}
@keyframes cf-shim{from{background-position:100% 0}to{background-position:0 0}}

/* ── 회전(새로고침 느낌) — §6.4 ── */
.cf-refreshing .rf-ic{animation:cf-spin .8s linear infinite}
@keyframes cf-spin{to{transform:rotate(360deg)}}