/* Core styles for the 2D CAD page: design tokens shared by every module, the
   window layout, the drawing area and the command line. Module styles live in
   cad2d_shell.css (cads-), cad2d_annotate.css (cadc-), cad2d_palettes.css (cadp-). */

:root,
.cad-app[data-theme="dark"] {
  color-scheme: dark;
  /* AutoCAD 2026 dark theme */
  --cad-bg-app: #252b33;
  --cad-bg-titlebar: #1f242b;
  --cad-bg-ribbon-tabs: #2b313a;
  --cad-bg-ribbon: #3b4453;
  --cad-bg-panel: #3b4453;
  --cad-bg-panel-title: #333b48;
  --cad-bg-filetabs: #252b33;
  --cad-bg-filetab: #2e3540;
  --cad-bg-filetab-active: #3b4453;
  --cad-bg-status: #2b313a;
  --cad-bg-menu: #2f3642;
  --cad-bg-dialog: #3b4453;
  --cad-bg-input: #262c35;
  --cad-bg-hover: #4a5566;
  --cad-bg-pressed: #56657a;
  --cad-bg-toggle-on: #1f5e8c;
  --cad-bg-commandline: rgba(52, 60, 73, 0.94);
  --cad-bg-history: rgba(35, 41, 50, 0.62);
  --cad-bg-tooltip: #3f4857;
  --cad-model-bg: #212830;
  --cad-paper-bg: #323a45;
  --cad-sheet-bg: #ffffff;
  --cad-border: #1b2027;
  --cad-border-soft: #4a5463;
  --cad-separator: #56606f;
  --cad-text: #f0f2f5;
  --cad-text-muted: #aeb6c2;
  --cad-text-disabled: #6f7887;
  --cad-accent: #0696d7;
  --cad-accent-strong: #2eaef0;
  --cad-accent-text: #ffffff;
  --cad-keyword: #53b8f5;
  --cad-warning: #f5b400;
  --cad-danger: #e5484d;
  --cad-success: #3fb950;
  --cad-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  --cad-scrollbar: #56606f;
}

.cad-app[data-theme="light"] {
  color-scheme: light;
  --cad-bg-app: #e6e8eb;
  --cad-bg-titlebar: #f3f3f3;
  --cad-bg-ribbon-tabs: #eaeaea;
  --cad-bg-ribbon: #f5f5f5;
  --cad-bg-panel: #f5f5f5;
  --cad-bg-panel-title: #e4e6e9;
  --cad-bg-filetabs: #dfe2e6;
  --cad-bg-filetab: #e9ebee;
  --cad-bg-filetab-active: #f5f5f5;
  --cad-bg-status: #eaeaea;
  --cad-bg-menu: #fafafa;
  --cad-bg-dialog: #f5f5f5;
  --cad-bg-input: #ffffff;
  --cad-bg-hover: #d7e7f5;
  --cad-bg-pressed: #bcd6ee;
  --cad-bg-toggle-on: #b9dcf3;
  --cad-bg-commandline: rgba(245, 245, 245, 0.95);
  --cad-bg-history: rgba(245, 245, 245, 0.7);
  --cad-bg-tooltip: #ffffff;
  --cad-model-bg: #212830;
  --cad-paper-bg: #c8ccd2;
  --cad-sheet-bg: #ffffff;
  --cad-border: #c3c7cd;
  --cad-border-soft: #d3d6db;
  --cad-separator: #c8ccd2;
  --cad-text: #1f2328;
  --cad-text-muted: #59616c;
  --cad-text-disabled: #9aa1ab;
  --cad-accent: #0696d7;
  --cad-accent-strong: #0579b0;
  --cad-accent-text: #ffffff;
  --cad-keyword: #0579b0;
  --cad-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  --cad-scrollbar: #b8bec7;
}

