@font-face {font-family:"NPL Noto Sans KR";src:url("/fonts/noto-sans-kr-variable.ttf?v=9e1d729e7e2b") format("truetype");font-weight:100 900;font-style:normal;font-display:swap;}
/* NPLdesk: Carbon palette, compact working surfaces.
   Light = Carbon Gray 10 (unchanged from R26). Dark = Carbon Gray 100.
   Every color below comes from these tokens; the head script in every page sets
   <html data-theme="light|dark"> from the 화면 picker (default light). The OS setting is not used. */
:root {
  color-scheme: light;
  /* surfaces */
  --bg: #f4f4f4;
  --surface: #ffffff;
  --hover: #e8e8e8;
  --card-hover: #fafafa;
  --row-hover: #f4f4f4;
  --field: #f4f4f4;
  --field-disabled: #e8e8e8;
  --th-bg: #e0e0e0;
  --tag-bg: #e0e0e0;
  --tag-on-field: #e0e0e0;
  --track: #e0e0e0;
  --disabled-bg: #e0e0e0;
  --overlay: rgb(22 22 22 / 45%);
  /* lines */
  --line: #e0e0e0;
  --line-mid: #c6c6c6;
  --line-strong: #8d8d8d;
  --line-hover: #393939;
  /* text */
  --text: #161616;
  --text-2: #393939;
  --muted: #525252;
  --helper: #6f6f6f;
  --placeholder: #6f6f6f;
  --disabled-text: #6f6f6f;
  /* interaction */
  --primary: #0f62fe;
  --primary-hover: #0353e9;
  --on-primary: #ffffff;
  --link: #0f62fe;
  --link-hover-bg: #edf5ff;
  --interactive: #0f62fe;
  --focus: #0f62fe;
  /* status */
  --danger: #da1e28;
  --danger-solid: #da1e28;
  --success: #198038;
  --warning: #8a3800;
  --ok-bg: #defbe6; --ok-text: #0e6027;
  --info-bg: #d0e2ff; --info-text: #0043ce;
  --warn-bg: #fff1e6; --warn-text: #8a3800;
  --err-bg: #fff1f1; --err-text: #a2191f;
  --info-soft: #edf5ff;
  --ok-line: #a7f0ba; --info-line: #a6c8ff; --warn-line: #ffb784; --err-line: #ffb3b8;
  --attention: #f1c21b;
  --divider: #e5e9ef;
  /* names older page styles still read */
  --teal: #0f62fe;
  --blue: #0f62fe;
  --amber: #8a3800;
  --red: #da1e28;
  --green: #198038;
}
:root[data-theme="dark"] {
  color-scheme: dark; background: var(--bg);
  --bg: #161616; --surface: #262626; --hover: #333333; --card-hover: #2c2c2c; --row-hover: #333333;
  --field: #393939; --field-disabled: #262626; --th-bg: #393939; --tag-bg: #393939; --tag-on-field: #525252; --track: #393939;
  --disabled-bg: #393939; --overlay: rgb(0 0 0 / 60%);
  --line: #393939; --line-mid: #525252; --line-strong: #6f6f6f; --line-hover: #a8a8a8;
  --text: #f4f4f4; --text-2: #e0e0e0; --muted: #c6c6c6; --helper: #a8a8a8; --placeholder: #8d8d8d; --disabled-text: #8d8d8d;
  --primary: #0f62fe; --primary-hover: #0353e9; --on-primary: #ffffff; --link: #78a9ff; --link-hover-bg: #001d6c;
  --interactive: #4589ff; --focus: #ffffff;
  --danger: #ff8389; --danger-solid: #da1e28; --success: #42be65; --warning: #ff832b;
  --ok-bg: #044317; --ok-text: #6fdc8c; --info-bg: #002d9c; --info-text: #a6c8ff;
  --warn-bg: #5e2900; --warn-text: #ffb784; --err-bg: #520408; --err-text: #ffb3b8;
  --info-soft: #001d6c; --ok-line: #198038; --info-line: #0043ce; --warn-line: #8a3800; --err-line: #a2191f;
  --attention: #f1c21b; --divider: #393939;
  --teal: #78a9ff; --blue: #78a9ff; --amber: #ff832b; --red: #ff8389; --green: #42be65;
}
body[data-page] {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body[data-page] *, body[data-page] *::before, body[data-page] *::after { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
body[data-page] .wrap { max-width: 1280px; margin: 0 auto; padding: 24px 24px 64px; }
body[data-page] > .site-top,
body[data-page]:not([data-page="admin"]) > .top { background: var(--surface); border-bottom: 1px solid var(--line); }
body[data-page] .topin, body[data-page] .site-topin {
  max-width: 1280px; min-height: 56px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
body[data-page="trade"] > .top { padding: 0; }
body[data-page] .brand { color: var(--text); font-size: 20px; font-weight: 600; letter-spacing: -.4px; text-decoration: none; }
body[data-page] .who, body[data-page] .site-meta { color: var(--muted); font-size: 12px; }
body[data-page] .tenant { color: var(--text-2); background: var(--bg); border: 0; border-radius: 0; padding: 4px 8px; }
body[data-page] h1 { margin: 0 0 20px; font-size: 24px; line-height: 1.35; font-weight: 600; letter-spacing: -.5px; }
body[data-page] h2 { font-weight: 600; line-height: 1.4; }
body[data-page] :is(.surface, .panel, .card) { background: var(--surface); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
body[data-page] .head { background: var(--surface); padding: 14px 16px; border-bottom: 1px solid var(--line); }
body[data-page] .head h2, body[data-page] h2.head { font-size: 15px; font-weight: 600; }
body[data-page] .body { padding: 16px; }
body[data-page] :is(.hint,.help,.sub,.note,.muted,.counter,.msg,.read,.timing,.price-help,.price-status) { color: var(--muted); }
body[data-page] :is(.hint,.help,.sub,.note) { line-height: 1.55; }
body[data-page] a:not(.brand):not(.button):not(.download-link) { color: var(--link); text-underline-offset: 3px; }
body[data-page] button:where(:not(.map-hotspot):not(.map-link)),
body[data-page] a.button, body[data-page] .download-link {
  min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 0;
  color: var(--text); background: var(--surface); font: inherit; font-size: 13px; line-height: 1.45;
  font-weight: 400; box-shadow: none; cursor: pointer; text-decoration: none;
}
body[data-page] button:where(:not(.map-hotspot):not(.map-link)):hover:not(:disabled),
body[data-page] a.button:hover, body[data-page] .download-link:hover { background: var(--hover); border-color: var(--line-hover); }
body[data-page] button.primary, body[data-page] button.go,
body[data-page="login"] button {
  color: var(--on-primary); background: var(--primary); border-color: var(--primary); font-weight: 500;
}
body[data-page] button.primary:hover:not(:disabled), body[data-page] button.go:hover:not(:disabled),
body[data-page="login"] button:hover:not(:disabled) { color: var(--on-primary); background: var(--primary-hover); border-color: var(--primary-hover); }
body[data-page] .download-link { color: var(--link); border-color: var(--link); }
body[data-page] .download-link:hover { color: var(--link); background: var(--link-hover-bg); border-color: var(--link); }
body[data-page] button.danger { color: var(--danger); background: var(--surface); border-color: var(--danger); }
body[data-page] button.danger:hover:not(:disabled) { color: var(--on-primary); background: var(--danger-solid); border-color: var(--danger-solid); }
body[data-page] button:disabled, body[data-page] button.primary:disabled, body[data-page] button.go:disabled {
  color: var(--disabled-text); background: var(--disabled-bg); border-color: var(--disabled-bg); opacity: 1; cursor: not-allowed;
}
body[data-page] .topin button, body[data-page] .topin a.button, body[data-page] .site-actions button,
body[data-page] button.small, body[data-page] .orderbar button, body[data-page] .order-moves button {
  min-height: 32px; padding: 5px 12px; font-size: 12px;
}
body[data-page] :is(input,select,textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])) {
  max-width: 100%; border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0; padding: 9px 12px; color: var(--text); background: var(--field);
  font-family: inherit; font-size: 14px; line-height: 1.45; box-shadow: none;
}
body[data-page] textarea { resize: vertical; }
body[data-page] :is(input,select):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])) { min-height: 40px; }
body[data-page] :is(input,textarea)::placeholder { color: var(--placeholder); opacity: 1; }
body[data-page] :is(input,select,textarea):disabled { color: var(--disabled-text); background: var(--field-disabled); border-color: var(--line-mid); opacity: 1; }
body[data-page] :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--interactive); flex: none; }
body[data-page] input[type="file"] { color: var(--text-2); font: inherit; font-size: 13px; max-width: 100%; }
body[data-page] input[type="file"]::file-selector-button {
  padding: 8px 12px; margin-right: 12px; border: 1px solid var(--line-strong); border-radius: 0;
  color: var(--text); background: var(--field); font: inherit; cursor: pointer;
}
body[data-page] :is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
body[data-page] :is(input,select,textarea):focus { border-color: var(--focus); }
body[data-page] .field label, body[data-page] label.field { color: var(--muted); font-size: 12px; }
body[data-page] :is(.table-scroll,.tablebox,.table-wrap,.table-container,.scroll,.file-list) { max-width: 100%; overflow-x: auto; }
body[data-page] table { color: var(--text); border-collapse: collapse; font-size: 13px; }
body[data-page] th { background: var(--th-bg); color: var(--text-2); font-size: 12px; font-weight: 600; }
body[data-page] th, body[data-page] td { padding: 8px 12px; border-bottom: 1px solid var(--line); }
body[data-page] tbody tr { background: var(--surface); }
body[data-page] tbody tr:hover { background: var(--row-hover); }
body[data-page] :is(.number,.price,.value-cell,.selection strong,.timing,.progress-detail) { font-variant-numeric: tabular-nums; }
body[data-page] :is(td.number,td.price,.value-cell) { text-align: right; }
body[data-page] :is(.err,.error,.bad,.status.error,.status.err,.price-status.error) { color: var(--danger); }
body[data-page] :is(.ok,.good,.success,.status.success,.price-status.success) { color: var(--success); }
body[data-page] :is(.warn,.warnings,.selection-note) { color: var(--warning); }
body[data-page] .badge { border-radius: 2px; padding: 2px 8px; border: 0; background: var(--tag-bg); color: var(--text-2); font-weight: 500; }
body[data-page] .badge.ok { background: var(--ok-bg); color: var(--ok-text); }
body[data-page] .badge.queued { background: var(--info-bg); color: var(--info-text); }
body[data-page] :is(.badge.running,.badge.awaiting) { background: var(--warn-bg); color: var(--warn-text); }
body[data-page] :is(.badge.failed,.badge.restricted) { background: var(--err-bg); color: var(--err-text); }
/* Case lists sit on field-colored rows; their tags and delete buttons stay compact and visible in both themes. */
body[data-page] .caseitem .badge { background: var(--tag-on-field); }
body[data-page] .caseitem button { min-height: 32px; padding: 5px 12px; font-size: 12px; }
body[data-page] :is(.bar,progress) { background: var(--track); border-radius: 0; }
body[data-page] :is(.bar i,.bar>i) { background: var(--interactive); }
body[data-page] progress { accent-color: var(--interactive); }
body[data-page] progress::-webkit-progress-bar { background: var(--track); border-radius: 0; }
body[data-page] progress::-webkit-progress-value { background: var(--interactive); border-radius: 0; }
body[data-page] progress::-moz-progress-bar { background: var(--interactive); border-radius: 0; }
body[data-page] dialog { background: var(--surface); color: var(--text); border: 1px solid var(--line-mid); border-radius: 0; box-shadow: none; }
body[data-page] dialog::backdrop { background: var(--overlay); }
body[data-page] .footnote { margin-top: 24px; padding-top: 12px; color: var(--helper); border-top: 1px solid var(--line); font-size: 11px; }

