/* ── Variables ── */
:root {
  --bg:      #f3f4f6;
  --white:   #ffffff;
  --border:  #e5e7eb;
  --text:    #111827;
  --text2:   #374151;
  --gray:    #6b7280;
  --blue:    #2563eb;
  --blue-d:  #1d4ed8;
  --blue-s:  #eff6ff;
  --red:     #dc2626;
  --red-s:   #fef2f2;
  --green:   #16a34a;
  --green-s: #f0fdf4;
  --r:       10px;
  --sh:      0 1px 3px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.05);
  --sw:      220px;
  --th:      52px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 15px; font-weight: 700; }
p  { margin: 0; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* ── Auth ── */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #1e40af, #3b82f6); padding: 24px 16px; }
.auth-card  { width: min(400px,100%); background: var(--white); border-radius: 16px; padding: 32px 24px; box-shadow: 0 8px 40px rgba(0,0,0,.18); }
.auth-logo  { font-size: 26px; font-weight: 900; color: var(--blue); letter-spacing: -.05em; text-align: center; margin-bottom: 4px; }
.auth-sub   { text-align: center; color: var(--gray); font-size: 13px; margin-bottom: 24px; }

/* ── Layout ── */
.layout { display: flex; flex-direction: column; min-height: 100vh; }

/* ── Sidebar (mobile: fixed off-screen, desktop: in-flow) ── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sw);
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 400;
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  flex-shrink: 0;
}
.sidebar.open { transform: translateX(0); }
.side-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 390; }
.side-backdrop.open { display: block; }

.sidebar-top   { padding: 20px 16px 14px; border-bottom: 1px solid var(--border); }
.sidebar-logo  { font-size: 20px; font-weight: 900; color: var(--blue); letter-spacing: -.04em; }
.sidebar-nav   { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-nav a { display: block; padding: 10px 12px; border-radius: var(--r); font-size: 14px; font-weight: 600; color: var(--text2); transition: background .12s, color .12s; }
.sidebar-nav a:hover { background: var(--blue-s); color: var(--blue); }
.sidebar-bottom { padding: 14px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.sidebar-user strong { display: block; font-size: 14px; font-weight: 700; }
.sidebar-user small  { display: block; font-size: 12px; color: var(--gray); margin-top: 2px; }

/* ── Body wrap (topbar + content) ── */
.body-wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* ── Topbar (mobile only) ── */
.topbar { position: sticky; top: 0; z-index: 200; height: var(--th); background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0; }
.menu-btn { width: 36px; height: 36px; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 6px; border-radius: 8px; flex-shrink: 0; }
.menu-btn span { display: block; width: 20px; height: 2px; background: var(--text2); border-radius: 2px; }
.topbar-logo { font-size: 17px; font-weight: 900; color: var(--blue); letter-spacing: -.04em; flex: 1; }
.topbar-user { font-size: 13px; color: var(--gray); }

/* ── Main content ── */
.main-content { flex: 1; padding: 20px 16px 40px; }

/* ── Desktop (≥768px) ── */
@media (min-width: 768px) {
  .layout { flex-direction: row; }
  .sidebar { position: sticky; top: 0; height: 100vh; transform: none; transition: none; }
  .side-backdrop { display: none !important; }
  .topbar { display: none; }
  .main-content { padding: 28px 32px; }
  h1 { font-size: 24px; }
  .metric-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 14px; }
  .grid-two    { grid-template-columns: repeat(2, 1fr) !important; }
  .check-grid  { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Flash ── */
.flash { margin-bottom: 14px; padding: 11px 14px; border-radius: var(--r); font-size: 14px; font-weight: 600; }
.flash-success { background: var(--green-s); color: var(--green); }
.flash-error   { background: var(--red-s);   color: var(--red); }
.flash-info    { background: var(--blue-s);  color: var(--blue-d); }

/* ── Card ── */
.card { background: var(--white); border-radius: 14px; box-shadow: var(--sh); overflow: hidden; }
.card + .card, .card-gap { margin-top: 14px; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.card-head h2 { font-size: 14px; }
.card-body { padding: 16px; }
.card-chip { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--blue-s); color: var(--blue); margin-left: auto; }
.card-chip-green { background: var(--green-s); color: var(--green); }
.card-chip-red   { background: var(--red-s);   color: var(--red); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--r); font-size: 14px; font-weight: 700; cursor: pointer; border: none; white-space: nowrap; transition: filter .12s, transform .1s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary   { background: var(--blue);   color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--blue-s); color: var(--blue); }
.btn-outline   { background: transparent; border: 1.5px solid var(--border); color: var(--text2); }
.btn-sm   { padding: 7px 13px; font-size: 13px; }
.btn-full { width: 100%; }
.primary-btn   { display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:var(--r);font-size:14px;font-weight:700;cursor:pointer;border:none;background:var(--blue);color:#fff; }
.secondary-btn { display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:var(--r);font-size:14px;font-weight:700;cursor:pointer;border:none;background:var(--blue-s);color:var(--blue); }
.ghost-btn     { display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;background:transparent;border:1.5px solid var(--border);color:var(--text2); }
.secondary-link { display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:var(--r);font-size:14px;font-weight:700;background:var(--blue-s);color:var(--blue); }
.primary-link  { display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:var(--r);font-size:14px;font-weight:700;background:var(--blue);color:#fff; }
.table-link    { color:var(--blue);font-weight:600;font-size:14px; }
.action-row    { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }

/* ── Forms ── */
.stack-form { display:flex;flex-direction:column;gap:14px;padding:16px; }
.stack-form.compact { margin-bottom:0; }
label span, .field-label { display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:5px; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], select, textarea { width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--r);background:#fff;color:var(--text);font-size:15px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none; }
input:focus, select:focus, textarea:focus { outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* ── Badge ── */
.badge { display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700; }
.badge-on, .badge-green { background:var(--green-s);color:var(--green); }
.badge-off, .badge-red  { background:var(--red-s);  color:var(--red); }
.badge-gray { background:#f3f4f6;color:var(--gray); }

/* ── Status list ── */
.status-list { display:flex;flex-direction:column; }
.status-list div { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px;gap:12px; }
.status-list div:last-child { border-bottom:none; }
.status-list span   { color:var(--gray); }
.status-list strong { font-weight:700;text-align:right;word-break:break-all; }

/* ── Center cards ── */
.center-cards { display:flex;flex-direction:column; }
.center-card  { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);transition:background .1s; }
.center-card:last-child { border-bottom:none; }
.center-card:hover, .center-card:active { background:var(--blue-s); }
.center-card strong { display:block;font-size:15px;font-weight:700; }
.center-card span   { display:block;font-size:12px;color:var(--gray);margin-top:1px; }
.center-card-arrow  { color:var(--gray);font-size:20px;font-weight:300;flex-shrink:0; }

/* ── Rider list ── */
.rider-list { display:flex;flex-direction:column; }
.rider-row  { display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border); }
.rider-row:last-child { border-bottom:none; }
.rider-avatar { width:40px;height:40px;border-radius:50%;background:var(--blue-s);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex-shrink:0; }
.rider-info { flex:1;min-width:0; }
.rider-name { font-size:15px;font-weight:700; }
.rider-meta { font-size:12px;color:var(--gray);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.list-empty { padding:32px 16px;text-align:center;color:var(--gray);font-size:14px; }

/* ── Search ── */
.search-bar     { display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border); }
.search-bar input { flex:1; }
.search-extras  { display:flex;gap:8px;padding:8px 16px 12px;border-bottom:1px solid var(--border); }
.search-extras input { flex:1;font-size:13px; }

/* ── Tabs ── */
.tab-bar { display:flex;border-bottom:1px solid var(--border); }
.tab-btn { flex:1;padding:13px 10px;font-size:14px;font-weight:700;color:var(--gray);border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s; }
.tab-btn.active { color:var(--blue);border-bottom-color:var(--blue); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Metrics ── */
.metric-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px; }
.metric-card { background:var(--white);border-radius:14px;box-shadow:var(--sh);padding:16px; }
.metric-label  { font-size:12px;color:var(--gray);font-weight:600;margin-bottom:6px;display:block; }
.metric-card strong { display:block;font-size:26px;font-weight:800;letter-spacing:-.04em; }
.metric-card small  { display:block;font-size:12px;color:var(--gray);margin-top:4px; }

/* ── Grid ── */
.grid-two { display:grid;grid-template-columns:1fr;gap:14px; }
.dashboard-grid, .admin-lower { align-items:start; }
.admin-lower { margin-top:14px; }
.card-span-2 { grid-column:1/-1; }
.card-gap-top { margin-top:14px; }
.form-card, .card-tall, .dashboard-compact { }

/* ── Table ── */
.table-wrap { width:100%;overflow-x:auto; }
.data-table { width:100%;border-collapse:collapse; }
.data-table th, .data-table td { padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;font-size:14px;vertical-align:middle; }
.data-table th { font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.04em; }
.empty-cell { text-align:center;color:var(--gray); }

/* ── Account cards (mobile) / table (desktop) ── */
.account-table { display: none; }
.account-cards { display: flex; flex-direction: column; }
.account-card  { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.account-card:last-child { border-bottom: none; }
.account-card-main { flex: 1; min-width: 0; }
.account-card-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.account-card-sub  { font-size: 12px; color: var(--gray); margin-top: 2px; }
.account-card-memo { font-size: 12px; color: var(--gray); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

@media (min-width: 768px) {
  .account-cards { display: none; }
  .account-table { display: block; overflow-x: auto; }
}

/* ── User / Account / Permission ── */
.user-panels { display:flex;flex-direction:column;gap:10px; }
.user-panel  { border:1px solid var(--border);border-radius:14px;background:var(--white);overflow:hidden; }
.user-panel header { display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg); }
.user-panel-body { padding:14px;display:flex;flex-direction:column;gap:10px; }
.account-list { list-style:none;display:flex;flex-direction:column; }
.account-list li a { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);font-size:14px;transition:background .1s; }
.account-list li:last-child a { border-bottom:none; }
.account-list li a:hover { background:var(--bg); }
.account-list li.active a { background:var(--blue-s);color:var(--blue); }
.permission-list { display:flex;flex-direction:column;gap:8px;padding:16px; }
.permission-row  { display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg); }
.permission-row input[type="checkbox"] { width:17px;height:17px;flex-shrink:0;accent-color:var(--blue); }
.permission-main { display:flex;align-items:center;gap:10px;flex:1;min-width:0; }
.check-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:14px 16px; }
.check-card { padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--bg);display:flex;flex-direction:column;gap:4px;font-size:13px; }
.check-card input { width:16px;height:16px;accent-color:var(--blue); }
.check-card code  { font-size:11px;color:var(--gray); }

/* ── Misc ── */
.center-list { list-style:none;display:flex;flex-direction:column;gap:8px;padding:16px; }
.center-list li { display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);font-size:14px; }
.muted { color:var(--gray); }
.error-text { color:var(--red);font-size:14px;font-weight:600;padding:10px 16px; }
.strong-code { font-family:ui-monospace,Consolas,monospace;font-size:13px;overflow-wrap:anywhere; }
.compact-status { border-top:1px solid var(--border); }
.page-topbar { margin-bottom:16px; }
.page-topbar h1 { font-size:20px;font-weight:800; }
.page-topbar .muted { font-size:13px;color:var(--gray);margin-top:2px; }
.topbar-pill { display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:var(--blue-s);color:var(--blue);font-size:12px;font-weight:700; }
.chip-wrap { display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px; }
.chip { padding:8px 12px;border-radius:var(--r);background:var(--bg);border:1px solid var(--border);font-size:13px; }
.chip code { display:block;color:var(--gray);font-size:11px;margin-top:2px; }
.checkbox-line { display:flex;align-items:center;gap:8px; }
.checkbox-line input { width:17px;height:17px;accent-color:var(--blue); }