:root {
  --cad-font: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --cad-font-mono: Consolas, "D2Coding", "Cascadia Mono", Menlo, "Apple SD Gothic Neo", monospace;
  --cad-font-size: 12px;
  --cad-titlebar-h: 32px;
  --cad-ribbon-tabs-h: 26px;
  --cad-ribbon-panels-h: 96px;
  --cad-filetabs-h: 28px;
  --cad-statusbar-h: 30px;
  --cad-radius: 3px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--cad-bg-app);
  color: var(--cad-text);
  font: var(--cad-font-size)/1.35 var(--cad-font);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

.cad-app {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) var(--cad-statusbar-h);
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background: var(--cad-bg-app);
  color: var(--cad-text);
}

.cad-app[data-cleanscreen="true"] .cad-ribbon,
.cad-app[data-cleanscreen="true"] .cad-titlebar,
.cad-app[data-cleanscreen="true"] .cad-dock { display: none; }

/* Fixed rows so hiding a bar (clean screen, STATUSBAR 0) never shifts the others. */
#cad-titlebar { grid-row: 1; }
#cad-ribbon { grid-row: 2; }
#cad-filetabs { grid-row: 3; }
#cad-workspace { grid-row: 4; }
#cad-statusbar { grid-row: 5; }

.cad-titlebar { min-height: var(--cad-titlebar-h); background: var(--cad-bg-titlebar); }
.cad-ribbon { background: var(--cad-bg-ribbon); }
.cad-filetabs { min-height: var(--cad-filetabs-h); background: var(--cad-bg-filetabs); }

.cad-workspace {
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.cad-dock {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cad-bg-panel);
}
.cad-dock:empty { display: none; }
.cad-dock-left { border-right: 1px solid var(--cad-border); }
.cad-dock-right { border-left: 1px solid var(--cad-border); }

/* ------------------------------------------------------------ drawing area */

.cad-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--cad-model-bg);
  touch-action: none;
}

.cad-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  cursor: none;
}
.cad-app[data-state="start"] .cad-canvas,
.cad-app[data-state="start"] .cad-overlay,
.cad-app[data-state="start"] .cad-commandline .cad-command-history { visibility: hidden; }
.cad-canvas[data-cursor="pan"] { cursor: grab; }
.cad-canvas[data-cursor="panning"] { cursor: grabbing; }
.cad-canvas[data-cursor="zoom"] { cursor: zoom-in; }

.cad-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cad-overlay > * { pointer-events: auto; }
.cad-overlay > .cad-tip,
.cad-overlay > .cad-dyninput { pointer-events: none; }

.cad-start {
  position: absolute;
  inset: 0;
  overflow: auto;
  background: var(--cad-bg-app);
}
.cad-app:not([data-state="start"]) .cad-start { display: none; }

