/* Machining-code viewer shell (specs/028-nc-viewer): design tokens, theme, page layout, header, file
   tabs, job list, op list, info tabs, status bar, viewport chips, toasts, drop zone, empty state and
   dialogs. The scene, code and player stylesheets style their own internals with the --nc-* tokens
   defined here. The shell sets <html data-theme="light|dark"> before any module mounts; every
   dark value is keyed on :root[data-theme="dark"] (not on prefers-color-scheme). */

:root {
  color-scheme: light;
  --nc-bg: #eef2f6;
  --nc-panel: #ffffff;
  --nc-panel-2: #f5f7fa;
  --nc-border: #d8e0e9;
  /* Inputs, segmented controls and overlay buttons: >= 3:1 against panels (D-07). */
  --nc-border-strong: #7d8799;
  --nc-text: #172033;
  --nc-text-dim: #566377;
  /* Dimmer than --nc-text-dim yet >= 4.5:1 on panel-2 (op 0 file tab names, NU-05). */
  --nc-text-faint: #657184;
  --nc-accent: #0d73d9;
  --nc-accent-contrast: #ffffff;
  /* Text on filled badges and danger buttons. */
  --nc-on-fill: #ffffff;
  --nc-danger: #d0303c;
  /* >= 4.5:1 for 11px badges on tinted rows too (4.81 on its badge, 4.92 on a selected row). */
  --nc-warning: #8f5400;
  --nc-success: #127556;
  --nc-format-pgi: #7c3aed;
  /* No font files are shipped: name only the faces the systems have (RU-08). */
  --nc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --nc-mono: "SF Mono", SFMono-Regular, Menlo, Consolas, D2Coding, "Liberation Mono", monospace;
  /* Type scale (readability round 2026-10-01, every module uses these). Korean text is >= 12px;
     micro (11px) is for Latin / number chips and badges only. Weights are 400/500/600/700 only. */
  /* Text size setting (follow-up F5): the shell sets --nc-ui-scale on <html> (1 | 1.125 | 1.25). */
  --nc-ui-scale: 1;
  --nc-fs-micro: calc(11px * var(--nc-ui-scale));
  --nc-fs-sm: calc(12px * var(--nc-ui-scale));
  --nc-fs-md: calc(13px * var(--nc-ui-scale));
  --nc-fs-lg: calc(14px * var(--nc-ui-scale));
  --nc-fs-xl: calc(18px * var(--nc-ui-scale));
  --nc-fw-regular: 400;
  --nc-fw-medium: 500;
  --nc-fw-semibold: 600;
  --nc-fw-bold: 700;
  /* "Where the machine is now" (nc/model PLAYBACK_COLORS): fill + outline. */
  --nc-playback: #f5b700;
  --nc-playback-outline: #111827;
  --nc-radius: 6px;
  --nc-viewport-bg: #e8ecf1;
  --nc-header-h: 44px;

  /* Secondary tokens (shell-defined, available to every module). */
  --nc-accent-soft: rgba(13, 115, 217, 0.11);
  /* The playback row of the op list (RP-11): a little stronger than accent-soft. */
  --nc-current-bg: rgba(13, 115, 217, 0.14);
  --nc-selected: rgba(13, 115, 217, 0.16);
  /* Secondary text on a selected row: >= 4.5:1 on --nc-selected over the panel (round 2 N-03). */
  --nc-selected-dim: #3f4b5e;
  --nc-accent-strong: #0a5fb4;
  --nc-hover: rgba(23, 32, 51, 0.055);
  --nc-border-soft: #e8edf3;
  --nc-shadow: 0 10px 28px rgba(15, 23, 42, 0.14), 0 1px 3px rgba(15, 23, 42, 0.08);
  /* Focus: 2px solid accent outline (D-06). --nc-focus stays for modules that still use box-shadow. */
  --nc-focus-color: var(--nc-accent);
  --nc-focus: 0 0 0 2px var(--nc-accent);
  --nc-tabs-h: 34px;
  --nc-status-h: 24px;
  --nc-left-w: 320px;
  --nc-right-w: 300px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --nc-bg: #0c1016;
  --nc-panel: #141a22;
  --nc-panel-2: #19202a;
  --nc-border: #29323e;
  --nc-border-strong: #5d6b7e;
  --nc-text: #e1e7ef;
  --nc-text-dim: #8e9aab;
  --nc-text-faint: #7c8899;
  --nc-accent: #3d95f2;
  --nc-accent-contrast: #0b1220;
  --nc-on-fill: #0b1220;
  --nc-danger: #f06a74;
  --nc-warning: #f0b03c;
  --nc-success: #3ccb92;
  --nc-format-pgi: #b39afc;
  --nc-viewport-bg: #10151c;
  --nc-accent-soft: rgba(61, 149, 242, 0.17);
  --nc-current-bg: rgba(61, 149, 242, 0.2);
  --nc-playback: #ffd23f;
  --nc-playback-outline: #111827;
  --nc-selected: rgba(61, 149, 242, 0.24);
  --nc-selected-dim: #b4bfcd;
  --nc-accent-strong: #6aaff5;
  --nc-hover: rgba(255, 255, 255, 0.055);
  --nc-border-soft: #1f2731;
  --nc-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------ base */

html,
body.nc-viewer {
  height: 100%;
  margin: 0;
}

body.nc-viewer {
  overflow: hidden;
  background: var(--nc-bg);
  color: var(--nc-text);
  font: var(--nc-fs-md)/1.45 var(--nc-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#nc-app,
#nc-app *,
#nc-app *::before,
#nc-app *::after {
  box-sizing: border-box;
}

#nc-app [hidden] {
  display: none !important;
}

#nc-app :focus-visible {
  outline: 2px solid var(--nc-focus-color);
  outline-offset: 2px;
}

#nc-app ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#nc-app ::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 10px;
  background: color-mix(in srgb, var(--nc-text-dim) 70%, transparent) padding-box;
}
#nc-app ::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--nc-text-dim) 85%, transparent);
}
#nc-app ::-webkit-scrollbar-track {
  background: transparent;
}

.nc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nc-mono {
  font-family: var(--nc-mono);
  font-size: var(--nc-fs-sm);
  font-variant-numeric: tabular-nums;
}
.nc-muted {
  color: var(--nc-text-dim);
}
.nc-small {
  font-size: var(--nc-fs-sm);
}
.nc-note {
  margin: 0 0 10px;
  color: var(--nc-text-dim);
}

.nc-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 0;
}
.nc-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nc-icon svg .f {
  fill: currentColor;
  stroke: none;
}

/* ---------------------------------------------------------------- layout */

#nc-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

/* Widths come from the shell (ratios clamped so the 3D view keeps >= 50%). */
#nc-main {
  display: grid;
  grid-template-columns: var(--nc-left-w) 4px minmax(0, 1fr) 4px var(--nc-right-w);
  min-height: 0;
  min-width: 0;
}

#nc-left,
#nc-right {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--nc-panel);
}
#nc-left {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
#nc-left > .nc-left-switch {
  grid-row: 1;
}
#nc-left > #nc-code,
#nc-left > .nc-jobs-panel {
  grid-row: 2;
}
#nc-left > #nc-dro {
  grid-row: 3;
}
/* op list | 4px splitter | info. The shell sets the split (default 3 : 2, draggable, RU-23). */
#nc-right {
  grid-template-rows: minmax(120px, var(--nc-ops-fr, 3fr)) 4px minmax(150px, var(--nc-info-fr, 2fr));
}
.nc-resizer.nc-resizer-row {
  cursor: row-resize;
  background: linear-gradient(to bottom, transparent 1.5px, var(--nc-border) 1.5px, var(--nc-border) 2.5px, transparent 2.5px);
}
.nc-resizer.nc-resizer-row:hover,
.nc-resizer.nc-resizer-row.is-dragging,
.nc-resizer.nc-resizer-row:focus-visible {
  background: var(--nc-accent);
}
body.nc-resizing-rows,
body.nc-resizing-rows * {
  cursor: row-resize !important;
  user-select: none !important;
}

#nc-code {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--nc-panel);
}
#nc-dro {
  min-width: 0;
  border-top: 1px solid var(--nc-border);
  background: var(--nc-panel-2);
}
#nc-dro:empty {
  display: none;
}

#nc-viewport {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--nc-viewport-bg);
}
#nc-transport {
  position: absolute;
  z-index: 20;
  right: 12px;
  bottom: 12px;
  left: 12px;
}
#nc-transport:empty {
  display: none;
}
/* No file: no DRO numbers and no transport (D-23). */
#nc-app[data-state="empty"] #nc-dro,
#nc-app[data-state="empty"] #nc-transport {
  display: none;
}

#nc-ops,
#nc-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#nc-ops {
  container: nc-ops / inline-size;
}
/* The row splitter above it draws the line (the narrow layout has no splitter: see below). */
#nc-info {
  border-top: 0;
}