/* Screen theme picker added by the theme script in each page head. */
body[data-page] .theme-pick { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
body[data-page] .theme-pick select { min-height: 32px; padding: 4px 8px; font-size: 12px; }
/* A header without a logout button (계정 관리) keeps the picker on the right like every other page. */
body[data-page] :is(.topin,.site-topin) > .theme-pick:last-child { margin-left: auto; }

/* The home remains an ordered work list, including personal move controls. */
body[data-page="hub"] .wrap { padding-top: 16px; }
body[data-page="hub"] .orderbar { margin-bottom: 8px; }
body[data-page="hub"] #toolGrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr)); gap: 16px; }
body[data-page="hub"] #toolGrid > .card {
  display: flex; flex-direction: column; align-items: flex-start; padding: 20px; margin: 0;
  border: 1px solid var(--line); border-radius: 0;
}
body[data-page="hub"] #toolGrid > .card:hover { background: var(--card-hover); }
body[data-page="hub"] #toolGrid h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
body[data-page="hub"] #toolGrid p { flex: 1; margin: 0 0 16px; font-size: 13px; color: var(--muted); }
body[data-page="hub"] #toolGrid > .card > .row { justify-content: flex-start; }
body[data-page="hub"] #toolGrid > .card > .order-moves { margin-top: 12px; }
body[data-page="hub"] #historyCard { padding: 16px; }
body[data-page="hub"] #historyCard h2 { font-size: 15px; margin-bottom: 12px; }
body[data-page="hub"] #historyCard details + h2 { margin-top: 20px; }
body[data-page="hub"] .workItem { padding: 12px 0; }
body[data-page="hub"] #mfaNotice { color: var(--muted); font-size: 12px; }

