/* ============================================================================
   NSS 2.0 — 디자인 시스템
   출처: 00.docs/vercel-DESIGN.md (대표 지정, 2026-08-27)
   흰 캔버스 · 잉크 검정 · 헤어라인으로만 구획 · 기술 라벨은 모노스페이스.
   ★ 라이트 전용 — 다크모드는 대표 지시로 금지.

   ★★ 노안 대응 (대표 지시 2026-09-03) — 이 시스템의 최우선 제약
   원본 Vercel 스케일(본문 14px·캡션 10px)은 젊은 개발자 화면 기준이라 그대로 쓰면
   대표가 읽지 못한다. **읽히지 않는 디자인은 완성된 디자인이 아니다.**
     · 본문 최소 16px · 표 본문 15px · 캡션/모노 최소 12px  (10px 금지)
     · 줄간격 1.5 이상 — 글자만 키우고 줄을 붙이면 오히려 더 안 읽힌다
     · 본문색 #3d3d3d · 보조색 #6b6b6b 로 대비 강화 (원본 #4d4d4d / #888888)
     · 클릭 대상 높이 40px 이상
     · --scale 로 100 / 115 / 130% 조절 (우측 상단 버튼, 브라우저에 기억)
   ========================================================================== */
:root {
  --primary: #171717;      --on-primary: #ffffff;
  --ink: #171717;          --body: #3d3d3d;         --mute: #6b6b6b;
  --hairline: #e5e5e5;     --hairline-strong: #a1a1a1;
  --canvas: #ffffff;       --canvas-soft: #fafafa;  --canvas-soft-2: #f5f5f5;
  --link: #0070f3;         --link-deep: #0761d1;    --link-bg-soft: #d3e5ff;
  --error: #ee0000;        --error-soft: #f7d4d6;   --error-deep: #c50000;
  --warning: #f5a623;      --warning-soft: #ffefcf; --warning-deep: #8f4708;
  --violet: #7928ca;       --violet-soft: #ece4f8;
  --cyan-deep: #1f9c81;
  --xxs:4px; --xs:8px; --sm:12px; --md:16px; --lg:24px; --xl:32px; --2xl:40px; --3xl:48px;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill-sm:64px; --r-pill:100px; --r-full:9999px;
  --scale: 1;
  --font: "NSSNum", Geist, Inter, "Pretendard", system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  /* ★ 한글 서체를 모노 스택에도 넣는다 (2026-09-06).
       빠져 있던 동안 모노 칸(표 머리·배지·기한·라벨)의 한글은 generic monospace,
       즉 굴림체 계열 전각으로 떨어졌다 — 본문(Pretendard) 폭 207.4 vs 모노 240.
       같은 화면에서 한글이 두 서체로 갈라지고 자간이 벌어져 보이던 원인이다.
       숫자는 NSSNum, 영문은 Consolas, 한글은 본문과 같은 Pretendard 로 간다. */
  --mono: "NSSNum", "Geist Mono", "SF Mono", ui-monospace, Consolas, "Pretendard", "Malgun Gothic", monospace;
}

/* ── ★ 숫자는 한 서체로 (대표 지시 2026-09-06) ────────────────────────────
   고치기 전 상태 — 같은 화면에서 숫자가 두 서체로 갈라져 있었다.
     · KPI 타일 값 = 본문 서체(비례폭). "1" 은 좁고 "0" 은 넓다.
     · 표 금액 칸  = 모노 서체(고정폭).
   폭을 실측하니 본문 233.2px / 모노 219.9px — 다른 서체가 맞다.

   ★ 여기는 원장이다. **자릿수가 세로로 맞아야 눈으로 금액을 대조할 수 있다.**
     비례폭 숫자는 264,600,000 과 245,000,000 의 자리가 어긋나 눈으로 못 겹친다.
     그래서 통일 방향은 모노(고정폭)다.

   ★ 방법 — 숫자 코드포인트만 한 서체에서 뽑아 쓴다.
     클래스마다 font-family 를 붙이면 새 화면을 만들 때마다 빠뜨린다. 그러면 또 갈라진다.
     unicode-range 로 **0~9 와 콤마·소수점만** 이 서체에서 가져오게 하면,
     본문 한가운데 박힌 숫자까지 빠짐없이 같은 모양이 된다. 글자는 건드리지 않으므로
     한글·영문 본문은 그대로다. 통일이 규칙이 아니라 구조로 보장된다. */