.nc-resizer {
  position: relative;
  z-index: 5;
  cursor: col-resize;
  touch-action: none;
  background: linear-gradient(to right, transparent 1.5px, var(--nc-border) 1.5px, var(--nc-border) 2.5px, transparent 2.5px);
  transition: background-color 0.12s;
}
.nc-resizer:hover,
.nc-resizer.is-dragging,
.nc-resizer:focus-visible {
  background: var(--nc-accent);
  opacity: 0.85;
}
#nc-app .nc-resizer:focus-visible {
  outline-offset: -2px;
}
#nc-main[data-left-collapsed="true"] #nc-left-resizer,
#nc-main[data-right-collapsed="true"] #nc-right-resizer {
  pointer-events: none;
  cursor: default;
}
body.nc-resizing,
body.nc-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
body.nc-resizing #nc-viewport canvas,
body.nc-resizing iframe {
  pointer-events: none;
}

/* Collapsed panels become a 28px rail with an expand button. */
.nc-rail {
  display: none;
}
#nc-left[data-collapsed="true"],
#nc-right[data-collapsed="true"] {
  grid-template-rows: minmax(0, 1fr);
  background: var(--nc-panel-2);
}
#nc-left[data-collapsed="true"] > :not(.nc-rail),
#nc-right[data-collapsed="true"] > :not(.nc-rail) {
  display: none !important;
}
#nc-left[data-collapsed="true"] > .nc-rail,
#nc-right[data-collapsed="true"] > .nc-rail {
  display: flex;
  grid-row: 1 / -1;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  cursor: pointer;
}
.nc-rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--nc-border-strong);
  border-radius: var(--nc-radius);
  background: var(--nc-panel);
  color: var(--nc-text);
  cursor: pointer;
}
.nc-rail-btn:hover {
  background: var(--nc-accent-soft);
  color: var(--nc-accent-strong);
}
.nc-rail-label {
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

/* Collapse handles on the 3D view edges, vertically centred (clear of chips, cube, legend, toasts). */
.nc-edge-handle {
  position: absolute;
  z-index: 8;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 1px solid var(--nc-border);
  background: color-mix(in srgb, var(--nc-panel) 86%, transparent);
  color: var(--nc-text-dim);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.12s, color 0.12s;
}
.nc-edge-handle.is-left {
  left: 0;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}
.nc-edge-handle.is-right {
  right: 0;
  border-right: 0;
  border-radius: 8px 0 0 8px;
}
.nc-edge-handle:hover,
.nc-edge-handle:focus-visible {
  opacity: 1;
  color: var(--nc-text);
  border-color: var(--nc-border-strong);
}
#nc-app[data-state="empty"] .nc-edge-handle {
  display: none;
}

/* ---------------------------------------------------------------- header */

#nc-header {
  position: relative;
  z-index: 30;
  min-width: 0;
  background: var(--nc-panel);
  border-bottom: 1px solid var(--nc-border);
}

.nc-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--nc-header-h);
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* Bigger text (uiScale) stops at 14px in the header so its buttons still fit a 1024px window. */
  font-size: min(var(--nc-fs-md), 14px);
}
.nc-toolbar::-webkit-scrollbar {
  display: none;
}
.nc-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.nc-brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 4px;
  border-radius: var(--nc-radius);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.nc-brand:hover .nc-brand-prisme {
  color: var(--nc-accent-strong);
}
.nc-brand-mark {
  width: 20px;
  height: 20px;
  color: var(--nc-accent);
}
.nc-brand-mark svg {
  stroke-width: 1.8;
}
.nc-brand-name {
  font-size: var(--nc-fs-lg);
  font-weight: var(--nc-fw-semibold);
  letter-spacing: -0.01em;
}
.nc-brand-prisme {
  font-weight: var(--nc-fw-bold);
  letter-spacing: -0.015em;
}
.nc-env {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--nc-border-strong);
  border-radius: 999px;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
  white-space: nowrap;
}
.nc-env:not([data-environment="production"]) {
  border-color: color-mix(in srgb, var(--nc-warning) 55%, transparent);
  background: color-mix(in srgb, var(--nc-warning) 12%, transparent);
  color: var(--nc-warning);
}

.nc-toolgroup {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--nc-border);
}
.nc-toolgroup-end {
  padding-left: 0;
  border-left: 0;
}
.nc-brand + .nc-toolgroup,
.nc-env + .nc-toolgroup {
  border-left: 0;
  padding-left: 0;
}

.nc-btn {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--nc-radius);
  background: transparent;
  color: var(--nc-text);
  font: inherit;
  font-weight: var(--nc-fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}
.nc-btn:hover:not(:disabled) {
  background: var(--nc-hover);
}
.nc-btn:active:not(:disabled) {
  background: color-mix(in srgb, var(--nc-text) 10%, transparent);
}
.nc-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.nc-btn[aria-expanded="true"] {
  background: var(--nc-accent-soft);
  color: var(--nc-accent-strong);
}
.nc-btn-primary {
  border-color: var(--nc-accent);
  background: var(--nc-accent);
  color: var(--nc-accent-contrast);
}
.nc-btn-primary:hover:not(:disabled) {
  background: var(--nc-accent-strong);
  border-color: var(--nc-accent-strong);
}
.nc-btn-danger {
  border-color: var(--nc-danger);
  background: var(--nc-danger);
  color: var(--nc-on-fill);
}
.nc-btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--nc-danger) 85%, #000);
}
.nc-btn-ghost {
  border-color: var(--nc-border);
}
.nc-btn-sm {
  height: 24px;
  padding: 0 7px;
  font-size: var(--nc-fs-sm);
}
.nc-btn-sm .nc-icon {
  width: 15px;
  height: 15px;
}
.nc-btn-lg {
  height: 34px;
  padding: 0 16px;
  font-size: var(--nc-fs-md);
}
.nc-btn.is-attention:not(:disabled) {
  border-color: color-mix(in srgb, var(--nc-accent) 55%, transparent);
  background: var(--nc-accent-soft);
  color: var(--nc-accent-strong);
}
.nc-btn:not(:has(.nc-btn-label)) {
  width: 28px;
  padding: 0;
}
.nc-btn-caret {
  width: 13px;
  height: 13px;
  margin-left: -2px;
  color: var(--nc-text-dim);
}
.nc-btn-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--nc-panel);
  border-radius: 50%;
  background: var(--nc-accent);
}
.nc-show-narrow {
  display: none !important;
}

.nc-segmented {
  display: inline-flex;
  flex: none;
  margin-left: 2px;
  border: 1px solid var(--nc-border-strong);
  border-radius: var(--nc-radius);
  overflow: hidden;
}
.nc-segmented .nc-btn {
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 0;
}
.nc-segmented .nc-btn + .nc-btn {
  border-left: 1px solid var(--nc-border);
}
.nc-segmented + .nc-segmented {
  margin-left: 4px;
}
/* The camera looks this way now (scene view:state) — RU-22. */
.nc-segmented .nc-btn[aria-pressed="true"] {
  background: var(--nc-accent-soft);
  color: var(--nc-accent-strong);
  font-weight: var(--nc-fw-semibold);
}
/* Top/bottom view lock (RU-32): open lock + "고정" when off, filled accent + closed lock when on. */
.nc-btn-lock .nc-lock-icon {
  display: inline-flex;
}
.nc-btn-lock .nc-icon {
  width: 15px;
  height: 15px;
}
.nc-segmented .nc-btn-lock.is-locked {
  background: var(--nc-accent);
  color: var(--nc-accent-contrast);
}
.nc-segmented .nc-btn-lock.is-locked:hover:not(:disabled) {
  background: var(--nc-accent-strong);
}
/* One width for "고정" / "위 고정" / "아래 고정", so 등각 · 보기 never move (NU-07). */
.nc-segmented .nc-btn-lock {
  min-width: 92px;
}
.nc-btn-short {
  display: none;
}
#nc-app .nc-segmented .nc-btn:focus-visible {
  outline-offset: -2px;
}

/* ------------------------------------------------------ popovers, menus */

.nc-popover {
  position: fixed;
  z-index: 60;
  top: calc(var(--nc-header-h) + 4px);
  right: 10px;
  width: 300px;
  max-height: calc(100vh - var(--nc-header-h) - 24px);
  padding: 10px 12px 12px;
  overflow: auto;
  border: 1px solid var(--nc-border);
  border-radius: 8px;
  background: var(--nc-panel);
  box-shadow: var(--nc-shadow);
}
#nc-app .nc-popover:focus-visible {
  outline: none;
}
.nc-popover.nc-help {
  width: min(760px, calc(100vw - 20px));
}
.nc-help-groups {
  column-count: 2;
  column-gap: 24px;
}
.nc-help-group {
  break-inside: avoid;
  padding-bottom: 8px;
}
.nc-popover-title {
  margin-bottom: 6px;
  font-size: var(--nc-fs-md);
  font-weight: var(--nc-fw-bold);
}
.nc-popover-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.nc-settings-group + .nc-settings-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--nc-border-soft);
}
.nc-settings-heading {
  margin: 0 0 4px;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
  letter-spacing: 0.02em;
}
.nc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.nc-check:hover {
  background: var(--nc-hover);
}
.nc-check input {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--nc-accent);
  cursor: pointer;
}
.nc-popover.nc-settings {
  width: 340px;
}
/* Select rows line up with the checkbox labels (22px = checkbox + gap) and read as bright as them
   (RU-24). */
