:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;

  --color-bg: #f1f3f7;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f7fa;
  --color-border: #e1e5eb;
  --color-border-strong: #c7cedb;

  --color-text: #0f1d2e;
  --color-text-muted: #5b6678;
  --color-text-faint: #8891a0;

  --color-primary: #16324f;
  --color-primary-hover: #0f243a;
  --color-accent: #2f6fed;
  --color-accent-soft: #e8f0fe;

  --color-success: #0f7a4e;
  --color-success-bg: #e3f6ec;
  --color-info: #1f5fc9;
  --color-info-bg: #e8f0fe;
  --color-warning: #9a6400;
  --color-warning-bg: #fbf0da;
  --color-neutral: #4b5565;
  --color-neutral-bg: #eceff3;
  --color-purple: #6a3fc9;
  --color-purple-bg: #efe8fc;
  --color-danger: #a23636;
  --color-danger-bg: #fbe9e9;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(15, 29, 46, .06);
  --shadow-md: 0 4px 16px rgba(15, 29, 46, .08);

  font: 15px/1.55 var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  min-height: 60px; gap: 12px;
  background: var(--color-primary);
  padding: 10px max(18px, calc((100% - 1080px) / 2));
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 10px; color: white; font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: -.01em; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--color-accent); color: white; font-weight: 800; font-size: 14px;
}
.topbar-user { display: flex; align-items: center; gap: 10px; color: white; }
.user-name { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .92); }

main { max-width: 1080px; margin: auto; padding: 24px 18px 56px; }

/* Notice / alerts */
#notice { margin: 0 0 16px; min-height: 0; }
#notice:not(:empty) {
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--color-danger-bg); color: var(--color-danger);
  font-size: 13.5px; font-weight: 600;
}
#notice.notice-success:not(:empty) { background: var(--color-success-bg); color: var(--color-success); }

/* Cards / sections */
section, .card {
  margin: 0 0 16px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
h1 { font-size: 21px; margin: 0 0 18px; letter-spacing: -.02em; color: var(--color-text); }
h2 {
  font-size: 15px; margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 700; letter-spacing: -.01em; color: var(--color-text);
}
h3 { font-size: 14.5px; margin: 0 0 6px; }
section > * + *, .card > * + * { margin-top: 16px; }

/* Buttons */
button {
  font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong);
  padding: 9px 16px; background: var(--color-surface); color: var(--color-text);
  transition: background .12s ease, border-color .12s ease;
  line-height: 1.2;
}
button:hover { background: var(--color-surface-muted); }
button:disabled { opacity: .55; cursor: not-allowed; }
form button:not([type="button"]), .btn-primary {
  color: white; background: var(--color-primary); border-color: var(--color-primary);
}
form button:not([type="button"]):hover, .btn-primary:hover { background: var(--color-primary-hover); }
form button[type="button"] {
  background: var(--color-surface-muted); color: var(--color-text-muted); font-weight: 600;
}
form button[type="button"]:hover { background: var(--color-neutral-bg); color: var(--color-text); }
.btn-ghost {
  background: transparent; border-color: rgba(255, 255, 255, .35); color: white;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* Forms */
form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.field-row { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
form.form-stack { flex-direction: column; align-items: flex-start; }
form.form-stack .quote-line { width: 100%; }
label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
button, select, input, textarea {
  font: inherit; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  padding: 9px 11px; background: var(--color-surface); color: var(--color-text);
}
input, select, textarea { font-size: 13.5px; min-height: 38px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
input { width: 11em; }
textarea { width: min(100%, 32rem); min-height: 84px; resize: vertical; }

/* Data display: table-style rows */
.table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--color-text-faint);
  padding: 0 10px 10px; border-bottom: 1px solid var(--color-border);
}
.table td { padding: 12px 10px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--color-surface-muted); }
.table .cell-main { font-weight: 600; }
.table .cell-muted { color: var(--color-text-muted); }
.table .cell-actions { text-align: right; white-space: nowrap; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-neutral); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-purple { background: var(--color-purple-bg); color: var(--color-purple); }
.badge-role { background: rgba(255, 255, 255, .16); color: white; }

/* Empty state */
.empty-state { color: var(--color-text-faint); font-size: 13.5px; padding: 8px 0; }

/* Entries / records (orders, partners) */
.record { border-bottom: 1px solid var(--color-border); padding: 16px 0; }
.record:first-child { padding-top: 2px; }
.record:last-child { border-bottom: none; padding-bottom: 2px; }
.record-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.record-meta { color: var(--color-text-muted); font-size: 13px; margin: 2px 0; }
.order-memo { white-space: pre-wrap; font-size: 13.5px; color: var(--color-text-muted); }
.record form { margin-top: 10px; }
.record form + form { margin-top: 8px; }
.quote-line { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 8px 0; }

/* Auth screen */
#auth {
  display: grid; gap: 16px; max-width: 420px; margin: 40px auto 0;
}
#auth h2 { text-align: left; }
.auth-tabs {
  display: flex; gap: 4px; background: var(--color-surface-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 4px;
}
.auth-tabs button {
  flex: 1; border: none; background: transparent; color: var(--color-text-muted);
  border-radius: var(--radius-sm); padding: 9px 12px;
}
.auth-tabs button:hover { background: var(--color-surface); }
.auth-tabs button.active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }

/* Dashboard tab navigation */
.dash-tabs {
  display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.dash-tabs button {
  border: none; background: transparent; color: var(--color-text-muted); white-space: nowrap;
  padding: 10px 16px; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-weight: 600; font-size: 13.5px;
}
.dash-tabs button:hover { color: var(--color-text); background: var(--color-surface-muted); }
.dash-tabs button.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

@media (max-width: 640px) {
  .topbar { padding: 10px 14px; }
  main { padding: 16px 14px 48px; }
  section, .card { padding: 16px; }
  input { width: 100%; }
  form { align-items: stretch; }
}