/* 겉모습만 손보는 층. templates/spec/base.html 의 <style> 맨 끝에 붙는다.

   이 파일이 지키는 것
     - **자리를 바꾸지 않는다.** 무엇이 어디 있는지는 그대로다.
       색·테두리·모서리·여백처럼 눈에만 닿는 것만 손댄다
     - **사양서와 발주서는 건드리지 않는다** (.sheet-* · .lam-* · @media print).
       종이에 나가는 문서라 mm 단위로 맞춰 놓았고, 검사가 그 값을 읽어 높이를 셈한다
     - **그림판 안쪽도 건드리지 않는다** (.figure-stage · .place-stage · .pick-figure).
       SVG 안 글자는 브라우저가 폭을 재서 칸에 맞춰 줄인다 — 글꼴이 바뀌면 그 셈이 달라진다
     - **body 의 글꼴을 바꾸지 않는다.** 위 두 가지가 모두 body 글꼴을 물려받는다
     - 붙여넣기 격자의 병합 칸(.grid-table td.merged)도 그대로 둔다.
       꾸미지 않기로 한 번 정한 자리다 (2026-08-13)

   글꼴은 화면에만 쓰는 곳(도구 줄·제목·단추·카드)에만 새로 준다. */

:root {
  --ink: #101828;          /* 본문 글자 */
  --ink-soft: #475467;
  --ink-mute: #667085;     /* 설명 글자 */
  --line: #e4e7ec;         /* 칸 테두리 */
  --line-soft: #eef0f3;
  --paper: #ffffff;        /* 카드 */
  --ground: #f6f7f9;       /* 바탕 */
  --nav: #111827;          /* 위쪽 어두운 줄 */
  --nav-ink: #e5e7eb;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.14);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --radius: 10px;
  /* 화면에만 쓰는 글꼴. body 에는 주지 않는다 — 위 머리말 참고 */
  --ui: "Pretendard", "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
}

body {
  background: var(--ground);
  color: var(--ink);
  margin: 0;
  padding: 0 24px 40px;
  -webkit-font-smoothing: antialiased;
}

/* ── 위쪽 줄 ─────────────────────────────────────────────────
   어두운 띠로 화면 폭을 가로지른다. body 의 좌우 여백만큼 밖으로 빼고
   그만큼 안쪽 여백을 준다 — 마크업은 그대로다. */
.toolbar {
  margin: 0 -24px 24px;
  padding: 14px 24px;
  background: var(--nav);
  font-family: var(--ui);
  gap: 10px;
}
.toolbar a {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-right: 8px;
}
.toolbar a:hover { color: #fff; }
.toolbar button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--nav-ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  padding: 6px 12px;
  font-family: var(--ui);
  font-size: 13px;
  cursor: pointer;
}
.toolbar button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ── 제목과 설명 ─────────────────────────────────────────── */
h1 {
  font-family: var(--ui);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
}
.muted {
  font-family: var(--ui);
  color: var(--ink-mute);
  line-height: 1.6;
}
.flash {
  font-family: var(--ui);
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 8px;
  padding: 10px 14px;
}

/* ── 카드 ────────────────────────────────────────────────── */
.report {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 24px;
}
.report h2, .report h3 {
  font-family: var(--ui);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.report h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 22px;
}

