/* ══════════════════════════════════════════════════════════════════
   admin.css — 관리자 화면 «전용» 모양               (2026-08-13 · qq77)

   ★ 어디서 왔나 : 문서\화면안\거래처등록.html 의 <style> 블록을 «그대로» 옮긴 것이다.
     화면안이 스스로 「정해지면 이 블록을 옮긴다」고 적어 둔 자리다.
   ★ 왜 site.css 에 넣지 않나 : 이것은 «관리자만» 보는 모양이다.
     공개 화면(제품·견적)이 쓰지도 않을 것을 내려받게 하지 않는다.
   ★ 색·직각·글꼴은 site.css 를 물려받는다. 새로 만든 색은 «빨강 하나»뿐 —
     사장님이 「매입처·개인사업자는 빨간색」이라 정해 주셨는데 site.css 에 빨강이 없었다.
   ★ 꾸밈 없음 : 그림자·둥근모서리·그라데이션 0 (CLAUDE.md 화면 만드는 방식)
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ★ 돈의 «방향» 두 색 (2026-08-07 사장님 지정)
     들어옴 = 파랑(이미 있는 --pri) · 나감 = 빨강(새로 넣는다)
     ⚠ --warn(주황)을 쓰지 않았다. 주황은 «경고»에 이미 쓰고 있어서
       「매입처 = 경고」로 읽힌다. 뜻이 겹치는 색은 나눠 둔다. */
  --in:  var(--pri);
  --out: #b3261e;
}

/* ── 작업 화면의 머리 : 제목과 «저장»이 늘 같이 보인다 ────────────── */
.adm-head { border-bottom: 2px solid var(--fg); background: var(--bg); position: sticky; top: 0; z-index: 40; }
.adm-head .wrap { display: flex; align-items: baseline; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
.adm-head h1 { font-size: 22px; margin: 0; }
.adm-head .where { color: var(--dim); font-size: 14px; }
.adm-head .acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.adm-note { background: var(--bg2); border-bottom: 1px solid var(--bd); }
.adm-note .wrap { padding-top: 12px; padding-bottom: 12px; font-size: 14px; color: var(--dim); }
.adm-note b { color: var(--fg); }
.adm-note.warn { border-bottom-color: var(--out); }
.adm-note.warn b { color: var(--out); }

/* ── 칸 묶음 ────────────────────────────────────────────────────── */
.fs { border: 0; margin: 0; padding: 26px 0 4px; border-top: 1px solid var(--bd); }
.fs:first-of-type { border-top: 0; }
.fs > legend { padding: 0; font-size: 17px; font-weight: 700; }
.fs > .why { color: var(--dim); font-size: 14px; margin: 4px 0 16px; }

/* ── 입력 한 줄 ─────────────────────────────────────────────────── */
.f { display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px; align-items: start; margin-bottom: 12px; }
.f > label { padding-top: 9px; font-weight: 700; font-size: 15px; }
.f .req { color: var(--pri); }
/* ⚠ 2026-08-13 — type 을 하나씩 세다가 «password 를 빠뜨려» 로그인 칸만 좁게 나왔다.
     ⇒ 「빼고 싶은 것」만 뺀다(:not). 새 type 을 쓸 때마다 여기를 고치지 않아도 된다 */
.f input:not([type=radio]):not([type=checkbox]), .f select, .f textarea {
  font: inherit; width: 100%; padding: 9px 11px;
  border: 1px solid var(--bd2); border-radius: var(--r);
  background: var(--bg); color: var(--fg);
}
.f textarea { min-height: 72px; resize: vertical; }
.f .hint { color: var(--dim); font-size: 13px; margin-top: 5px; }
.f .pair { display: flex; gap: 8px; align-items: center; }
.f .pair input { flex: 1; }
.f .stack input + input { margin-top: 8px; }
.w-sm { max-width: 220px; }
.w-md { max-width: 420px; }

/* ── ★ 역할 고르기 — 이 화면에서 «먼저» 정해지는 것 ────────────────
   순서와 색은 사장님이 정하셨다 (2026-08-07) :
     매출처·일반인(외상) = 파랑(돈이 들어온다) · 매입처·개인사업자 = 빨강(나간다) */
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 4px; }
.role { position: relative; }
.role input { position: absolute; opacity: 0; width: 0; height: 0; }
.role > span { display: block; border: 1px solid var(--bd2); padding: 14px 15px 13px; cursor: pointer; border-left: 4px solid var(--bd2); }
.role .rname { display: block; font-weight: 700; font-size: 16px; }
.role .rwhat { display: block; color: var(--dim); font-size: 13px; margin-top: 3px; }
.role .rno { display: block; margin-top: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--dim); }
.role input:checked + span { border-color: var(--fg); background: var(--bg2); }
.role input:focus-visible + span { outline: 2px solid var(--pri); outline-offset: 2px; }
.role.money-in  input:checked + span { border-left-color: var(--in); }
.role.money-in  input:checked + span .rno { color: var(--in); }
.role.money-out input:checked + span { border-left-color: var(--out); }
.role.money-out input:checked + span .rno { color: var(--out); }

/* ── ★★ 거래처번호 조립기 — 이 화면의 «주인공» ───────────────────── */
.idbox { border: 1px solid var(--bd2); background: var(--bg2); padding: 18px 20px 16px; }
/* 「누구인지」 한 줄 — `invite.php` 의 인라인 style 을 여기로 옮겼다 (2026-09-18 · qq387) */
.idbox .idwho { margin: 0; }
.idline { display: flex; align-items: flex-end; gap: 18px; font-family: var(--mono); }
.idseg { text-align: center; }
.idseg b { display: block; font-size: 30px; font-weight: 700; letter-spacing: .05em; line-height: 1.25; }
.idseg i { display: block; font-style: normal; font-size: 12px; color: var(--dim);
           border-top: 1px solid var(--bd2); margin-top: 6px; padding-top: 5px; letter-spacing: 0;
           font-family: "Pretendard", -apple-system, "Segoe UI", system-ui, "맑은 고딕", sans-serif; }
.idbox.money-in  .idseg.role b { color: var(--in); }
.idbox.money-out .idseg.role b { color: var(--out); }
.idsay { margin: 14px 0 0; font-size: 14px; color: var(--dim); }
.idsay b { color: var(--fg); }

/* ── 같은 사업자번호 알림 ───────────────────────────────────────── */
.samebiz { border: 1px solid var(--out); border-left-width: 4px; padding: 12px 14px; margin-top: 8px; }
.samebiz b { color: var(--out); }
.samebiz p { margin: 5px 0 0; font-size: 14px; color: var(--dim); }
.samebiz code { font-family: var(--mono); color: var(--fg); }

/* ── 여러 줄 표 (현장 · 직원) ────────────────────────────────────── */
.rows { width: 100%; border-collapse: collapse; }
.rows th, .rows td { border-bottom: 1px solid var(--bd); padding: 8px 8px; text-align: left; vertical-align: middle; }
.rows thead th { background: var(--bg2); font-size: 13px; color: var(--dim); border-bottom: 1px solid var(--bd2); }
.rows td input, .rows td select { font: inherit; width: 100%; padding: 7px 9px; border: 1px solid var(--bd2); border-radius: var(--r); background: var(--bg); color: var(--fg); }
.rows td.no { width: 44px; color: var(--dim); font-family: var(--mono); text-align: center; }
.rows td.act { width: 118px; white-space: nowrap; }
.rows .w-basic { width: 96px; }
.rows .w-prime { width: 180px; }  /* ★ 현장의 원청(원도급사) — 2026-08-15 qq107 */

/* ★ 매입처 「취급 품목」 카테고리 고르기 — 2026-08-15 qq108 */
.catbox { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 6px; }
.catpick { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px;
           border: 1px solid var(--bd2); border-radius: var(--r); cursor: pointer;
           font-size: 14px; white-space: nowrap; }
.catpick:has(input:checked) { border-color: var(--pri); background: var(--bg2); font-weight: 700; }
.catdot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--bd2); }
#catLost { flex-basis: 100%; font-size: 13px; }

/* ★ 명세서 「이름을 바꾼 기록」 — 2026-08-15 qq107 */
.loglist { margin: 0; padding-left: 18px; }
.loglist li { padding: 3px 0; font-size: 14px; }
.rows .w-rank { width: 110px; }
.rows .w-name { width: 130px; }
.rows .w-duty { width: 150px; }   /* ★ 직원 메모(담당) — 2026-08-08 사장님 */
.rows .btn.sm { padding: 6px 10px; font-size: 13px; }
.addrow { margin-top: 10px; }

.filebox { border: 1px dashed var(--bd2); padding: 16px; background: var(--bg2); }
.filebox p { margin: 0 0 8px; font-size: 14px; color: var(--dim); }

/* ── 역할에 따라 나타나고 사라지는 칸 ──────────────────────────────
   ⚠ 인라인 요소(별표 등)에 display:block 을 주면 «줄이 바뀐다».
     실제로 「사업자번호 *」의 별표가 다음 줄로 떨어졌다. 태그별로 나눠 켠다. */
[data-only] { display: none; }
[data-only].on { display: block; }
b[data-only].on, span[data-only].on, i[data-only].on { display: inline; }
.f[data-only].on { display: grid; }

/* ★★ 2026-08-21 (qq195 · 사장님) — **관리자 화면의 «위 빈 공간»을 줄인다.**
   `site.css` 의 `.sec` 는 위아래를 최대 **76px** 씩 띄운다 — 홈페이지(회사소개·제품)는
   그 여백이 읽기 좋지만, **관리자 화면은 «일하는 화면»**이라 그만큼 표가 밀린다.
   ⚠ 그 전에는 «탭줄»이 그 자리를 채우고 있어서 안 보였다. 탭줄을 걷어내니(qq190)
     **빈 공간만 남았다** — 사장님 화면 사진의 빨간 네모가 그것이다.
   ⇒ ★ 한 줄로 **관리자 화면 «전부»**가 같이 올라온다 (화면마다 고치면 하나를 빠뜨린다). */
.adm-main .sec { padding-top: 20px; }

/* ✕ 뒤집힘 (2026-09-22 · qq425 · 사장님 *"단추 줄도 고쳐줘 / 가운데 정렬해주고"*)
   ⚠⚠ 여기 `flex` 만 있고 **`flex-wrap` 이 없었다.** 그러면 단추가 많은 줄에서
     칸이 모자랄 때 줄을 바꾸는 대신 **단추가 저마다 쪼그라든다** —
     그래서 「⚠ 아래 «견적확인»을 먼저 눌러 주십시오」가 **한 줄에 두세 글자씩 세로로** 섰다.
     (주문 펼침 줄에서 실제로 그랬다. 「고장」으로 보이지만 오류는 한 줄도 안 난다)
   ⇒ ★ **줄을 바꾸게** 하고, 단추는 **안 줄어들게** 못 박는다.
     이것은 관리자 화면 «전부»에 듣는다 — 같은 병이 다른 화면에도 숨어 있기 때문이다 */
.foot-acts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 26px 0 60px; border-top: 1px solid var(--bd); margin-top: 26px;
}
/* ★ 단추·고르개는 «제 크기»를 지킨다 (글자가 세로로 서지 않게) */
.foot-acts > .btn, .foot-acts > button, .foot-acts > select, .foot-acts > a.btn,
.foot-acts form, .foot-acts > input { flex: 0 0 auto; white-space: nowrap; }
.foot-acts .right { margin-left: auto; }
/* ★ 「가운데 정렬」 — 사장님이 짚어 주신 «주문 펼침 줄»에만 (qq425).
     ⚠ 다른 줄까지 가운데로 밀지 «않는다» — `.right`(오른쪽 끝에 붙이는 것)가 있는 줄은
       왼쪽·오른쪽으로 갈라 두는 것이 뜻이다. 그것을 가운데로 모으면 뜻이 사라진다 */
.foot-acts.mid { justify-content: center; text-align: center; }

/* 도움말은 «칸 안»에도 «칸 밖»에도 놓인다 — .f 안쪽에만 규칙을 두면 밖의 것이 맨몸이 된다 */
.hint { color: var(--dim); font-size: 13px; margin-top: 5px; }

/* ★ 폐업·소송중·거래중지·기타는 «빨간 글씨» (2026-08-07 사장님).
   검정으로 남는 것은 거래중·거래전 둘뿐이다 */
.warnfg { color: var(--out); font-weight: 700; }
/* ★ 「수정됨」처럼 단추 «위»에 한 줄로 서야 하는 말 (2026-08-18 · qq156 사장님 지시).
     인라인 style 을 쓰지 않으려고 이름을 붙였다 — 플러그인이 이겨야 한다 (CLAUDE.md) */
.blk { display: block; }

/* ── 저장 결과 — 화면 «안»에 적는다 (alert 을 쓰지 않는다 · E20) ──── */
.saymsg { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--bd2); border-left-width: 4px; }
.saymsg[hidden] { display: none; }
.saymsg.ok  { border-left-color: var(--in); }
.saymsg.bad { border-left-color: var(--out); }
.saymsg.bad b { color: var(--out); }
.saymsg code { font-family: var(--mono); }