.nc-field {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 2px 4px 2px 26px;
}
.nc-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nc-text);
}
.nc-field select {
  min-width: 0;
}
.nc-jobs-search::placeholder {
  color: var(--nc-text-dim);
  opacity: 1;
}
.nc-field select,
.nc-jobs-search {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--nc-border-strong);
  border-radius: 5px;
  background: var(--nc-panel);
  color: var(--nc-text);
  font: inherit;
}
.nc-setting-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--nc-accent);
}
.nc-field-label .nc-setting-dot {
  margin-left: 0;
}

.nc-help-list {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 5px 12px;
  margin: 0;
}
.nc-help-list dt {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.nc-help-list dd {
  margin: 0;
  color: var(--nc-text-dim);
}
.nc-help-sep {
  color: var(--nc-text-dim);
}
.nc-help-note {
  margin: 10px 0 0;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
}
kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  border: 1px solid var(--nc-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--nc-panel-2);
  color: var(--nc-text);
  font: var(--nc-fs-sm)/1.4 var(--nc-mono);
  text-align: center;
}

.nc-popover.nc-menu {
  width: auto;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  padding: 4px;
}
.nc-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--nc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nc-menu-item:hover:not(:disabled),
.nc-menu-item:focus-visible {
  background: var(--nc-accent-soft);
}
#nc-app .nc-menu-item:focus-visible {
  outline-offset: -2px;
}
.nc-menu-item:disabled {
  opacity: 0.55;
  cursor: default;
}
/* Checkable menus (보기 ▾): a 16px ✓ column in front of every label (RU-22). */
.nc-menu.has-checks .nc-menu-item {
  justify-content: flex-start;
  gap: 6px;
  padding-left: 6px;
}
.nc-menu-check {
  flex: none;
  width: 16px;
  color: var(--nc-accent-strong);
  font-weight: var(--nc-fw-bold);
  text-align: center;
}
.nc-menu.has-checks .nc-menu-label {
  flex: 1 1 auto;
}
.nc-menu-item.is-checked .nc-menu-label {
  font-weight: var(--nc-fw-semibold);
}
.nc-menu.has-checks .nc-menu-hint {
  margin-left: 16px;
}
.nc-menu-hint {
  min-width: 0;
  border-bottom-width: 1px;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-micro);
}
.nc-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--nc-border-soft);
}

/* ------------------------------------------------------------- file tabs */

.nc-tabbar {
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--nc-tabs-h);
  border-top: 1px solid var(--nc-border-soft);
  background: var(--nc-panel-2);
}
.nc-filetabs {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 1px;
  min-width: 0;
  padding: 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.nc-filetabs::-webkit-scrollbar {
  display: none;
}
/* Fade only the edge that has more tabs behind it. */
.nc-tabbar.fade-start .nc-filetabs {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px);
  mask-image: linear-gradient(to right, transparent 0, #000 16px);
}
.nc-tabbar.fade-end .nc-filetabs {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 16px);
  mask-image: linear-gradient(to left, transparent 0, #000 16px);
}
.nc-tabbar.fade-start.fade-end .nc-filetabs {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.nc-tabs-scroll {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nc-text-dim);
  cursor: pointer;
}
.nc-tabs-scroll:hover:not(:disabled) {
  background: var(--nc-hover);
  color: var(--nc-text);
}
.nc-tabs-scroll:disabled {
  opacity: 0.35;
  cursor: default;
}
.nc-filetab {
  display: flex;
  flex: none;
  align-items: center;
  min-width: 120px;
  max-width: 250px;
  border-top: 2px solid transparent;
  color: var(--nc-text-dim);
}
.nc-filetab:hover {
  background: var(--nc-hover);
}
.nc-filetab.is-active {
  border-top-color: var(--nc-accent);
  background: var(--nc-panel);
  color: var(--nc-text);
  box-shadow: 1px 0 0 var(--nc-border-soft), -1px 0 0 var(--nc-border-soft);
}
.nc-filetab-main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  padding: 0 4px 0 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#nc-app .nc-filetab-main:focus-visible {
  outline-offset: -2px;
}
.nc-filetab-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* A file without ops: a fainter name and a hollow dot instead of an "op 0" badge (RU-31, NU-05). */
.nc-filetab.is-empty .nc-filetab-name {
  color: var(--nc-text-faint);
}
.nc-filetab.is-empty.is-active .nc-filetab-name {
  color: var(--nc-text-dim);
}
#nc-app #nc-viewport:focus-visible {
  outline-offset: -2px;
}
.nc-empty-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--nc-text-dim);
  border-radius: 50%;
}
.nc-filetab.is-active .nc-filetab-name {
  font-weight: var(--nc-fw-semibold);
}
.nc-filetab-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--nc-text-dim);
  cursor: pointer;
  opacity: 0.75;
}
.nc-filetab-close .nc-icon {
  width: 13px;
  height: 13px;
}
.nc-filetab:hover .nc-filetab-close,
.nc-filetab.is-active .nc-filetab-close {
  opacity: 1;
}
.nc-filetab-close:hover {
  background: var(--nc-hover);
  color: var(--nc-text);
}
.nc-dirty-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--nc-warning);
}
.nc-switcher-btn {
  align-self: center;
  margin: 0 6px 0 2px;
  border-color: var(--nc-border);
  background: var(--nc-panel);
}
.nc-switcher-btn .nc-icon:first-child {
  width: 14px;
  height: 14px;
}

.nc-file-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border-radius: 4px;
  font: var(--nc-fw-semibold) var(--nc-fs-micro)/16px var(--nc-mono);
  white-space: nowrap;
}
.nc-file-badge .nc-icon {
  width: 12px;
  height: 12px;
}
.nc-file-badge.is-warning {
  background: color-mix(in srgb, var(--nc-warning) 12%, transparent);
  color: var(--nc-warning);
}
.nc-file-badge.is-error {
  background: color-mix(in srgb, var(--nc-danger) 12%, transparent);
  color: var(--nc-danger);
}
.nc-format-chip {
  flex: none;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--nc-accent-strong);
  font: var(--nc-fw-semibold) var(--nc-fs-micro)/15px var(--nc-mono);
  letter-spacing: 0.02em;
}
.nc-format-chip[data-format="mpr"] {
  color: var(--nc-success);
}
.nc-format-chip[data-format="wangs_pgi"] {
  color: var(--nc-format-pgi);
}
.nc-format-chip[data-format="wangs_xml"] {
  color: var(--nc-warning);
}

/* --------------------------------------------------------------- job list */

.nc-popover.nc-switcher {
  display: flex;
  flex-direction: column;
  width: 480px;
  max-width: calc(100vw - 16px);
  max-height: min(560px, calc(100vh - 120px));
  padding: 0;
  overflow: hidden;
}
.nc-jobs-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.nc-jobs {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  container: nc-jobs / inline-size;
}
.nc-jobs-tools {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--nc-border);
}
.nc-jobs-search {
  flex: 1 1 150px;
  min-width: 0;
  padding: 0 8px;
}
.nc-jobs-hide {
  flex: none;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
}
/* Columns: name (with format chip and any warning badge) | size | op | 위 | 아래 | 옆. The warning
   badge lives in the name cell, so only rows that have one give up name width (RU-03). */
.nc-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 24px 22px 26px 22px;
  align-items: center;
  gap: 3px;
  height: calc(34px * var(--nc-ui-scale));
  padding: 0 8px 0 10px;
  border-bottom: 1px solid var(--nc-border-soft);
  cursor: pointer;
  user-select: none;
}
.nc-jobs.is-popover .nc-job-row {
  grid-template-columns: minmax(0, 1fr) 104px 34px 32px 36px 32px;
  gap: 6px;
  padding: 0 12px;
}
.nc-job-row:hover {
  background: var(--nc-hover);
}
.nc-job-row.is-active {
  background: var(--nc-selected);
  box-shadow: inset 3px 0 0 var(--nc-accent);
}
.nc-job-row.is-active .nc-job-num.is-zero,
.nc-job-row.is-active .nc-job-size,
.nc-job-row.is-active.is-empty .nc-job-title {
  color: var(--nc-selected-dim);
}
.nc-jobs-options:focus-visible .nc-job-row.is-active {
  outline: 2px solid var(--nc-focus-color);
  outline-offset: -2px;
}
#nc-app .nc-jobs-options:focus-visible {
  outline-offset: -2px;
}
/* Column heads: the first child of the scrolling list, sticky, so they share the list's scrollbar
   gutter and line up with the values (RU-02). */