.cad-tip {
  position: absolute;
  z-index: 6;
  padding: 2px 6px;
  border: 1px solid var(--cad-border-soft);
  border-radius: 2px;
  background: var(--cad-bg-tooltip);
  color: var(--cad-text);
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Dynamic input (F12): prompt + input fields beside the cursor. */
.cad-dyninput {
  position: absolute;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}
.cad-dyninput-prompt {
  align-self: flex-start;
  padding: 2px 6px;
  border: 1px solid var(--cad-border-soft);
  background: var(--cad-bg-tooltip);
  color: var(--cad-text);
  white-space: nowrap;
}
.cad-dyninput-fields { display: flex; gap: 3px; }
.cad-dyninput-field {
  min-width: 64px;
  padding: 1px 5px;
  border: 1px solid var(--cad-border-soft);
  background: var(--cad-bg-input);
  color: var(--cad-text);
  font-family: var(--cad-font-mono);
  white-space: nowrap;
}
.cad-dyninput-field[data-active="true"] { border-color: var(--cad-accent); background: var(--cad-bg-hover); }
.cad-dyninput-field[data-locked="true"]::after { content: " 🔒"; font-size: 9px; }
.cad-dyninput-dimension {
  position: absolute;
  padding: 0 4px;
  border: 1px solid var(--cad-border-soft);
  background: var(--cad-bg-input);
  color: var(--cad-text);
  font-family: var(--cad-font-mono);
  font-size: 11px;
  white-space: nowrap;
}
.cad-dyninput-dimension[data-active="true"] { border-color: var(--cad-accent); }
/* Dimension input: value boxes on temporary dimensions (centred on the dimension line). */
.cad-dyninput > .cad-dyninput-dimension { transform: translate(-50%, -50%); }
.cad-dyninput-dimension[data-active="true"] { background: var(--cad-bg-hover); }
.cad-dyninput-dimension[data-locked="true"]::after { content: " 🔒"; font-size: 9px; }
.cad-dyninput-graphics {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  color: var(--cad-text-muted);
}
.cad-dyninput-graphics path { fill: none; stroke: currentColor; stroke-width: 1; }
.cad-dyninput-graphics path.cad-dyninput-ref { stroke-dasharray: 3 3; }
.cad-dyninput-graphics path.cad-dyninput-arrow { fill: currentColor; stroke: none; }

.cad-drop {
  position: absolute;
  inset: 12px;
  z-index: 20;
  display: grid;
  place-items: center;
  border: 2px dashed var(--cad-accent);
  border-radius: 6px;
  background: rgba(6, 150, 215, 0.12);
  font-size: 16px;
  pointer-events: none;
}

.cad-loading {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 21;
  transform: translate(-50%, -50%);
  min-width: 260px;
  padding: 16px 20px;
  border: 1px solid var(--cad-border-soft);
  border-radius: 4px;
  background: var(--cad-bg-dialog);
  box-shadow: var(--cad-shadow);
  text-align: center;
}
.cad-loading p { margin: 10px 0; }
.cad-spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border: 3px solid var(--cad-border-soft);
  border-top-color: var(--cad-accent);
  border-radius: 50%;
  animation: cad-spin 0.8s linear infinite;
}
@keyframes cad-spin { to { transform: rotate(360deg); } }
.cad-progress { height: 4px; border-radius: 2px; background: var(--cad-bg-input); overflow: hidden; }
.cad-progress > div { height: 100%; width: 0; background: var(--cad-accent); transition: width 0.2s; }

.cad-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--cad-statusbar-h) + 64px);
  z-index: 60;
  transform: translateX(-50%);
  max-width: min(640px, calc(100vw - 32px));
  padding: 8px 14px;
  border: 1px solid var(--cad-border-soft);
  border-radius: 4px;
  background: var(--cad-bg-dialog);
  box-shadow: var(--cad-shadow);
  /* A message over the drawing area: clicks and right-clicks reach the drawing. */
  pointer-events: none;
}
.cad-toast[data-kind="error"] { border-color: var(--cad-danger); }

.cad-floating { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.cad-floating > * { pointer-events: auto; }

/* ---------------------------------------------------------- command line */

.cad-commandline {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 8;
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--cad-font-mono);
  font-size: 12px;
  /* The box spans the history lines above the input row: only the row (and the expanded
     history) take the pointer, the rest is drawing area (clicks, right-click menu). */
  pointer-events: none;
}
.cad-app[data-commandline="false"] .cad-commandline { display: none; }

.cad-command-history {
  margin: 0;
  padding: 0 0 2px 70px;
  list-style: none;
  pointer-events: none;
}
.cad-command-history li {
  width: fit-content;
  max-width: 100%;
  padding: 0 6px;
  background: var(--cad-bg-history);
  color: var(--cad-text);
  white-space: pre-wrap;
  word-break: break-all;
}
.cad-command-history li[data-age="1"] { opacity: 0.85; }
.cad-command-history li[data-age="2"] { opacity: 0.6; }
.cad-command-history[data-expanded="true"] {
  max-height: 40vh;
  overflow: auto;
  pointer-events: auto;
  background: var(--cad-bg-commandline);
  border: 1px solid var(--cad-border);
  padding: 4px 0;
}
.cad-command-history[data-expanded="true"] li { background: transparent; opacity: 1; }

