/* The designer's theme (design_resource, 2026-10-12): these values override
   tokens.css, which still supplies what is not named here (--cat-*, --icon-*,
   --label-min, --s-10).
   - Plain :root for the dark theme, as in tokens.css, so the print block
     below (also :root, later in this file) still turns a dark console's
     printout light. :root[data-theme="dark"] would outrank it.
   - "Pretendard Variable" first: the family the bundled font declares
     (fonts/pretendardvariable-dynamic-subset.css). "Pretendard" alone
     matched nothing and fell back to Malgun Gothic.
   - --accent-on: what sits on the accent (the active menu item's icon). */
:root {
  color-scheme: dark;
  --font: "Pretendard Variable", "Pretendard", "맑은 고딕", "Malgun Gothic", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --bg: #020b25;
  --bg-wash: radial-gradient(900px 520px at 78% -10%, rgba(42, 87, 167, .18), transparent 68%);
  --chrome: #131a2b;
  --chrome-glass: rgba(19, 26, 43, .92);
  --surface: #04162e;
  --surface-2: #152137;
  --surface-3: #253a61;
  --surface-sunken: #06182a;
  --surface-hover: #0d2941;
  --surface-3-hover: #2e4775;

  --line: #192940;
  --line-strong: #203650;

  --text: #ffffff;
  --text-2: #c0cede;
  --text-3: #8398ae;

  --accent: #1765c7;
  --accent-hover: #2f86ed;
  --accent-ink: #ffffff;
  --accent-on: #ffffff;
  --accent-soft: rgba(33, 119, 220, .14);

  --ok: #43d98a;
  --ok-soft: rgba(18, 111, 63, .20);
  --info: #45adff;
  --info-soft: rgba(22, 97, 157, .20);
  --warn: #ffbd2c;
  --warn-soft: rgba(137, 96, 13, .20);
  --high: #ff9633;
  --high-soft: rgba(145, 73, 17, .20);
  --danger: #ff615b;
  --danger-soft: rgba(138, 45, 43, .20);
  --muted-soft: rgba(67, 82, 100, .22);

  --overlay: rgba(0, 8, 24, .62);

  --radius-sm: 5px;
  --radius: 7px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-1: 0 5px 10px rgba(12, 27, 110, .16);
  --shadow-2: 0 12px 30px rgba(0, 0, 0, .32);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, .45);
  --card-shadow: 0 10px 24px rgba(0, 0, 0, .12);

  --sidebar-w: 250px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 65px;
  --drawer-w: 520px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  /* 12 px is the smallest text the console sets (R27 W-5). */
  --t-xs: 12px;
  --t-sm: 12px;
  --t-md: 14px;
  --t-lg: 17px;
  --t-xl: 25px;
  --t-kpi: 34px;

  --dur-fast: .15s;
  --dur: .2s;
  --dur-slow: .28s;
  --ease: ease;
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fb;
  --bg-wash: radial-gradient(900px 520px at 78% -10%, rgba(55, 112, 208, .10), transparent 68%);
  --chrome: #ffffff;
  --chrome-glass: rgba(255, 255, 255, .92);
  --surface: #ffffff;
  --surface-2: #f5f8fc;
  --surface-3: #cddbee;
  --surface-sunken: #f1f5fa;
  --surface-hover: #edf3fa;
  --surface-3-hover: #d0e0f7;

  --line: #dce4ee;
  --line-strong: #c9d4e1;

  --text: #172033;
  --text-2: #4f6077;
  /* Text and badge colours clear WCAG AA (4.5:1) on white, on the sunken
     surface and on their own soft fill (R27 W-5). The design refresh
     (fc14eda) brought --text-3 back to ~3.5:1, undoing 26bf036; the status
     colours read at 3.2-4.2:1 as badge text. */
  --text-3: #5d6c80;

  --accent: #1765c7;
  --accent-hover: #0f56ad;
  --accent-ink: #ffffff;
  --accent-on: #ffffff;
  --accent-soft: rgba(23, 101, 199, .10);

  --ok: #13744a;
  --ok-soft: rgba(22, 131, 79, .10);
  --info: #1265b5;
  --info-soft: rgba(22, 119, 210, .10);
  --warn: #8f6000;
  --warn-soft: rgba(184, 121, 0, .11);
  --high: #a8501a;
  --high-soft: rgba(215, 104, 34, .10);
  --danger: #bf3a3a;
  --danger-soft: rgba(214, 69, 69, .10);
  --muted-soft: rgba(95, 111, 130, .10);

  --overlay: rgba(23, 32, 51, .28);
  --shadow-1: 0 4px 10px rgba(25, 48, 78, .06);
  --shadow-2: 0 12px 30px rgba(25, 48, 78, .12);
  --shadow-3: 0 18px 50px rgba(25, 48, 78, .18);
  --card-shadow: 0 8px 22px rgba(25, 48, 78, .06);
}

