/**
 * 모듈 공통 디자인 토큰 · 최소 리셋.
 * 페이지별 2열/그리드 레이아웃은 각 HTML 전용 클래스에서만 정의합니다.
 * (일반 `.grid` 규칙을 두면 pawn 등 페이지 레이아웃과 충돌할 수 있음.)
 */
:root {
  --ink: #0f172a;
  --line: #e5e7eb;
  --accent: #0ea5e9;
  --primary: #175e7d;
  --primary-hover: #134a63;
  --muted-light: #94a3b8;
  /* Vaulten spacing scale (modules + my page rhythm) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-gap: 14px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-page: 48px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Vaulten buttons (Staff modules — Sales/Cashbook/Admin pattern) */
.btn,
button.btn,
.btn-primary,
button.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-gap);
  border-radius: var(--radius-md);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover:not(:disabled),
button.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}

.btn:disabled,
button.btn:disabled,
.btn-primary:disabled,
button.btn-primary:disabled {
  background: var(--muted-light);
  border-color: var(--muted-light);
  color: #fff;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary outline (neutral) */
.btn.secondary,
button.btn.secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.btn.secondary:hover:not(:disabled),
button.btn.secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--ink);
}

/* Destructive secondary (Admin .btn.ghost) */
.btn.ghost,
button.btn.ghost {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}

.btn.ghost:hover:not(:disabled),
button.btn.ghost:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.btn-sm,
.btn.btn-sm,
.btn-primary.btn-sm,
.btn.secondary.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
}

/* Vaulten cards (Pawn / Gold / my page tdv-panel rhythm) */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-gap);
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.card--compact {
  padding: var(--spacing-lg) var(--spacing-xl);
  margin-bottom: 0;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl) 0;
}

.card__head h2,
.card h2,
.card h3 {
  margin: 0 0 var(--spacing-sm);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card--flush .card__head {
  padding-bottom: 0;
}

/* Vaulten tables (my page tdv-staff-table / module list rhythm) */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.table,
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

table.table th,
table.table td,
.table th,
.table td {
  padding: var(--spacing-gap) var(--spacing-lg);
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}

table.table thead th,
.table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

table.table tbody tr:last-child td,
.table tbody tr:last-child td {
  border-bottom: none;
}

.table--hover tbody tr:hover td {
  background: #f8fafc;
}

.table--compact th,
.table--compact td {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.82rem;
}

.card--flush .table-wrap {
  border-top: 1px solid var(--line);
}

.table-empty,
td.table-empty {
  text-align: center;
  color: #64748b;
  padding: var(--spacing-3xl) var(--spacing-md) !important;
}

.table-td-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

.table-td-muted {
  color: #64748b;
}

/* Vaulten modals (native <dialog> — my page cust-dialog rhythm) */
dialog.modal,
.modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(520px, calc(100vw - 24px));
  width: calc(100% - 32px);
}

dialog.modal[open],
.modal[open]:not([open=""]) {
  display: block;
  margin: auto;
  position: fixed;
  inset: 0;
  height: fit-content;
  z-index: 10050;
}

dialog.modal::backdrop,
.modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.modal__panel {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--card-shadow), 0 20px 50px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--line);
}

.modal__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.modal__close {
  appearance: none;
  border: 0;
  background: #f1f5f9;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

.modal__close:hover {
  background: #e2e8f0;
}

.modal__body {
  padding: var(--spacing-lg) var(--spacing-xl);
  display: grid;
  gap: var(--spacing-md);
}

.modal__foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-gap) var(--spacing-xl) var(--spacing-lg);
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

body.modal-open {
  overflow: hidden;
}