/* ============================================================
   zapsale — "Volt Ink" design system v2
   컨셉: 왓츠앱에서 끝내는 비즈니스 (Business, done in WhatsApp)

   테마 3단: system(기본, 속성 없음) / light / dark
     :root                              → 라이트 토큰
     @media (prefers-color-scheme:dark)
       :root:not([data-theme="light"])  → 시스템 다크
     :root[data-theme="dark"]           → 강제 다크
   컴포넌트는 토큰만 참조한다. hex 직접 사용 금지 (BRAND.md §3).
   ============================================================ */

/* ── tokens: light ── */
:root{
  --ink:#0B100D; --bg:#FFFFFF; --canvas:#F4F7F3; --card:#FFFFFF;
  --line:#DDE5DF; --line2:#CAD5CD; --mut:#667269;
  --zap:#22E07A; --zap-deep:#087A46; --zap-soft:#DFF8E9;
  --volt:#DCFF4F; --warn:#D89522; --warn-soft:#FBF3E2;
  --bad:#E25757; --bad-soft:#FBECEC;
  --shadow:0 24px 70px rgba(11,16,13,.13);
  --shadow-sm:0 4px 16px rgba(11,16,13,.06);
  --r-card:20px; --r-ctl:12px; --r-bub:18px;
  --disp:"Space Grotesk","Inter Tight",-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
/* ── tokens: dark (시스템 추종) ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F4F7F3; --bg:#0B100D; --canvas:#111713; --card:#141B16;
    --line:#29332C; --line2:#354139; --mut:#9BA69E;
    --zap:#22E07A; --zap-deep:#46E993; --zap-soft:#12291D;
    --volt:#DCFF4F; --warn:#E8B45A; --warn-soft:#2A2214;
    --bad:#F27D7D; --bad-soft:#2C1717;
    --shadow:0 24px 70px rgba(0,0,0,.5);
    --shadow-sm:0 4px 18px rgba(0,0,0,.2);
    color-scheme:dark;
  }
}
/* ── tokens: dark (강제) ── */
:root[data-theme="dark"]{
  --ink:#F4F7F3; --bg:#0B100D; --canvas:#111713; --card:#141B16;
  --line:#29332C; --line2:#354139; --mut:#9BA69E;
  --zap:#22E07A; --zap-deep:#46E993; --zap-soft:#12291D;
  --volt:#DCFF4F; --warn:#E8B45A; --warn-soft:#2A2214;
  --bad:#F27D7D; --bad-soft:#2C1717;
  --shadow:0 24px 70px rgba(0,0,0,.5);
  --shadow-sm:0 4px 18px rgba(0,0,0,.2);
  color-scheme:dark;
}

/* ── base ── */
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--body);-webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s}
a{color:var(--zap-deep);text-decoration:none;text-underline-offset:3px} a:hover{text-decoration:underline}
h1,h2,h3,.disp{font-family:var(--disp);letter-spacing:-.035em;margin:0}
.num{font-family:var(--disp);font-variant-numeric:tabular-nums}
.mut{color:var(--mut)} .sm{font-size:13px} .xs{font-size:12px}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
:where(button,a,input,textarea,select,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--zap) 58%,transparent);outline-offset:3px}
.eyebrow{font:700 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.brand-word{font:700 18px/1 var(--disp);letter-spacing:-.045em;color:var(--ink)}
.brand-home{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.brand-home:hover{text-decoration:none}
.brand-home img{width:30px;height:30px}
.theme-logo-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-home img{content:url("/static/logo-mark-dark.svg")}
  :root:not([data-theme="light"]) .theme-logo-light{display:none}
  :root:not([data-theme="light"]) .theme-logo-dark{display:block}
}
:root[data-theme="dark"] .brand-home img{content:url("/static/logo-mark-dark.svg")}
:root[data-theme="dark"] .theme-logo-light{display:none}
:root[data-theme="dark"] .theme-logo-dark{display:block}
:root[data-theme="light"] .brand-home img{content:url("/static/logo-mark.svg")}
:root[data-theme="light"] .theme-logo-light{display:block}
:root[data-theme="light"] .theme-logo-dark{display:none}
.outcome-rail{display:flex;align-items:center;width:100%;height:18px;color:var(--line2)}
.outcome-rail::before{content:"";width:8px;height:8px;border:2px solid currentColor;border-radius:50%}
.outcome-rail::after{content:"";width:12px;height:12px;background:var(--zap);border-radius:50%}
.outcome-rail i{height:2px;background:currentColor;flex:1}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:42px;border:1px solid var(--ink);
  background:var(--ink);color:var(--bg);font:700 14px var(--body);padding:10px 17px;border-radius:var(--r-ctl);
  cursor:pointer;transition:transform .14s,opacity .15s,box-shadow .15s,border-color .15s;user-select:none;white-space:nowrap}