/* tokens.css turns motion off for those who ask for it; the durations above
   come later and would turn it back on. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}

/* MINOSS shell treatment */
.sidebar {
  background:
    linear-gradient(180deg, rgba(36, 49, 87, 1) 0%, rgba(19, 26, 43, 1) 25%);
}
:root[data-theme="light"] .sidebar {
  background: #ffffff;
  border-right-color: var(--line);
}
.brand {
  position: relative;
  border-bottom: 1px solid #16263e;
  z-index: 8;
}
:root[data-theme="light"] .brand {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 22px rgba(25, 48, 78, .1);
}

:root[data-theme="dark"] .brand {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
}


.brand-name { color: #ffffff; }
:root[data-theme="light"] .brand-name { color: var(--text); }

.nav-group { color: #7991bf; }
:root[data-theme="light"] .nav-group { color: var(--text-3); }

:root[data-theme="light"] .nav a { color: var(--text-2); }
:root[data-theme="light"] .nav a svg { color: var(--text-3); }
:root[data-theme="light"] .nav a:hover { background: #eaf1fb; color: var(--text); }
:root[data-theme="light"] .nav a:hover svg { color: var(--accent); }
:root[data-theme="light"] .nav a.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(23, 101, 199, .18);
}
:root[data-theme="light"] .nav a.active svg { color: var(--accent-on); }

.sidebar-foot { border-top-color: #1d3251; }
:root[data-theme="light"] .sidebar-foot { border-top-color: var(--line); }

.topbar {
  background:
    linear-gradient(90deg, rgba(36, 49, 87, .98) 0%, rgba(19, 26, 43, .96) 25%);
  border-bottom: 1px solid #16263e;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .22);
}
:root[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 22px rgba(25, 48, 78, .1);
}

.main { background: var(--bg-wash), var(--bg); }
.page { max-width: 100%; padding: 30px; }
.page-head { margin-bottom: 30px; }
.page-head h1 { font-size: 25px; font-weight: 900; }
.page-head .lead { color: var(--text-2); font-size: 15px; }

@media (max-width: 860px) {
  .page { padding: 20px; }
}
@media (max-width: 600px) {
  .page { padding: 16px 12px 28px; }
}

/* Base: reset, type, and the frame every screen sits in. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: var(--t-xl); line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--t-lg); line-height: 1.35; }
h3 { font-size: var(--t-md); line-height: 1.4; }
h4 { font-size: var(--t-sm); line-height: 1.4; color: var(--text-2); }
p { margin: 0; }

.num, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.text-danger { color: var(--danger); }
.small { font-size: var(--t-sm); }
.xsmall { font-size: var(--t-xs); }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::selection { background: var(--accent-soft); }

/* Scrollbars that belong to the page rather than the operating system. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* ---------------------------------------------------------------- shell */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  /* The middle row is the licence notice: no height when there is none. */
  grid-template-rows: var(--topbar-h) auto minmax(0, 1fr);
  grid-template-areas: "side top" "side notice" "side main";
  height: 100vh;
  /* A phone's own toolbars come and go; the visible height, where known. */
  height: 100dvh;
  transition: grid-template-columns var(--dur-slow) var(--ease);
}
.shell.collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }

.sidebar {
  grid-area: side;
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  min-width: 0;
  overflow: hidden;
}
.brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.brand img { flex: none; filter: drop-shadow(0 2px 8px rgba(116, 103, 240, 0.35)); }
.brand-name { font-weight: 800; font-size: var(--t-md); letter-spacing: 0.01em; }
.brand-sub { font-size: var(--t-xs); color: var(--text-3); }

.nav { 
  flex: 1; padding: var(--s-2) var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; 
}

:root[data-theme="dark"] .nav {
  background: #243157;
  background: -webkit-linear-gradient(180deg, rgba(36, 49, 87, 1) 0%, rgba(19, 26, 43, 1) 25%);
  background: -moz-linear-gradient(180deg, rgba(36, 49, 87, 1) 0%, rgba(19, 26, 43, 1) 25%);
  background: linear-gradient(180deg, rgba(36, 49, 87, 1) 0%, rgba(19, 26, 43, 1) 25%);
}


/* A section of the menu: what is happening, what to act on, the console. */
.nav-group {
  padding: var(--s-4) var(--s-3) var(--s-1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
  user-select: none;
}
.nav-group:first-child { padding-top: var(--s-2); }
.nav a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 36px;
  padding: 0 var(--s-3);
  border-radius: var(--radius);
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav a svg { color: var(--text-3); transition: color var(--dur-fast) var(--ease); }
:root[data-theme="dark"] .nav a:hover { background: #21345e; color: var(--text); }
.nav a:hover svg { color: var(--text-2); }
.nav a.active { background: var(--accent) !important; color: var(--text); font-weight: 600; }
.nav a.active svg { color: var(--accent-on); }
.nav a.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.nav a svg { flex: none; }
.nav .badge-dot {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* A request filed since this browser last opened the queue: said, not hinted. */
.nav .badge-dot.new {
  background: var(--danger);
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: badge-new 2.4s ease-out infinite;
}
@keyframes badge-new {
  0% { box-shadow: 0 0 0 0 var(--danger-soft); }
  60% { box-shadow: 0 0 0 7px var(--danger-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .nav .badge-dot.new { animation: none; }
}
.sidebar-foot {
  padding: var(--s-3) var(--s-2);
  border-top: 1px solid var(--line);
}
/* The console's version, under the menu: outside .sidebar-foot so the
   phone's menu panel, which hides the foot, still shows it. */
.sidebar-version {
  padding: var(--s-2) var(--s-5);
  font-size: var(--t-xs);
  color: var(--text-3);
  white-space: nowrap;
  user-select: text;
}
.shell.collapsed .sidebar-version { display: none; }
.collapse-toggle {
  width: 100%;
  justify-content: flex-start;
  gap: var(--s-3);
  color: var(--text-3);
}
/* Folded, a section label becomes a thin rule between the groups. */
.shell.collapsed .nav-group { font-size: 0; padding: var(--s-2) var(--s-3); }
.shell.collapsed .nav-group::after { content: ""; display: block; height: 1px; background: var(--line); }
.shell.collapsed .nav-group:first-child { display: none; }
.shell.collapsed .nav-label,
.shell.collapsed .brand-text,
.shell.collapsed .badge-dot,
.shell.collapsed .collapse-label { display: none; }
.shell.collapsed .nav a { justify-content: center; padding: 0; }
/* Folded menu: the count sits on the icon's corner instead of the row's end. */
.shell.collapsed .nav .badge-dot { display: inline-flex; position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
/* Folded, NEW is a red dot on the icon; the count is in its tooltip. */
.shell.collapsed .nav .badge-dot.new { font-size: 0; min-width: 10px; width: 10px; height: 10px; padding: 0; top: 6px; right: 6px; }
.shell.collapsed .brand { justify-content: center; padding: 0; }
.shell.collapsed .collapse-toggle { justify-content: center; }
.shell.collapsed .collapse-toggle svg { transform: rotate(180deg); }

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-6);
  background: var(--chrome-glass);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  min-width: 0;
  position: relative;
  z-index: 6;
}
.topbar .crumb { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--text); white-space: nowrap; }
.topbar .crumb a { color: var(--text-2); font-weight: 500; }
.topbar .crumb a:hover { color: var(--text); text-decoration: none; }
.topbar .crumb-sep { color: var(--text-3); font-weight: 400; }
.topbar .spacer { flex: 1; }

/* The phone's menu: a button in the title bar opens the sidebar as a panel
   over the screen, with a shade behind it. Neither exists on a wide window. */
.menu-toggle, .nav-scrim { display: none; }
/* The phone's menu is closed most of the time: its button carries the NEW. */
.menu-toggle { position: relative; }
.menu-toggle.has-new::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

@media (max-width: 860px) {
  .shell, .shell.collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "notice" "main";
  }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 46;
    width: min(280px, 84vw);
    border-right: 1px solid var(--line-strong);
    box-shadow: var(--shadow-3);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .shell.nav-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: var(--overlay);
    animation: fade-in var(--dur) var(--ease);
  }
  .shell.nav-open .nav-scrim { display: block; }
  /* The folded menu is a wide-window choice; the panel always has words. */
  .sidebar-foot { display: none; }
  .shell.collapsed .sidebar-version { display: block; }
  .shell.collapsed .nav-label { display: inline; }
  .shell.collapsed .brand-text { display: block; }
  .shell.collapsed .nav .badge-dot { display: inline-flex; position: static; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
  .shell.collapsed .nav a { justify-content: flex-start; padding: 0 var(--s-3); }
  .shell.collapsed .brand { justify-content: flex-start; padding: 0 var(--s-5); }
  .nav a { height: 44px; }

  .menu-toggle { display: inline-flex; flex: none; margin-left: calc(-1 * var(--s-2)); }
  .topbar { gap: var(--s-2); padding: 0 var(--s-3); }
  .topbar .crumb { min-width: 0; overflow: hidden; }
  .topbar .crumb > * { flex: none; }
  .topbar .crumb > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar > .health, .topbar > .help-link, .topbar > .account { flex: none; }
}

/* A phone: the title bar keeps its marks and drops their words. */
@media (max-width: 600px) {
  .topbar { gap: var(--s-1); padding: 0 var(--s-2) 0 var(--s-3); }
  .topbar .health-text, .topbar .account-text, .topbar .account > svg { display: none; }
  .topbar .health { padding: 0 var(--s-2); }
  .topbar .account { padding: 0 var(--s-1); }
  /* The crumb's last part is the page's own title, shown just below it; what
     is left is the way back up ("‹ 정책"). */
  .topbar .crumb > :last-child:not(:first-child),
  .topbar .crumb > .crumb-sep:nth-last-child(2) { display: none; }
  .topbar .crumb > a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar .crumb > a::before { content: "‹"; margin-right: var(--s-1); }
}

/* The licence ending or ended, under the title bar on every screen. */
.license-notice {
  grid-area: notice;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-2) var(--s-6);
  border-bottom: 1px solid var(--line);
  background: var(--warn-soft);
  color: var(--text);
  font-size: var(--t-sm);
}
.license-notice svg { flex: none; color: var(--warn); }
.license-notice.danger { background: var(--danger-soft); }
.license-notice.danger svg { color: var(--danger); }
.license-notice .license-notice-text { flex: 1 1 320px; min-width: 0; }
.license-notice a { font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) {
  .license-notice { padding: var(--s-2) var(--s-3); }
}

.main {
  grid-area: main;
  overflow: auto;
  min-width: 0;
  position: relative;
  background: var(--bg-wash), var(--bg);
  box-shadow: inset 0px 0px 20px rgba(25, 48, 78, .1);
}

@media only screen and (min-width: 0px) and (max-width: 860px) {
  .main {
    box-shadow: none;
  }
}

.page {
  padding: var(--s-8) var(--s-8) var(--s-12);
  max-width: 1600px;
  margin: 0 auto;
}
.page.fill {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--s-4);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.page-head .lead { margin-top: 6px; color: var(--text-2); font-size: var(--t-md); max-width: 760px; }
.page-head .actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack.tight { gap: var(--s-2); }
.stack.loose { gap: var(--s-6); }
.row { display: flex; align-items: center; gap: var(--s-2); }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.tight { gap: var(--s-1); }
.grow { flex: 1; min-width: 0; }

.grid { display: grid; gap: var(--s-4); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* Korean breaks between words, not inside one, once lines are short; a
     word longer than its line still breaks rather than overflowing. */
  body { word-break: keep-all; overflow-wrap: break-word; }
  .page { padding: var(--s-4); }
  /* The title over its actions once both no longer fit on one line. */
  .page-head { flex-wrap: wrap; align-items: flex-start; }
  .page-head > :first-child { flex: 1 1 240px; min-width: 0; }
}
/* Below 860px the menu leaves the side (it opens over the screen), so a
   tablet keeps two columns; a phone has room for one. */
@media (max-width: 600px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .page { padding: var(--s-4) var(--s-3) var(--s-8); }
  .page-head { margin-bottom: var(--s-4); }
}

/* ---------------------------------------------------------------- login */

/* Sign-in: on a wide screen the product beside the form; on a narrow one the
   form alone. */
.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, 1fr);
  background:
    radial-gradient(900px 460px at 70% -10%, var(--accent-soft) 0%, transparent 70%),
    var(--bg);
  overflow: auto;
}
body.signed-out { overflow: auto; }
.login-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-12) clamp(32px, 6vw, 88px);
  color: #eef0ff;
  overflow: hidden;
  /* The brand panel keeps its own colours in either theme. */
  background:
    radial-gradient(700px 420px at 10% 0%, rgba(140, 126, 255, 0.45), transparent 65%),
    radial-gradient(600px 520px at 100% 100%, rgba(46, 196, 182, 0.18), transparent 60%),
    linear-gradient(160deg, #1b1747 0%, #0e1230 55%, #0a0d1f 100%);
}
.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
  pointer-events: none;
}
.login-hero > * { position: relative; }
.login-hero-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.login-hero-title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.3; font-weight: 750; letter-spacing: -0.03em; max-width: 560px; word-break: keep-all; }
.login-hero-sub { color: rgba(238, 240, 255, 0.78); font-size: var(--t-lg); line-height: 1.65; max-width: 520px; word-break: keep-all; }
.login-hero-points { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.login-hero-points li { display: flex; align-items: center; gap: var(--s-3); color: rgba(238, 240, 255, 0.9); font-size: var(--t-md); word-break: keep-all; }
.login-hero-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #c9c2ff;
  background: rgba(140, 126, 255, 0.18);
  border: 1px solid rgba(140, 126, 255, 0.28);
}
.login-side { display: grid; place-items: center; align-content: center; padding: var(--s-8) var(--s-6); }
.login-card {
  width: min(380px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-2);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.login-card button.primary { height: 40px; font-size: var(--t-md); }
.login-card input:not([type="checkbox"]) { height: 40px; }
.login-brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.login-brand .name { font-weight: 800; font-size: var(--t-lg); letter-spacing: 0.01em; }
.login-foot { text-align: center; color: var(--text-3); font-size: var(--t-xs); margin-top: var(--s-4); }
@media (max-width: 960px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-hero { display: none; }
}

@media (max-width: 600px) {
  .login { padding: var(--s-4) var(--s-3); }
  .login-card { padding: var(--s-6) var(--s-5); }
}

/* A page of settings reads down one column, not across the window. */
.page.narrow { max-width: 880px; }
.grid > .span-2 { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- print */

/* Printing a screen (데이터 흐름's 보고서 인쇄, or the browser's own Print)
   prints the page, not the frame: no menu, no title bar, no buttons, every
   card instead of the first viewport's worth, and dark text on white
   whatever theme the console wears. The period report has its own rules
   (report.css) while it is open. */
@media print {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --chrome: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-sunken: #f2f4f7;
    --surface-hover: #f7f9fc;
    --line: #dfe4ec;
    --line-strong: #c6cede;
    --text: #12161f;
    --text-2: #4d566a;
    --text-3: #5a6480;
    --accent: #5b4fe0;
    --accent-on: #f5f5f5;
    --accent-hover: #4c3fe0;
    --accent-soft: rgba(116, 103, 240, 0.1);
    --ok: #1a7f4b;
    --ok-soft: rgba(26, 127, 75, 0.12);
    --info: #2563eb;
    --info-soft: rgba(37, 99, 235, 0.1);
    --warn: #b57200;
    --warn-soft: rgba(181, 114, 0, 0.12);
    --high: #d65d29;
    --high-soft: rgba(214, 93, 41, 0.12);
    --danger: #d33a3a;
    --danger-soft: rgba(211, 58, 58, 0.1);
    --muted-soft: rgba(90, 101, 121, 0.1);
    --cat-3: #1a9484;
    --cat-4: #9b51e0;
    --cat-5: #d97706;
    --cat-6: #64748b;
    --cat-7: #c2410c;
    --cat-8: #4d7c0f;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
  }
  html, body, #app, .shell, .main { height: auto !important; overflow: visible !important; }
  body { background: #ffffff; }
  .shell { display: block; }
  .sidebar, .topbar, .page-head .actions, .toasts, .progress { display: none !important; }
  .page, .page.fill { padding: 0; max-width: none; height: auto; }
  .page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card, .kpi, .rank-row { break-inside: avoid; }
}