/* 캐셜롯 FORM 스타일. 토큰 블록은 shared/cachalot.css(sha256 f852ba21a0d5…)에서 원문 그대로 추출 — 손으로 고치지 말 것 */
/* ---------- 1. Primitive ---------- */
:root{
  --gray-1000:#040507; --gray-950:#0d0d0d; --gray-900:#141516; --gray-850:#191a1c;
  --gray-800:#222326; --gray-700:#33353a; --gray-500:#74777f; --gray-300:#b7bac2; --gray-100:#e8e8ea;
  --lime-500:#c6ff00; --lime-600:#aee600; --lime-a12:rgb(198 255 0 / 12%); --lime-a20:rgb(198 255 0 / 20%);
  --cyan-500:#7fd3ff; --pink-400:#ffb3e6; --green-500:#55d98b; --orange-500:#ffb86b; --red-500:#ff7070;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --line-1:1px; --line-2:2px;
  --font-sans:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',-apple-system,system-ui,sans-serif;
  --font-display:'PretendardBlack','Pretendard Variable',Pretendard,sans-serif;
  --font-strong:'PretendardXB','Pretendard Variable',Pretendard,sans-serif;
  --font-mono:ui-monospace,Menlo,SF Mono,monospace;

/* ---------- 2. Semantic ---------- */
  --bg-canvas:var(--gray-1000); --bg-app:var(--gray-950);
  --bg-surface-1:var(--gray-900); --bg-surface-2:var(--gray-850); --bg-surface-selected:var(--lime-a12);
  --border-subtle:var(--gray-800); --border-default:var(--gray-700);
  --text-primary:var(--gray-100); --text-secondary:var(--gray-300); --text-muted:var(--gray-500);
  --action-primary:var(--lime-500); --action-primary-hover:var(--lime-600); --action-on-primary:var(--gray-1000);
  --focus-ring:var(--cyan-500);
  --status-running:var(--cyan-500); --status-success:var(--green-500); --status-warning:var(--orange-500); --status-danger:var(--red-500);
  --compare-a:var(--cyan-500); --compare-b:var(--pink-400);
  --brand:var(--lime-500);

/* ---------- 3. Component ---------- */
  --button-primary-bg:var(--action-primary); --button-primary-text:var(--action-on-primary);
  --button-secondary-border:var(--border-default);
  --field-bg:var(--bg-surface-1); --field-border:var(--border-default);
  --card-bg:var(--bg-surface-1); --card-border:var(--border-subtle); --card-selected-bg:var(--bg-surface-selected);
  --step-active:var(--action-primary); --progress-fill:var(--status-running);
  --focus-outline:var(--focus-ring); --toast-error-border:var(--status-danger);
  --shell-nav-width:0px; --shell-appbar-h:56px;

/* ---------- 구 변수 호환 (앱 고유 CSS가 참조) ---------- */
  --lime:var(--lime-500); --bg:var(--bg-app); --tile:var(--bg-surface-1); --tile2:var(--bg-surface-2);
  --line:var(--border-default); --ink:var(--text-primary); --ink2:var(--text-secondary); --ink3:var(--text-muted);
  --warn:var(--status-warning); --err:var(--status-danger); --ok:var(--status-success);
  --a:var(--compare-a); --b:var(--compare-b);
}

