/* ========================================================================= 이지판매재고관리 Web 데모 — 리본 워크벤치 (Design A) 정본: 작업계획/데모_생성_프롬프트_리본워크벤치.md ========================================================================= */ :root { --ink: #1b1f24; --ink-soft: #3c4450; --muted: #5b6470; --muted-2: #8a92a0; --canvas: #eef0f2; --surface: #ffffff; --surface-2: #f3f4f6; --line: #c9ced4; --line-soft: #dde1e5; --row-hover: #eaecef; --row-hover-click: #eff5fb; --row-sel: #dce8f7; --accent: #2b5faa; --accent-ink: #ffffff; --accent-soft: #dce8f7; --accent-strong: #1d477f; --ribbon: #f9fafb; --statusbar: #20242b; --statusbar-ink: #c7ccd4; --success: #1b8a4c; --success-soft: #dcf0e3; --warning: #b06a00; --warning-soft: #f7e7cf; --danger: #c23a2e; --danger-soft: #f8dfdc; /* 카테고리(고정 유형) 색 — 상태색(success/warning/danger)·강조색(accent)과는 별개 팔레트. accent는 행 선택(tr.sel) 배경에도 쓰이므로, 유형 칩에 accent를 재사용하면 선택 시 칩이 묻힌다. 거래처구분/전표유형처럼 "고정된 정체성"을 나타내는 칩은 반드시 이 cat-* 토큰만 쓴다. */ --cat-sale: #0d7d6e; --cat-sale-soft: #d9f2ee; --cat-purchase: #a15c00; --cat-purchase-soft: #f6e6cf; --cat-both: #6b3fa0; --cat-both-soft: #ece2f7; --cat-customer: #4a5a8a; --cat-customer-soft: #e4e7f4; --cat-settings: #a83a6b; --cat-settings-soft: #f6dfea; --grid-head: #f1f3f4; --grid-line: #e1e3e6; --radius-sm: 3px; --radius: 5px; --font-kr: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --ink: #e3e6ea; --ink-soft: #c1c7d0; --muted: #8a92a0; --muted-2: #5b6470; --canvas: #16181c; --surface: #1e2126; --surface-2: #2c2f36; --line: #383c43; --line-soft: #2c2f35; --row-hover: #383d46; --row-hover-click: #2a3d5c; --row-sel: #36527f; --accent: #5a92dd; --accent-ink: #0c1420; --accent-soft: #22344c; --accent-strong: #82b0f0; --ribbon: #20232a; --statusbar: #0d0f12; --statusbar-ink: #9aa1ab; --success: #3fbd7a; --success-soft: #123322; --warning: #dfa04a; --warning-soft: #332510; --danger: #e8756a; --danger-soft: #331a17; --cat-sale: #4fd6c0; --cat-sale-soft: #113330; --cat-purchase: #e2a94f; --cat-purchase-soft: #332510; --cat-both: #b48be0; --cat-both-soft: #2a2038; --cat-customer: #96a6e0; --cat-customer-soft: #232a42; --cat-settings: #dd8bb4; --cat-settings-soft: #33202a; --grid-head: #1b2229; --grid-line: #2a323b; } } :root[data-theme="dark"] { --ink: #e3e6ea; --ink-soft: #c1c7d0; --muted: #8a92a0; --muted-2: #5b6470; --canvas: #16181c; --surface: #1e2126; --surface-2: #2c2f36; --line: #383c43; --line-soft: #2c2f35; --row-hover: #383d46; --row-hover-click: #2a3d5c; --row-sel: #36527f; --accent: #5a92dd; --accent-ink: #0c1420; --accent-soft: #22344c; --accent-strong: #82b0f0; --ribbon: #20232a; --statusbar: #0d0f12; --statusbar-ink: #9aa1ab; --success: #3fbd7a; --success-soft: #123322; --warning: #dfa04a; --warning-soft: #332510; --danger: #e8756a; --danger-soft: #331a17; --cat-sale: #4fd6c0; --cat-sale-soft: #113330; --cat-purchase: #e2a94f; --cat-purchase-soft: #332510; --cat-both: #b48be0; --cat-both-soft: #2a2038; --cat-customer: #96a6e0; --cat-customer-soft: #232a42; --cat-settings: #dd8bb4; --cat-settings-soft: #33202a; --grid-head: #1b2229; --grid-line: #2a323b; } :root[data-theme="light"] { --ink: #1b1f24; --ink-soft: #3c4450; --muted: #5b6470; --muted-2: #8a92a0; --canvas: #eef0f2; --surface: #ffffff; --surface-2: #f3f4f6; --line: #c9ced4; --line-soft: #dde1e5; --row-hover: #eaecef; --row-hover-click: #eff5fb; --row-sel: #dce8f7; --accent: #2b5faa; --accent-ink: #ffffff; --accent-soft: #dce8f7; --accent-strong: #1d477f; --ribbon: #f9fafb; --statusbar: #20242b; --statusbar-ink: #c7ccd4; --success: #1b8a4c; --success-soft: #dcf0e3; --warning: #b06a00; --warning-soft: #f7e7cf; --danger: #c23a2e; --danger-soft: #f8dfdc; --cat-sale: #0d7d6e; --cat-sale-soft: #d9f2ee; --cat-purchase: #a15c00; --cat-purchase-soft: #f6e6cf; --cat-both: #6b3fa0; --cat-both-soft: #ece2f7; --cat-customer: #4a5a8a; --cat-customer-soft: #e4e7f4; --cat-settings: #a83a6b; --cat-settings-soft: #f6dfea; --grid-head: #f1f3f4; --grid-line: #e1e3e6; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-kr); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .num { font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } button, input, select { font-family: inherit; } svg { display: block; } svg.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .rbtn svg.ic { stroke-width: 1.8; } /* ---------- 앱 셸(전체 창) ---------- */ .shell { display: flex; flex-direction: column; height: 100vh; background: var(--surface); } /* ---------- 명령 검색 ---------- */ .cmdsearch { position: relative; display: flex; justify-content: center; align-items: center; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; } .cmdsearch-box { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 380px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); padding: 6px 10px; transition: border-color .15s, box-shadow .15s; } .cmdsearch-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .cmdsearch-box svg { width: 15px; height: 15px; color: var(--muted-2); flex: none; } .cmdsearch-box input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 12.5px; color: var(--ink); } .cmdsearch-box input::placeholder { color: var(--muted-2); } .cmdsearch-box kbd { font-family: inherit; font-size: 10px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; line-height: 1; flex: none; } .cmdsearch-results { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); width: 100%; max-width: 380px; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 14px 30px -14px rgba(15, 18, 22, .35); max-height: 320px; overflow-y: auto; display: none; } .cmdsearch-results.show { display: block; } .cmdsearch-results .item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; font-size: 12.5px; } .cmdsearch-results .item:hover, .cmdsearch-results .item.hi { background: var(--accent-soft); } .cmdsearch-results .item svg.mic { width: 14px; height: 14px; color: var(--muted); flex: none; } .cmdsearch-results .item b { color: var(--ink); font-weight: 600; } .cmdsearch-results .item span.desc { color: var(--muted); font-size: 11px; margin-left: auto; flex: none; white-space: nowrap; padding-left: 10px; } .cmdsearch-results .empty { padding: 14px 10px; text-align: center; font-size: 12px; color: var(--muted-2); } .fav-star-btn { flex: none; appearance: none; border: none; background: none; padding: 2px; cursor: pointer; color: var(--muted-2); display: flex; } .fav-star-btn svg { width: 14px; height: 14px; } .fav-star-btn.on { color: #d99a1b; } .fav-star-btn.on svg { fill: #d99a1b; } .theme-toggle { appearance: none; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); flex: none; } /* 우측 상단 빠른 버튼(문자발송/팩스전송/환경설정/메뉴얼 + 테마 토글) */ .top-actions { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; } .top-act { appearance: none; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-soft); font-family: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .top-act:hover { background: var(--surface-2); } .top-act svg.ic { width: 14px; height: 14px; } /* 우측 상단 버튼 색 — 아이콘만 착색하면 티가 안 나서(2026-08-05) 칩 스타일로 강화: soft 배경 + 진한 글자·아이콘 + 살짝 착색된 보더. 환경설정은 설정 문서탭과 동일한 --cat-settings. */ .top-act.tint { background: var(--ta-soft); color: var(--ta-ink); border-color: color-mix(in srgb, var(--ta-ink) 28%, var(--line)); } .top-act.tint:hover { background: color-mix(in srgb, var(--ta-ink) 16%, var(--surface)); } /* 내보내기 파일(작업계획/40) — 만드는 중·새 파일 수. 만드는 중이면 숫자가 깜빡인다 */ .top-act .ta-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-strong, var(--ta-ink)); color: #fff; font-size: 10px; line-height: 16px; text-align: center; } .top-act.busy .ta-count { animation: ta-pulse 1.2s ease-in-out infinite; } @keyframes ta-pulse { 50% { opacity: .45; } } #taSms { --ta-ink: var(--success); --ta-soft: var(--success-soft); } #taFax { --ta-ink: var(--cat-purchase); --ta-soft: var(--cat-purchase-soft); } #taSettings { --ta-ink: var(--cat-settings); --ta-soft: var(--cat-settings-soft); } #taHelp { --ta-ink: var(--cat-both); --ta-soft: var(--cat-both-soft); } #taApi { --ta-ink: var(--cat-customer); --ta-soft: var(--cat-customer-soft); } #taApi.on { --ta-ink: var(--success); --ta-soft: var(--success-soft); } /* 실 API 연결 중 = 초록 */ /* 실 API 값 표시 배지(P3-1) + 다이얼로그 보조 텍스트 */ .live-badge { font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 3px; background: var(--success-soft); color: var(--success); vertical-align: 1px; } .hint { font-size: 11px; color: var(--muted); } .ok-text { color: var(--success); } .err-text { font-size: 11.5px; color: var(--danger); } /* 도움말 드롭다운 — 링크 2개(원격지원/홈페이지) + 고객지원 정보 */ .helpmenu { min-width: 230px; } .helpmenu .hm-link { display: flex; align-items: center; gap: 8px; width: 100%; appearance: none; border: none; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 7px 9px; cursor: pointer; text-align: left; border-radius: 3px; } .helpmenu .hm-link:hover { background: var(--surface-2); } .helpmenu .hm-link svg.ic { width: 14px; height: 14px; color: var(--cat-both); } .helpmenu .hm-link span { flex: 1; } .helpmenu .hm-link svg.ic.ext { width: 11px; height: 11px; color: var(--muted-2); } .helpmenu .hm-sep { border-top: 1px solid var(--line-soft); margin: 6px 4px; } .helpmenu .hm-info { padding: 2px 9px 6px; } .helpmenu .hm-info .r { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; padding: 3px 0; } .helpmenu .hm-info .r span { color: var(--muted); } .helpmenu .hm-info .r b { color: var(--ink); font-weight: 600; text-align: right; } @media (max-width: 1280px) { .top-act span { display: none; } .top-act { padding: 0 7px; } } /* 좁은 폭: 아이콘만(가운데 검색과 겹침 방지) */ /* 왼쪽 위 모서리 = 사이드바의 머리(2026-10-21). 폭·바탕·오른쪽 선을 사이드바와 **같은 값**으로 — 메뉴 기둥이 맨 위까지 이어진다. `bottom:-1px` 로 상단바 밑줄을 덮어 사이드바와 끊김 없이 붙는다. ⭐ 펼침: [로고·이름 ……… 접기 버튼] — 사용자 「펼쳐져 있는 상태에서 접는 버튼 위치는 오른쪽으로」(2026-10-21). 로고 가운데 = 메뉴 아이콘 세로줄(왼쪽에서 22px) · 접기 버튼 가운데 = **오른쪽에서 22px**(좌우 대칭). ⚠ 그룹 머리의 › 에 맞추지 않았다 — 그 자리는 메뉴 스크롤바(15px)가 있을 때와 없을 때 움직인다(178 ↔ 193). ⭐ 접힘: 버튼 하나만 메뉴 아이콘 세로줄(52 − 오른쪽 선 1 = 51 의 가운데 25.5)에. 로고는 상단바로 비켜선다. */ .sn-corner { position: absolute; left: 0; top: 0; bottom: -1px; z-index: 1; width: var(--sn-w); display: flex; align-items: center; padding: 0 7px 0 11px; background: var(--surface-2); border-right: 1px solid var(--line); transition: width .15s ease, padding .15s ease; } .sn-corner .brand { order: -1; } .shell.sn-rail .sn-corner { width: var(--sn-rail-w); padding: 0 0 0 10.5px; } /* 메뉴 줄과 같은 모양 — 테두리 없이, 올리면 메뉴 줄처럼 밝아진다(`.sn-head:hover`). */ .nav-toggle { margin-left: auto; flex: none; appearance: none; border: none; background: none; border-radius: var(--radius-sm); width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); transition: background .12s, color .12s; } .nav-toggle:hover { background: var(--surface); color: var(--accent-strong); } .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .nav-toggle svg.ic { width: 18px; height: 18px; stroke-width: 1.5; } /* 창·기둥·화살표 셋이라 메뉴 아이콘보다 한 치수 크게 */ .brand { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; } /* 접히면 모서리가 52px 라 로고가 들어가지 않는다 — 모서리 바로 오른쪽(상단바)으로 비켜선다. */ .shell.sn-rail .nav-toggle { margin-left: 0; } .shell.sn-rail .brand { position: absolute; left: calc(var(--sn-rail-w) + 12px); top: 50%; transform: translateY(-50%); } .brand .mark-ico { width: 22px; height: 22px; flex: none; border-radius: 5px; } .brand b { font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; } .theme-toggle:hover { background: var(--surface-2); } .theme-toggle svg { width: 15px; height: 15px; } /* ---------- 사이드바(전체 메뉴 트리 — 13_사이드바_계획 §2) ---------- */ .shell-mid { flex: 1; display: flex; min-height: 0; } .shell-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .shell { --sn-w: 216px; --sn-rail-w: 52px; } /* 사이드바 폭 — 위 모서리(.sn-corner)와 **한 곳에서** 맞춘다 */ .sidenav { width: var(--sn-w); flex: none; background: var(--surface-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; transition: width .15s ease; } .sidenav.rail { width: var(--sn-rail-w); } /* 메뉴는 스크롤하고 배너는 맨 아래에 붙어 있는다(2026-10-14). */ .sn-menu { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 0; } .sn-banner { flex: none; padding: 8px; border-top: 1px solid var(--line); } .sidenav.rail .sn-banner { display: none; } /* 접으면 너비가 모자란다 */ /* 배너 — 색은 테마와 상관없이 같은 브랜드 그라데이션(흰 글씨). 장은 겹쳐 두고 켜진 장만 보인다. */ .bn-track { position: relative; height: 70px; border-radius: 8px; overflow: hidden; } .bn-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 24px 10px 12px; color: #fff; text-decoration: none; opacity: 0; transform: translateX(14px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; } .bn-slide.on { opacity: 1; transform: none; pointer-events: auto; } .bn-slide b { font-size: 12.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; word-break: keep-all; } /* 한글을 낱자로 끊지 않는다(「발행/을」) */ .bn-slide span { font-size: 11px; opacity: .88; } .bn-slide .bn-go { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 18px; opacity: .8; } .bn-slide:hover .bn-go { opacity: 1; } .bn-slide:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .bn-blue { background: linear-gradient(135deg, #2f6cc0, #1d477f); } .bn-teal { background: linear-gradient(135deg, #1f8f7d, #135f53); } .bn-violet { background: linear-gradient(135deg, #6151c0, #3d3191); } .bn-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; } .bn-dot { width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%; background: var(--muted-2); opacity: .55; cursor: pointer; } .bn-dot.on { width: 16px; border-radius: 3px; background: var(--accent); opacity: 1; } @media (prefers-reduced-motion: reduce) { .bn-slide { transition: none; transform: none; } } .sn-head { display: flex; align-items: center; gap: 9px; width: 100%; appearance: none; border: none; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-soft); padding: 8px 14px; cursor: pointer; text-align: left; white-space: nowrap; } .sn-head:hover { background: var(--surface); } .sn-head.on { color: var(--accent-strong); } .sn-head svg.ic { width: 16px; height: 16px; flex: none; } .sn-head .caret { margin-left: auto; width: 11px; height: 11px; opacity: .55; transition: transform .12s; } .sn-grp.open > .sn-head .caret { transform: rotate(90deg); } /* 매출·매입 명세서 — 라인 사이에 끼는 소계·부가 행을 눈으로 구분한다. 원본 DIAGRAM 은 RowError 로 색을 달리했다(같은 취지). */ /* 🐞 여기가 `var(--surface2, #f3f4f6)` 였다 — **`--surface2` 는 어디에도 없는 이름**이고 (정본은 `--surface-2`) 그래서 언제나 하드코딩 `#f3f4f6` 이 칠해졌다. 밝은 테마에서는 우연히 맞아 보였지만, **어두운 테마에서는 밝은 회색 띠에 밝은 회색 글자**가 되어 소계·합계 줄을 읽을 수 없었다(실측 대비 1.1:1). 보고서·명세서 대부분이 이 클래스를 쓴다. ⚠ 폴백을 지운다 — 있는 이름이면 폴백이 필요 없고, 폴백이 있으면 **이런 오타가 숨는다.** */ .st-sub > td { background: var(--surface-2); font-weight: 700; border-top: 1px solid var(--line); } .st-extra > td { color: var(--muted); font-style: italic; } /* 권한 차단 메뉴(Users.ulevel) — 숨기지 않고 잠근 표시만 한다. 감추면 사용자는 그 기능이 없는 줄 알고 관리자에게 물어볼 생각도 못 한다(원본도 그대로 둔다). */ .sn-item.locked, .sn-fly-item.locked { opacity: .45; } .sn-item.locked .lbl, .sn-fly-item.locked .lbl { text-decoration: line-through; } .sn-head.locked, .set-nav button.locked { opacity: .45; } .sn-head.locked > span:not(.sn-lock), .set-nav button.locked > span:not(.sn-lock) { text-decoration: line-through; } .sn-lock { margin-left: auto; font-size: 10px; line-height: 1; } .sn-items { display: none; } .sn-grp.open > .sn-items { display: block; } .sn-item { display: flex; align-items: center; gap: 6px; width: 100%; appearance: none; border: none; border-left: 2px solid transparent; background: none; font: inherit; font-size: 12px; color: var(--muted); padding: 6px 12px 6px 39px; cursor: pointer; text-align: left; white-space: nowrap; } .sn-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* 즐겨찾기 별표(시작 탭, 작업계획/14) — hover 시 노출, 등록(★) 상태는 상시 표시 */ .sn-star { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; color: var(--muted-2); visibility: hidden; } .sn-item:hover .sn-star, .sn-fly-item:hover .sn-star { visibility: visible; } .sn-star.on { visibility: visible; color: var(--warning); } .sn-star.on svg.ic { fill: currentColor; } .sn-star:hover { background: var(--surface-2); color: var(--warning); } .sn-star svg.ic { width: 13px; height: 13px; } .sn-item:hover { background: var(--surface); } .sn-item.on { background: var(--surface); color: var(--accent-strong); font-weight: 700; border-left-color: var(--accent); } .sidenav.rail .sn-head { justify-content: center; padding: 11px 0; } .sidenav.rail .sn-head span, .sidenav.rail .sn-head .caret { display: none; } .sidenav.rail .sn-head.on { box-shadow: inset 2px 0 0 var(--accent); } .sn-fly { max-height: 60vh; overflow-y: auto; min-width: 180px; } .sn-fly-item { display: flex; align-items: center; gap: 6px; width: 100%; appearance: none; border: none; background: none; font: inherit; font-size: 12px; color: var(--ink-soft); padding: 5px 10px; cursor: pointer; text-align: left; border-radius: 3px; white-space: nowrap; } .sn-fly-item .lbl { flex: 1; min-width: 0; } .sn-fly-item:hover { background: var(--surface-2); } .sn-fly-item.on { color: var(--accent-strong); font-weight: 700; } .sn-fly-item .soon { font-size: 10px; color: var(--muted-2); } /* ---------- 문서 탭 ---------- */ /* ⚠ 탭이 늘면 **네이티브 가로 스크롤바**가 탭 줄 아래에 깔려 14px 을 먹고, 마지막 탭은 글자 중간에서 잘렸다(12탭 기준 90px 넘침). 브라우저 탭처럼 **먼저 줄이고, 그래도 넘치면 화살표로 믄다**. */ .doctabwrap { display: flex; align-items: stretch; background: var(--surface-2); border-bottom: 1px solid var(--line); flex: none; } .doctabs { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; } .doctabs::-webkit-scrollbar { display: none; } /* 화살표는 **넘칠 때만** 난다(JS 가 hidden 을 토글한다). */ .tabnav { flex: none; width: 22px; border: none; border-right: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; line-height: 1; padding: 0; } .tabnav.next { border-right: none; border-left: 1px solid var(--line); } .tabnav:hover { background: var(--surface); color: var(--ink); } .doctab { padding: 9px 18px; font-size: 12.5px; font-weight: 600; color: var(--muted); border: none; border-right: 1px solid var(--line); border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; background: none; appearance: none; font-family: inherit; flex: none; max-width: 240px; } /* ⛔ 탭을 **줄이지 않는다.** 줄여 넣으면 12탭 기준 90px 모자란다고 전부가 조금씩 잘려 「창고…」가 둘이 된다 — 이름이 같아지면 탭이 아니다. 이름을 살리고 므다. (하한을 주는 방법도 써 봤는데, 짧은 탭을 오히려 넓혀 긴 이름을 더 잔인다.) */ /* 아이콘·닫기는 줄이지 않는다 — 글자만 … 로 줄인다. 안 그러면 ✕ 가 먼저 뭉개진다. */ .doctab > svg, .doctab > .dx { flex: none; } .doctab > span:not(.dx) { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .doctab svg { width: 13px; height: 13px; opacity: .75; } /* 문서탭 아이콘 색 — 화면별 고정 색(카테고리 팔레트·accent 재사용, 탭 식별성 목적) */ .doctab svg.tabic { opacity: .95; } .doctab .tabic-home { color: var(--accent); } .doctab .tabic-office { color: var(--cat-customer); } .doctab .tabic-product { color: var(--cat-both); } .doctab .tabic-trade { color: var(--cat-sale); } .doctab .tabic-stock { color: var(--cat-purchase); } .doctab .tabic-settings { color: var(--cat-settings); } /* 매입 계열 탭(전표·명세서) — 매출/매입 칩 색 정형화와 동일. ⚠ 화면별 색 **뒤에** 둔다: 같은 아이콘의 매출 탭과 눈으로 구분되는 게 화면별 색보다 중요하다(특정도가 같아 순서로 이긴다). */ .doctab .tabic-in { color: var(--cat-purchase); } .doctab.on { background: var(--surface); color: var(--ink); border-bottom: 2px solid var(--accent); margin-bottom: -1px; } .doctab .dx { margin-left: 4px; font-size: 9px; opacity: .45; padding: 2px 3px; border-radius: 2px; } .doctab .dx:hover { opacity: 1; background: var(--danger-soft); color: var(--danger); } /* 탭 끌어 옮기기 — 끄는 탭은 흐리게, 놓일 자리는 탭 경계에 강조색 세로줄. */ .doctab.movable { touch-action: pan-y; } /* 터치로 끌 때 가로 스크롤이 먼저 먹지 않게 */ .doctab.dragging { position: relative; z-index: 3; opacity: .85; background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: grabbing; } .doctab.drop-before { box-shadow: inset 3px 0 0 var(--accent); } .doctab.drop-after { box-shadow: inset -3px 0 0 var(--accent); } /* ---------- 리본 ---------- */ .ribbon { background: var(--ribbon); border-bottom: 1px solid var(--line); display: flex; align-items: stretch; padding: 6px 10px; gap: 2px; flex: none; overflow-x: auto; overflow-y: hidden; } .rgroup { display: flex; flex-direction: column; align-items: center; } .rgroup .btns { display: flex; gap: 2px; } .rbtn { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid transparent; background: none; border-radius: var(--radius-sm); padding: 5px 9px; cursor: pointer; font: inherit; } .rbtn:hover { background: var(--surface); border-color: var(--line); } .rbtn:disabled { opacity: .4; cursor: not-allowed; } .rbtn:disabled:hover { background: none; border-color: transparent; } .rbtn svg { width: 18px; height: 18px; color: var(--ink-soft); } .rbtn span { font-size: 10px; color: var(--ink-soft); white-space: nowrap; } .rbtn.primary svg { color: var(--accent-strong); } .rbtn.primary span { color: var(--accent-strong); font-weight: 700; } .rgroup .cap { font-size: 9.5px; color: var(--muted-2); margin-top: 3px; } .rdiv { width: 1px; background: var(--line); margin: 2px 8px; align-self: stretch; } /* ---------- 본문 ---------- */ .winbody { flex: 1; overflow: auto; padding: 16px; min-height: 0; } .filterbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .finput { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 6px 9px; font-size: 12.5px; color: var(--ink); } .finput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .finput.ph { color: var(--muted-2); } .filterbar .finput { min-width: 160px; } .filterbar input.finput.grow { flex: 1; min-width: 180px; } /* 그리드 공통 규격(정형화): 헤더는 스크롤 시 sticky 고정. sticky와 collapse 보더는 브라우저에서 어긋나므로 separate+개별 보더 방식을 쓴다(시각 결과 동일). 컬럼 이동/노출/크기조정은 js/components/grid.js(EZ.grid.apply)가 담당 — 새 그리드도 같은 규격을 따를 것. */ table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } thead th { text-align: left; font-size: 11px; font-weight: 700; color: var(--ink-soft); padding: 7px 10px; background: var(--grid-head); white-space: nowrap; border: none; border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line); position: sticky; top: 0; z-index: 3; user-select: none; } thead th:last-child { border-right: none; } thead th.num { text-align: right; } tbody td { padding: 6px 10px; white-space: nowrap; border: none; border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line); } tbody td:last-child { border-right: none; } tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } tbody tr { cursor: default; } tbody tr.clickable { cursor: pointer; } /* ⚠ 선택색을 `--accent-soft` 에서 **행 전용 토큰**으로 옮겼다(2026-09-15) — 어두운 테마에서 그 값이 바닥과 Δ(4,19,38) 뿐이라 선택된 줄이 잘 안 보였고, 그 탓에 hover 를 올릴 자리도 없었다. 밝은 테마 값은 accent-soft 와 같은 색이라 보이는 것이 달라지지 않는다. */ tbody tr.sel td { background: var(--row-sel); } /* 단축키 칩(EZ.keys) — 키가 걸린 버튼·칸 이름표 옆. 글자보다 한 단계 작고 흐리게 — 눈에 띄되 이름을 가리지 않게. */ kbd.kh { display: inline-block; margin-left: 5px; padding: 0 4px; font: 600 9.5px/14px ui-monospace, Consolas, 'Segoe UI', sans-serif; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; vertical-align: 1px; white-space: nowrap; letter-spacing: 0; } .btn.primary kbd.kh { color: var(--accent-ink); background: transparent; border-color: color-mix(in srgb, var(--accent-ink) 45%, transparent); opacity: .9; } .rbtn kbd.kh { margin: -3px 0 0; font-size: 8.5px; line-height: 12px; padding: 0 3px; } .field > span kbd.kh { margin-left: 4px; } .sn-item kbd.kh, .sn-fly-item kbd.kh { flex: none; margin-left: 0; } @media (max-width: 820px), (hover: none) { kbd.kh { display: none; } } /* 선택 창(EZ.picker) 여러 개 고르기의 **키보드 커서** — 체크(.sel)와 따로 보인다 · 머리줄(sticky)에 가리지 않게 여유 */ #pkBody tr.kb td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); } #pkBody tr { scroll-margin-top: 34px; } tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); } tbody tr.danger-row td { background: var(--danger-soft); } /* 행 순서 드래그 이동(정형화 — EZ.grid.rowReorder): 순서 변경 그리드는 행 드래그로 이동. 드래그 중인 행은 반투명, 삽입 위치는 대상 행 상/하단의 accent 라인으로 표시. */ tbody.rowdrag tr[data-i] { cursor: grab; } tbody.rowdrag tr.row-dragging { opacity: 0.45; } tbody.rowdrag tr.row-drop-above td { box-shadow: inset 0 2px 0 0 var(--accent); } tbody.rowdrag tr.row-drop-below td { box-shadow: inset 0 -2px 0 0 var(--accent); } tfoot td { padding: 7px 10px; background: var(--surface-2); font-weight: 700; border: none; border-right: 1px solid var(--grid-line); } tfoot td:last-child { border-right: none; } tfoot td.num { text-align: right; } .tablewrap { overflow-x: auto; border: 1px solid var(--grid-line); } .tablewrap table { border: none; } /* 컬럼 크기조정 핸들 + 헤더 드래그 이동 + 컬럼 선택 메뉴(EZ.grid) */ .col-resizer { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 4; } thead th:last-child .col-resizer { right: 0; width: 6px; } /* 마지막 컬럼 핸들이 테이블 밖으로 튀어나와 가로 스크롤을 만들지 않도록 */ thead th.drag-over { background: var(--accent-soft); } .gridmenu { position: fixed; z-index: 400; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 14px 30px -14px rgba(15, 18, 22, .35); padding: 6px; min-width: 160px; } .gridmenu .gm-title { font-size: 10px; font-weight: 800; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; } .gridmenu label { display: flex; align-items: center; gap: 7px; padding: 4px 8px; font-size: 12px; color: var(--ink-soft); cursor: pointer; border-radius: 3px; } .gridmenu label:hover { background: var(--surface-2); } /* 「이 표를 기본값으로」 — 설정 화면에 있던 전체 초기화를 이 메뉴로 엮긴 자리(2026-09-18). */ .gridmenu .gm-foot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; } .gridmenu .gm-reset { width: 100%; text-align: left; background: none; border: 0; padding: 5px 8px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; border-radius: 3px; } .gridmenu .gm-reset:hover { background: var(--surface-2); color: var(--ink); } .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 3px; white-space: nowrap; } .chip.ok { background: var(--success-soft); color: var(--success); } .chip.warn { background: var(--warning-soft); color: var(--warning); } .chip.bad { background: var(--danger-soft); color: var(--danger); } .chip.mute { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } .chip.accent { background: var(--accent-soft); color: var(--accent-strong); } /* 카테고리 칩(거래처구분/전표유형처럼 고정된 정체성) — 행 선택 강조(accent-soft)와 겹치지 않는 전용 팔레트 */ .chip.cat-sale { background: var(--cat-sale-soft); color: var(--cat-sale); } .chip.cat-purchase { background: var(--cat-purchase-soft); color: var(--cat-purchase); } .chip.cat-both { background: var(--cat-both-soft); color: var(--cat-both); } .chip.cat-customer { background: var(--cat-customer-soft); color: var(--cat-customer); } .statusbar { display: flex; align-items: center; gap: 14px; background: var(--statusbar); color: var(--statusbar-ink); font-size: 10.5px; padding: 6px 14px; flex: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } /* 넘쳐도 스크롤바는 안 보인다(휠·터치로는 밀린다) — 한 줄짜리 상태줄에 막대가 끼면 글자가 가린다(QA 4단계). */ .statusbar::-webkit-scrollbar { display: none; } .statusbar .sb-user { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 820px) { .statusbar .sb-mid { display: none; } } .statusbar span { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .statusbar .sep { width: 1px; height: 11px; background: #3d434d; flex: none; } .statusbar .sp { flex: 1; } .statusbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .statusbar .dot.warn { background: var(--warning); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .box { border: 1px solid var(--line); } .box-h { padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--ink-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .box-body { padding: 12px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .field { display: flex; flex-direction: column; gap: 3px; } .field span { font-size: 10.5px; font-weight: 700; color: var(--muted); } .field .req { color: var(--danger); } /* 상품등록 「상세정보입력」 — 원본 두 묶음(판매단가정보 · 기타정보)과 큰 체크 항목(product.js) */ .pd-sec { font-size: 11px; font-weight: 800; color: var(--accent); padding-bottom: 5px; margin: 0 0 10px; border-bottom: 1px solid var(--line-soft); } .grid2 + .pd-sec, .pd-checks + .pd-sec { margin-top: 16px; } .pd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } @media (max-width: 560px) { .pd-checks { grid-template-columns: 1fr; } } .pd-check { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; } .pd-check:hover { background: var(--row-hover); } .pd-check input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; } .pd-check span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pd-check b { font-size: 12.5px; color: var(--ink); } .pd-check em { font-style: normal; font-size: 11px; color: var(--muted-2); } .pd-check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } /* 원가재계산 — 고른 상품(settings.js renderRecalc) */ .rc-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rc-all { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--surface); cursor: pointer; } .rc-all input { margin: 0; accent-color: var(--accent); cursor: pointer; } .rc-all.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .rc-list { margin-top: 8px; max-height: 240px; overflow-y: auto; } .rc-list td { padding-top: 4px; padding-bottom: 4px; } /* 거래명세서 작성(issue.js) — 품목 표의 입력칸은 칸을 꽉 채우고, 금액 칸은 읽기 전용 숫자. */ .st-grid input.finput { width: 100%; } .st-sum { display: block; padding: 6px 0; font-size: 14px; } /* 재고조정 — 전 상품 표(원본 MOVECHANGE3). 조정수량·단가는 원본처럼 **파란 글씨**(편집 칸). */ .adj-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; } .adj-bar .field { margin: 0; } .adj-memo { flex: 1; min-width: 220px; } .adj-only { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--surface); cursor: pointer; } .adj-only input { margin: 0; accent-color: var(--accent); cursor: pointer; } .adj-only:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .adj-grid { max-height: 520px; overflow: auto; } .adj-grid td { padding-top: 3px; padding-bottom: 3px; } .adj-grid input.adj-in { width: 100%; height: 26px; padding: 0 6px; text-align: right; color: var(--accent-strong); font-weight: 600; } .adj-grid tr.adj-changed td { background: var(--accent-soft); } .adj-grid td.adj-after { font-weight: 700; } .adj-grid td.adj-after.neg { color: var(--danger); } .adj-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .adj-docs tbody tr { cursor: pointer; } .adj-docs tbody tr:hover td { background: var(--row-hover); } .adj-docs tbody tr.on td { background: var(--row-sel); } .finput.f { width: 100%; } /* 선택 필드(EZ.picker.field) — 「✕」를 input **안쪽 오른쪽 끝**에 얹는다(2026-08-31). ⚠ `` 은 자식을 가질 수 없다 — relative 래퍼 위에 absolute 로 겹친다. ⚠ input 에 오른쪽 여백을 줘야 긴 상호가 ✕ 밑으로 파고들지 않는다 (`플라츠헤어-애비뉴점빌라로도라` 같은 실제 값이 들어온다). */ .pickfield { position: relative; display: inline-flex; align-items: center; } .pickfield > .finput { padding-right: 26px; } .pickfield > .pf-clr { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); /* 클릭 영역을 24×24 로 — 아이콘만 한 크기면 잘 안 눌린다 */ width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; cursor: pointer; border-radius: var(--radius-sm); color: var(--muted-2); font-size: 12px; line-height: 1; } .pickfield > .pf-clr:hover { color: var(--danger); background: var(--surface-2); } .pickfield > .pf-clr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .infolist .r { display: flex; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12px; gap: 10px; } .infolist .r:last-child { border-bottom: none; } .infolist .r span { color: var(--muted); } .infolist .r b.hot { color: var(--danger); } .infolist.cols2 { display: grid; grid-template-columns: 1fr 1fr; } .infolist.cols2 .r:nth-last-child(-n+2) { border-bottom: none; } .infolist.cols2 .r:nth-child(odd) { border-right: 1px solid var(--line-soft); } /* ---------- 팝업(네이티브 다이얼로그) ---------- */ .overlay { position: fixed; inset: 0; background: rgba(15, 18, 22, .45); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } /* 떠 있는 창(EZ.floatWin · 2026-10-29) — 배경 투명 · 누름은 뒤 화면으로 통과 · 창만 받는다 · 제목줄을 끌어 옮긴다 */ .overlay.floating { background: transparent; pointer-events: none; } .overlay.floating > .dlg { pointer-events: auto; box-shadow: 0 10px 34px rgba(15, 18, 22, .38), 0 0 0 1px rgba(15, 18, 22, .18); } .overlay.floating > .dlg > .dlg-title { cursor: move; user-select: none; } .dlg { width: 100%; max-width: 600px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(15, 18, 22, .4); } .dlg-title { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(var(--accent), var(--accent-strong)); color: #fff; padding: 9px 13px; font-size: 12.5px; font-weight: 700; flex: none; } .dlg-title .x { width: 18px; height: 18px; padding: 0; line-height: 1; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px; font-size: 10px; cursor: pointer; background: none; color: #fff; appearance: none; } .dlg-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--surface-2); flex: none; overflow-x: auto; overflow-y: hidden; } .dlg-tabs button { appearance: none; border: none; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 8px 14px; border-right: 1px solid var(--line); margin-bottom: -1px; cursor: pointer; white-space: nowrap; } .dlg-tabs button.on { background: var(--surface); color: var(--ink); border-bottom-color: var(--accent); } .dlg-body { padding: 16px; overflow-y: auto; } .dlg-footnote-wrap { padding: 0 16px 16px; flex: none; } .dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 16px; background: var(--surface-2); border-top: 1px solid var(--line); flex: none; } .btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; } .btn:hover { background: var(--surface-2); } .btn.primary { background: var(--accent); border-color: var(--accent-strong); color: var(--accent-ink); } .btn.primary:hover { background: var(--accent-strong); } .btn.sm { padding: 3px 10px; font-size: 11px; } .foot-note { margin-top: 12px; font-size: 11px; color: var(--warning); display: flex; gap: 6px; align-items: flex-start; } .foot-note svg.ic { width: 13px; height: 13px; margin-top: 1.5px; } /* ---------- 홈 ---------- */ .home-greet { margin-bottom: 26px; } .home-greet h3 { font-size: 16.5px; margin: 0; } .home-greet p { max-width: 60ch; color: var(--muted); font-size: 12.5px; margin: 5px 0 0; } /* ---- 홈 대시보드(2026-10-01) — `js/views/home.js` ---- 세 줄: ① 달력+그날 / 공지 / 고객센터 ② 월별 차트 / 거래처 잔액 TOP5 ③ 한눈에 보기. ⚠ 첫 줄은 **4칸 중 2칸**이다 — 「2fr 1fr 1fr」로 두면 칸 사이 여백이 둘째 줄(1fr 1fr)보다 하나 많아 왼쪽 카드의 오른쪽 끝이 여백 절반(7px)만큼 어긋난다(사용자 지적). ⚠ 폭은 **창이 아니라 홈 칸 자신**으로 가른다(@container) — 사이드바를 접고 펴면 같은 창에서도 폭이 바뀐다. ⚠ 고객센터 카드는 두 테마 모두 짙은 파랑이다 — 테마의 accent 는 다크에서 밝아져 흰 글씨가 묻힌다. */ .hm { container: hm / inline-size; margin: -16px; padding: 16px 20px; min-height: calc(100% + 32px); background: var(--canvas); display: flex; flex-direction: column; gap: 14px; } /* 새로고침 — 홈 안 오른쪽 위에 **떠 있다**(줄을 차지하지 않는다 · 2026-10-01 사용자 결정). ⚠ 높이 0 인 sticky 상자다 — `.hm` 의 gap(14px)을 아래 음수 여백으로 되돌린다(안 그러면 첫 줄이 밀린다). ⚠ 버튼은 위 여백(16px) 쪽으로 12px 올려 둔다 — 좁은 폭에서 오른쪽 위 카드 머리(「일계표 열기」)와 겹치지 않는다. */ .hm-fab { position: sticky; top: 0; z-index: 6; /* ⚠ sticky 의 top 은 #winbody 의 안쪽 여백(16px)부터 잰다 — 16 을 주면 32 에 붙는다 */ height: 0; margin-bottom: -14px; display: flex; justify-content: flex-end; pointer-events: none; } /* 위 16px · 오른쪽 20px(사용자 지시) — 홈 안쪽 여백과 같아서 **카드 줄의 오른쪽 위 모서리**에 맞물린다. */ .hm-fab .hm-refresh { pointer-events: auto; box-shadow: 0 2px 8px -2px rgba(15, 18, 22, .25); } .hm-refresh { appearance: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; } .hm-refresh:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .hm-refresh:disabled { opacity: .6; cursor: default; } .hm-refresh .ic { width: 13px; height: 13px; } .hm-refresh.spin .ic { animation: hm-spin 0.9s linear infinite; } @keyframes hm-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hm-refresh.spin .ic { animation: none; } } .hm-row { display: grid; gap: 14px; } .hm-r1 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hm-r1 .hm-cal-card { grid-column: span 2; } .hm-r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); min-width: 0; } .hm-card-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 16px 0; } .hm-card-h h2 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); } .hm-tail { margin-left: auto; display: flex; align-items: center; gap: 10px; } .hm-card-b { padding: 12px 16px 16px; } .hm-sub { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .hm-note { font-size: 11px; color: var(--muted-2); } .hm-hint { font-size: 10.5px; font-weight: 400; color: var(--muted-2); margin-left: 4px; } .hm-wait { font-size: 11.5px; color: var(--muted-2); } .hm-none { margin: 0; font-size: 11.5px; color: var(--muted-2); } .hm-muted { color: var(--muted-2); } .hm-lnk { font-size: 11.5px; color: var(--accent); text-decoration: none; white-space: nowrap; } .hm-lnk:hover { text-decoration: underline; } .hm-more { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: 16px; line-height: 1; } .hm-more:hover { background: var(--surface-2); color: var(--ink); } .hm-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .hm-seg button { appearance: none; border: 0; background: var(--surface); padding: 4px 11px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; } .hm-seg button + button { border-left: 1px solid var(--line); } .hm-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .hm button:focus-visible, .hm a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ① 달력 + 그날 */ .hm-cal-card { display: grid; grid-template-columns: 252px minmax(0, 1fr); } .hm-cal { padding: 13px 14px 14px 16px; border-right: 1px solid var(--line-soft); background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); border-radius: var(--radius) 0 0 var(--radius); } .hm-cal-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .hm-cal-h b { font-size: 14px; font-weight: 700; } .hm-cal-h button { appearance: none; border: 1px solid transparent; background: none; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; font: inherit; font-size: 14px; } .hm-cal-h button:hover { background: var(--surface); border-color: var(--line-soft); } .hm-cal-h .hm-tbtn { margin-left: auto; width: auto; padding: 0 8px; font-size: 11px; font-weight: 600; border-color: var(--line-soft); background: var(--surface); color: var(--ink-soft); } .hm-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .hm-cal-w { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--muted); padding-bottom: 3px; } .hm-cal-w.sun, .hm-cal-d.sun > span { color: var(--danger); } .hm-cal-w.sat, .hm-cal-d.sat > span { color: var(--accent); } .hm-cal-d { appearance: none; border: 1px solid transparent; background: none; height: 31px; padding: 0; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font: inherit; color: var(--ink); } .hm-cal-d > span { font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .hm-cal-d i { display: flex; gap: 2px; height: 4px; } .hm-dt { display: inline-block; width: 4px; height: 4px; border-radius: 50%; } .hm-dt.t { background: var(--cat-sale); } .hm-dt.b { background: var(--warning); } .hm-cal-d:hover { background: var(--surface); border-color: var(--line-soft); } .hm-cal-d.out > span { opacity: .4; } .hm-cal-d.today { border-color: var(--accent); } .hm-cal-d.sel { background: var(--accent); border-color: var(--accent); } .hm-cal-d.sel > span { color: var(--accent-ink); opacity: 1; } .hm-cal-d.sel .hm-dt { background: var(--accent-ink); } .hm-cal-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; font-size: 10.5px; color: var(--muted); } .hm-cal-legend span { display: inline-flex; align-items: center; gap: 4px; } .hm-cal-legend .hm-dt { width: 6px; height: 6px; } .hm-cal-legend em { font-style: normal; color: var(--muted-2); margin-left: auto; } .hm-day { padding: 13px 16px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .hm-day-h { display: flex; align-items: center; gap: 8px; } .hm-day-h b { font-size: 14px; } .hm-day-h .hm-lnk { margin-left: auto; } .hm-mini { width: 100%; border-collapse: collapse; font-size: 12px; } .hm-mini th { font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: right; padding: 5px 8px; background: var(--grid-head); border-bottom: 1px solid var(--grid-line); } .hm-mini td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--grid-line); font-variant-numeric: tabular-nums; } .hm-mini th:first-child, .hm-mini td:first-child { text-align: left; } .hm-mini td b { font-weight: 700; } .hm-mini tr.hm-carry td { color: var(--muted); } .hm-mini tr.hm-empty td { text-align: center; color: var(--muted); padding: 14px 8px; } .hm-day-cash { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hm-day-cash > div { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); } .hm-day-cash span { font-size: 11.5px; color: var(--muted); } .hm-day-cash em { font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .hm-day-cash b { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; } .hm-day-bill { display: flex; flex-direction: column; gap: 4px; } .hm-bl { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 10px; border: 1px solid var(--warning-soft); background: color-mix(in srgb, var(--warning-soft) 45%, var(--surface)); border-radius: var(--radius-sm); } .hm-bl-o { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; } .hm-bl b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ① 공지 */ .hm-nlist { list-style: none; margin: 0; padding: 0; } .hm-nlist li + li { border-top: 1px solid var(--line-soft); } .hm-nlist button { appearance: none; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 2px; background: none; border: 0; font: inherit; font-size: 12.5px; color: var(--ink-soft); text-align: left; cursor: pointer; border-radius: var(--radius-sm); } .hm-nlist button:hover .hm-nt { color: var(--accent); text-decoration: underline; } .hm-nlist .chip { min-width: 34px; justify-content: center; } .hm-nt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hm-nlist time { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .hm-dlg-p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); } /* ① 고객센터 */ .hm-promo { background: linear-gradient(140deg, #1d477f, #2f69b8); border: 0; color: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .hm-promo::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 190px; height: 190px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .06); pointer-events: none; } .hm-eyebrow { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); } .hm-promo h3 { margin: 2px 0 0; font-size: 19px; line-height: 1.35; font-weight: 700; letter-spacing: -.02em; } .hm-promo p { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .78); } .hm-act { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; } .hm-act button { appearance: none; border: 0; background: #fff; color: #1d477f; font: inherit; font-weight: 700; font-size: 12px; padding: 7px 14px; border-radius: 999px; cursor: pointer; } .hm-act span { font-size: 11.5px; color: rgba(255, 255, 255, .78); } .hm-act span b { color: #fff; font-size: 13px; letter-spacing: .02em; } .hm .hm-promo button:focus-visible { outline-color: #fff; } /* ② 월별 차트 — 막대·축·라벨이 **같은 눈금**(천원)을 쓴다 */ .hm-chart-sum { display: flex; gap: 18px; flex-wrap: wrap; padding: 2px 16px 0; font-size: 11.5px; color: var(--muted); } .hm-chart-sum b { color: var(--ink); font-size: 13.5px; margin-left: 4px; font-variant-numeric: tabular-nums; } .hm-chart { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 10px 16px 8px 8px; } .hm-chart > .hm-chart-msg { grid-column: 1 / -1; padding: 30px 0; text-align: center; font-size: 11.5px; color: var(--muted-2); } .hm-yax { position: relative; height: 160px; } .hm-yax span { position: absolute; right: 8px; transform: translateY(50%); font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .hm-plot { position: relative; height: 160px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hm-plot .hm-chart-msg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; color: var(--muted-2); } .hm-gl { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--grid-line); } .hm-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); } .hm-col { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 0 2px; } .hm-bar { width: min(14px, 34%); border-radius: 2px 2px 0 0; transition: filter .12s; } .hm-col:hover .hm-bar { filter: brightness(1.12); } .hm .s1 { background: var(--cat-sale); } .hm .s2 { background: color-mix(in srgb, var(--cat-purchase) 75%, var(--surface)); } .hm .s3 { background: var(--accent); } .hm .s4 { background: color-mix(in srgb, var(--cat-customer) 60%, var(--surface)); } .hm-mrow { grid-column: 2; display: grid; grid-template-columns: repeat(12, 1fr); padding-top: 5px; } .hm-mrow span { text-align: center; font-size: 10.5px; color: var(--muted); } .hm-mrow span.fut { color: var(--muted-2); opacity: .6; } .hm-mrow span.cur { color: var(--accent); font-weight: 700; } .hm-chart-foot { padding: 0 16px 12px 60px; } .hm-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); } .hm-legend span { display: inline-flex; align-items: center; gap: 5px; } .hm-legend i { width: 9px; height: 9px; border-radius: 2px; } /* ② 거래처 잔액 TOP5 */ .hm-top5 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(150px, 1fr); gap: 12px; align-items: center; } .hm-btab { width: 100%; border-collapse: collapse; font-size: 12.5px; } .hm-btab th { font-size: 10.5px; font-weight: 600; color: var(--muted); padding: 5px 8px; background: var(--grid-head); border-bottom: 1px solid var(--grid-line); text-align: right; } .hm-btab td { padding: 5px 8px; border-bottom: 1px solid var(--grid-line); text-align: right; font-variant-numeric: tabular-nums; } .hm-btab th:first-child, .hm-btab td:first-child { text-align: left; } .hm-nm { display: flex; align-items: center; gap: 8px; min-width: 0; } .hm-nm span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hm-sw { width: 9px; height: 9px; border-radius: 2px; flex: none; } .hm-nm .hm-dim { color: var(--muted-2); font-style: italic; } /* 상호를 못 찾은 줄 — 진짜 상호처럼 보이지 않게 */ .hm-rk { width: 14px; flex: none; font-size: 10.5px; font-weight: 700; color: var(--muted-2); } .hm-pc { color: var(--muted); font-size: 11.5px; } .hm-btab tr.etc td { color: var(--muted); } .hm-btab tfoot td { font-weight: 700; background: var(--accent-soft); border-bottom: 0; } .hm-btab tfoot td:first-child { padding-left: 30px; } .hm-donut { position: relative; max-width: 170px; width: 100%; margin: 0 auto; aspect-ratio: 1; } .hm-donut svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); } .hm-ctr { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .hm-ctr span { font-size: 11px; color: var(--muted); } .hm-ctr b { font-size: 15px; font-variant-numeric: tabular-nums; } /* ③ 한눈에 보기 */ .hm-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 14px; } .hm-grp { padding: 0 18px; border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; min-width: 0; } .hm-grp:first-child { padding-left: 0; border-left: 0; } .hm-grp:nth-child(4) { padding-right: 0; } .hm-grp-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; } .hm-pills, .hm-cnts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .hm-pills.one, .hm-cnts.one { grid-template-columns: 1fr; } .hm-pill { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; } .hm-pill.a { background: color-mix(in srgb, var(--pc, var(--accent)) 10%, var(--surface)); } .hm-pill span { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; } .hm-pill span i { width: 6px; height: 6px; border-radius: 50%; background: var(--pc, var(--muted-2)); } .hm-pill b { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-pill b small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; } .hm-cnts { font-size: 11.5px; color: var(--muted); } .hm-cnts div { display: flex; justify-content: space-between; gap: 6px; padding: 0 10px; min-width: 0; } .hm-cnts b { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .hm-strip-err { grid-column: 1 / -1; margin: 12px 0 0; font-size: 11px; color: var(--warning); } /* 폭 — 홈 칸 자신의 너비로 가른다 */ /* ⚠ 갱신 버튼(위 16 · 오른쪽 20 — 카드 줄 오른쪽 위 모서리)은 폭에 따라 **다른 카드 머리 위에 놓인다** — 넓을 때 고객센터 카드(빈 자리) · 두 단일 때 「일계표 열기」 · 한 단일 때 달력 「오늘」. 그 머리 오른쪽을 버튼 너비(60) + 틈 8 − 그 칸 안쪽 여백만큼 비워 둔다(🔬 1300·900·420px 겹침 0). */ @container hm (max-width: 1180px) { .hm-r1 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-r1 .hm-cal-card { grid-column: 1 / -1; } .hm-day-h { padding-right: 52px; } .hm-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } .hm-grp:nth-child(3) { padding-left: 0; border-left: 0; } .hm-grp:nth-child(2) { padding-right: 0; } } @container hm (max-width: 860px) { .hm-r2 { grid-template-columns: minmax(0, 1fr); } } @container hm (max-width: 600px) { .hm-r1 { grid-template-columns: minmax(0, 1fr); } .hm-day-h { padding-right: 0; } .hm-cal-h { padding-right: 54px; } .hm-cal-card { grid-template-columns: minmax(0, 1fr); } .hm-cal { border-right: 0; border-bottom: 1px solid var(--line-soft); border-radius: var(--radius) var(--radius) 0 0; } .hm-top5 { grid-template-columns: minmax(0, 1fr); } .hm-donut { max-width: 150px; } .hm-groups { grid-template-columns: minmax(0, 1fr); } .hm-grp, .hm-grp:nth-child(2), .hm-grp:nth-child(3), .hm-grp:nth-child(4) { padding: 0; border-left: 0; } .hm-mini th:nth-child(3), .hm-mini td:nth-child(3), .hm-mini th:nth-child(4), .hm-mini td:nth-child(4) { display: none; } } @media (prefers-reduced-motion: reduce) { .hm-bar { transition: none; } } /* ---- 문자발송 · 팩스전송(2026-10-02) — `js/views/messaging.js` ---- 세 칸: 작성(첨부) / 수신번호 리스트(수신 팩스) / 거래처 검색 — 원본 Form_sms · frmSendFaxMenu 의 배치. */ .msg { display: flex; flex-direction: column; gap: 12px; } .msg [hidden] { display: none !important; } /* `.field { display:flex }` 가 hidden 을 이긴다 — LMS 제목 칸이 SMS 때도 보였다 */ .msg-banner { margin: 0; padding: 8px 12px; background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); border-radius: var(--radius-sm); font-size: 12px; } .msg-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12px; color: var(--muted); } .msg-pay b { color: var(--ink); margin-left: 4px; } .msg-pay em { font-style: normal; font-size: 11px; color: var(--muted-2); margin-left: 6px; } .msg-pay-links { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; } .msg-link { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); text-decoration: none; font-weight: 600; } .msg-link:hover { text-decoration: underline; } .msg-link .ic { width: 12px; height: 12px; } .msg-grid { display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(280px, 1fr) minmax(280px, 1fr); gap: 12px; align-items: start; } @media (max-width: 1200px) { .msg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .msg-search { grid-column: 1 / -1; } } @media (max-width: 760px) { .msg-grid { grid-template-columns: minmax(0, 1fr); } } .msg-grid .box { min-width: 0; background: var(--surface); } .msg-stack { display: flex; flex-direction: column; gap: 10px; } .msg-sub { font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--muted-2); } .msg-sub.msg-bad { color: var(--danger); } .msg-sender { display: flex; gap: 6px; align-items: center; } .msg-sender select { flex: 1; min-width: 0; } .msg-text { resize: vertical; min-height: 150px; font-family: inherit; line-height: 1.6; } .msg-count { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .msg-count b { color: var(--ink); } .msg-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); cursor: pointer; } .msg-hint { margin: 0; } .msg-preview { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--surface-2); font-size: 12px; } .msg-preview span { font-size: 10.5px; color: var(--muted); } .msg-preview p { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; } .msg-reserve { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .msg-sum { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .msg-actions { display: flex; gap: 6px; flex-wrap: wrap; } .msg-result { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.6; } .msg-result.warn { background: var(--warning-soft); color: var(--warning); } .msg-result.ok { background: var(--success-soft); color: var(--success); } .msg-addrow { display: flex; gap: 6px; flex-wrap: wrap; } .msg-addrow .finput { flex: 1 1 110px; min-width: 0; } .msg-list { max-height: 330px; overflow: auto; } .msg-list td { font-variant-numeric: tabular-nums; } .msg-list td em { font-style: normal; font-size: 10.5px; } .msg-empty { text-align: center; color: var(--muted-2); padding: 18px 8px !important; } .msg-bad { color: var(--danger); } .msg-warnline { margin: 0; font-size: 11.5px; } .msg-file { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); } .msg-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-file span { color: var(--muted); flex: none; } .msg-pv { height: 340px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; display: grid; place-items: center; } .msg-pv img { max-width: 100%; max-height: 100%; object-fit: contain; } .msg-pv iframe { width: 100%; height: 100%; border: 0; background: #fff; } .msg-pv-empty { color: var(--muted-2); font-size: 12px; padding: 0 16px; text-align: center; } /* ── 자동 알림(alerts.js · SCR-0604) ───────────────────────────────────────────── 어음 알림 창 — 원본 `BillAlert`(오른쪽 아래 · 모달 아님 · TopMost 도구창). 일하면서 보라는 창이라 아래를 막지 않는다. ⚠ z-index: 화면 위(150) · 대화상자(200) 아래 — 전표 창을 열면 그 아래로 간다. */ /* 오른쪽 아래 자리 — 일정 알림(위)과 어음 창(아래)이 쌓인다. 자리 자체는 클릭을 막지 않는다. */ .ez-dock { position: fixed; right: 16px; bottom: 40px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); overflow: auto; pointer-events: none; } .ez-dock > * { pointer-events: auto; } .ba { width: 470px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(15, 18, 22, .45); display: flex; flex-direction: column; } .ba-h { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(var(--accent), var(--accent-strong)); color: #fff; padding: 7px 10px; font-size: 12px; } .ba-h > span { display: inline-flex; align-items: center; gap: 6px; } .ba-h .ic { width: 14px; height: 14px; } .ba-h .x { width: 18px; height: 18px; padding: 0; line-height: 1; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px; font-size: 10px; cursor: pointer; background: none; color: #fff; appearance: none; } .ba-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; } .ba-grp { font-size: 11px; font-weight: 800; color: var(--accent); } .ba-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-soft); } .ba-list { max-height: 210px; overflow: auto; } .ba-list td { font-variant-numeric: tabular-nums; white-space: nowrap; } .ba-foot { font-size: 10.5px; color: var(--muted-2); } .ba .mute { color: var(--muted-2); } .ba-note { color: var(--warning); } /* 일정 알림 — 원본 DevExpress AlertControl(오른쪽 아래 · 20초) */ .dya { width: 320px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: 0 18px 40px -16px rgba(15, 18, 22, .45); animation: dya-in .25s ease-out; } @keyframes dya-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } .dya-h { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; font-size: 12.5px; } .dya-h .ic { width: 14px; height: 14px; color: var(--accent); flex: none; } .dya-h b { flex: 1; min-width: 0; overflow-wrap: anywhere; } .dya-h .x { width: 18px; height: 18px; padding: 0; line-height: 1; border: 1px solid var(--line); border-radius: 2px; font-size: 10px; cursor: pointer; background: none; color: var(--muted); flex: none; } .dya-b { padding: 2px 10px 6px 30px; font-size: 12px; color: var(--ink-soft); white-space: pre-wrap; max-height: 120px; overflow: auto; } .dya-f { display: flex; justify-content: flex-end; padding: 0 10px 8px; } .dya-all { box-shadow: 0 8px 20px -12px rgba(15, 18, 22, .45); } /* ── 일정관리(diary.js) ─────────────────────────────────────────────── */ .dy { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; align-items: start; } @media (max-width: 900px) { .dy { grid-template-columns: minmax(0, 1fr); } .dy-side { order: -1; } } .dy-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .dy-head b { font-size: 15px; } .dy-foot { margin-top: 8px; } .dy-ev { --lb: #fff; --st: transparent; position: relative; display: flex; align-items: center; gap: 3px; font-size: 11.5px; line-height: 1.35; padding: 1px 5px 1px 8px; margin: 1px 0; border: 1px solid rgba(15, 18, 22, .18); border-radius: 3px; background: var(--lb); color: #1b1f24; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dy-ev > span { overflow: hidden; text-overflow: ellipsis; } .dy-ev::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--st); } .dy-ev.st0::before { background: transparent; } .dy-ev.st1::before { background: repeating-linear-gradient(45deg, var(--st) 0 2px, #fff 2px 4px); } /* 업무중 — 원본 빗금 */ .dy-ev.sel { outline: 2px solid var(--accent); outline-offset: 0; z-index: 2; } .dy-ev .dy-bell { width: 11px; height: 11px; flex: none; } /* 일정 툴팁 — 마우스를 올리면 **바로** 뜬다(브라우저 기본 title 은 1초쯤 늦다). diary.js 「일정 툴팁」. */ .dy-tip { position: fixed; z-index: 10000; max-width: 320px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); font-size: 12px; line-height: 1.5; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); } /* 월별 */ .dy-month { border: 1px solid var(--line); background: var(--surface); } .dy-mhead, .dy-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .dy-mhead > div { padding: 5px 6px; font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--grid-head); border-bottom: 1px solid var(--grid-line); } .dy-mgrid { grid-auto-rows: minmax(96px, auto); } .dy-mcell { border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line); padding: 2px 3px 4px; min-width: 0; } .dy-mcell:nth-child(7n) { border-right: none; } .dy-mcell.out { background: var(--surface-2); } .dy-mcell.out .dy-mday { color: var(--muted-2); } .dy-mcell.cur { box-shadow: inset 0 0 0 2px var(--accent-soft); } .dy-mday { border: none; background: none; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); padding: 1px 4px; border-radius: 10px; cursor: pointer; } .dy-mday:hover { background: var(--row-hover); } .dy-mcell.today .dy-mday { background: var(--accent); color: var(--accent-ink); } .sun .dy-mday, .dy-mhead .sun, .dy-th.sun button { color: var(--danger); } .sat .dy-mday, .dy-mhead .sat, .dy-th.sat button { color: var(--accent); } .dy-more { border: none; background: none; font: inherit; font-size: 11px; color: var(--accent); cursor: pointer; padding: 0 4px; } /* 주간·일별 */ .dy-grid { --n: 7; border: 1px solid var(--line); background: var(--surface); max-height: calc(100vh - 300px); min-height: 320px; overflow-y: auto; } /* 머리·시간 칸이 한 스크롤 상자 — 스크롤바가 둘에 똑같이 걸린다 */ .dy-gtop { position: sticky; top: 0; z-index: 3; background: var(--surface); } .dy-gh, .dy-gb { display: grid; grid-template-columns: 52px repeat(var(--n), minmax(0, 1fr)); } .dy-gh { border-bottom: 1px solid var(--grid-line); background: var(--grid-head); } .dy-gut { font-size: 10.5px; color: var(--muted); text-align: right; padding: 4px 6px 0 0; border-right: 1px solid var(--grid-line); } .dy-th { border-right: 1px solid var(--grid-line); text-align: center; padding: 4px 2px; } .dy-th:last-child { border-right: none; } .dy-th button { border: none; background: none; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; padding: 1px 6px; border-radius: 10px; } .dy-th.today button { background: var(--accent); color: var(--accent-ink); } .dy-adrow { background: var(--surface); } .dy-ad { min-height: 26px; padding: 2px; border-right: 1px solid var(--grid-line); } .dy-ad:last-child { border-right: none; } .dy-gb { position: relative; } .dy-gb > .dy-gut { padding: 0; } .dy-tm { font-size: 10.5px; color: var(--muted); text-align: right; padding: 1px 6px 0 0; border-bottom: 1px solid var(--grid-line); box-sizing: border-box; } .dy-col { position: relative; border-right: 1px solid var(--grid-line); } .dy-col:last-child { border-right: none; } .dy-col.today { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); } .dy-slot { position: absolute; left: 0; right: 0; border-bottom: 1px dotted var(--grid-line); box-sizing: border-box; } .dy-slot:not(.hr) { border-bottom-style: solid; } .dy-slot:hover { background: var(--row-hover); } .dy-tev { position: absolute; display: flex; flex-direction: column; align-items: stretch; white-space: normal; padding: 2px 4px 2px 8px; margin: 0; z-index: 1; } .dy-tev b { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; } .dy-tev b .dy-bell { display: inline-block; vertical-align: -1px; margin-right: 3px; } .dy-tev span { font-size: 10.5px; color: #3c4450; white-space: nowrap; } /* 30분 이하 — 제목과 시간을 한 줄에(제목이 길면 제목이 줄고 시간은 남는다) */ .dy-tev.short { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; } .dy-tev.short b { flex: 0 1 auto; } .dy-tev.short span { flex: none; } /* 오른쪽 — 작은 달력 + 범례 */ .dy-side { display: flex; flex-direction: column; gap: 12px; } .dy-nav { border: 1px solid var(--line); background: var(--surface); padding: 8px; } .dy-nav-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 12px; } .dy-nav-h button { border: 1px solid var(--line); background: var(--surface); border-radius: 3px; width: 22px; height: 22px; cursor: pointer; color: var(--ink-soft); } .dy-nav-w, .dy-nav-g { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .dy-nav-w span { font-size: 10px; color: var(--muted); padding-bottom: 2px; } .dy-nd { border: none; background: none; font: inherit; font-size: 11px; padding: 3px 0; cursor: pointer; color: var(--ink); border-radius: 3px; } .dy-nd.out { color: var(--muted-2); } .dy-nd.inr { background: var(--accent-soft); } .dy-nd.has { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; } .dy-nd.today { outline: 1.5px solid var(--accent); } .dy-nd:hover { background: var(--row-hover); } .dy-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--ink-soft); } .dy-legend span { display: inline-flex; align-items: center; gap: 4px; } .dy-legend i { width: 12px; height: 12px; border: 1px solid rgba(15, 18, 22, .25); border-radius: 2px; display: inline-block; } .dy-legend i.st { --st: #fff; background: var(--st); } .dy-legend i.st0 { background: #fff; } .dy-legend i.st1 { background: repeating-linear-gradient(45deg, var(--st) 0 2px, #fff 2px 4px); } .dy-lg-h { width: 100%; font-size: 10.5px; font-weight: 800; color: var(--muted-2); margin-top: 4px; } /* 「일정 작성」 */ .dy-form .field { margin-bottom: 10px; } .dy-checks { display: flex; align-items: center; gap: 14px; margin: -2px 0 10px; font-size: 12px; } .dy-checks label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .dy-dt { display: flex; gap: 6px; } .dy-dt input[type=date] { flex: 1.3; min-width: 0; } .dy-dt input[type=time] { flex: 1; min-width: 0; } .dy-selsw { display: flex; align-items: center; gap: 6px; } .dy-selsw select { flex: 1; min-width: 0; } .dy-sw { width: 16px; height: 16px; border: 1px solid rgba(15, 18, 22, .25); border-radius: 3px; flex: none; display: inline-block; } .dy-form textarea { resize: vertical; font-family: inherit; line-height: 1.5; } /* 확인 상자 — 원본 `XtraMessageBox` 자리. 대화상자(200) **위**에 겹친다(열린 상품 창을 닫지 않는다). */ .ezab-ov { position: fixed; inset: 0; z-index: 250; background: rgba(15, 18, 22, .35); display: grid; place-items: center; padding: 20px; } .ezab { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(15, 18, 22, .5); } .ezab-h { display: flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--warning); background: var(--warning-soft); border-bottom: 1px solid var(--line-soft); } .ezab-h .ic { width: 14px; height: 14px; } .ezab-b { padding: 16px 14px; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.6; } .ezab-sub { margin-top: 8px; font-size: 11.5px; font-weight: 400; color: var(--muted); } .ezab-sub b { color: var(--ink); font-variant-numeric: tabular-nums; } .ezab-f { display: flex; justify-content: flex-end; padding: 0 12px 12px; } /* 환경설정 › 알림(notifycfg.js) */ .nt-sec { margin-top: 16px; max-width: 640px; } .nt-sec-h { font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--muted-2); margin-bottom: 8px; } .nt-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; cursor: pointer; font-size: 12px; } .nt-item input { margin-top: 2px; } .nt-from { font-style: normal; font-size: 10.5px; color: var(--muted-2); margin-left: 4px; } .nt-desc { color: var(--muted-2); font-size: 11.5px; line-height: 1.55; } .nt-row-act { display: flex; align-items: center; gap: 8px; margin: -2px 0 4px 2px; } .nt-field { margin-bottom: 10px; } .nt-sub { margin: 0 0 8px 22px; padding-left: 12px; border-left: 2px solid var(--line-soft); } .nt-tpl-row { display: flex; gap: 8px; align-items: flex-start; } .nt-tpl-row textarea { flex: 1; min-width: 0; resize: vertical; font-family: inherit; line-height: 1.5; } .nt-tpl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; } .nt-bytes { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .nt-bytes.over { color: var(--danger); font-weight: 700; } .foot-note.nt-bad { color: var(--danger); } .nt-field .msg-sender .btn { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; text-decoration: none; } .nt-field .msg-sender .btn .ic { width: 12px; height: 12px; } .fav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .fav-head h4 { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; } .fav-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 34px 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface-2); margin-bottom: 30px; } .fav-empty svg { width: 26px; height: 26px; color: var(--muted-2); } .fav-empty b { font-size: 13px; color: var(--ink-soft); } .fav-empty span { font-size: 11.5px; color: var(--muted); max-width: 36ch; } .fav-empty .btn { margin-top: 6px; } .allmenu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-bottom: 30px; } .allmenu-grid .mcard { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 12px 12px 11px; cursor: pointer; font: inherit; position: relative; } .allmenu-grid .mcard:hover, .allmenu-grid .mcard:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .allmenu-grid .ic { width: 30px; height: 30px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; } .allmenu-grid .ic svg { width: 16px; height: 16px; } .allmenu-grid b { font-size: 12.5px; color: var(--ink); } .allmenu-grid span.desc { font-size: 11px; color: var(--muted); } .allmenu-grid .fav-star-btn { position: absolute; top: 10px; right: 10px; } /* ---------- 설정(세로 메뉴) ---------- */ .set-shell { display: flex; align-items: stretch; min-height: 100%; } .set-nav { width: 196px; flex: none; background: var(--surface-2); border-right: 1px solid var(--line); padding: 10px 0; } .set-nav .grp { padding: 14px 16px 6px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); } .set-nav .grp:first-child { padding-top: 6px; } .set-nav button { display: flex; align-items: center; gap: 9px; width: 100%; appearance: none; border: none; border-left: 2px solid transparent; background: none; text-align: left; font: inherit; font-size: 12.5px; color: var(--ink-soft); padding: 8px 14px; cursor: pointer; } .set-nav button svg { width: 15px; height: 15px; flex: none; opacity: .7; } .set-nav button.on { background: var(--surface); color: var(--accent-strong); font-weight: 700; border-left-color: var(--accent); } .set-nav button.on svg { opacity: 1; color: var(--accent-strong); } .set-panel { flex: 1; padding: 20px 24px; min-width: 0; } .set-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; } /* ⭐ **설정 패널의 접이식 묶음**(2026-09-28 사용자 요청: 「인쇄 탭 구성이 너무 많아서 유형별로 나눴으면」). `
` 라 **자바스크립트가 없다** — 열고 닫는 일을 브라우저가 한다. ⚠ **닫혀 있어도 DOM 에 그대로 있다** — 값 모으기(`EZ.qsa('.prt-b') …`)와 저장이 예전 그대로 돈다. 그래서 「기능은 안 건드린다」가 지켜진다. ⚠ 열림 상태는 **기억하지 않는다** — 기억하려면 저장 자리가 하나 더 생기는데, 그건 인쇄 설정이 아니다(패널을 다시 열면 기본 상태로 돌아온다). */ .set-group { border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; background: var(--bg-soft, transparent); } .set-group > summary { cursor: pointer; padding: 10px 12px; font-size: 12.5px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; list-style: none; border-radius: 8px; } /* ▸ 화살표를 직접 그린다 — 브라우저마다 기본 삼각형 모양·자리가 달라서다. */ .set-group > summary::-webkit-details-marker { display: none; } .set-group > summary::before { content: '▸'; color: var(--muted-2); font-size: 11px; transition: transform .12s ease; display: inline-block; width: 10px; } .set-group[open] > summary::before { transform: rotate(90deg); } .set-group > summary:hover { background: var(--hover, rgba(0, 0, 0, .03)); } .set-group > summary:focus-visible { outline: 2px solid var(--accent, #06c); outline-offset: -2px; } /* 닫혀 있을 때 **무엇이 들어 있는지** 한 줄로 알려 준다 — 안 적으면 전부 열어 봐야 한다. */ .set-group-hint { font-weight: 400; font-size: 11.5px; color: var(--muted-2); } .set-group-body { padding: 2px 12px 14px; border-top: 1px solid var(--line); } .set-panel-head h3 { font-size: 14.5px; margin: 0; } .set-panel .desc { font-size: 12px; color: var(--muted); margin: 4px 0 18px; } /* ---------- 정형화: 클릭 가능한 요소의 hover 피드백 (기록 — 새 화면 추가 시 이 규칙을 따를 것) ---------- 규칙: cursor:pointer인 요소는 전부 hover 시 배경이 바뀌어야 한다. - 탭류(문서탭·다이얼로그탭·설정메뉴)는 컨테이너 배경이 --surface-2이므로 → hover는 --surface(밝게 뜸) - 그리드 행(품목명세·거래처/상품 목록 등)은 hover가 "선택의 예고편"이 되도록 선택색보다 한 단계 연한 같은 계열 톤을 쓴다 — 선택 행과 hover 행이 겹쳐 보여도 위계가 구분된다. - 이미 자체 hover가 정의된 버튼류(.btn/.rbtn/.theme-toggle/.mcard)는 이 규칙의 적용 대상이 아님(그대로 유지). 활성(.on) 상태나 선택(.sel) 상태인 요소는 hover로 다시 칠하지 않는다(:not(.on)/:not(.sel)로 제외). */ .doctab:not(.on):hover { background: var(--surface); } .dlg-tabs button:not(.on):hover { background: var(--surface); } .set-nav button:not(.on):hover { background: var(--surface); } /* 🐞 예전엔 `color-mix(accent-soft 45%, surface)` 한 식이었다 — **어두운 테마에서 거의 안 보였다** (2026-09-15 실측: 바닥에서 Δ(2,9,17) 뿐. 같은 화면의 읽기용 hover 가 Δ(26,28,32) 라 오히려 「그냥 읽는 줄」이 「눌리는 줄」보다 또렷했다 — 위계가 뒤집혀 있었다). ⚠ 원인은 호버가 아니라 **선택색이다**: 어두운 `--accent-soft`(#22344c)가 바닥에서 Δ(4,19,38) 밖에 안 떨어져 있어, 그 안을 45% 로 나눠 쓰면 무엇을 해도 안 보인다. 그래서 호버를 올리려면 **선택도 같이 올려야** 한다 — 안 그러면 호버가 선택보다 강해 보인다. ⭐ 그래서 어두운 테마만 값을 따로 둔다(`--row-hover-click`·`--row-sel`). 밝은 테마 값은 **예전에 칠해지던 색 그대로**다(#eff5fb = 45% 혼합 결과, #dce8f7 = accent-soft) — 밝은 쪽은 원래 잘 보였으니 건드리지 않는다. ⚠ `--accent-soft` 자체는 안 만진다 — 칩·검색결과·픽커가 함께 쓰므로 거기까지 바뀐다. */ tbody tr.clickable:not(.sel):hover td { background: var(--row-hover-click); } /* ⭐ **읽기용 hover** — 행에 동작이 아예 없는 목록(보고서·명세서 다수)에도 「지금 이 줄」을 짚어 주는 표시는 있어야 한다. 열이 열 개를 넘는 표에서 눈이 한 줄을 놓치면 옆 줄 숫자를 읽는데, 그건 조용히 틀리는 종류의 실수다. ⚠ **커서는 default 로 둔다.** 손가락 커서는 「누르면 뭔가 된다」는 약속이라, 아무 동작이 없는 행에 붙이면 거짓말이 된다 — 그래서 `cursor: pointer` 는 `.clickable` 전용이다. ⚠ 색이 **중성(회색)** 이다 — 클릭 가능 행의 hover 는 accent 계열(파랑)이라, 색으로도 「눌러서 뭔가 되는 줄」과 「그냥 읽는 줄」이 갈린다. 같은 파랑을 옅게 쓰면 커서만 다른 두 상태가 되어 더 헷갈린다. ⚠ **`--surface-2` 를 그대로 쓰면 안 된다.** 두 번 걸렸다(둘 다 실측): ① 밝은 테마에서 흰 바닥과 차이가 3% 뿐이라 **아무 일도 안 일어나 보인다.** ② 어두운 테마에서는 그 값이 **소계 띠(.st-sub)와 같은 색**이라, 평범한 줄에 마우스를 올리면 그 줄이 소계처럼 보인다 — 없는 것보다 나쁘다. 그래서 `color-mix` 한 식으로 양쪽을 덮지 않고 **테마마다 값을 따로 둔다**(`--row-hover`): 밝은 쪽은 소계 띠보다 한 단계 진하게, 어두운 쪽은 한 단계 밝게. ⚠ 클릭 가능 행은 위의 더 진한 「선택 예고편」 톤을 쓰므로 여기서 뺀다. 소계(.st-sub)· 선택(.sel)·경고(.danger-row) 는 배경이 **뜻을 지닌** 행이라 덮지 않는다. */ .tablewrap table tbody tr:not(.clickable):not(.sel):not(.st-sub):not(.danger-row):hover td { background: var(--row-hover); } /* ---------- 토스트 ---------- */ /* 서명 진행 오버레이 — TaxBill365 서명 창(팝업)이 떠 있는 동안 화면을 덮는다(issue.js `SignOverlay`, 2026-10-22). ⚠ 대화창(.overlay 200) 위 · 토스트(.toast-wrap 300) 아래 — 안내 토스트가 가려지지 않게. */ .sign-ov { position: fixed; inset: 0; z-index: 250; background: rgba(15, 18, 22, .5); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: pointer; } .sign-ov-card { width: min(460px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); padding: 20px 22px 16px; cursor: default; } .sign-ov-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .sign-ov-head b { font-size: 14.5px; font-weight: 800; line-height: 1.35; } .sign-ov-ic { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); } .sign-ov-ic svg.ic { width: 20px; height: 20px; } .sign-ov-sub { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; } .sign-ov-cap { font-size: 11px; font-weight: 800; color: var(--muted); margin: 0 0 4px; } .sign-ov-cap.bad { color: var(--danger); } .sign-ov-list { list-style: none; margin: 0 0 12px; padding: 4px 0; max-height: 150px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .sign-ov-list li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 10px; font-size: 12px; } .sign-ov-list li.bad { color: var(--danger); } .sign-ov-list li.bad { display: block; } .sign-ov-list li .why { display: block; margin-top: 2px; font-size: 11px; line-height: 1.5; opacity: .85; } .sign-ov-btns { display: flex; justify-content: flex-end; gap: 8px; } .sign-ov-foot { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 10px 0 0; } .sign-ov-spin { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: signovspin .8s linear infinite; } @keyframes signovspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .sign-ov-spin { animation: none; } } .toast-wrap { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 8px; } .toast { background: var(--ink); color: var(--surface); font-size: 12.5px; padding: 9px 14px; border-radius: var(--radius-sm); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s; } .toast.show { opacity: 1; transform: translateY(0); } .toast.ok { background: var(--success); } .toast.warn { background: var(--warning); } .toast.bad { background: var(--danger); } @media (max-width: 820px) { .brand { display: none; } .grid2, .grid3, .grid4, .split { grid-template-columns: 1fr; } .set-shell { flex-direction: column; } .set-nav { width: 100%; display: flex; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid var(--line); padding: 0; } .set-nav .grp { display: none; } .set-nav button { width: auto; white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; } .set-nav button.on { border-left: none; border-bottom-color: var(--accent); } } /* ---------- 로그인 게이트 (P3-2) — 세로 반분할(2026-10-01) ---------- 왼쪽 = 알림판(공지·업데이트, `EZ.loginBoard`) · 오른쪽 = 로그인 단계(`EZ.login`). ⚠ 알림판은 **두 테마 모두 남색 판**이다 — 그래서 색을 테마 토큰 블록에 두지 않고 `.loginwrap` 안에 한 번만 둔다(다크 블록에 다시 적을 것이 없다). ⚠ 860px 아래에서는 **로그인이 위**로 올라간다 — 휴대폰에서 공지부터 보이면 입력칸을 찾아 내려가야 한다. */ .loginwrap { --lgb: #13233a; --lgb-2: #1b2e4a; --lgb-glow: rgba(90, 146, 221, .20); --lgb-ink: #eef2f8; --lgb-soft: #c3cedc; --lgb-muted: #8b9db5; --lgb-line: rgba(255, 255, 255, .09); position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); background: var(--surface); } .lg-board { min-height: 0; overflow-y: auto; display: flex; justify-content: center; color-scheme: dark; background: radial-gradient(110% 55% at 0% 0%, var(--lgb-glow), transparent 62%), var(--lgb); color: var(--lgb-ink); } .lg-board-in { width: 100%; max-width: 600px; min-height: 100%; padding: 40px 48px 28px; display: flex; flex-direction: column; gap: 28px; } .lg-board-brand { display: flex; align-items: center; gap: 10px; } .lg-board-brand img { width: 26px; height: 26px; } .lg-board-brand b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .lg-cloud { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--lgb-muted); border: 1px solid var(--lgb-line); padding: 1px 6px; border-radius: var(--radius-sm); } .lg-lede { margin: -10px 0 0; font-size: 21px; line-height: 1.45; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; } .lg-lede span { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--lgb-muted); } .lg-blk-h { display: flex; align-items: baseline; gap: 8px; padding: 0 6px 9px; border-bottom: 1px solid var(--lgb-line); } .lg-blk-h h2 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--lgb-ink); } .lg-blk-h a { margin-left: auto; font-size: 11.5px; color: var(--lgb-muted); text-decoration: none; } .lg-blk-h a:hover { color: var(--lgb-ink); } /* 분류 칩 — 판이 늘 어두우므로 고정색이다(상태색 토큰은 테마마다 바뀌어 밝은 테마에서 판 위에 묻힌다) */ .lg-tag { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 38px; padding: 0 6px; border-radius: var(--radius-sm); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .lg-tag.hot { background: rgba(240, 128, 116, .16); color: #f5a197; } .lg-tag.warn { background: rgba(230, 170, 80, .16); color: #f0bf6e; } .lg-tag.info { background: rgba(140, 182, 240, .15); color: #a9c8f3; } .lg-tag.new { background: rgba(80, 200, 135, .15); color: #7ddaa5; } .lg-tag.fix { background: rgba(255, 255, 255, .08); color: var(--lgb-soft); } .lg-notices { list-style: none; margin: 0; padding: 0; } .lg-notices li { border-bottom: 1px solid var(--lgb-line); } .lg-nt { appearance: none; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 6px; background: none; border: 0; color: inherit; font: inherit; text-align: left; border-radius: var(--radius-sm); } button.lg-nt { cursor: pointer; } button.lg-nt:hover { background: var(--lgb-2); } .lg-nt:focus-visible { outline: 2px solid #a9c8f3; outline-offset: -2px; } .lg-nt-t { display: flex; align-items: center; gap: 6px; min-width: 0; } .lg-nt-x { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--lgb-soft); } .lg-nt.pinned .lg-nt-x { color: var(--lgb-ink); font-weight: 500; } .lg-nt[aria-expanded="true"] .lg-nt-x { white-space: normal; color: var(--lgb-ink); } .lg-pin { flex: none; width: 12px; height: 12px; color: #f5a197; } .lg-n { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #e5534b; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; display: grid; place-items: center; } .lg-nt time { font-size: 11.5px; color: var(--lgb-muted); font-variant-numeric: tabular-nums; } .lg-nt-b { padding: 0 6px 14px 54px; font-size: 12.5px; line-height: 1.7; color: var(--lgb-soft); } .lg-nt-b p { margin: 0 0 6px; max-width: 62ch; } .lg-nt-b .lg-meta { margin: 0; font-size: 11px; color: var(--lgb-muted); } .lg-rels { display: flex; flex-direction: column; gap: 18px; padding: 14px 6px 0; } .lg-rel-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .lg-rel-h time { font-size: 12.5px; font-weight: 700; color: var(--lgb-ink); font-variant-numeric: tabular-nums; } .lg-latest { font-size: 10px; font-weight: 700; line-height: 16px; color: #7ddaa5; border: 1px solid currentColor; padding: 0 6px; border-radius: 999px; } .lg-rel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .lg-rel li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12.5px; line-height: 20px; color: var(--lgb-soft); } .lg-board-f { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 16px 6px 0; border-top: 1px solid var(--lgb-line); font-size: 11.5px; color: var(--lgb-muted); } .lg-tel b { margin-left: 6px; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--lgb-ink); font-variant-numeric: tabular-nums; } .lg-remote { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--lgb-line); border-radius: var(--radius-sm); color: var(--lgb-ink); text-decoration: none; } .lg-remote:hover { background: var(--lgb-2); } .lg-remote svg { width: 12px; height: 12px; } /* 오른쪽 — 단계 상자. ⚠ 가운데 정렬을 `margin: auto` 로 한다: grid `place-items: center` 는 상자가 칸보다 길면(사업장 관리 목록) **위쪽이 잘려 스크롤로도 못 올라간다.** */ .lg-gate { min-height: 0; overflow-y: auto; display: flex; padding: 40px 24px; background: var(--surface); } .loginbox { width: 100%; max-width: 360px; margin: auto; } .loginbox.wide { max-width: 440px; } .lg-brand { display: none; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 15px; } /* 넓은 화면에선 알림판이 대신한다 */ .lg-brand .mark-ico { width: 22px; height: 22px; } .lg-head { margin-bottom: 24px; } .lg-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; } .lg-desc { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); } .lg-fields { display: flex; flex-direction: column; gap: 14px; } .lg-gate .field { gap: 5px; } .lg-gate .field span { font-size: 11px; } .lg-gate .field .finput { padding: 9px 11px; font-size: 13.5px; } .lg-gate .field input.lg-code { max-width: none; } /* 180px 제한은 사업장 관리 목록의 줄 안 입력칸 몫이다 */ .lg-err { margin: 12px 0 0; font-size: 12px; } .lg-go { width: 100%; margin-top: 20px; padding: 10px; font-size: 13.5px; } .lg-note { margin: 14px 0 0; text-align: center; line-height: 1.7; } .lg-note a { color: var(--accent); text-decoration: none; } .lg-note a:hover { text-decoration: underline; } .lg-alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 12px; text-align: center; } .lg-alt a { color: var(--accent); font-weight: 700; text-decoration: none; } .lg-alt a:hover { text-decoration: underline; } .lg-alt a.lg-demo { color: var(--ink-soft); } @media (max-width: 860px) { .loginwrap { grid-template-columns: 1fr; grid-template-rows: none; overflow-y: auto; } /* ⚠ min-height 를 auto 로 되돌린다 — 0 이면 쌓인 두 줄이 화면 높이를 나눠 가져 알림판이 로그인 안내·링크를 덮는다(줄이 내용보다 짧아진다). */ .lg-gate { order: -1; overflow: visible; min-height: auto; padding: 36px 20px 28px; } .lg-board { overflow: visible; min-height: auto; } .lg-board-in { padding: 32px 20px 24px; } .lg-brand { display: flex; } } .lg-colist { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; } .lg-co { appearance: none; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; } .lg-co:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); } .lg-co:disabled { opacity: .5; cursor: default; } .lg-co b { font-size: 12.5px; color: var(--ink); } .lg-co span { font-size: 11px; color: var(--muted); } /* ---- 권한 트리 (설정 › 사용자·권한 › 사용권한) ---- ⚠ 체크 = 사용, 해제 = 차단. 색으로 뒤집어 보이게 하지 않는다 — 「빨간 게 차단」처럼 읽히면 체크의 뜻이 헷갈린다. 그냥 풀린 체크박스다. */ .pt-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pt-bar .hint { margin: 0; } .permtree { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); } .pt-grp + .pt-grp { border-top: 1px solid var(--line-soft); } .pt-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--surface-2); font-size: 12px; cursor: pointer; } .pt-head b { font-weight: 700; color: var(--ink); } .pt-count { margin-left: auto; font-size: 10.5px; color: var(--muted); } .pt-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px; padding: 8px 10px 10px 26px; } .pt-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-soft); cursor: pointer; } .pt-alias { color: var(--muted-2); font-size: 10.5px; } .pt-srv { color: var(--success); font-size: 9.5px; border: 1px solid currentColor; border-radius: 2px; padding: 0 3px; margin-left: 3px; vertical-align: 1px; } /* ---- 샵코드 로그인·사업장 관리 (작업계획/19) ---- ⚠ 버튼을 **숨기지 않고 잠그므로**(`관리자만 정할 수 있습니다`) 잠긴 자리가 누르는 자리처럼 보이면 안 된다 — `.lg-locked` 는 무채로 둔다. */ .loginbox.shops { max-width: 520px; } .lg-code { letter-spacing: .08em; text-transform: uppercase; } input.lg-code { max-width: 180px; } .lg-codebig { margin: 14px 0 4px; padding: 14px; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .12em; color: var(--ink); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-sm); } .lg-shoplist { display: flex; flex-direction: column; gap: 8px; max-height: 58vh; overflow-y: auto; } .lg-shop { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); } .lg-shop-h { display: flex; align-items: center; gap: 8px; } .lg-shop-h b { font-size: 12.5px; color: var(--ink); } .lg-shop-h .lg-db { font-size: 10.5px; color: var(--muted-2); margin-right: auto; } .lg-shop-b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--muted); } .lg-shop-b > span:first-child { min-width: 44px; } .lg-shop-b b.lg-code { font-size: 14px; color: var(--ink); } .lg-locked { color: var(--muted-2); font-size: 11px; } .lg-warn { margin: 8px 0 0; padding-left: 16px; font-size: 11px; line-height: 1.55; color: var(--warning); } .lg-warn li { margin-top: 3px; } /* ---- 페이저(EZ.pager) — 목록 아래 이전/다음 ---- */ .pagerbar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 2px; } .pagerbar .hint { margin: 0; white-space: nowrap; } .pagerbar .btn[disabled] { opacity: .4; cursor: default; } /* ── 월별현황차트 — 차트 50% · 표 50% 가로 배치(SCR-0402) ───────────────────── ⚠ `minmax(0, 1fr)` 이어야 한다. 그냥 `1fr` 이면 격자 칸의 최소너비가 **내용 크기**라 넓은 표가 칸을 밀고 나가 50:50 이 깨진다(둘 다 안쪽에 스크롤이 있는데도 그렇다). ⚠ 좁은 화면에서는 **세로로 되돌린다** — 반씩 나누면 차트도 표도 못 읽는다. */ .ch-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; } @media (max-width: 900px) { .ch-split { grid-template-columns: minmax(0, 1fr); } } /* 표는 세로로만 구른다 — 머리글은 붙여 둬야 스크롤해도 어느 열인지 안다. */ .ch-split .tablewrap thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); } /* ⚠ **(합계)도 붙인다** — 달이 많으면 맨 아래로 밀려 잘린다(12달만 돼도 반쯤 가려졌다). 합계는 이 표에서 제일 먼저 보고 싶은 줄이라 스크롤해서 찾게 두면 안 된다. */ .ch-split .tablewrap tbody tr.ch-sum > td { position: sticky; bottom: 0; z-index: 1; background: var(--surface-2); border-top: 1px solid var(--line); } /* ========================================================================= 인쇄 (작업계획/21 §4 1단계) — 화면 표를 종이에 얹는다. 화면에서는 `#prHead`·`#prFoot` 가 숨어 있고, 인쇄에서만 나온다. ========================================================================= */ #prHead, #prFoot { display: none; } @media print { /* ⚠ **색을 강제로 유지한다** — 안 그러면 브라우저가 배경을 빼고 찍어 다크 테마에서 글씨가 흰색으로 남아 **백지처럼** 나온다. */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ⭐ 인쇄는 **언제나 밝은 팔레트**다 — 다크 테마로 찍으면 검은 배경이 종이에 깔린다. `:root` 토큰만 갈아 끼우면 화면 코드를 하나도 안 고쳐도 된다. */ :root, :root[data-theme="dark"], :root[data-theme="light"] { --ink: #000; --ink-soft: #222; --muted: #444; --muted-2: #666; --canvas: #fff; --surface: #fff; --surface-2: #f2f2f2; --line: #999; --line-soft: #ccc; --accent: #000; --accent-ink: #fff; --accent-soft: #eee; --accent-strong: #000; --danger: #000; --danger-soft: #eee; } html, body { background: #fff !important; } /* 껍데기는 전부 숨긴다 — 종이에는 표만 남는다. */ /* ⚠ 상단바의 실제 클래스는 **`.cmdsearch`** 다(`.topbar` 가 아니다) — 처음에 이름을 짐작했다가 로고·검색창이 종이에 찍혔다. */ .cmdsearch, .topbar, .sidenav, .doctabwrap, .ribbon, .statusbar, .toast, .toastwrap, .dlg-backdrop, .pagerbar { display: none !important; } /* ⚠ 셸이 화면 높이에 맞춰 스크롤하도록 짜여 있다 — 인쇄에서는 **풀어야** 한다. 안 풀면 첫 쪽만 나오고 나머지가 잘린다(가장 흔한 인쇄 사고다). */ html, body, #app, .shell, .shell-mid, .shell-main, .winbody { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; position: static !important; margin: 0 !important; padding: 0 !important; width: auto !important; } /* 화면 안쪽의 스크롤 상자(표·차트)도 같이 푼다. */ .tablewrap, .panel, .winbody > div { max-height: none !important; overflow: visible !important; } /* ⚠ `position: sticky` 는 인쇄에서 **내용 위에 겹쳐 찍힌다**(표 머리·합계 행). */ thead th, tbody tr.ch-sum > td, .ch-split .tablewrap thead th { position: static !important; } /* 조회 조건·버튼은 종이에 필요 없다. 조건은 머리말 부제로 이미 나간다. */ .toolbar, .btn, button, .field, input, select { display: none !important; } /* ⚠ **각주(`.foot-note`)도 숨긴다** — 「이 값이 왜 이런가」를 설명하는 **화면 안내문**이지 보고서 내용이 아니다. 종이에 꼭 남길 한 줄이 있으면 `EZ.print.run({note})` 로 준다. */ .foot-note, .hint, .err-text { display: none !important; } /* ⚠ 다만 **표 안의 입력칸**은 값이 보여야 한다 — 전표 화면이 값을 input 으로 그린다. */ table input, table select { display: inline-block !important; border: 0 !important; background: transparent !important; padding: 0 !important; color: #000 !important; } /* 머리말 — 사업장명 · 보고서명 · 기간 · 출력일시 */ #prHead { display: block; margin-bottom: 4mm; } #prHead .pr-co { font-size: 10pt; } #prHead .pr-title { font-size: 15pt; font-weight: 800; text-align: center; margin-top: -4mm; } #prHead .pr-sub { font-size: 9.5pt; text-align: center; color: #333; } #prHead .pr-stamp { font-size: 8.5pt; text-align: right; color: #555; margin-top: -4mm; } /* ⛔ 「목록의 일부입니다」 — 커서 페이징 탓에 화면이 받아 둔 쪽만 찍힐 때만 나온다. ⚠ **눈에 띄어야 한다.** 이 줄을 못 보면 반쪽 종이를 전부라고 읽는다 — 흑백 프린터에서도 남게 테두리를 두른다(색만으로 구분하면 사라진다). */ #prHead .pr-partial { margin-top: 1.5mm; padding: 1mm 2mm; border: .4mm solid #000; font-size: 9pt; font-weight: 700; text-align: center; } #prFoot:not(:empty) { display: block; margin-top: 3mm; font-size: 8.5pt; color: #333; } table { width: 100% !important; border-collapse: collapse; font-size: 9pt; } th, td { border: 1px solid #999 !important; padding: 1mm 1.5mm !important; } th { background: #eee !important; } /* ⭐ 표 머리를 **쪽마다 반복**한다 — 두 쪽째부터 어느 열인지 모르면 표가 아니다. */ thead { display: table-header-group; } tfoot { display: table-footer-group; } /* 행이 쪽 경계에서 잘리지 않게. */ tr, .panel { break-inside: avoid; page-break-inside: avoid; } /* 차트는 그대로 찍되 쪽을 넘지 않게. */ svg { max-width: 100% !important; } /* ⭐ 화면 안에 표가 여럿일 때 **하나만** 찍는다(`EZ.print` 의 `scope`). */ .winbody.pr-narrow > *:not(.pr-scope) { display: none !important; } .pr-scope { display: block !important; } } /* ========================================================================= mm 양식(작업계획/21) — 거래명세서(2단계) · 전용 보고서 4종(3단계)이 함께 쓴다. ⚠ **`mm` 단위가 핵심이다.** 원본이 `GraphicsUnit.Millimeter` 로 그리므로 환산이 없다. ⚠ 쪽 크기는 양식마다 다르다 — `EZ.mm.page(w, h, …)` 가 인라인으로 준다. 여기 `.tf-page` 의 값은 **거래명세서 기본값**이고, 인라인이 이긴다. ========================================================================= */ #tfSheet { display: none; } /* 거래명세서 기본: 한 장 = 두 연(連). 위 연은 y=0, 아래 연은 `SE`(원본 150 → 지금 153) 에서 시작한다. ⭐ **높이는 잉크가 끝나는 곳까지만** 잡는다(2026-09-22). 아래 연에는 ⑤ 결제·인수자가 없으므로(원본이 공급자용에만 그린다) 잉크는 ④ 합계에서 끝난다: `153 + 128 = 281` → **282mm**. `@page` 위 5 · 아래 5 를 더해도 `5 + 282 + 5 = 292 ≤ 297` 이라 들어간다. 🐞 예전엔 **288mm** 였다. 그러면 아래 여백을 4mm 밖에 줄 수 없어 쪽 상자가 종이 끝에 닿는데, 그 상태로 인쇄하면 브라우저가 「인쇄 가능 영역에 맞추겠다」며 **종이째로 축소**한다 (🔬 실측 97.37% → ⑤ 가로가 190 → 185mm, 좌우 여백이 2.8mm 씩 더 생기고 아래로 7.8mm 밀림). ⚠ 여기 값은 **기본값**이고 `tranform.js` 의 `PAGE_H` 가 인라인으로 이긴다 — 두 값을 같이 고친다. */ /* ⭐ 폭은 **양식이 실제로 쓰는 만큼**이다(2026-09-22 「양옆 여백을 같게」). 🔬 DOM 실측: 거래명세서는 `1.5mm` 에서 틀 폭만큼만 쓴다(틀이 `box(1.5, …, FRAME_W, …)`). 예전에는 204mm 로 둬서 오른쪽에 **쓰지 않는 12.5mm** 가 붙어 있었고, 용지(210mm)에 `@page` 여백 3/3 을 주니 실제 여백이 **왼쪽 4.5mm · 오른쪽 15.5mm**(11mm 차이)로 보였다. ⭐ 2026-09-23: 좌우 여백을 **10 → 7mm** 로 줄이라는 지시에 따라 **틀을 190 → 196mm** 로 넓혔다(`tranform.js` `FRAME_W`). 좌우가 같아지는 여백은 `(210 − 잉크) / 2` **하나뿐**이라 여백을 고르는 게 아니라 잉크 폭을 고르는 일이다. 쪽 폭 = 1.5 + 196 + 1.5 = **199mm** · `@page` 좌우 **5.5mm** → 틀 기준 **7 / 7** ✅ ⚠ 양식 좌표는 **한 줄도 바꾸지 않았다** — `tranform.js` 의 `sx`/`sw` 가 그리는 순간에만 가로로 늘린다(세로·글꼴은 그대로). 품목 열 설정값도 자동으로 따라온다. ⚠ 여기 값은 **기본값**이고 `tranform.js` 의 `PAGE_W` 가 인라인으로 이긴다 — 같이 고친다. ⚠ `@page` 좌우 여백과 **짝이어야** 한다(합이 210 을 넘으면 브라우저가 빈 쪽을 하나 더 낸다). */ .tf-page { position: relative; width: 199mm; height: 282mm; page-break-after: always; break-after: page; } .tf-page:last-child { page-break-after: auto; break-after: auto; } /* 🐞 폭을 **204mm 로 박아 뒀다** — 거래명세서 쪽 폭이 그것이라 맞았지만, 뒤에 만든 세금계산서(190mm)·계산서(170mm)에서 **14~34mm 삐져나갔다**(DOM 실측으로 잡았다). 자식은 절대 배치라 폭에 안 매인다 — 쪽을 따라가게 둔다. */ .tf-copy { position: absolute; left: 0; width: 100%; } /* 글자 — 원본 폰트 크기(ft_9 ≈ 9pt, ft_7 ≈ 7pt). ⭐ **`pre` 다**(`nowrap` 이 아니다). 원본은 자간을 **공백으로** 낸다 — 「품 목 규 격」·「이 금액을 함」·「일 계 표」. HTML 은 연속 공백을 한 칸으로 접으므로 `nowrap` 만 주면 **글자가 붙어 버린다** (「품목규격」이 되고, 「이 금액을 함」의 빈자리에 들어가야 할 「영수/청구」가 겹친다). `pre` 는 공백을 살리면서 줄바꿈도 막는다. */ .tf-t { position: absolute; white-space: pre; line-height: 1; } /* ⭐ 글자 크기는 **포인트 그대로**다. 원본 `new Font("명조", 9)` 는 단위를 안 주면 GraphicsUnit.Point 라, `PageUnit = Millimeter` 여도 종이 위 크기는 9pt 다. ⚠ 여기를 눈대중으로 줄이면(7.5pt 로 뒀었다) 칸은 맞는데 **글씨만 작은 종이**가 나온다. ft_9=9pt Bold · ft_9_n=9pt · ft_7=7pt · ft_11_b=11pt Bold · ft_big=14pt · ft_title_18=18pt */ .tf-9 { font-size: 9pt; font-weight: 700; } .tf-9n { font-size: 9pt; } .tf-7 { font-size: 7pt; } .tf-title { font-size: 18pt; letter-spacing: .3mm; } /* 세금계산서(4단계) — 원본 ft_large=18pt Bold · ft_8=8pt · ft_5=5pt. ⚠ ft_5(5pt)는 「사업장/주 소」 두 줄 라벨 전용이다 — 칸이 4mm 라 그것밖에 안 들어간다. */ .tf-t18 { font-size: 18pt; font-weight: 700; letter-spacing: .2mm; } /* 계산서(면세) 제목 — 원본 ft_large_16 = **16pt** Bold(세금계산서보다 작다). */ .tf-t16 { font-size: 16pt; font-weight: 700; letter-spacing: .2mm; } .tf-8 { font-size: 8pt; } .tf-5 { font-size: 5pt; } /* 전용 보고서(3단계) — 원본 `ft_title`/`ft_title_25` = 25pt Bold · `ft_large_14` = 14pt */ .tf-t25 { font-size: 25pt; font-weight: 700; } .tf-t14 { font-size: 14pt; } .tf-b { font-weight: 700; } /* 선·상자 — 원본 pn(0.2mm) / pn2(0.5mm) */ .tf-box { position: absolute; border: .2mm solid currentColor; } .tf-box.w2 { border-width: .35mm; } .tf-h { position: absolute; border-top: .2mm solid currentColor; } .tf-v { position: absolute; border-left: .2mm solid currentColor; } /* ⭐ 색 — 원본은 공급자용 **빨강**, 공급받는자용 **파랑**이다(L808·L882). ⚠ 설정 `colors=False` 면 원본이 전부 검정으로 그린다(L708-718) — 흑백 프린터용이다. 그 경우 `#tfSheet.mono` 를 붙인다. */ .tf-t.r, .tf-box.r, .tf-h.r, .tf-v.r { color: #c00; } .tf-t.b, .tf-box.b, .tf-h.b, .tf-v.b { color: #06c; } #tfSheet.mono .tf-t, #tfSheet.mono .tf-box, #tfSheet.mono .tf-h, #tfSheet.mono .tf-v { color: #000 !important; } #tfSheet.mono .tf-stripe { background: transparent !important; } /* 격줄 무늬(원본 L801-802) — 공급자용 연분홍, 공급받는자용 연하늘 */ /* 그림(직인) — 원본 `DrawImage`. 절대 배치라 다른 조각과 같은 규칙이다. ⚠ 인쇄에서 **배경이 하얗게 덮이지 않게** 투명 PNG 를 그대로 쓴다(칸선 위에 얹힌다). */ .tf-img { position: absolute; object-fit: contain; } .tf-stripe { position: absolute; } .tf-stripe.r { background: rgb(255, 238, 238); } .tf-stripe.b { background: rgb(215, 231, 255); } /* ⭐ 정렬 세 가지 — 원본 `StringFormat` 을 그대로 옮긴 것. JS 의 `at/atL/atR/atBox` 짝이다. `tf-c` 는 좌표를 **가운데**로 삼는다 — 폭을 모르는 채 가운데를 맞춰야 해서 `translateX(-50%)`. ⚠ 그래서 `tf-c` 는 **줄바꿈을 막아야** 한다(`nowrap`) — 접히면 가운데가 어긋난다. */ /* ⚠ 여기도 `pre` 다 — `.tf-t` 보다 **뒤에 있어서** `nowrap` 을 주면 그쪽을 덮어 가운데 정렬 라벨(대부분이다)의 자간 공백이 통째로 접힌다. 한 번 그렇게 물렸다. */ .tf-c { transform: translateX(-50%); white-space: pre; } /* ⭐ 세로 가운데 — 원본 `LineAlignment = Center` 는 `Point` 를 글자의 **가운데**로 본다. ⚠ 원본 **파일마다 다르다**(`EZ.mm.forForm` 표) — 놓치면 글자가 반 줄씩 밀린다. */ .tf-vc { transform: translateY(-50%); } .tf-c.tf-vc { transform: translate(-50%, -50%); } .tf-r { text-align: right; } /* `Rectangle` + `sf2`(가로 가운데) — 격자 칸에 쓴다. `tf-r` 과 함께 붙으면 오른쪽이 이긴다. */ .tf-ct { justify-content: center; text-align: center; } .tf-bx.tf-r { justify-content: flex-end; } /* `sf2` — 원본이 `Rectangle(x, y, w, 8)` 에 그리고 **세로만 가운데**로 맞춘다. 8mm 칸 안에 글이 앉으므로 좌표(y)는 글 위가 아니라 **칸 위**다. */ /* 높이는 JS 가 준다(원본 `Rectangle` 의 높이). ⚠ 줄바꿈을 **막지 않는다** — 원본 `sf2` 에 `NoWrap` 이 없어 칸 안에서 접힌다(주소 칸). */ /* ⚠ `Rectangle` 칸은 **접혀야** 한다(원본 `sf2` 에 NoWrap 이 없다) — `pre-wrap` 으로 공백은 살리고 줄바꿈은 허용한다. `.tf-t` 의 `pre` 를 그대로 물려받으면 주소가 안 접힌다. */ .tf-bx { display: flex; align-items: center; overflow: hidden; white-space: pre-wrap; } /* 테두리가 있는 격자 칸만 안쪽 여백을 준다 — 안 주면 숫자가 선에 붙어 읽기 나쁘다. ⚠ `.tf-bx` 전체에 주면 **거래명세서의 상호·주소가 0.8mm 밀린다**(원본은 여백이 없다). */ .tf-bx.tf-pad { padding: 0 .8mm; box-sizing: border-box; } /* ⚠ 긴 상품명은 **잘라야** 한다 — 안 자르면 옆 칸을 덮어 종이를 못 읽는다. 폭은 그 열에서 **다음 열까지의 간격**이다(원본 좌표 기준). */ .tf-clip15 { max-width: 15mm; overflow: hidden; } .tf-clip20 { max-width: 20mm; overflow: hidden; } .tf-clip35 { max-width: 35mm; overflow: hidden; } /* ft_11_b(등록번호) · ft_big(결제/인수자) — ft_big 은 **굵지 않다**(원본에 Bold 가 없다). */ .tf-11b { font-size: 11pt; font-weight: 700; } .tf-big { font-size: 14pt; } /* ========================================================================= 견적·발주서 양식(작업계획/21 · D계열) — 원본 `Report_Order` XtraReport. ⭐ 앞선 양식들과 달리 **흐름 배치**다(절대 mm 좌표가 아니다) — 원본이 밴드 (PageHeader / Detail / PageFooter) 구조라 HTML 표가 그대로 대응한다. ⚠ 좌표 단위가 **1/100 인치**였다(×0.254 → mm) — `orderform.js` 주석 참조. ========================================================================= */ .of-page { width: 100%; color: #000; font-family: "굴림", Gulim, sans-serif; } /* 제목 — 원본 `xrLbl_Title` 이 폭 156.7mm 에 왼쪽부터 깔리고, 쪽번호가 오른쪽에 붙는다. */ .of-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 3mm; } .of-title { font-size: 20pt; font-weight: 700; letter-spacing: 1mm; } .of-page-no { font-size: 12pt; } /* 수신 / 공급자 — 원본은 92.7mm 짜리 표 둘을 나란히 둔다(사이 4.6mm). */ .of-two { display: flex; gap: 4.6mm; align-items: stretch; margin-bottom: 2mm; /* 직인을 여기 기준으로 얹는다(원본 절대 좌표를 흐름 배치로 옮긴 자리). */ position: relative; } /* 직인 — 원본 `xrStamp` (176.0mm, 17.7mm) 14×14mm. 표 위에서 4.3mm, 오른끝에서 0.75mm. */ .of-stamp { position: absolute; right: .75mm; top: 4.3mm; width: 14mm; height: 14mm; object-fit: contain; } /* ⚠ `min-width: 0` 이 있어야 `gap` 을 빼고 반씩 나눈다 — 없으면 표가 제 내용 폭을 최소값으로 버텨 둘이 합쳐 100%+gap 이 되어 오른쪽으로 3.4mm 삐져나갔다. */ .of-two > table { flex: 1 1 0; min-width: 0; } #tfSheet .of-page table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9.75pt; } #tfSheet .of-page th, #tfSheet .of-page td { /* 여백 — 원본 DevExpress 기본(2/100in ≈ 0.5mm)에 맞춘다. 1mm 로 뒀더니 「단위」(칸 8.9mm)가 0.2mm 넘쳐 두 줄로 접혔다. */ border: .2mm solid #000; padding: .6mm .5mm; vertical-align: middle; /* ⚠ 원본 라벨의 자간이 공백이다(「수 신」·「상 호」) — 접히면 원본과 달라진다. */ white-space: pre-wrap; /* 🐞 처음에 `word-break: break-all` 을 줬더니 **짧은 값까지 쪼갰다** — 「123-45-67890」이 두 줄, 「TEL/FAX」가 「TEL/FA X」, 「단위」가 「단 위」가 됐다. 긴 글은 공백에서 접히면 되고(주소), 정말 안 접히는 것만 `anywhere` 로 푼다. */ overflow-wrap: break-word; } /* ⚠ 라벨은 **접지 않는다** — 원본 셀은 `Multiline` 이 아니라 넘치면 잘린다. 접히게 두면 「TEL/FAX」가 「TEL/FA X」, 「단위」가 「단 위」가 된다. */ #tfSheet .of-page th { font-weight: 700; text-align: center; background: #fff; white-space: pre; overflow: hidden; } #tfSheet .of-page td.r { text-align: right; } #tfSheet .of-page td.c, #tfSheet .of-page th.c { text-align: center; } /* 원본 행 비중(`XRTableRow.Weight`) — **행마다 높이가 다르다.** 수신 표: 수신 .0982 · 일자 .0982 · 건명 .2902 · 「아래와 같이」 .2475(합 .734) → 13.4% / 13.4% / 39.5% / 33.7%. 건명 칸이 가장 크다(제목이 길 수 있어서다). ⚠ 균등하게 두면 건명이 좁아 접히고, 두 표의 줄이 어긋나 보인다. */ .of-recv { height: 43.7mm; } .of-recv tr:nth-child(1), .of-recv tr:nth-child(2) { height: 13.4%; } .of-recv tr:nth-child(3) { height: 39.5%; } .of-recv tr:nth-child(4) { height: 33.7%; } /* 공급자 표는 다섯 줄이 균등하다(원본에 Weight 가 없다 = 기본값 1). */ .of-sup { height: 43.7mm; } .of-sup tr { height: 20%; } /* 「아래와 같이 …합니다.」 — 원본은 표의 마지막 줄을 한 칸으로 합쳐 왼쪽에 적는다. */ .of-say { font-weight: 700; } /* 합계금액 줄 — 가운데가 한글 금액이다. */ .of-sum { margin-bottom: 2mm; } .of-kor { font-weight: 700; } .of-won { text-align: right; } /* 품목 표 — 열 폭은 원본 `Weight` 를 백분율로 옮겨 `` 이 갖는다. ⭐ `thead` 라 쪽이 넘어가면 브라우저가 머리를 다시 찍는다 — 원본 PageHeader 되풀이와 같다. */ .of-items { margin-bottom: 2mm; } .of-items thead th { font-size: 10pt; } /* 꼬리 — 원본 PageFooter. 쪽마다가 아니라 **끝에 한 번**이다(품목이 흐르므로). */ .of-foot td { min-height: 5mm; } @media print { /* 양식을 찍을 때는 **화면 것을 통째로 숨기고** 양식만 남긴다. */ body.tf-printing .shell { display: none !important; } body.tf-printing #prHead, body.tf-printing #prFoot { display: none !important; } body.tf-printing #tfSheet { display: block !important; } /* ⭐ **「양식지 사용」이면 틀을 안 찍는다** — 인쇄소에서 찍어 온 양식지에 값만 얹는 모드다(원본 `trantool`/`taxtool`). 틀을 또 그리면 선이 두 겹이 된다. ⚠ 화면(미리보기)에서는 **보여 준다** — 안 보여 주면 값만 떠서 어디에 찍히는지 알 수 없다. 그래서 `@media print` 안에만 둔다(원본 `!is_printing` 과 같은 뜻). */ #tfSheet .tf-frame { display: none !important; } /* 양식은 색이 의미다(빨강=공급자용) — 색 보존을 강제한다. */ #tfSheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ---------- 직인(도장) 등록 — 설정 › 회사정보 ---------- 원본 `INPUTCONFIG.cs` 의 `Picture_stamp` 가 **53×53px 흰 바탕 + 1px 테두리**다 (L2474-2478). 같은 크기감으로 둔다 — 양식에 16×16mm 로 찍히는 도장이라 크게 보여 줄 이유가 없고, 작게 보여야 「작은 정사각형에 들어갈 그림」이라는 게 전달된다. ⚠ 바탕을 **흰색**으로 둔다(다크 테마에서도) — 투명 PNG 의 흰 여백이 종이에서 어떻게 보일지를 이 칸이 미리 보여 주는 것이다. 어두운 바탕에 올리면 흰 테두리가 안 보인다. */ .stamp-row { display: flex; gap: 14px; align-items: flex-start; } .stamp-box { width: 62px; height: 62px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 3px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .stamp-box img { max-width: 100%; max-height: 100%; display: block; } .stamp-box span { font-size: 10.5px; color: #9aa0a6; } .stamp-side { min-width: 0; } /* ========================================================================= 급여대장 · 급여명세서 양식(작업계획/21 · D계열) — 원본 `rptSalaryList` · `rptSalary_Personal` XtraReport. 좌표 단위는 **1/100 인치**(×0.254 → mm). ⭐ 견적서(`.of-`)와 같은 **흐름 배치**다. 폭은 `salaryform.js` 가 원본 `Weight` 를 mm 로 내려 `` 에 박아 준다 — CSS 는 **높이·글꼴·테두리만** 맡는다. ⚠ 글꼴 크기가 원본에 아주 작게 잡혀 있다(대장 값 칸 5.5pt) — 가로 A4 한 장에 25칸이 넘게 들어가야 해서 그렇다. 키우면 칸이 넘쳐 접힌다. ========================================================================= */ .sf { width: 100%; color: #000; font-family: "굴림", Gulim, sans-serif; } #tfSheet .sf-t { width: 100%; border-collapse: collapse; table-layout: fixed; } #tfSheet .sf-t th, #tfSheet .sf-t td { border: .2mm solid #000; padding: 0 .4mm; vertical-align: middle; /* ⚠ 라벨 자간이 공백으로 벌어져 있다(「회 사 부 담 분」) — 접히면 원본과 달라진다. */ white-space: pre; overflow: hidden; } #tfSheet .sf-t th { font-weight: 400; text-align: center; background: #fff; } #tfSheet .sf-l { text-align: left; } #tfSheet .sf-c { text-align: center; } #tfSheet .sf-r { text-align: right; } /* ---------- 급여대장 (A4 가로) ---------- */ /* 머리 — 회사명(왼쪽, 6pt) · 제목(가운데, 10pt 굵게) · 급여일(오른쪽, 6pt) · 결재칸(오른쪽 끝). ⚠ 원본은 절대 좌표로 넷을 흩어 놓는다(회사명 x=0 · 제목 x=92.1mm · 급여일 x=215.6mm · 결재 x=247.4mm). 흐름 배치로 옮기면서 **같은 순서·같은 정렬**만 지켰다. */ .sf-list .sf-head { position: relative; height: 12.2mm; margin-bottom: .6mm; } .sf-list .sf-title { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 10pt; font-weight: 700; } .sf-list .sf-co { position: absolute; left: 0; top: 6.6mm; font-size: 6pt; } .sf-list .sf-day { position: absolute; right: 39.4mm; top: 6.6mm; font-size: 6pt; } /* 결재 — 원본 `xrTable13` (x=247.4mm) 39.4×15.2mm. 라벨 4.4mm + 서명 10.9mm. */ #tfSheet .sf-appr { position: absolute; right: 0; top: 0; width: 39.4mm; } #tfSheet .sf-appr th, #tfSheet .sf-appr td { font-size: 6pt; } #tfSheet .sf-appr tr:first-child th { height: 4.4mm; } #tfSheet .sf-appr tr:last-child td { height: 10.9mm; } /* 본표 — Detail 20u = 5.08mm, 머리 두 단도 각 20u. 값은 5.5pt. */ /* ⚠ 글쒄 크기를 **table 에 주면 진다** — 전역 `thead th { font-size: 11px }` 가 상속된 값을 이긴다(상속은 직접 선언에 무조건 진다 — 구상도와 별개다). 한 번 이것에 걸려 머리줄이 11px 로 커지면서 칸 22개가 넘쳤다. 그래서 th·td 를 직접 지정한다. */ #tfSheet .sf-main th, #tfSheet .sf-main td { font-size: 5.5pt; padding: 0 .2mm; } /* 칸마다 다른 글쒄 — 원본 Designer 값(5F / 5.5F / 6F). ⚠ `#tfSheet .sf-t th.sf-f5` 처럼 **직접 지정**해야 한다 — 전역 `thead th` 가 이긴다. */ #tfSheet .sf-t th.sf-f5, #tfSheet .sf-t td.sf-f5 { font-size: 5pt; } /* ⚠ 5pt 라바만 **가로 여백을 없얰다**(원본과 일부러 다를게 한 자리). 원본은 근무·연장·야간·횴일 을 3.97mm 칸에 5pt 굴림으로 넣는다. GDI+ 의 굴림은 그 크기에서 매우 촌촌해 가지만 밌로우자(DirectWrite)는 조금 넓어서 **0.4mm 넘쳤다**. 폭을 늘리면 뒤 칸이 전부 밀리뭐로, 여백만 지운다 — 원본도 이 넷은 `WordWrap=false` 로 넘치면 자른다(같은 자리에서 같은 토상을 빌린 서이다). */ #tfSheet .sf-t th.sf-f5 { padding-left: 0; padding-right: 0; } #tfSheet .sf-t th.sf-f55, #tfSheet .sf-t td.sf-f55 { font-size: 5.5pt; } #tfSheet .sf-t th.sf-f6, #tfSheet .sf-t td.sf-f6 { font-size: 6pt; } /* ⚠ 값 칸은 **접힐 수 있게** 둔다 — 원본 `XRTableCell` 기본값이 `WordWrap = true` 다. 이름이 여섯 자인 사원(「준우뷰티회현」)이 있어서, 안 접으면 글자가 쟘린다. 반대로 **머리줄(th)은 접지 않는다** — 원본 라바은 자가이 공백이라 접혀밌리면 원본과 달라진다. */ #tfSheet .sf-main tbody td { white-space: normal; overflow-wrap: break-word; } #tfSheet .sf-main th { height: 5.08mm; } #tfSheet .sf-main tbody td { height: 5.08mm; } /* 합계줄 — 원본은 굵게 하지 않는다(다른 값 칸과 같은 5.5pt다). 25u = 6.35mm. */ #tfSheet .sf-main .sf-sumrow td { height: 6.35mm; } /* 하단 3블록 — 줄마다 25u = 6.35mm. 라벨은 7pt, 값은 5.5pt. */ #tfSheet .sf-foot { margin-top: 5.08mm; } #tfSheet .sf-foot th, #tfSheet .sf-foot td { font-size: 5.5pt; } #tfSheet .sf-foot th { height: 6.35mm; } #tfSheet .sf-foot td { height: 6.35mm; } #tfSheet .sf-foot .sf-blk { font-size: 7pt; } /* 급여성 총계 값 — 원본 `xrTableCellTotal` 이 8pt 굵게다(이 종이에서 제일 큰 숫자). */ #tfSheet .sf-foot .sf-big { font-size: 8pt; font-weight: 700; } /* 비고 — 50u = 12.7mm, 8pt, **여러 줄**(원본 `cellBigo.Multiline = true`). */ #tfSheet .sf-foot .sf-bigo { height: 12.7mm; font-size: 8pt; white-space: pre-wrap; vertical-align: top; padding: .6mm .8mm; } /* ---------- 급여명세서 (A4 세로 · 한 사람당 한 장) ---------- */ /* ⭐ `PageBreak.BeforeBand` — 원본이 사람마다 쪽을 넘긴다. 마지막 장 뒤에는 넘기지 않는다 (빈 종이 한 장이 더 나온다). */ .sf-slip { page-break-after: always; break-after: page; } .sf-slip:last-child { page-break-after: auto; break-after: auto; } .sf-slip .sf-stitle { text-align: center; font-size: 15pt; font-weight: 700; margin-bottom: 3.3mm; } /* 부서·확인·성명·계좌번호 한 줄 — 원본 44u = 11.2mm, 10pt 굵게. */ #tfSheet .sf-who { margin-bottom: 3.6mm; } #tfSheet .sf-who th, #tfSheet .sf-who td { font-size: 10pt; font-weight: 700; } #tfSheet .sf-who td, #tfSheet .sf-who th { height: 5.6mm; text-align: center; } /* ⚠ 계좌번호는 길어서 **접히게** 둔다 — 다른 칸은 접지 않는다(위 공통 규칙). */ #tfSheet .sf-who .sf-acct { white-space: normal; overflow-wrap: break-word; } /* 지급총액·공제총액·차인지급액 — 22u = 5.6mm. ⚠ 원본 라벨이 「차감」이 아니라 **「차인지급액」**이다. */ #tfSheet .sf-tot3 { margin-bottom: 3.6mm; } #tfSheet .sf-tot3 th, #tfSheet .sf-tot3 td { font-size: 10pt; font-weight: 700; } #tfSheet .sf-tot3 td, #tfSheet .sf-tot3 th { height: 5.6mm; text-align: center; } /* 「지급사항」·「공제사항」·「기타사항」 머리 — 원본은 표의 첫 줄(왼쪽, 10pt 굵게)이다. */ .sf-slip .sf-blkttl { font-size: 10pt; font-weight: 700; text-align: left; border: .2mm solid #000; border-bottom: 0; padding: 1.4mm 1mm .6mm; } #tfSheet .sf-grid { margin-bottom: 3.6mm; } #tfSheet .sf-grid th, #tfSheet .sf-grid td { font-size: 7pt; } #tfSheet .sf-grid th { height: 4.2mm; } #tfSheet .sf-grid td { height: 4.5mm; } /* 기타사항 — 5줄(각 16.8u ≈ 4.3mm). 원본도 빈 줄을 그대로 낸다(손으로 적는 자리다). */ #tfSheet .sf-etc th, #tfSheet .sf-etc td { font-size: 7pt; } #tfSheet .sf-etc td { height: 4.3mm; text-align: left; padding: 0 1mm; white-space: pre; } /* ========================================================================= mm 양식 **미리보기**(`EZ.mmpreview`, 2026-09-22 사용자 요청) ⭐ 양식은 `#tfSheet` 안에 있을 때 `display:none` 이고 `@media print` 에서만 보인다. 미리보기는 **화면에서 보여야** 하므로 대화창 안의 `.mp-sheet` 를 따로 둔다 (같은 `.tf-*` 자식 규칙을 그대로 쓰되 감추는 규칙만 안 받는다). ⚠ 여기의 `.tf-frame` 은 **보인다** — 「양식지 사용」이어도 화면에서는 틀을 보여 줘야 어디에 찍히는지 알 수 있다(원본 `!is_printing` 과 같은 뜻). ========================================================================= */ .mp-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .mp-bar .mp-sp { flex: 1; } .mp-drag-hint { display: flex; gap: 5px; align-items: center; } /* 종이를 얹는 바탕 — 회색이라 종이 경계가 보인다. */ .mp-scroll { max-height: 62vh; overflow: auto; background: #6b6b73; border: 1px solid var(--line); border-radius: 6px; padding: 12px; } .mp-zoom { transform-origin: top left; } /* ⭐ **용지** — 위아래·양옆 빈 공간까지 보여 준다(2026-09-22 사용자 요청). 크기(210×297mm)와 여백(`padding`)은 `EZ.mmpreview` 가 인라인으로 준다 — ⚠ 여백은 인쇄의 `@page margin` 과 **같은 값**이어야 하므로 CSS 에 박지 않는다. ⭐ `border-box` 라 `offsetWidth` 가 여백을 포함한 용지 폭 그대로다(배율 계산이 그걸 쓴다). */ .mp-paper { box-sizing: border-box; background: #fff; margin: 0 auto 14px; box-shadow: 0 1px 8px rgba(0, 0, 0, .28); position: relative; } .mp-paper:last-child { margin-bottom: 0; } /* 바탕은 투명하다 — 종이가 흰색을 낸다(바탕까지 흰색이면 여백이 안 보인다). */ /* ⚠ **글 선택을 끈다** — 메모를 끌면 지나가는 칸이 전부 파랗게 선택되어 양식이 보이지 않았다(🔬 2026-09-22 실측). 포인터 `preventDefault` 로는 드래그 선택이 다 안 막힌다. ⚠ 인쇄 미리보기는 **종이를 보는 곳**이다 — 글을 긁을 자리가 아니다(전표 화면에 있다). */ .mp-sheet { background: transparent; -webkit-user-select: none; user-select: none; } /* ⚠ 양식 쪽은 이제 **용지 안에** 있다 — 그림자·바탕·아래여백을 갖지 않는다(용지가 갖는다). `page-break-after` 는 인쇄용이라 화면에서는 뜻이 없다. */ .mp-paper .tf-page { background: transparent; box-shadow: none; } /* ⚠ 흑백 설정(`colors=false`)은 `#tfSheet.mono` 규칙이 `#tfSheet` 에 매여 있어 여기서 다시 쓴다 — 미리보기도 인쇄와 같아야 한다. */ .mp-sheet.mono .tf-t, .mp-sheet.mono .tf-box, .mp-sheet.mono .tf-h, .mp-sheet.mono .tf-v { color: #000 !important; } .mp-sheet.mono .tf-stripe { background: transparent !important; } /* ⭐ 끌 수 있는 조각 — 잡을 수 있다는 것이 **보여야** 한다. */ .mp-sheet .mp-draggable { cursor: grab; outline: .4mm dashed #06c; outline-offset: .3mm; background: rgba(0, 102, 204, .07); touch-action: none; /* ⚠ 글이 짧을 때도 잡을 수 있게 — 띄운 뒤에는 상자가 글 너버만하다. */ min-width: 8mm; } .mp-sheet .mp-draggable:hover { background: rgba(0, 102, 204, .15); } .mp-sheet .mp-draggable:active { cursor: grabbing; } /* ⭐ 방향키로 미세이동하니 **초점이 보여야** 한다 — 어떤 조각이 움질지 알 수 없으면 위험하다. */ .mp-sheet .mp-draggable:focus { outline: .5mm solid #06c; outline-offset: .3mm; background: rgba(0, 102, 204, .2); } .mp-sheet .mp-draggable:focus-visible { outline: .5mm solid #06c; } .mp-pos { margin-top: 8px; display: flex; gap: 5px; align-items: center; min-height: 18px; } @media print { /* ⛔ 미리보기 대화창은 **절대 인쇄에 끼어들지 않는다** — 인쇄는 `#tfSheet` 가 한다. (대화창은 인쇄 전에 닫지만, 남아 있어도 종이에 나오지 않게 못을 박는다.) */ .overlay, .mp-scroll { display: none !important; } }