/* GAIFAS 부품 — 뼈대(사이드바·상단바·본문)
 * 토큰은 tokens.css 에 있다. 여기서는 값을 직접 쓰지 않고 토큰만 부른다.
 */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-14);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
.num, table td, table th { font-variant-numeric: tabular-nums; }

/* hidden 속성은 어떤 display 지정보다 세다 -- .pill 같은 inline-flex 부품이 hidden 이어도 보이던 것을 막는다 */
[hidden] { display: none !important; }

/* ── 뼈대 ──────────────────────────────────────────────────
 * 사이드바는 화면에 붙어 있고, 본문만 구른다. 표가 47개라 왼쪽이
 * 같이 굴러가면 지금 어느 회사·어느 계산을 보는지 놓친다.
 */
.shell { display: flex; min-height: 100vh; }

.side-nav {
  width: var(--sidebar); flex: none;
  background: var(--panel); border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  z-index: var(--z-side);
  display: flex; flex-direction: column;
}
.side-nav .brand {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-5); height: var(--topbar); flex: none;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-16); font-weight: 800; color: var(--ink);
  letter-spacing: -.02em;
}
.side-nav .brand:hover { text-decoration: none; }
.side-nav .brand .mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-size: var(--t-13); font-weight: 800;
}
.side-nav .brand .mark.deep { background: var(--deep); }

.nav-scroll { padding: var(--s-3) var(--s-3) var(--s-6); overflow-y: auto; flex: 1; }
.nav-group {
  font-size: var(--t-11); font-weight: 700; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase;
  padding: var(--s-4) var(--s-3) var(--s-2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px var(--s-3); border-radius: var(--r-sm);
  color: var(--ink-2); font-size: var(--t-14); font-weight: 500;
  border-left: 3px solid transparent; margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.nav-item .ico { width: 18px; flex: none; text-align: center; opacity: .75; font-size: var(--t-13); }
.nav-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.on {
  background: var(--accent-soft); color: var(--accent-ink);
  border-left-color: var(--accent); font-weight: 700;
}
.nav-item.on .ico { opacity: 1; }
.nav-sub { padding-left: var(--s-6); }
.nav-sub .nav-item { font-size: var(--t-13); padding: 6px var(--s-3); }

/* 고객사 아코디언 -- 하나만 펼쳐진다. 화살표가 돌고 하위 메뉴가 미끄러져 내려온다 */
.nav-acc .nav-sub { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.nav-acc.open .nav-sub { max-height: 160px; }
.nav-acc .caret { flex: none; opacity: .6; transition: transform .22s ease; padding: 2px; border-radius: 4px; }
.nav-acc .caret:hover { opacity: 1; background: var(--line); }
.nav-acc.open .caret { transform: rotate(180deg); }

/* 사이드바 안 숫자 꼬리표 */
.nav-item .n {
  font-size: var(--t-11); font-weight: 700; color: var(--muted);
  background: var(--bg); border-radius: var(--r-pill); padding: 1px 7px; flex: none;
}
.nav-item.on .n { background: var(--panel); color: var(--accent-ink); }

/* ── 본문 쪽 ───────────────────────────────────────────── */
.body-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar); flex: none;
  background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-6);
  position: sticky; top: 0; z-index: var(--z-head);
}
.topbar .search {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 5px var(--s-3); min-width: 260px;
  color: var(--muted); font-size: var(--t-13);
}
.topbar .search input {
  border: 0; background: none; outline: none; font: inherit;
  color: var(--ink); flex: 1; min-width: 0;
}
.topbar .spacer { flex: 1; }
/* 상단바 길표시 -- 사이를 띄워야 '고객사›그린즈㈜›계산 결과' 처럼 붙지 않는다 */
.topbar .crumb {
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  font-size: var(--t-13); color: var(--muted);
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.topbar .crumb a { color: var(--muted); }
.topbar .crumb a:hover { color: var(--ink); }
.topbar .crumb .sep { opacity: .45; }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; display: grid; place-items: center; cursor: pointer;
  color: var(--ink-2); font-size: var(--t-14); position: relative;
}
.icon-btn:hover { background: var(--bg); border-color: var(--line); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); border: 1.5px solid var(--panel);
}

.page { padding: var(--s-6); max-width: var(--content-max); width: 100%; }