@font-face {
  font-family: "NSSNum";
  src: local("Geist Mono"), local("SF Mono"), local("Consolas"), local("DejaVu Sans Mono");
  unicode-range: U+0030-0039, U+002C, U+002E;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--font);
  font-size: calc(16px * var(--scale)); line-height: 1.55;
  color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  /* ★ 화면 전체에서 숫자 폭을 고정한다. 값이 바뀌어도 자리가 안 흔들린다. */
  font-variant-numeric: tabular-nums;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--primary); color: #f2f2f2; }

/* ── 앱 셸 ─────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }

/* ── 3분할 셸 : 메뉴 · 내용 · 입력 (대표 지시 2026-09-10) ─────────────────
   입력칸을 내용 아래가 아니라 옆에 둔다. 업무가 열 몇 건씩 쌓여도 목록을
   보면서 그대로 번호를 받아 적을 수 있다.
   ★ minmax(0,1fr) 이라야 가운데가 제 폭을 지킨다 — 1fr 만 쓰면 트랙의
     min-width:auto 때문에 긴 제목이 레일을 밀어낸다(2026-09-06 과 같은 함정). */
/* 레일 폭은 화면에 맞춰 준다 — 좁아지면 같이 좁아져 3분할을 더 오래 버틴다.
   레일이 아래로 내려가면 입력창이 ③ 메일 뒤 페이지 맨 끝으로 밀려 오히려
   멀어지기 때문이다(1180px 실측). 접는 것은 정말 좁을 때만. */
.shell.has-rail { grid-template-columns: 268px minmax(0, 1fr) clamp(300px, 26vw, 384px); }
.rail {
  border-left: 1px solid var(--hairline); background: var(--canvas);
  padding: var(--lg) var(--md);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* 레일 안에서는 입력창이 남은 높이를 다 쓴다 — 옆이 아무리 길어져도 이 칸은
   화면 한 판에 들어오므로, 넓게 열어 두는 편이 길게 쓸 때 편하다.
   ★ 바닥에 붙는 sticky 는 여기서 푼다. 레일 자체가 이미 화면에 붙어 있다. */
.rail .cmd-box {
  position: static; box-shadow: none; flex: 1;
  display: flex; flex-direction: column; min-height: 0;
}
.rail .cmd-box textarea { flex: 1; min-height: 180px; }
/* 384px 폭에 긴급도 넷을 한 줄로 늘어놓으면 "나중에"가 혼자 떨어진다.
   두 줄 두 칸으로 세우고 버튼은 폭을 다 쓴다. */
.rail .cmd-foot { flex-direction: column; align-items: stretch; gap: var(--sm); }
.rail .cmd-foot .urg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--xs) var(--sm); }
.rail .cmd-foot .btn { width: 100%; justify-content: center; }
/* ★ 지시창은 모든 화면에서 항상 오른쪽 (대표 지시 2026-09-12 "이전 버전처럼 오른쪽에")
   접이식·말풍선·서랍은 대표가 물렸다. 좁은 화면(윈도우 배율 150~175% → CSS 폭 1100px 이하)
   에서도 아래로 내리지 않고, 메뉴와 레일을 좁혀 세 칸을 유지한다. 표는 가운데 칸 안에서
   가로 스크롤한다(.tbl-wrap). 폰(820px 이하)만 한 칸으로 쌓는다. */