.btn:active{transform:scale(.98)} .btn:hover{opacity:.94;text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn.zap{background:var(--zap);border-color:var(--zap);color:#0B100D}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--ink);opacity:1}
.btn.quiet{background:transparent;border-color:transparent;color:var(--mut);padding:9px 10px}
.btn.quiet:hover{color:var(--ink);opacity:1;box-shadow:none;transform:none}
.btn.bad{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.big{min-height:50px;padding:13px 24px;font-size:15px;border-radius:14px}
.btn:disabled{opacity:.4;pointer-events:none}
.btn .sp{width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── segmented control (테마/언어 — 네이티브 select 금지) ── */
.seg{display:inline-flex;background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;color:var(--mut);font:600 13px var(--body);padding:6px 13px;border-radius:8px;cursor:pointer;transition:all .15s}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(11,14,12,.12)}
.seg.mini button{padding:4px 9px;font-size:12px}

/* ── chips / badges ── */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;
  padding:5px 13px;font:600 13px var(--body);cursor:pointer;background:var(--card);color:var(--ink);transition:all .15s}
.chip:hover{border-color:var(--ink)} .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:5px;font:700 11.5px var(--body);padding:3px 9px;border-radius:999px;
  background:var(--canvas);color:var(--mut);border:1px solid var(--line)}
.badge.ok{background:var(--zap-soft);color:var(--zap-deep);border-color:transparent}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.badge.live{background:var(--zap);color:#0B100D;border-color:transparent}
.badge.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#0B100D;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── cards / kpi ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;box-shadow:var(--shadow-sm)}
.kpi{display:flex;flex-direction:column;gap:3px}
.kpi .v{font:700 30px/1.1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .l{font-size:12.5px;color:var(--mut);font-weight:600}

/* ── inputs ── */
.in,textarea.in{width:100%;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-ctl);
  color:var(--ink);font:14px var(--body);padding:11px 13px;outline:0;transition:border .15s,box-shadow .15s}
.in:hover{border-color:var(--mut)} .in:focus{border-color:var(--zap-deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--zap) 18%,transparent)} textarea.in{resize:vertical;min-height:70px;line-height:1.5}

/* ── toggle switch ── */
.sw{position:relative;width:40px;height:23px;border-radius:999px;background:var(--line2);cursor:pointer;transition:background .18s;flex:none;border:0;padding:0}
.sw::after{content:"";position:absolute;top:2.5px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw.on{background:var(--zap-deep)} .sw.on::after{left:19px}

/* ══ WhatsApp 대화 표면 (.wa) — 시뮬레이터·온보딩 미리보기 전용 ══════════════
   목적: 사장이 "고객이 실제로 보게 될 화면"을 그대로 체험하게 한다.
   이 표면만 zapsale 토큰(--ink/--zap…)을 쓰지 않고 자체 팔레트를 쓴다.
   이유: 대화 표면은 "항상 WhatsApp 색"이라 앱 테마에 딸려 반전되면 안 된다(BRAND.md §3 규칙 ③).
   경계: Meta 로고·워드마크·도들 아트는 쓰지 않는다. 배경 패턴은 자체 제작.
        헤더에 "시뮬레이션" 배지를 상시 노출해 실제 WhatsApp으로 오인되지 않게 한다.
   주의: .bub/.phone(랜딩·브랜드가이드·보스챗 공용)은 건드리지 않는다. */
.wa{
  --wa-head:#008069; --wa-head-fg:#FFFFFF; --wa-head-sub:rgba(255,255,255,.75);
  --wa-paper:#EFEAE2; --wa-in:#FFFFFF; --wa-out:#D9FDD3;
  --wa-fg:#111B21; --wa-meta:#667781; --wa-tick:#53BDEB;
  --wa-bar:#F0F2F5; --wa-field:#FFFFFF; --wa-send:#00A884;
  --wa-sys:#FFEECC; --wa-sys-fg:#5A5442; --wa-ico:rgba(255,255,255,.92);
  --wa-shadow:0 1px .5px rgba(11,20,26,.13);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wa{
  --wa-head:#202C33; --wa-head-fg:#E9EDEF; --wa-head-sub:#8696A0;
  --wa-paper:#0B141A; --wa-in:#202C33; --wa-out:#005C4B;
  --wa-fg:#E9EDEF; --wa-meta:#8696A0; --wa-tick:#53BDEB;
  --wa-bar:#202C33; --wa-field:#2A3942; --wa-send:#00A884;
  --wa-sys:#182229; --wa-sys-fg:#8696A0; --wa-ico:#AEBAC1;
  --wa-shadow:0 1px .5px rgba(0,0,0,.3);
} }
:root[data-theme="dark"] .wa{
  --wa-head:#202C33; --wa-head-fg:#E9EDEF; --wa-head-sub:#8696A0;
  --wa-paper:#0B141A; --wa-in:#202C33; --wa-out:#005C4B;
  --wa-fg:#E9EDEF; --wa-meta:#8696A0; --wa-tick:#53BDEB;
  --wa-bar:#202C33; --wa-field:#2A3942; --wa-send:#00A884;
  --wa-sys:#182229; --wa-sys-fg:#8696A0; --wa-ico:#AEBAC1;
  --wa-shadow:0 1px .5px rgba(0,0,0,.3);
}

.wa{display:flex;flex-direction:column;overflow:hidden;border-radius:14px;
  border:1px solid var(--line);background:var(--wa-paper);color:var(--wa-fg);
  font-family:var(--body);height:600px;width:min(400px,100%)}
/* 헤더 — 아바타·이름·상태·시뮬레이션 배지 */
.wa-head{display:flex;align-items:center;gap:11px;padding:9px 12px;background:var(--wa-head);color:var(--wa-head-fg);flex:none}
.wa-head .wa-back{font-size:19px;line-height:1;color:var(--wa-ico);flex:none;opacity:.9}
.wa-head .wa-av{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:17px;background:rgba(255,255,255,.22)}
.wa-head .wa-who{min-width:0;flex:1}
/* 이름은 한 줄 고정 + 말줄임 — 긴 상호가 헤더를 2줄로 밀면 실제 WhatsApp처럼 안 보인다 */
.wa-head .wa-nm{display:flex;align-items:center;gap:6px;font-size:15.5px;font-weight:600;line-height:1.3;letter-spacing:.1px}
.wa-head .wa-nm .wa-nm-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wa-head .wa-st{font-size:12px;color:var(--wa-head-sub);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-head .wa-ic{display:flex;gap:15px;font-size:14px;color:var(--wa-ico);flex:none;margin-left:4px}
.wa-sim-tag{flex:none;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.22);color:var(--wa-head-fg);padding:2px 5px;border-radius:4px;line-height:1.3}
/* 대화 지면 — 자체 제작 패턴(Meta 도들 아님) */
.wa-body{flex:1;min-height:0;overflow:auto;padding:14px 9px 10px;display:flex;flex-direction:column;gap:2px;
  background-color:var(--wa-paper);
  background-image:radial-gradient(currentColor .5px,transparent .5px);background-size:22px 22px;
  color:rgba(11,27,26,.045)}
:root[data-theme="dark"] .wa-body{color:rgba(255,255,255,.03)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wa-body{color:rgba(255,255,255,.03)} }
/* 버블 — 실제 WhatsApp처럼 꼬리는 묶음의 첫 버블에만 */
.wa-b{position:relative;max-width:80%;padding:6px 9px 8px;border-radius:8px;font-size:14.2px;line-height:1.34;
  color:var(--wa-fg);box-shadow:var(--wa-shadow);white-space:pre-wrap;word-break:break-word;
  animation:wapop .14s ease-out;margin-bottom:2px}
.wa-b.in{background:var(--wa-in);align-self:flex-start;border-top-left-radius:8px}
.wa-b.out{background:var(--wa-out);align-self:flex-end;border-top-right-radius:8px}
.wa-b.tail.in{border-top-left-radius:0;margin-left:8px}
.wa-b.tail.out{border-top-right-radius:0;margin-right:8px}
.wa-b.tail.in::before,.wa-b.tail.out::before{content:"";position:absolute;top:0;width:8px;height:13px}
.wa-b.tail.in::before{left:-8px;background:var(--wa-in);
  clip-path:polygon(100% 0,100% 100%,0 0)}
.wa-b.tail.out::before{right:-8px;background:var(--wa-out);
  clip-path:polygon(0 0,0 100%,100% 0)}
/* 메타(시각+체크) — 마지막 줄 오른쪽에 흘려 넣는 WhatsApp 특유의 배치 */
.wa-b .wa-m{float:right;margin:6px -3px -3px 9px;font-size:11px;line-height:1;color:var(--wa-meta);
  display:inline-flex;align-items:center;gap:3px;user-select:none}
.wa-b .wa-ck{font-size:12.5px;letter-spacing:-2px;padding-right:2px}
.wa-b .wa-ck.read{color:var(--wa-tick)}
/* 날짜/시스템 칩 */
.wa-sys{align-self:center;background:var(--wa-sys);color:var(--wa-sys-fg);font-size:12px;
  padding:5px 11px;border-radius:7px;margin:6px 0;box-shadow:var(--wa-shadow);text-align:center;max-width:88%}
/* 입력 바 */
.wa-bar{display:flex;align-items:center;gap:7px;padding:7px 9px;background:var(--wa-bar);flex:none}
.wa-bar .wa-fld{flex:1;display:flex;align-items:center;gap:8px;background:var(--wa-field);
  border-radius:999px;padding:8px 13px;min-width:0}
.wa-bar input{flex:1;border:0;background:transparent;color:var(--wa-fg);font:15px var(--body);outline:0;min-width:0}
.wa-bar input::placeholder{color:var(--wa-meta)}
.wa-bar .wa-mm{border:0;background:transparent;color:var(--wa-meta);font-size:16px;cursor:pointer;flex:none;padding:0;line-height:1}
.wa-bar .wa-send{width:40px;height:40px;border-radius:50%;border:0;background:var(--wa-send);color:#fff;
  font-size:16px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.wa-bar .wa-mm.rec{color:#fff;background:var(--bad);border-radius:50%;width:30px;height:30px;animation:pulse 1.1s ease-in-out infinite}
/* 타이핑 인디케이터 — 상대 버블 안 점 3개. 버블 자체 패딩은 제거(이중 패딩 방지) */
.wa-b.typing-w{padding:0;min-width:0;width:max-content}
.wa-typing{display:inline-flex;gap:4px;align-items:center;padding:11px 13px}
.wa-typing i{width:6.5px;height:6.5px;border-radius:50%;background:var(--wa-meta);animation:ty 1.2s infinite}
.wa-typing i:nth-child(2){animation-delay:.15s} .wa-typing i:nth-child(3){animation-delay:.3s}
@keyframes wapop{from{transform:translateY(3px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.wa-b{animation:none}}

/* ── chat bubbles (zapsale 표면 — 보스챗·랜딩·브랜드가이드) ── */
.bub{max-width:78%;padding:9px 14px;border-radius:var(--r-bub);font-size:14.5px;line-height:1.5;
  animation:pop .16s ease-out;white-space:pre-wrap;word-break:break-word}
.bub.them{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;align-self:flex-start}
.bub.me{background:var(--ink);color:var(--bg);border-bottom-right-radius:6px;align-self:flex-end}
.bub.ai{background:var(--zap);color:#0B100D;border-bottom-right-radius:6px;align-self:flex-end}
/* 타임스탬프: 초록 AI 버블 위 근검정 텍스트 — 반투명(.55)이면 대비 부족(WCAG 실패).
   불투명 근검정으로 고정해 초록 배경 대비 ≥7:1 확보(색상은 상속). */
.bub .t{display:block;font-size:10.5px;opacity:1;color:inherit;margin-top:3px;text-align:right}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.typing{display:inline-flex;gap:4px;padding:12px 15px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:ty 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ── lead score meter ── */
.meter{display:flex;align-items:center;gap:8px}
.meter .bar{flex:1;height:6px;border-radius:999px;background:var(--canvas);overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:999px;background:var(--zap-deep);transition:width .4s ease}
.meter.hot .bar i{background:linear-gradient(90deg,var(--zap),var(--volt))}

/* ── table ── */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font:700 11.5px var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
  padding:8px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0} .tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--canvas)}

/* ── toast ── */
#toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:var(--bg);font:600 13.5px var(--body);padding:11px 18px;border-radius:12px;
  box-shadow:var(--shadow);animation:fadeup .2s ease-out;display:flex;gap:12px;align-items:center;max-width:min(520px,90vw)}
.toast.bad{background:var(--bad);color:#fff}
.toast .x{cursor:pointer;opacity:.7;font-weight:800;border:0;background:transparent;color:inherit;padding:2px} .toast .x:hover{opacity:1}
@keyframes fadeup{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── modal ── */
.ov{position:fixed;inset:0;background:rgba(8,10,9,.5);backdrop-filter:blur(3px);z-index:300;display:none;align-items:center;justify-content:center}
.ov.show{display:flex}
.modal{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  width:min(620px,92vw);max-height:86vh;overflow:auto;padding:26px;animation:fadeup .18s ease-out}

/* ── skeleton / misc ── */
.skel{background:var(--canvas);border-radius:8px;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:.55}50%{opacity:1}}
.row{display:flex;align-items:center;gap:10px} .grow{flex:1} .wrap{flex-wrap:wrap}
.grid{display:grid;gap:16px}
.fadeup{animation:fadeup .18s ease-out}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.ok{background:var(--zap)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)} .dot.off{background:var(--line2)}
/* 리거처 해제: 켜져 있으면 `--wa-*` 같은 토큰명이 `—wa—*`로 붙어 문서가 잘못 읽힌다 */
code,.mono{font-family:var(--mono);font-size:12.5px;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
pre.code{background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:14px;overflow:auto;font:12.5px/1.6 var(--mono)}
::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px;border:2px solid var(--bg)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}