/* 화면 제목 줄 — 왼쪽은 제목과 길, 오른쪽은 지금 상태와 버튼 */
.page-head {
  display: flex; align-items: flex-start; gap: var(--s-4);
  flex-wrap: wrap; margin-bottom: var(--s-5);
}
.page-head .t { flex: 1; min-width: 240px; }
.page-head h1 { font-size: var(--t-20); }
.page-head .crumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--t-12); color: var(--muted); margin-top: 3px;
}
.page-head .crumb a { color: var(--muted); }
.page-head .crumb .sep { opacity: .5; }
.page-head .acts { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.foot {
  margin-top: auto; padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-12);
  display: flex; gap: var(--s-4); flex-wrap: wrap;
}
.foot .spacer { flex: 1; }

/* 좁은 화면 — 회의실 노트북까지만 본다. 휴대폰은 대상이 아니다. */
@media (max-width: 1100px) {
  .side-nav { position: fixed; left: 0; top: 0; transform: translateX(-100%);
              transition: transform .18s ease; box-shadow: var(--sh-2); }
  .shell.nav-open .side-nav { transform: none; }
  .page { padding: var(--s-4); }
}

/* ══ 부품 ════════════════════════════════════════════════ */

/* ── 판 ───────────────────────────────────────────────── */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-1);
  margin-bottom: var(--gutter);
}
.panel-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--pad-card); border-bottom: 1px solid var(--line);
}
.panel-head h2, .panel-head h3 { font-size: var(--t-16); flex: 1; min-width: 0; }
.panel-head .ico {
  width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid;
  place-items: center; background: var(--accent-soft); color: var(--accent-ink);
  font-size: var(--t-13);
}
.panel-head .ico.deep { background: var(--deep-soft); color: var(--deep); }
.panel-body { padding: var(--pad-card); }
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }
.panel.flat { box-shadow: none; }
.panel.scroll .panel-body { overflow-x: auto; }

.grid { display: grid; gap: var(--gutter); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 1280px) { .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }

/* ── 숫자 카드 ────────────────────────────────────────── */
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--pad-card); box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.stat .k {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-13); color: var(--muted); font-weight: 500;
}
.stat .k .ico {
  width: 26px; height: 26px; border-radius: 8px; margin-left: auto; flex: none;
  display: grid; place-items: center; background: var(--deep-soft); color: var(--deep);
  font-size: var(--t-12);
}
.stat .row { display: flex; align-items: flex-end; gap: var(--s-3); }
.stat .v { font-size: var(--t-26); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.stat .v small { font-size: var(--t-14); font-weight: 600; color: var(--muted); margin-left: 2px; }
.stat .s { font-size: var(--t-12); color: var(--muted); }
.stat.accent .v { color: var(--accent-ink); }
.stat.bad .v { color: var(--bad); }
.stat.ok .v { color: var(--ok); }

/* 참고 화면의 작은 막대 — 데이터가 있을 때만 쓴다. 장식으로 넣지 않는다. */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-left: auto; }
.spark i { width: 4px; border-radius: 2px; background: var(--accent); opacity: .85; display: block; }
.spark.deep i { background: var(--deep); }

/* ── 알약 ─────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--t-12); font-weight: 600; line-height: 1.5;
  background: var(--bg); color: var(--ink-2); border: 1px solid var(--line);
  white-space: nowrap; vertical-align: middle;
}
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok      { background: var(--ok-soft);     color: var(--ok);         border-color: var(--ok-line); }
.pill.warn    { background: var(--warn-soft);   color: var(--warn);       border-color: var(--warn-line); }
.pill.bad     { background: var(--bad-soft);    color: var(--bad);        border-color: var(--bad-line); }
.pill.accent  { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.pill.deep    { background: var(--deep-soft);   color: var(--deep);       border-color: #c5dde4; }
.pill.solid   { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pill.muted   { color: var(--muted); }

/* ── 한 줄 선택 (참고 화면의 Production|Staging|Development) ── */
.seg {
  display: inline-flex; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 3px; gap: 2px;
}
.seg button, .seg a {
  border: 0; background: none; font: inherit; font-size: var(--t-13); font-weight: 600;
  color: var(--muted); padding: 5px 14px; border-radius: 5px; cursor: pointer;
  white-space: nowrap;
}
.seg button:hover, .seg a:hover { color: var(--ink); text-decoration: none; }
.seg button.on, .seg a.on { background: var(--accent); color: var(--on-accent); }