@media (max-width: 1100px) {
  .shell.has-rail { grid-template-columns: 220px minmax(0, 1fr) 272px; }
  .rail { padding: var(--md) var(--sm); }
  .side { padding-left: var(--sm); padding-right: var(--sm); }
}
@media (max-width: 820px) {
  .shell.has-rail { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-left: none; }
}
/* 지금 보는 화면 — 지시에 자동으로 같이 실린다는 표시 */
.rail .ctx {
  margin: var(--sm) 0; padding: var(--xs) var(--sm); border-radius: var(--r-md, 8px);
  background: var(--link-bg-soft); color: var(--link-deep); font-size: calc(13.5px * var(--scale));
  display: flex; gap: var(--xs); align-items: baseline; flex-wrap: wrap;
}
.rail .ctx b { font-family: var(--mono); }
/* 대표 결정함 — 비어 있으면 조용히, 건이 있으면 눈에 띄게 (2026-09-12) */
.decide-box { margin-bottom: var(--lg); padding: var(--md) var(--lg); border: 1px solid var(--warning); border-radius: var(--r-lg); background: var(--warning-soft); }
.decide-box.quiet { border-color: var(--hairline); background: var(--canvas); }
.decide-box .work-row .t > .badge { margin-right: var(--xs); }
/* 결과 요약 고정 헤더 */
.result-sum { display: grid; grid-template-columns: 120px 1fr; gap: var(--xs) var(--md); padding: var(--md) var(--lg); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas-soft-2, #fafafa); margin-bottom: var(--md); }
.result-sum .k { font-family: var(--mono); font-size: calc(12.5px * var(--scale)); color: var(--mute); text-transform: uppercase; padding-top: 3px; }
.result-sum .v { font-size: calc(15.5px * var(--scale)); line-height: 1.55; }
.result-sum .v.big { font-size: calc(17px * var(--scale)); font-weight: 600; }
/* 렌더된 마크다운 */
.md h1, .md h2, .md h3 { font-size: calc(17px * var(--scale)); margin: var(--md) 0 var(--xs); }
.md table { border-collapse: collapse; margin: var(--sm) 0; font-size: calc(14.5px * var(--scale)); }
.md th, .md td { border: 1px solid var(--hairline); padding: 4px 10px; }
.md td:has(> :is(b,strong)) { font-weight: 600; }
.md code { font-family: var(--mono); background: var(--canvas-soft-2, #f4f4f4); padding: 0 4px; border-radius: 4px; }
.md pre { overflow-x: auto; background: var(--canvas-soft-2, #f4f4f4); padding: var(--sm); border-radius: var(--r-md, 8px); }
/* 모바일 1열 — Slack 링크에서 들어와 바로 검토·답변 (Astra 검토 반영) */
@media (max-width: 820px) {
  .page-head { flex-direction: column; align-items: flex-start; }
  .result-sum { grid-template-columns: 1fr; }
  .result-sum .k { padding-top: var(--xs); }
  .decide-box { padding: var(--sm) var(--md); }
  .work-row .due { display: none; }
}
.side {
  border-right: 1px solid var(--hairline); background: var(--canvas);
  padding: var(--md) var(--sm); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand {
  font-size: calc(18px * var(--scale)); font-weight: 600; letter-spacing: -0.3px;
  padding: var(--xs) var(--sm) var(--md); display: flex; align-items: baseline; gap: 6px;
}
.brand small { font-family: var(--mono); font-size: calc(12px * var(--scale)); color: var(--mute); font-weight: 400; letter-spacing: 0; }
.side-group { margin-top: var(--lg); }
.side-group > h6 {
  font-family: var(--mono); font-size: calc(12px * var(--scale)); text-transform: uppercase;
  letter-spacing: 0.2px; color: var(--mute); margin: 0 0 var(--xs); padding: 0 var(--sm); font-weight: 600;
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--xs);
  padding: 10px var(--sm); border-radius: var(--r-sm); min-height: 42px;
  color: var(--body); font-size: calc(15.5px * var(--scale)); position: relative; margin-bottom: 3px;
}
.nav-row:hover { background: var(--canvas-soft); text-decoration: none; color: var(--ink); }
.nav-row.active { color: var(--ink); font-weight: 600; background: var(--canvas-soft); }
.nav-row.active::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background: var(--primary); border-radius: var(--r-full);
}
.nav-row .n { font-family: var(--mono); font-size: calc(13px * var(--scale)); color: var(--mute); }

.main {
  padding: var(--lg) var(--xl) var(--3xl); max-width: 1560px;
  /* ★ grid 의 1fr 트랙은 기본 min-width:auto 라 긴 제목·넓은 표가 있으면
     트랙이 뷰포트 밖으로 늘어나 가로 스크롤이 생긴다 (2026-09-06 수정). */
  min-width: 0;
}
.page-head { display:flex; align-items:baseline; justify-content:space-between; gap: var(--md); margin-bottom: var(--lg); flex-wrap: wrap; }
h1 { font-size: calc(30px * var(--scale)); font-weight: 600; letter-spacing: -1px; margin: 0; }
h2 { font-size: calc(20px * var(--scale)); font-weight: 600; letter-spacing: -0.3px; margin: 0 0 var(--sm); }
.as-of { font-family: var(--mono); font-size: calc(13.5px * var(--scale)); color: var(--mute); }

/* ── 카드 · 타일 ───────────────────────────────────────────────────────── */
.card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--lg); }
.card.soft { background: var(--canvas-soft); }
.grid { display: grid; gap: var(--md); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1240px) { .g4 { grid-template-columns: repeat(2,1fr); } .g3 { grid-template-columns: repeat(2,1fr); } }
/* ★ 글자를 키우면 칸 수도 줄여야 한다 (2026-09-06).
     130% 에서 KPI 값(−38,898,329)이 1fr 트랙보다 커져 4칸이 화면 밖으로 밀렸다.
     media query 는 화면 폭만 보고 배율은 못 본다 — 그래서 배율을 속성으로 받아 여기서 함께 판단한다.
     글자를 키운 사람에게는 칸이 적고 큰 편이 어차피 더 읽힌다. */
:root[data-scale="1.3"] .g4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1500px) { :root[data-scale="1.15"] .g4 { grid-template-columns: repeat(2, 1fr); } }
.tile { min-width: 0; }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; } .g4,.g3,.g2 { grid-template-columns: 1fr; } }