.cad-command-row {
  pointer-events: auto;
  opacity: var(--cad-commandline-opacity, 1);
  transition: opacity 0.15s;
  position: relative;
  display: flex;
  align-items: stretch;
  height: 28px;
  border: 1px solid var(--cad-border);
  background: var(--cad-bg-commandline);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.cad-commandline:hover .cad-command-row,
.cad-commandline:focus-within .cad-command-row { opacity: 1; }

.cad-command-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--cad-border-soft);
  background: transparent;
  color: var(--cad-text-muted);
  cursor: pointer;
}
.cad-command-button:hover { background: var(--cad-bg-hover); color: var(--cad-text); }
.cad-command-button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cad-command-recent { width: 34px; gap: 0; }
.cad-command-recent .cad-caret { width: 9px; }
.cad-command-field {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 6px;
  gap: 6px;
  cursor: text;
}
.cad-command-prompt { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cad-text); }
.cad-command-prompt .cad-keyword { color: var(--cad-keyword); cursor: pointer; }
.cad-command-prompt .cad-keyword:hover { text-decoration: underline; }
.cad-command-prompt .cad-keyword-key { font-weight: 700; }
/* The running command's name before the current prompt ("LINE 다음 점 지정 …"). */
.cad-command-prompt .cad-prompt-command { color: var(--cad-text-muted); }
/* Typed text keeps its case (layer, block and file names, attribute values). */
.cad-command-input {
  flex: 1;
  min-width: 80px;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--cad-text);
  font-family: var(--cad-font-mono);
}
.cad-command-input::placeholder { color: var(--cad-text-muted); }

.cad-command-suggest {
  position: absolute;
  left: 58px;
  bottom: calc(100% + 2px);
  z-index: 9;
  min-width: 300px;
  max-height: 280px;
  margin: 0;
  padding: 2px 0;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--cad-border);
  background: var(--cad-bg-menu);
  box-shadow: var(--cad-shadow);
  font-family: var(--cad-font);
}
.cad-command-suggest li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  cursor: pointer;
}
.cad-command-suggest li[aria-selected="true"], .cad-command-suggest li:hover { background: var(--cad-bg-hover); }
.cad-command-suggest svg { width: 16px; height: 16px; flex: none; }
.cad-command-suggest .cad-suggest-name { font-family: var(--cad-font-mono); }
.cad-command-suggest .cad-suggest-label { color: var(--cad-text-muted); }
.cad-command-suggest .cad-suggest-alias { margin-left: auto; color: var(--cad-text-muted); font-family: var(--cad-font-mono); }
/* System variables and named objects (INPUTSEARCHOPTIONS): their kind on the right. */
.cad-command-suggest .cad-suggest-kind { margin-left: auto; color: var(--cad-text-muted); font-size: 11px; }
.cad-command-suggest .cad-suggest-icon { display: inline-flex; width: 16px; height: 16px; flex: none; }
/* Typing at the cursor with dynamic input: the list opens under the tooltip (left/top set inline). */
.cad-command-suggest[data-at="cursor"] { bottom: auto; min-width: 240px; }
/* 입력 검색 옵션 (INPUTSEARCHOPTIONS) dialog. */
.cad-inputsearch { display: flex; flex-direction: column; gap: 6px; }
.cad-inputsearch .cad-check { display: flex; align-items: center; gap: 6px; }
.cad-inputsearch-kinds { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 6px 10px; border: 1px solid var(--cad-border-soft); }

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

.cad-statusbar {
  display: flex;
  align-items: stretch;
  min-width: 0;
  background: var(--cad-bg-status);
  border-top: 1px solid var(--cad-border);
  overflow: hidden;
}
.cad-status-left { display: flex; align-items: stretch; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.cad-status-right { display: flex; align-items: stretch; flex: 0 1 auto; overflow: hidden; }

/* ---------------------------------------------------------------- misc */

.cad-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.cad-app ::-webkit-scrollbar-thumb { background: var(--cad-scrollbar); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
.cad-app ::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 760px) {
  :root { --cad-ribbon-panels-h: 0px; }
  .cad-commandline { left: 6px; right: 6px; bottom: 6px; }
  .cad-command-history { padding-left: 0; }
}