/* 초대 링크 한 줄 — 이름 · 이메일 · 링크칸 · 복사 */
.ivrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ivrow .ivlink { flex: 1; min-width: 260px; font: inherit; font-family: var(--mono); font-size: 13px;
                 padding: 6px 9px; border: 1px solid var(--bd2); background: var(--bg); color: var(--fg); }

/* 로그인 화면 — 넓은 화면에서 칸이 끝까지 늘어나지 않게 */
.loginbox { max-width: 620px; }

/* ── 가로 탭 줄 ──────────────────────────────────────────────────
   ⚠⚠ 이름이 `adm-` 이지만 지금 이것을 쓰는 곳은 **`board.php`(게시판 3종 탭)** 하나다.
     2026-08-17 에 관리자 메뉴를 사이드바로 옮기면서 이 규칙을 지웠다가,
     **게시판 탭이 같이 깨지는 것**을 보고 되살렸다.
   ★ 배운 것 : «관리자 것»이라 이름 붙은 규칙을 회원 화면이 빌려 쓰고 있었다.
     지우기 «전»에 누가 쓰는지 센다 (절대규칙 8 — 자르고 나서 검사하면 늦다).
   ▷ 이름을 고치는 것은 board.php 를 손볼 때 같이 한다. 지금 고치면 두 곳이 갈라진다. */
.adm-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.adm-nav a { color: var(--dim); text-decoration: none; font-size: 15px; }
.adm-nav a:hover { color: var(--fg); }
.adm-nav a[aria-current] { color: var(--fg); font-weight: 700; border-bottom: 2px solid var(--pri); }

/* ══ 관리자 뼈대 : 사이드바 + 상단바 + 본문 ══════════════════════
   2026-08-17 — 사장님 지시로 «상단바»에서 «사이드바»로 옮겼다.
   근거 = s.txt 155행 : *"1순위 메뉴는 사이드바 / 2순위 상단바 / 3순위 본문"*
   ⚠ 왜 이제야 — 화면이 아홉 장이 되면서 상단바가 «가로로» 넘치기 시작했다.
     한 줄에 안 들어가면 줄바꿈되고, 그때부터 «어디에 있는지»를 못 찾는다.
   ★ 새 색을 하나도 안 만들었다. site.css 의 토큰만 쓴다.
   ★ 인라인 style 은 한 자도 안 쓴다 (CLAUDE.md §4) — 플러그인이 못 이긴다. */
.adm-shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 100vh; }
.adm-main { min-width: 0; }          /* ⚠ 이것이 없으면 넓은 표가 사이드바를 밀어낸다 */

.adm-side {
  border-right: 1px solid var(--bd); background: var(--bg2);
  padding: 18px 0; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
}
.adm-side .brand { padding: 0 18px 14px; border-bottom: 1px solid var(--bd); }
.adm-side .brand a { color: var(--fg); text-decoration: none; font-weight: 700; }
.adm-side .brand span { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; }
.adm-side nav { padding-top: 10px; }

/* ══ 메뉴 «아홉 묶음» ══════════════ (2026-09-21 · qq390 · 사장님 s.txt)
   사장님 : *"드롭다운트리 구조가 아니라. 메뉴를 누르면 메뉴 화면 상단바에
     하단 메뉴버튼을 만들어서 활용 하기로 하자."*
   ★ 사이드바는 «묶음 이름»만 — 33줄이던 것이 10줄이 됐다.
     줄이 적으니 **한 줄을 크고 넉넉하게** 준다 (손가락으로도 눌린다) */
.adm-nav9 { padding-top: 10px; }
.adm-nav9 .g9 {
  display: block; padding: 13px 18px; color: var(--fg); text-decoration: none;
  font-size: 15px; font-weight: 700; border-left: 3px solid transparent;
}
.adm-nav9 .g9:hover { background: var(--bg); }
/* ★ 「지금 어디」 — 색 «하나»로 말하지 않는다 : 굵은 선 + 바탕 + 글자색 셋이 같이 말한다
     (색을 못 가리셔도 «선»과 «바탕»이 남는다) */
.adm-nav9 .g9[aria-current="page"] {
  background: var(--pri); color: #fff;
  border-left-color: var(--fg); border-left-width: 5px; padding-left: 16px;
}
.adm-nav9 .g9[aria-current="page"]:hover { background: var(--pri); }
/* 매출처는 파랑 · 매입처는 빨강 — 2026-08-28 사장님이 정해 주신 그대로 (qq246).
   ⚠ 켜져 있을 때는 바탕이 파랑이라 글자를 흰색으로 되돌린다 */
.adm-nav9 .g9.g-sell { color: var(--in); }
.adm-nav9 .g9.g-buy  { color: var(--out); }
.adm-nav9 .g9[aria-current="page"].g-sell,
.adm-nav9 .g9[aria-current="page"].g-buy { color: #fff; }
.adm-nav9 .navwait { display: block; padding: 13px 18px; color: var(--dim);
  font-size: 15px; font-weight: 700; cursor: not-allowed; }

/* ══ 하위 메뉴 — 화면 «위»의 단추 줄 ══════════════ (qq390)
   ★ 「지금 어디」는 **파랑이 아니라 «옅은 바탕»**이다
     (사장님 qq379 : *"파란색 단추 줄여줘"* · DESIGN_MS §5 의 `[aria-pressed]`).
     ⇒ 이 줄에 파랑이 없으니 화면의 **«진짜 주 단추»가 가려지지 않는다** */
.adm-sub {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 24px; border-bottom: 1px solid var(--bd); background: var(--bg2);
}
.adm-sub .navwait { color: var(--dim); cursor: not-allowed; opacity: .6; }
@media (max-width: 760px) {
  .adm-sub { padding: 8px 12px; gap: 4px; }
}

/* ══ 손전화 — 메뉴가 화면을 다 먹지 않게 ══ (2026-09-22 · qq403 · 사장님)
   ▷ 사장님 : *"손전화 화면부터 확인해줘"*
   ★ 390×844 로 재 보니 **첫 내용이 y=643** 이었다 (화면의 76%가 메뉴).
     묶음 이름이 크고 넉넉한 것은 «넓은 화면»에서 맞는 값이고, 손전화에서는 아니다.

   ⚠⚠ **매출처는 «세로»로 쌓여 592px** 이었다. 까닭은 모양을 «부모»에게 기대고 있어서다 :
     넓은 화면 규칙이 `.adm-side nav` 를 눕히는데, 매출처는
     `<nav><div class="adm-nav9">…</div></nav>` 라 **눕는 것은 그 `div` 하나**였다.
     ⇒ ★ **`.adm-nav9` 가 «스스로» 눕는다.** 부모가 무엇이든 같게 선다.

   ★ 가로로 «밀어서 보는» 띠로 만들지 «않았다** — 뒤쪽 묶음이 안 보이게 된다.
     **안 보이면 없는 것이다** (E27). 글자를 줄여 «접는» 쪽을 골랐다 — 하나도 안 가린다. */
@media (max-width: 860px) {
  .adm-side .brand { padding: 0 12px 8px; }
  .adm-side .brand span { font-size: 12px; }

  .adm-nav9 { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; }
  .adm-nav9 .g9, .adm-nav9 .navwait {
    padding: 7px 10px; font-size: 13px;
    border-left: 0; border-bottom: 3px solid transparent;
  }
  /* ⚠ 넓은 화면의 「켜짐」은 **왼쪽 굵은 선**이다. 가로로 누우면 그 선이 «옆»에 붙어
       어느 것이 켜졌는지 안 읽힌다 ⇒ 눕는 동안은 **아래 선**으로 옮긴다 */
  .adm-nav9 .g9[aria-current="page"] {
    border-left: 0; border-bottom-color: var(--fg); padding-left: 10px;
  }
  .adm-side .foot { padding: 8px 12px; }
}
.adm-side .grp { padding: 16px 18px 6px; font-size: 12px; color: var(--dim); letter-spacing: .04em; }
/* ★★ 「매출처」·「매입처」는 «크고 색으로»          (2026-08-28 · qq246 · 사장님)
     사장님 : *"글자 폰트 크기를 **3폰트 키워주고** 매출처는 파란색, 매입처는 빨간색"*
   ▷ 두 묶음에 **「견적의뢰 · 받은 것」이 똑같이** 있어서, 이름을 갈지 않고
     **묶음이 더 잘 보이게** 하기로 사장님이 정하셨다. 메뉴 글자가 안 길어져 더 낫다.
   ★ 12px → **15px** (세 포인트) · 굵기도 올린다 — 크기만 키우면 옅은 회색이라 덜 선다 */
.adm-side .g-sell, .adm-side .g-buy { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.adm-side .g-sell { color: var(--pri); }     /* 매출처 — 파랑 (우리가 «파는» 쪽) */
.adm-side .g-buy  { color: var(--red); }     /* 매입처 — 빨강 (우리가 «사는» 쪽) */
.adm-side a {
  display: block; padding: 9px 18px; color: var(--fg); text-decoration: none; font-size: 15px;
  border-left: 3px solid transparent;
}
.adm-side nav a:hover { background: var(--bg); }
/* ★ «지금 어디인가»를 색 하나가 아니라 «선 + 굵기 + 바탕» 셋으로 말한다 —
     색만으로 말하면 색을 못 가리시는 분께는 아무 표시도 없는 것과 같다 */
/* ★★★ 2026-08-31 (qq252 · 사장님) — *"선택된 목록버튼 **대비를 확실하게** 해줘서
     현재 목록 위치를 **사용자에게 알기 쉽게**"*
   ⇒ 「바탕이 살짝 회색」이던 것을 **파란 바탕 + 흰 글씨**로 바꿨다.
     ★ 곁의 것들과 **한눈에** 갈린다 — 옅은 회색은 줄이 스물이면 «찾아야» 보인다.
     ★ 색 «하나»로 말하지 않는다 : 굵은 왼쪽 선 + 바탕 + 굵기, 셋이 같이 말한다
       (색을 못 가리셔도 «선의 굵기»와 «글자 굵기»가 남는다). */
.adm-side a[aria-current="page"] {
  background: var(--pri); color: #fff; font-weight: 700;
  border-left-color: var(--fg); border-left-width: 5px; padding-left: 16px;
}
.adm-side a[aria-current="page"]:hover { background: var(--pri); }
/* ⚠ 켜진 줄 «안»의 흐린 글씨(숫자 배지 등)도 파란 바탕 위에서 읽혀야 한다 */
.adm-side a[aria-current="page"] .dim,
.adm-side a[aria-current="page"] b { color: #fff; }
/* ★ 켜진 줄을 사이드바 «가운데»로 두는 것은 `assets/side.js` 가 한다 (qq252).
     ⚠ 여기에 `scroll-behavior: smooth` 를 두지 «않는다» — 처음 자리를 잡을 때
       맨 위에서 스르륵 내려오는 것이 보여, 그것이 오히려 «튀어» 보인다 */
/* ★ 아직 «없는» 화면 — 감추지 않고 흐리게 두고 ⏳ 를 붙인다 (E27).
     감추면 「그 기능이 원래 있었나」를 사장님이 물어보실 수조차 없다.
   ⚠ 색만으로 말하지 않는다 — ⏳ 글자가 «색을 못 가리셔도» 보이는 표시다 */
.adm-side a.soon { color: var(--dim); }
.adm-side a.soon::after { content: " ⏳"; font-size: 12px; }
.adm-side .brand span + span { margin-top: 0; }

.adm-side .foot { padding: 18px 18px 0; margin: 0; border-top: 1px solid var(--bd); }
.adm-side .foot a { display: inline; padding: 0; font-size: 14px; color: var(--dim); }

/* ── 좁은 화면 : 사이드바를 «위»로 눕힌다 (감추지 않는다 · E27) ── */
@media (max-width: 860px) {
  .adm-shell { grid-template-columns: 1fr; }
  .adm-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--bd); }
  .adm-side nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 10px; }
  .adm-side .grp { width: 100%; padding: 8px 8px 2px; }
  .adm-side a { border-left: 0; border-bottom: 3px solid transparent; padding: 7px 10px; }
  .adm-side a[aria-current="page"] { border-left: 0; border-bottom-color: var(--pri); }
  .adm-side .foot { padding: 10px 18px; border-top: 0; }
}

/* ── 대시보드 ────────────────────────────────────────────────── */
.dsh-card .n { font-weight: 700; }
.dsh-card .v { font-size: 28px; font-family: var(--mono); margin: 6px 0 2px; }
.dsh-card .c { font-size: 13px; }
.dsh-wait { margin-bottom: 30px; }