.tile { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--md) var(--lg); }
.tile .k { font-family: var(--mono); font-size: calc(12.5px * var(--scale)); text-transform: uppercase; letter-spacing: .2px; color: var(--mute); font-weight: 600; }
/* ★ 자간 −1px 은 비례폭 숫자를 붙여 보이려던 값이다. 고정폭에서는 자릿수를 뭉갠다. */
/* ★ 숫자가 타일 밖으로 잘리지 않게 (대표 지시 2026-09-12) — 678,123,661 같은 9자리가
     좁은 타일(g6 · 220px)에서 오른쪽이 잘렸다. 타일 폭을 컨테이너로 잡아 글자 크기를
     폭에 맞춰 줄인다(11cqi ≈ 11자리가 한 줄에 선다). 넓은 타일은 원래 크기 그대로. */
.tile { container-type: inline-size; }
.tile .v { font-size: min(calc(30px * var(--scale)), 11cqi); font-weight: 600; letter-spacing: -0.3px; margin-top: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile .s { font-size: calc(14.5px * var(--scale)); line-height: 1.5; color: var(--body); margin-top: 6px; }
.tile.warn { border-color: var(--warning); background: var(--warning-soft); }
.tile.warn .v { color: var(--warning-deep); }
.tile.bad  { border-color: var(--error); background: var(--error-soft); }
.tile.bad .v { color: var(--error-deep); }

/* ── 표 ────────────────────────────────────────────────────────────────── */
.tbl-wrap {
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  /* ★ hidden 이면 화면보다 넓은 표는 잘려서 볼 방법이 없다. 가로로만 스크롤시킨다. */
  overflow-x: auto; overflow-y: hidden;
}
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--canvas-soft); font-family: var(--mono); font-size: calc(12.5px * var(--scale));
  text-transform: uppercase; letter-spacing: .2px; color: var(--body); font-weight: 600;
  text-align: left; padding: var(--sm); border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
tbody td { padding: var(--sm); border-bottom: 1px solid var(--hairline); font-size: calc(15px * var(--scale)); line-height: 1.55; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--canvas-soft); }
/* ★ 14px 였다 — 이 시스템의 "표 본문 최소 15px"(노안 대응)을 금액 칸만 어기고 있었다.
     제일 오래 들여다보는 칸이 제일 작았다. 본문과 같은 15px 로 맞춘다. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: calc(15px * var(--scale)); white-space: nowrap; }
/* ★ mono 칸은 날짜·코드가 들어간다. 줄바꿈되면 '2026-'/'05' 로 쪼개져 읽을 수 없다
     (배율 130% 에서 18곳이 그랬다). 날짜와 코드는 한 덩어리다 — 끊지 않는다. */
td.mono { font-family: var(--mono); font-size: calc(13.5px * var(--scale)); color: var(--body); white-space: nowrap; }
td.nowrap { white-space: nowrap; }

