@wipco/sdui 0.1.0

package/dist/styles.css

@@ -0,0 +1,615 @@
+/* ============================================================
+   @wipco/sdui — 독립 실행 스타일시트
+   WIPCO 브랜드 토큰(wp-*) + 내장 컴포넌트 스타일 전체.
+   호스트 앱은 이 파일 하나만 import하면 된다:
+     import '@wipco/sdui/styles.css'
+   ============================================================ */
+
+/* ---------- 토큰: 팔레트 ---------- */
+:root {
+  --wp-white: #ffffff;
+
+  /* WIPCO Blue 램프 — 600이 브랜드 값 */
+  --wp-navy-50: #eef1f8;
+  --wp-navy-100: #dde2ef;
+  --wp-navy-200: #b9c2db;
+  --wp-navy-300: #8e9bc2;
+  --wp-navy-400: #5c6d9f;
+  --wp-navy-500: #2c4080;
+  --wp-navy-600: #1d2c60;
+  --wp-navy-700: #172449;
+  --wp-navy-800: #121b36;
+
+  /* WIPCO Red 램프 — 600이 브랜드 값 */
+  --wp-red-50: #fdeded;
+  --wp-red-100: #fadcdc;
+  --wp-red-200: #f2b0b1;
+  --wp-red-500: #dc2226;
+  --wp-red-600: #ca1a1d;
+  --wp-red-700: #a41417;
+
+  /* Signal blue */
+  --wp-blue-50: #e8f2fc;
+  --wp-blue-200: #a5cdf1;
+  --wp-blue-500: #0a73c9;
+  --wp-blue-600: #0a63ad;
+  --wp-blue-700: #08518a;
+
+  /* Survey gold */
+  --wp-gold-50: #fbf6e8;
+  --wp-gold-200: #e9d79b;
+  --wp-gold-600: #a98d34;
+  --wp-gold-700: #836c22;
+
+  /* Verified green */
+  --wp-green-50: #e7f5ef;
+  --wp-green-200: #93d3ba;
+  --wp-green-600: #0e6b4b;
+  --wp-green-700: #0a563c;
+
+  /* UI 뉴트럴 — WIPCO Blue 쪽으로 2% 틴트된 무채색 램프 */
+  --wp-slate-25: #fafbfd;
+  --wp-slate-50: #f5f7fa;
+  --wp-slate-100: #eef1f6;
+  --wp-slate-200: #e1e6ef;
+  --wp-slate-300: #cdd4e1;
+  --wp-slate-400: #a4adc0;
+  --wp-slate-500: #7b8598;
+  --wp-slate-600: #5b6577;
+  --wp-slate-700: #424b5c;
+  --wp-slate-800: #2b3242;
+  --wp-slate-900: #1a2030;
+  --wp-slate-950: #0f131e;
+}
+
+/* ---------- 토큰: 시맨틱 ---------- */
+:root {
+  --wp-text-strong: var(--wp-slate-900);
+  --wp-text-default: var(--wp-slate-800);
+  --wp-text-muted: var(--wp-slate-600);
+  --wp-text-subtle: var(--wp-slate-500);
+  --wp-text-disabled: var(--wp-slate-400);
+  --wp-text-inverse: var(--wp-white);
+  --wp-text-brand: var(--wp-navy-600);
+  --wp-text-link: var(--wp-blue-500);
+  --wp-text-link-hover: var(--wp-blue-600);
+  --wp-text-success: var(--wp-green-600);
+  --wp-text-warning: var(--wp-gold-700);
+  --wp-text-danger: var(--wp-red-600);
+  --wp-text-info: var(--wp-blue-600);
+
+  --wp-surface-page: var(--wp-slate-50);
+  --wp-surface-card: var(--wp-white);
+  --wp-surface-sunken: var(--wp-slate-100);
+  --wp-surface-hover: var(--wp-slate-50);
+  --wp-surface-active: var(--wp-slate-100);
+  --wp-surface-selected: var(--wp-navy-50);
+  --wp-surface-disabled: var(--wp-slate-100);
+  --wp-surface-inverse: var(--wp-navy-600);
+  --wp-surface-overlay: rgba(15, 19, 30, 0.52);
+
+  --wp-border-subtle: var(--wp-slate-200);
+  --wp-border-default: var(--wp-slate-300);
+  --wp-border-strong: var(--wp-slate-400);
+  --wp-border-focus: var(--wp-blue-500);
+  --wp-border-danger: var(--wp-red-600);
+  --wp-divider: var(--wp-slate-200);
+
+  --wp-action-primary-bg: var(--wp-navy-600);
+  --wp-action-primary-bg-hover: var(--wp-navy-700);
+  --wp-action-primary-bg-active: var(--wp-navy-800);
+  --wp-action-primary-fg: var(--wp-white);
+  --wp-action-secondary-bg: var(--wp-white);
+  --wp-action-secondary-bg-hover: var(--wp-slate-50);
+  --wp-action-secondary-bg-active: var(--wp-slate-100);
+  --wp-action-secondary-fg: var(--wp-slate-800);
+  --wp-action-secondary-border: var(--wp-slate-300);
+  --wp-action-ghost-bg-hover: var(--wp-slate-100);
+  --wp-action-ghost-bg-active: var(--wp-slate-200);
+  --wp-action-ghost-fg: var(--wp-slate-700);
+  --wp-action-danger-bg: var(--wp-red-600);
+  --wp-action-danger-bg-hover: var(--wp-red-700);
+  --wp-action-danger-fg: var(--wp-white);
+  --wp-action-disabled-bg: var(--wp-slate-200);
+  --wp-action-disabled-fg: var(--wp-slate-400);
+
+  --wp-accent: var(--wp-red-600);
+
+  --wp-status-info-bg: var(--wp-blue-50);
+  --wp-status-info-border: var(--wp-blue-200);
+  --wp-status-info-fg: var(--wp-blue-700);
+  --wp-status-success-bg: var(--wp-green-50);
+  --wp-status-success-border: var(--wp-green-200);
+  --wp-status-success-fg: var(--wp-green-700);
+  --wp-status-warning-bg: var(--wp-gold-50);
+  --wp-status-warning-border: var(--wp-gold-200);
+  --wp-status-warning-fg: var(--wp-gold-700);
+  --wp-status-danger-bg: var(--wp-red-50);
+  --wp-status-danger-border: var(--wp-red-200);
+  --wp-status-danger-fg: var(--wp-red-700);
+  --wp-status-neutral-bg: var(--wp-slate-100);
+  --wp-status-neutral-border: var(--wp-slate-300);
+  --wp-status-neutral-fg: var(--wp-slate-700);
+
+  --wp-chrome-bg: var(--wp-navy-600);
+  --wp-chrome-fg: var(--wp-white);
+  --wp-chrome-fg-muted: rgba(255, 255, 255, 0.64);
+  --wp-chrome-item-hover: rgba(255, 255, 255, 0.1);
+  --wp-chrome-item-active: rgba(255, 255, 255, 0.16);
+  --wp-chrome-border: rgba(255, 255, 255, 0.12);
+
+  /* 형태·간격·타이포 */
+  --wp-radius-sm: 4px;
+  --wp-radius-md: 5px;
+  --wp-radius-lg: 8px;
+  --wp-radius-full: 999px;
+  --wp-space-1: 4px;
+  --wp-space-2: 8px;
+  --wp-space-3: 12px;
+  --wp-space-4: 16px;
+  --wp-space-5: 20px;
+  --wp-space-6: 24px;
+  --wp-space-8: 32px;
+  --wp-font-sans: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
+  --wp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --wp-shadow-sm: 0 1px 2px rgba(15, 19, 30, 0.06);
+  --wp-shadow-md: 0 4px 12px rgba(15, 19, 30, 0.1);
+  --wp-shadow-lg: 0 12px 32px rgba(15, 19, 30, 0.18);
+  --wp-z-dialog: 100;
+  --wp-z-toast: 110;
+}
+
+/* ---------- 베이스 ---------- */
+.sdui-root,
+.wp-app {
+  font-family: var(--wp-font-sans);
+  color: var(--wp-text-default);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.sdui-root *,
+.wp-app * {
+  box-sizing: border-box;
+}
+
+/* ---------- 타입 프리셋 ---------- */
+.wp-display-1 { font-size: 40px; font-weight: 800; line-height: 1.15; color: var(--wp-text-strong); margin: 0; }
+.wp-display-2 { font-size: 32px; font-weight: 800; line-height: 1.2; color: var(--wp-text-strong); margin: 0; }
+.wp-h1 { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--wp-text-strong); margin: 0; }
+.wp-h2 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--wp-text-strong); margin: 0; }
+.wp-h3 { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--wp-text-strong); margin: 0; }
+.wp-h4 { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--wp-text-strong); margin: 0; }
+.wp-h5 { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--wp-text-strong); margin: 0; }
+.wp-h6 { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--wp-text-strong); margin: 0; }
+.wp-body-lg { font-size: 15px; margin: 0; }
+.wp-body { font-size: 13px; margin: 0; }
+.wp-body-sm { font-size: 12px; margin: 0; }
+.wp-caption { font-size: 12px; color: var(--wp-text-muted); margin: 0; }
+.wp-label { font-size: 12px; font-weight: 600; color: var(--wp-text-muted); margin: 0; }
+.wp-overline { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp-text-subtle); margin: 0; }
+.wp-micro { font-size: 10.5px; color: var(--wp-text-subtle); margin: 0; }
+.wp-metric { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wp-text-strong); margin: 0; }
+.wp-metric-sm { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wp-text-strong); margin: 0; }
+.wp-mono { font-family: var(--wp-font-mono); font-size: 12.5px; margin: 0; }
+.wp-mono-xs { font-family: var(--wp-font-mono); font-size: 11px; margin: 0; }
+.wp-num { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--wp-text-muted); }
+
+/* ---------- 레이아웃 프리미티브 ---------- */
+.wp-col { display: flex; flex-direction: column; gap: var(--wp-space-4); min-width: 0; }
+.wp-row { display: flex; align-items: center; gap: var(--wp-space-2); min-width: 0; }
+.wp-row--between { justify-content: space-between; }
+.wp-grid { display: grid; gap: var(--wp-space-4); min-width: 0; }
+.wp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.wp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.wp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+@media (max-width: 900px) {
+  .wp-grid--3, .wp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 600px) {
+  .wp-grid--2, .wp-grid--3, .wp-grid--4 { grid-template-columns: minmax(0, 1fr); }
+}
+.wp-spacer { flex: 1; }
+/*
+ * size를 준 Spacer — 남는 공간을 먹는 대신 간격 토큰만큼의 고정 여백이 된다.
+ * 가로 묶음(.wp-row)에 들어가든 세로 묶음(.wp-col/.wp-card__body)에 들어가든 같은
+ * 값이 나오도록 폭과 높이를 함께 잡는다. 둘 다 명시 크기라 세로 묶음의 stretch도 먹지 않는다.
+ */
+.wp-spacer--1, .wp-spacer--2, .wp-spacer--3,
+.wp-spacer--4, .wp-spacer--5, .wp-spacer--6, .wp-spacer--8 { flex: none; }
+.wp-spacer--1 { width: var(--wp-space-1); height: var(--wp-space-1); }
+.wp-spacer--2 { width: var(--wp-space-2); height: var(--wp-space-2); }
+.wp-spacer--3 { width: var(--wp-space-3); height: var(--wp-space-3); }
+.wp-spacer--4 { width: var(--wp-space-4); height: var(--wp-space-4); }
+.wp-spacer--5 { width: var(--wp-space-5); height: var(--wp-space-5); }
+.wp-spacer--6 { width: var(--wp-space-6); height: var(--wp-space-6); }
+.wp-spacer--8 { width: var(--wp-space-8); height: var(--wp-space-8); }
+.wp-divider { border: 0; border-top: 1px solid var(--wp-divider); margin: 0; width: 100%; }
+
+/* ---------- 페이지 헤더 ---------- */
+.wp-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wp-space-4); }
+.wp-page-head__text { flex: 1; min-width: 0; }
+.wp-page-head__title { font-size: 22px; font-weight: 800; color: var(--wp-text-strong); margin: 0; letter-spacing: -0.01em; }
+.wp-page-head__title::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--wp-accent); margin-left: 6px; vertical-align: super; }
+.wp-page-head__sub { font-size: 13px; color: var(--wp-text-muted); margin-top: 4px; }
+.wp-page-head__actions { display: flex; gap: var(--wp-space-2); flex: none; }
+
+/* ---------- 키-값 목록 ---------- */
+.wp-kv { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 7px var(--wp-space-4); align-items: baseline; }
+.wp-kv__k { font-size: 12px; font-weight: 600; color: var(--wp-text-muted); }
+.wp-kv__v { font-size: 13px; color: var(--wp-text-default); min-width: 0; overflow-wrap: anywhere; }
+
+/* ---------- 버튼 ---------- */
+.wp-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 32px; padding: 0 12px; border-radius: var(--wp-radius-md);
+  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
+  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+.wp-btn:focus-visible { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
+.wp-btn:disabled { cursor: not-allowed; }
+.wp-btn--primary { background: var(--wp-action-primary-bg); color: var(--wp-action-primary-fg); }
+.wp-btn--primary:hover:not(:disabled) { background: var(--wp-action-primary-bg-hover); }
+.wp-btn--primary:active:not(:disabled) { background: var(--wp-action-primary-bg-active); }
+.wp-btn--secondary { background: var(--wp-action-secondary-bg); color: var(--wp-action-secondary-fg); border-color: var(--wp-action-secondary-border); }
+.wp-btn--secondary:hover:not(:disabled) { background: var(--wp-action-secondary-bg-hover); }
+.wp-btn--secondary:active:not(:disabled) { background: var(--wp-action-secondary-bg-active); }
+.wp-btn--ghost { background: transparent; color: var(--wp-action-ghost-fg); }
+.wp-btn--ghost:hover:not(:disabled) { background: var(--wp-action-ghost-bg-hover); }
+.wp-btn--ghost:active:not(:disabled) { background: var(--wp-action-ghost-bg-active); }
+.wp-btn--danger { background: var(--wp-action-danger-bg); color: var(--wp-action-danger-fg); }
+.wp-btn--danger:hover:not(:disabled) { background: var(--wp-action-danger-bg-hover); }
+.wp-btn--link { background: none; border: none; color: var(--wp-text-link); padding: 0; height: auto; font-weight: 600; }
+.wp-btn--link:hover:not(:disabled) { color: var(--wp-text-link-hover); text-decoration: underline; }
+.wp-btn--primary:disabled, .wp-btn--secondary:disabled, .wp-btn--ghost:disabled, .wp-btn--danger:disabled {
+  background: var(--wp-action-disabled-bg); color: var(--wp-action-disabled-fg); border-color: transparent;
+}
+.wp-btn--xs { height: 24px; padding: 0 8px; font-size: 12px; }
+.wp-btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
+.wp-btn--lg { height: 40px; padding: 0 16px; font-size: 14px; }
+.wp-btn--xl { height: 48px; padding: 0 20px; font-size: 15px; }
+.wp-btn--block { width: 100%; }
+.wp-btn--loading { pointer-events: none; }
+
+.wp-iconbtn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: var(--wp-radius-md);
+  border: none; background: transparent; color: var(--wp-action-ghost-fg); cursor: pointer;
+  transition: background 0.12s;
+}
+.wp-iconbtn:hover { background: var(--wp-action-ghost-bg-hover); }
+.wp-iconbtn:active { background: var(--wp-action-ghost-bg-active); }
+.wp-iconbtn:focus-visible { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
+.wp-iconbtn--sm { width: 28px; height: 28px; }
+.wp-iconbtn--xs { width: 24px; height: 24px; }
+.wp-iconbtn--danger { color: var(--wp-text-danger); }
+.wp-iconbtn--danger:hover { background: var(--wp-red-50); }
+/* outlined — 툴바에서 배경이 같은 표면 위에 놓일 때 눌리는 자리임을 하드라인으로 보인다. */
+.wp-iconbtn--outlined {
+  border: 1px solid var(--wp-action-secondary-border);
+  background: var(--wp-action-secondary-bg);
+  color: var(--wp-action-secondary-fg);
+  box-shadow: var(--wp-shadow-sm);
+}
+.wp-iconbtn--outlined:hover { background: var(--wp-action-secondary-bg-hover); border-color: var(--wp-border-strong); }
+.wp-iconbtn--outlined:active { background: var(--wp-action-secondary-bg-active); }
+
+/* ---------- 입력 ---------- */
+.wp-input, .wp-textarea, .wp-select {
+  font-family: inherit; font-size: 13px; color: var(--wp-text-default);
+  background: var(--wp-surface-card); border: 1px solid var(--wp-border-default);
+  border-radius: var(--wp-radius-md); transition: border-color 0.12s, box-shadow 0.12s;
+  width: 100%;
+}
+.wp-input { height: 32px; padding: 0 10px; }
+.wp-input--sm { height: 28px; font-size: 12.5px; }
+.wp-input--lg { height: 40px; font-size: 14px; }
+.wp-input--mono { font-family: var(--wp-font-mono); font-size: 12.5px; }
+.wp-input:focus, .wp-textarea:focus, .wp-select:focus {
+  outline: none; border-color: var(--wp-border-focus);
+  box-shadow: 0 0 0 3px rgba(10, 115, 201, 0.15);
+}
+.wp-input:disabled, .wp-textarea:disabled, .wp-select:disabled {
+  background: var(--wp-surface-disabled); color: var(--wp-text-disabled); cursor: not-allowed;
+}
+.wp-input--invalid, .wp-textarea--invalid, .wp-select--invalid { border-color: var(--wp-border-danger); }
+.wp-input--invalid:focus, .wp-textarea--invalid:focus {
+  box-shadow: 0 0 0 3px rgba(202, 26, 29, 0.12); border-color: var(--wp-border-danger);
+}
+.wp-input::placeholder, .wp-textarea::placeholder { color: var(--wp-text-subtle); }
+
+.wp-inputwrap { position: relative; display: flex; align-items: center; width: 100%; }
+.wp-inputwrap__lead { position: absolute; left: 10px; color: var(--wp-text-subtle); display: flex; pointer-events: none; }
+.wp-inputwrap--lead .wp-input { padding-left: 32px; }
+/* 후행 단위 — 값의 일부가 아니므로 작고 흐리게, 클릭도 입력으로 통과시킨다. */
+.wp-inputwrap__trail {
+  position: absolute; right: 10px; display: flex; pointer-events: none;
+  font-size: 11.5px; color: var(--wp-text-subtle);
+}
+.wp-inputwrap--trail .wp-input { padding-right: 32px; }
+/*
+ * 단위가 오른쪽 끝을 차지하므로 number 입력의 네이티브 증감 화살표가 그 위에 겹친다.
+ * 자리를 나눠 쓸 폭이 없어 화살표를 접는다(값은 여전히 키보드 ↑↓로 조절된다).
+ */
+.wp-inputwrap--trail .wp-input[type='number'] { appearance: textfield; -moz-appearance: textfield; }
+.wp-inputwrap--trail .wp-input::-webkit-outer-spin-button,
+.wp-inputwrap--trail .wp-input::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; margin: 0; }
+
+.wp-textarea { padding: 8px 10px; resize: vertical; min-height: 60px; line-height: 1.5; }
+
+.wp-selectwrap { position: relative; display: flex; width: 100%; }
+.wp-select { height: 32px; padding: 0 30px 0 10px; appearance: none; cursor: pointer; }
+.wp-select--sm { height: 28px; font-size: 12.5px; }
+.wp-select--lg { height: 40px; font-size: 14px; }
+.wp-selectwrap__caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--wp-text-subtle); pointer-events: none; display: flex; }
+
+/* ---------- 체크박스 / 스위치 ---------- */
+.wp-check { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 13px; }
+.wp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
+.wp-check__box {
+  width: 16px; height: 16px; flex: none; margin-top: 1.5px;
+  border: 1px solid var(--wp-border-default); border-radius: var(--wp-radius-sm);
+  background: var(--wp-surface-card); color: transparent;
+  display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s;
+}
+.wp-check input:checked + .wp-check__box { background: var(--wp-action-primary-bg); border-color: var(--wp-action-primary-bg); color: var(--wp-white); }
+.wp-check input:focus-visible + .wp-check__box { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
+.wp-check__text { display: flex; flex-direction: column; gap: 2px; }
+.wp-check__desc { font-size: 12px; color: var(--wp-text-muted); }
+.wp-check--disabled { cursor: not-allowed; color: var(--wp-text-disabled); }
+
+.wp-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
+.wp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
+.wp-switch__track {
+  width: 34px; height: 18px; flex: none; border-radius: var(--wp-radius-full);
+  background: var(--wp-slate-300); position: relative; transition: background 0.15s;
+}
+.wp-switch__track::after {
+  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
+  border-radius: 50%; background: var(--wp-white); box-shadow: var(--wp-shadow-sm); transition: left 0.15s;
+}
+.wp-switch input:checked + .wp-switch__track { background: var(--wp-action-primary-bg); }
+.wp-switch input:checked + .wp-switch__track::after { left: 18px; }
+.wp-switch input:focus-visible + .wp-switch__track { outline: 2px solid var(--wp-border-focus); outline-offset: 1px; }
+.wp-switch--sm .wp-switch__track { width: 28px; height: 16px; }
+.wp-switch--sm .wp-switch__track::after { width: 12px; height: 12px; }
+.wp-switch--sm input:checked + .wp-switch__track::after { left: 14px; }
+
+/* ---------- 필드 ---------- */
+.wp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.wp-field--horizontal { flex-direction: row; align-items: flex-start; gap: var(--wp-space-3); }
+.wp-field--horizontal .wp-field__label { width: 132px; flex: none; padding-top: 7px; }
+.wp-field__label { font-size: 12px; font-weight: 600; color: var(--wp-text-muted); }
+.wp-field__req { color: var(--wp-accent); margin-left: 3px; }
+.wp-field__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
+.wp-field__hint { font-size: 12px; color: var(--wp-text-subtle); }
+.wp-field__error { font-size: 12px; color: var(--wp-text-danger); display: inline-flex; align-items: center; gap: 4px; }
+
+/* ---------- 카드 ---------- */
+.wp-card {
+  background: var(--wp-surface-card); border: 1px solid var(--wp-border-subtle);
+  border-radius: var(--wp-radius-lg); box-shadow: var(--wp-shadow-sm);
+  display: flex; flex-direction: column; min-width: 0;
+}
+.wp-card--raised { box-shadow: var(--wp-shadow-md); }
+.wp-card--flat { box-shadow: none; }
+.wp-card--sunken { background: var(--wp-surface-sunken); box-shadow: none; }
+.wp-card--selected { border-color: var(--wp-navy-600); }
+.wp-card--interactive { cursor: pointer; transition: box-shadow 0.12s, transform 0.12s; }
+.wp-card--interactive:hover { box-shadow: var(--wp-shadow-md); transform: translateY(-1px); }
+.wp-card__head {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-3);
+  padding: 14px 20px; border-bottom: 1px solid var(--wp-border-subtle);
+}
+.wp-card__title { font-size: 14px; font-weight: 700; color: var(--wp-text-strong); }
+.wp-card__sub { font-size: 12px; color: var(--wp-text-muted); margin-top: 2px; }
+.wp-card__body { padding: 20px; display: flex; flex-direction: column; gap: var(--wp-space-4); min-width: 0; }
+.wp-card__body--tight { padding: 14px; }
+.wp-card__foot {
+  display: flex; justify-content: flex-end; gap: var(--wp-space-2);
+  padding: 12px 20px; border-top: 1px solid var(--wp-border-subtle);
+}
+
+/* ---------- 배지 / 태그 ---------- */
+.wp-badge {
+  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
+  border-radius: var(--wp-radius-full); font-size: 11.5px; font-weight: 600; white-space: nowrap;
+  border: 1px solid;
+}
+.wp-badge--lg { height: 24px; font-size: 12.5px; padding: 0 10px; }
+.wp-badge--neutral { background: var(--wp-status-neutral-bg); border-color: var(--wp-status-neutral-border); color: var(--wp-status-neutral-fg); }
+.wp-badge--info { background: var(--wp-status-info-bg); border-color: var(--wp-status-info-border); color: var(--wp-status-info-fg); }
+.wp-badge--success { background: var(--wp-status-success-bg); border-color: var(--wp-status-success-border); color: var(--wp-status-success-fg); }
+.wp-badge--warning { background: var(--wp-status-warning-bg); border-color: var(--wp-status-warning-border); color: var(--wp-status-warning-fg); }
+.wp-badge--danger { background: var(--wp-status-danger-bg); border-color: var(--wp-status-danger-border); color: var(--wp-status-danger-fg); }
+.wp-badge--brand { background: var(--wp-navy-50); border-color: var(--wp-navy-200); color: var(--wp-navy-600); }
+.wp-badge--dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+
+.wp-tag {
+  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
+  border-radius: var(--wp-radius-sm); font-size: 12px;
+  border: 1px solid var(--wp-border-default); background: var(--wp-surface-card); color: var(--wp-text-default);
+}
+.wp-tag--filled { background: var(--wp-slate-100); border-color: transparent; }
+.wp-tag__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
+.wp-tag__x { display: inline-flex; cursor: pointer; color: var(--wp-text-subtle); }
+.wp-tag__x:hover { color: var(--wp-text-danger); }
+
+/* ---------- 알림 (Alert / Toast) ---------- */
+.wp-alert {
+  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
+  border: 1px solid; border-radius: var(--wp-radius-md); font-size: 13px;
+}
+.wp-alert__icon { flex: none; display: flex; margin-top: 1px; }
+.wp-alert__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.wp-alert__title { font-weight: 700; }
+.wp-alert__actions { display: flex; gap: 8px; margin-top: 6px; }
+.wp-alert--info { background: var(--wp-status-info-bg); border-color: var(--wp-status-info-border); color: var(--wp-status-info-fg); }
+.wp-alert--success { background: var(--wp-status-success-bg); border-color: var(--wp-status-success-border); color: var(--wp-status-success-fg); }
+.wp-alert--warning { background: var(--wp-status-warning-bg); border-color: var(--wp-status-warning-border); color: var(--wp-status-warning-fg); }
+.wp-alert--danger { background: var(--wp-status-danger-bg); border-color: var(--wp-status-danger-border); color: var(--wp-status-danger-fg); }
+.wp-alert--neutral { background: var(--wp-status-neutral-bg); border-color: var(--wp-status-neutral-border); color: var(--wp-status-neutral-fg); }
+/*
+ * bar — 테두리를 왼쪽 색 막대 하나로 바꾼 페이지 배너 형태.
+ * 모서리를 각지게 펴고 나머지 세 변을 지워, 카드 안의 알림이 아니라 화면 폭을 가르는
+ * 공지로 읽히게 한다. 막대 색은 본문 글자색(currentColor)이다 — 톤 테두리색은
+ * 배경과 붙어 있어 막대로 쓰기엔 약하고, 이렇게 하면 톤별 규칙을 다섯 번 쓰지 않아도 된다.
+ */
+.wp-alert--bar { border-radius: 0; border-width: 0 0 0 3px; border-left-color: currentColor; }
+
+.wp-toast-region {
+  position: fixed; right: 20px; bottom: 20px; z-index: var(--wp-z-toast);
+  display: flex; flex-direction: column; gap: 10px; max-width: 380px;
+}
+.wp-toast {
+  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
+  background: var(--wp-slate-900); color: var(--wp-white);
+  border-radius: var(--wp-radius-lg); box-shadow: var(--wp-shadow-lg); font-size: 13px;
+  animation: wp-toast-in 0.18s ease-out;
+}
+@keyframes wp-toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+.wp-toast__icon { flex: none; display: flex; margin-top: 1px; }
+.wp-toast--info .wp-toast__icon { color: var(--wp-blue-200); }
+.wp-toast--success .wp-toast__icon { color: var(--wp-green-200); }
+.wp-toast--warning .wp-toast__icon { color: var(--wp-gold-200); }
+.wp-toast--danger .wp-toast__icon { color: var(--wp-red-200); }
+.wp-toast__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.wp-toast__title { font-weight: 700; }
+.wp-toast__text { color: rgba(255, 255, 255, 0.85); }
+.wp-toast__x { background: none; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 0; display: flex; }
+.wp-toast__x:hover { color: var(--wp-white); }
+
+/* ---------- 탭 ---------- */
+.wp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--wp-border-subtle); }
+.wp-tab {
+  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
+  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
+  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--wp-text-muted); cursor: pointer;
+  transition: color 0.12s, border-color 0.12s;
+}
+.wp-tab:hover { color: var(--wp-text-default); }
+.wp-tab[aria-selected='true'] { color: var(--wp-text-brand); border-bottom-color: var(--wp-accent); }
+.wp-tabs--lg .wp-tab { height: 42px; font-size: 14px; }
+.wp-tab__count {
+  font-size: 11px; font-weight: 700; padding: 1px 6px;
+  background: var(--wp-slate-100); border-radius: var(--wp-radius-full); color: var(--wp-text-muted);
+}
+
+/* ---------- 테이블 ---------- */
+.wp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.wp-table th {
+  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
+  color: var(--wp-text-muted); text-transform: uppercase;
+  padding: 9px 12px; border-bottom: 1px solid var(--wp-border-default);
+  background: var(--wp-slate-25); white-space: nowrap;
+}
+.wp-table td { padding: 10px 12px; border-bottom: 1px solid var(--wp-border-subtle); vertical-align: middle; }
+.wp-table--dense td { padding: 6px 12px; }
+.wp-table--hover tbody tr:hover { background: var(--wp-surface-hover); }
+.wp-table__num { text-align: right; font-variant-numeric: tabular-nums; }
+.wp-table__mono { font-family: var(--wp-font-mono); font-size: 12px; }
+.wp-table__strong { font-weight: 600; color: var(--wp-text-strong); }
+
+/* ---------- 스탯 ---------- */
+.wp-stat { display: flex; flex-direction: column; gap: 4px; }
+.wp-stat__label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--wp-text-muted); }
+.wp-stat__value { font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--wp-text-strong); font-variant-numeric: tabular-nums; }
+.wp-stat--sm .wp-stat__value { font-size: 22px; }
+.wp-stat__unit { font-size: 14px; font-weight: 600; color: var(--wp-text-muted); margin-left: 4px; }
+.wp-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; }
+.wp-stat__delta--up { color: var(--wp-text-success); }
+.wp-stat__delta--down { color: var(--wp-text-danger); }
+.wp-stat__delta--flat { color: var(--wp-text-subtle); }
+
+/* ---------- 빈 상태 ---------- */
+.wp-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
+  padding: 48px 24px; text-align: center;
+}
+.wp-empty--tight { padding: 24px 16px; }
+.wp-empty__mark {
+  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
+  background: var(--wp-slate-100); color: var(--wp-text-subtle);
+  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
+}
+.wp-empty__title { font-size: 14px; font-weight: 700; color: var(--wp-text-strong); }
+.wp-empty__text { font-size: 12.5px; color: var(--wp-text-muted); max-width: 360px; }
+.wp-empty__actions { margin-top: 8px; display: flex; gap: 8px; }
+
+/* ---------- 스피너 / 프로그레스 ---------- */
+.wp-spinner {
+  width: 16px; height: 16px; flex: none; border-radius: 50%;
+  border: 2px solid var(--wp-slate-200); border-top-color: var(--wp-navy-600);
+  animation: wp-spin 0.7s linear infinite; display: inline-block;
+}
+.wp-spinner--sm { width: 12px; height: 12px; border-width: 2px; }
+.wp-spinner--lg { width: 24px; height: 24px; border-width: 3px; }
+@keyframes wp-spin { to { transform: rotate(360deg); } }
+
+.wp-progress { display: flex; flex-direction: column; gap: 5px; }
+/* showValue를 켜면 라벨 줄이 "라벨 … 값" 두 칸이 된다(라벨이 없으면 값만 오른쪽에). */
+.wp-progress__label { display: flex; align-items: baseline; gap: var(--wp-space-2); font-size: 12px; color: var(--wp-text-muted); }
+/* 값은 라벨과 같은 무게로 흐리게 둔다 — 눈에 먼저 걸려야 하는 것은 막대 자체다. */
+.wp-progress__value { margin-left: auto; flex: none; text-align: right; }
+.wp-progress__track { height: 6px; background: var(--wp-slate-100); border-radius: var(--wp-radius-full); overflow: hidden; }
+.wp-progress__fill { height: 100%; border-radius: var(--wp-radius-full); transition: width 0.25s; }
+.wp-progress__fill--brand { background: var(--wp-navy-600); }
+.wp-progress__fill--success { background: var(--wp-green-600); }
+.wp-progress__fill--warning { background: var(--wp-gold-600); }
+.wp-progress__fill--danger { background: var(--wp-red-600); }
+/* info — 브랜드 네이비와 헷갈리지 않게 시그널 블루 쪽을 쓴다. */
+.wp-progress__fill--info { background: var(--wp-blue-600); }
+
+/* ---------- 페이지네이션 ---------- */
+.wp-pager { display: flex; align-items: center; gap: 4px; width: 100%; }
+.wp-pager__pages { display: flex; gap: 2px; }
+.wp-pager__page {
+  min-width: 28px; height: 28px; padding: 0 6px; border: none; background: none;
+  border-radius: var(--wp-radius-md); font-family: inherit; font-size: 12.5px; font-weight: 600;
+  color: var(--wp-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
+}
+.wp-pager__page:hover:not(:disabled) { background: var(--wp-slate-100); color: var(--wp-text-default); }
+.wp-pager__page[aria-current] { background: var(--wp-navy-600); color: var(--wp-white); }
+.wp-pager__page:disabled { color: var(--wp-text-disabled); cursor: not-allowed; }
+.wp-pager__gap { color: var(--wp-text-subtle); padding: 0 4px; }
+
+/* ---------- 다이얼로그 ---------- */
+.wp-overlay {
+  position: absolute; inset: 0; background: var(--wp-surface-overlay);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding: 9vh 20px 20px; overflow-y: auto;
+}
+.wp-dialog {
+  width: 480px; max-width: 100%; background: var(--wp-surface-card);
+  border-radius: var(--wp-radius-lg); box-shadow: var(--wp-shadow-lg);
+  display: flex; flex-direction: column; max-height: 82vh;
+  animation: wp-dialog-in 0.16s ease-out;
+}
+@keyframes wp-dialog-in {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+  to { opacity: 1; transform: none; }
+}
+.wp-dialog--sm { width: 380px; }
+.wp-dialog--lg { width: 680px; }
+.wp-dialog--xl { width: 880px; }
+.wp-dialog__head {
+  display: flex; align-items: center; gap: 10px;
+  padding: 16px 20px; border-bottom: 1px solid var(--wp-border-subtle);
+}
+.wp-dialog__mark {
+  width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center;
+  background: var(--wp-navy-600); color: var(--wp-white);
+  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
+}
+.wp-dialog__mark--danger { background: var(--wp-red-600); }
+.wp-dialog__title { font-size: 15px; font-weight: 700; color: var(--wp-text-strong); }
+.wp-dialog__sub { font-size: 12px; color: var(--wp-text-muted); margin-top: 1px; }
+.wp-dialog__body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--wp-space-4); }
+.wp-dialog__foot {
+  display: flex; justify-content: flex-end; gap: var(--wp-space-2);
+  padding: 14px 20px; border-top: 1px solid var(--wp-border-subtle);
+}