.nc-jobs-head.nc-job-row {
  position: sticky;
  z-index: 1;
  top: 0;
  height: calc(28px * var(--nc-ui-scale));
  border-bottom: 1px solid var(--nc-border);
  background: var(--nc-panel-2);
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
  cursor: default;
}
.nc-jobs-head:hover {
  background: var(--nc-panel-2);
}
.nc-jobs-head .nc-job-num,
.nc-jobs-head .nc-job-size {
  overflow: visible;
  font: inherit;
}
/* Sort buttons (MW-06): the head words, a ▴/▾ on the sorted column. */
.nc-job-sort {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nc-job-sort.nc-job-name {
  justify-content: flex-start;
}
.nc-job-sort:hover {
  color: var(--nc-text);
}
.nc-job-sort.is-sorted {
  color: var(--nc-accent-strong);
}
#nc-app .nc-job-sort:focus-visible {
  outline-offset: 0;
}
.nc-job-sort-mark {
  font-size: var(--nc-fs-micro);
}
.nc-job-sort-mark:empty {
  display: none;
}
.nc-job-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}
.nc-job-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nc-job-row.is-active .nc-job-title {
  font-weight: var(--nc-fw-semibold);
}
.nc-job-num {
  overflow: hidden;
  font: var(--nc-fs-micro) var(--nc-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* With work order data (F1): "가구05 · D1 도어" is the row name; the file name sits beside it in the
   wide list and on the second line in the panel list. */
.nc-job-file {
  flex: 0 1 auto;
  max-width: 45%;
  min-width: 0;
  overflow: hidden;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-job-size-file {
  display: none;
  font-family: var(--nc-font);
}
.nc-job-ids {
  display: grid;
  gap: 1px;
  overflow-wrap: anywhere;
}
.nc-job-size {
  overflow: hidden;
  color: var(--nc-text-dim);
  font: var(--nc-fs-sm) var(--nc-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.nc-job-num.is-zero,
.nc-job-row.is-empty .nc-job-title {
  color: var(--nc-text-dim);
}
.nc-job-name .nc-file-badge {
  padding: 0 2px;
}
.nc-jobs-list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.nc-job-name .nc-format-chip {
  padding: 0 3px;
  font-size: var(--nc-fs-micro);
  line-height: 14px;
}
/* Panel-width table: the size moves under the name so the name keeps its width. */
@container nc-jobs (max-width: 360px) {
  .nc-job-row {
    grid-template-columns: minmax(0, 1fr) 22px 20px 26px 20px;
    grid-template-rows: auto auto;
    row-gap: 0;
    height: calc(44px * var(--nc-ui-scale));
  }
  .nc-job-row > .nc-job-name {
    grid-column: 1;
    grid-row: 1;
  }
  .nc-job-row > .nc-job-size {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }
  .nc-job-row > :nth-child(n + 3) {
    grid-row: 1 / span 2;
  }
  .nc-jobs-head.nc-job-row {
    grid-template-rows: auto;
    height: calc(28px * var(--nc-ui-scale));
  }
  /* Work order names: the file name goes to the second line, before the size. */
  .nc-job-name .nc-job-file {
    display: none;
  }
  .nc-job-size .nc-job-size-file {
    display: inline;
  }
  .nc-jobs-head > .nc-job-size {
    display: none;
  }
  .nc-jobs-head > :nth-child(n + 3) {
    grid-row: 1;
  }
}
.nc-jobs-empty {
  padding: 18px 12px;
  color: var(--nc-text-dim);
  text-align: center;
}
.nc-jobs-foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 4px 10px;
  border-top: 1px solid var(--nc-border);
  background: var(--nc-panel-2);
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  font-variant-numeric: tabular-nums;
}

.nc-left-switch {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--nc-border);
  background: var(--nc-panel-2);
}
.nc-left-switch-btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--nc-radius);
  background: transparent;
  color: var(--nc-text-dim);
  font: inherit;
  font-weight: var(--nc-fw-medium);
  cursor: pointer;
}
.nc-left-switch-btn .nc-icon {
  width: 14px;
  height: 14px;
}
.nc-left-switch-btn:hover {
  color: var(--nc-text);
}
.nc-left-switch-btn.is-active {
  border-color: var(--nc-border);
  background: var(--nc-panel);
  color: var(--nc-text);
  font-weight: var(--nc-fw-semibold);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.nc-left-switch-count {
  color: var(--nc-text-dim);
  font: var(--nc-fs-micro) var(--nc-mono);
}
.nc-left-switch-count:empty {
  display: none;
}

/* ------------------------------------------------------------ panel head */

.nc-panel-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 34px;
  padding: 0 8px 0 10px;
  border-bottom: 1px solid var(--nc-border);
  background: var(--nc-panel-2);
}
.nc-panel-heading {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.nc-panel-title {
  overflow: hidden;
  font-weight: var(--nc-fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nc-panel-sub {
  flex: none;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
}
.nc-panel-actions {
  display: flex;
  flex: none;
  gap: 4px;
}
.nc-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 16px;
  color: var(--nc-text-dim);
  text-align: center;
}
.nc-empty-ok {
  width: 22px;
  height: 22px;
  color: var(--nc-success);
}

.nc-face-chips {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 3px;
  padding: 6px 6px;
  border-bottom: 1px solid var(--nc-border-soft);
}
.nc-face-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--nc-border-strong);
  border-radius: 999px;
  background: var(--nc-panel);
  color: var(--nc-text);
  font: inherit;
  font-size: var(--nc-fs-sm);
  cursor: pointer;
}
.nc-face-chip:hover {
  background: var(--nc-hover);
}
.nc-face-chip.is-zero {
  color: var(--nc-text-dim);
}
.nc-face-chip.is-active {
  border-color: var(--nc-accent);
  background: var(--nc-accent);
  color: var(--nc-accent-contrast);
  font-weight: var(--nc-fw-semibold);
}
.nc-face-chip-count {
  font: var(--nc-fs-sm) var(--nc-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- op list */

.nc-ops-list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  contain: strict;
}
#nc-app .nc-ops-list:focus-visible {
  outline-offset: -2px;
}
.nc-ops-spacer {
  width: 1px;
}
/* Two lines: [face chip] name / position · depth · tool … time. The eye button overlays the right
   end of the first line (it takes no column), so the second line gets the full width (RU-01). */
.nc-op-row {
  position: absolute;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 12px 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--nc-border-soft);
  cursor: pointer;
  user-select: none;
}
.nc-op-row:hover {
  background: var(--nc-hover);
}
/* Playback position (distinct from the selection): a stronger tint, a 3px bar in the op colour,
   ▶ in the playback colour where the swatch was, and a 2px progress bar (RP-11, RU-07). */