/* ── 단추 ─────────────────────────────────────────────── */
.btn, button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: var(--t-13); font-weight: 600; line-height: 1.5;
  padding: 7px 15px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: #e2571a; }
.btn.deep { background: var(--deep); border-color: var(--deep); color: var(--on-accent); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: var(--on-accent); }
.btn.ghost { border-color: transparent; background: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--bg); }
.btn.sm { font-size: var(--t-12); padding: 4px 10px; }
.btn.lg { font-size: var(--t-14); padding: 10px 20px; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: default; pointer-events: none; }

/* ── 입력 ─────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font-size: var(--t-12); color: var(--muted); font-weight: 600; }
input, select, textarea {
  font: inherit; font-size: var(--t-13); color: var(--ink);
  padding: 7px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); background: var(--panel); min-width: 0;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=file] { padding: 5px; font-size: var(--t-12); }
/* 잠긴 칸 -- 계산 판이 잠길 때(연간 재무제표 없음) 단추처럼 흐리게 */
.field input:disabled, .field select:disabled { background: var(--bg); color: var(--muted); opacity: .6; cursor: not-allowed; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
@media (max-width: 1100px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 표 ───────────────────────────────────────────────────
 * 우리 화면의 알맹이다. 참고 화면에는 이만큼 촘촘한 숫자 표가 없어서
 * 여기만은 참고 화면을 그대로 따르지 않고 우리 쪽에서 정했다.
 * 원칙: 세로줄은 되도록 지우고 가로줄로 읽게 한다. 숫자는 폭이 고정된다.
 */
table.data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-13); }
table.data th, table.data td {
  padding: 7px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
/* 우리 표는 <thead> 없이 첫 줄이 머리글인 것이 많아 둘 다 잡는다. */
table.data thead th,
table.data tr:first-child th {
  background: var(--bg); color: var(--ink-2); font-weight: 700; text-align: center;
  font-size: var(--t-12); border-bottom: 1px solid var(--line-strong);
}

/* 머리글을 붙박이로 두는 것은 ".scrollbox" 안에서만 한다.
 *
 * ★ 2026-09-23 실제로 깨졌던 것: 머리글에 그냥
 *   `position: sticky; top: var(--topbar)` 를 걸었더니 머리글이 표 한가운데로
 *   내려와 데이터 줄을 덮었다.
 *   이유 -- 표를 감싼 상자에 `overflow-x: auto` 가 있으면 그 상자가 붙박이의
 *   기준(스크롤 상자)이 된다. 그러면 `top: 56px` 은 "화면 위에서 56px" 이 아니라
 *   "이 상자 위에서 56px" 이 되어 머리글이 상자 안쪽으로 56px 밀린다.
 *   붙박이는 세로로 실제 구르는 상자 안에서 `top: 0` 일 때만 옳게 동작한다. */
.scrollbox { max-height: 70vh; overflow: auto; }
.scrollbox table.data thead th,
.scrollbox table.data tr:first-child th { position: sticky; top: 0; z-index: 2; }
/* 이름 칸은 왼쪽.
 *
 * ★ `table.data tr:first-child th.name` 을 굳이 따로 쓰는 이유:
 *   `:first-child` 같은 가짜 클래스는 우선순위에서 **클래스로 센다.**
 *   그래서 위의 `table.data tr:first-child th` 는 (클래스 2, 요소 3) 이라
 *   `table.data th.name` (클래스 2, 요소 2) 보다 세다. 그냥 두면 머리글이
 *   가운데로 정렬돼 이름 칸 글자와 아래 데이터가 어긋난다 -- 2026-09-23 실제로 그랬다. */
table.data th.name, table.data td.name,
table.data thead th.name,
table.data tr:first-child th.name { text-align: left; }
table.data td.section { text-align: left; color: var(--muted); font-weight: 600; background: var(--bg); }
table.data tbody tr:hover td { background: #fbfcfd; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.tot, table.data tr.tot td { font-weight: 700; background: var(--bg); }
table.data .blank { color: #c4c8ce; }
table.data .minus { color: var(--bad); }

/* 칸 색 — 원본 엑셀의 약속을 화면에 그대로 옮긴다 */
table.data.gpt thead th,
table.data.gpt tr:first-child th { background: var(--cell-gpt); color: #22355c; }
table.data td.k-formula { background: var(--cell-formula); }
table.data td.k-suspect { background: var(--cell-suspect); }
table.data td.has-src { cursor: pointer; }
table.data td.has-src:hover { box-shadow: inset 0 0 0 2px var(--accent); }

/* 칸 색 설명 */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-12); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--line-strong); flex: none; }
.sw.gpt { background: var(--cell-gpt); }
.sw.formula { background: var(--cell-formula); }
.sw.suspect { background: var(--cell-suspect); }

/* ── 단계 동그라미 ①~⑧ ───────────────────────────────── */
/* ①②③ 은 이미 동그라미가 들어간 글자다. 동그라미 안에 동그라미가 들어가므로
 * 글자를 작게 두면 속의 숫자가 뭉개져 빈 동그라미처럼 보인다. 크게 쓴다. */
.step {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; font-size: 19px; font-weight: 600;
  line-height: 1; background: var(--track); color: var(--muted);
}
.step.done { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok-line); }
.step.warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn-line); }
.step.bad  { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad-line); }
.step.now  { background: var(--accent); color: var(--on-accent); }