/* ---------- FORM 컴포넌트 (색은 위 토큰만 쓴다) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg-canvas);color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-app);color:var(--text-primary);font:16px/1.6 var(--font-sans);letter-spacing:-.01em;word-break:keep-all;min-height:100dvh}
:focus-visible{outline:var(--line-2) solid var(--focus-outline);outline-offset:2px}
::selection{background:var(--lime-a20)}
.wrap{max-width:640px;margin:0 auto;padding:var(--space-8) var(--space-4) var(--space-12)}
.wrap--wide{max-width:1200px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
h1{font-size:26px;line-height:1.25;font-weight:900;margin:var(--space-2) 0 var(--space-2)}
.lead{color:var(--text-secondary);margin:0 0 var(--space-6)}
.card{background:var(--card-bg);border:var(--line-1) solid var(--card-border);border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-4)}
.field{margin-bottom:var(--space-5)}
.field:last-child{margin-bottom:0}
.label{display:block;font-size:15px;font-weight:700;margin-bottom:var(--space-1)}
.hint{display:block;font-size:13px;color:var(--text-muted);margin-bottom:var(--space-2)}
.req{color:var(--brand);margin-left:2px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select{
  width:100%;font:inherit;color:var(--text-primary);background:var(--bg-surface-2);
  border:var(--line-1) solid var(--field-border);border-radius:var(--radius-sm);padding:12px 14px;min-height:48px}
input:focus,select:focus{border-color:var(--action-primary);outline:none}
.row{display:grid;grid-template-columns:140px 1fr;gap:var(--space-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:52px;padding:0 var(--space-4);
  border:var(--line-1) solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);font-weight:600;cursor:pointer}
.chip input:checked+span{background:var(--bg-surface-selected);border-color:var(--action-primary);color:var(--text-primary)}
.chip input:focus-visible+span{outline:var(--line-2) solid var(--focus-outline);outline-offset:2px}
.consent{font-size:14px;color:var(--text-secondary)}
.consent table{width:100%;border-collapse:collapse;margin:var(--space-2) 0 var(--space-3)}
.consent th,.consent td{text-align:left;vertical-align:top;padding:6px 8px 6px 0;border-bottom:var(--line-1) solid var(--border-subtle)}
.consent th{white-space:nowrap;color:var(--text-muted);font-weight:600;width:84px}
.check{display:flex;gap:var(--space-2);align-items:flex-start;font-weight:700;color:var(--text-primary);cursor:pointer}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--action-primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;border:0;border-radius:var(--radius-sm);
  background:var(--button-primary-bg);color:var(--button-primary-text);font:inherit;font-weight:800;font-size:17px;cursor:pointer}
.btn:hover{background:var(--action-primary-hover)}
.btn[disabled]{opacity:.5;cursor:default}
.btn--ghost{background:transparent;color:var(--text-primary);border:var(--line-1) solid var(--button-secondary-border);width:auto;padding:0 var(--space-5);min-height:44px;font-size:15px}
.btn--ghost:hover{background:var(--bg-surface-2)}
.msg{margin-top:var(--space-3);font-size:14px;min-height:1.6em}
.msg.err{color:var(--status-danger)}
.msg.ok{color:var(--status-success)}
.err-field{border-color:var(--status-danger)!important}
.done{text-align:center;padding:var(--space-10) var(--space-5)}
.done h2{font-size:22px;margin:var(--space-2) 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meta{font-size:12px;color:var(--text-muted)}
.foot{margin-top:var(--space-8);font-size:12px;color:var(--text-muted);text-align:center}
[hidden]{display:none!important}
@media(max-width:420px){.row{grid-template-columns:1fr}}
/* 캐셜롯 코칭(옛 세션) — 설명이 붙은 카드형 선택지 · 긴 글 칸 */
.opts{display:grid;gap:var(--space-2)}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:var(--line-1) solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer}
.opt b{font-weight:700;color:var(--text-primary)}
.opt small{font-size:13px;color:var(--text-muted)}
.opt input:checked+span{background:var(--bg-surface-selected);border-color:var(--action-primary)}
.opt input:focus-visible+span{outline:var(--line-2) solid var(--focus-outline);outline-offset:2px}
textarea{width:100%;font:inherit;color:var(--text-primary);background:var(--bg-surface-2);border:var(--line-1) solid var(--field-border);border-radius:var(--radius-sm);padding:12px 14px;resize:vertical;min-height:96px}
textarea:focus{border-color:var(--action-primary);outline:none}
.count{display:block;text-align:right;margin-top:4px}

.price{margin-top:var(--space-2);margin-bottom:0;min-height:1.4em;color:var(--text-secondary)}