.nc-op-row.is-current {
  background: var(--nc-current-bg);
  box-shadow: inset 3px 0 0 var(--nc-op-color, var(--nc-accent));
}
.nc-op-row.is-selected {
  background: var(--nc-selected);
  box-shadow: inset 3px 0 0 var(--nc-accent);
}
.nc-op-row.is-selected .nc-op-num,
.nc-op-row.is-selected .nc-op-meta,
.nc-op-row.is-selected .nc-op-time,
.nc-op-row.is-selected .nc-op-eye,
.nc-op-row.is-selected.is-hidden .nc-op-name,
.nc-op-row.is-selected.is-hidden .nc-op-kind,
.nc-op-row.is-selected.is-disabled .nc-op-name,
.nc-op-row.is-selected.is-disabled .nc-op-kind {
  color: var(--nc-selected-dim);
}
.nc-ops-list:focus-visible .nc-op-row.is-selected {
  outline: 2px solid var(--nc-focus-color);
  outline-offset: -2px;
}
.nc-op-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}
.nc-op-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--nc-op-color, var(--nc-accent));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.nc-op-lead .nc-op-play {
  display: none;
  width: 12px;
  height: 12px;
}
.nc-icon svg .p {
  fill: var(--nc-playback);
  stroke: var(--nc-playback-outline);
  stroke-width: 2;
}
.nc-op-row.is-current .nc-op-lead .nc-op-swatch,
.nc-op-row.is-current .nc-op-lead .nc-op-warn {
  display: none;
}
.nc-op-row.is-current .nc-op-lead .nc-op-play {
  display: inline-flex;
}
/* Unsupported ops have no path: a hatched grey swatch instead of a palette colour. */
.nc-op-swatch.is-unsupported {
  background: repeating-linear-gradient(135deg, var(--nc-text-dim) 0 1.5px, transparent 1.5px 3.5px);
  box-shadow: inset 0 0 0 1px var(--nc-text-dim);
}
.nc-op-num {
  color: var(--nc-text-dim);
  font: var(--nc-fs-sm) var(--nc-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.nc-op-row.is-current .nc-op-num {
  color: var(--nc-text);
  font-weight: var(--nc-fw-bold);
}
.nc-op-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.nc-op-line1,
.nc-op-line2 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.nc-op-line1 {
  gap: 4px;
  line-height: calc(19px * var(--nc-ui-scale));
}
.nc-op-line2 {
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  line-height: calc(17px * var(--nc-ui-scale));
}
/* Face chip: the one place the face is named in the row (RU-06). The bottom face stands out: it is
   the side the operator cannot see on the machine. */
.nc-op-face {
  flex: none;
  align-self: center;
  padding: 0 4px;
  border: 1px solid var(--nc-border-strong);
  border-radius: 4px;
  color: var(--nc-text);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
  line-height: 16px;
  white-space: nowrap;
}
.nc-op-face[data-face="bottom"] {
  border-color: var(--nc-text);
  background: var(--nc-text);
  color: var(--nc-panel);
}
.nc-op-face[data-face="side"] {
  border-style: dashed;
}
.nc-op-kind {
  flex: none;
  font-weight: var(--nc-fw-semibold);
}
.nc-op-kind:empty {
  display: none;
}
.nc-tool-chip {
  flex: none;
  align-self: center;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--nc-panel-2);
  box-shadow: inset 0 0 0 1px var(--nc-border);
  color: var(--nc-text);
  font: var(--nc-fw-semibold) var(--nc-fs-micro)/16px var(--nc-mono);
  white-space: nowrap;
}
.nc-op-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nc-op-name.is-strong {
  font-weight: var(--nc-fw-semibold);
}
.nc-op-meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nc-op-time {
  flex: none;
  margin-left: auto;
  color: var(--nc-text-dim);
  font: var(--nc-fs-sm) var(--nc-mono);
  font-variant-numeric: tabular-nums;
}
/* A warning about this op (e.g. its hole meets one from the other face inside the panel). */
.nc-op-diag {
  display: inline-flex;
  flex: none;
  align-self: center;
  color: var(--nc-warning);
}
.nc-op-diag .nc-icon {
  width: 14px;
  height: 14px;
}
.nc-op-diag.is-error {
  color: var(--nc-danger);
}
.nc-op-warn {
  width: 13px;
  height: 13px;
  color: var(--nc-warning);
}
/* Reference-only machining (external file, machine NC code): a plain file mark, no path colour. */
.nc-op-ref {
  width: 13px;
  height: 13px;
  color: var(--nc-text-dim);
}
.nc-op-row.is-current .nc-op-lead .nc-op-ref {
  display: none;
}
.nc-op-row.is-reference .nc-op-meta {
  color: var(--nc-text-dim);
}
.nc-op-row.is-unsupported .nc-op-name {
  font-family: var(--nc-mono);
  font-size: var(--nc-fs-sm);
}
.nc-op-row.is-unsupported .nc-op-meta {
  color: var(--nc-warning);
}
/* Off and hidden ops: dim text colour and marks, not transparency (D-07). */
.nc-op-row.is-disabled .nc-op-name,
.nc-op-row.is-disabled .nc-op-kind {
  color: var(--nc-text-dim);
  text-decoration: line-through;
  text-decoration-color: var(--nc-text-dim);
}
.nc-op-row.is-hidden .nc-op-name,
.nc-op-row.is-hidden .nc-op-kind {
  color: var(--nc-text-dim);
}
.nc-op-row.is-hidden .nc-op-swatch {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--nc-op-color, var(--nc-accent));
}
.nc-op-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--nc-op-color, var(--nc-accent));
  pointer-events: none;
}
.nc-op-eye {
  position: absolute;
  top: 3px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--nc-text-dim);
  cursor: pointer;
}
.nc-op-eye:hover {
  background: var(--nc-hover);
  color: var(--nc-text);
}
.nc-op-eye .nc-icon {
  width: 15px;
  height: 15px;
}
.nc-op-row.is-hidden .nc-op-eye {
  color: var(--nc-text);
}
/* The first line makes room for the eye only while the eye shows. */
.nc-op-row.is-hidden .nc-op-line1,
.nc-op-row.is-selected .nc-op-line1 {
  padding-right: 24px;
}
@media (hover: hover) {
  .nc-op-eye {
    opacity: 0;
  }
  .nc-op-row:hover .nc-op-eye,
  .nc-op-row.is-selected .nc-op-eye,
  .nc-op-row.is-hidden .nc-op-eye,
  .nc-op-eye:focus-visible {
    opacity: 1;
  }
  .nc-op-row:hover .nc-op-line1 {
    padding-right: 24px;
  }
}
@media (hover: none) {
  .nc-op-row:not(.is-unsupported):not(.is-reference) .nc-op-line1 {
    padding-right: 24px;
  }
}
/* A narrow op panel (<= 280px: 1280 and 1024 wide windows) drops the op time from the row (it is in
   the row's title and the op details) so the position and depth always fit. */
@container nc-ops (max-width: 280px) {
  .nc-op-time {
    display: none;
  }
}

/* ------------------------------------------------------------ info panel */

.nc-info-tabs {
  display: flex;
  flex: none;
  gap: 2px;
  height: 32px;
  padding: 0 6px;
  border-bottom: 1px solid var(--nc-border);
  background: var(--nc-panel-2);
}
.nc-info-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--nc-text-dim);
  font: inherit;
  font-weight: var(--nc-fw-medium);
  white-space: nowrap;
  cursor: pointer;
}
#nc-app .nc-info-tab:focus-visible {
  outline-offset: -2px;
}
.nc-info-tab:hover {
  color: var(--nc-text);
}
.nc-info-tab.is-active {
  border-bottom-color: var(--nc-accent);
  color: var(--nc-text);
  font-weight: var(--nc-fw-semibold);
}
.nc-badge {
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--nc-text-dim);
  color: var(--nc-on-fill);
  font: var(--nc-fw-semibold) var(--nc-fs-micro)/16px var(--nc-mono);
  text-align: center;
}
.nc-badge[data-severity="warning"] {
  background: var(--nc-warning);
}
.nc-badge[data-severity="error"] {
  background: var(--nc-danger);
}
/* Information only: an outlined badge that does not call for attention (D-14). */
.nc-badge[data-severity="info"] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--nc-border-strong);
  color: var(--nc-text-dim);
}
.nc-info-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px 14px;
  overflow: auto;
}
#nc-app .nc-info-body:focus-visible {
  outline-offset: -2px;
}

/* One label column width in every section, so values start at the same x; values are not smaller
   than their labels (RU-11). */
.nc-props {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}
.nc-props dt {
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.nc-props dd {
  min-width: 0;
  margin: 0;
  font-size: var(--nc-fs-md);
  overflow-wrap: anywhere;
}
.nc-props dd.nc-mono {
  font-size: var(--nc-fs-sm);
}
.nc-bounds {
  display: grid;
  gap: 1px;
  font-family: var(--nc-mono);
  font-size: var(--nc-fs-sm);
  white-space: nowrap;
}
.nc-props dt.is-wide,
.nc-props dd.is-wide {
  grid-column: 1 / -1;
}
.nc-props dd.is-wide {
  margin-top: -2px;
}
/* Fixed sections ("통계", "참고") and folding ones ("경로 통계") share one heading style: a rule
   above, 12px / 600, the same 30px heading row (RU-29). */
.nc-info-section {
  margin-top: 8px;
  border-top: 1px solid var(--nc-border-soft);
}
.nc-info-heading {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin: 0;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
}
.nc-info-section > .nc-info-heading + * {
  margin-top: 2px;
}

.nc-op-detail-head {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: start;
  gap: 4px 8px;
  margin-bottom: 10px;
}
.nc-op-detail-head .nc-op-swatch {
  width: 12px;
  height: 12px;
  margin-top: 3px;
}
.nc-op-detail-head .nc-op-ref {
  margin-top: 2px;
}
.nc-op-detail-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nc-op-detail-title strong {
  font-size: var(--nc-fs-lg);
  overflow-wrap: anywhere;
}
.nc-op-detail-kind {
  color: var(--nc-text-dim);
}
.nc-tags {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  gap: 4px;
}
.nc-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border: 1px solid var(--nc-border);
  border-radius: 999px;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  line-height: 18px;
}
.nc-tag .nc-icon {
  width: 12px;
  height: 12px;
}
.nc-tag.is-accent {
  border-color: color-mix(in srgb, var(--nc-accent) 45%, transparent);
  color: var(--nc-accent-strong);
}
.nc-tag.is-warning {
  border-color: color-mix(in srgb, var(--nc-warning) 45%, transparent);
  color: var(--nc-warning);
}