body[data-page="admin"] .wrap { max-width: 1180px; }
body[data-page="admin"] .card { padding: 20px; margin-bottom: 16px; }
body[data-page="admin"] h2 { font-size: 16px; }
body[data-page="admin"] .actions button { min-height: 32px; padding: 5px 10px; font-size: 12px; }
body[data-page="admin"] .tool-checks label { margin: 4px 0; color: var(--text-2); }
body[data-page="admin"] .hint { color: var(--muted); }
body[data-page="admin"] .tenant-policy:not(:first-child) { border-top-color: var(--divider); }
body[data-page="admin"] :is(th,td):is(:nth-child(2),:nth-child(4),:nth-child(5)) { white-space: nowrap; }

body[data-page="login"] { min-height: 100dvh; display: grid; place-items: center; padding: 24px 0; }
body[data-page="login"] main { width: min(420px,calc(100% - 32px)); padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 0; }
body[data-page="login"] h1 { font-size: 24px; margin-bottom: 24px; }
body[data-page="login"] label { color: var(--muted); font-size: 12px; }
body[data-page="login"] button { width: 100%; margin-top: 24px; }

@media(max-width:760px) {
  body[data-page] .wrap { padding: 20px 16px 48px; }
  body[data-page] .topin,body[data-page] .site-topin { padding: 8px 16px; gap: 8px 12px; }
  body[data-page] h1 { font-size: 22px; }
  body[data-page] .body { padding: 16px; }
  body[data-page="hub"] #toolGrid > .card { padding: 16px; }
  body[data-page="hub"] #toolGrid h2 { font-size: 14px; }
  body[data-page="hub"] #toolGrid p { font-size: 12px; }
  body[data-page="hub"] #toolGrid button.primary { min-height: 36px; padding: 7px 12px; font-size: 12px; }
  body[data-page="admin"] .card { padding: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  body[data-page] *, body[data-page] *::before, body[data-page] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition: none !important; scroll-behavior: auto !important;
  }
}

/* Selected option B. */
body[data-page] {font-family:"NPL Noto Sans KR","Noto Sans KR","Malgun Gothic",sans-serif;font-weight:500;}
body[data-page] :is(h1,h2,.brand) {font-weight:700;}
body[data-page] :is(label,th,.field label,label.field) {font-weight:600;}
body[data-page] :is(input,select,textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])) {font-weight:600;}
body[data-page] button:where(:not(.map-hotspot):not(.map-link)),body[data-page] a.button,body[data-page] .download-link {font-weight:700;}
body[data-page="hub"] #toolGrid h2 {font-weight:700;}
body[data-page] :is(button.primary,button.go),body[data-page] .head h2,body[data-page] h2.head {font-weight:700;}