/* ── 배지 ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 11px; border-radius: var(--r-full);
  font-family: var(--mono); font-size: calc(12.5px * var(--scale)); letter-spacing: .3px; line-height: 1.4;
  background: var(--canvas-soft-2); color: var(--body); border: 1px solid var(--hairline); white-space: nowrap;
}
.badge.urgent { background: var(--error-soft); color: var(--error-deep); border-color: var(--error); font-weight: 600; }
.badge.high   { background: var(--warning-soft); color: var(--warning-deep); border-color: var(--warning); font-weight: 600; }
.badge.normal { background: var(--link-bg-soft); color: var(--link-deep); border-color: transparent; }
.badge.low    { background: var(--canvas-soft-2); color: var(--mute); }
.badge.noise  { background: var(--canvas-soft-2); color: var(--mute); }
.badge.ok     { background: #e6f7f1; color: var(--cyan-deep); border-color: transparent; }
.badge.info   { background: var(--violet-soft); color: var(--violet); border-color: transparent; }

/* ── 탭 ────────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--xs); margin-bottom: var(--md); flex-wrap: wrap; }
.tab {
  padding: 10px var(--lg); border-radius: var(--r-pill-sm); font-size: calc(15.5px * var(--scale));
  color: var(--body); border: 1px solid var(--hairline); display:flex; align-items:center; gap:8px; min-height: 42px;
}
.tab:hover { background: var(--canvas-soft); text-decoration: none; color: var(--ink); }
.tab.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 500; }
.tab.active .cnt { color: rgba(255,255,255,.75); }
.tab .cnt { font-family: var(--mono); font-size: calc(13.5px * var(--scale)); color: var(--mute); }

/* ── 버튼 ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 var(--md);
  border-radius: var(--r-pill); font-size: calc(15px * var(--scale)); font-weight: 500;
  border: 1px solid var(--hairline-strong); background: var(--canvas); color: var(--ink); cursor: pointer;
}
.btn:hover { background: var(--canvas-soft); text-decoration: none; }
.btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn.primary:hover { opacity: .88; }
.btn.sm { height: 36px; font-size: calc(14px * var(--scale)); padding: 0 var(--sm); }

/* ── 메일 리스트 ───────────────────────────────────────────────────────── */
.subj { font-weight: 600; color: var(--ink); display:block; margin-bottom: 6px; font-size: calc(16.5px * var(--scale)); line-height: 1.45; }
.summary { color: var(--body); font-size: calc(15px * var(--scale)); line-height: 1.65; white-space: pre-line; }
.ledger {
  font-family: var(--mono); font-size: calc(13.5px * var(--scale)); line-height: 1.6; color: var(--body);
  background: var(--canvas-soft); border-left: 3px solid var(--hairline-strong);
  padding: 8px var(--sm); margin-top: 10px; border-radius: 0 var(--r-xs) var(--r-xs) 0;
  display: block; white-space: pre-line;
}
.ledger.warn { border-left-color: var(--warning); background: var(--warning-soft); color: var(--warning-deep); }
.action { color: var(--ink); font-size: calc(15px * var(--scale)); line-height: 1.5; margin-top: 10px; display:block; font-weight: 500; }
.action::before { content: "▸ "; color: var(--link); }
.due { font-family: var(--mono); font-size: calc(13.5px * var(--scale)); color: var(--body); }
.due.over { color: var(--error-deep); font-weight: 600; }
.due.today { color: var(--warning-deep); font-weight: 600; }
.chips { display:flex; gap:6px; flex-wrap: wrap; margin-top: 8px; }

/* ── 계정별 독립 테이블 (대표 지시 2026-09-03) ─────────────────────────── */
.acc-block { margin-bottom: var(--3xl); scroll-margin-top: var(--md); }
.acc-head {
  display:flex; align-items:center; justify-content:space-between; gap: var(--md);
  padding-bottom: var(--sm); margin-bottom: var(--sm); border-bottom: 2px solid var(--primary); flex-wrap: wrap;
}
.acc-head h2 { margin:0; display:flex; align-items:baseline; gap:10px; }
.acc-head h2 .addr { font-family: var(--mono); font-size: calc(13.5px * var(--scale)); color: var(--mute); font-weight: 400; }
.acc-stat { display:flex; gap: var(--md); align-items:center; flex-wrap: wrap; }
.acc-stat span { font-size: calc(14.5px * var(--scale)); color: var(--body); }
.acc-stat b { font-variant-numeric: tabular-nums; }

/* ── 브리핑 ────────────────────────────────────────────────────────────── */
.brief-row { display: grid; grid-template-columns: 104px 1fr auto; gap: var(--md); align-items: start;
             padding: var(--sm) 0; border-bottom: 1px solid var(--hairline); }
