/* 청암홈윈도우 가맹점관리 프로그램 — 공통 스타일 청사진 인디고 / 냉색 종이 / 앰버·클레이·모스(의미색) */ :root{ --ground:#EDF0F4; --surface:#FFFFFF; --surface-2:#F6F8FB; --ink:#131920; --ink-2:#3C4855; --muted:#5D6975; --faint:#8A95A1; --line:#D7DDE5; --line-2:#E8ECF2; --accent:#23478F; --accent-soft:#E6ECF8; --accent-line:#BFCDE8; --warn:#9C6414; --warn-soft:#FBF0DE; --warn-line:#E8D3AC; --crit:#A03428; --crit-soft:#FBE9E6; --crit-line:#EBC3BC; --ok:#276148; --ok-soft:#E4F0EA; --ok-line:#B9D6C7; /* 📞 본사 1차상담 완료 — 입찰 카드 «색»으로 가른다(2026-10-31 지시 — 「카드 색부터 달라야지」). 붉은(가맹점 바탕) · 파랑(내가 고른 지역 테두리) · 노랑(특가·재접수) · 초록(일반 딱지)과 겹치지 않게 보라. */ --c1:#5B3CC4; --c1-ink:#FFFFFF; --c1-soft:#F1EDFC; --c1-line:#B9A8EE; --shadow:0 1px 2px rgba(19,25,32,.05), 0 8px 24px -12px rgba(19,25,32,.18); --shadow-lg:0 2px 4px rgba(19,25,32,.06), 0 24px 56px -20px rgba(19,25,32,.28); --r:10px; --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --body:"IBM Plex Sans KR", system-ui, -apple-system, "Malgun Gothic", sans-serif; --display:"Gothic A1", "IBM Plex Sans KR", system-ui, sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#0D1218; --surface:#151C24; --surface-2:#1B242E; --ink:#E7ECF2; --ink-2:#C2CCD7; --muted:#93A0AD; --faint:#6E7B89; --line:#26313D; --line-2:#1F2932; --accent:#7FA3E8; --accent-soft:#18243A; --accent-line:#2C3F63; --warn:#DCA857; --warn-soft:#2A2113; --warn-line:#4A3A1C; --crit:#F06A5C; --crit-soft:#2B1916; --crit-line:#5A2A24; --ok:#74B896; --ok-soft:#14251D; --ok-line:#26432F; --c1:#A996F5; --c1-ink:#120E22; --c1-soft:#261C42; --c1-line:#5B4A9E; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 56px -20px rgba(0,0,0,.75); } } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--ground); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; } h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.01em;text-wrap:balance} p{margin:0} a{color:var(--accent)} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} table{border-collapse:collapse;width:100%} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} /* 작은 기준표 — 단지마스터의 「산정 기준」이 씁니다. `.tbl` 은 목록용이라 여백이 큽니다. 기준표는 여러 벌을 나란히 놓으므로 좁게 씁니다. */ table.mini{font-size:12.5px} table.mini th{text-align:left;font-weight:600;color:var(--ink-2);padding:4px 8px 4px 0;border-bottom:1px solid var(--line-2)} table.mini td{padding:4px 8px 4px 0;border-bottom:1px solid var(--line-2)} table.mini tr:last-child td{border-bottom:0} table.mini td.num,table.mini th.num{text-align:right;padding-right:0} /* 접었다 펴는 자리 — 기준표처럼 「필요할 때만 본다」에 씁니다. */ details>summary{list-style:none;padding:2px 0} details>summary::-webkit-details-marker{display:none} details>summary::before{content:'▸ ';color:var(--ink-2)} details[open]>summary::before{content:'▾ '} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* 폼 */ input[type=text],input[type=tel],input[type=number],input[type=password],input[type=date],select,textarea{ font:inherit;font-size:14px;padding:8px 10px;border-radius:8px;border:1px solid var(--line); background:var(--surface);color:var(--ink);width:100%; } /* 💴 ⚠ **금액 칸(`[data-money]`)을 여기서 빠뜨리면 안 됩니다.** 그 칸은 쉼표를 찍으려고 `type="text"` 로 두었는데, 이 줄이 `type=number` 만 보고 있으면 **고정폭·자릿수 맞춤이 사라집니다** — 자릿수를 눈으로 세라고 쉼표를 찍은 자리에서 글자 너비가 제각각이 되는 것이라, 고친 보람이 반으로 줍니다. */ input[type=number],input[type=date],input[data-money]{font-family:var(--mono);font-variant-numeric:tabular-nums} textarea{resize:vertical;min-height:70px;line-height:1.55} input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed} /* ⚠ 빈 칸에 비치는 글은 **적어 넣은 값과 달라 보여야 합니다**(2026-09-23 지시). 브라우저 기본 색이 제각각이라 어떤 데서는 적은 값처럼 진하게 나옵니다 — 여기서 못박습니다. 글 자체도 「예 · 」로 시작합니다. */ input::placeholder,textarea::placeholder{color:var(--faint);opacity:1;font-style:italic} label.fld{display:flex;flex-direction:column;gap:5px} label.fld > span{font-size:12.5px;color:var(--muted)} label.chk{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);cursor:pointer} label.chk input{width:auto;margin-top:4px;flex:0 0 auto} .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px} /* 버튼 */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 15px;border-radius:8px; font-size:14px;font-weight:600;background:var(--role);color:var(--role-ink);transition:filter .12s;text-align:center; } .btn:hover:not([disabled]){filter:brightness(1.08)} .btn.sec{background:var(--surface);color:var(--accent);border:1px solid var(--accent-line)} .btn.quiet{background:var(--surface);color:var(--muted);border:1px solid var(--line)} .btn.danger{background:var(--surface);color:var(--crit);border:1px solid var(--crit-line)} .btn.full{width:100%} .btn.sm{padding:5px 11px;font-size:12.5px} .btn[disabled]{opacity:.45;cursor:not-allowed;filter:none} /* 조각 */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px} .card.tint{background:var(--surface-2)} .card.mark{border-color:var(--accent-line);background:var(--accent-soft)} .card.warn{border-color:var(--warn-line);background:var(--warn-soft)} .card.crit{border-color:var(--crit-line);background:var(--crit-soft)} .card.ok{border-color:var(--ok-line);background:var(--ok-soft)} .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .meta{font-size:12.5px;color:var(--muted);line-height:1.55} .tiny{font-size:11.5px;color:var(--faint);line-height:1.5} .row{display:flex;gap:9px;align-items:center} .row.wrap{flex-wrap:wrap} .col{display:flex;flex-direction:column;gap:12px} .spread{display:flex;justify-content:space-between;align-items:center;gap:10px} .rowline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0} .rowline+.rowline{border-top:1px solid var(--line-2)} .rowline .k{font-size:13px;color:var(--muted)} .rowline .v{font-family:var(--mono);font-size:14px;font-weight:500} .rowline .v.big{font-size:17px;font-weight:600} .pill{ display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px; font-weight:500;border:1px solid var(--line);color:var(--muted);background:var(--surface-2);white-space:nowrap; } .pill.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)} /* 📞 1차상담 딱지 — «칠한» 딱지(옅은 딱지는 34건 사이에서 안 보였다 · 2026-10-31) */ .pill.c1{color:var(--c1-ink);background:var(--c1);border-color:var(--c1);font-weight:700} .c1txt{color:var(--c1)} .pill.warn{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)} .pill.crit{color:var(--crit);background:var(--crit-soft);border-color:var(--crit-line)} .pill.acc{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)} /* ⚠ `bad` 는 화면 코드가 쓰고 있었는데 여기 정의가 없어서 **평범한 회색으로** 나왔습니다 — 「퇴사」·「해지 완료」·「되돌릴 수 없습니다」가 눈에 안 띄었습니다. 경고가 조용히 실패하는 자리라 `crit` 과 같은 색을 줍니다. */ .pill.bad{color:var(--crit);background:var(--crit-soft);border-color:var(--crit-line)} /* 첨부 안에서 바로 트는 영상·소리. 칸을 넘지 않게 폭을 묶어 둡니다 — 그리드 안에서 `min-width:auto` 가 내용을 자르던 그 자리와 같습니다. */ .filemedia{display:block;width:100%;max-width:520px;min-width:0;margin:6px 0 2px;border-radius:9px} video.filemedia{max-height:60vh;background:#000} audio.filemedia{height:38px} .meta.bad{color:var(--crit)} .grade{ font-family:var(--display);font-weight:800;font-size:15px;width:27px;height:27px;border-radius:7px; display:grid;place-items:center;flex:0 0 27px; } .grade.A{background:var(--accent);color:#fff} .grade.B{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)} .grade.C{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)} .grade.D{background:var(--surface-2);color:var(--faint);border:1px dashed var(--line)} .grade.E{background:transparent;color:var(--faint);border:1px dashed var(--line)} .bar-track{height:7px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden} .bar-fill{height:100%;background:var(--accent)} .chips{display:flex;gap:6px;flex-wrap:wrap} .chip{padding:5px 10px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;color:var(--muted);background:var(--surface)} .chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600} /* 💰💳 지갑 — 예치금 카드 · 🔁 채우기 · 크레딧 카드, 그리고 탭 넷 (2026-10-26 · `app.js` 「지갑 — 예치금과 크레딧을 나눠 본다」) */ .wcards{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin-bottom:12px} .wcard{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)} .wcard .lbl{font-size:12.5px;color:var(--muted);letter-spacing:0;text-transform:none} .wcard .n{font-size:22px;font-weight:700} .wcard.dep{border-left:4px solid var(--accent);background:var(--accent-soft)} .wcard.cr{border-left:4px solid var(--ok);background:var(--ok-soft)} .warrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:4px 6px;font-size:22px} .warrow .tiny{font-size:11.5px;line-height:1.35} .wtabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px} .wtab{padding:7px 12px;border:1px solid var(--role-line,var(--line));border-radius:8px;background:var(--role-soft,var(--surface));color:var(--ink);font-size:13px;cursor:pointer} .wtab[aria-selected=true]{background:var(--role);border-color:var(--role);color:var(--role-ink,#fff);font-weight:700} .wtab[aria-selected=true] .tiny{color:inherit} table.wall th.wg-dep,table.wall td.wg-dep{background:var(--accent-soft)} table.wall th.wg-cr,table.wall td.wg-cr{background:var(--ok-soft)} tr.wfill td,tr.wfill td.wg-dep,tr.wfill td.wg-cr{background:var(--warn-soft)} @media (max-width:700px){.wcards{grid-template-columns:1fr}.warrow{flex-direction:row;flex-wrap:wrap;font-size:18px}.warrow .tiny br{display:none}} /* 표 */ .tbl{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)} .tbl.scroll{overflow-x:auto} .tbl table{font-size:13.5px} .tbl th{ text-align:left;padding:10px 13px;background:var(--surface-2);border-bottom:1px solid var(--line); font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500; white-space:nowrap; } .tbl td{padding:11px 13px;border-bottom:1px solid var(--line-2);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl td.r,.tbl th.r{text-align:right} /* 📊 엑셀처럼 옆으로 늘어나는 표 (2026-10-04 — 고객관리 「자세히」). ⚠ **첫 칸을 붙박습니다.** 칸이 스무 개가 넘으면 오른쪽으로 밀었을 때 「누구 줄인지」를 잃습니다 — 그러면 표를 아무리 넓혀도 분석이 안 됩니다. ⚠ 줄바꿈을 막습니다. 칸마다 높이가 달라지면 눈이 가로줄을 못 따라갑니다. */ /* 🧾 칸 사이 세로줄 — 금액 칸이 여럿 붙은 표(매출 대조 TE 한 줄씩) */ .tbl.vsep th + th, .tbl.vsep td + td { border-left: 1px solid var(--line); } .tbl.wide table{min-width:max-content} .tbl.wide td{white-space:nowrap} .tbl.wide th:first-child,.tbl.wide td:first-child{ position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line)} .tbl.wide th:first-child{background:var(--surface-2)} .tbl.wide td:first-child{background:var(--surface)} .tbl.wide tr:hover td:first-child{background:var(--surface-2)} /* 🚚 최종 발주관리 대장 (2026-10-15 지시 — 「하단 스크롤 이동없이 한화면에」). `wide` 는 칸이 많은 분석 표라 옆으로 늘린다 — 대장은 거꾸로 화면 폭에 맞추고 칸 안에서 줄을 바꾼다. 여백을 줄이고 위에 붙인다(칸마다 줄 수가 달라 가운데로 두면 눈이 줄을 못 따라간다). */ .tbl.oplist table{width:100%} .tbl.oplist th,.tbl.oplist td{padding:8px 9px} .tbl.oplist td{vertical-align:top} /* ↔ 번호 칸을 옆으로 나누며(2026-10-16) 칸이 늘었다 — 머리는 줄을 바꿔도 된다(1366 폭에서 「확정일 · 확정한 사람」 머리 한 줄이 칸을 140px 로 벌렸다) */ .tbl.oplist th{white-space:normal;letter-spacing:.02em} /* 「N줄」 — 예전 인라인 `margin:0 0 6px` 를 아래 여백(padding)으로 옮겼다(붙었을 때 그 6px 도 바탕색으로 덮이게 · 생김새는 같다) */ .opcount{margin:0;padding-bottom:6px} /* 🧷 대장 붙박이 (2026-10-27) — PC 에서 표를 내려도 탭 줄 · 거르개 줄 · 「N줄」 · 표 머리줄이 위 띠 밑에 차례로 남는다. 높이 변수 셋은 `app.js` 의 `대장틀재기` 가 잰다. 위의 예치금 표 · 정리할 일 · 요약 카드는 같이 올라간다(가리는 면적을 줄인다). ⚠ 900px 아래는 예전 그대로다 — 이 묶음 밖에서는 아무것도 붙지 않는다. ⚠ 거르개 줄의 아래 10px 은 안쪽 줄의 margin 이었다 — 붙은 동안 그 틈으로 표가 비치지 않게 바깥 틀의 padding 으로 옮긴다(생김새는 같다) */ @media (min-width:901px){ .opstick-tabs{position:sticky;top:var(--tb-h,57px);z-index:22;background:var(--ground)} .opbar{position:sticky;top:calc(var(--tb-h,57px) + var(--op-tab-h,0px));z-index:21;background:var(--ground);padding-bottom:10px} .opbar > .row{margin-bottom:0 !important} .opcount{position:sticky;top:calc(var(--tb-h,57px) + var(--op-tab-h,0px) + var(--op-bar-h,0px));z-index:20;background:var(--ground)} /* 표가 칸에 들어갈 때만(`opfit`) — 옆 스크롤 상자를 풀어야 머리줄이 화면 기준으로 붙는다. clip 은 둥근 모서리는 자르되 상자를 안 만든다 */ .tbl.oplist.opfit{overflow:visible;overflow:clip} .tbl.oplist.opfit thead th{position:sticky;z-index:19; top:calc(var(--tb-h,57px) + var(--op-tab-h,0px) + var(--op-bar-h,0px) + var(--op-n-h,0px)); box-shadow:inset 0 -1px 0 var(--line)} } /* 열 머리를 눌러 정렬하는 표 (전국단지마스터). 눌리는 자리라는 것이 보여야 합니다. */ .tbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap} .tbl th.sortable:hover{color:var(--role)} /* 🔢 머리말 «안»의 정렬 단추 (2026-10-03). 단추처럼 보이면 머리말이 아니게 되므로 글자만 둡니다 — 손가락 모양과 쓸림 색은 위 `th.sortable` 이 정합니다. ⚠⚠ **단추여야 합니다.** 이 화면의 클릭 대문이 `button`·`a` 만 받아서, `` 에 `data-` 를 붙이면 눌러도 조용히 아무 일이 안 납니다 — 오류도 안 나고 화면도 안 바뀌어 「정렬이 원래 없나 보다」로 읽힙니다. 쓰는 자리 둘 — 전국단지마스터(표를 직접 그립니다) · 검수 · 배정(공용 `table()` 의 `누름`). */ .tbl th .thsort{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;white-space:nowrap} .tbl th .thsort:hover{text-decoration:underline} /* 원본이 들고 있을 뿐 우리가 «안 쓰는» 열. 보이기는 하되 믿고 쓰는 값이 아니라는 것이 한눈에 보여야 합니다 — 참고등급을 실제 등급으로 읽으면 단가를 잘못 셉니다. */ .tbl th.ref,.tbl td.ref{color:var(--faint);background:var(--surface-2)} .tbl .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap} .empty{padding:34px;text-align:center;color:var(--muted);font-size:13.5px} /* 알림 · 오류 */ #toast{ position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px); background:var(--ink);color:var(--ground);padding:11px 20px;border-radius:99px;font-size:13.5px; box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s; z-index:200;max-width:92vw;text-align:center; } #toast.on{opacity:1;transform:translateX(-50%) translateY(0)} #toast.bad{background:var(--crit);color:#fff} .banner{padding:11px 14px;border-radius:8px;font-size:13.5px} .banner.bad{background:var(--crit-soft);border:1px solid var(--crit-line);color:var(--crit)} .banner.good{background:var(--ok-soft);border:1px solid var(--ok-line);color:var(--ok)} .banner.warn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn)} /* 모달 */ .modal-bg{ position:fixed;inset:0;background:rgba(19,25,32,.5);display:grid;place-items:center;z-index:150;padding:20px; } .modal{ background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);width:min(560px,100%); max-height:88vh;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px; } .modal h3{font-size:18px} /* 로딩 */ .spin{ width:15px;height:15px;border-radius:50%;border:2px solid var(--accent-line);border-top-color:var(--accent); animation:sp .7s linear infinite;display:inline-block;flex:0 0 15px; } @keyframes sp{to{transform:rotate(360deg)}} .loading{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13.5px;padding:24px} /* ============================================================ 휴대폰 ============================================================ */ /* 그리드 칸이 안쪽 표에 밀려 넓어지면 바깥에서 잘립니다. 칸을 줄어들 수 있게 둡니다. */ .split > *, .col > *, .grid3 > *, main > * { min-width: 0 } /* 🗂 좌측(훑는 표)이 넓은 두 칸 — 본사 「검수 · 배정」. `.split` 은 격자라 칸에 `flex` 를 줘도 폭이 안 바뀝니다(반반으로 갈려 아홉 열 표가 눌렸습니다). 폭은 여기서 정합니다. ⚠ 좁은 화면에서는 한 줄로 돌아갑니다 — 아래 `@media (max-width: 900px)` 의 짝이 있습니다. ⚠ 고객 성함이 한 자씩 꺾이지 않게 이 표에서만 낱말 단위로 끊습니다(`keep-all`). 전역으로 걸면 띄어쓰기 없는 긴 한글 글이 표를 밀어냅니다. */ .split.split-wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) } .split-wide .tbl td { word-break: keep-all } /* 검수·배정 오른쪽 상세는 왼쪽 목록을 내려도 화면에 떠 있다 — 상단 띠(sticky top:0) 아래에 붙이고, 길면 안쪽에서 스크롤 */ /* ⚠ 상세를 감싼 칸(.col)이 상세 높이만큼만 있으면 sticky 가 움직일 자리가 없어 그대로 밀려 올라간다 — 그 칸을 목록 높이만큼 늘린다(화면에서 재어 봄) */ .split-wide > .col:has(> #intakedetail) { align-self: stretch } .split-wide #intakedetail { position: sticky; top: var(--topbar-h, 64px); max-height: calc(100vh - var(--topbar-h, 64px) - 12px); overflow-y: auto } @media (max-width: 900px) { .split.split-wide { grid-template-columns: 1fr } .split-wide #intakedetail { position: static; max-height: none; overflow-y: visible } } .tbl.scroll { -webkit-overflow-scrolling: touch } /* 표 대신 쓰는 카드 목록 */ .rows { display:flex; flex-direction:column; gap:9px } .rowcard { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:12px 13px; display:flex; flex-direction:column; gap:7px; } .rowcard.tap { cursor:pointer } .rowcard.tap:active { background:var(--surface-2) } .rowcard .head { display:flex; align-items:center; gap:8px; flex-wrap:wrap } .rowcard .head b { font-size:14.5px } .rowcard .kv { display:flex; justify-content:space-between; gap:10px; font-size:13px } .rowcard .kv span:first-child { color:var(--muted) } .rowcard .kv span:last-child { text-align:right } .rowcard .foot { display:flex; gap:7px; flex-wrap:wrap; margin-top:2px } /* ── 가맹점 관리 — 좌측 목록 · 우측 상세 ────────────────────────────────── 2026-09-22 지시: 「좌측에 가맹점리스트 우측에 가맹점 상세가 바로바로」. ★ 그 전에는 열 아홉 개짜리 표 하나였고, 「📋 상세」가 모달을 띄웠다 — 다음 가맹점을 보려면 창을 닫아야 했다. ⚠ 좌측을 `minmax(0,…)` 로 둔다. `min-width:auto` 를 그대로 두면 안쪽 긴 상호가 칸을 밀어내 우측이 짜부라진다 (이 파일 아래 「그리드 안에서 min-width:auto」 함정과 같은 자리다). */ .br-split { display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr); gap:14px; align-items:start } /* ⚠ **안쪽에 스크롤을 두지 않는다** (2026-10-23 지시 — 「스크롤이 아니라 그냥 쭉 아래로 페이지로 내려져야지」). 예전에는 `max-height:calc(100vh - 210px); overflow:auto` 로 목록만 따로 굴렀다 — 상세가 길어도 고를 자리가 눈에 있으라고 둔 것인데, 창 안에 창이 생겨 바깥 페이지를 굴리다 목록 위에 손이 닿으면 목록만 굴렀다. 목록은 페이지와 함께 내려간다. */ .br-list { display:flex; flex-direction:column; gap:6px } .brpick { display:flex; flex-direction:column; gap:3px; width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface); } .brpick:hover { background:var(--surface-2) } .brpick:focus-visible { outline:2px solid var(--accent); outline-offset:1px } /* 고른 줄 — 색만으로 가르지 않고 **왼쪽에 띠**를 둔다(색을 못 가르는 사람도 보이게) */ .brpick[aria-pressed="true"] { border-color:var(--accent-line); background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); } .brpick__row { display:flex; align-items:center; gap:6px; justify-content:space-between } .brpick__name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .brpick__who { color:var(--muted); font-size:12.5px } .br-detail { min-width:0 } /* 🗂 예치금 · 크레딧 · 원장의 우측 칸 — 표가 칸보다 넓다(원장 9열). 좁히면 가맹점 이름과 내용이 **한 글자씩** 세로로 쪼개진다(가맹점 관리 표가 그랬다). 표에 바닥 폭을 주고 칸 안에서 옆으로 구르게 한다(`.tbl.scroll`). 날짜·숫자는 한 줄로 둔다. */ #ledgerpane td { white-space:nowrap } #ledgerpane td.meta { white-space:normal; min-width:180px } /* 머리(이름·딱지·처리 단추)는 위에 붙여 두고 내용만 구른다 */ .br-detail__top { display:flex; flex-direction:column; gap:9px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line-2); } .br-detail__name { font-size:19px } .br-detail__acts { gap:7px } @media (max-width: 900px) { /* 좁아지면 위아래로 쌓는다 — 좌우로 우기면 둘 다 못 읽는다 */ .br-split { grid-template-columns:1fr } } @media (max-width: 700px) { body { font-size: 15.5px } main { padding: 16px 14px 40px } main > h2 { font-size: 21px } .kpis { grid-template-columns: repeat(2, 1fr) } .fgrid { grid-template-columns: 1fr } .split, .grid3 { grid-template-columns: 1fr } /* 손가락으로 누를 만한 크기 */ .btn { padding: 12px 16px; font-size: 15px } .btn.sm { padding: 8px 12px; font-size: 13px } .chip { padding: 9px 13px; font-size: 13.5px } input[type=text], input[type=tel], input[type=number], input[type=password], input[type=date], select, textarea { font-size: 16px; padding: 11px 12px } /* 16px 미만이면 아이폰이 확대합니다 */ .topbar { padding: 9px 14px; gap: 9px } .brand b { font-size: 15px } .who { display: none } #whoami { max-width: 46vw } .modal { padding: 18px 16px; border-radius: 14px 14px 0 0; align-self: flex-end; max-height: 92vh } .modal-bg { align-items: end; padding: 0 } } /* 가맹점·직원은 아래 탭바로 다닙니다 */ @media (max-width: 700px) { .shell.tabs { grid-template-columns: 1fr } .shell.tabs nav.side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); border-bottom: 0; background: var(--surface); box-shadow: 0 -2px 12px rgba(19,25,32,.06); overflow: visible; } .shell.tabs nav.side button { flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 2px; font-size: 11.5px; border-radius: 9px; text-align: center; } .shell.tabs main { padding-bottom: 86px } } /* 🔴 ---------- 메뉴 뱃지 — 「아직 안 한 것」 건수 (2026-09-26 지시) ---------- ⚠⚠ **`.dot` 에는 그동안 스타일이 «없었습니다».** 알림 종이 2026-09-19 부터 `3` 을 그리고 있었는데 규칙이 어디에도 없어서 «그냥 글자»로 붙어 있었습니다 — 「알림3」. 아무 오류도 안 나고, 숫자는 보이니까 아무도 안 이상하게 여겼습니다. 이제 진짜 동그라미가 됩니다. ⚠ 붉은색은 **`--crit`** 를 씁니다. 여기서 색을 새로 지으면 화면마다 다른 빨강이 생깁니다 — 토큰은 한 자리에서만 정합니다(`tokens` 규칙). */ .dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--crit); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; /* 숫자가 세 자리여도 칸을 안 밀도록 — 화면은 「99+」로 접어 보냅니다. */ flex: 0 0 auto; } /* 왼쪽 메뉴는 이름이 왼쪽, 뱃지가 오른쪽 끝에 붙습니다. */ nav.side button { display: flex; align-items: center; } nav.side button .dot { margin-left: auto } /* ⚠ **지금 보고 있는 줄에서는 뱃지를 뒤집습니다.** 그 줄은 바탕이 붉게 꽉 차 있어, 붉은 뱃지(`--crit`)를 그대로 얹으면 숫자가 바탕에 묻혀 «건수가 안 보입니다». */ nav.side button[aria-pressed=true] .dot { background: var(--nav-on-ink); color: var(--nav-on) } /* 휴대폰 탭줄은 세로로 쌓이므로 오른쪽 끝으로 밀지 않습니다. */ .shell.tabs nav.side button .dot { margin-left: 0 } /* ---------- 첨부 — 견적서 · 계약서 · 사진 ---------- */ .dropzone { border: 1.5px dashed var(--line); border-radius: 10px; padding: 12px; transition: .12s } .dropzone.over { border-color: var(--accent); background: var(--accent-soft) } .filegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 8px } .fileimg { position: relative; display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1 } .fileimg img { width: 100%; height: 100%; object-fit: cover; display: block } .fileimg .tag { position: absolute; left: 5px; bottom: 5px; font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.62); color: #fff } /* 📷 **원본이 아직 안 온 줄** (2026-10-12) — 사본만 올라가 있다. 가리지 않고 적는다: 블로그에 쓰려다 원본이 없는 것을 그때 알면 늦다. */ .fileimg .wait { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 10.5px; padding: 3px 0; background: rgba(0,0,0,.62); color: #fff } .fileimg .x { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border: 0; cursor: pointer; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1; padding: 0 } .filerow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line) } .filerow:first-child { border-top: 0 } .filerow a { flex: 1; min-width: 0; display: block; text-decoration: none; color: inherit } .filerow b { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .filerow .tiny { display: block } /* ============================================================ 역할별 색 — 어느 화면을 보고 있는지 한눈에 본사 남색 · 가맹점 초록 · 직원 자주 ============================================================ */ :root { --role: #23478F; --role-ink: #FFFFFF; --role-soft: #E6ECF8; --role-line: #BFCDE8; } /* 🔴 **가맹점은 붉은톤입니다** (2026-09-28 지시 — 「모바일 페이지도 베이스가 붉은톤으로」 · 「나는 저 녹색톤이 별로야」). 예전에는 초록(#0E7A63)이었습니다. ⚠ 휴대폰 화면(`/partner/mobile`)은 **언제나 가맹점**입니다 — 본사도 직원도 그 화면을 안 씁니다. 그래서 거기서는 역할 색이 «구별»을 한 적이 없고, 바꿔도 잃는 것이 없습니다. ⚠ **PC 에서는 잃는 것이 조금 있습니다.** 왼쪽 메뉴가 이미 붉은톤이라(위 `--nav-*`), 본사 화면과 가맹점 화면이 예전만큼 확 다르지는 않습니다. 가르는 것은 그대로 남습니다 — 상단 띠 색·단추 색과 배지(「본사」/「가맹점 대표」). ⚠ **위험색(`--crit`)과 헷갈리지 않습니다.** 으뜸 단추는 «칠한» 붉은색이고 위험 단추는 «테두리만» 있는 붉은색이라(`.btn.danger`) 생김새가 아예 다릅니다. 그 규칙을 뒤집어 위험 단추를 칠하면 그날 「저장」과 「삭제」가 같아 보입니다. */ :root[data-role="branch"] { --role: #C8414C; --role-soft: #FDF1F1; --role-line: #F0C9CB } :root[data-role="staff"] { --role: #8A3E86; --role-soft: #F5E9F4; --role-line: #DFBEDC } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --role: #7FA3E8; --role-ink: #10161F; --role-soft: #18243A; --role-line: #2C3F63; } /* 🔴 다크모드도 «붉은» 가맹점 색이다 — 예전 #E28189 는 연분홍으로 보였다(2026-10-31 지시 — 「애매한 핑크처럼보이는데? 별로야」). 짙은 붉은색에 흰 글자로 뒤집는다(밝은 바탕 화면과 같은 모양). */ :root:not([data-theme="light"])[data-role="branch"] { --role: #D73844; --role-ink: #FFFFFF; --role-soft: #2A1518; --role-line: #5A2A30 } :root:not([data-theme="light"])[data-role="staff"] { --role: #D89BD4; --role-soft: #2A1A29; --role-line: #4A2F48 } } /* ============================================================ 왼쪽 메뉴 바탕 — 회사 색(붉은톤) ============================================================ 2026-09-28 지시: 「메뉴의 바탕색을 붉은톤으로 잘보이게」. 그동안 메뉴 바탕이 본문과 같은 흰색이었고, 지금 보고 있는 줄은 아주 옅은 역할색(`--role-soft`)이라 **어디에 서 있는지가 거의 안 보였습니다.** ⚠⚠ **`--role` 을 건드리지 않습니다.** 그 토큰은 상단 띠·배지·단추·지도까지 끌고 다니며 「본사 남색 · 가맹점 초록 · 직원 자주」를 지킵니다 — 붉게 바꾸면 어느 화면인지 가리는 장치가 통째로 무너집니다. ⚠ 여기 쓰는 붉은색은 **로고 색**입니다(파비콘·로그인 로고의 그 코랄). 회사 색이라 역할과 부딪히지 않습니다. ⚠ **위험색(`--crit`)과 다른 색입니다.** 같은 붉은색을 쓰면 메뉴가 늘 「경고」처럼 보입니다. ⚠ 지금 줄은 «칠을 가득» 합니다 — 옅은 바탕에 옅은 표시를 얹으면 다시 안 보입니다. 글자는 흰색으로 뒤집습니다. */ :root { --nav-bg: #FDF1F1; --nav-line: #F0D3D4; --nav-hover: #F8E3E4; --nav-on: #C8414C; --nav-on-ink: #FFFFFF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-bg: #1F1316; --nav-line: #382125; --nav-hover: #2A191D; --nav-on: #D73844; --nav-on-ink: #FFFFFF; } } /* 화면 맨 위 굵은 띠 — 색으로 자리를 알립니다 */ .rolestripe { height: 4px; background: var(--role) } .rolebadge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--role-ink); background: var(--role); padding: 3px 9px; border-radius: 99px; } /* ---------- 사용 규칙 ---------- */ .rule { display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line-2); } .rule:first-of-type { border-top: 0 } .rule .txt { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.65 } .rule .side { flex: none; display: flex; align-items: center; gap: 7px; padding-top: 1px } .rule .now { font-family: var(--mono); font-size: 12px; color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rule.moved { background: var(--warn-soft, transparent) } .rule.moved .txt { font-weight: 500 } .card .focusme { outline: 2px solid var(--role); outline-offset: 3px; border-radius: 9px; animation: focusblink 1.4s ease-out; } @keyframes focusblink { 0%,60% { background: var(--role-soft) } 100% { background: transparent } } @media (prefers-reduced-motion: reduce) { .card .focusme { animation: none } } /* ── 교육자료 ──────────────────────────────────────────────── 왼쪽에서 고르고 오른쪽에서 봅니다. ⚠ 판은 **1920×1080 그대로** 두고 `--edu-scale` 로 통째 줄입니다. 글자 크기만 줄이면 안에 박힌 배치(px)가 흐트러집니다. */ .edu{display:grid;grid-template-columns:262px minmax(0,1fr);gap:14px;align-items:start} .edu-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;position:sticky;top:12px} .edu-grp{font-size:11.5px;color:var(--faint);letter-spacing:.08em;padding:9px 8px 4px} .edu-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:9px 10px;border-radius:8px;border:1px solid transparent} .edu-item:hover{background:var(--surface-2)} .edu-item[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line)} .edu-item b{font-size:13.5px;line-height:1.35} /* 📘 본사 전용 — 자료 줄 밑에 「본사·대표·직원」 체크박스 셋 (2026-09-28) */ .edu-item-wrap{display:flex;flex-direction:column} .edu-acc{display:flex;flex-wrap:wrap;padding:0 10px 8px;gap:2px} .edu-acc label{display:inline-flex;align-items:center;gap:3px;cursor:pointer} .edu-view{min-width:0;display:flex;flex-direction:column;gap:10px} .edu-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .edu-bar > b{font-size:14.5px} .edu-stage{ --edu-scale:1; position:relative;overflow:hidden;width:100%; background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r); } .edu-stage > section{ position:absolute;top:0;left:0;width:1920px;height:1080px; transform:scale(var(--edu-scale));transform-origin:top left; } /* 판 안에서는 프로그램 글꼴·굵기를 물려주지 않습니다 — 판이 직접 정합니다. */ .edu-stage h1,.edu-stage h2,.edu-stage h3{font-family:inherit;letter-spacing:normal} .edu-stage ul,.edu-stage ol{margin:0;padding-left:1.4em} /* 너비만 채워 줍니다 — 칸 너비가 %(퍼센트)로 적혀 있어 기준 폭이 있어야 합니다. ⚠ `border-collapse:collapse` 는 넣지 않습니다. 판이 표에 둥근 모서리와 안쪽 여백을 주는데 그것이 죽습니다. */ .edu-stage table{width:100%} /* ---------- 한 장짜리 자료(종류: page) ---------- 제 판과 제 계산기를 가진 완성된 HTML 을 통째로 띄웁니다. */ .edu-page{ width:100%;height:calc(100vh - 190px);min-height:460px; border:1px solid var(--line);border-radius:var(--r);background:var(--surface); display:block; } @media (max-width:900px){ .edu-page{height:calc(100vh - 230px)} } /* 📄 문서 자료에 붙은 PDF — Word 모양 그대로 띄운다(2026-10-31). 한 장짜리 자료와 같은 높이다. */ .edu-pdf{ width:100%;height:calc(100vh - 230px);min-height:520px; border:1px solid var(--line);border-radius:var(--r);background:var(--surface); display:block; } @media (max-width:900px){ .edu-pdf{height:calc(100vh - 270px)} } @media print{ .edu-pdf{display:none} } /* ---------- 문서 자료(종류: doc) ---------- 판을 넘기는 자료가 아니라 «죽 내려 읽는» 긴 글입니다. 계약서처럼 조문이 많은 문서는 슬라이드로 나누면 원문을 잃습니다. */ .edu-doc{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:22px 26px;max-height:calc(100vh - 210px);overflow:auto; font-size:13.5px;line-height:1.75; } .edu-doc h3{ font-size:16px;font-weight:700;margin:26px 0 10px;padding-bottom:7px; border-bottom:2px solid var(--line-strong,var(--line)); } .edu-doc h3:first-child{margin-top:0} .edu-doc h4{font-size:14px;font-weight:700;margin:18px 0 6px;color:var(--accent)} .edu-doc p{margin:0 0 7px} /* ⚠ 표는 제 칸에서만 옆으로 흐릅니다 — 화면 전체가 옆으로 밀리면 안 됩니다. */ .edu-doc-tw{overflow-x:auto;margin:8px 0 14px} .edu-doc table{border-collapse:collapse;width:100%;min-width:420px} .edu-doc th,.edu-doc td{ border:1px solid var(--line);padding:6px 9px;font-size:12.5px; text-align:left;vertical-align:top;line-height:1.55; } .edu-doc th{background:var(--surface-2);font-weight:700;white-space:nowrap} /* 인쇄하면 종이에 맞춥니다 — 화면 칸과 스크롤을 풉니다. */ @media print{ .edu-doc{max-height:none;overflow:visible;border:0;padding:0;font-size:11pt} .edu-side,.edu-bar,.edu-doc-tabs{display:none} } /* 판이 쓰는 도형 태그. 브라우저가 모르는 태그라 직접 그려 줍니다. */ .edu-stage x-shape{display:block} .edu-stage x-shape[kind="rounded"]{border-radius:12px} .edu-stage x-shape[kind="ellipse"]{border-radius:50%} .edu-stage x-shape[kind="diamond"]{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .edu-stage x-shape[kind="arrow-right"]{clip-path:polygon(0 28%,62% 28%,62% 0,100% 50%,62% 100%,62% 72%,0 72%)} .edu-stage x-shape[kind="arrow-left"]{clip-path:polygon(100% 28%,38% 28%,38% 0,0 50%,38% 100%,38% 72%,100% 72%)} .edu-stage x-shape[kind="arrow-up"]{clip-path:polygon(28% 100%,28% 38%,0 38%,50% 0,100% 38%,72% 38%,72% 100%)} .edu-stage x-shape[kind="arrow-down"]{clip-path:polygon(28% 0,28% 62%,0 62%,50% 100%,100% 62%,72% 62%,72% 0)} .edu-stage x-shape[kind="line"]{height:2px} .edu-notes{ background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--r); padding:12px 14px;font-size:13px;line-height:1.7;color:var(--ink-2) } .edu-toc{display:flex;flex-wrap:wrap;gap:6px} .edu-toc-i{ display:flex;align-items:center;gap:6px;max-width:260px; font-size:12px;color:var(--muted);background:var(--surface); border:1px solid var(--line);border-radius:999px;padding:5px 11px 5px 5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .edu-toc-i:hover{background:var(--surface-2)} .edu-toc-i[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink)} .edu-toc-i .no{ flex:0 0 auto;display:inline-grid;place-items:center;width:19px;height:19px; border-radius:50%;background:var(--surface-2);font-size:11px;color:var(--faint) } .edu-toc-i[aria-pressed="true"] .no{background:var(--accent);color:#fff} /* 전체화면 — 판만 크게 두고 단추는 위에 얹습니다. */ .edu-view:fullscreen{background:var(--ground);padding:14px;gap:12px;justify-content:center} .edu-view:fullscreen .edu-toc{display:none} .edu-view:fullscreen .edu-stage{border:0;background:transparent} @media (max-width:860px){ .edu{grid-template-columns:minmax(0,1fr)} .edu-side{position:static} } /* ---------- 관리자 보고서 ---------- 청암홈윈도우ERP 의 「사내 게시판」을 본떴습니다 — 왼쪽 게시판, 오른쪽 글 목록. 같은 회사에서 쓰는 화면이라 손버릇을 옮기는 편이 새 규칙을 익히게 하는 것보다 낫습니다 (휴대폰을 ERP `/user` 에서 본뜬 것과 같은 까닭). */ .rp{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:start} .rp-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;position:sticky;top:12px} .rp-side-h{font-size:12px;color:var(--faint);letter-spacing:.06em;padding:6px 8px 8px} .rp-b{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%; padding:8px 10px;border-radius:8px;border:1px solid transparent;font-size:13.5px} .rp-b:hover{background:var(--surface-2)} .rp-b[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);font-weight:600} .rp-b .n{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums} .rp-list{min-width:0;padding:0} .rp-list-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:12px 14px;border-bottom:1px solid var(--line)} /* ⚠ 한 줄이 통째로 단추입니다 — 제목만 누르게 하면 손가락으로 집기 어렵습니다. */ .rp-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center; width:100%;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)} .rp-row:last-child{border-bottom:0} .rp-row:hover{background:var(--surface-2)} .rp-tag{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--accent-soft); border:1px solid var(--accent-line);color:var(--accent);font-size:11.5px;white-space:nowrap} .rp-tag.sm{font-size:11px} .rp-sub{display:flex;flex-direction:column;gap:2px;min-width:0} .rp-sub b{font-size:13.5px;line-height:1.4} .rp-sub .tiny{color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rp-pin{margin-right:4px} .rp-when{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--faint);white-space:nowrap} .rp-crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--faint);margin-bottom:10px} .rp-crumb .sep{color:var(--thin)} .rp-post{padding:18px 20px} .rp-title{margin:8px 0 6px;font-size:20px;line-height:1.35} .rp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--faint); padding-bottom:12px;border-bottom:1px solid var(--line)} .rp-body{padding-top:14px;font-size:14px;line-height:1.75} /* 본문 — 보고서는 읽으라고 있는 글입니다. 줄 길이를 늘리지 않습니다. */ .rp-h{margin:22px 0 8px;line-height:1.4} .rp-body > .rp-h:first-child{margin-top:0} .rp-p{margin:0 0 11px} .rp-l{margin:0 0 12px;padding-left:20px} .rp-l li{margin:3px 0} .rp-q{margin:0 0 12px;padding:9px 13px;border-left:3px solid var(--accent-line); background:var(--surface-2);border-radius:0 8px 8px 0} .rp-hr{border:0;border-top:1px solid var(--line);margin:20px 0} .rp-code{margin:0 0 12px;padding:11px 13px;background:var(--surface-2);border:1px solid var(--line); border-radius:8px;overflow:auto;font-size:12.5px;line-height:1.6;white-space:pre} /* ⚠ 표는 폭이 넓어 잘립니다. 통째로 가로 스크롤을 답니다. */ .rp-tw{overflow:auto;margin:0 0 14px} .rp-t{width:100%;border-collapse:collapse;font-size:13px} .rp-t th,.rp-t td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top} .rp-t th{background:var(--surface-2);white-space:nowrap} @media (max-width:860px){ .rp{grid-template-columns:minmax(0,1fr)} .rp-side{position:static} .rp-row{grid-template-columns:minmax(0,1fr);gap:4px} .rp-when{align-items:flex-start;flex-direction:row;gap:8px} } /* 인쇄 — 보고서 본문만 남깁니다. 메뉴와 단추는 종이에 쓸모가 없습니다. */ @media print{ nav,.side,.topbar,.rp-side,.rp-crumb,.rp-meta .lnk,button{display:none !important} .rp{grid-template-columns:minmax(0,1fr)} .rp-post{border:0;padding:0} .rp-code,.rp-tw{overflow:visible} } /* ── 📋 가맹점 상세 — 이름칸·값칸 두 줄짜리 표와 서류 줄 ─────────── ⚠ 값칸에 `min-width:0` 이 있어야 합니다. 그리드·플렉스 안에서는 기본이 `auto` 라 긴 계좌번호 한 줄이 칸을 밀어 창 밖으로 내보냅니다 (휴대폰에서 `.split` 이 601px 로 벌어지던 것과 같은 자리). */ .dtl{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px} .dtl:last-child{border-bottom:0} .dtl>span{flex:none;width:112px;color:var(--faint);font-size:11.5px;padding-top:3px} .dtl>div{flex:1;min-width:0;word-break:break-word} /* 빈 칸은 빈 채로 두지 않습니다 — 「없다」와 「아직 안 봤다」가 갈려야 합니다 */ .dtl-none{color:var(--warn)} .dtl-doc{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)} .dtl-doc:last-child{border-bottom:0} .dtl-thumb{width:58px;height:58px;flex:none;object-fit:cover;border:1px solid var(--line);border-radius:7px;background:var(--surface)} .dtl-thumb-x{display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--faint);border-style:dashed} /* 표 안에서 글자를 눌러 여는 자리. 단추인데 글처럼 보여야 줄이 안 시끄럽습니다 */ .linkish{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left} .linkish:hover{color:var(--accent);text-decoration:underline} /* ════════════════════════════════════════════════════════════ 🗺 지역 지도 — 눌러서 배정/해제 · 휠 확대 · 끌어서 이동 ════════════════════════════════════════════════════════════ ⚠ 획 굵기에 `vector-effect:non-scaling-stroke` 를 씁니다. 안 쓰면 확대할수록 경계선이 같이 굵어져서, 서울처럼 촘촘한 데서는 **구가 선에 잡아먹힙니다.** ⚠ `touch-action:none` 이라야 휴대폰에서 끌어 이동이 됩니다 — 없으면 브라우저가 먼저 화면을 스크롤합니다. ⚠ **고른 곳은 색 «과» 굵은 테두리 둘로 표시합니다.** 색만으로 가르면 못 가르는 사람이 있습니다 (가맹점 관리의 고른 줄과 같은 규칙). */ .mapwrap{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .mapsvg{display:block;width:100%;height:min(62vh,600px);touch-action:none;cursor:grab} .mapsvg:active{cursor:grabbing} .mapsvg path{fill:var(--surface);stroke:var(--line);stroke-width:.7;vector-effect:non-scaling-stroke;cursor:pointer} .mapsvg path:hover{stroke:var(--ink);stroke-width:1.6} .mapsvg path[data-on="켜짐"]{fill:var(--role);stroke:var(--surface);stroke-width:1.2} .mapsvg path[data-on="반"]{fill:url(#mapbit);stroke:var(--role);stroke-width:1.2} /* 마스터에 단지가 한 곳도 없는 시·군·구 — 고를 것이 없으니 누를 수도 없습니다 */ .mapsvg path[data-on="없음"]{fill:var(--ground);opacity:.5;pointer-events:none;cursor:default} .mapsvg .bitbg{fill:var(--role-soft)} .mapsvg .bitfg{fill:var(--role)} .mapbtns{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px} .mapbtns .chip{width:34px;height:34px;padding:0;justify-content:center;background:var(--surface)} .mapnote{margin-top:8px} /* 📊 입찰현황 — 칸 안 글자가 한 자씩 세로로 쪼개지지 않게. 넘치면 표 안에서 옆으로 민다 */ .bidtbl td,.bidtbl th{white-space:nowrap} /* 🗂 원장 우측 칸의 처리 단추는 옆으로 나란히 — 위아래로 쌓이면 줄마다 높이가 두 배가 된다 */ #ledgerpane .acts { flex-wrap:nowrap } /* 🧾 고객상세 — 청암홈윈도우ERP 모양 (2026-09-29). 핵심 정보 칸과 상담이력 */ .coreform .fld{display:flex;flex-direction:column;gap:5px;margin-top:10px} .coreform .fld > span,.coreform details.fld > summary{font-size:12.5px;color:var(--muted)} .coreform input[readonly]{background:var(--surface-2);color:var(--muted)} .coreform span.chip{cursor:default} .chip:disabled{opacity:.55;cursor:default} .corebox{padding:8px 10px;border:1px dashed var(--line);border-radius:8px;background:var(--surface-2);font-size:13px} .corenote{margin-top:8px;padding:6px 10px;border:1px solid var(--accent-line);border-radius:8px;background:var(--surface);font-size:13px} .logadd textarea{width:100%;min-height:90px} .logitem{padding:9px 0;border-top:1px solid var(--line-2)} .loghead{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .logbody{margin-top:4px;font-size:13.5px;white-space:pre-wrap;word-break:break-word} /* 📄 쪽 넘기기 줄 — 고객관리 등 긴 표 아래 (2026-09-29 지시 「스크롤이 끝도 없네」). 가맹점ERP 의 「저장한 견적」 창과 같은 모양 */ .pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap} .pager .pagen{font-size:12.5px;font-weight:700} .pager .pagen .tiny{font-weight:400;margin-left:4px} .pager .btn[disabled]{opacity:.4;cursor:default} /* 📅 일정 달력 (2026-09-30) — 종류마다 색 하나. 글자색(--cal-*)과 옅은 바탕(--cal-*-bg). ⚠ 다크 테마 값을 아래 미디어 블록에 함께 둔다 — 빠뜨리면 어두운 화면에서 딱지가 흰 판으로 뜬다. */ :root{ --cal-visit:#23478F; --cal-visit-bg:#E6ECF8; --cal-measure:#6B3FA0; --cal-measure-bg:#F0E9F8; --cal-install:#276148; --cal-install-bg:#E4F0EA; --cal-as:#A03428; --cal-as-bg:#FBE9E6; --cal-call:#1F6F7A; --cal-call-bg:#E2F2F3; --cal-pay:#9C6414; --cal-pay-bg:#FBF0DE; --cal-sun:#C0392B; --cal-sat:#2A5DB0; --cal-today:#23478F; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --cal-visit:#7FA3E8; --cal-visit-bg:#18243A; --cal-measure:#B79AE0; --cal-measure-bg:#241B33; --cal-install:#74B896; --cal-install-bg:#14251D; --cal-as:#DE8375; --cal-as-bg:#2B1916; --cal-call:#6CC3CC; --cal-call-bg:#132A2D; --cal-pay:#DCA857; --cal-pay-bg:#2A2113; --cal-sun:#E8877B; --cal-sat:#86A9EC; --cal-today:#7FA3E8; } } .cal-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .cal-title{font-family:var(--display);font-size:17px;margin-left:6px} .cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start} .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line-2);gap:1px} .cal-wd{background:var(--surface-2);text-align:center;font-size:12px;font-weight:600;color:var(--muted);padding:5px 0} .cal-wd.sun{color:var(--cal-sun)} .cal-wd.sat{color:var(--cal-sat)} .cal-cell{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;background:var(--surface);min-height:104px;padding:5px 5px 6px;text-align:left;min-width:0} .cal-grid.week .cal-cell{min-height:260px} .cal-cell:hover{background:var(--surface-2)} .cal-cell.picked{box-shadow:inset 0 0 0 2px var(--accent)} .cal-dn{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-2);width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%} .cal-cell.sun .cal-dn{color:var(--cal-sun)} .cal-cell.sat .cal-dn{color:var(--cal-sat)} .cal-cell.today .cal-dn{background:var(--cal-today);color:var(--surface)} .cal-cell.past{background:var(--surface-2)} .cal-cell.past .cal-tags{opacity:.62} .cal-cell.other .cal-dn{opacity:.4} .cal-cell.other .cal-tags{opacity:.5} .cal-cnt{position:absolute;top:6px;right:7px;font-size:11px;color:var(--faint)} .cal-tags{display:flex;flex-direction:column;gap:2px;min-width:0} .cal-tag{font-size:11.5px;line-height:1.35;padding:1px 5px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);background:var(--surface-2);border-left:3px solid var(--line)} .cal-tag.done{text-decoration:line-through;opacity:.7} .cal-more{font-size:11px;color:var(--accent);padding:0 4px;cursor:pointer} .cal-more:hover{text-decoration:underline} .cal-side{position:sticky;top:12px} .cal-day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px} .cal-card{border:1px solid var(--line-2);border-left:4px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--surface)} .cal-card.done{opacity:.72} /* 📝 작성중 계약서의 결제 예정 — 흐리게 + 점선 테두리. 딱지(.cal-draft)는 흐리지 않게 따로 진하게. */ .cal-tag.draft{opacity:.55;border-left-style:dashed} .cal-card.draft{border-style:dashed} .cal-card.draft .cal-kind,.cal-card.draft .cal-who,.cal-card.draft .tiny,.cal-card.draft .row{opacity:.6} /* 카드 전체에 opacity 를 걸면 딱지까지 흐려진다 — 딱지 말고 나머지만 */ .pill.cal-draft{font-weight:600;color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)} .cal-kind{font-size:12px;font-weight:700;padding:1px 7px;border-radius:5px} .cal-who{margin:4px 0 2px;font-size:14px} .cal-chip .num{margin-left:2px} .cal-chip[aria-pressed=false]{opacity:.5;text-decoration:line-through} .cal-tag.k-visit,.cal-card.k-visit{border-left-color:var(--cal-visit)} .cal-tag.k-visit,.cal-kind.k-visit{background:var(--cal-visit-bg);color:var(--cal-visit)} .cal-tag.k-measure,.cal-card.k-measure{border-left-color:var(--cal-measure)} .cal-tag.k-measure,.cal-kind.k-measure{background:var(--cal-measure-bg);color:var(--cal-measure)} .cal-tag.k-install,.cal-card.k-install{border-left-color:var(--cal-install)} .cal-tag.k-install,.cal-kind.k-install{background:var(--cal-install-bg);color:var(--cal-install)} .cal-tag.k-as,.cal-card.k-as{border-left-color:var(--cal-as)} .cal-tag.k-as,.cal-kind.k-as{background:var(--cal-as-bg);color:var(--cal-as)} .cal-tag.k-call,.cal-card.k-call{border-left-color:var(--cal-call)} .cal-tag.k-call,.cal-kind.k-call{background:var(--cal-call-bg);color:var(--cal-call)} .cal-tag.k-pay,.cal-card.k-pay{border-left-color:var(--cal-pay)} .cal-tag.k-pay,.cal-kind.k-pay{background:var(--cal-pay-bg);color:var(--cal-pay)} .cal-chip.k-visit[aria-pressed=true]{border-color:var(--cal-visit);color:var(--cal-visit);background:var(--cal-visit-bg)} .cal-chip.k-measure[aria-pressed=true]{border-color:var(--cal-measure);color:var(--cal-measure);background:var(--cal-measure-bg)} .cal-chip.k-install[aria-pressed=true]{border-color:var(--cal-install);color:var(--cal-install);background:var(--cal-install-bg)} .cal-chip.k-as[aria-pressed=true]{border-color:var(--cal-as);color:var(--cal-as);background:var(--cal-as-bg)} .cal-chip.k-call[aria-pressed=true]{border-color:var(--cal-call);color:var(--cal-call);background:var(--cal-call-bg)} .cal-chip.k-pay[aria-pressed=true]{border-color:var(--cal-pay);color:var(--cal-pay);background:var(--cal-pay-bg)} /* 좁으면 그날 목록을 달력 아래로 */ @media (max-width:1100px){ .cal-wrap{grid-template-columns:minmax(0,1fr)} .cal-side{position:static} } @media (max-width:700px){ .cal-cell{min-height:64px;padding:3px} .cal-grid.week .cal-cell{min-height:120px} .cal-tag{font-size:10.5px;padding:0 3px} } /* 🎨 「내 고객」 진행 딱지 (2026-09-30 가맹점 요청 — 「일반 상태랑 구분하기 쉽게 · 계약 빨강 · 방문 파랑」). 다른 딱지(유형·민원·납기)와 헷갈리지 않게 **굵게** 쓰고, 계약은 **빨강으로 꽉 채워** 가장 먼저 눈에 띄게 한다. 색은 단계마다 하나씩 — 연락 전 주황 · 통화 완료 보라 · 방문 예정 파랑 · 실측 완료 청록 · 계약 빨강(채움) · 발주·시공 완료 초록 · 실패 흐린 회색. 고르는 자리는 app.js 의 진행딱지색() 하나다. */ :root{ --st-violet:#6B3FA0; --st-violet-soft:#F1EAFA; --st-violet-line:#D6C4EE; --st-teal:#1F6F73; --st-teal-soft:#E2F2F2; --st-teal-line:#B5DADB; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --st-violet:#B99AE6; --st-violet-soft:#241A33; --st-violet-line:#44305F; --st-teal:#7CC7C9; --st-teal-soft:#132628; --st-teal-line:#24474A; } } .pill.st{font-weight:600} .pill.st-new{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)} .pill.st-called{color:var(--st-violet);background:var(--st-violet-soft);border-color:var(--st-violet-line)} .pill.st-visit{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)} .pill.st-measured{color:var(--st-teal);background:var(--st-teal-soft);border-color:var(--st-teal-line)} .pill.st-contract{color:#fff;background:var(--crit);border-color:var(--crit)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill.st-contract{color:var(--ground)} } .pill.st-done{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)} .pill.st-lost{color:var(--faint);background:var(--surface-2);border-color:var(--line-2)} /* 📝 「내 고객」 목록 메모 칸 — 표 안에서 바로 적는다. 칸을 넘지 않게 폭을 묶는다. */ .listmemo{width:100%;min-width:120px;max-width:220px;font-size:12.5px;padding:4px 7px;border:1px solid var(--line); border-radius:7px;background:var(--surface);color:var(--ink)} .listmemo:focus{border-color:var(--accent)} .listmemo.saved{border-color:var(--ok-line);background:var(--ok-soft)} .listmemo.failed{border-color:var(--crit);background:var(--crit-soft)} /* ── 📋 가맹점 게시판 (2026-09-30) ───────────────────────────── 청암홈윈도우ERP 「사내 게시판」의 생김새를 옮겼다 — 왼쪽 게시판 목록 · 오른쪽 글 목록, 게시판 머리 카드 · 📌 공지 칸 · 📝 게시글 칸, 글 보기 · 댓글 · 편집기. ⚠ 색은 토큰(`--accent`·`--warn`·`--crit`)만 쓴다 — 어두운 화면에서도 같이 바뀐다. */ .bd{display:grid;grid-template-columns:224px minmax(0,1fr);gap:16px;align-items:start} .bd-side{position:sticky;top:12px} .bd-side-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13.5px;color:var(--ink-2)} .bd-plus{background:var(--accent);color:#fff;border-radius:6px;padding:0 9px;font-size:13px;font-weight:700;line-height:22px} .bd-nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px} .bd-b{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:6px 9px;border-radius:7px;font-size:13.5px;color:var(--ink-2)} .bd-b:hover{background:var(--surface-2)} .bd-b[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700} .bd-b .n{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums} .bd-bn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bd-pause{font-size:10.5px;color:var(--warn)} .bd-grp{margin:8px 0 2px;padding:7px 9px 2px;border-top:1px solid var(--line-2);font-size:11px;font-weight:800;color:var(--faint);letter-spacing:.04em} .bd-div{border:0;border-top:1px solid var(--line);margin:4px 0} .bd-main{min-width:0} .bd-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px} .bd-head h2{font-size:20px} .bd-search{position:relative;margin-bottom:12px} .bd-search input{font:inherit;font-size:14px;width:100%;padding:8px 36px 8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)} .bd-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:3px 7px;border-radius:5px;color:var(--faint)} .bd-x:hover{background:var(--surface-2)} .bd-list{padding:0;overflow:hidden} .bd-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line-2)} .bd-row:first-child{border-top:0} .bd-row:hover{background:var(--surface-2)} .bd-tag{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 8px;border-radius:5px; background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);font-size:11.5px;font-weight:600} .bd-t{display:flex;align-items:center;gap:6px;min-width:0} .bd-tt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--ink)} .bd-tt.pinned{font-weight:700;color:var(--accent)} .bd-pin{font-size:11px} .bd-new{flex:none;background:#dc2626;color:#fff;border-radius:3px;padding:1px 4px;font-size:9.5px;font-weight:800;line-height:1.3} .bd-pinb{flex:none;background:var(--accent);color:#fff;border-radius:4px;padding:1px 5px;font-size:10.5px;font-weight:700} .bd-eye{flex:none;background:var(--surface-2);border-radius:5px;padding:2px 8px;font-family:var(--mono);font-size:11px;color:var(--ink-2)} .bd-eye:hover{filter:brightness(.95)} .bd-who{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;color:var(--ink-2);white-space:nowrap} .bd-empty{padding:44px 14px;text-align:center;color:var(--muted);font-size:13.5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)} .bd-sec .bd-empty{border:0} .bd-big{font-size:30px;margin-bottom:6px} .bd-note{text-align:center;margin-top:8px} .bd-bhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px} .bd-bhead h2{font-size:20px} .bd-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .btn.bd-warnbtn{color:var(--warn);border-color:var(--warn-line)} .btn.bd-okbtn{color:var(--ok);border-color:var(--ok-line)} .bd-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px} .bd-sec.pin{border:2px solid var(--accent-line)} .bd-sech{padding:7px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-2)} .bd-sec.pin .bd-sech{background:var(--accent-soft);color:var(--accent)} .bd-prow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:10px 12px;border-top:1px solid var(--line-2)} .bd-sech + .bd-prow{border-top:0} .bd-prow:hover{background:var(--surface-2)} .bd-pl{display:flex;align-items:center;gap:6px;min-width:0} .bd-pr{display:flex;align-items:center;gap:6px;flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap} .bd-eyes{background:var(--surface-2);border-radius:4px;padding:1px 6px;font-family:var(--mono);font-size:10.5px} .bd-crumbrow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .bd-crumbend{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bd-prints{display:flex;gap:6px;margin-bottom:10px} .bd-post{max-width:880px} .bd-art{padding:0;overflow:hidden} .bd-ah{padding:14px 20px;border-bottom:1px solid var(--line)} .bd-ahrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:8px} .bd-ahl{min-width:0} .bd-title{font-size:20px;line-height:1.35} .bd-title.pinned{color:var(--accent)} .bd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px;font-size:11.5px;color:var(--muted)} .bd-body{padding:16px 20px;font-size:14.5px;line-height:1.75;overflow-wrap:anywhere} .bd-body p{margin:0 0 8px} .bd-body h1{font-size:22px;margin:14px 0 8px} .bd-body h2{font-size:18px;margin:12px 0 7px} .bd-body h3{font-size:16px;margin:10px 0 6px} .bd-body ul,.bd-body ol{margin:0 0 8px;padding-left:22px} .bd-body ul[data-todo="1"]{list-style:none;padding-left:4px} .bd-body ul[data-todo="1"] > li{position:relative;padding-left:24px} .bd-body ul[data-todo="1"] > li::before{content:"\2610";position:absolute;left:0;top:0;font-size:15px;color:var(--muted)} .bd-body ul[data-todo="1"] > li[data-checked="true"]::before{content:"\2611";color:var(--accent)} .bd-body ul[data-todo="1"] > li[data-checked="true"]{color:var(--muted);text-decoration:line-through} .bd-body blockquote{margin:0 0 10px;padding:8px 12px;border-left:3px solid var(--accent-line);background:var(--surface-2);border-radius:0 7px 7px 0} .bd-body pre{margin:0 0 10px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;overflow:auto;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap} .bd-body code{font-family:var(--mono);font-size:12.5px} .bd-body hr{border:0;border-top:1px solid var(--line);margin:16px 0} .bd-body table{border-collapse:collapse;width:100%;table-layout:fixed;margin:8px 0} .bd-body th,.bd-body td{border:1px solid var(--line);padding:6px 8px;vertical-align:top;min-width:1em} .bd-body th{background:var(--surface-2);font-weight:600} .bd-body img{max-width:100%;height:auto;border-radius:6px;cursor:zoom-in} .bd-body mark{padding:0 2px;border-radius:2px} .bd-body a{color:var(--accent);text-decoration:underline} .bd-att{padding:12px 20px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px} .bd-atth{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:6px} .bd-att ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px} .bd-att .lnk,.bd-c .lnk,.bd-flist .lnk,.bd-pickh .lnk,.bd-cact .lnk{color:var(--accent);font-size:12px} .bd-c .lnk.bad,.bd-flist .lnk.bad{color:var(--crit)} .bd-form b.bad{color:var(--crit)} .bd-cm{padding:14px 20px;border-top:1px solid var(--line)} .bd-cm.off{background:var(--surface-2);font-size:12px;color:var(--muted)} .bd-cmh{font-size:14px;font-weight:700;margin-bottom:10px} .bd-clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .bd-c{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface)} .bd-c .bd-c{margin:8px 0 0 22px;background:var(--surface-2)} .bd-ch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px} .bd-cact{margin-left:auto;display:flex;gap:8px} .bd-ctext{margin-top:4px;white-space:pre-wrap;font-size:13.5px;overflow-wrap:anywhere} .bd-cdel{margin-top:4px;font-size:12px;font-style:italic;color:var(--faint)} .bd-crow{display:flex;justify-content:flex-end;gap:6px;margin-top:5px} .bd-rbox{margin:8px 0 0 22px} .bd-cnew{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} .bd-center{text-align:center;padding:8px 0} .bd-bottom{display:flex;justify-content:center;margin:16px 0} .bd-ov{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center} .bd-ov > img{max-width:94vw;max-height:92vh;object-fit:contain} .bd-ov.col{flex-direction:column;align-items:stretch;justify-content:flex-start} .bd-ovx,.bd-ovp,.bd-ovn{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.15);color:#fff} .bd-ovx{right:16px;top:16px;width:40px;height:40px;font-size:18px} .bd-ovp,.bd-ovn{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:26px} .bd-ovp{left:12px} .bd-ovn{right:12px} .bd-ovx:hover,.bd-ovp:hover,.bd-ovn:hover{background:rgba(255,255,255,.3)} .bd-ovc{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.15);color:#fff;border-radius:99px;padding:3px 12px;font-size:12px} .bd-ovbar{display:flex;align-items:center;gap:12px;padding:8px 16px;color:#fff;font-size:13.5px} .bd-ovbar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bd-ovbar a{color:#fff;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 9px;font-size:12px;text-decoration:none} .bd-ovx2{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;text-align:center} .bd-ovbody{flex:1;min-height:0;padding:0 12px 12px;display:flex;justify-content:center} .bd-ovbody iframe{width:100%;height:100%;border:0;background:#fff;border-radius:6px} .bd-ovbody img{max-width:100%;max-height:100%;object-fit:contain} .bd-ovhint{text-align:center;color:rgba(255,255,255,.6);font-size:11.5px;padding:0 16px 8px} .bd-form{display:flex;flex-direction:column;gap:14px;max-width:880px} .bd-form h2{font-size:19px} .bd-form div.fld{display:flex;flex-direction:column;gap:5px} .bd-form div.fld > span{font-size:12.5px;color:var(--muted)} .bd-editor{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)} .bd-tools{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:5px 7px;background:var(--surface-2);border-bottom:1px solid var(--line)} .bd-tb{min-width:28px;padding:4px 7px;border-radius:5px;font-size:12px;color:var(--ink-2);text-align:center} .bd-tb:hover{background:var(--line-2)} .bd-tb.on{background:var(--accent-soft);color:var(--accent);font-weight:800} .bd-sep{display:inline-block;width:1px;height:16px;background:var(--line);margin:0 4px} .bd-tbl{display:none} .bd-tools.in-table .bd-tbl{display:inline-flex;gap:2px} .bd-pick{position:relative;display:inline-flex} .bd-pal{display:none;position:absolute;left:0;top:100%;z-index:20;gap:4px;padding:7px;background:var(--surface);border:1px solid var(--line);border-radius:7px;box-shadow:var(--shadow);width:max-content} .bd-pick:hover .bd-pal,.bd-pick:focus-within .bd-pal{display:flex} .bd-sw{width:20px;height:20px;border-radius:4px;border:1px solid var(--line)} .bd-sw:hover{transform:scale(1.1)} .bd-swx{margin-left:3px;padding:0 6px;border:1px solid var(--line);border-radius:4px;font-size:11px} .bd-upl{padding:4px 12px;font-size:11.5px;background:var(--accent-soft);color:var(--accent);border-bottom:1px solid var(--accent-line)} .bd-upl.bad{background:var(--crit-soft);color:var(--crit);border-color:var(--crit-line)} .bd-ed{min-height:280px;outline:none;cursor:text} .bd-ed img{cursor:default} .bd-ed:empty::before,.bd-ed:has(> p:only-child > br:only-child)::before{content:attr(data-ph);float:left;height:0;pointer-events:none;color:var(--faint);font-style:italic} .bd-flist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px} .bd-flist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface)} .bd-flist li.wait{background:var(--accent-soft);border-color:var(--accent-line)} .bd-opts{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--warn-line);background:var(--warn-soft);border-radius:8px} .bd-pinopt{border-top:1px solid var(--warn-line);padding-top:8px;display:flex;flex-direction:column;gap:6px} .bd-pinrow{display:flex;align-items:center;gap:8px;margin-left:22px} .bd-pinrow[hidden]{display:none} .bd-pinrow input,.modal input[type=datetime-local]{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink)} .bd-pinrow .btn[aria-pressed="true"]{background:var(--accent);color:#fff} .bd-pinrow .btn[aria-pressed="false"]{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)} .bd-formbtns{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line);padding-top:12px} .bd-box{display:flex;flex-direction:column;gap:7px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)} .bd-box.warn{border-color:var(--warn-line);background:var(--warn-soft)} .bd-box.acc{border-color:var(--accent-line);background:var(--accent-soft)} .bd-boxh{font-size:12.5px;font-weight:800;color:var(--ink-2)} .bd-radio{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);cursor:pointer} .bd-radio input{margin-top:4px} .bd-radio > span{display:flex;flex-direction:column;font-size:13.5px} .bd-radio:has(input:checked){border-color:var(--accent);background:var(--accent-soft)} .bd-pickh{display:flex;align-items:center;gap:10px} .bd-picklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px;max-height:240px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:7px} .bd-line{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)} @media (max-width:860px){ .bd{grid-template-columns:minmax(0,1fr)} .bd-side{position:static} .bd-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px} .bd-row .bd-tag{grid-column:1 / -1;justify-self:start} .bd-row .bd-eye{display:none} } /* 인쇄 — 글만(「🖨 댓글 포함 인쇄」면 댓글까지). 메뉴·단추는 위 보고서 인쇄 규칙이 이미 감춘다. */ @media print{ .bd-noprint,.bd-ov{display:none !important} html.bd-printing .bd-comments{display:none !important} html.bd-printing.bd-print-comments .bd-comments{display:block !important} .bd-art{border:0} .bd-body,.bd-ah,.bd-cm{padding-left:0;padding-right:0} } /* 📋 계약 진행 단계 (2026-10-02) — 계약서 줄을 누르면 그 아래로 펼친다 */ tr.ctrow{cursor:pointer} tr.ctrow:hover td,tr.ctrow.open td{background:var(--accent-soft)} tr.ctrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} tr.ctrow.open td{border-bottom-color:transparent} .ctcaret{color:var(--muted);font-size:13px} tr.ctx > td{background:var(--accent-soft);padding:6px 14px 14px;border-left:3px solid var(--accent)} .ctdots{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:4px 0 10px;font-size:12.5px;color:var(--faint)} .ctdot.on{color:var(--ink-2)} .ctdot.now{color:var(--accent);font-weight:700} .ctbar{color:var(--line)} tr.ctx .rowline .k{flex:0 0 112px} tr.ctx .rowline .v{text-align:left;flex:1;font-family:inherit;font-weight:400} /* ✉ 열린 발주수정요청 딱지 (2026-10-16 지시 — 「너무 눈에 안 띄는데?」) — 옅은 알약 대신 진한 바탕 · 흰 글씨 · 굵게. 접수 = 진한 주황 · 처리 중 = 진한 파랑 · 기한 지남 = 진한 빨강(+ «⛔ 기한 지남» 글자 — 색만으로 안 가른다). 흰 글씨와 대비가 4.5:1 넘는 바탕만 쓴다 — 다크 모드도 같은 바탕이고, 어두운 땅과 갈리게 테두리를 한 줄 더한다. PC 대장 · 휴대폰 대장 · 요약 카드 「✉ 열린 요청」이 같은 토큰을 쓴다. */ :root{ --req-open:#B9420B; --req-doing:#1D4ED8; --req-overdue:#B91C1C; --req-ink:#FFFFFF; --req-ring:transparent; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --req-ring:rgba(255,255,255,.35); } } .reqbadge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:10px;font-size:13.5px;font-weight:700; line-height:1.35;color:var(--req-ink);background:var(--req-open);border:1px solid var(--req-ring);cursor:pointer;white-space:normal;text-align:left} .reqbadge.doing{background:var(--req-doing)} .reqbadge.overdue{background:var(--req-overdue)} .reqbadge:hover{filter:brightness(1.08)} .reqbadge:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .btn.reqhot,.pill.reqhot{color:var(--req-ink);background:var(--req-open);border-color:var(--req-ring);font-weight:700} /* ── 🚚 최종 발주관리 대장 정리 (2026-10-18) — 가맹점별 요약 · 정리할 일 · 종이 나란히 · 본사 비교 ── */ .opsum{max-height:300px;overflow:auto;margin-bottom:10px} .opsum table{width:100%;font-variant-numeric:tabular-nums} .opsum th,.opsum td{padding:6px 9px;white-space:nowrap} .opsum tr[data-opsum]{cursor:pointer} .opsum tr[data-opsum]:hover td{background:var(--surface-2)} .opsum tr.on td{background:var(--accent-soft)} .opsum tr.on td:first-child{box-shadow:inset 3px 0 0 var(--role)} .optidy>summary,.oplegend>summary{cursor:pointer;font-weight:700;padding:2px 0} .optidy .tidyhead{margin:12px 0 6px;font-size:14px} /* 🎯 «청암에만 있는 발주»의 ⚠ 중복 의심을 누르면 대장의 그 줄에 빨간 테두리 + 설명 (2026-10-26) */ tr.dupmark>td{background:var(--crit-soft);border-top:2px solid var(--crit);border-bottom:2px solid var(--crit)} tr.dupmark>td:first-child{border-left:2px solid var(--crit)} tr.dupmark>td:last-child{border-right:2px solid var(--crit)} tr.dupwhy>td{padding:0 0 10px;border-top:0} .dupwhybox{border:2px solid var(--crit);border-top:0;border-radius:0 0 10px 10px;background:var(--crit-soft);padding:10px 12px;white-space:normal;color:var(--ink)} .docpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .docpair .paperbox{background:#e5e7eb;padding:8px;border-radius:6px;max-height:72vh;overflow:auto} .docpair .paperbox img,.docone img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)} .docone{max-width:1000px;margin:0 auto;background:#e5e7eb;padding:8px;border-radius:6px;max-height:72vh;overflow:auto} @media (max-width:1100px){.docpair{grid-template-columns:1fr}} .cmpheads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0 10px} .cmphead{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px} .cmphead.a{background:var(--accent-soft);border-color:var(--accent-line)} .cmphead.c{background:var(--warn-soft);border-color:var(--warn-line)} .cmphead > b{display:block;font-size:14px;margin-bottom:4px} .cmpwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;max-height:58vh} .cmptbl{border-collapse:collapse;width:100%;min-width:1100px;font-size:13px;font-variant-numeric:tabular-nums} .cmptbl th,.cmptbl td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top} .cmptbl thead th{position:sticky;top:0;background:var(--surface);text-align:left;white-space:nowrap;z-index:1} .cmptbl thead tr:nth-child(2) th{top:31px} .cmptbl th.grp{text-align:center} .cmptbl th.grp.a{background:var(--accent-soft);color:var(--accent)} .cmptbl th.grp.c{background:var(--warn-soft);color:var(--warn)} .cmptbl .r{text-align:right} .cmptbl .sepA{border-left:3px solid var(--accent)} .cmptbl .sepC{border-left:3px solid var(--warn)} .cmptbl .pn{font-weight:600} .cmptbl .pn small{display:block;font-weight:500;color:var(--ink-2);font-size:12px} .cmptbl .diff{background:var(--warn-soft);color:var(--warn);font-weight:700} .cmptbl .add{background:var(--ok-soft);color:var(--ok);font-weight:700} .cmptbl .drop{background:var(--crit-soft);color:var(--crit);font-weight:700} .cmptbl .none{color:var(--muted);font-style:italic} .cmptbl tr.frt td{background:var(--surface-2)} .cmptbl tfoot td{font-weight:700;border-top:2px solid var(--role)} .cmpsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px} .cmpsum .c{border:1px solid var(--line);border-radius:10px;padding:10px 12px} .cmpsum .big{font-size:18px;font-weight:700} @media (max-width:900px){.cmpheads{grid-template-columns:1fr}} .cmptbl td.num,.cmptbl td.r{white-space:nowrap} /* 💰 기준 대비 펼침 표 — 세 파트(출고기준 · 발주결제 · 본사 마진) 배경색 · 공급가|부가세 한 줄 · 운임비 적자/이익 (2026-10-21) */ .opm{display:grid;gap:4px;margin:4px 0;font-size:12px;min-width:220px} .opm-part{border-radius:6px;padding:4px 8px} .opm-part>b{display:block;font-size:11.5px;margin-bottom:2px} .opm-part.a{background:var(--accent-soft);color:var(--accent)} .opm-part.b{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)} .opm-part.c{background:var(--ok-soft);color:var(--ok)} .opm-row,.opm-two{display:flex;justify-content:space-between;gap:8px;white-space:nowrap;line-height:1.6;font-variant-numeric:tabular-nums} .opm-row.tot{font-weight:600} .opm-row.eq,.opm-two{border-top:1px solid var(--line);margin-top:2px;padding-top:1px} .opm-two i{font-style:normal;font-size:10.5px;opacity:.75;margin-right:3px} .opm-bar{opacity:.45} .opm-sub{border-top:1px dashed var(--line);margin-top:3px;padding-top:1px;font-size:11.5px} /* 📦 합적 묶음 줄 아래 — 발주마다 ✏ (2026-10-22) */ .opmhap>td{padding-top:0;border-top:0} .opmhap summary{cursor:pointer;color:var(--muted)} .opmhap-in{margin:3px 0 4px} .opmhap-row{display:flex;gap:8px;align-items:center;padding:3px 0;font-size:12px} .opmhap-row+.opmhap-row{border-top:1px solid var(--line-2)} .opmhap-who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 🏠 현장별 마진 보기 — 음수(손해)만 붉게 (2026-10-22) */ .opmneg{color:var(--crit);font-weight:600} .tiny.opmneg{font-weight:500} /* ⏳ 아직 안 빠진 돈 · ㉮ 기록만 — 순이익을 안 바꾸는 «보여 주기» 줄 (2026-10-22) */ .opmwait{color:var(--warn)} .opm-frt{display:flex;justify-content:space-between;gap:8px;margin-top:3px;padding:2px 6px;border-radius:4px;font-weight:600;white-space:nowrap} .opm-frt.bad{background:var(--crit-soft);color:var(--crit);border:1px solid var(--crit-line)} .opm-frt.ok{background:var(--surface);color:var(--ok);border:1px solid var(--ok-line)} /* 🔎 찾기 줄 — 찾기 칸이 없던 화면 일곱 곳 (2026-10-26 · app.js 「찾기 줄」 머리말) ⚠ 걸러진 줄은 `hidden` 으로 감춥니다. `.brpick{display:flex}` 처럼 화면이 display 를 정한 줄은 그것이 `hidden` 을 이기므로 여기서 한 번 더 못박습니다. */ [data-fz][hidden], .fzchip[hidden], .fzchips[hidden], .fzempty[hidden] { display:none !important } .fzbar { display:flex; flex-direction:column; gap:7px; margin:0 0 12px } .fzq { width:100%; max-width:420px } .fzchip[aria-pressed=true] { background:var(--role); color:var(--role-ink, #fff); border-color:var(--role); font-weight:600 } .fzempty { padding:10px 12px; border:1px dashed var(--line); border-radius:8px; color:var(--muted); font-size:13px } /* 🪜 개선요청 진행 단계 띠 (2026-10-28 지시 — 「내비게이션 바처럼 한 줄로 … 단계별로 넘어가는 것처럼」). 판정은 서버(`lib/ireq.mjs` 의 `진행단계`)가 보낸 칸 상태(done·now·me·stop·wait)를 그리기만 한다. «내 차례»(me)는 경고 색 — 눈이 먼저 가야 하는 칸이다. */ .irq-steps{display:flex;overflow-x:auto;padding:2px 2px 4px;margin:4px 0 2px} .irq-steps .st{flex:1 1 0;min-width:84px;position:relative;text-align:center;padding-top:30px} .irq-steps .st::before{content:"";position:absolute;top:12px;left:-50%;right:50%;height:3px;background:var(--line)} .irq-steps .st:first-child::before{display:none} .irq-steps .dot{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%; background:var(--surface);border:3px solid var(--line);display:grid;place-items:center;font:700 12px/1 var(--body);color:var(--faint);z-index:1} .irq-steps .nm{font-weight:700;font-size:13.5px;color:var(--ink-2)} .irq-steps .who{font-size:11.5px;color:var(--faint)} .irq-steps .done::before,.irq-steps .now::before,.irq-steps .me::before,.irq-steps .stop::before{background:var(--ok)} .irq-steps .done .dot{background:var(--ok);border-color:var(--ok);color:#fff} .irq-steps .now .dot{border-color:var(--accent);color:var(--accent)} .irq-steps .now .nm{color:var(--accent)} .irq-steps .me .dot{background:var(--warn);border-color:var(--warn);color:#fff} .irq-steps .me .nm{color:var(--warn)} .irq-steps .stop .dot{background:var(--crit);border-color:var(--crit);color:#fff} .irq-steps .stop .nm{color:var(--crit)} .irq-turn{margin:10px 0 12px;border-radius:10px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between} .irq-turn > div:first-child{flex:1 1 300px;min-width:0} .irq-turn.me{background:var(--warn-soft);border:1px solid var(--warn-line)} .irq-turn.stop{background:var(--crit-soft);border:1px solid var(--crit-line)} .irq-turn.ai,.irq-turn.wait{background:var(--accent-soft);border:1px solid var(--accent-line)} .irq-turn.end{background:var(--surface-2);border:1px solid var(--line)} .irq-turn .btns{display:flex;gap:6px;flex-wrap:wrap} .irq-mini{display:inline-flex;gap:3px;vertical-align:middle} .irq-mini i{width:14px;height:5px;border-radius:3px;background:var(--line);display:block} .irq-mini i.done{background:var(--ok)} .irq-mini i.now{background:var(--accent)} .irq-mini i.me{background:var(--warn)} .irq-mini i.stop{background:var(--crit)} @media (max-width:520px){.irq-steps .st{min-width:52px}.irq-steps .nm{font-size:12px}.irq-steps .who{display:none}} /* 🗺 가맹점 판 — 운영 대시보드 아래 (2026-10-31) */ .bb{margin-top:22px} .bbhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px} .bbhead h3{margin:0 6px 0 0} .bbtop{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;margin-bottom:12px} @media (max-width:1100px){.bbtop{grid-template-columns:minmax(0,1fr)}} .bbmap{padding:10px} .bbmaptools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px} .bbside{display:flex;flex-direction:column;gap:10px;min-width:0} .bbkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px} .bbkpis .kpi{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)} .bbkpis .kpi .n{font-family:var(--display);font-weight:800;font-size:19px} .bbal{display:flex;flex-direction:column;gap:5px} .bbalb{text-align:left;font-size:12.5px;padding:6px 9px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer} .bbalb.crit{border-color:var(--crit-line);background:var(--crit-soft);color:var(--crit)} .bbalb.warn{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)} .bbalb[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px} .bbfind{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.6} .bbtbl table{font-size:13px} .bbtbl th,.bbtbl td{padding:6px 8px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap} .bbtbl th.l,.bbtbl td.l{text-align:left;white-space:normal;min-width:140px} .bbtbl th{background:var(--surface-2);font-weight:600;color:var(--muted);font-size:12px} .bbtbl th.bbg{text-align:center;color:var(--ink-2);border-bottom:2px solid var(--line)} .bbtbl th.bbg.db{border-bottom-color:var(--accent)} .bbtbl th.bbg.sale{border-bottom-color:var(--ok)} .bbtbl th.bbg.ct{border-bottom-color:var(--st-violet)} .bbtbl th.bbg.money{border-bottom-color:var(--warn)} /* 📐 큰 항목(🎯 DB 구매 · 📦 발주 매출 · 📝 계약서 · 💰 잔액) 사이 세로 금. 묶음의 «첫 칸»에 붙는다 — 머리 띠의 colspan 이 가르는 자리와 같다. 머리 띠 칸에도 붙여 위아래가 한 줄로 이어진다. */ .bbtbl th.bbcut,.bbtbl td.bbcut,.bbtbl th.bbg{border-left:2px solid var(--line)} /* 🎁 DB 구매 금액 아래 «그중 무상» 한 줄 — 금액이 정본이고 이것은 곁들임이라 흐리게 */ .bbfree{color:var(--muted);font-weight:400;margin-top:1px} .bbsort{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer} .bbr{cursor:pointer} .bbr:hover td{background:var(--surface-2)} .bbr.on td{background:var(--role-soft)} .bbr.on td:first-child{box-shadow:inset 3px 0 0 var(--role)} .bbgrp td{background:var(--surface-2);color:var(--muted);font-size:12px;text-align:left !important} .bbtot td{font-weight:700;border-top:2px solid var(--line)} .bbno{display:inline-block;min-width:24px;padding:1px 6px;border-radius:5px;background:var(--role);color:var(--role-ink);font:700 12px var(--mono);text-align:center} .bbno.idle{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)} .bbmemo{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bbdetail{margin:12px 0} .bbboxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px} .bbbox{padding:11px 13px} .bbseat{margin:14px 0 10px} .bbseat td,.bbseat th{padding:6px 8px;border-bottom:1px solid var(--line-2);font-size:12.5px;vertical-align:top} .bbneed .pill{margin:1px 0} .bbage.w{color:var(--warn);font-weight:700} .bbage.b{color:var(--crit);font-weight:700} .bbflag{cursor:pointer} .bbflag line{stroke:var(--ink);stroke-width:1.6} .bbflag circle{fill:var(--ink)} .bbflag rect{fill:var(--role)} .bbflag.idle rect{fill:var(--muted)} .bbflag text{fill:var(--role-ink);font:700 12px var(--mono);text-anchor:middle;dominant-baseline:central;pointer-events:none} .bbflag.wish rect{fill:var(--surface);stroke:var(--muted);stroke-width:1.6;stroke-dasharray:3 2} .bbflag.wish text{fill:var(--muted)} .bbflag.on rect{stroke:var(--ink);stroke-width:2.2} .bbbox table.mini td.num{white-space:nowrap} /* ════════════════════════════════════════════════════════════ 🚚 발주 단계 띠 — 건마다 한 줄, 한 현장이 사각형 하나 (2026-11-01 지시자) 「각 줄의 위에 한 줄로 … 각 현장별로 확인이 용이하게」 · 「한 현장이 표이지만 선이 분명해야」 ⚠ 단계 넷은 «폭 고정 격자»다 — 글자가 길어도 뒤 단계가 밀리지 않아 세로로 훑을 수 있다. ⚠ 아이콘은 지우지 않는다 — 상태는 테두리·바탕 색으로 말한다(지난 칸엔 작은 ✓ 를 겹친다). */ .oplist tr.opband > td { background: var(--line-2, #f1f3f6); padding: 7px 10px; border-top: 2px solid var(--ink-3, #8b96a4); } .oplist tr.opband.is-bad > td { background: #fdeef1; } .oplist tr.opband.is-warn > td { background: #fdf3e6; } .oplist tr.opband.is-pale > td { opacity: .55; } .oplist tr.opband > td, .oplist tr.oprow > td:first-child { border-left: 4px solid #16a34a; } .oplist tr.opband.is-bad > td, .oplist tr.oprow.is-bad > td:first-child { border-left-color: #dc2626; } .oplist tr.opband.is-warn > td, .oplist tr.oprow.is-warn > td:first-child { border-left-color: #b45309; } .oplist tr.opband.is-mut > td, .oplist tr.oprow.is-mut > td:first-child { border-left-color: #94a3b8; } .oplist tr.oprow > td { border-bottom: 2px solid var(--ink-3, #8b96a4); } .oplist tr.oprow > td:last-child, .oplist tr.opband > td { border-right: 2px solid var(--ink-3, #8b96a4); } .oplist tr.opgap > td { padding: 0; height: 10px; border: 0; background: transparent; } .opbandin { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; justify-content: space-between; } .opbandsite { font-size: 13px; color: #4a5360; white-space: nowrap; } .opbandsite b { font-size: 14px; } /* 단계 사슬 — 4칸 고정. 칸 안 오른쪽에 선과 화살촉을 그려 폭이 흔들리지 않게 한다 */ .opchain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; flex: 1 1 440px; min-width: 300px; } .opchain .ost { position: relative; display: flex; align-items: flex-start; gap: 6px; padding-right: 24px; min-width: 0; } .opchain .ost::after { content: ""; position: absolute; right: 10px; top: 10px; width: 11px; height: 2px; background: #cbd5e1; } .opchain .ost::before { content: ""; position: absolute; right: 3px; top: 6px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #cbd5e1; } .opchain .ost:last-child { padding-right: 0; } /* 2026-11-09 — 단계 확인 도장 단추. 띠 칸 «아래»에 한 줄로 붙는다(글자 밑) */ .opchain .ostchk { display: block; margin-top: 3px; padding: 1px 5px; font-size: 11px; line-height: 1.5; white-space: nowrap; } .opchain .ostchk.on { color: #166534; border-color: #86efac; background: #f0fdf4; } .opchain .ost:last-child::after, .opchain .ost:last-child::before { display: none; } .opchain .ost.done::after { background: #16a34a; height: 3px; top: 9.5px; } .opchain .ost.done::before { border-left-color: #16a34a; } .opchain .ost.stop::after { background: #dc2626; height: 3px; top: 9.5px; } .opchain .ost.stop::before { border-left-color: #dc2626; } .opchain .ost.skip::after { background: transparent; border-top: 2px dashed #cbd5e1; height: 0; } .opchain .ost.skip::before { opacity: .35; } .opchain .ost > b { position: relative; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; flex: 0 0 auto; background: #fff; border: 2px solid #cbd5e1; font-weight: 400; } .opchain .ost > span { font-size: 12.5px; color: #7b8694; line-height: 1.35; min-width: 0; white-space: normal; word-break: keep-all; padding-top: 2px; } .opchain .ost > span i { display: block; font-style: normal; font-size: 11px; margin-top: 3px; color: #6b7482; font-variant-numeric: tabular-nums; } .opchain .ost.done > b { background: #e7f4ec; border-color: #16a34a; } .opchain .ost.done > b::after { content: "✓"; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; } .opchain .ost.done > span { color: #4a5360; } .opchain .ost.now > b { border-color: #2563eb; box-shadow: 0 0 0 3px #e8eff6; } .opchain .ost.now > span { color: #2563eb; font-weight: 700; } .opchain .ost:not(.done):not(.now):not(.skip) > b { opacity: .45; } .opchain .ost.skip > b { border-style: dashed; background: transparent; opacity: .4; } /* 📵 좁은 화면 — 단계 이름은 «지금» 칸만 남기고 아이콘으로 줄인다(폭을 안 뺏는다) */ @media (max-width:760px){ .opchain { flex-basis: auto; min-width: 0; } .opchain .ost > span { display: none; } .opchain .ost.now > span { display: block; } } /* 📱 휴대폰 카드 안의 띠 — 카드 머리 아래 한 줄. 지금 칸만 글자가 남는다(`mobile.js` 의 `폰단계띠`) */ .opchain.phone { display: flex; gap: 0; margin: 8px 0 2px; flex: none; min-width: 0; width: 100%; } .opchain.phone .ost { flex: 1 1 0; padding-right: 18px; } .opchain.phone .ost > span { display: block; font-size: 12px; } .opchain.phone.is-pale { opacity: .55; }