/* ORDERBRIDGE — design tokens (pack: web-precision-fintech) + reset
   값은 design.md 절대값. 임의 변경 금지.
   폰트는 자체 호스팅한다 — 중국에서 Google Fonts가 차단되는 것이 이 제품의 전제다. */

@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/Pretendard-Variable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 색 */
  --bg: #f6f5f3;
  --surface: #ffffff;
  --ink: #1a2233;
  --muted: #5b6472;
  --faint: #8d94a1;
  --line: #e4e2dd;
  --line-strong: #d3d0c9;
  --accent: #4f46e5;
  --accent-weak: #ecebfb;
  --on-accent: #ffffff;
  --tint: #f0efec;

  /* 상태 — 색상이 아니라 농담으로 구분한다 */
  --st-open-bg: #ffffff;   --st-open-fg: #5b6472;  --st-open-bd: #d3d0c9;
  --st-wait-bg: #ecebfb;   --st-wait-fg: #3730a3;  --st-wait-bd: #c9c6f4;
  --st-done-bg: #1a2233;   --st-done-fg: #ffffff;  --st-done-bd: #1a2233;
  --st-fix-bg: #fdf1e3;    --st-fix-fg: #8a5a12;   --st-fix-bd: #eed9bb;
  --st-hold-bg: #f0efec;   --st-hold-fg: #6b7280;  --st-hold-bd: #ddd9d2;

  /* 상단 이리데센트 밴드 — 페이지 상단 1/3에만 */
  --band: linear-gradient(105deg, #fef6e4 0%, #fcd9c6 26%, #e6d6f5 58%, #cdd3f5 82%, #c3c9f0 100%);

  /* 타이포 */
  --font: "Pretendard Variable", Pretendard, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-h1: clamp(2.6rem, 5.5vw, 4.6rem);
  --fs-h2: clamp(1.7rem, 3vw, 2.5rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1.0625rem;
  --fs-label: 0.8125rem;
  --fs-meta: 0.875rem;
  --fs-cell: 0.8125rem;
  --fs-num: 0.875rem;
  --ls-h1: -0.035em;
  --ls-h2: -0.025em;
  --ls-label: 0.04em;
  --lh-body: 1.65;
  --lh-cell: 1.4;

  /* 레이아웃 */
  --max: 1120px;
  --max-app: 1480px;
  --pad-x: clamp(20px, 4vw, 40px);
  --gap: 24px;
  --sec: clamp(72px, 9vw, 112px);
  --header-h: 56px;
  --nav-w: 212px;
  --row-h: 38px;
  --cell-pad: 7px 12px;

  /* 형태 */
  --r-card: 10px;
  --r-btn: 8px;
  --r-panel: 12px;
  --r-pill: 999px;
  --sh-card: 0 1px 2px rgba(26, 34, 51, 0.05);
  --sh-pop: 0 1px 2px rgba(26, 34, 51, 0.06), 0 12px 28px rgba(26, 34, 51, 0.12);

  /* 모션 */
  --t-fast: 140ms;
  --t-in: 200ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 구 토큰 별칭 — 페이지 인라인 스타일이 아직 참조한다 */
  --rule: var(--line);
  --rule-soft: var(--line);
  --signal: var(--accent);
  --on-signal: var(--on-accent);
  --on-ink: var(--surface);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #11151d;
  --surface: #171c26;
  --ink: #e9ecf2;
  --muted: #98a1b1;
  --faint: #6f7889;
  --line: #262d3a;
  --line-strong: #36404f;
  --accent: #8b85f5;
  --accent-weak: #232449;
  --on-accent: #11151d;
  --tint: #1c222d;

  --st-open-bg: #171c26; --st-open-fg: #98a1b1; --st-open-bd: #36404f;
  --st-wait-bg: #232449; --st-wait-fg: #b9b4fb; --st-wait-bd: #383a72;
  --st-done-bg: #e9ecf2; --st-done-fg: #11151d; --st-done-bd: #e9ecf2;
  --st-fix-bg: #2e2415;  --st-fix-fg: #e2b473; --st-fix-bd: #4a3a1e;
  --st-hold-bg: #1c222d; --st-hold-fg: #8d94a1; --st-hold-bd: #2b3341;

  --band: linear-gradient(105deg, #221f1a 0%, #2a211c 26%, #241f2e 58%, #1d2134 82%, #1a1f33 100%);
  --sh-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.5);

  --rule: var(--line);
  --rule-soft: var(--line);
  --signal: var(--accent);
  --on-signal: var(--on-accent);
  --on-ink: var(--surface);

  color-scheme: dark;
}

/* ── reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  overflow-x: clip;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }
th { text-align: left; }

/* 숫자는 항상 자릿수 정렬 — 단가·금액·수량·납기 */
table, .num, .c-num, input[type="number"], .tnum { font-variant-numeric: tabular-nums; }

/* 한글 어절 중간에서 줄이 끊기지 않게 */
h1, h2, h3, p, li, dt, dd, figcaption, label { word-break: keep-all; overflow-wrap: break-word; }
/* 중국어는 띄어쓰기가 없어 keep-all이면 문장 전체가 한 덩어리가 된다 */
:lang(zh), :lang(zh) * { word-break: normal; }

h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: var(--ls-h1); line-height: 1.04; }
h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: var(--ls-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

[hidden] { display: none !important; }

::selection { background: var(--accent); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}