.nc-op-where {
  display: grid;
  gap: 1px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--nc-accent) 28%, var(--nc-border));
  border-left: 3px solid var(--nc-accent);
  border-radius: var(--nc-radius);
  background: var(--nc-accent-soft);
}
.nc-op-where-label {
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
}
.nc-op-where-value {
  font-size: var(--nc-fs-lg);
  font-weight: var(--nc-fw-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* Bottom-face op: where it is on the panel turned over (2026-10-02 1.9). */
.nc-op-where-flip {
  color: var(--nc-text);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.nc-op-detail-title .nc-op-face {
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
}
.nc-op-where-extra {
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
}

.nc-keygrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}
.nc-keygrid-item {
  min-width: 0;
  padding: 4px 8px 5px;
  border-radius: var(--nc-radius);
  background: var(--nc-panel-2);
}
.nc-keygrid-item.is-wide {
  grid-column: 1 / -1;
}
.nc-keygrid dt {
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
}
.nc-keygrid dd {
  margin: 0;
  font-weight: var(--nc-fw-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.nc-fold {
  margin-top: 8px;
  border-top: 1px solid var(--nc-border-soft);
}
.nc-fold-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
  list-style: none;
  cursor: pointer;
}
.nc-fold-summary::-webkit-details-marker {
  display: none;
}
.nc-fold-summary::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 3px 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.12s;
}
.nc-fold[open] > .nc-fold-summary::before {
  transform: rotate(45deg);
}
.nc-fold-summary:hover {
  color: var(--nc-text);
}
.nc-fold-body {
  padding: 2px 0 6px;
}
.nc-fold-body > * + * {
  margin-top: 8px;
}

.nc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nc-fs-sm);
}
.nc-table th {
  padding: 4px 6px;
  border-bottom: 1px solid var(--nc-border);
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
  text-align: left;
}
.nc-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--nc-border-soft);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.nc-table .is-num {
  text-align: right;
  white-space: nowrap;
}
/* Key columns and heads never break inside a word ("STUFEN", "T600", "공구") — RU-10. */
.nc-table th,
.nc-table td:first-child {
  white-space: nowrap;
  overflow-wrap: normal;
}
/* Values take at most 9 characters (full value in the title) so descriptions keep the width
   (NU-02); a narrow panel stacks the description under key and value instead. */
.nc-params:not(.is-stacked) td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}
.nc-params:not(.is-stacked) .nc-param-value {
  display: block;
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-params.is-stacked td:nth-child(2) {
  overflow-wrap: anywhere;
}
.nc-params.is-stacked tr.nc-table-note td {
  padding-left: 14px;
}
.nc-nowrap {
  white-space: nowrap;
}
/* Korean words stay whole when a value wraps ("외곽선 기준 · 공구 반지름 3 mm 반영"). */
.nc-keep-words {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.nc-table tr.has-note td {
  border-bottom: 0;
  padding-bottom: 0;
}
.nc-table tr.nc-table-note td {
  padding-top: 0;
  white-space: normal;
  font-size: var(--nc-fs-sm);
}
.nc-param-note {
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
}
.nc-notes {
  margin: 0;
  padding-left: 18px;
}
.nc-notes li + li {
  margin-top: 3px;
}
/* The NC code a reference op sends to the machine as it is (Engine `reference.lines`). */
.nc-ref-lines {
  max-height: 240px;
  margin: 0;
  padding: 6px 8px;
  overflow: auto;
  border: 1px solid var(--nc-border-soft);
  border-radius: 6px;
  background: var(--nc-panel-2);
  font: var(--nc-fs-sm) / 1.5 var(--nc-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nc-cards {
  display: grid;
  gap: 8px;
}
.nc-card {
  padding: 8px 10px;
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius);
  background: var(--nc-panel-2);
}
.nc-card-title {
  margin-bottom: 4px;
  font-weight: var(--nc-fw-semibold);
}
/* G-code: the box inferred from the cutting moves is tentative (dashed, no fill). */
.nc-card.is-inferred {
  border-style: dashed;
  background: transparent;
}
.nc-card.is-inferred .nc-note {
  margin: 6px 0 0;
}
/* The card's border + padding (11px) come off the label column, so values start at the same x as
   in the other sections (NU-04). */
.nc-card .nc-props {
  grid-template-columns: 65px minmax(0, 1fr);
}

.nc-diagnostics {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nc-diagnostic {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--nc-text);
  font: inherit;
  text-align: left;
}
button.nc-diagnostic {
  cursor: pointer;
}
button.nc-diagnostic:hover {
  background: var(--nc-hover);
}
.nc-diagnostic-icon {
  margin-top: 1px;
  color: var(--nc-text-dim);
}
.nc-diagnostic.is-warning .nc-diagnostic-icon {
  color: var(--nc-warning);
}
.nc-diagnostic.is-error .nc-diagnostic-icon {
  color: var(--nc-danger);
}
.nc-diagnostic-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nc-diagnostic-message {
  overflow-wrap: anywhere;
}
/* A diagnostic about two ops (holes from both faces meeting): one button per op. */
.nc-diagnostics li {
  display: grid;
}
.nc-diagnostic-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 8px 4px 32px;
}
.nc-diagnostic-op {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--nc-border-strong);
  border-radius: 999px;
  background: var(--nc-panel);
  color: var(--nc-text);
  font: inherit;
  font-size: var(--nc-fs-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.nc-diagnostic-op:hover {
  border-color: var(--nc-accent);
  color: var(--nc-accent-strong);
}
.nc-diagnostic-where {
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
}

/* ------------------------------------------------------------ status bar */

#nc-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--nc-status-h);
  padding: 0 10px;
  overflow: hidden;
  border-top: 1px solid var(--nc-border);
  background: var(--nc-panel-2);
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  white-space: nowrap;
}
.nc-status-left,
.nc-status-right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.nc-status-left {
  flex: 1 1 auto;
}
.nc-status-item {
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-status-item:empty {
  display: none;
}
/* Mouse position: reserves its width only while it has a value (RU-14). */
.nc-status-hover {
  flex: none;
  min-width: 250px;
  color: var(--nc-text);
  font-family: var(--nc-mono);
  font-size: var(--nc-fs-sm);
}
.nc-status-hover.is-idle {
  min-width: 0;
  color: var(--nc-text-dim);
  font-family: var(--nc-font);
}
.nc-status-selection {
  min-width: 0;
  color: var(--nc-text);
  font-variant-numeric: tabular-nums;
}
.nc-status-right .nc-status-item {
  font-variant-numeric: tabular-nums;
}
/* Two-point measure result (F4). */
.nc-status-measure {
  flex: none;
  color: var(--nc-text);
  font-weight: var(--nc-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.nc-status-measure.is-active {
  color: var(--nc-accent-strong);
}
.nc-status-view.is-locked {
  color: var(--nc-accent-strong);
  font-weight: var(--nc-fw-semibold);
}

/* --------------------------------------------- viewport chips and toasts */

.nc-vchips {
  position: absolute;
  z-index: 8;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 140px);
  pointer-events: none;
}
.nc-vchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 6px 0 10px;
  border: 1px solid color-mix(in srgb, var(--nc-accent) 50%, var(--nc-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--nc-panel) 92%, transparent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  color: var(--nc-text);
  font: inherit;
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
  pointer-events: auto;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nc-vchip:hover {
  border-color: var(--nc-accent);
  color: var(--nc-accent-strong);
}
.nc-vchip-x {
  width: 13px;
  height: 13px;
  color: var(--nc-text-dim);
}
.nc-vchip.is-all {
  padding: 0 10px;
  border-color: var(--nc-border-strong);
  font-weight: var(--nc-fw-medium);
}
/* The view lock chip: filled accent, always first, not part of "모두 되돌리기" (RU-32). */
.nc-vchip.is-lock {
  padding-left: 8px;
  border-color: var(--nc-accent);
  background: var(--nc-accent);
  color: var(--nc-accent-contrast);
}
.nc-vchip.is-lock:hover {
  border-color: var(--nc-accent-strong);
  background: var(--nc-accent-strong);
  color: var(--nc-accent-contrast);
}
.nc-vchip.is-lock .nc-vchip-x {
  color: inherit;
}
/* The scene may add .is-flash for 0.3 s on the first locked drag ("끌면 이동합니다", RU-32). */
.nc-vchip.is-lock.is-flash {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nc-accent) 45%, transparent), 0 1px 3px rgba(15, 23, 42, 0.12);
}
.nc-vchip-lock {
  width: 14px;
  height: 14px;
}
/* "아랫면 가공 19개 · 아래에서 보기" (R3-06): the body switches the view, × only closes the hint. */
.nc-vchip.is-hint {
  gap: 0;
  padding: 0;
  border-style: dashed;
  cursor: default;
}
.nc-vchip-main,
.nc-vchip-close {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.nc-vchip-main {
  padding: 0 4px 0 9px;
  border-radius: 999px 0 0 999px;
}
.nc-vchip-close {
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 6px 0 3px;
  border-radius: 0 999px 999px 0;
}
.nc-vchip-main:hover,
.nc-vchip-close:hover {
  color: var(--nc-accent-strong);
}
.nc-vchip-close:hover .nc-vchip-x {
  color: var(--nc-text);
}
.nc-vchip-info {
  width: 14px;
  height: 14px;
  color: var(--nc-accent-strong);
}

/* Playback HUD (RP-13): what is being machined now, top centre of the 3D view. The shell places it
   (clear of the status chips and the view cube); [data-nc-overlay] keeps the scene's fit clear. */
.nc-hud {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  height: calc(28px * var(--nc-ui-scale));
  padding: 0 10px 0 8px;
  overflow: hidden;
  border: 1px solid var(--nc-border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nc-panel) 94%, transparent);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
  color: var(--nc-text);
  font-size: var(--nc-fs-md);
  font-weight: var(--nc-fw-semibold);
  white-space: nowrap;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.nc-hud-play {
  width: 13px;
  height: 13px;
}
.nc-hud-count {
  flex: none;
  font-family: var(--nc-mono);
  font-variant-numeric: tabular-nums;
}
.nc-hud-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.nc-hud-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-hud-meta {
  flex: none;
  color: var(--nc-text);
  font-weight: var(--nc-fw-medium);
  font-variant-numeric: tabular-nums;
}
/* 급송 ↔ F 3,000 changes many times per op: a fixed-width cell keeps the chip still (NP-06). */
.nc-hud-feed {
  flex: none;
  min-width: 9ch;
  color: var(--nc-text);
  font-weight: var(--nc-fw-medium);
  font-variant-numeric: tabular-nums;
}
.nc-hud-feed:empty {
  display: none;
}
.nc-hud-count {
  text-align: right;
}
/* Between two ops (CR-13) and on a link move to the next op (MP-01): the op dimmed with "이동"
   (.7 keeps 13px / 600 text >= 4.5:1, MU-08); a link move shows → instead of ▶. */
.nc-hud.is-between .nc-hud-count,
.nc-hud.is-between .nc-hud-swatch,
.nc-hud.is-between .nc-hud-name,
.nc-hud.is-between .nc-hud-meta {
  opacity: 0.7;
}
.nc-hud-arrow {
  display: none;
  flex: none;
  width: 13px;
  font-size: var(--nc-fs-sm);
  text-align: center;
}
.nc-hud.is-transit .nc-hud-play {
  display: none;
}
.nc-hud.is-transit .nc-hud-arrow {
  display: inline;
}
/* No position yet: the HUD keeps its place (the scene's fit avoids it) but is not seen (1.3). */
.nc-hud.is-idle {
  visibility: hidden;
}
/* A new op: 300 ms highlight in the playback colour. */
.nc-hud.is-flash {
  border-color: var(--nc-playback-outline);
  box-shadow: 0 0 0 3px var(--nc-playback), 0 1px 4px rgba(15, 23, 42, 0.16);
  transition: none;
}
#nc-app[data-state="empty"] .nc-hud {
  display: none;
}
#nc-app[data-state="empty"] .nc-vchips {
  display: none;
}

/* Toasts: bottom right of the 3D view, above the transport bar (the shell moves #nc-toast here). */
#nc-toast {
  position: absolute;
  z-index: 30;
  right: 12px;
  bottom: 72px; /* the shell sets the exact offset above the transport bar and legend */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: min(400px, calc(100% - 24px));
  pointer-events: none;
}
.nc-toast-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  padding: 8px 6px 8px 10px;
  border: 1px solid var(--nc-border);
  border-left: 3px solid var(--nc-accent);
  border-radius: 7px;
  background: var(--nc-panel);
  box-shadow: var(--nc-shadow);
  pointer-events: auto;
  animation: nc-toast-in 0.16s ease-out;
}
.nc-toast-item.is-error {
  border-left-color: var(--nc-danger);
}
.nc-toast-item.is-warning {
  border-left-color: var(--nc-warning);
}
.nc-toast-item.is-success {
  border-left-color: var(--nc-success);
}
.nc-toast-item.is-progress {
  align-items: center;
  width: 340px;
}
.nc-toast-icon {
  margin-top: 1px;
  color: var(--nc-accent);
}
.is-error > .nc-toast-icon {
  color: var(--nc-danger);
}
.is-warning > .nc-toast-icon {
  color: var(--nc-warning);
}
.is-success > .nc-toast-icon {
  color: var(--nc-success);
}
.nc-toast-text {
  min-width: 0;
  /* Break a long file name only when it cannot fit on its own line (RU-30). */
  overflow-wrap: break-word;
}
.nc-toast-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.nc-toast-item.is-progress .nc-toast-body {
  align-items: stretch;
}
.nc-toast-body .nc-toast-text {
  font-variant-numeric: tabular-nums;
}
.nc-toast-item.is-progress .nc-toast-text {
  font-weight: var(--nc-fw-semibold);
}
.nc-toast-sub {
  overflow: hidden;
  color: var(--nc-text-dim);
  font-size: var(--nc-fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Collapsible open summary: a small pill until clicked (does not keep covering the 3D view). */
.nc-toast-pill {
  display: none;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nc-text);
  font: inherit;
  font-weight: var(--nc-fw-semibold);
  text-align: left;
  cursor: pointer;
}
.nc-toast-item.is-collapsed {
  align-items: center;
  padding-top: 4px;
  padding-bottom: 4px;
}
.nc-toast-item.is-collapsed .nc-toast-pill {
  display: block;
}
.nc-toast-item.is-collapsed .nc-toast-body > :not(.nc-toast-pill) {
  display: none !important;
}
.nc-toast-link {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nc-accent-strong);
  font: inherit;
  font-weight: var(--nc-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.nc-toast-details {
  display: grid;
  gap: 1px;
  width: 100%;
  max-height: min(40vh, 260px);
  margin: 2px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.nc-toast-detail {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 3px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--nc-text);
  font: inherit;
  font-size: var(--nc-fs-sm);
  text-align: left;
  overflow-wrap: anywhere;
}
.nc-toast-detail.is-link {
  cursor: pointer;
}
.nc-toast-detail.is-link:hover {
  background: var(--nc-hover);
}
.nc-toast-detail-icon {
  width: 14px;
  height: 14px;
  color: var(--nc-text-dim);
}
.nc-toast-detail-icon.is-error {
  color: var(--nc-danger);
}
.nc-toast-detail-icon.is-warning {
  color: var(--nc-warning);
}
.nc-toast-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--nc-text-dim);
  cursor: pointer;
}
.nc-toast-close:hover {
  background: var(--nc-hover);
  color: var(--nc-text);
}
.nc-toast-close .nc-icon {
  width: 13px;
  height: 13px;
}
.nc-progress {
  position: relative;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--nc-border-soft);
}
.nc-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 2px;
  background: var(--nc-accent);
  transition: width 0.15s;
}
.nc-progress[data-phase="parse"]::after,
.nc-progress[data-phase="print"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nc-accent) 45%, transparent), transparent);
  animation: nc-progress-sweep 1.1s linear infinite;
}