.rows.money th { font-weight: 400; }
.rows.money th .dim { font-size: 13px; margin-left: 6px; }
.rows.money .num { font-family: var(--mono); font-size: 17px; text-align: right; white-space: nowrap; }
.rows.money .fin th, .rows.money .fin .num { font-weight: 700; font-size: 20px; }
/* ★ 「가리기」 — 금액 «글자»만 덮는다. 칸 자리는 그대로 둔다(화면이 튀지 않게) */
.dsh-money.masked .money-v { color: transparent; position: relative; }
.dsh-money.masked .money-v::after {
  content: "●●●●●"; position: absolute; right: 0; color: var(--dim); letter-spacing: .1em;
}
.dsh-money { margin-bottom: 30px; }
.dsh-money h2 .btn { margin-left: 8px; vertical-align: middle; }

/* ══ 거래처 목록 (PTN-02) ═════════════════════════════════════ */
.pl-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pl-filters select, .pl-filters input[type=search] {
  font: inherit; padding: 7px 9px; border: 1px solid var(--bd2);
  background: var(--bg); color: var(--fg); }
.pl-filters input[type=search] { min-width: 300px; flex: 1; }

/* 고르는 칩 — 여러 개를 «같이» 켤 수 있다 (상태는 하나가 아니다) */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-b { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
         border: 1px solid var(--bd2); padding: 6px 10px; font-size: 14px; }
.seg-b input { margin: 0; }
.seg-b.on { border-color: var(--pri); color: var(--pri); font-weight: 700; }
.seg-b .n { font-family: var(--mono); }

.pl-cols { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
           font-size: 14px; margin: 0 0 10px; }
.pl-cols label { display: inline-flex; align-items: center; gap: 5px; }
.pl-cols .right { margin-left: auto; }

/* ★★ 표 폭은 «내용»이 아니라 colgroup·class 가 정한다 (화면안 2026-08-08).
   안 그러면 이름 한 줄이 길어질 때 표 전체가 출렁인다 */
.tblwrap { overflow-x: auto; border: 1px solid var(--bd); }
.tblwrap.drag { cursor: grabbing; user-select: none; }
.list2 { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px; }
.list2 th, .list2 td { border-bottom: 1px solid var(--bd); padding: 8px 10px;
                       text-align: left; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.list2 thead th { background: var(--bg2); color: var(--dim); font-size: 13px; white-space: nowrap; }
.list2 .c-no { width: 130px; } .list2 .c-nm { width: 240px; }
/* 작성자·보낸 사람 — «이름»에 맞춘 칸 (2026-09-18 · qq388 · 사장님)
   ⚠ 여태 `c-nm`(240px)을 **거래처·작성자·납품장소 셋이** 나눠 쓰고 있었다.
     이름은 길어야 「영업부 전영욱」(14px 로 88px)인데 240px 을 차지했다.
   ★ 재서 정했다 : 가장 긴 줄이 「주문 영업부 전영욱」 **121px** + 안쪽 여백 22 = 143 ⇒ **145**.
     («계정 이름» 2,289개를 세어 가장 긴 것을 골랐다)
   ⇒ 240 → 145. 남는 95px 은 «거래처»와 «납품 장소»가 나눠 갖는다 */
.list2 .c-who { width: 145px; }
.list2 .c-tel { width: 130px; } .list2 .c-won { width: 120px; }
.list2 .c-st { width: 84px; } .list2 .c-day { width: 104px; }
/* ★★ 줄마다 단추를 두지 «않는다» — 체크칸으로 고르고 표 밖 단추로 한다 (2026-08-21 · qq188).
     ⚠ 단추 칸(156px)이 표를 화면 밖으로 밀어냈다. 체크칸은 36px 이다.
       ⇒ 「여럿을 한꺼번에」와 「표가 화면에 들어온다」가 **같이** 풀렸다 */
.list2 .c-ck { width: 36px; text-align: center; }
.list2.files .c-nm { width: 200px; }        /* 매입처·파일·함께 온 말 — 240 은 넘친다 */
.pickbar { margin: 10px 0; }
.list2 .c-area { width: 80px; } .list2 .c-lev { width: 70px; } .list2 .c-biz { width: 120px; }

/* ── 계정관리 ① 「사람 찾기」 표 — 칸 너비 (2026-09-21 · qq398 · 사장님) ──
   사장님 : *"이름 6자 소속 15자 연락처 13자 아이디 30자"*
   ★★ 재는 자를 «글자 종류»에 맞춘다 — 이것이 이 묶음의 전부다.
     ⚠ 어림으로 잡지 «않았다». 이 집 글꼴(Pretendard) 그대로 **브라우저에서 쟀다**
       (`canvas.measureText` · 14px) :
```
         한글 「가」            = **14.0px**   (글자 크기 그대로 — 한글은 네모다)
         「010-5555-5555」 13자 = **94.2px**   (1자 7.2px)
         영문·기호 30자         = **207.3px**  (1자 **6.9px**)
```
     ⚠⚠ 처음엔 어림으로 「영문 1자 ≒ 8.4px」이라 잡아 30자를 252px 로 두었다.
       **재 보니 207px** 이었다 — 45px(한 칸의 20%)을 헛되이 잡을 뻔했다.
       근거로 삼았던 `.c-tel`(130px)이 «13자에 맞춘 것»이 아니었기 때문이다.
       ⇒ ★ **남의 자를 빌려 쓰면 틀린다. 쓸 자리에서 다시 잰다** (E100).

   ⚠⚠ **`em` 으로 적지 «않는» 까닭** : `table-layout: fixed` 는 **첫 줄(`thead`)의 칸**으로
     너비를 정하는데, 이 집은 `thead th` 가 **13px**, `td` 가 **14px** 이다 ⇒
     `6em` 이 머리에서는 78px, 몸에서는 84px 로 **다른 뜻**이 된다.
     오류는 안 난다 — 그냥 여섯 글자가 안 들어갈 뿐이다. 그래서 셈을 여기서 한 번 하고 박는다.

   ★ `box-sizing: border-box` 라 안쪽 여백(좌우 10+10=20)을 **더해** 준다.
   ⚠ 이 화면 «전용»이다 (`.list2.accs`) — `c-nm` 처럼 온 집이 나눠 쓰는 이름을 고치면
     다른 표 열 몇 장이 같이 틀어진다 (9-18 · qq384 에 실제로 물렸다) */
/* ★★ 2026-09-21 (qq399 · 사장님) — 104 → **62** (*"절반 정도로 줄여줘"*).
     ★ 「정도」를 **자료로** 잡았다 — 계정 2,373개의 이름 길이를 셌다 :
         3자 **2,001명(84%)** · 4자 83 · 5자 94 · 6자 2 · 7자 1
       (5자 넘는 것은 대개 「운전김일출」처럼 **부서가 앞에 붙은 것**이다)
     ⇒ 한국 이름의 본래 길이는 **세 자**다. 104 의 절반인 52px 로 하면
       **세 자가 안 들어가** 여덟 중 일곱의 이름이 잘린다. 그래서 **62**(3자 42 + 여백 20).
     ★ 다섯 자가 넘는 97명은 **두 줄로 접혀서** 보인다 — 잘리지 않는다
       (`white-space` 를 건드리지 않았다. 잘린 이름보다 두 줄이 낫다) */
.list2.accs .c-a1 { width: 62px; }    /* 이름      한글  3자 = 42  + 20 */
.list2.accs .c-a2 { width: 230px; }   /* 현재 소속 한글 15자 = 210 + 20 */
.list2.accs .c-a3 { width: 116px; }   /* 연락처    숫자 13자 =  94 + 20 (+2) */
.list2.accs .c-a4 { width: 228px; }   /* 아이디    영문 30자 = 207 + 20 (+1) */
.list2.accs .c-a5 { width: 96px; text-align: center; }
.list2.accs .c-a6 { width: auto; }                /* 비고 — 남는 만큼 */

/* ── 비고 = «적는 메모» (2026-09-21 · qq400 · 사장님 : *"적는 메모 넣어줘"*) ──
   ★ 적는 칸 · 저장 · 상태(과장 · 비번 아직)를 **한 줄**에 세운다.
     줄을 나누면 표가 두 배로 길어진다 — 사람을 찾으려고 보는 표다.
   ⚠⚠ 칸 높이를 **26px**(작은 단추와 같은 키)로 못 박는다. 안 그러면
     `.dz` 의 입력칸 규격(32px)을 물려받아 **줄마다 표가 부푼다.**
   ⚠⚠ `.memo` 를 **세 번** 겹쳐 적는다. 오타가 아니다 —
     `.dz.dz.dz input:not(…):not(…)` 이 (0,5,1) 이라 그냥 `.memo` 로는 **언제나 진다.**
     여기를 (0,6,0) 으로 올려야 이긴다 (`.qty.qty.qty` 와 같은 까닭 · qq386).
     ★ `.dz` 를 걷는 날 이 겹쳐 적기도 같이 걷는다 */
.list2.accs .memoform { display: flex; align-items: center; gap: 6px; }
.list2.accs .memoform .memo.memo.memo {
  flex: 1 1 auto; min-width: 90px; max-width: 240px;
  height: 26px; min-height: 26px; font-size: 13px; padding: 2px 8px;
}
.list2.accs .memoform .dim { white-space: nowrap; }
/* ★ 이름을 «누르면 펴진다» — 단추가 아니라 글자가 문이다 (사장님 지시 · qq398).
     ⚠ 눌리는 것인 줄 알아야 누르신다 ⇒ 밑줄과 손 모양을 준다 */
.list2.accs .opener { font-weight: 700; color: var(--pri); text-decoration: underline; cursor: pointer; }
/* ★ 펴진 줄 : 밑줄을 걷고 글자를 진하게 — 그 줄 바탕은 `.list2 tr.open > td` 가 이미 칠한다.
     ⚠⚠ 여기 `▾` 를 붙였다가 걷었다 (qq399) — 이름 칸이 **세 글자에 딱** 맞춰져 있어
       화살표 한 자가 더 붙으면 「홍길동」이 **두 줄로 접힌다.**
       ★ «알려 주려는 표»가 «알려야 할 것»을 밀어내면 그 표가 틀린 것이다 */
.list2.accs tr.open .opener { color: var(--fg); text-decoration: none; }
/* ★ 「보일 칸」 체크박스와 접힌 칸 — 2026-08-14 (qq102)
   ⚠ 감추는 것은 «화면»뿐이다. 그 칸의 input 은 표 안에 그대로 있어 저장에 같이 실린다.
     (DOM 에서 빼면 값이 안 실려 가 저장하는 순간 빈 값으로 덮인다) */
.colsw { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.colsw label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.colsw .dim { font-size: 13px; }
.list2 .off { display: none; }

/* ★ 거래처 «찾기» 목록 — 2026-08-14 (qq101)
   드롭다운을 검색으로 바꾸면서 결과를 보여 주는 자리.
   ⚠ 목록이 길어지면 화면을 밀어내므로 높이를 정하고 그 «안»에서 굴린다 */
.plist {
  max-width: 460px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--bd2); border-radius: var(--r); background: var(--bg); margin-top: 6px;
}
.plist .dim { padding: 12px 14px; margin: 0; font-size: 14px; }
.plist .pitem {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: 9px 14px; border: 0; border-bottom: 1px solid var(--bd); background: none; cursor: pointer;
}
.plist .pitem:last-child { border-bottom: 0; }
.plist .pitem:hover { background: var(--bg2); }
/* 키보드로 짚고 있는 줄 — 마우스가 올라간 것과 «구분»되어야 한다 */
.plist .pitem.cur { background: var(--row); box-shadow: inset 3px 0 0 0 var(--pri); }
.plist .pitem .mono { margin-left: 8px; font-size: 13px; }

/* ★ 명세서의 «규격»·«결제» 칸 — 2026-08-14 (qq96)
   ⚠ 종전에는 거래처 목록의 「등급」 칸(.c-lev · 70px)을 «빌려 쓰고» 있었다.
     각도가 붙어 「15A 45°」가 되자 «°가 잘려» 45°인지 90°인지 못 읽게 됐다.
     («외상»도 「외·」로 잘려 있었다 — 빌려 쓴 순간부터 이미 좁았던 것이다)
   ★ 뜻이 다른 칸에 같은 이름을 쓰면, 한쪽 사정으로 넓힐 때 다른 쪽이 같이 움직인다 (E29). */
.list2 .c-spec { width: 96px; } .list2 .c-pay { width: 80px; }
.list2 tr.open > td { background: var(--bg2); }

/* ★★ 번호를 눌러 펼친 줄이 «상단바 뒤»로 숨지 않게 — 2026-08-18 (사장님)
   거래처 번호는 `partners.php?open=5#p5` 로 «화면을 다시 여는» 단추다.
   브라우저는 #p5 를 **창의 맨 꼭대기**에 갖다 놓는데, 그 자리는 `.adm-head`(69px)가
   덮고 있다 — 눌린 줄과 펼쳐진 내용의 첫 줄이 «그 뒤로 들어가» 안 보였다.
   ⚠ 오류가 한 줄도 안 난다. 화면은 멀쩡히 바뀌었고 «자리»만 틀렸다.
   ⇒ 그 단추에만 «내려놓을 자리»를 준다. 표준 CSS 한 줄이라 JS 를 안 쓴다.
   ★ 80px 인 이유 : 상단바가 69px 이고(창 폭 420~1600 에서 «전부» 69였다) 남는 11px 이 틈이다.
     ⚠ 넉넉한 쪽으로 잡는다 — 남으면 줄이 조금 아래 설 뿐이지만, 모자라면 «다시 가린다» */
.list2 .no-btn { scroll-margin-top: 80px; }

/* 미수금 — 받을 돈은 검정. 부호보다 «색»이 먼저 읽힌다 */
.money { text-align: right; font-family: var(--mono); white-space: nowrap; }

.tag { display: inline-block; font-size: 12px; padding: 2px 6px; border: 1px solid;
       white-space: nowrap; margin-left: 4px; }
.tag.money-in  { color: var(--pri); border-color: var(--pri); }
.tag.money-out { color: var(--out); border-color: var(--out); }

.no-btn { font-family: var(--mono); font-size: 13.5px; color: var(--fg);
          text-decoration: none; white-space: nowrap; }
.no-btn:hover { text-decoration: underline; }
.no-btn .car { display: inline-block; width: 12px; color: var(--dim); }
.no-btn[aria-expanded="true"] { font-weight: 700; }

/* ⚠⚠⚠ class 이름을 «detail» 로 쓰지 않는다 (2026-08-07 에 실제로 물렸다).
   site.css 에 이미 `.detail { display:grid; grid-template-columns:380px 1fr }` 가 있어서
   <tr class="detail"> 이 grid 가 되고 **colspan 이 통째로 무시**됐다 — 오류는 한 줄도 안 났다.
   ⇒ 공용 CSS 를 물려받는 화면에서는 «흔한 이름»을 쓰지 않는다. 여기서는 .expand */
.list2 tr.expand > td { background: var(--bg2); padding: 0; border-bottom: 2px solid var(--bd2); }
.dwrap { padding: 8px 12px 18px; }
.dbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.dbox h3 { font-size: 14px; margin: 0 0 8px; color: var(--dim); }
.dtab { width: 100%; border-collapse: collapse; background: var(--bg); }
.dtab th, .dtab td { border: 1px solid var(--bd); padding: 6px 8px; font-size: 13.5px; text-align: left; }
.dtab thead th { background: var(--bg2); color: var(--dim); font-size: 12.5px; }
.dtab td.won { text-align: right; font-family: var(--mono); }
.dtab td.day { font-family: var(--mono); white-space: nowrap; color: var(--dim); }

/* ── 발주서를 «짜는» 표 ─────────────────── (2026-08-19 · qq161)
   ★ 매출처가 주문한 줄과 «우리가 얹는 줄»이 한 표에 있다.
     칸 안의 입력칸은 «칸을 꽉» 채운다 — 좁으면 적으신 글이 안 보인다. */
.dtab td input[type="text"],
.dtab td input[type="number"] {
  font: inherit; font-size: 13.5px; width: 100%; padding: 5px 7px;
  border: 1px solid var(--bd2); background: var(--bg); color: var(--fg);
}
/* ★ 「말」 줄 — 물건이 아니다. 색이 아니라 «굵기»로 가른다 (print.css 와 같은 생각) */
.dtab tr.cut > td { font-weight: 700; background: var(--bg2); }
/* ★ 손보기 — «순서 숫자 옆에 작게» (2026-08-19 · qq163 사장님 지시)
     열을 따로 두지 않는다. 단추가 아니라 «글자»처럼 보이게 한다 —
     표 안에서 단추가 크면 그것부터 눈에 들어온다 */
.dtab td.day .mini {
  font: inherit; font-size: 12px; line-height: 1;
  margin-left: 3px; padding: 2px 4px;
  border: 1px solid var(--bd2); border-radius: 3px;
  background: var(--bg2); color: var(--dim); cursor: pointer;
}
.dtab td.day .mini:hover { color: var(--fg); border-color: var(--fg); }
/* ★ 체크를 끈 줄 — «안 나간다»는 것이 한눈에 보여야 한다 (2026-08-19 · qq162).
     색이 아니라 «흐리기»로 한다 — 색맹이신 분에게도 같게 보인다.
   ⚠ 체크칸 자체는 흐려지면 안 된다. 다시 켜실 곳이다 */
/* ⚠ 이름을 `off` 로 두지 «않는다» — 위 280행 `.list2 .off { display:none }` 이
     이 표(펼침 안에 있다)까지 잡아서 **줄이 통째로 사라진다** (실제로 물렸다) */
.dtab tr.rowoff > td { opacity: .45; }
/* ★ 매입가 칸 — 「이 매입처에 «박아 둔» 값인가」를 굵기로 말한다  (2026-08-20 · qq171)
     색으로 하지 않는다 — 흐린 줄(rowoff)과 겹치면 색은 구분이 안 된다.
   ⚠ 잠긴 칸(단관)은 «흐리게» — 못 고치는 것이 눌러 보기 «전»에 보여야 한다 */
.dtab td .c-cost { text-align: right; font-family: var(--mono); }
.dtab tr.c-fix .c-cost { font-weight: 700; }
.dtab td .c-cost[readonly] { background: var(--bg2); color: var(--dim); }

/* ★ 발주서가 «어디까지 왔나» — 단추가 아니라 지나온 자리  (2026-08-20 · qq172)
     사장님 : 관리자가 실수로 누르면 상대가 헷갈린다 ⇒ 여기서는 **보여 주기만** 한다.
   ⚠ 색만으로 가르지 않는다 — 지난 것은 ✓, 지금은 테두리로도 표시한다 */
.flow { display: inline-flex; gap: 4px; align-items: center; }
.flow b { font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--bd2); border-radius: 3px; }
.flow b.done { color: var(--dim); }
.flow b.done::before { content: "✓ "; }
.flow b.now { color: var(--fg); border-color: var(--fg); border-width: 2px; }
.flow b.yet { color: var(--dim); opacity: .5; }