/* ── 적는 칸 ─────────────────────────────────────────────── */
.field-grid > label > span, .field-grid > .field > span {
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.field-grid input, .field-grid select,
.grid-controls input[type="number"],
.model-tools input[type="number"],
.figure-size input, .place-array input {
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .12s, box-shadow .12s;
}
.field-grid input:focus, .field-grid select:focus,
.grid-controls input[type="number"]:focus,
.model-tools input[type="number"]:focus,
.figure-size input:focus, .place-array input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-grid select { background: #fbfcfd; }
.pair em { color: #98a2b3; }

/* ── 표 ──────────────────────────────────────────────────── */
.scroll { border-radius: 8px; }
.grid-table th, .model-table th, .process-table th {
  font-family: var(--ui);
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  border-color: var(--line);
}
.grid-table td, .model-table td, .process-table td { border-color: var(--line); }

/* ── 단추 ────────────────────────────────────────────────── */
.figure-panel button, .place-tools button, .place-send,
.pick-again, .pick-send, .model-tools button {
  font-family: var(--ui);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.figure-panel button:hover, .place-tools button:hover, .place-send:hover,
.pick-again:hover, .pick-send:hover, .model-tools button:hover {
  background: #f9fafb;
  border-color: #b9c0cc;
}
/* 화면을 벗어나 새 창을 여는 단추만 진하게. 눈이 먼저 닿아야 하는 자리다 */
.place-send, .pick-send {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.place-send:hover, .pick-send:hover { background: #1d4ed8; border-color: #1d4ed8; }
.figure-panel button:disabled, .place-tools button:disabled,
.model-tools button:disabled, .figure-history button:disabled {
  background: #f9fafb;
  border-color: var(--line);
  color: #b0b7c3;
  box-shadow: none;
  cursor: default;
}

/* ── 도구 줄 ─────────────────────────────────────────────── */
.model-tools {
  font-family: var(--ui);
  padding: 8px 10px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.model-tools .bar { background: #dfe3e8; }

/* ── 오른쪽 패널 (배치도 · 직접 배치) ────────────────────── */
.figure-panel, .place-panel { font-family: var(--ui); }
.figure-size em, .place-scale { color: var(--ink-mute); }
.figure-stage, .place-stage, .figure-saved svg {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.place-calc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.place-calc .sum { color: var(--ink); }
.place-legend { font-family: var(--ui); }
.place-legend td { border-color: var(--line-soft); }

/* ── 추천 카드 ─────────────────────────────────────────────
   카드 자체에는 글꼴을 주지 않는다. 안에 그림(.pick-figure)이 들어 있고,
   그 안 글자는 물려받은 글꼴로 그려진다. */
.pick-card, .pick-key {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pick-key li, .pick-card dt, .pick-card dd, .pick-array li {
  font-family: var(--ui);
}
.pick-card dt { color: var(--ink-mute); font-size: 12px; }
.pick-card dd { color: var(--ink); font-weight: 700; }
.pick-array li { color: var(--ink-soft); }

/* ── 상태 색 ─────────────────────────────────────────────────
   빨강이 네 가지(#c00 · #cc0000 · #f00 · #e34)로 흩어져 있었다.
   화면에 쓰는 것만 여기서 하나로 모은다.

   **종이·SVG 의 빨강은 그대로 둔다.** 사양서 빨간 칸(#f00)과 비고 색(#cc0000)은
   엑셀과 짝이 맞춰져 있고 검사가 대조한다. 배치도 분리선(#c00)은 자바스크립트가
   SVG 에 직접 칠하는 값이라 CSS 로 못 옮긴다 — 그림과 범례가 같은 색이라야 한다. */
:root {
  --danger: #d92d20;
  --danger-soft: #fef3f2;
  --danger-line: #fda29b;
  --warn-bg: #fffaeb;
  --warn-line: #fedf89;
  --warn-ink: #b54708;
  --chip: #344054;         /* 번호 딱지 바탕 */
}

/* ── 단추 ────────────────────────────────────────────────────
   세 갈래로 갈려 있었다 — 파란 채움 · 흰 테두리 · 브라우저 기본.
   같은 도구인데 화면마다 '무엇이 주요 동작인가' 가 다르게 보였다.

   기본은 **흰 바탕 테두리**, 주요 동작만 파란 채움, 지우는 것만 빨강이다.
   자리는 안 바꾼다 — 크기와 여백은 base.html 것을 그대로 쓴다. */
.page-head button,
.grid-controls button,
.won-pull-btn,
.won-pull button,
.won-waiting button,
.figure-history button {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.page-head button:hover,
.grid-controls button:hover,
.won-pull-btn:hover,
.won-pull button:hover,
.figure-history button:hover {
  background: #f9fafb;
  border-color: #cfd4dc;
}
/* 주요 동작 하나만 채운다. 보내기 단추는 화면마다 하나뿐이다. */
.grid-controls button[type="submit"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.grid-controls button[type="submit"]:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.grid-controls button:disabled,
.won-pull button:disabled {
  color: #98a2b3;
  background: #f2f4f7;
  border-color: var(--line);
  cursor: default;
}

/* ── 테스트 화면 ─────────────────────────────────────────────
   여기만 디자인 층 밖에 있었다 — 색 39곳이 그때그때 박혀 있고 규칙이 0개였다.
   붙여넣기·폼은 카드에 부드러운 테두리인데 여기는 회색 상자와 원색 딱지라,
   같은 도구인데 화면을 옮기면 다른 프로그램처럼 보였다.

   **자리는 하나도 안 바꾼다.** 높이(620px)·격자·flex 는 base.html 것 그대로다. */

/* 판 하나를 카드로. 윗선 하나로 갈라 두던 것을 상자로 바꾼다 */
.won-group {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.won-group-title { font-family: var(--ui); letter-spacing: -0.01em; }
.won-group-title .won-no { background: var(--chip); border-radius: 6px; }
.won-group-title .muted { color: var(--ink-mute); }

/* 판 전체에 거는 조건. 카드 안의 한 겹 더 안쪽이라 바탕을 살짝 눕힌다 */
.won-group .won-rules {
  font-family: var(--ui);
  background: var(--ground);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.won-group .won-rules h4 { color: var(--ink-mute); letter-spacing: -0.01em; }

/* 모델 줄 */
.won-key { border-bottom: 1px solid var(--line-soft); }
.won-key .won-spec { color: var(--ink-mute); }
.won-at, .won-cap input, .won-key input[type="number"] {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.won-at:focus, .won-cap input:focus, .won-key input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.won-cap span, .won-key .unit { color: var(--ink-mute); }
.won-chip { border: 1px solid rgba(16, 24, 40, 0.15); border-radius: 5px; }

/* 그림판과 후보 목록. 테두리만 눕히고 크기는 그대로 둔다 */
.won-stage, .won-list > div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.won-list h3 { font-family: var(--ui); color: var(--ink-soft); }
.won-facts { font-family: var(--ui); }
.won-facts dt { color: var(--ink-mute); }
.won-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--ui);
}
.won-card:hover { border-color: #cfd4dc; }
.won-card.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft) inset;
}
.won-card i { color: var(--accent); }

/* 분리선 고르는 칸 · 지금 어떻게 나뉘었는지 */
.won-cut { font-family: var(--ui); }
.won-cut.all { border-top: 1px solid var(--line-soft); color: var(--danger); }
.won-zones {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--ink-soft);
}

/* 다른 판에서 끌어오는 창 */
.won-pull {
  font-family: var(--ui);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 8px;
}
.won-pull-key { border-radius: 6px; }
.won-pull-key:hover { background: rgba(180, 83, 9, 0.08); }
.won-pull-key.on { background: var(--accent-soft); }
.won-pull-key .won-spec { color: var(--ink-mute); }

/* 판을 기다리는 모델. 아직 안 끝났다는 뜻이라 판 카드(흰 바탕)와 갈라 둔다 */
.won-waiting {
  font-family: var(--ui);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
}
.won-waiting h4 { color: var(--warn-ink); letter-spacing: -0.01em; }
.won-waiting .won-key { border-bottom-color: var(--warn-line); }
.won-waiting .won-none { color: var(--warn-ink); }

/* 판을 지우는 단추. **빨간 바탕에 검은 글씨 그대로 둔다** — 그렇게 하기로
   정한 자리다(base.html 에 까닭이 있다: 흰 글씨는 흑백으로 복사하면 사라진다).
   여기서는 모서리와 글꼴만 나머지 단추와 맞춘다. */
.won-del-btn { font-family: var(--ui); border-radius: 7px; }

/* ── 인쇄 ─────────────────────────────────────────────────
   종이에는 사양서와 발주서만 나간다. 위에서 준 화면용 여백을 되돌린다.
   안 되돌리면 A4 양쪽에 24px 이 더 붙어 사양서가 밀린다. */
@media print {
  body { padding: 0; background: #fff; }
  .toolbar { margin: 0; padding: 0; }
}