@keyframes nc-toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes nc-progress-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* ------------------------------------------------- empty state, dropzone */

.nc-empty {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.nc-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 440px;
  text-align: center;
}
.nc-empty-card .nc-btn {
  pointer-events: auto;
}
.nc-empty-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  color: var(--nc-accent);
}
.nc-empty-icon svg {
  stroke-width: 1.2;
}
.nc-empty-title {
  margin: 0 0 6px;
  font-size: var(--nc-fs-xl);
  font-weight: var(--nc-fw-bold);
  letter-spacing: -0.01em;
}
.nc-empty-text {
  margin: 0 0 12px;
  color: var(--nc-text-dim);
}
.nc-empty-formats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.nc-empty-formats li {
  padding: 2px 9px;
  border: 1px solid var(--nc-border);
  border-radius: 999px;
  background: var(--nc-panel);
  font-size: var(--nc-fs-sm);
  font-weight: var(--nc-fw-semibold);
}
.nc-empty-hint {
  margin: 12px 0 4px;
  color: var(--nc-text-dim);
}
.nc-empty-ext {
  margin: 0;
  color: var(--nc-text-dim);
  font: var(--nc-fs-sm) var(--nc-mono);
}

#nc-dropzone {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--nc-accent) 10%, color-mix(in srgb, var(--nc-bg) 70%, transparent));
  backdrop-filter: blur(2px);
  pointer-events: none;
}
#nc-dropzone::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed var(--nc-accent);
  border-radius: 14px;
}
.nc-dropzone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 32px;
  border-radius: 12px;
  background: var(--nc-panel);
  box-shadow: var(--nc-shadow);
}
.nc-dropzone-icon {
  width: 36px;
  height: 36px;
  color: var(--nc-accent);
}
.nc-dropzone-title {
  font-size: var(--nc-fs-xl);
  font-weight: var(--nc-fw-bold);
}
.nc-dropzone-text {
  color: var(--nc-text-dim);
}

/* ---------------------------------------------------------------- dialog */