/* ── 진행 막대 ───────────────────────────────────────── */
.bar { height: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--deep); }
.bar.ok i { background: var(--ok); } .bar.warn i { background: #f0b429; }
.bar.bad i { background: var(--bad); } .bar.accent i { background: var(--accent); }

/* ── 알림 ─────────────────────────────────────────────── */
.alert {
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: var(--r-sm); padding: 10px var(--s-4); margin-bottom: var(--s-2);
  background: var(--panel); font-size: var(--t-13);
}
.alert.ok   { border-left-color: var(--ok);   background: var(--ok-soft);   border-color: var(--ok-line); }
.alert.warn { border-left-color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.alert.bad  { border-left-color: var(--bad);  background: var(--bad-soft);  border-color: var(--bad-line); }
.alert summary { cursor: pointer; font-weight: 700; }
.alert summary .n { font-weight: 500; color: var(--muted); }
/* 맨 앞 굵은 글씨만 제목처럼 한 줄 차지한다.
 * 그냥 `.alert b { display: block }` 로 두면 문장 가운데 굵은 말이
 * 줄을 끊어 "...자료 그대로 / 입니다 —" 처럼 쪼개진다 -- 2026-09-23 실제로 그랬다. */
.alert > b:first-child { display: block; margin-bottom: 2px; }

/* ── 오른쪽 개요 ─────────────────────────────────────── */
.with-side { display: flex; gap: var(--gutter); align-items: flex-start; }
.with-side > .main { flex: 1; min-width: 0; }
.rail {
  width: 264px; flex: none; position: sticky; top: calc(var(--topbar) + var(--s-4));
  max-height: calc(100vh - var(--topbar) - var(--s-8)); overflow-y: auto; font-size: var(--t-13);
}
.rail .panel { margin-bottom: var(--s-3); }
.rail .panel-body { padding: var(--s-3); }
.rail-h { font-size: var(--t-11); font-weight: 700; letter-spacing: .06em;
          color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.toc a {
  display: block; padding: 4px 8px; color: var(--ink-2); border-radius: 5px;
  border-left: 2px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toc a:hover { background: var(--bg); text-decoration: none; }
.toc a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700;
            border-left-color: var(--accent); }
.toc .grp { font-size: var(--t-11); color: var(--muted); font-weight: 700; margin: var(--s-3) 0 2px 8px; }
[id] { scroll-margin-top: calc(var(--topbar) + var(--s-4)); }

/* ── 눌러 간 자리를 잠깐 밝힌다 ─────────────────────── */
.flash { animation: flash 1.6s ease-out; border-radius: var(--r-sm); }
@keyframes flash {
  0%   { box-shadow: 0 0 0 4px var(--accent-line); background-color: var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* 칸 하나를 세 번 밝힌다 -- 알림에서 눌러 온 자리. 색은 '눌러 간 자리' 와 같은 강조색이다 */
.cell-flash { animation: cellflash 3.2s ease-out; position: relative; z-index: 1; }
@keyframes cellflash {
  0%, 40%, 80% { box-shadow: inset 0 0 0 2px var(--accent); background-color: var(--accent-soft); }
  20%, 60%     { box-shadow: inset 0 0 0 2px transparent; }
  100%         { box-shadow: inset 0 0 0 0 transparent; }
}

/* ── 끌어다 놓기 (파일 올리기) ───────────────────────────
 * 모양은 목록 줄과 같다: 타일 · 제목 · 잔글씨. 놓거나 눌러 고르면 파일명과 '올리기' 단추가 나온다.
 * 확인을 누르기 전에는 아무것도 보내지 않는다 (2026-09-27 대표님). */
.drop {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--bg);
  padding: 10px 12px; transition: border-color .12s, background-color .12s;
}
body.dragging .drop { border-color: var(--accent-line); background: var(--accent-soft); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.drop.over .tile { background: var(--accent); color: var(--on-accent); }
.drop.busy { pointer-events: none; }
.drop-busy { display: flex; align-items: center; gap: var(--s-3); min-height: 32px; }
.drop-busy .bar { transition: none; }
.drop-busy .bar i { transition: width .25s; }
@keyframes spin { to { transform: rotate(360deg); } }
.ic.spin { animation: spin 1s linear infinite; }
.drop-empty, .drop-staged { display: flex; align-items: center; gap: var(--s-3); min-height: 32px; }
.drop-empty { cursor: pointer; }
.drop-empty:hover .tile { background: var(--accent-soft); color: var(--accent-ink); }
.drop-empty:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
.drop .grow { flex: 1; min-width: 0; }
.drop .nm { display: block; font-weight: 600; font-size: var(--t-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop .sb { display: block; font-size: var(--t-12); color: var(--muted); }
.drop .msg { margin: 8px 0 0; }

/* ── 자료 | 계산 두 기둥 (회사 화면) ──────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gutter); align-items: start; }
.split > .stick { position: sticky; top: calc(var(--topbar) + var(--s-4)); }
@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .stick { position: static; }
}
/* 칸 안의 표별 줄 (재무상태표 · 손익계산서 · 제조원가명세서) */
.part { padding: 14px 0; border-top: 1px solid var(--line); }
.part:first-child { border-top: 0; padding-top: 0; }
.part:last-child { padding-bottom: 0; }
.part .card-h { margin-bottom: 8px; }
.part .card-h .meta { font-size: var(--t-12); color: var(--muted); }
.part .card-h .end { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.part .drop { margin-top: 8px; }
/* 준비 상태 -- 빠진 칸 목록 */
.missing-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 모달 ─────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(17, 20, 24, .45); z-index: var(--z-modal);
         display: flex; align-items: center; justify-content: center; padding: var(--s-5); }
.modal[hidden] { display: none; }
.modal-box { background: var(--panel); border-radius: var(--r-lg); width: 100%; max-width: 760px;
             max-height: 86vh; overflow: auto; box-shadow: var(--sh-3); }
.modal-head { display: flex; align-items: flex-start; gap: var(--s-3);
              padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.modal-head .t { flex: 1; min-width: 0; }
.modal-head .k { font-size: var(--t-12); color: var(--muted); }
.modal-title { font-size: var(--t-16); font-weight: 700; }
.modal-body { padding: var(--s-4) var(--s-5); font-size: var(--t-13); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s-2);
              padding: var(--s-3) var(--s-5) var(--s-5); }
.modal-box.tone-bad  .modal-head { border-left: 3px solid var(--bad); }
.modal-box.tone-warn .modal-head { border-left: 3px solid var(--warn); }
.modal-box.tone-ok   .modal-head { border-left: 3px solid var(--ok); }
table.kv { width: 100%; font-size: var(--t-13); border-collapse: collapse; }
/* 기업개요 판: 두 줄 표를 나란히. 왼쪽 표의 오른쪽 선이 둘 사이 칸막이 */
table.kv.ov th { width: 34%; white-space: nowrap; padding: 7px 14px; border-bottom: 1px solid var(--line); }
table.kv.ov td { padding: 7px 14px; overflow-wrap: anywhere; }
table.kv.ov tr:last-child th, table.kv.ov tr:last-child td { border-bottom: 0; }
.grid.c2 > table.kv.ov:first-child { border-right: 1px solid var(--line); }
@media (max-width: 1100px) { .grid.c2 > table.kv.ov:first-child { border-right: 0; } }
table.kv th { text-align: left; background: var(--bg); color: var(--muted); font-weight: 600;
              white-space: nowrap; width: 1%; padding: 6px 10px; border-bottom: 1px solid var(--line); }
table.kv td { padding: 6px 10px; border-bottom: 1px solid var(--line); }

/* ── 알림 쪽지 ───────────────────────────────────────── */
.toasts { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-toast);
          display: flex; flex-direction: column; gap: var(--s-2); }
.toast { background: var(--ink); color: #fff; padding: 10px var(--s-4); border-radius: var(--r-sm);
         box-shadow: var(--sh-2); font-size: var(--t-13); max-width: 420px; }
.toast.ok  { background: var(--ok); }
.toast.bad { background: var(--bad); }

/* ── 비어 있을 때 ────────────────────────────────────── */
/* 본문 안 절 제목 -- 표 묶음을 가른다.
 * 사이드바 라벨(.nav-group, 11px 대문자 회색)을 여기 쓰면 너무 작아 제목으로 안 읽힌다. */
.sec-h {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-16); font-weight: 700; color: var(--ink);
  margin: var(--s-8) 0 var(--s-4);
}
.sec-h::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.main > .sec-h:first-of-type { margin-top: var(--s-5); }

.empty { text-align: center; color: var(--muted); padding: var(--s-10) var(--s-5); }
.empty .big { font-size: var(--t-16); color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }

/* ── 잔가지 ──────────────────────────────────────────── */
.muted { color: var(--muted); }
.small { font-size: var(--t-12); }
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.tabs button { border: 0; background: none; font: inherit; font-size: var(--t-14); font-weight: 600;
               color: var(--muted); padding: 9px var(--s-4); cursor: pointer;
               border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tabpane { display: none; } .tabpane.on { display: block; }
.rowlist { list-style: none; margin: 0; padding: 0; }
.rowlist li { display: flex; align-items: center; gap: var(--s-3); padding: 11px 0;
              border-top: 1px solid var(--line); }
.rowlist li:first-child { border-top: 0; }
.rowlist .grow { flex: 1; min-width: 0; }

/* ── 아이콘 ───────────────────────────────────────────────
 * templates/_icons.svg 한 장에 <symbol> 로 모아 두고 <use> 로 꺼내 쓴다.
 * 유니코드 도형 문자(▤ ◈ ◐)를 쓰면 대체 글꼴에서 끌어오기 때문에
 * 굵기·크기·기준선이 제각각이 된다. 그게 촌스러워 보이던 두 번째 원인이었다.
 */
.ic {
  width: 18px; height: 18px; flex: none;
  vertical-align: -3px;
  /* ★ fill/stroke 는 반드시 여기(바깥 svg)에 걸어야 한다.
   * 스프라이트 쪽 <svg> 에 걸면 <use> 가 만드는 그림자 나무로 따라오지 않는다 --
   * 물려받는 성질은 <use> 가 놓인 자리를 기준으로 정해지기 때문이다.
   * 이걸 빼면 아이콘이 선이 아니라 검은 덩어리로 칠해진다. */
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic.sm { width: 15px; height: 15px; stroke-width: 2; vertical-align: -2px; }
.ic.lg { width: 22px; height: 22px; stroke-width: 1.6; }
.ic.xl { width: 28px; height: 28px; stroke-width: 1.5; }

/* 색을 입힌 아이콘 타일 — 판 제목과 숫자 카드에 쓴다 */
.tile {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
}
.tile.deep  { background: var(--deep-soft);  color: var(--deep); }
.tile.ok    { background: var(--ok-soft);    color: var(--ok); }
.tile.warn  { background: var(--warn-soft);  color: var(--warn); }
.tile.bad   { background: var(--bad-soft);   color: var(--bad); }
.tile.ink   { background: #eceef1;           color: var(--ink); }
.tile.solid { background: var(--accent);     color: var(--on-accent); }
.tile.sm { width: 28px; height: 28px; border-radius: 8px; }

/* ── 손맛 ─────────────────────────────────────────────────
 * 참고 화면이 단정해 보이는 것은 색이 화려해서가 아니라
 * 움직임과 반응이 일정하기 때문이다.
 */
.btn, .nav-item, .pill, .seg button, .seg a, .icon-btn, .toc a, .stat, .panel {
  transition: background-color .13s ease, border-color .13s ease,
              color .13s ease, box-shadow .13s ease, transform .13s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .icon-btn:focus-visible, .seg button:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.stat:hover { box-shadow: var(--sh-2); }
.panel-head h2, .panel-head h3, .page-head h1, .modal-title { letter-spacing: -.015em; }

/* 숫자를 크게 보여줄 때는 자간을 조금 좁힌다 — 한글보다 라틴 숫자가 헐거워 보인다 */
.stat .v, .kpi-v { letter-spacing: -.03em; font-feature-settings: "tnum" 1; }

/* 강조 카드 — 지금 가장 중요한 숫자 하나에만 쓴다 */
.stat.hero {
  background: linear-gradient(135deg, var(--deep) 0%, #0a3b49 100%);
  border-color: transparent; color: #fff;
}
.stat.hero .k, .stat.hero .s { color: rgba(255,255,255,.72); }
.stat.hero .v { color: #fff; }
.stat.hero .tile { background: rgba(255,255,255,.14); color: #fff; }
.stat.hero .bar { background: rgba(255,255,255,.2); }
.stat.hero .bar i { background: var(--accent); }

/* ── 목록 줄 — 고객사 목록·계산 이력 ─────────────────── */
.line {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 13px var(--pad-card); border-top: 1px solid var(--line);
  color: var(--ink);
}
.line:first-child { border-top: 0; }
.line:hover { background: var(--bg); text-decoration: none; }
.line .grow { flex: 1; min-width: 0; }
.line .nm { font-weight: 700; display: block; }
.line .sb { font-size: var(--t-12); color: var(--muted); }
.line .go { color: var(--muted); }
.line:hover .go { color: var(--accent); }
/* 목록 줄의 설명 -- 제목 밑 본문 한 줄 (알림 모달). 잔글씨(.sb)보다 한 단계 진하다 */
.line .ds { display: block; font-size: var(--t-13); color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.line .sb + .sb, .line .ds + .sb { display: block; margin-top: 2px; }
/* 한 줄에 기간 알약 여럿 -- 알약마다 그 기간 칸으로 간다 */
.line .chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 46%; }
.line .chips .pill { cursor: pointer; }
.line .chips .pill:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
/* 줄 오른쪽 끝의 화살표 링크 (줄 자체가 링크가 아닐 때 -- 안에 단추가 있을 때) */
.line .line-go { display: inline-flex; color: var(--muted); }
.line .line-go:hover { color: var(--accent); }
.line a.nm { color: var(--ink); }
/* 줄 오른쪽 단추 묶음 (올리기 · 값 보기) · 줄 안의 경고는 제목 밑에 한 줄씩 */
.line .btns { display: inline-flex; gap: 6px; flex: none; align-items: center; margin-left: auto; }
/* 좁은 판(두 칸 격자)에서는 글이 먼저 자리를 잡고 단추 묶음이 다음 줄로 내려간다 -- 글자가 한 자씩 꺾이지 않게 */
.line { flex-wrap: wrap; }
.line .grow { flex: 1 1 180px; }
/* 쌍으로 놓인 좁은 판: 타일은 이름 줄에 붙이고, 단추는 제 줄에서 가운데 */
.grid.c2 .line > .tile { align-self: flex-start; margin-top: 3px; }
.grid.c2 .line > .btns { align-self: center; }
.line .grow .warnline { display: block; margin-top: 4px; }
.line .grow details.warnline summary { display: inline; }
/* 갈 곳 없는 줄 -- 눌리지 않는다 */
.line.still { cursor: default; }
.line.still:hover { background: transparent; }
/* 모달 안의 목록: 판 없이 줄만, 위 설명 한 줄 뒤에 */
.modal-body .lead { margin: 0 0 var(--s-3); color: var(--ink-2); }
.modal-body .lines { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.modal-body .lines .line { padding-left: var(--s-4); padding-right: var(--s-4); }

/* 8단계 진행 — 동그라미를 줄로 잇는다 */
.steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.steps .seg-line { width: 18px; height: 2px; background: var(--track); flex: none; }
.steps .seg-line.done { background: var(--ok-line); }

/* 표를 감싼 판은 안쪽 여백을 없앤다 — 표가 판에 꽉 차야 정돈돼 보인다 */
.panel-body.flush { padding: 0; }
.panel-body.flush table.data thead th:first-child,
.panel-body.flush table.data tbody td:first-child { padding-left: var(--pad-card); }
.panel-body.flush table.data thead th:last-child,
.panel-body.flush table.data tbody td:last-child { padding-right: var(--pad-card); }

/* ══ 실제 화면을 옮기며 필요해진 것들 ═══════════════════ */

/* 화면 제목 밑 한 줄 설명 */
.sub { color: var(--muted); font-size: var(--t-13); margin: 4px 0 0; }

/* 작업 결과를 알리는 한 줄 — 올리기·계산 버튼 밑에 붙는다 */
.msg { font-size: var(--t-13); white-space: pre-line; margin: 8px 0 0; min-height: 1px; }
.msg.err { color: var(--bad); }
.msg.ok { color: var(--ok); }

/* 표 밑 잔글씨 */
.note { color: var(--muted); font-size: var(--t-12); margin: 8px 0 0; }
.panel-body.flush .note { padding: 0 var(--pad-card) var(--s-3); }

/* 판정을 못 낸 칸 — 숫자가 아니라 사실을 말한다 */
.undefined { color: var(--bad); font-weight: 600; }

/* GPT 로 넘기는 표 -- 파란 것은 '표 머리글' 하나뿐이다.
 * 범례가 "파란 머리글 = GPT 전달 표" 라고 말하므로, 판 머리까지 파랗게 칠하면
 * 파란 자리가 둘이 돼서 범례가 가리키는 것이 흐려진다. 판은 테두리만 물들인다. */
.panel.gpt { border-color: #bfd0ea; }
.panel.gpt > .panel-head { border-bottom-color: #bfd0ea; }

/* 목록 위 도구 줄 -- 검색 + 정렬 (고객사 목록) */
.list-tools { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.list-tools .search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 220px; max-width: 420px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 10px; background: var(--panel); color: var(--muted); }
.list-tools .search input { border: 0; padding: 7px 0; flex: 1; min-width: 0; background: transparent; }
.list-tools .search input:focus { box-shadow: none; }
.list-tools .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }

/* 카드 안에서 한 줄로 경고 */
.warnline { font-size: var(--t-12); margin-top: 8px; }
.warnline.bad { color: var(--bad); }
.warnline.warn { color: var(--warn); }
.warnline summary { cursor: pointer; }

/* 링크를 여러 단으로 늘어놓기 — GPT 전달 화면의 표 목록 */
.linklist { columns: 3; font-size: var(--t-13); }
.linklist a { display: block; padding: 2px 0; break-inside: avoid; }
@media (max-width: 1000px) { .linklist { columns: 2; } }

/* 넘겨줄 원문 그대로 */
pre.json {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-4); font-size: var(--t-12); line-height: 1.55;
  overflow: auto; max-height: 70vh; margin: var(--s-3) 0 0;
}

/* 파일 고르기 + 단추 한 줄 */
.pick { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.pick input[type=file] { flex: 1; min-width: 160px; }

/* 8단계 카드 안 제목줄 */
.card-h { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: 6px; }
.card-h .nm { font-weight: 700; font-size: var(--t-14); }

/* 오른쪽 개요 안 알림 줄 */
.rail-alert {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding: 5px 8px; margin-bottom: 4px; border-radius: 5px;
  border-left: 3px solid var(--line); color: var(--ink-2);
}
.rail-alert:hover { text-decoration: none; filter: brightness(.97); }
.rail-alert.bad  { background: var(--bad-soft);  border-left-color: var(--bad); }
.rail-alert.warn { background: var(--warn-soft); border-left-color: var(--warn); }
.rail-alert.ok   { background: var(--ok-soft);   border-left-color: var(--ok); }

/* 오른쪽 개요 맨 위 요약 */
.rail-top { display: block; color: var(--ink); }
.rail-top .v { font-size: var(--t-20); font-weight: 800; letter-spacing: -.02em; }
.rail-top:hover { text-decoration: none; }

/* 범례 한 줄짜리 */
.legend.col { flex-direction: column; gap: 6px; align-items: flex-start; }

/* 동업종 목록에서 표가 빠진 줄 */
table.data tr.missing td { background: var(--bad-soft); }
table.data tr.missing:hover td { background: #fce0e0; }

/* ── 우상단 계정 메뉴 (2026-09-29, docs/15-로그인-설계.md 3장) ── */
.usermenu { position: relative; flex: none; }
.usermenu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-2);
  padding: 4px 8px 4px 4px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: var(--t-13); color: var(--ink); user-select: none;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover, .usermenu[open] > summary { background: var(--bg); border-color: var(--line); }
.usermenu .avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--deep); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-12); flex: none;
}
.usermenu .nm { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu .menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: var(--z-modal);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 10px 30px rgba(17, 24, 39, .12); padding: 6px;
}
.usermenu .who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.usermenu .item {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-sm); border: 0; background: none; font: inherit;
  font-size: var(--t-13); color: var(--ink); cursor: pointer; text-decoration: none;
}
.usermenu .item:hover { background: var(--bg); text-decoration: none; }
.usermenu form { margin: 0; }