/* 담다 디자인 토큰 — 원본은 홈페이지 app/assets/damda.css (블루 + 화이트).
   ai-intro-video pipeline/brand.py 와 같은 값. 여기서만 고치면 화면 전체가 따라온다. */
:root {
  --b50:#F5F8FF; --b100:#EAF0FE; --b200:#D7E1FB; --b300:#B6C6F6;
  --b400:#8AA0EC; --b500:#5F76DE; --b600:#4757CB; --b700:#3B39A9;
  --b800:#2E2A8B; --b900:#221F6A; --b950:#141238;

  --bg:#F4F6FC; --card:#FFFFFF; --card2:#FAFBFF;
  --line:#DDE3F2; --line-s:#C3CDE8; --line-hi:#EBEFFB;

  --ink:#171533; --ink2:#454269; --muted:#6C6D92;

  --ok:#1F6B4A; --ok-s:#E4F3EC;
  --warn:#96590B; --warn-s:#FAF0DC;
  --stop:#9E3226; --stop-s:#FBE6E2;

  --grad-brand:linear-gradient(135deg,#4757CB 0%,#3B39A9 48%,#2E2A8B 100%);
  --grad-top:linear-gradient(100deg,#2A2782 0%,#33309A 42%,#3F44B8 100%);
  --grad-soft:linear-gradient(135deg,#EFF3FF 0%,#E4EBFD 100%);

  --sh1:0 1px 2px rgba(28,32,84,.05), 0 1px 3px rgba(28,32,84,.04);
  --sh2:0 4px 14px -6px rgba(35,40,110,.20), 0 1px 3px rgba(35,40,110,.06);
  --sh3:0 16px 34px -18px rgba(35,40,110,.42), 0 3px 10px -6px rgba(35,40,110,.14);
  --ring:0 0 0 3px rgba(95,118,222,.20);

  /* 노드 갈래별 색 — 입력(차분) · 생성(브랜드) · 출력(진한 남색) */
  --c-in:#5B6480;   --c-in-s:#EEF1F7;   --c-in-b:#D8DEEB;
  --c-make:#4757CB; --c-make-s:#EAEFFE; --c-make-b:#C9D5F8;
  --c-out:#2E2A8B;  --c-out-s:#E7E6F7;  --c-out-b:#C8C5EC;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --font:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
}

* { box-sizing:border-box; }
html,body,#root { height:100%; margin:0; }
body {
  font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:13px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
button { font-family:inherit; font-size:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; font-size:inherit; color:var(--ink); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line-s); border-radius:99px; border:3px solid var(--bg); }
::-webkit-scrollbar-track { background:transparent; }

/* ---------- 공통 조각 ---------- */
.ic { flex:none; vertical-align:-.14em; }
.ic.ok { color:var(--ok); } .ic.bad { color:var(--stop); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); background:var(--card); color:var(--ink2);
  border-radius:var(--r-sm); padding:6px 11px; font-weight:600; white-space:nowrap;
  transition:.12s; box-shadow:var(--sh1);
}
.btn.ic { padding:6px 8px; }
.btn.wide { width:100%; }
.btn:hover:not(:disabled) { border-color:var(--b300); color:var(--b700); background:var(--b50); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { background:var(--grad-brand); color:#fff; border-color:transparent; box-shadow:var(--sh2); }
.btn.primary:hover:not(:disabled) { filter:brightness(1.08); color:#fff; }
.btn.ghost { background:transparent; border-color:transparent; box-shadow:none; }
.btn.ghost:hover:not(:disabled) { background:var(--b50); }
.btn.danger:hover:not(:disabled) { border-color:#E8B4AC; color:var(--stop); background:var(--stop-s); }
.btn.sm { padding:3px 8px; font-size:12px; border-radius:var(--r-xs); }

.field { display:block; margin-bottom:11px; }
.field > label { display:block; font-size:11.5px; font-weight:700; color:var(--ink2); margin-bottom:4px; letter-spacing:-.1px; }
.field .help { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.45; }
.inp, .ta, .sel {
  width:100%; border:1px solid var(--line); background:#fff; border-radius:var(--r-sm);
  padding:7px 9px; outline:none; transition:.12s;
}
.inp:focus, .ta:focus, .sel:focus { border-color:var(--b400); box-shadow:var(--ring); }
.ta { resize:vertical; min-height:62px; line-height:1.5; }
.sel { appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%236C6D92' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; padding-right:26px; }

.badge {
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:99px; background:var(--b100); color:var(--b700);
}
.badge.ok { background:var(--ok-s); color:var(--ok); }
.badge.warn { background:var(--warn-s); color:var(--warn); }
.badge.stop { background:var(--stop-s); color:var(--stop); }
.badge.mute { background:var(--line-hi); color:var(--muted); }

.hr { height:1px; background:var(--line); margin:12px 0; border:0; }
.muted { color:var(--muted); }
.mono { font-variant-numeric:tabular-nums; }