/* --------------------------------------------------
	위대한 대한인민과 대한민국을 위하여 복무함!
   -------------------------------------------------- */

:root {
  /* brand */
  --brand: #1a73e8;
  --brand-600: #155cc0;
  --brand-700: #0f47a1;

  /* neutral */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --line: #e6e8ec;
  --text: #1f2328;
  --text-2: #4b5563;
  --muted: #6b7280;

  /* states */
  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;

  /* radius & shadow */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 6px 24px rgba(0,0,0,.08);

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}

/* Dark theme */
:root[data-theme="dark"] {
  --bg: #0b0e12;
  --surface: #12161b;
  --surface-2: #0f1318;
  --line: #21262d;
  --text: #e6edf3;
  --text-2: #c5d1df;
  --muted: #9aa7b5;
  --brand: #69a7ff;
  --brand-600: #4d88e0;
  --brand-700: #3a6fc2;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 10px 30px rgba(0,0,0,.6);
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { position: static; width: auto; height: auto; padding: var(--space-2); background: var(--surface); }

.container { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
.content { display: block; }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); }
.brand a { font-weight: 800; font-size: 18px; color: var(--text); text-decoration: none; }
.nav { display: flex; gap: var(--space-3); }
.nav__link { color: var(--text-2); text-decoration: none; padding: 8px 10px; border-radius: var(--r-sm); }
.nav__link:hover { background: var(--surface-2); color: var(--text); }
.nav__link.is-active { background: var(--surface-2); color: var(--text); font-weight: 600; }
.actions { display: flex; align-items: center; gap: var(--space-3); }
.user { font-weight: 600; color: var(--text); }

/* Stacks & layout helpers */
.stack { display: grid; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 960px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* Cards & panels */
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--space-5); }
.card--hover:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); transition: all .18s ease; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; font-weight: 600; }
.btn:hover { background: var(--surface-2); }
.btn:focus { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.btn--primary { background: var(--brand); color: #fff; border-color: transparent; }
.btn--primary:hover { background: var(--brand-600); }
.btn--danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn--ghost { background: transparent; }
.btn--sm { padding: 6px 10px; border-radius: var(--r-sm); font-size: 14px; }

/* Forms */
label { display:block; margin: 10px 0 6px; font-weight: 600; color: var(--text-2); }
input, textarea, select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.btn, button, input, textarea, select { font-family: inherit; }
.form__row { display:grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 960px) { .form__row { grid-template-columns: 1fr; } }

/* Tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.table th, .table td { padding: 12px 14px; text-align: left; }
.table thead th { background: var(--surface-2); color: var(--text); border-bottom: 1px solid var(--line); font-size: 14px; }
.table tbody tr + tr td { border-top: 1px solid var(--line); }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); }
.badge--ok { background: #e8f9ee; color: var(--success); border-color: rgba(22,163,74,.2); }
.badge--warn { background: #fff7e8; color: var(--warning); border-color: rgba(217,119,6,.25); }
.badge--danger { background: #ffebee; color: var(--danger); border-color: rgba(220,38,38,.25); }

/* Alerts */
.alert { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface-2); }
.alert--success { border-color: rgba(22,163,74,.3); background: #e8f9ee; }
.alert--warning { border-color: rgba(217,119,6,.3); background: #fff7e8; }
.alert--error { border-color: rgba(220,38,38,.3); background: #ffebee; }

/* Breadcrumbs */
.breadcrumbs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 14px; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs__sep { opacity: .5; }

/* Footer */
.footer { margin-top: 40px; border-top: 1px solid var(--line); background: var(--surface); }
.footer__inner { max-width: 1120px; margin: 0 auto; padding: 16px 20px; color: var(--muted); font-size: 14px; }

/* Home */
.nav-panel{border-top:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-2)}
.nav-cards{display:grid;gap:var(--space-3);padding:var(--space-4);grid-template-columns:1fr 1fr}
.nav-card{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);
          border-radius:var(--r-md);background:var(--surface-2);text-decoration:none;color:var(--text);box-shadow:var(--shadow-1)}
.nav-card:hover{background:var(--surface)}
.nav-panel-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;
                   padding:8px var(--space-4);border-top:1px solid var(--line);background:var(--surface)}
@media(min-width:960px){#navToggle{display:none}#navPanel{display:none!important}}
@media(max-width:959px){#navDesktop{display:none}}