/* ★ 명세서 줄의 «고르기» 칸 — 결제수단을 부분만 바꿀 때 쓴다 (2026-08-20 · qq172)
   ⚠ 줄을 지우거나 실어 보내는 것과 상관이 없다. «범위»를 고르는 칸이다 */
.stmt .c-ck { width: 30px; text-align: center; }
/* ★ 라디오·체크를 «글자와 같이» 묶는다 — 따로 놓으면 무엇의 이름표인지 흐려진다 */
.pick { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
/* ★ 입금 줄 — 품목 줄 «밑»에 붙는 자식 줄 (2026-08-20 · qq173) */
.stmt tr.paidrow td.paidline { color: var(--dim); font-size: 12.5px; }
.stmt tr.paidrow td.paidline b { color: var(--fg); }
.dtab tr.rowoff > td:first-child { opacity: 1; }
.dnone { color: var(--dim); font-size: 13.5px; padding: 10px 2px; }
.memo-add { display: flex; gap: 6px; margin-top: 8px; }
.memo-add input { flex: 1; font: inherit; font-size: 13.5px; padding: 7px 9px;
                  border: 1px solid var(--bd2); background: var(--bg); color: var(--fg); }
.drag-say { font-size: 13px; margin: 8px 0 0; }

@media (max-width: 860px) { .dbox { grid-template-columns: 1fr; } }

/* ── 직원 계정 ───────────────────────────────────────────────── */
form.inline { display: inline; }
.list2 tr.off td { color: var(--dim); background: var(--bg2); }
.list2 tr.off .c-nm { text-decoration: line-through; }
.list2 select { font: inherit; font-size: 13px; padding: 4px 6px;
                border: 1px solid var(--bd2); background: var(--bg); color: var(--fg); }
.pl-filters input[type=text], .pl-filters input:not([type]), .pl-filters input[type=email] {
  font: inherit; padding: 7px 9px; border: 1px solid var(--bd2);
  background: var(--bg); color: var(--fg); min-width: 150px; }

/* ── 게시판 ──────────────────────────────────────────────────── */
.list2.board .c-nm { width: auto; }
.list2.board tr.notice td { background: var(--bg2); }
.pl-filters .right { margin-left: auto; }
.post-body { white-space: normal; line-height: 1.8; margin: 14px 0 24px; }
/* ★ 「파일로 보내신 것」 — 표 «앞»에 서는 칸   (2026-08-28 · qq245 · 사장님)
     *"(파일만 보낸경우) 로 보낸 내용이 … 내용에 안보여"*
   ★ 눈에 띄어야 «기능»이다 — 이것이 안 보여서 보낸 것을 못 찾으셨다.
     색이 아니라 **왼쪽 굵은 선**으로 세운다 (색맹이신 분에게도 같게 보인다) */
.gotfile { border-left: 4px solid var(--pri); }
.gotfile .filelist { margin-bottom: 0; }
.gotfile .filelist li:last-child { border-bottom: 0; }
.filelist { list-style: none; padding: 0; margin: 0 0 10px; }
.filelist li { padding: 6px 0; border-bottom: 1px solid var(--bd); }
.filelist .dim { margin-left: 8px; font-size: 13px; }
.f input[type=file] { font: inherit; }
/* 「지우기」 폼이 단추처럼 한 줄에 서게 */
.foot-acts form { display: inline; }

/* ── 단가정책 ────────────────────────────────────────────────── */
.rows.pol { max-width: 780px; }
.rows.pol th { width: 110px; font-weight: 700; }
.rows.pol .num { text-align: right; }
.rows.pol .mono { font-family: var(--mono); }
.rows.pol select { font: inherit; padding: 6px 8px; border: 1px solid var(--bd2);
                   background: var(--bg); color: var(--fg); }
input.pct { font: inherit; font-family: var(--mono); width: 90px; text-align: right;
            padding: 6px 8px; border: 1px solid var(--bd2); background: var(--bg); color: var(--fg); }

/* ── 품목 단가 (items.php?code=) ─────────────────────────────── */
.list2.price { min-width: 1320px; }
.list2.price input { font: inherit; font-size: 13px; width: 100%; padding: 5px 7px;
                     border: 1px solid var(--bd2); background: var(--bg); color: var(--fg); }
.list2.price input.num { font-family: var(--mono); text-align: right; }
.list2.price .mono { font-family: var(--mono); }
.list2.price td.num { text-align: right; }

/* ── 품목의 매입처 고르기 (items.php) ────────────────────────── */
/* ★ 「◯◯ + 주로」가 한 덩어리다 — 줄이 바뀌어 갈라지면 어느 것의 「주로」인지 모른다 */
.suppick { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-bottom: 14px; }
.suppick .sup1 { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }

/* ── 거래명세서 작성 (statement.php) ─────────────────────────── */
.list2.stmt { min-width: 1100px; }   /* 칸 합 1,116 · 1366px 화면에서도 «가로 막대 없이» (qq200 에서 재서 잡았다) */

/* ★★★ 2026-09-01 (qq257 · 사장님) — **«칸 자체»가 입력칸이다.**
     *"표 안에 입력칸이 있어서 복잡해보여 **칸 자체를 입력 하는 구조로** 변경해줘"*
   ★ 칸 안에 «상자»가 또 있으니 테두리가 두 겹이었다 — 표가 복잡해 보이던 까닭이다.
     ⇒ 테두리·바탕을 **없앤다**. 글자만 남아 «그냥 표»로 보인다.
   ★ 그래도 **고칠 수 있는 자리**인 것은 알아야 한다 ⇒ 손이 올라가면 테두리가 «비치고»,
     들어가면(focus) 또렷해진다. 「보이는 상자」를 「만지면 나타나는 상자」로 바꾼 것뿐이다.
   ⚠ `<input>` 을 없앤 것이 «아니다» — 값을 읽고 쓰는 코드는 한 줄도 안 바뀐다.
     진짜로 칸을 `contenteditable` 로 바꾸면 숫자·탭 이동·되받기를 전부 다시 짜야 한다 */
.list2.stmt th, .list2.stmt td { padding: 3px 5px; }   /* ★ 줄 높이 «최소» (사장님) */
.list2.stmt input, .list2.stmt select {
  font: inherit; font-size: 13px; width: 100%; padding: 4px 5px;
  border: 1px solid transparent; background: transparent; color: var(--fg); }
.list2.stmt input:hover:not(:disabled):not([readonly]),
.list2.stmt select:hover { border-color: var(--bd); }
.list2.stmt input:focus, .list2.stmt select:focus {
  border-color: var(--pri); background: var(--bg); outline: none; }
.list2.stmt input:disabled, .list2.stmt input[readonly] { color: var(--dim); }
.list2.stmt input.num { font-family: var(--mono); text-align: right; }

/* ══ 2026-09-22 (qq428 · 사장님) — **규격이 잘려서 안 나온다 / 수량은 가운데 / 품명은 왼쪽** ══
   ⚠⚠ 왜 잘렸나 — 쟀더니 규격 칸의 입력칸은 **84px**인데 「200A ×80A」는 **99px** 였다.
     ⇒ ★ 까닭이 «둘»이었다 :
       ① `.dz…input { padding: 12px }`(새 디자인 규칙)가 이 표에도 걸려 **안쪽 여백만 24px**.
          시트는 칸이 좁아 그 여백이 곧 «잘린 글자»가 된다 ⇒ 여기서만 **6px** 로 되돌린다.
       ② 그러고도 모자라서 규격 칸을 96 → **104px**, 품명 칸을 240 → **256px** 로 넓혔다.
     ★ 품명도 잘리고 있었다 — 가장 긴 이름 「소프트 제수밸브 (공기밸브부착형)」이 **228px**인데
       입력칸이 216px 였다. 사장님은 규격만 말씀하셨지만 **같은 병**이라 같이 고친다.
     ⚠ 칸 합이 1,164px 다 (그 화면 폭 1,180px) — 더 넓히면 가로 막대가 생긴다.
   ★ 「수량은 가운데 · 품명은 왼쪽」 — 사장님 지시. 단가·금액은 **오른쪽 그대로**다
     (돈은 자릿수가 맞아야 읽힌다 · DESIGN_MS §5 표) */
.dz.dz.dz .list2.stmt input, .dz.dz.dz .list2.stmt select { padding: 4px 6px; }
.list2.stmt .c-nm   { width: 256px; }
.list2.stmt .c-spec { width: 104px; }
.list2.stmt input.num[data-k="qty"] { text-align: center; }
.list2.stmt input[data-k="name"]    { text-align: left; }

/* ★★ 2026-09-01 (qq257 · 사장님) — **▲▼는 숫자 «왼쪽»**.
     *"줄순서 변경하는 화살표는 숫자 왼쪽에 붙여줘서 **줄 폭을 최소로** 맞춰줘"*
   ⚠ 여태는 46px 칸에 「숫자 ▲ ▼」가 줄바꿈되어 **한 줄이 세 줄 높이**였다.
   ★ `.mv` 에 **폭을 고정**한다 — 맨 위·맨 아래 줄은 화살표가 하나뿐이라,
     폭이 없으면 그 줄만 숫자가 왼쪽으로 밀려 번호가 들쭉날쭉해진다 */
.list2 .c-no2 { width: 66px; text-align: left; color: var(--dim); white-space: nowrap; }
/* ✕ 뒤집힘 (2026-09-01 · 점검표 D-4) — 화살표는 숫자 «오른쪽»이다 (margin-left) */
.list2 .c-no2 .mv { display: inline-flex; gap: 1px; width: 34px; margin-left: 3px; vertical-align: middle; }
/* ★★ 2026-08-21 (qq200 · 사장님) — **「비고(적요)」 칸을 «절반»으로** (240 → 120).
     *"적요 좌우 간격을 절반으로 줄이고 삭제 할수 있도록 버튼을 만들어줘."*
   ⚠⚠ 비고가 «품명과 같은 클래스»(c-nm · 240px)를 쓰고 있었다. 그래서 표가 1,236px 이 되어
     **오른쪽 「삭제」 단추가 화면 밖으로 밀려 있었다** — 단추는 있는데 «없는 것»이었다
     (CLAUDE.md §6 : 화면에 없으면 없는 것이다).
   ⇒ ★ 이것은 qq188 에서 배운 그 자리다 : **「안 보인다」의 답은 «넓히기»가 아니라 «빼기»**.
     칸 하나를 줄이니 단추가 그대로 화면 안으로 들어왔다. */
.list2 .c-mm { width: 120px; }
/* ★★ 2026-08-21 (qq207 · 사장님) — **줄바꿈 안 되게, 넘치면 «…»**
     *"줄바꿈 안되게 거래처 이름이 길경우 칸 넘어가기전 … 으로 표시"*
   ⚠ `table-layout: auto` 에서는 nowrap 글자가 **칸을 밀어 넓힌다** — 그래서 «…»이 안 생긴다.
     칸 너비를 우리가 정한 대로 «굳혀야»(fixed) 넘치는 글자가 잘린다.
   ★ 잘린 이름은 **손이 올라가면 전부 보이게** `title` 을 붙인다 (화면에서 붙인다) */
.list2.fixed { table-layout: fixed; }
.list2 .ell { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 상태 칸 — 「거래처가 봤습니다」까지 들어간다 (c-st 84px 로는 좁다) */
.list2 .c-stt { width: 150px; }
/* ★ 「공사명」 전용 — 종전에는 거래처 목록의 «지역» 칸(c-area 80px)을 빌려 써서
     공사명이 76px 밖에 안 됐다 (E29 : 빌려 쓰면 한쪽 사정으로 넓힐 때 다른 쪽이 같이 움직인다) */
.list2 .c-job { width: 190px; }
/* 고르기 칸 · 단추 줄 */
.list2 .c-ck { width: 34px; text-align: center; }
.stmbar input[name^="why"] { min-width: 220px; }
/* ★ 단추가 «둘 이상» 서는 칸 — 2026-08-21 (qq201).
   ⚠ `c-st`(84px)를 빌려 쓰면 「고치기·보기·삭제」가 줄바꿈된다. E29 와 같은 자리 :
     **뜻이 다른 칸에 같은 이름을 쓰면 한쪽 사정으로 넓힐 때 다른 쪽이 같이 움직인다.** */
.list2 .c-act { width: 168px; }
.list2 .c-unit { width: 60px; }
.list2.stmt tfoot th { text-align: right; font-weight: 400; }
.list2.stmt tfoot td { font-family: var(--mono); font-weight: 700; }
.list2.stmt tfoot tr.fin th, .list2.stmt tfoot tr.fin td { font-size: 1.1em; font-weight: 700; }

/* ── 할 일 ───────────────────────────────────────────────────── */
.todo-add { display: flex; gap: 8px; margin-bottom: 14px; max-width: 620px; }
.todo-add input { flex: 1; font: inherit; padding: 9px 11px;
                  border: 1px solid var(--bd2); border-radius: var(--r);
                  background: var(--bg); color: var(--fg); }
.todo { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.todo li { border-bottom: 1px solid var(--bd); }
.todo li form { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.todo .body { flex: 1; }
/* 끝낸 것은 «지우지 않고» 흐리게 — 무엇을 했는지가 남아야 한다 */
.todo li.done .body { color: var(--dim); text-decoration: line-through; }

/* ★★ 2026-09-01 (qq257 · 사장님) — 「입금수단」 **아래로 펼치기**.
     ★ `<details>` 는 브라우저가 «이미 아는» 것이다 — 여닫는 코드를 우리가 안 짠다.
     ⚠ 잠겼을 때는 **흐리게**. 감추지 않는다 — 없어지면 왜 없는지 물으실 곳이 없다 (E27) */
.f-det { margin: 0 0 10px; }
.f-det > summary { cursor: pointer; padding: 6px 0; font-weight: 700; }
.f-det.locked > summary { color: var(--dim); cursor: not-allowed; }
.f-det.locked .pick { color: var(--dim); }

/* ══ 명세서 표 — 줄 옮기기 · 고른 자리 · 원가 칸   (2026-08-28 · qq243 · 사장님) ══
     사장님 : *"해당 줄번호에 화살표 위아래 **작게** 만들어서 줄 변경을 할 수 있게"*
   ★ 발주서의 손보기(▲▼✕)와 **같은 모양**이다 — 두 화면이 같은 손짓을 쓴다 (문서 17 ⓒ).
     단추가 아니라 «글자»처럼 보이게 한다. 표 안에서 단추가 크면 그것부터 눈에 들어온다 */
.list2 .c-no2 .mini {
  font: inherit; font-size: 11px; line-height: 1;
  margin-left: 0; padding: 0 2px;
  border: 1px solid var(--bd2); border-radius: 3px;
  background: var(--bg2); color: var(--dim); cursor: pointer;
}
.list2 .c-no2 .mini:hover { color: var(--fg); border-color: var(--fg); }
/* ★ 「고른 자리」 — 새 줄이 «여기 위»로 들어간다는 표시.
   ★★ **색으로 칠하지 «않는다».** 이 표에는 이미 색 줄이 셋 있다
     (배송=노랑 · 빠진 줄=빨강 · 더해진 줄=파랑). 넷째 색을 더하면 서로 잡아먹는다.
   ⇒ **테두리**로 말한다 — 색맹이신 분에게도 같게 보인다 (프로젝트의 결 그대로) */
.list2 tr.curow > td { box-shadow: inset 0 -2px 0 var(--pri); }
.list2 tr.curow > td:first-child { box-shadow: inset 3px 0 0 var(--pri), inset 0 -2px 0 var(--pri); }

/* ✕✕ 2026-08-28 (qq243) — **이 셋은 «한 번도 안 먹고» 있었다.**
     `.dtab` 은 발주서 표이고 명세서 표는 `.list2.stmt` 다 — 선택자가 안 맞았다.
     그래서 qq222 의 「배송 줄 형광펜」도, qq234 의 「빠진 줄 빨강 · 더해진 줄 파랑」도
     **명세서 화면에서는 아무 색도 안 났다.** 오류가 안 나니 아무도 몰랐다.
   ⇒ 두 표가 «같은 뜻»을 같은 색으로 말하게 한다 (문서 17 ⓒ 와 같은 생각) */
.dtab tr.shiprow > td, .stmt tr.shiprow > td { background: #fff3bf; }
.dtab tr.gonerow > td, .stmt tr.gonerow > td { background: #ffe3e3; }
.dtab tr.newrow  > td, .stmt tr.newrow  > td { background: #e3f0ff; }
/* ★ 결제수단이 «바뀌는 자리»에 금을 긋는다   (2026-08-28 · qq244 · 사장님)
     *"결제방법에 따른 끼리 묶어두면 보기 더 편할 것 같아."*
   ⚠ 줄을 **옮기지 않는다** — 차례는 사장님이 ▲▼로 정하신다 (qq243).
     금만 그어도 «어디까지가 계좌 몫인지»가 한눈에 보인다. 모으실 때는 단추를 누르신다 */
.list2 tr.grpline > td { border-top: 2px solid var(--bd2); }
/* ★ 원가 칸 — 「원가보기」를 누르셔야 보인다. **칸은 늘 있다**(안 그러면 colspan 이 흔들린다) */
.list2 .c-cost { display: none; }
.list2.coston .c-cost { display: table-cell; width: 92px; }
.list2 .c-cost input[readonly] { color: var(--dim); background: var(--bg2); }

/* ★ 「어떻게 처리하시나」 — 배송 주문에 우리가 고르는 셋   (2026-08-28 · qq242)
     ⚠ 줄마다 테두리를 두지 않는다(.todo 와 다르다) — 셋뿐이라 선이 오히려 시끄럽다.
     ★ 글자 전체가 눌리게 label 로 감싼다 — 작은 네모만 노리지 않으셔도 된다 */
.planbox { margin: 6px 0 10px; }
.plainlist { list-style: none; padding: 0; margin: 0 0 6px; }
.plainlist li { padding: 3px 0; }
.plainlist label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

@media (max-width: 860px) {
  .roles { grid-template-columns: repeat(2, 1fr); }
  .f, .f[data-only].on { grid-template-columns: 1fr; gap: 4px; }
  .f > label { padding-top: 6px; }
  .idseg b { font-size: 23px; }
  .rows { display: block; overflow-x: auto; }
}
@media (max-width: 520px) { .roles { grid-template-columns: 1fr; } }

/* ✕ 「탭을 «누구와»로 묶는다」(qq167·qq168)의 모양표는 **지웠다** (2026-08-21 · qq190) —
   그 탭줄 자체를 걷어냈다. 쓰는 곳이 없는 모양표는 «다음 사람이 살아 있다고 믿는다».
   ▷ 그 색 규칙(매출처=연한 파랑 · 매입처=연한 빨강)이 다시 필요해지면 git 에서 꺼낸다 */

/* ── 출고 방법 (직송 / 화물) ─────────── (2026-08-19 · qq168)
   ★ 안 쓰는 칸은 «감춘다» — 남겨 두면 무엇을 적는 칸인지 매번 다시 읽으셔야 한다.
     감추는 판정은 JS 가 `body` 가 아니라 «그 표»에 붙인다 (여러 폼이 있을 수 있다) */
.shipway label { display: inline-flex; align-items: center; gap: 5px; margin-right: 20px; }
.shipway input[type="radio"] { width: auto; }
/* ⚠ 클래스 이름에 한글을 쓰지 않는다 — 서버에 올라가는 «주소»는 아니지만,
     CSS 이름은 여러 도구를 지나며 인코딩이 바뀔 자리가 많다 (절대규칙 3 갈래)
   ★ 셋 : way-f 화물 · way-p 택배 · way-d 직송   (2026-08-19 · qq169)
     화물이면 «주소·하차장비»가 없고, 택배·직송이면 «화물지점»이 없다 */
.tbl.way-f .w-addr { display: none; }
.tbl.way-p .w-frt,
.tbl.way-d .w-frt { display: none; }

/* ★ 사이드바에서 «아직 없는» 자리 — 눌리지 않게, 그러나 감추지 않는다 (2026-08-20 · qq184).
     감추면 「그 기능이 원래 있었나」를 물어보실 수조차 없다 (E27) */
.adm-nav .navwait, .mnav .navwait {
  display: block; padding: 9px 14px; color: var(--dim); font-size: 14px; cursor: default;
}

/* ★★ 배송 줄 · 주문에서 빠진 줄 — 형광펜        (2026-08-25 · qq222 · 사장님)
     배송 = 「어디로 · 누구에게 보내나」. 금액이 없는 줄이라 눈에 안 띄면 그냥 지나친다
     빠진 줄 = 매출처가 주문에서 «지우신» 품목. 찾기 어렵다고 하셔서 칠한다 */
.dtab tr.shiprow > td { background: #fff3bf; }
.dtab tr.shiprow input[data-k="name"] { font-weight: 700; background: transparent; }
.dtab tr.gonerow > td { background: #ffe3e3; }
.hlmark { background: #ffe08a; padding: 0 3px; border-radius: 2px; }

/* ★ 2026-08-26 (qq234 · 사장님) — *"줄바꿈 안되게 한줄로 나오게 해줘"*
     「100원 미만 버림」이 좁은 칸에서 두 줄로 접혀 표가 들쭉날쭉해 보였다.
   ⚠ 인라인 style 로 두지 않는다 — 플러그인이 못 이긴다 (CLAUDE.md §4) */
.nowrap { white-space: nowrap; }

/* ══ 문서 하단 «여섯 칸» ═══════════════════ (2026-08-26 · qq234 · 사장님)
     *"6줄을 차지하고 있음 … 명세서 하단의 6칸 과같이 나눠서 보여주고"*
   ★ 인쇄물(`print.css` 의 `.tot`)과 **같은 모양**이다 — 종이와 화면이 다르면
     대조하실 때마다 눈으로 맞춰 보셔야 한다.
   ⚠ 규칙이 두 파일에 있는 까닭 : 인쇄는 mm, 화면은 px 다. 「같은 모양」이지
     「같은 치수」가 아니다 — 한쪽을 고치면 **다른 쪽도 본다**. */
.tot { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tot th, .tot td { border: 1px solid var(--bd); padding: 8px 10px; }
.tot th { width: 96px; text-align: center; background: var(--bg); font-weight: 400;
          font-size: 14px; color: var(--dim); white-space: nowrap; }
.tot td { text-align: right; font-family: var(--mono); font-weight: 700; }
.tot td.pfin { font-size: 18px; }

/* ★ 2026-08-26 (qq234 · 사장님) — 「견적내용 가져오기」로 «더해진» 줄.
     빠진 줄(gonerow)은 빨갛다 — 더해진 줄은 파랗다. 두 일이 한 화면에 같이 뜬다 */
.dtab tr.newrow > td { background: #e3f0ff; }

/* ══ 공사 관리 — 「＋ 공사 등록하기」 접었다 펴기 ══ (2026-08-31 · qq251 · 사장님)
     *"[공사 등록하기] - 버튼 누르면 밑으려 펼져서 활성화"*
   ★ `<details>` 는 브라우저가 «이미 아는» 것이다 — 붙이는 것도 JS 도 0줄이다.
   ⚠ 인라인 style 을 쓰지 않는다 — 플러그인이 못 이긴다 (CLAUDE.md §4) */
.pjbox { border: 1px solid var(--bd); border-radius: var(--r); margin: 14px 0 18px;
         background: var(--bg2); }
.pjbox > summary { cursor: pointer; padding: 11px 14px; font-size: 16px; list-style: none; }
.pjbox > summary::-webkit-details-marker { display: none; }
.pjbox > summary::before { content: '▸ '; color: var(--dim); }
.pjbox[open] > summary::before { content: '▾ '; }
.pjbox[open] > summary { border-bottom: 1px solid var(--bd); }
.pjform { padding: 14px 14px 2px; }
.pjbox > .hint { padding: 0 14px 12px; }
/* ★ 달력은 «칸 안»에 든다 — 표 밖으로 나가면 그 아래 목록이 밀린다 */
.pjform #calWrap { display: block; }

/* ★ 고르는 칸 — 「수정」·「삭제」가 어느 줄을 말하는지는 이 칸이 정한다 */
.list2 .c-chk { width: 34px; text-align: center; }
.list2 .c-chk input { margin: 0; }
/* ★ 펼친 줄의 「거래중지 · 공사종료 · 연결 지우기」가 세로로 쌓이면
     세 단추가 «세 줄»이 되어 표가 길어진다 — 사장님 화면은 스크롤이 안 된다 (㊱-15) */
.dwrap .tbl td.c-st { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   「일정」 — 스케줄 보드 · 매출/매입 목록      (2026-09-01 · qq262 · 사장님 Q.TXT)

   사장님 : *"매출일정과 매입 일정을 **한눈에** 알아 볼 수 있게"* ·
            *"날짜 안에 **구분선**을 두고 **매출(빨간색 글씨)은 위쪽 매입(파란색 글씨)은 아래쪽**"* ·
            *"일자별 … 리스트에 맞춰서 **달력 위아래 크기를 맞춰서 변하게**"* ·
            *"(앞뒤 달은) **투명하게 하지만 목록은 나오게**"*

   ★ 색은 이미 이 파일에 있는 둘을 그대로 쓴다 — `--out`(빨강) · `--pri`(파랑).
     새 색을 만들지 않는다. 이 화면의 「매출=빨강 / 매입=파랑」은 위쪽
     「나감=빨강 / 들어옴=파랑」과 **같은 뜻**이다 (돈이 나가는 쪽 · 들어오는 쪽).
   ★ 칸 높이를 «박지 않는다» — 줄이 늘면 그 주가 같이 커진다 (사장님 요구 그대로).
   ⚠ 인라인 style 을 쓰지 않는다 (CLAUDE.md §4 — 플러그인이 못 이긴다).
   ══════════════════════════════════════════════════════════════ */
.ymnow { font-size: 17px; margin: 0 6px; }

/* ══ 일자별 리스트 ══════════════════════════════ (2026-09-18 · qq364 · 사장님)
   사장님 : *"달력을 **일자별 리스트 형식**으로 변경 해줘.
     **당일날짜는 펼쳐지고** 해당날짜 **납품 건수 만** 표시되도록 해줘."*

   ✕ 달력(7칸 표)을 걷었다 — 칸이 좁아 거래처 이름이 잘렸고, 빈 날이 자리를 다 먹었다.
   ★ 접힌 줄은 **한 줄**이다 : 날짜 · 요일 · 건수. 그것뿐이다.
   ★ 펴는 것은 `<details>` — 브라우저가 이미 아는 것이라 라이브러리가 없다.
   ⚠ 줄 높이를 «박지 않는다» — 펴면 그만큼 늘어난다 */
.daylist { list-style: none; margin: 6px 0 14px; padding: 0;
           border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.daylist > li + li { border-top: 1px solid var(--bd); }
.daylist > li.today { background: var(--row); }

.daylist summary {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 12px; cursor: pointer; list-style: none;
}
.daylist summary::-webkit-details-marker { display: none; }
/* ★★ 펼치기 화살표 — **«단추»로 보이게** (2026-09-18 · qq366 · 사장님)
     사장님 : *"날짜에 **펼치기 화살표버튼** 닫기 열기 버튼도 추가 해줘."*
   ✕ 전에는 `::before` 로 «글자»만 찍었다 — 그것은 «눌러도 되는 것»으로 안 읽힌다.
   ★ 테두리를 둘러 «누르는 것»임을 말한다 (꾸밈이 아니라 «길잡이»다 · qq166 과 같은 생각).
   ⚠ 진짜 `<button>` 은 안 쓴다 — `<summary>` 안의 단추는 브라우저마다 여는 동작을
     가로챈다. **모양만 단추**로 두고 펴고 접는 일은 `<summary>` 가 그대로 한다 */
/* ⚠ 처음에 11px 로 두었더니 화면에서 **«점»처럼** 보였다 — 화살표가 안 읽힌다.
     ⇒ 눈으로 보고 키웠다. 「단추」라고 하셨으면 «단추»로 보여야 한다 */
.daylist .dtog {
  flex: none; width: 24px; height: 24px; line-height: 22px; text-align: center;
  border: 1px solid var(--bd2); border-radius: 4px;
  background: var(--bg); color: var(--fg); font-size: 14px;
}
.daylist .dtog::before { content: '▸'; }
.daylist details[open] > summary .dtog { border-color: var(--fg); color: var(--fg); }
.daylist details[open] > summary .dtog::before { content: '▾'; }
.daylist summary:hover .dtog { border-color: var(--fg); color: var(--fg); }

/* ★ 「모두 펼치기 · 모두 접기」 — 한 달이 서른 줄이라 한꺼번에 여는 길이 있어야 한다 */
.dayall { display: flex; gap: 6px; margin: 6px 0 4px; }
.daylist summary:hover { background: var(--bg2); }
.daylist .d { font-size: 14px; min-width: 76px; }
.daylist .w { color: var(--dim); font-size: 13px; }
.daylist > li.sun .d, .daylist > li.sun .w { color: var(--red); }
.daylist > li.sat .d, .daylist > li.sat .w { color: var(--pri); }
/* ★ 빈 날 — 흐리게 (2026-09-18 · qq365 · 사장님 : *"1일부터 말일까지 전부"*)
     한 달 서른 줄을 세로로 훑으실 때 **눈이 «있는 날»에 먼저 닿아야** 한다.
     ⚠ «감추지» 않는다 — 빈 날도 그 달의 하루고, 비어 있는 것을 보셔야 「여긴 없구나」를 아신다 */
.daylist > li.none .d, .daylist > li.none .w { font-weight: 400; color: var(--dim); }
.daylist > li.none .dtog { opacity: .45; }
.daylist > li.none.today .d { font-weight: 700; color: var(--fg); }

/* ★ 「오늘」 딱지 — 펼쳐져 있는 까닭이 한눈에 보여야 한다 */
.daylist .td {
  font-size: 11px; font-weight: 700; color: var(--bg); background: var(--fg);
  border-radius: 9px; padding: 1px 7px;
}
/* ★ 건수는 **오른쪽 끝**에 — 여러 줄을 세로로 훑을 때 자리가 같아야 읽힌다 */
.daylist .n { margin-left: auto; font-size: 13px; white-space: nowrap; }
.daylist .n .s { color: var(--out); }      /* 매출 — 빨강 */
.daylist .n .b { color: var(--pri); }      /* 매입 — 파랑 */
.daylist .dbody { padding: 2px 12px 11px 30px; }
.daylist .dbody .hint { margin: 0; }
/* ★ 지금 지도가 보고 있는 날 */
.daylist [data-day].mapon { outline: 2px solid var(--fg); outline-offset: -2px; }

.daylist .pl { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.6; }
.daylist .pl li { margin: 0 0 2px; }
.daylist .pl a { text-decoration: none; font-weight: 700; }
.daylist .pl.s a { color: var(--out); }    /* 매출 — 빨강 (위쪽) */
.daylist .pl.b a { color: var(--pri); }    /* 매입 — 파랑 (아래쪽) */
.daylist .pl a:hover { text-decoration: underline; }
.daylist .pl .wy { color: var(--dim); font-size: 12px; }
.daylist .pls { border: 0; border-top: 1px dashed var(--bd2); margin: 5px 0; }

/* ── 매출/매입 목록 ────────────────────────────────────────────
   ★ 사장님 : *"리스트는 **간결하게 최소 정보만**"* — 칸을 더 늘리지 않는다.
   ⚠ 줄마다 폼이 하나다. `<form>` 을 `<tr>` 안에 그대로 두면 브라우저가 표 밖으로
     내던진다 — `display: contents` 로 «칸을 안 만드는 폼»으로 둔다 */
.list2.plan .rowform { display: contents; }
.list2.plan td { padding: 4px 5px; }
.list2.plan input, .list2.plan select {
  font: inherit; font-size: 13px; width: 100%; padding: 4px 5px;
  border: 1px solid transparent; background: transparent; color: var(--fg);
}
.list2.plan input:hover, .list2.plan select:hover { border-color: var(--bd); }
.list2.plan input:focus, .list2.plan select:focus {
  border-color: var(--pri); background: var(--bg); outline: none;
}
.list2.plan .c-nm a { font-weight: 700; }

/* ★★ 2026-09-03 (qq286 · 사장님) — *"**간격 폭 최소로** 잡고./ 특히 **수령방법 줄바꿈에
     괄호 내용은 한줄에 들어가게** 해줘"*
   ⚠⚠ 「명신수도 출고-회사차」처럼 낱말이 길어지자 칸이 두 줄로 접혔다 —
     그러면 줄 높이가 들쭉날쭉해져 **표를 «훑을» 수가 없다.**
   ⇒ 수령방법·지역·상태는 **안 접는다.** 대신 넘치면 «…»로 줄이고 손을 올리면 다 뜬다
     (`title` 이 이미 붙어 있다). 접는 것보다 줄이는 것이 낫다 — 줄 높이가 안 흔들린다 */
.list2.plan td { padding: 3px 4px; }
.list2.plan .c-day { width: 92px; white-space: nowrap; }
.list2.plan .c-area { width: 88px; white-space: nowrap; }
.list2.plan .c-lev,
.list2.plan .c-stt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list2.plan .c-lev { width: auto; max-width: 210px; }
.list2.plan .c-stt { width: 72px; }
.list2.plan .c-mm  { width: auto; }

/* ══ 대시보드 ②「오늘·내일 일정」 표 ══════════ 2026-09-22 · qq421 · 사장님
     *"주소가 너무 길어 표 만들기가 어려우니까 … 정리해서 테이블로 만들어줘"*
   ★ 긴 주소를 「지역」 칸(시·군)으로 줄인 «뒤»라 칸을 못 박을 수 있다.
     값은 그 칸의 가장 긴 글자에서 나왔다 :
       날짜 `9/22 오늘` · 지역 `광주 북구` · 상태 `준비완료` · 문서번호 `D-26-09-0004`
   ★ 넘치면 접지 않고 «…»로 줄인다 — 줄 높이가 흔들리면 표를 훑을 수가 없다
     (`.list2.plan` 이 이미 같은 결이다). 전체 글자는 손을 올리면 뜬다 (`title`) */
.tbl.plan2 { width: 100%; table-layout: fixed; }
/* ★★ 2026-09-22 (qq426 · 사장님) — **가운데 정렬.**
     *"내가 말한건 [관리자 대시보드 2번] 이였어"* — 「가운데 정렬」이 가리킨 곳이 여기였다.
   ⚠ 머리글은 이미 가운데였는데 **값만 왼쪽**이라, 「수령방법」처럼 넓은 칸에서는
     머리글과 값이 **서로 다른 자리**에 있어 어느 칸의 값인지 눈이 한 번 더 찾아야 했다.
   ⇒ 머리와 값을 **같은 자리**에 세운다. `>` 로 «바로 아래 줄»만 고른다 (안쪽 표 보호) */
.tbl.plan2 > * > tr > td, .tbl.plan2 > * > tr > th {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.tbl.plan2 .c-day  { width: 84px; }
.tbl.plan2 .c-kind { width: 52px; }
.tbl.plan2 .c-nm   { width: 150px; }
.tbl.plan2 .c-site { width: 128px; }
.tbl.plan2 .c-area { width: 96px; }
/* ★ 남는 자리는 **수령방법**이 가진다 — 「명신수도 출고-화물차 섭외」처럼
     긴 이름이 있고, 「현장」은 비어 있는 날이 많다 (빈 칸이 넓으면 표가 물샠하다) */
.tbl.plan2 .c-lev  { width: auto; }
.tbl.plan2 .c-stt  { width: 84px; }
.tbl.plan2 .c-no   { width: 124px; }

/* ══ 주문·견적의뢰 목록 (`orders.php`) ══════════ 2026-09-22 · qq424 · 사장님
     *"[이 화면] 내용을 [대시보드 ②] 와 같이 표를 만들어줘. **가운데 정렬** 해주고"*

   ⚠⚠ 여태 칸 여덟 중 **둘이 같은 이름표(`c-nm`·240px)**여서 폭을 따로 줄 수가 없었다.
     이제 칸마다 제 이름이 있다 (`c-ptn` 거래처 · `c-place` 납품 장소 · `c-when` 받은 날).
   ★ 대시보드 `.tbl.plan2` 와 **같은 생각** : 길이를 «아는» 칸은 못 박고,
     길이를 «모르는» 칸(납품 장소)이 남는 자리를 갖는다. 넘치면 접지 않고 «…» (손 올리면 다 뜬다).
   ★ **가운데 정렬** — 사장님 지시. `admin.css` 의 `.list2 th,td { text-align:left }` 를 덮는다.
     ⚠ 문서번호만은 **왼쪽**이다 — 「▸」 펼침 표가 글자 앞에 붙어 있어서,
       가운데로 두면 줄마다 «▸의 자리»가 달라져 눈이 따라가지 못한다 */
/* ⚠⚠ **`>` 를 반드시 쓴다.** 이 표의 «펼친 줄» 안에는 **표가 또 있다**
     (품목 표 · 단추 줄). 자손 선택자(`.list2.ordlist td`)로 적으면 그 «안쪽» 칸까지
     가운데로 밀고 폭을 못 박아 펼친 화면이 어그러진다. ⇒ **바로 아래 줄만** 고른다 */
.list2.ordlist > thead > tr > th,
.list2.ordlist > tbody > tr > td {
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list2.ordlist > thead > tr > th.c-no,
.list2.ordlist > tbody > tr > td.c-no { text-align: left; }
.list2.ordlist > * > tr > .c-no    { width: 136px; }
.list2.ordlist > * > tr > .c-ptn   { width: 212px; }   /* 「(주)○○○ S260901-01」 이 한 줄에 */
.list2.ordlist > * > tr > .c-who   { width: 132px; }
.list2.ordlist > * > tr > .c-place { width: auto; }     /* 납품 장소 — 남는 자리를 다 쓴다 */
.list2.ordlist > * > tr > .c-day   { width: 116px; }
.list2.ordlist > * > tr > .c-lev   { width: 76px; }
.list2.ordlist > * > tr > .c-st    { width: 116px; }
.list2.ordlist > * > tr > .c-when  { width: 148px; }   /* 「2026-09-22 16:39」 — 128 로 줬다가 1px 모자라 «…» 가 났다 */
/* ★ 펼친 줄(품목 표)은 «가운데»가 아니다 — 거기는 제 규칙이 있다 */
.list2.ordlist > tbody > tr.expand > td {
  text-align: left; white-space: normal; overflow: visible; width: auto;
}

/* ── 「정차 순번」 한 칸 ── (qq288 · 사장님)
   ★ 담당 칸 «안»에 둔다 — 열을 하나 더 만들면 표가 넓어진다 (「간격 폭 최소」 · qq286).
   ★ 숫자 하나만 들어가므로 좁게. 넓으면 표가 그만큼 밀린다 */
.list2.plan .seqlb { display: inline-flex; align-items: center; gap: 4px;
                     font-size: 12px; color: var(--dim); white-space: nowrap; }
.list2.plan .seqx { width: 48px; text-align: center; }

/* ── 지도 핀 — 직원마다 다른 색 ── (qq286 · 사장님)
   ★ 그림 파일을 안 쓴다. 동그라미 하나에 이름 첫 글자를 넣는다 —
     색을 못 가르시는 분도 «글자»로 읽으신다 (색만으로 뜻을 나르지 않는다) */
.mspin { display: inline-flex; align-items: center; justify-content: center;
         width: 22px; height: 22px; border-radius: 50%;
         color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
         border: 2px solid #fff; cursor: pointer; }
.mspin.sm { width: 16px; height: 16px; font-size: 10px; border-width: 1px;
            vertical-align: -3px; cursor: default; }

/* ✕ 「알아 두실 것」 박스 (2026-09-17 · qq363) — **여기서 지웠다** (2026-09-18 · qq374).
   `.hintbox` 는 `statement.php` 한 곳만 쓰고 있었는데, 그 뒤 다른 화면들이
   `site.css` 의 **`.dzbox`** 로 같은 상자를 만들었다.
   ⇒ 같은 것이 두 벌이 되면 **한쪽만 고쳐지는 날**이 온다 (절대규칙 6 의 결).
     `statement.php` 를 `.dzbox` 로 옮기고 이 규칙을 걷었다. 정본 = `site.css` 의 `.dzbox` */

/* ── 권역 이름표 ── (2026-09-17 · qq358 · 사장님)
   사장님 : *"관리자 페이지도 **권역별 구분해서** 보여졌으면 좋겠어."*
   ★ 「광양시 3건」 — 핀을 세지 않으셔도 그 권역에 몇 건인지 읽힌다.
   ★ 테두리 색이 **그 권역의 색**이다 (JS 가 넣는다 — 데이터가 곧 값인 예외).
   ⚠ 흰 바탕에 검은 글씨다. 색칠 위에 얹히므로 **바탕을 깔아야** 글이 읽힌다.
   ⚠ 누를 것이 아니다 — 핀을 누르시면 그 건이 뜬다. 그래서 손 모양을 안 준다 */
.rgtag { background: #fff; border: 2px solid #888; border-radius: 6px;
         padding: 2px 7px; font-size: 12px; line-height: 1.35;
         white-space: nowrap; color: var(--fg); }
.rgtag b { font-size: 13px; }

/* ── 우리 회사 «집» 표시 ── (2026-09-16 · qq344 · 사장님)
   사장님 : *"지도 중심은 «… 광양읍 익신산단1길 14»가 되게 해주고."*
   ★ 배송 핀()과 **일부러 다르게** 생겼다 — 네모·검정·«집» 글자.
     같은 동그라미로 두면 「오늘 회사에도 배송 가나」로 읽힌다.
   ⚠ 누를 것이 아니므로 손 모양(cursor)을 안 준다 — 눌러도 아무 일이 없다 */
.mshome { display: inline-flex; align-items: center; justify-content: center;
          width: 26px; height: 26px; border-radius: 4px;
          background: var(--fg); color: #fff; font-size: 11px; font-weight: 700;
          line-height: 1; border: 2px solid #fff; }

/* ── 배차 팝업 둘 ── (qq286)
   ⚠ 테두리는 «꾸밈»이 아니라 **기능**이다 — 뒤 화면과 구분이 안 되면 창이 아니다 */
.dlg { width: min(94vw, 520px); padding: 14px 16px;
       border: 1px solid var(--fg); border-radius: var(--r);
       background: var(--bg); color: var(--fg); }
.dlg::backdrop { background: rgba(0, 0, 0, .35); }
.dlg h3 { margin: 0 0 6px; }
.dlg input, .dlg select { font: inherit; }

/* ── 명세서 «미리보기» 창 ──────────────────────────────────────
   ★ 사장님 : *"거래처 이름을 클릭하면 **명세서 미리보기 창**이 뜨도록"*
   ★ `<dialog>` 는 브라우저가 이미 아는 것이다 — 라이브러리 0개.
   ⚠ 테두리는 «꾸밈»이 아니라 **기능**이다 — 뒤 화면과 구분이 안 되면 창이 아니다
     (CLAUDE.md §4 의 «모달 테두리만 예외» 그 자리) */
.pvdlg { width: min(96vw, 1000px); height: 86vh; padding: 0;
         border: 1px solid var(--fg); border-radius: var(--r); }
.pvdlg::backdrop { background: rgba(0, 0, 0, .35); }
.pvdlg .pvhead { display: flex; align-items: center; gap: 8px; margin: 0;
                 padding: 8px 12px; border-bottom: 1px solid var(--bd); background: var(--bg2); }
.pvdlg .pvhead b { margin-right: auto; }
.pvdlg iframe { width: 100%; height: calc(86vh - 45px); border: 0; display: block; }

/* ══ 명세서 목록 — 단추 크기를 «같게» ══ (2026-09-01 밤 · Q.TXT · 사장님)
     *"버튼 크기 동일하게, 선택된 상태 버튼에 파란색 유지"*
   ★ 크기를 맞추는 데 필요한 것은 **최소 폭 하나**다 — 글자가 짧아도 칸이 안 줄어든다.
   ⚠ 폭을 «붙박이»(width)로 주지 않는다 — 「명세서 삭제내역 (12)」처럼 글자가 길어지면
     그때 글자가 잘린다. `min-width` 는 늘어날 수 있다.
   ★ 파란색(`.pri`)은 이미 있는 것을 그대로 쓴다 — 「지금 여기」의 표시가 화면마다
     다르면 그것이 곧 다른 화면이 된다 */
.tabbar .btn { min-width: 176px; text-align: center; }
.pl-filters .btn.eqw { min-width: 96px; text-align: center; }
/* ★ 사장님 : *"검색창(크기는 현재 크기의 절반)"* — 넓던 칸을 절반으로 */
.pl-filters .w-half { width: 240px; max-width: 100%; }
.pl-filters .ftlb { color: var(--dim); font-size: 14px; }
/* ★ 「배송지·공사명」이 길면 … 로 줄인다 — 표가 화면을 넘으면 오른쪽 칸이 사라진다 */
.list2.fixed .c-job { width: 150px; }

/* ══ ⑥ 수령방법 — 관리자가 «확정»한다 ══ (2026-09-01 밤 · qq264 · 사장님)
   ★ 왼쪽에 «고르는 것», 오른쪽에 «딸린 값» — 다른 칸(.f)과 같은 모양이라
     사장님 눈이 새로 익힐 것이 없다.
   ⚠ 꺼진 칸은 **흐리게** 둔다. 감추지 않는다 — 감추면 줄이 튀어 오르내려
     「방금 거기 뭐가 있었는데」가 된다 (E27 과 같은 결) */
/* ✕ 다시 짰다 (2026-09-03 · qq286 · 사장님) — *"체크박스를 **가로로 배치**하고 …
     **체크된 내용에 필요한 정보를 입력** 하게 하자."*
   ★ 위는 «고르는 자리»(가로 여섯), 아래는 «고른 것의 자리». 안 고른 갈래는 아예 안 보인다.
   ▷ 옛 규칙(*"꺼진 칸은 흐리게 둔다. 감추지 않는다"*)은 **줄이 여섯 다 서 있을 때** 옳았다.
     이제는 고른 것만 서므로 «흐린 줄»이 아니라 «없는 줄»이 맞다 — 줄이 튀지 않는다. */
.recvpick { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 10px; }
.recvpick .rclb { font-weight: 700; white-space: nowrap; }
.recvdet { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.recvdet .rdt { min-width: 96px; padding-top: 3px; }
.recvdet .rdbody { flex: 1; min-width: 0; }
.recvdet .rdline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 3px 0; }
.recvdet .rcsub { color: var(--fg); white-space: nowrap; }
.recvdet .rcx:disabled { background: var(--bg2); color: var(--dim); }
/* ★ 일정 화면 — 「아직 안 정한」 수령방법은 흐리게 (확정한 것과 구별)
     ⚠ 2026-09-18 — 달력(`.cal`)이 «일자별 리스트»가 되었다 (qq364). 자리를 옮겼다 */
.daylist .pl .wy.yet { opacity: .6; font-style: italic; }

/* ══ 명세서 목록 — 칸이 «열»이라 폭을 다시 잰다 ══ (2026-09-01 밤 · qq264)
   사장님 칸 목록 : 체크 · 문서번호 · 거래처 · 결제방법 · 공급가액 · 합계금액 · 상태 ·
                    배송지 · 작성자 · 공사명   (열 칸)
   ⚠⚠ 옛 폭 그대로면 합이 **1,300px** 이 넘어 표가 화면 밖으로 나간다 —
     그러면 오른쪽 칸(작성자·공사명)이 «없는 것»이 된다.
     사장님 화면은 가로 스크롤이 잘 안 된다 (qq188 · ㊱-15 에서 두 번 물린 자리).
   ⇒ 이 표에만 폭을 다시 준다. 이름이 길면 `.ell` 이 … 로 줄인다.
   ★ 다른 목록(거래처·제품)은 «안» 건드린다 — 그쪽은 칸이 적어 지금 폭이 맞다 */
.list2.stmtlist { min-width: 914px; }
.list2.stmtlist .c-ck  { width: 30px; }
.list2.stmtlist .c-no  { width: 104px; }
.list2.stmtlist .c-nm  { width: 140px; }
.list2.stmtlist .c-lev { width: 72px; }
.list2.stmtlist .c-won { width: 92px; }
.list2.stmtlist .c-stt { width: 104px; }
.list2.stmtlist .c-dst { width: 112px; }
.list2.stmtlist .c-who { width: 56px; }
.list2.stmtlist .c-job { width: 112px; }

/* ★ ④ 상자 «안»의 가름선 — 「납품 기록」과 「수령방법」은 한 상자에 있지만 다른 일이다
     (2026-09-01 밤 · Q.TXT : *"6번 항목을 4번 항목과 합치는데 … 번호는 4번으로"*) */
.fs .fsline { border: 0; border-top: 1px solid var(--bd); margin: 16px 0 12px; }

/* ══ 「지난 줄 불러오기」 창 ══════════════════════ (2026-09-02 · qq267 · 사장님)
     *"각 버튼을 누르면 생성되었던 문서의 **줄 목록(리스트)의 창**을 열고
       **체크박스로 선택된 줄**을 불러올 수 있도록 해줘."*
   ★ `<dialog>` 는 브라우저가 이미 아는 것이다 — 라이브러리 0개 (`.pvdlg` 와 같은 생각).
   ⚠ 테두리는 «꾸밈»이 아니라 **기능**이다 — 뒤 화면과 구분이 안 되면 창이 아니다 */
.pastdlg { width: min(96vw, 1080px); max-height: 88vh; padding: 0;
           border: 1px solid var(--fg); border-radius: var(--r); }
.pastdlg::backdrop { background: rgba(0, 0, 0, .35); }
/* ★ 머리와 발은 «붙박이»다 — 줄이 400개여도 「담기」 단추를 찾아 스크롤할 일이 없다 */
.pastdlg .pdhead, .pastdlg .pdfoot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 8px 12px; background: var(--bg2); }
.pastdlg .pdhead { border-bottom: 1px solid var(--bd); }
.pastdlg .pdfoot { border-top: 1px solid var(--bd); }
.pastdlg .pdhead b { margin-right: auto; }
.pastdlg .pdfoot .right { margin-left: auto; }
.pastdlg .pdbody { overflow: auto; max-height: calc(88vh - 108px); padding: 0 12px 12px; }
/* ★ 문서가 바뀌는 자리에 «금»을 긋는다 — 어디까지가 한 문서인지가 안 보이면
     같은 품목이 여러 줄일 때 무엇을 고르는지 모른다 */
.pastdlg .list2 tr.docnew td { border-top: 2px solid var(--bd); }
.pastdlg .list2 .c-day { width: 104px; }
.pastdlg .list2 .c-doc { width: 132px; }
.pastdlg .list2 .c-qty, .pastdlg .list2 .c-up { text-align: right; }
.pastdlg .list2 .c-qty { width: 84px; }
.pastdlg .list2 .c-up  { width: 104px; }
.pastdlg .list2 .c-ck  { width: 40px; text-align: center; }
.pastdlg .list2 tr.pick td { background: var(--bg2); }

/* ══ 거래원장 — 「품목 줄이 그대로 흐른다」   (2026-09-03 · qq270) ══
   ★ 문서가 갈리는 자리에 굵은 가로줄. 줄마다 문서번호를 찍지 «않기» 때문에
     이 선이 없으면 어디서 명세서가 바뀌는지 눈으로 못 찾는다 */
.ledg tr.docnew td { border-top: 2px solid var(--bd); }
.ledg tr.payrow td { background: var(--bg2); }
.ledg .c-day { white-space: nowrap; }
.ledg .c-no  { white-space: nowrap; }

/* ══ 배차 대기 · 권역 요약 — 칸 너비를 «제 표»가 갖는다   (2026-09-03 · qq274) ══
   ⚠⚠ 여태 `.c-nm`(240px) 를 셋이 나눠 쓰고 있었다. `.list2` 는 `table-layout: fixed`
     라서 240×3 = 720px 만으로 자리를 다 먹고, **정작 「납품주소」가 눌려** 두 줄로 접혔다.
     사장님 : *"배차대기 표 정렬좀 해줘. **간격 정리가 잘 안되어 있어.**"*
   ⇒ ★ 표마다 «제 이름»을 갖게 하고, **넓어야 할 칸(납품주소)에 남는 자리를 준다.**
     ★ 짧고 안 바뀌는 칸(날짜·마감·단추)은 «줄바꿈 금지»로 못 박는다 —
       그 칸이 접히면 줄 높이가 들쭉날쭉해져 표가 어지러워 보인다 */
.list2.wait .c-day  { width: 96px;  white-space: nowrap; }
.list2.wait .c-no   { width: 124px; white-space: nowrap; }
.list2.wait .c-ptn  { width: 118px; }
/* ★ 현장 이름이 가장 길다 (「여수시 노후상수관명 교체공사」) — 거래처에서 자리를 덜어 준다.
     ⚠ 접히면 줄 높이가 들쭉날쭉해져 «정렬이 안 된 것처럼» 보인다 — 사장님이 그것을 보셨다 */
.list2.wait .c-site { width: 186px; }
.list2.wait .c-rgn  { width: 112px; white-space: nowrap; }
.list2.wait .c-cut  { width: 92px;  white-space: nowrap; }
.list2.wait .c-go   { width: 88px;  white-space: nowrap; text-align: center; }
/* ★ 납품주소만 «자리를 다 먹는다» — 길고, 잘리면 안 되는 유일한 칸이다 */
.list2.wait td:nth-child(6) { word-break: break-all; }

.list2.regsum .c-rgn { width: 150px; white-space: nowrap; }
.list2.regsum .c-cnt { width: 72px;  white-space: nowrap; text-align: center; }
/* ★ 한 권역에 여러 건이 오면 줄마다 «한 칸씩» 띄운다 — 붙어 있으면 몇 건인지 안 읽힌다 */
.list2.regsum td > div { padding: 2px 0; }
.list2.regsum td > div + div { border-top: 1px dotted var(--bd); margin-top: 2px; padding-top: 4px; }

/* ══ 스케줄 보드의 지도 — 달력 «위»      (2026-09-03 · qq274) ══
   ★ 높이를 박는다 — 지도는 «비어 있어도 자리를 지켜야» 한다.
     자리가 없으면 카카오가 0×0 에 그리고 아무것도 안 보인다 (원인 찾기 매우 어렵다) */
.mapbox { margin: 0 0 18px; }
.mapcv { width: 100%; height: 380px; border: 1px solid var(--bd); }
/* ★ 날짜 줄은 «누를 수 있는 것»이다 — 지도가 그날로 바뀐다
     ⚠ 2026-09-18 — 달력이 리스트가 되었다 (qq364). `summary` 가 이미 손 모양이라
       여기서는 «몸통»만 챙긴다 */
.daylist [data-day] { cursor: pointer; }

/* ══ 지도 — 「눌러야 확대·축소가 켜진다」 ══ (2026-09-03 · qq287 · 사장님)
   사장님 : *"지도 클릭하면 줌인 줌아웃 활성화 … 지도 밖에 클릭 하면 지도 멈춘 상태 유지"*
   ★ 「지금 어느 쪽인지」를 **글로** 말한다 — 안 말하면 휠을 굴려 보시고 「왜 안 되지」 하신다.
   ★ 깨어 있을 때만 테두리를 준다 — 꾸밈이 아니라 «지금 켜져 있다»는 **표시**다 */
.mapzoomtag { position: absolute; left: 8px; bottom: 8px; z-index: 5;
              padding: 3px 8px; border-radius: 3px; pointer-events: none;
              background: rgba(255,255,255,.9); border: 1px solid #bbb;
              font-size: 12px; color: #555; }
.mapawake { outline: 2px solid var(--pri, #1a56c4); outline-offset: -2px; }
.mapawake .mapzoomtag { border-color: var(--pri, #1a56c4); color: var(--pri, #1a56c4); }


/* ══ 새 주문·견적의뢰 알림 팝업 ═══════════════════════ (2026-09-16 · qq338)
   ▷ 사장님 : *"… 실시간으로 팝업메세지 뜨게 만들어줘."*
   ★ 오른쪽 «아래»에 둔다 — 화면 맨 위는 오늘(9-15) 사장님이 «못 보신» 자리다 (E93).
     그리고 하던 일을 가리지 않는다. 알림은 «막는 것»이 아니라 «알리는 것»이다.
   ⚠ 꾸밈(그림자)은 안 쓴다 (CLAUDE.md §4). 테두리로 뒤 화면과 가른다 */
.ntf {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--bg); border: 1px solid var(--fg); border-left-width: 4px;
  padding: 12px 14px;
}
.ntf-h { display: flex; align-items: flex-start; gap: 8px; }
.ntf-h b { flex: 1; font-size: 15px; line-height: 1.4; }
.ntf-x {
  flex: none; width: 28px; height: 28px; line-height: 1;
  font-size: 18px; background: none; border: 1px solid var(--bd); cursor: pointer;
}
/* ★ 소리 끄기·켜기 (2026-09-16 · qq353) — 「닫기」와 같은 크기로 나란히 둔다.
     ⚠ 끌 길이 없으면 «끄려고 화면을 닫게» 된다 — 그러면 알림 자체가 사라진다 (E85) */
.ntf-s {
  flex: none; width: 28px; height: 28px; line-height: 1;
  font-size: 15px; background: none; border: 1px solid var(--bd); cursor: pointer;
}
/* ★ 브라우저가 소리를 막았을 때만 보이는 줄 — 조용히 죽지 않는다 (E93) */
.ntf-ask { margin: 6px 0 8px; font-size: 13px; color: var(--dim); }
.ntf-ask .btn { margin-left: 4px; }
.ntf-l { margin: 8px 0 10px; padding-left: 16px; font-size: 13px; }
.ntf-l li { margin: 2px 0; }
.ntf-b { display: flex; gap: 6px; flex-wrap: wrap; }
.ntf-b .btn { flex: 1; min-width: 120px; }

/* ★ 손전화 — 아래에 꽉 채운다 (좁은 화면에서 340px 는 옆이 잘린다) */
@media (max-width: 520px) {
  .ntf { right: 8px; left: 8px; bottom: 8px; width: auto; }
}

/* ⚠ 종이에는 안 나간다 — 알림은 «지금 화면»의 것이다 (9-15 에 인쇄본으로 물렸다 · qq324) */
@media print { .ntf { display: none !important; } }