/* PRE:AI 디자인 토큰 — 개편안 부록 A-확정 v1.2 (화이트 · tide-works 톤)
   정답지: 세컨브레인 assets/preai-mockup-v4-white-tide.html
   ─ 로드 순서: BASE_CSS(인라인, 레거시 클래스) → tokens.css(:root 재정의로 전면 리스킨) → kit.css
   ─ 소셜웨이브 v2 패턴: 클래스명 유지 + 값 교체. hex 신규 하드코딩 금지, 전부 var().
   ─ tide 실브랜드 hex 추출 결과(#2438E8/#FFD400)는 sell 실컬러와 충돌 → 정답지 목업의
     2026-07-24 사장님 지시로 홈페이지 팔레트(블루 #2438E8 · 옐로우 #FFD400 · 그린 #12B368 ·
     레드 #F03428 · 퍼플 #482FBE · 앰버 #E0A800)로 전면 통일. 구 teal 프라이머리 폐기. */
:root{
  /* surface */
  --bg:#F6F8FA; --s1:#FFFFFF; --s2:#EEF2F7; --s3:#E3EAF1;
  --border:#E4E9F0; --border-s:#D2DBE5;
  /* text (잉크 네이비) */
  --t1:#0B1F33; --t2:#4E6479; --t3:#8CA0B3;
  /* rooms (라이트 확정) */
  --room-make:#12B368; --room-grow:#2438E8; --room-sell:#482FBE;
  --room-value:#E0A800; --room-locked:#9AA1B5;
  /* tide 프라이머리 (로고 콜론·LIVE·주요 CTA 그라디언트) = 홈페이지 블루→인디고 */
  --tide-a:#2438E8; --tide-b:#482FBE;
  /* semantic */
  --ok:#12B368; --warn:#E0A800; --danger:#F03428; --info:#2438E8;
  /* shadow · geometry · motion */
  --shadow-card:0 2px 10px rgba(11,31,51,.05);
  --shadow-hero:0 10px 30px rgba(36,56,232,.12);
  --r-card:16px; --r-chip:999px; --r-btn:9px;
  --ease:cubic-bezier(.22,.8,.3,1); --dur-fast:140ms; --dur:240ms;

  /* ── 레거시 별칭 재매핑 (기존 클래스·인라인 스타일 무손상 리스킨) ── */
  --ink:#0B1F33; --surface:#FFFFFF; --line:#E4E9F0; --muted:#4E6479;
  --tw-blue:#2438E8; --tw-yellow:#FFD400;          /* 실브랜드 보조 (auth 화면 등) */
  --l1:#12B368; --l2:#2438E8; --l3:#E0A800; --l4:#482FBE; --l5:#F03428;
  --r:16px;
  --fd:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif;  /* Baloo 제거 — 목업은 Pretendard 단일 */
  --fs:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif;
}

/* ── 전역 리스킨 (클래스 유지·스타일만) ── */
body{font-size:14px;color:var(--t1)}
h1,h2,h3{font-weight:900;letter-spacing:-.03em}
::selection{background:rgba(255,212,0,.35)}
.card{border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.btn{border-radius:var(--r-btn);font-size:12.5px;font-weight:900;padding:8px 16px}
.btn-blue{background:linear-gradient(90deg,var(--tide-a),var(--tide-b));color:#fff}
.btn-blue:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(36,56,232,.25)}
.btn-yellow{background:var(--tw-yellow);color:var(--tw-blue)}
.btn-ghost{border:1px solid var(--border-s);color:var(--t2)}
input,textarea,select{border-color:var(--border-s);border-radius:10px;font-size:14px}
input:focus,textarea:focus{border-color:var(--tw-blue);box-shadow:0 0 0 3px rgba(36,56,232,.12)}
.badge-live{color:var(--ok);background:rgba(31,138,87,.12)}
.badge-wait{color:var(--t2);background:var(--s2)}
.badge-run{color:var(--warn);background:rgba(182,122,23,.12)}
.badge-err{color:var(--danger);background:rgba(214,69,60,.10)}
.err{background:rgba(214,69,60,.08);color:var(--danger)}
.prog{background:var(--s2)}
.prog>div{background:linear-gradient(90deg,var(--tide-a),var(--tide-b))}
.kpi{font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi-label{font-size:11px;color:var(--t2)}
table.tbl th{color:var(--t3);border-bottom-color:var(--border)}
table.tbl td{border-bottom-color:var(--border)}
#drawer{box-shadow:-16px 0 40px rgba(11,31,51,.10)}
.mark{background:#fff;border:1px solid #E7EAF2;box-shadow:0 1px 3px rgba(36,56,232,.14);color:var(--tw-blue);border-radius:10px}