.brief-row:last-child { border-bottom: none; }
.brief-row .t { font-size: calc(15.5px * var(--scale)); line-height: 1.5; color: var(--ink); }
.brief-row .t small { display:block; color: var(--body); font-size: calc(14.5px * var(--scale)); line-height: 1.55; margin-top: 5px; }

.empty { background: var(--canvas-soft); border-radius: var(--r-lg); padding: var(--3xl); text-align: center; color: var(--body); font-size: calc(16px * var(--scale)); }
.sec { margin-bottom: var(--xl); }
.muted { color: var(--mute); }
.hint { font-size: calc(14px * var(--scale)); line-height: 1.5; color: var(--mute); margin-top: var(--sm); }
hr.hair { border: none; border-top: 1px solid var(--hairline); margin: var(--lg) 0; }

/* ── 글자 크기 조절 (노안 대응) ────────────────────────────────────────── */
.zoom { display:flex; gap:5px; align-items:center; }
.zoom b { font-family: var(--mono); font-size: 13px; color: var(--mute); font-weight:500; margin-right:4px; }
.zoom button {
  font-family: var(--font); border: 1px solid var(--hairline-strong); background: var(--canvas);
  color: var(--ink); border-radius: var(--r-pill); cursor: pointer; padding: 6px 14px; line-height:1;
}
.zoom button:hover { background: var(--canvas-soft); }
.zoom button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.zoom button:nth-of-type(1) { font-size: 14px; }
.zoom button:nth-of-type(2) { font-size: 16px; }
.zoom button:nth-of-type(3) { font-size: 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   업무 지시 현황판 재구성 — 대표 지시 2026-09-04
   ① KPI 6칸  ② 업무 상황판(좌우 박스 + 지시창)  ③ 메일 12건 리치 리스트
   ══════════════════════════════════════════════════════════════════════════ */

.g6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1560px) { .g6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .g6 { grid-template-columns: repeat(2, 1fr); } }

.sec-h { font-size: calc(19px * var(--scale)); letter-spacing: -.3px; }
.dim   { color: var(--mute); font-weight: 400; }
.tile .v-sub { font-size: calc(15px * var(--scale)); font-weight: 500; color: var(--mute); letter-spacing: 0; }
.card.tight { padding: var(--xs) var(--md); }

/* 접수 알림 ------------------------------------------------------------- */
.flash {
  border: 1px solid var(--cyan-deep); background: #e6f7f1; color: #10614f;
  border-radius: var(--r-md); padding: var(--sm) var(--md); margin-bottom: var(--md);
  font-size: calc(15px * var(--scale));
}
.flash.warn { border-color: var(--warning); background: var(--warning-soft); color: var(--warning-deep); }

/* ② 업무 상황판 --------------------------------------------------------- */
/* 레일이 옆에 있으면 두 줄기(진행 중 · 해야 할 일)를 위아래로 세운다.
   제목 칸이 넓어야 한 줄에 읽힌다 — 좁은 두 칸보다 넓은 한 칸이 낫다.
   레일이 아래로 내려가는 좁은 화면에서는 예전처럼 좌우로 돌아간다. */
.work-lanes { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .work-lanes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px)  { .work-lanes { grid-template-columns: 1fr; } }

.work-box  { display: flex; flex-direction: column; }
.work-head { display: flex; align-items: baseline; gap: var(--xs); margin-bottom: var(--xs); }
.work-head h3 { margin: 0; font-size: calc(17px * var(--scale)); letter-spacing: -.2px; }
.work-cnt  { font-family: var(--mono); font-size: calc(13px * var(--scale)); color: var(--mute); }

.work-row {
  display: grid; grid-template-columns: 62px 1fr 96px; gap: var(--sm);
  align-items: start; padding: var(--sm) 0; border-bottom: 1px solid var(--hairline);
}
.work-row:last-child { border-bottom: none; }
.work-row .ref {
  font-family: var(--mono); font-size: calc(13px * var(--scale)); font-weight: 700;
  color: var(--on-primary); background: var(--primary);
  border-radius: var(--r-sm); padding: 3px 7px; text-align: center; letter-spacing: -.3px;
}
.work-row .ref.cmd { background: var(--violet); }
.work-row .t { font-size: calc(15.5px * var(--scale)); line-height: 1.45; }
.work-row .t small {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px;
  font-size: calc(13px * var(--scale)); color: var(--mute);
}
.work-row .due { text-align: right; line-height: 1.35; }