.nc-dialog-backdrop {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 12, 18, 0.4);
}
.nc-dialog {
  width: min(420px, 100%);
  padding: 18px 18px 14px;
  border: 1px solid var(--nc-border);
  border-radius: 10px;
  background: var(--nc-panel);
  box-shadow: var(--nc-shadow);
}
.nc-dialog-title {
  margin: 0 0 8px;
  font-size: var(--nc-fs-lg);
  font-weight: var(--nc-fw-bold);
}
.nc-dialog-text {
  margin: 0 0 16px;
  color: var(--nc-text-dim);
  overflow-wrap: anywhere;
}
.nc-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Print sheet panel (LR-01): over the inert viewer while the sheet is made and until 「인쇄」 or
   「닫기」. It lives on <body>, outside #nc-app, so it brings the app's base rules with it. */
.nc-print-backdrop {
  z-index: 1200;
  font: var(--nc-fs-md) / 1.45 var(--nc-font);
  color: var(--nc-text);
}
.nc-print-backdrop,
.nc-print-backdrop *,
.nc-print-backdrop *::before,
.nc-print-backdrop *::after {
  box-sizing: border-box;
}
.nc-print-backdrop [hidden] {
  display: none !important;
}
.nc-print-backdrop :focus-visible {
  outline: 2px solid var(--nc-focus-color);
  outline-offset: 2px;
}
.nc-print-panel {
  width: min(400px, 100%);
}
.nc-print-panel-status {
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.nc-print-panel-bar {
  margin: 0 0 16px;
}
.nc-print-panel-detail {
  margin: 0 0 16px;
  color: var(--nc-text-dim);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.nc-print-panel.is-attention {
  animation: nc-print-attention 0.6s ease;
}
@keyframes nc-print-attention {
  30% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--nc-accent) 55%, transparent),
      var(--nc-shadow);
  }
}

#nc-app[data-busy="true"] .nc-toolbar {
  cursor: progress;
}

/* ---------------------------------------------------- narrow screens */

@media (max-width: 1180px) {
  .nc-brand-name {
    font-size: var(--nc-fs-md);
  }
  /* "전체 맞춤" / "선택 맞춤" keep their words (their icons differ only a little, RU-15). */
  .nc-toolgroup > .nc-btn:not(.nc-btn-primary):not(.nc-keep-label) .nc-btn-label {
    display: none;
  }
  .nc-toolgroup > .nc-btn:not(.nc-btn-primary):not(.nc-keep-label) {
    width: 28px;
    padding: 0;
  }
  .nc-toolgroup > .nc-btn.nc-keep-label {
    padding: 0 7px;
  }
  .nc-segmented .nc-btn {
    padding: 0 7px;
  }
  /* The lock button keeps one narrow width: its icon, plus "위" / "아래" while locked (NU-07). */
  .nc-segmented .nc-btn-lock {
    width: 56px;
    min-width: 0;
    padding: 0 4px;
    gap: 4px;
  }
  .nc-btn-lock .nc-btn-label {
    display: none;
  }
  .nc-btn-lock .nc-btn-short:not(:empty) {
    display: inline;
  }
}

@media (max-width: 899px) {
  body.nc-viewer {
    overflow: auto;
  }
  #nc-app {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  #nc-header {
    position: sticky;
    top: 0;
  }
  .nc-toolbar {
    gap: 6px;
    padding: 0 8px;
  }
  .nc-brand-name {
    display: none;
  }
  .nc-hide-narrow {
    display: none !important;
  }
  .nc-show-narrow {
    display: inline-flex !important;
  }
  .nc-toolgroup > .nc-btn,
  .nc-toolgroup-end > .nc-btn {
    min-width: 32px;
    height: 32px;
  }
  .nc-toolgroup > .nc-btn:not(.nc-btn-primary) {
    width: 32px;
  }
  .nc-filetab-main {
    min-height: 32px;
  }
  #nc-main {
    display: flex;
    flex-direction: column;
  }
  .nc-resizer,
  .nc-edge-handle,
  .nc-rail {
    display: none !important;
  }
  #nc-viewport {
    order: 1;
    height: 56vh;
    min-height: 300px;
  }
  #nc-left {
    order: 2;
    grid-template-rows: auto minmax(260px, 46vh) auto;
    border-top: 1px solid var(--nc-border);
  }
  #nc-right {
    order: 3;
    grid-template-rows: minmax(240px, 48vh) auto;
    border-top: 1px solid var(--nc-border);
  }
  #nc-info {
    max-height: 70vh;
    border-top: 1px solid var(--nc-border);
  }
  #nc-transport {
    right: 8px;
    bottom: 8px;
    left: 8px;
  }
  #nc-toast {
    right: 8px;
    width: calc(100% - 16px);
  }
  .nc-vchips {
    max-width: calc(100% - 100px);
  }
  #nc-status {
    position: sticky;
    bottom: 0;
    gap: 10px;
  }
  .nc-status-hover {
    display: none;
  }
  .nc-popover,
  .nc-popover.nc-help,
  .nc-popover.nc-settings,
  .nc-popover.nc-switcher {
    right: 8px;
    left: 8px;
    width: auto;
  }
  .nc-help-groups {
    column-count: 1;
  }
  .nc-popover.nc-switcher {
    top: calc(var(--nc-header-h) + var(--nc-tabs-h) + 4px);
  }
  .nc-popover.nc-menu {
    right: auto;
    left: auto;
  }
  .nc-menu-item {
    min-height: 36px;
  }
  .nc-op-eye {
    opacity: 1;
  }
}

/* --------------------------------------------------------- print plan (F2) */

#nc-print {
  display: none;
}
/* Only while the shell prints the plan (`body.nc-printing`, FR-06): the browser's own print
   (Ctrl/Cmd+P) keeps printing the screen, and a sheet left from a test build never prints. The A4
   landscape page is a named page so it does not change the browser's default print either. */
@page nc-plan {
  size: A4 landscape;
  margin: 10mm;
}
@media print {
  body.nc-viewer.nc-printing {
    height: auto;
    overflow: visible;
    background: #fff;
    color: #111;
  }
  html:has(body.nc-printing) {
    height: auto;
  }
  body.nc-viewer.nc-printing > :not(#nc-print) {
    display: none !important;
  }
  body.nc-printing #nc-print {
    display: block;
    page: nc-plan;
    color: #111;
    font: 10pt/1.35 var(--nc-font);
  }
  .nc-print-omitted {
    margin: 0;
    padding: 2px 6px;
    border-top: 1px solid #999;
    font-size: 8.5pt;
  }
  .nc-print-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid #111;
  }
  .nc-print-title {
    margin: 0;
    font-size: 15pt;
    font-weight: 700;
  }
  .nc-print-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin: 0;
  }
  .nc-print-fact {
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
  }
  .nc-print-facts dt {
    color: #555;
  }
  .nc-print-facts dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .nc-print-plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6mm;
    margin-bottom: 6px;
    break-inside: avoid;
  }
  .nc-print-plans.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nc-print-plan {
    margin: 0;
    border: 1px solid #999;
  }
  .nc-print-plan figcaption {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 6px;
    border-bottom: 1px solid #999;
    font-weight: 700;
  }
  .nc-print-scale {
    flex: none;
    color: #444;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  /* Fixed printed sizes (1400 × 1000 pictures): the shell's scale line is worked out from these
     widths (PRINT_IMAGE_MM in nc_viewer_app.js). */
  .nc-print-plan img {
    display: block;
    width: 154mm;
    height: 110mm;
    margin: 0 auto;
    object-fit: contain;
  }
  .nc-print-plans.is-two .nc-print-plan img {
    width: 133mm;
    height: 95mm;
  }
  /* A zoomed plan: one page each, under a one-line head; the op table follows on its own page. */
  .nc-print-page {
    break-before: page;
    break-inside: avoid;
  }
  .nc-print-plan.is-zoom img {
    width: 210mm;
    height: 150mm;
  }
  .nc-print-head.is-compact {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
  }
  .nc-print-head.is-compact .nc-print-title {
    font-size: 11pt;
    white-space: nowrap;
  }
  .nc-print-head.is-compact .nc-print-facts {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .nc-print-ops.is-paged {
    break-before: page;
  }
  .nc-print-missing {
    padding: 20mm 6mm;
    color: #555;
    text-align: center;
  }
  .nc-print-ops {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
  }
  .nc-print-ops th,
  .nc-print-ops td {
    padding: 1.5px 4px;
    border: 1px solid #bbb;
    text-align: left;
  }
  .nc-print-ops th {
    background: #eee;
  }
  .nc-print-ops .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .nc-print-ops tr {
    break-inside: avoid;
  }
  .nc-print-ops tr.is-bottom td {
    background: #f4f4f4;
  }
  .nc-print-note {
    margin: 4px 0 0;
    color: #444;
    font-size: 8.5pt;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-toast-item,
  .nc-progress[data-phase="parse"]::after,
  .nc-progress[data-phase="print"]::after,
  .nc-print-panel.is-attention {
    animation: none;
  }
  .nc-fold-summary::before,
  .nc-edge-handle,
  .nc-hud {
    transition: none;
  }
}