/* 지시 입력창 ----------------------------------------------------------- */
/* 지시 입력창.
   ★ 처음에는 이 상자를 화면 바닥에 붙이는(sticky bottom) 쪽으로 고쳤다가
     3분할로 바꾸면서 걷어냈다 (대표 지시 2026-09-10). 레일이 이미 화면에
     붙어 있으므로 상자까지 붙일 이유가 없고, 레일이 아래로 내려가는 좁은
     화면에서는 상자가 문서의 마지막이라 sticky 가 걸릴 자리도 없다.
     쓰이지 않는 규칙을 남겨 두면 다음 사람이 그게 동작한다고 믿는다. */
.cmd-box {
  margin-top: var(--md); border: 2px solid var(--primary); border-radius: var(--r-lg);
  padding: var(--sm) var(--lg); background: var(--canvas);
}
.cmd-head { display: flex; align-items: baseline; gap: var(--md); flex-wrap: wrap; }
.cmd-head h3 { margin: 0 0 var(--xs); font-size: calc(17px * var(--scale)); }
.cmd-box textarea {
  width: 100%; margin-top: var(--xs); padding: var(--sm) var(--md);
  font-family: var(--font); font-size: calc(16px * var(--scale)); line-height: 1.6;
  color: var(--ink); background: var(--canvas-soft);
  border: 1px solid var(--hairline); border-radius: var(--r-md); resize: vertical;
}
.cmd-box textarea:focus { outline: none; border-color: var(--primary); background: var(--canvas); }
/* ★ 결정·답변·사유 입력칸 — 지시창과 같은 크기·글꼴로 넉넉히 (대표 지시 2026-09-12 "입력 공간을 충분히") */
textarea.wide {
  display: block; width: 100%; margin-top: var(--sm); padding: var(--sm) var(--md);
  font-family: var(--font); font-size: calc(16px * var(--scale)); line-height: 1.6;
  color: var(--ink); background: var(--canvas-soft);
  border: 1px solid var(--hairline); border-radius: var(--r-md); resize: vertical; min-height: 5.5em;
}
textarea.wide:focus { outline: none; border-color: var(--primary); background: var(--canvas); }
/* 본문의 한 줄 입력칸도 같은 키·글꼴 — 브라우저 기본값(높이 20px)은 너무 작다 */
.main input[type="text"], .main input[type="date"], .main input:not([type]) {
  padding: 8px var(--md); font-family: var(--font); font-size: calc(15.5px * var(--scale));
  color: var(--ink); background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.main input[type="text"]:focus, .main input[type="date"]:focus, .main input:not([type]):focus { outline: none; border-color: var(--primary); background: var(--canvas); }
.cmd-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--md); flex-wrap: wrap; padding: var(--sm) 0;
}
.cmd-foot .urg { display: flex; gap: var(--md); flex-wrap: wrap; }
.cmd-foot .urg label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: calc(14.5px * var(--scale)); color: var(--body);
}
/* 좁은 화면에서는 설명 줄을 접는다 — placeholder 에 같은 예시가 남아 있어
   번호 쓰는 법을 몰라지지는 않는다. */
@media (max-width: 820px) {
  .cmd-box { padding: var(--xs) var(--md); }
  .cmd-head .hint { display: none; }
}

/* ③ 메일 리치 리스트 ----------------------------------------------------- */
.mail-rich { display: flex; flex-direction: column; gap: var(--sm); }
.mr-item {
  display: grid; grid-template-columns: 108px 1fr; gap: var(--md);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: var(--md) var(--lg); background: var(--canvas);
}
.mr-item.hot { border-color: var(--warning); background: #fffdf7; }
.mr-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mr-side .mono { white-space: nowrap; }
.mr-side .badge.acc { font-weight: 700; background: var(--canvas-soft-2); color: var(--ink); }
.mr-side .badge.acc.SALES      { background: var(--link-bg-soft);  color: var(--link-deep); }
.mr-side .badge.acc.ADMIN      { background: var(--violet-soft);   color: var(--violet); }
.mr-side .badge.acc.ACCOUNTANT { background: #e6f7f1;              color: var(--cyan-deep); }
.mr-side .badge.acc.CEO        { background: var(--warning-soft);  color: var(--warning-deep); }

.mr-main .subj {
  display: block; font-size: calc(16.5px * var(--scale)); font-weight: 600;
  color: var(--ink); line-height: 1.4; letter-spacing: -.2px;
  /* ★ 메일 제목은 공백 없는 긴 문자열이 섞인다(주문번호·베트남어 대문자). 어디서든 접는다. */
  overflow-wrap: anywhere;
}
.mr-main .subj:hover { color: var(--link); }
.mr-meta {
  display: flex; gap: var(--sm); flex-wrap: wrap; align-items: baseline; margin-top: 6px;
  font-size: calc(13.5px * var(--scale)); color: var(--mute);
}
.mr-meta .amt { font-family: var(--mono); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mr-sum { margin-top: var(--xs); font-size: calc(15.5px * var(--scale)); line-height: 1.65; color: var(--body); white-space: pre-line; }
.mr-kp  { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--xs); }
.mr-kp .kp {
  font-size: calc(13px * var(--scale)); background: var(--canvas-soft-2);
  border-radius: var(--r-sm); padding: 3px 8px; color: var(--body);
}
.mr-kp .kp i { font-style: normal; color: var(--mute); margin-right: 6px; font-weight: 600; }
.mr-main .ledger, .mr-main .action { margin-top: var(--xs); }

.mr-body { margin-top: var(--sm); border-top: 1px dashed var(--hairline); padding-top: var(--xs); }
.mr-body summary {
  cursor: pointer; font-size: calc(13.5px * var(--scale)); color: var(--link);
  font-family: var(--mono); list-style: none;
}
.mr-body summary::-webkit-details-marker { display: none; }
.mr-body summary::before { content: "▸ "; }
.mr-body[open] summary::before { content: "▾ "; }
.mr-body pre {
  margin: var(--xs) 0 0; padding: var(--sm) var(--md);
  background: var(--canvas-soft); border-radius: var(--r-md);
  font-family: var(--font); font-size: calc(14.5px * var(--scale)); line-height: 1.7;
  color: var(--body); white-space: pre-wrap; word-break: break-word;
  max-height: 380px; overflow-y: auto;
}


/* ── 넘침 방지 (2026-09-06) ─────────────────────────────────────────────────
   증상: 1440px 화면에서 가로 스크롤이 생기고 "지시" 버튼과 표 오른쪽이 잘렸다.
   원인: grid 트랙 min-width:auto + 긴 문자열 미분할 + .tbl-wrap overflow:hidden.
   여기서는 **레이아웃·색·크기를 바꾸지 않고 넘침만** 막는다. */
/* grid·flex 자식은 기본 min-width 가 auto 라 "줄어들지 못한다".
   내용이 큰 자식이 있으면 부모 트랙째로 화면 밖으로 밀린다. 줄어들 수 있게 푼다. */
.shell > * { min-width: 0; }
.mr-item > * { min-width: 0; }   /* ★ 실측 범인 — 메일 카드 본문 열(.mr-main)이 1057px 로 버텨 66px 넘쳤다 */

/* 긴 문자열(주문번호·베트남어 대문자 제목·첨부명)은 어디서든 접는다 */
.card, .mr-item, .mr-main, .mr-sum, .summary { overflow-wrap: anywhere; }
h1, h2, h3, .subj, .chips, .badge { overflow-wrap: anywhere; }

/* ★ overflow-x:hidden 으로 감추지 않는다 — 감추면 다음에 또 넘쳐도 아무도 모른다.
   넘치면 스크롤바가 보이게 두고, 보이면 고친다. */

/* 첨부 나열 배지만 nowrap 예외 — 라벨용 badge 는 한 줄이 맞지만
   "image.png (693KB) · image.png (100KB) · ..." 처럼 길어지는 것은 접혀야 한다 (2026-09-06) */
.chips .badge { white-space: normal; }

/* ── 접속자 (관문1, 2026-09-06) ────────────────────────────────────────────
     사이드바 맨 아래. 원장의 모든 변경에 이 사람 이름이 붙으므로 늘 보여야 한다. */
.side-me { border-top: 1px solid var(--hairline); padding-top: var(--md); margin-top: var(--lg); }
.me-box  { padding: 0 var(--sm); }
.me-name { font-size: calc(15px * var(--scale)); font-weight: 600; color: var(--ink); }
.me-mail { font-family: var(--mono); font-size: calc(12.5px * var(--scale)); color: var(--mute);
           margin: 3px 0 var(--sm); word-break: break-all; }
.me-box .btn { width: 100%; justify-content: center; }