/* 팩토리세인 운영 대시보드 — 스타일. 2026-09-20: 문서 하나에 스타일·스크립트를 전부 인라인해 두었더니 1.3MB 를 넘겨 아티팩트 읽기/게시가 403 으로 막히는 일이 있었다. 그래서 같은 아티팩트에 별도 파일로 올리고 페이지에서는 링크로만 불러온다. */ /* ★ 이 한 줄을 지우지 마세요 ★ 브라우저가 기본으로 주는 `[hidden] { display: none }` 은 **우리가 쓴 어떤 display 규칙에도 집니다.** 그래서 `.tx-pick { display:grid }` 같은 규칙이 붙은 요소에 `el.hidden = true` 를 해도 그대로 보입니다. 이 프로젝트에서 같은 함정에 세 번 빠졌습니다 — 알림 배지에 빨간 0 이 뜨고, 로그인 화면이 안 걷히고, 거래 입력의 수입/지출 고르는 줄이 안 사라졌습니다. 그때마다 그 자리에만 패치를 붙였는데, 이제 한 곳에서 한 번에 막습니다. */ [hidden] { display: none !important; } :root { /* SANE Corporate Identity Standard Manual 기준 — Main Color C0M0Y0K100, Sub Color K75. CI 원문("보조색의 사용은 주색을 보조하는 차원에서, 사인·패찰·간행물·브로슈어 등에 사용할 수 있다")대로 두 색의 역할을 분리한다: Main(순검정)은 사이드바와 단 하나의 주 행동(Primary CTA)에만 앵커로 남기고, 화면 곳곳의 선택/활성 상태는 더 가벼운 Sub Color(그레이)가 맡는다 — 검정 블록이 여기저기 반복돼 전체가 무겁게 보이던 문제를 이 2단 위계로 해소. */ --bg: #F3F3EF; --surface: #FFFFFF; --surface-2: #EAEAE4; --ink: #161615; --ink-2: #232320; --text: #1B1B18; --text-soft: #5E5E58; --text-faint: #67675E; /* 2026-10-06 — #949489 는 2.69~3.06:1 로 기준(4.5) 미달. 이 값은 5.02~5.71:1 */ --border: #DEDED5; --accent: #5E5E58; --accent-strong: #161615; --accent-soft: #EDEDE7; --accent-contrast: #FFFFFF; --success: #2E7A57; --success-soft: #E6F1EA; --warning: #93661E; --warning-soft: #F2EAD9; /* pill 처럼 soft 배경 위에 얹는 글자는 따로 둔다 — soft 배경은 흰 바탕보다 밝아서, 본문용 색을 그대로 쓰면 기준(4.5:1)을 못 넘긴다. .pill.ok 4.49:1 · .pill.warn 4.22:1 이었다(2026-10-06 계산). */ --success-ink: #1F6B45; /* on --success-soft = 5.58:1 */ --warning-ink: #7A5310; /* on --warning-soft = 5.71:1 */ --danger: #9B3C31; --danger-soft: #F4E6E3; --shadow: 0 1px 2px rgba(22,22,21,0.05), 0 10px 26px -16px rgba(22,22,21,0.16); --radius: 9px; /* 글자 크기·자간·행간 통일 스케일 — 화면 곳곳에 10.5px/11px/11.5px/12px처럼 미세하게 다른 값이 흩어져 있던 걸 이 스케일로 모은다. 앱 UI(라벨·버튼·카드·표 등)에 적용하고, 인쇄 문서(dp-*/stmt-*)는 공문서 조판 관례를 따로 쓰므로 이 스케일 대상이 아니다. */ --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14.5px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 32px; --ls-tight: -0.01em; --ls-tighter: -0.02em; --ls-label: 0.05em; --lh-tight: 1.2; --lh-snug: 1.45; --lh-body: 1.6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0C0C0B; --surface: #191916; --surface-2: #232320; --ink: #000000; --ink-2: #0B0B0A; --text: #F0F0EA; --text-soft: #ACACA2; --text-faint: #9A9A90; /* 2026-10-06 — #6D6D65 는 3.02~3.75:1 로 미달. 이 값은 5.55~6.90:1 */ --border: #33332E; --accent: #9C9C90; --accent-strong: #F0F0EA; --accent-soft: rgba(240,240,234,0.10); --accent-contrast: #131311; --success: #4FAD84; --success-soft: rgba(79,173,132,0.14); --warning: #C9994B; --warning-soft: rgba(201,153,75,0.14); --success-ink: #4FAD84; --warning-ink: #C9994B; --danger: #DA8175; --danger-soft: rgba(218,129,117,0.14); --shadow: 0 1px 2px rgba(0,0,0,0.32), 0 12px 28px -14px rgba(0,0,0,0.6); } } :root[data-theme="dark"] { --bg: #0C0C0B; --surface: #191916; --surface-2: #232320; --ink: #000000; --ink-2: #0B0B0A; --text: #F0F0EA; --text-soft: #ACACA2; --text-faint: #9A9A90; /* 2026-10-06 — #6D6D65 는 3.02~3.75:1 로 미달. 이 값은 5.55~6.90:1 */ --border: #33332E; --accent: #9C9C90; --accent-strong: #F0F0EA; --accent-soft: rgba(240,240,234,0.10); --accent-contrast: #131311; --success: #4FAD84; --success-soft: rgba(79,173,132,0.14); --warning: #C9994B; --warning-soft: rgba(201,153,75,0.14); --success-ink: #4FAD84; --warning-ink: #C9994B; --danger: #DA8175; --danger-soft: rgba(218,129,117,0.14); --shadow: 0 1px 2px rgba(0,0,0,0.32), 0 12px 28px -14px rgba(0,0,0,0.6); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img:not(.dp-letterhead, .dp-banner, .dp-stamp) { max-width: 100%; height: auto; } body { background: var(--bg); color: var(--text); font-family: "Noto Sans KR", "Pretendard", -apple-system, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; } h1, h2, h3, .serif { font-family: "Noto Sans KR", sans-serif; font-weight: 600; letter-spacing: -0.02em; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } button { font-family: inherit; cursor: pointer; } a { color: inherit; } .app { display: flex; min-height: 100vh; } /* ---------- Sidebar ---------- */ /* 2026-10-06 — granter 는 232px **흰** 사이드바다. 어두운 사이드바가 아니다. 여기 색이 전부 16진수로 박혀 있어서 토큰만 바꾸면 하나도 안 바뀐다 — 그래서 직접 고친다. 경계는 바탕색 차이가 아니라 오른쪽 1px 선 하나로만 만든다(그림자 없음). */ .sidebar { width: var(--sidebar-w, 232px); flex: none; background: var(--surface); color: var(--text); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } /* 견적서 등 실제 발행 문서(레터헤드)에 쓰이는 로고를 그대로 잘라와서 사이드바 마크로 쓴다 — 로고 자체는 검정 선화라 어두운 사이드바 배경에서는 흰 칩 위에 얹어야 또렷이 보인다. */ /* 2026-10-06 — 사이드바가 흰색이 되면서 로고(검은 선화)를 받치던 흰 칩이 필요 없어졌다. 칩을 걷어내니 오히려 또렷하다. */ .brand-mark { width: 36px; height: 36px; border-radius: var(--radius-md, 8px); flex: none; background: transparent; border: none; display: flex; align-items: center; justify-content: center; padding: 0; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; } /* G 의 워크스페이스 이름 규격: 16px/24px weight 500, 자간 -0.16px. 굵기 800 → 500. granter 는 700 이상을 아예 쓰지 않는다. */ .brand-name { font-family: inherit; font-weight: var(--fw-medium, 500); font-size: 16px; color: var(--text); line-height: 1.5; letter-spacing: -0.01em; } /* 대문자 변환도 자간 벌림도 하지 않는다 — G 는 라벨을 꾸미지 않는다 */ .brand-sub { font-size: var(--fs-xs, 12px); color: var(--text-soft); letter-spacing: 0; text-transform: none; margin-top: 2px; } /* 로고 옆 글자는 사이드바 폭을 넘지 않게 한 줄로 자른다. flex 항목은 기본적으로 내용보다 작아지지 않으므로(min-width:auto), 0 으로 낮춰야 말줄임이 걸린다. 이름이 긴 사람이 로그인해도 레이아웃이 무너지지 않는다. */ .brand > div:last-child { min-width: 0; flex: 1; } .brand-name, .brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-topbar .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 2026-10-06 — 흰 사이드바에 맞춰 조용한 회색 트랙 + 흰 알약으로. 그림자는 쓰지 않는다. */ .console-switch { display: flex; gap: 4px; background: var(--surface-2); border-radius: var(--radius-lg, 10px); padding: 3px; margin: 0 8px 12px; } .console-btn { flex: 1; min-height: 38px; padding: 8px 6px; border: none; background: transparent; color: var(--text-soft); font-size: var(--fs-base, 14px); font-weight: var(--fw-medium, 500); border-radius: var(--radius-md, 8px); transition: background-color var(--dur, 200ms) var(--ease-out-strong), color var(--dur, 200ms) var(--ease-out-strong), opacity var(--dur, 200ms) var(--ease-out-strong); } .console-btn:hover { color: var(--text); opacity: .7; } .console-btn.active { background: var(--surface); color: var(--text); box-shadow: none; } /* G 의 메뉴 항목: 높이 36px · 패딩 0 8px · 둥글기 8px · 글자 14px · 기본 굵기 400 · 활성은 색이 아니라 연한 회색 바탕(#F5F5F5) + 검은 글자 + 굵기 500. 높이만 44px 로 올린다(터치 기준) — 나머지는 G 값 그대로라 인상은 거의 남는다. */ .nav { display: flex; flex-direction: column; gap: 2px; margin-top: 0; padding: 0 8px; } .nav-item { display: flex; align-items: center; gap: 8px; min-height: var(--nav-item-h, 44px); padding: 0 8px; border-radius: var(--radius-md, 8px); color: var(--text-soft); background: transparent; border: none; text-align: left; font-size: var(--fs-base, 14px); font-weight: var(--fw-normal, 400); transition: background-color var(--dur, 200ms) var(--ease-out-strong), color var(--dur, 200ms) var(--ease-out-strong); } .nav-item svg { width: 16px; height: 16px; flex: none; opacity: 1; } .nav-item:hover { background: var(--accent-soft); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: var(--fw-medium, 500); } /* G 의 사이드바 바닥: 위쪽 1px 선 + 패딩 12px, 이름은 본문색 14px, 역할은 회색 12px */ .sidebar-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); } .sidebar-foot .line { font-size: var(--fs-xs, 12px); color: var(--text-soft); line-height: 1.5; } .sidebar-foot .line b { color: var(--text); font-weight: var(--fw-medium, 500); } /* 사이드바 맨 아래 저작권 표시 */ .sidebar-foot .copyright { font-size: var(--fs-xs, 12px); color: var(--text-faint); line-height: 1.5; display: flex; flex-direction: column; } .sidebar-foot .copyright b { color: var(--text-soft); font-size: var(--fs-xs, 12px); font-weight: var(--fw-medium, 500); letter-spacing: 0; margin-bottom: 2px; } /* ---------- Main ---------- */ .main { flex: 1; min-width: 0; padding: 28px 36px 60px; } .topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } .topbar h1 { font-size: 23px; margin: 0 0 4px; font-weight: 600; } .topbar .sub { color: var(--text-soft); font-size: var(--fs-base); line-height: var(--lh-snug); } .topbar .meta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--text-soft); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .view { display: none; } .view.active { display: block; } /* ---------- Cards / grid ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } @media (max-width: 980px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } } #txAllocPreview { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow); min-width: 0; } .kpi-label { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-soft); margin-bottom: 8px; display:flex; align-items:center; gap:6px; } .kpi-value { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .kpi-value.success { color: var(--success); } .kpi-value.danger { color: var(--danger); } .kpi-value.warning { color: var(--warning); } .kpi-note { font-size: 12px; color: var(--text-faint); margin-top: 6px; } /* ---------- 홈: 종합 요약 (재무·업무현황·발행견적서를 한눈에) ---------- */ .summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; } .summary-grid > * { min-width: 0; } @media (max-width: 1180px) { .summary-grid { grid-template-columns: 1fr; } } .summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px 18px; display: flex; flex-direction: column; } .summary-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .summary-card-head h3 { font-size: 14px; margin: 0; font-weight: 600; } .summary-link { font-size: 12px; font-weight: 600; color: var(--text-soft); background: none; border: none; padding: 3px 0; display: inline-flex; align-items: center; gap: 3px; } .summary-link:hover { color: var(--text); } /* 홈 요약 카드 상단 — 그래프를 지우고 숫자만 남긴 자리. 도넛(96 → 158 → 220px)도, 가로 막대도 "읽기 힘들다"는 말이 돌아왔다. 네 번 실패했으니 크기나 차트 종류의 문제가 아니라 이 자리에 그림이 필요 없다고 봤다 — 카드가 답하는 질문이 "얼마 벌고 얼마 썼나 / 몇 건이 돌아가나"처럼 값 하나로 끝나서, 비율을 눈대중할 일이 없다. 대신 위계를 세 층으로 세워 눈이 볼 순서를 정해 준다. .sm-lead 대표값 하나. 색을 깐 상자에 25px — 카드에서 제일 먼저 보이는 것. .sm-sub 비교값. 이름은 왼쪽, 값은 오른쪽 끝에 붙여 자릿수가 세로로 맞게. .sm-note 막대가 하던 "어느 쪽이 큰가"를 비율 한 문장으로 대신한다. 색은 장식이 아니라 좋고 나쁨의 표시라서 .is-pos/.is-neg/.is-warn 으로만 갈린다. 443,360,805원 같은 긴 금액이 줄바꿈으로 뭉개지지 않도록 값에는 전부 nowrap 을 걸고, 자릿수가 흔들리지 않게 tabular-nums 를 쓴다. 높이는 막대판과 같게 맞춰서 카드는 그대로다. .summary-donut-row / .summary-legend / .sm-bars 규칙이 여기 있었다. 그 마크업을 쓰는 곳이 없어져 지웠다 — 쓰지 않는 규칙을 남겨 두면, 다음에 고치는 사람이 그것도 살아 있는 줄 알고 함께 맞추려다 시간을 쓴다. */ .sm-figs { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .sm-lead { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px 11px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--text-faint); } .sm-lead .k { font-size: 12px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.01em; } .sm-lead .v { font-size: 25px; font-weight: 600; line-height: 1.16; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; } .sm-lead.is-pos { background: var(--success-soft); border-left-color: var(--success); } .sm-lead.is-pos .v { color: var(--success); } .sm-lead.is-neg { background: var(--danger-soft); border-left-color: var(--danger); } .sm-lead.is-neg .v { color: var(--danger); } .sm-lead.is-warn { background: var(--warning-soft); border-left-color: var(--warning); } .sm-lead.is-warn .v { color: var(--warning); } .sm-subs { display: flex; flex-direction: column; } .sm-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--border); } .sm-sub:first-child { border-top: none; } .sm-sub .k { font-size: 13px; font-weight: 600; color: var(--text-soft); white-space: nowrap; } .sm-sub .v { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; } .sm-sub.is-pos .v { color: var(--success); } .sm-sub.is-neg .v { color: var(--danger); } .sm-sub.is-warn .v { color: var(--warning); } .sm-note { font-size: 12px; line-height: 1.5; color: var(--text-faint); } .summary-stats { display: flex; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .summary-stat { flex: 1; } .summary-stat .v { font-size: 17px; font-weight: 600; } .summary-stat .l { font-size: 12px; color: var(--text-faint); margin-top: 2px; } .mini-bar-list { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .mini-bar-list .row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 7px; } .mini-bar-list .row:last-child { margin-bottom: 0; } .mini-bar-list .name { width: 66px; flex: none; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-bar-list .track { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .mini-bar-list .fill { height: 100%; border-radius: 3px; background: var(--accent); } .mini-bar-list .n { width: 22px; flex: none; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .recent-clients { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .recent-clients .label { font-size: 12px; color: var(--text-faint); margin-bottom: 7px; } .recent-clients .chips { display: flex; flex-wrap: wrap; gap: 6px; } .recent-clients .chip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-clients .chip:hover { border-color: var(--accent); color: var(--accent-strong); } .recent-clients .empty { font-size: 12px; color: var(--text-faint); } .row-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; } .row-2 > * { min-width: 0; } @media (max-width: 980px) { .row-2 { grid-template-columns: 1fr; } } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 20px; margin-bottom: 16px; } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; } .panel-head h2 { font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0; font-weight: 600; } /* .hint는 화면 곳곳(패널 제목 옆, 필드 아래, 버튼 옆 등)에서 재사용되는 "보조 설명" 역할인데 정작 공통 규칙이 없어서 위치마다 상속받는 크기가 제각각이었다 — 기본값을 여기서 통일한다. 인라인 style로 크기를 따로 지정한 곳은 그 값이 그대로 우선한다(의도된 예외이므로 그대로 둠). */ .hint { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-faint); } .panel-head .hint { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-faint); } .callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--warning-soft); border: 1px solid rgba(166,101,10,0.18); font-size: 13px; color: var(--warning); margin-bottom: 16px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .callout { border-color: rgba(227,167,59,0.28); } } :root[data-theme="dark"] .callout { border-color: rgba(227,167,59,0.28); } .callout svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } .callout b { color: inherit; } /* chart */ .chart-wrap { overflow-x: auto; } .bars { display: flex; align-items: flex-end; gap: 14px; height: 168px; padding: 6px 4px 0; min-width: 460px; } .bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 44px; } .bar-stack { width: 100%; max-width: 34px; height: 120px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; position: relative; } .bar-seg { width: 100%; border-radius: 4px; transition: opacity .15s; } .bar-seg.income { background: var(--success); } .bar-seg.expense { background: var(--danger); opacity: 0.82; } .bar-col.dim .bar-seg { opacity: 0.22; } .bar-col.picked .bar-label { color: var(--text); font-weight: 600; } .bar-empty { width: 100%; height: 100%; border: 1.5px dashed var(--border); border-radius: 4px; } .bar-label { font-size: 12px; color: var(--text-soft); text-align: center; } .bar-label small { display: block; color: var(--text-faint); font-size: 12px; } .legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-soft); margin-top: 10px; } .legend span { display: inline-flex; align-items: center; gap: 5px; } .legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } /* tx list */ .tx-list { display: flex; flex-direction: column; } .tx-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); gap: 10px; } .tx-row:last-child { border-bottom: none; } .tx-left { min-width: 0; } .tx-desc { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .tx-date { font-size: 12px; color: var(--text-faint); } .tx-amt { font-size: 13px; font-weight: 600; white-space: nowrap; } .tx-amt.in { color: var(--success); } .tx-amt.out { color: var(--danger); } .tx-list-wide .tx-row { padding: 13px 10px; border-radius: 8px; } .tx-list-wide .tx-row:nth-child(odd) { background: var(--surface-2); } .tx-list-wide .tx-row:last-child { border-bottom: none; } .tx-list-wide .tx-desc { font-size: 14px; font-weight: 600; max-width: 360px; } .tx-list-wide .tx-date { font-size: 12px; margin-top: 2px; } .tx-list-wide .tx-amt { font-size: 15px; } @media (max-width: 860px) { .tx-list-wide .tx-desc { max-width: 46vw; } } /* 홈 화면 위젯들 — 미수금·계좌현황을 정확히 같은 높이로 고정하고 내부 스크롤되게 함 (max-height는 내용이 짧으면 줄어들어 높이가 안 맞을 수 있어서 고정 height를 씀) */ .home-scroll-box { height: 340px; overflow-y: auto; } /* accounts grid */ .acct-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .acct-grid > * { min-width: 0; } .acct-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; background: var(--surface-2); } .acct-bank { font-size: 12px; color: var(--text-faint); letter-spacing: 0.02em; } .acct-name { font-size: 13px; font-weight: 600; margin: 2px 0 4px; } .acct-purpose { font-size: 12px; color: var(--text-soft); } .acct-balance { margin-top: 8px; font-size: 14px; font-weight: 600; } .acct-balance.zero { color: var(--text-faint); font-weight: 500; font-size: 12px; } /* pending payments */ table.simple { width: 100%; border-collapse: collapse; font-size: 13px; } table.simple th { text-align: left; color: var(--text-faint); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); } table.simple td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } table.simple tr:last-child td { border-bottom: none; } table.simple td.danger { color: var(--danger); } table.simple td.success { color: var(--success); } .tx-entry-row { cursor: pointer; transition: background .12s; } .tx-entry-row:hover { background: var(--surface-2); } .tx-entry-row.active { background: var(--accent-soft); } .tx-entry-row.active td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pill.ok { background: var(--success-soft); color: var(--success-ink, var(--success)); } .pill.warn { background: var(--warning-soft); color: var(--warning-ink, var(--warning)); } .pill.danger { background: var(--danger-soft); color: var(--danger); } .pill.wait { background: var(--warning-soft); color: var(--warning-ink, var(--warning)); } /* kanban — 가로 한 줄로 스크롤되는 보드. 칸마다 세로로도 따로 스크롤돼서(칸 높이 고정) 카드 많은 칸(예: 진행중) 때문에 페이지 전체가 한없이 길어지는 걸 막는다. */ /* kanban — 단계별로 칸을 나눠 가로 스크롤하던 방식이 보기 어렵다는 피드백으로, 카드 하나하나가 각자 자기 단계 색 점을 달고 미정→드랍 순서대로 자연스럽게 흐르는 반응형 그리드로 바꿨다. 가로 스크롤 없이 화면 폭에 맞춰 카드가 알아서 줄바꿈된다. */ /* 한 줄에 카드가 최대 5개까지만 들어가고(그 이상이면 다음 줄로), 화면이 그보다 좁아져서 카드가 5개보다 적게 들어갈 때는 남는 공간만큼 카드가 커지게 한다 — 각 칸의 최소 폭을 "컨테이너의 20%(=5칸 몫)"로 잡으면 20% 폭보다 넓은 화면에서는 저절로 5칸까지만 채워지고, 그보다 좁으면 230px 최소폭 쪽이 이겨서 그 안에서 자연스럽게 줄어든 칸 수만큼 커진다. */ .kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(20% - 8px)), 1fr)); gap: 10px; align-content: start; } @media (max-width: 860px) { .kanban { grid-template-columns: 1fr; } } /* 홈 위젯 전용 — 업무현황 페이지와 똑같은 개별 카드 나열 방식을 쓰되, 전체를 다 펼치면 홈이 길어지니 바깥에 높이 제한+스크롤만 걸어서 "홈은 간소하게" 보이게 한다(칸반 레이아웃 자체는 동일, 세로 단계별 칸으로 나누지 않음). */ #kanbanHome.kanban { max-height: 480px; overflow-y: auto; padding-right: 2px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); font-size: 12px; font-weight: 600; } .chip .n { color: var(--text-faint); font-weight: 500; } .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); } .chip.active .n { color: rgba(255,255,255,0.65); } .deal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; box-shadow: var(--shadow); cursor: pointer; } .deal-card:hover { border-color: var(--accent); } .deal-stage-row { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .stage-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px var(--surface); } .deal-complete-btn { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-faint); font-size: 12px; line-height: 1; cursor: pointer; margin-left: auto; position: relative; } /* 시각적 크기(20px)는 그대로 두고, 실제 탭 가능 영역만 모바일 권장 최소 크기(44px)에 맞춰 투명하게 넓힌다 — 손가락으로 누를 때 자꾸 빗나가서 카드 클릭(상세 팝업)으로 새던 문제 수정. */ .deal-complete-btn::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; } .deal-complete-btn:hover { border-color: var(--success); color: var(--success); } .deal-complete-btn.done { background: var(--success); border-color: var(--success); color: #fff; } .deal-stage-label { font-size: 12px; font-weight: 600; color: var(--text-soft); } .deal-org { font-size: 13px; font-weight: 600; } .deal-title { font-size: 12px; color: var(--text-soft); margin: 3px 0 7px; line-height: 1.4; } .deal-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .deal-amt { font-size: 12px; font-weight: 600; color: var(--accent-strong); } .deal-manager { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } select.stage-select { margin-top: 8px; width: 100%; font-size: 12px; padding: 6px 7px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; } /* clients table */ .search-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; max-width: 340px; } .search-box svg { width: 15px; height: 15px; color: var(--text-faint); flex: none; } .search-box input { border: none; background: transparent; outline: none; font-size: 13px; color: var(--text); width: 100%; font-family: inherit; } .client-table-wrap { overflow-x: auto; } table.clients { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 980px; } table.clients th { position: sticky; top: 0; background: var(--surface); text-align: left; color: var(--text-faint); font-weight: 600; font-size: 12px; padding: 8px; border-bottom: 1px solid var(--border); } table.clients td { padding: 8px; border-bottom: 1px solid var(--border); } table.clients tr:hover td { background: var(--surface-2); } .muted { color: var(--text-faint); } .result-count { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; } /* docs view */ .doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .doc-grid > * { min-width: 0; } @media (max-width: 900px) { .doc-grid { grid-template-columns: repeat(2, 1fr); } } .doc-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface); } .doc-card .doc-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .doc-card .doc-icon svg { width: 16px; height: 16px; } .doc-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; } .doc-desc { font-size: 12px; color: var(--text-soft); line-height: 1.5; } .doc-card.ready { border-color: var(--accent); background: var(--accent-soft); } .doc-card .doc-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin-top: 7px; } .doc-card .doc-badge.ready { background: var(--accent); color: var(--accent-contrast); } .doc-card .doc-badge.soon { background: var(--surface-2); color: var(--text-faint); } /* ---------- document builder ---------- */ /* 2026-09-20: 서류 입력 화면에 미리보기가 항상 옆에 떠 있으면 실제 발행됐을 때의 화면과 달라 보인다는 지적으로, 미리보기 패널은 기본적으로 숨기고 입력 폼만 보이게 바꿨다 — "미리보기"를 눌러야 새 창에서 실제 문서 모양을 확인할 수 있다(발행 시 인쇄에는 그대로 쓰이므로 print 미디어 쿼리에서 다시 보이게 되돌려둔다). */ .doc-builder { display: block; } .doc-builder .doc-form, .doc-builder .doc-preview-wrap { max-width: 640px; } .doc-preview-scroll { display: none; } @media print { .doc-preview-scroll { display: block !important; } } /* ---------- 견적산정 계산기 ---------- */ .qc-grid { display: grid; grid-template-columns: 420px 1fr; gap: 20px; align-items: start; } .qc-grid > * { min-width: 0; } @media (max-width: 1100px) { .qc-grid { grid-template-columns: 1fr; } } .qc-5col, .qc-4col { display: grid; gap: 10px; margin-top: 10px; } .qc-5col > *, .qc-4col > * { min-width: 0; } .qc-5col { grid-template-columns: repeat(5, 1fr); } .qc-4col { grid-template-columns: repeat(4, 1fr); } @media (max-width: 700px) { .qc-5col, .qc-4col { grid-template-columns: repeat(2, 1fr); } } .qc-5col > div, .qc-4col > div { display: flex; flex-direction: column; gap: 5px; } .qc-5col label, .qc-4col label { font-size: 12px; font-weight: 600; color: var(--text-soft); } .qc-5col input, .qc-5col select, .qc-4col input, .qc-4col select { font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); width: 100%; } .qc-extra-item { display: flex; align-items: flex-end; gap: 6px; } .qc-extra-item select { flex: 1; } .qc-extra-remove { width: 30px; height: 34px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; } .qc-add-extra { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--border); background: transparent; color: var(--text-faint); font-size: 12px; cursor: pointer; } .qc-result-wrap { position: sticky; top: 0; } /* 1100px 아래로는 qc-grid가 좌우 2열에서 위아래 1열로 바뀌는데, 결과 카드(.qc-result-wrap)의 position:sticky는 "좌우 2열일 때 오른쪽 칼럼을 화면에 붙여두는" 용도였다 — 1열로 쌓이면 스크롤할 때 이 카드가 화면에 들러붙어서 바로 위 절사 select 등과 겹쳐 보이는 원인이 된다. (베이스 규칙 바로 뒤에 둬야 소스 순서상 이 규칙이 이긴다.) */ @media (max-width: 1100px) { .qc-result-wrap { position: static; } } .qc-result { background: var(--surface-2); border-radius: 14px; padding: 20px; margin-top: 20px; } .qc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-base); line-height: var(--lh-snug); } .qc-row .qc-label { color: var(--text-faint); } .qc-row .qc-val { font-variant-numeric: tabular-nums; font-weight: 600; } .qc-row.qc-sub .qc-label { padding-left: 12px; font-size: var(--fs-sm); } .qc-row.qc-sub .qc-val { font-weight: 400; color: var(--text-faint); } .qc-divider { height: 1px; background: var(--border); margin: 14px 0; } .qc-final { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; } .qc-final > * { min-width: 0; } .qc-final-card { background: var(--surface); border-radius: 12px; padding: 16px; text-align: center; } .qc-final-card .qc-final-label { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-faint); margin-bottom: 6px; } .qc-final-card .qc-final-value { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: 600; font-variant-numeric: tabular-nums; } .qc-final-card.qc-price .qc-final-value { color: var(--accent); } .qc-note { font-size: 12px; color: var(--text-faint); margin-top: 12px; line-height: 1.6; } .qc-cross-note { font-size: 12px; color: var(--text-faint); background: var(--surface-2); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; line-height: 1.5; } .doc-form { display: flex; flex-direction: column; gap: 12px; } /* 필드 줄 간격 통일 — 전에는 화면마다 style="margin-top:10px/12px/14px/18px"를 손으로 다르게 붙여서 폼 하나 안에서도 줄 간격이 들쭉날쭉했다. 기본값을 하나로 고정하고(:first-child는 0), 각 필드 자체의 상하 여백은 라벨-입력창 사이 gap(5px)으로 이미 일정하니 줄 사이만 맞추면 된다. */ .field-row { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; } .field-row:first-child { margin-top: 0; } .field-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .field-row.two > * { min-width: 0; } .field-row.three { display: grid; grid-template-columns: 0.8fr 1.6fr 1fr; gap: 10px; } .field-row.three > * { min-width: 0; } .field-row.four { display: grid; grid-template-columns: 0.7fr 1.4fr 0.9fr 1.6fr; gap: 10px; } .field-row.five { display: grid; grid-template-columns: 1.2fr 0.9fr 1.1fr 0.9fr 0.9fr; gap: 10px; } .field-row.four > *, .field-row.five > * { min-width: 0; } @media (max-width: 860px) { .field-row.four { grid-template-columns: 1fr 1fr; } .field-row.five { grid-template-columns: 1fr 1fr; } } /* 견적산정 할인율/가격절사 — 모바일에서 두 칸이 너무 좁게 붙어 보여서 한 줄씩 세로로 쌓는다 */ @media (max-width: 860px) { .field-row.two.qc-discount-round-row { grid-template-columns: 1fr; gap: 14px; } } /* 예상원가/소비자견적가 카드 — 좁은 화면에서 두 칸이 나란히 있으면 금액 숫자가 카드 폭보다 넓어져서 "848원"처럼 숫자 중간에서 줄바꿈되던 문제가 있었다. 세로로 쌓아서 각 카드가 화면 전체 폭을 쓰게 한다. */ @media (max-width: 520px) { .qc-final { grid-template-columns: 1fr; } .qc-final-card .qc-final-value { font-size: 20px; } } .field-row label { font-size: var(--fs-xs); line-height: var(--lh-snug); font-weight: 600; color: var(--text-soft); } .field-row input[readonly] { background: var(--surface-2); color: var(--text-soft); } .field-row input, .field-row select, .field-row textarea { font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); width: 100%; } .field-row textarea { resize: vertical; line-height: 1.6; box-sizing: border-box; } /* 날짜 입력창은 칸 전체를 클릭해도 달력이 뜨도록, 달력 아이콘(::-webkit-calendar-picker-indicator) 자체를 칸 전체 크기로 늘려서 투명하게 덮는다 — 아이콘을 클릭하는 건 브라우저 기본 동작이라 showPicker() 같은 JS 호출과 무관하게 항상 작동한다(showPicker() 리스너는 폴백으로 그대로 둔다). */ input[type="date"] { position: relative; } input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; } /* ---------- 메일 작성 ---------- */ .mail-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 18px; } .mail-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 600; } .mail-tab.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } .mail-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: 12px; font-weight: 600; } .mail-panel { max-width: 640px; display: flex; flex-direction: column; gap: 12px; } .mail-attach-drop { border: 1.5px dashed var(--border); border-radius: 12px; padding: 30px 16px; text-align: center; color: var(--text-faint); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; } .mail-attach-drop svg { width: 26px; height: 26px; } .mail-attach-drop.dragover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); } .mail-attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .mail-attach-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface-2); } .mail-attach-item .mail-attach-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-attach-item .mail-attach-size { color: var(--text-faint); font-size: 12px; } .mail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 22px; } .mail-actions .hint { color: var(--text-faint); } .date-picker-wrap { position: relative; } .date-picker-wrap input { cursor: pointer; } .date-cal { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.22); padding: 14px; } .date-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .date-cal-head button { border: none; background: var(--surface-2); border-radius: 7px; width: 26px; height: 26px; color: var(--text); cursor: pointer; font-size: 14px; line-height: 1; } .date-cal-head .date-cal-ym { font-size: 13px; font-weight: 600; color: var(--text); } .date-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; } .date-cal-grid > * { min-width: 0; } .date-cal-grid .dow { font-size: 12px; color: var(--text-faint); padding: 4px 0; } .date-cal-grid button.day { border: none; background: transparent; border-radius: 7px; padding: 6px 0; font-size: 12px; color: var(--text); cursor: pointer; } .date-cal-grid button.day:hover { background: var(--surface-2); } .date-cal-grid button.day.selected { background: var(--accent); color: var(--accent-contrast); font-weight: 600; } .date-cal-grid button.day.empty { visibility: hidden; cursor: default; } .date-cal-noday { width: 100%; margin-top: 10px; padding: 8px; border-radius: 8px; border: 1px dashed var(--border); background: transparent; color: var(--text-faint); font-size: 12px; cursor: pointer; } .date-cal-noday:hover { background: var(--surface-2); } .seg { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } .seg-btn { flex: 1; border: none; background: var(--surface); color: var(--text-soft); padding: 8px 10px; font-size: 13px; font-weight: 600; border-right: 1px solid var(--border); } .seg-btn:last-child { border-right: none; } .seg-btn.active { background: var(--accent); color: var(--accent-contrast); } .primary-btn.sm { padding: 7px 12px; font-size: 12px; } /* ---------- 발행 법인 (큰 탭) / 문서 유형 선택 ---------- */ .entity-tabs { display: flex; gap: 10px; margin: 4px 0 16px; max-width: 460px; } .entity-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-2); font-family: inherit; transition: background .15s, border-color .15s; } .entity-tab .et-label { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .entity-tab .et-sub { font-size: 12px; letter-spacing: 0.09em; color: var(--text-faint); } .entity-tab.active { background: var(--accent-strong); border-color: var(--accent-strong); } .entity-tab.active .et-label, .entity-tab.active .et-sub { color: var(--accent-contrast); } .doc-kind-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .dk-tab { padding: 10px 18px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-soft); font-size: 13px; font-weight: 600; font-family: inherit; } .dk-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .contact-quick-row { display: flex; gap: 8px; } .contact-quick-row input { flex: 1; } .contact-chip-row { display: flex; flex-wrap: wrap; gap: 7px; } .contact-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; } .contact-chip:hover { border-color: var(--accent); } .icon-btn-text { border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 7px; padding: 5px 10px; font-size: 12px; font-weight: 600; font-family: inherit; } .icon-btn-text:hover { color: var(--text); border-color: var(--accent); } .icon-btn-text.danger-text { color: var(--danger); border-color: var(--danger-soft); } .icon-btn-text.danger-text:hover { background: var(--danger-soft); border-color: var(--danger); } .pricing-row-actions { display: flex; gap: 6px; white-space: nowrap; } .pricing-row-input[readonly], .pricing-row-input:disabled { background: var(--surface-2); color: var(--text-soft); cursor: default; border-color: transparent; } .pricing-panel table.simple thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: 0 1px 0 var(--border); } .pricing-panel table.simple th, .pricing-panel table.simple td { font-size: 15px; padding: 10px 9px; } .pricing-panel .pricing-row-input { font-size: 15px; padding: 8px 9px; } .pricing-panel .icon-btn-text { font-size: 13px; padding: 6px 11px; } .nav-item-wrap { display: flex; flex-direction: column; } .nav-item.has-sub { position: relative; } .nav-chevron { margin-left: auto; width: 13px; height: 13px; flex: none; opacity: 0.6; transition: transform .15s; } .nav-item.sub-open .nav-chevron { transform: rotate(90deg); } .nav-submenu { display: none; flex-direction: column; gap: 3px; padding: 4px 0 6px 34px; } .nav-submenu.open { display: flex; } /* 하위 메뉴 안의 중메뉴 — 단가표·서식류·보관함 셋으로 접는다(2026-09-27). 스물셋을 한 줄로 늘어놓으면 메뉴를 열 때마다 화면이 통째로 길어진다. */ .nav-subgroup { display:flex; align-items:center; gap:6px; width:100%; background:transparent; border:0; cursor:pointer; text-align:left; font:inherit; font-size:var(--fs-base, 14px); font-weight:var(--fw-medium, 500); color:var(--text-soft); min-height:var(--nav-item-h, 44px); padding:0 10px; border-radius:var(--radius-md, 8px); } .nav-subgroup:hover { background:var(--accent-soft); color:var(--text); } .nav-subgroup.open { color:var(--accent-strong); } .nav-subgroup .grp-chev { width:13px; height:13px; margin-left:auto; flex:0 0 auto; transition:transform .15s; opacity:.7; } .nav-subgroup.open .grp-chev { transform:rotate(90deg); } .nav-subgroup-items { display:none; padding-left:9px; border-left:1px solid var(--border); margin:0 0 4px 14px; } .nav-subgroup-items.open { display:block; } .nav-subitem.grp-solo { font-weight:var(--fw-medium, 500); font-size:var(--fs-base, 14px); color:var(--text-soft); } .nav-submenu.open { max-height:70vh; overflow-y:auto; } /* 2026-10-06 — 사이드바가 흰색이 되면서 여기 박혀 있던 어두운 바탕용 색들이 흰 바탕 위에서 거의 안 보이게 됐다. 윗 메뉴(.nav-item)와 같은 규칙으로 맞춘다. 활성은 색이 아니라 연한 회색 바탕 + 굵기 500 (G 의 방식). */ .nav-subitem { display: flex; align-items: center; min-height: var(--nav-item-h, 44px); padding: 0 10px; border-radius: var(--radius-md, 8px); color: var(--text-soft); background: transparent; border: none; text-align: left; font-size: var(--fs-base, 14px); font-weight: var(--fw-normal, 400); width: 100%; font-family: inherit; transition: background-color var(--dur, 200ms) var(--ease-out-strong), color var(--dur, 200ms) var(--ease-out-strong); } .nav-subitem:hover { background: var(--accent-soft); color: var(--text); } .nav-subitem.active { background: var(--accent-soft); color: var(--text); font-weight: var(--fw-medium, 500); } .edu-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; } .edu-layout > * { min-width: 0; } @media (max-width: 900px) { .edu-layout { grid-template-columns: 1fr; } } .edu-toc { padding: 10px; position: sticky; top: 16px; max-height: calc(100vh - 100px); overflow-y: auto; } .edu-toc-group { margin-bottom: 4px; } .edu-toc-cat { font-size: 12px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 10px 4px; } .edu-toc-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; border: none; background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 500; } .edu-toc-item:hover { background: var(--surface-2); color: var(--text); } .edu-toc-item.active { background: var(--accent-soft, var(--surface-2)); color: var(--text); font-weight: 600; } .edu-toc-n { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); color: var(--text-soft); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .edu-toc-item.active .edu-toc-n { background: var(--accent); color: var(--accent-contrast); } .edu-content-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .edu-content-head h2 { font-size: 19px; margin: 0; } .edu-content-cat { font-size: 12px; font-weight: 600; color: var(--text-soft); background: var(--surface-2); padding: 4px 10px; border-radius: 999px; } .edu-content-body { white-space: pre-wrap; line-height: 1.75; font-size: 14px; color: var(--text); margin-top: 16px; } .edu-content-actions { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .archive-row-dropped td { color: var(--text-faint); text-decoration: line-through; } .archive-row-dropped td.no-strike, .archive-row-dropped td:last-child { text-decoration: none; } .archive-link-box { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); } /* ---------- 연락처 관리 모달 ---------- */ .contact-modal-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; } .contact-group-label { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; } .contact-entry-row { display: flex; gap: 8px; margin-bottom: 7px; } .contact-entry-row input { flex: 1; } .contact-entry-row .item-remove-btn { flex: none; } .contact-add-row-btn { display: inline-flex; align-items: center; gap: 5px; border: 1.5px dashed var(--border); background: none; color: var(--text-soft); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600; font-family: inherit; align-self: flex-start; } .contact-add-row-btn:hover { border-color: var(--accent); color: var(--text); } .contact-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--border); margin-top: 2px; } /* ---------- 재무 현황: 구글시트 이식 (캘린더/입찰가/대출 등) ---------- */ .fin-panel { display: block; } .staff-panel { display: block; } .pricing-panel { display: block; } .pricing-row-input { font-family: inherit; font-size: 12px; padding: 6px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); width: 100%; min-width: 0; } .cal-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 10px; } .cal-nav-label { font-size: 14px; font-weight: 600; min-width: 110px; text-align: center; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-dow { text-align: center; font-size: 12px; color: var(--text-faint); font-weight: 600; padding-bottom: 4px; min-width: 0; } .cal-cell { min-height: 128px; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: border-color .15s; overflow: hidden; } .cal-cell:hover { border-color: var(--accent); } .cal-cell.empty { background: transparent; border: none; cursor: default; } .cal-cell.today { border-color: var(--accent-strong); border-width: 1.5px; } .cal-cell.selected { background: var(--accent-soft); } .cal-cell .d { font-size: 13px; font-weight: 600; color: var(--text-soft); } .cal-cell .amt { font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .cal-cell .amt.in { color: var(--success); } .cal-cell .amt.out { color: var(--danger); } .cal-cell .dot-row { display: flex; gap: 3px; margin-top: auto; } .cal-cell .dot-row i { width: 5px; height: 5px; border-radius: 50%; } .bid-draw-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bid-draw-row input { width: 78px; flex: none; } /* ★ 2026-09-27 — 카드가 화면 너비에 따라 늘어난다 ★ 대표님: 「각 은행마다 박스 크기가 너무 작어, 유동적으로 바뀔 수 있게 화면 크기에 맞춰줘」. 원인은 auto-fill 이었다 — 넓은 화면에서 빈 칸을 계속 만들어 두기 때문에 카드 다섯 장이 240px 씩 붙어 있고 오른쪽이 텅 비었다. auto-fit 은 빈 칸을 접어 없애서 있는 카드들이 남는 자리를 나눠 갖는다. 좁은 화면에서는 min() 이 한 줄에 한 장으로 떨어뜨린다. */ .loan-card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .loan-card.add { display:flex; flex-direction:column; align-items:center; justify-content:center; border-style:dashed; min-height:150px; gap:2px; } .loan-card.add .plus { font-size:26px; font-weight:300; color:var(--text-faint); line-height:1; margin-bottom:6px; } .loan-card.add .nm { margin:0; } .loan-card.add:hover { border-color:var(--accent-strong); } .loan-card { text-align: left; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); box-shadow: var(--shadow); font-family: inherit; cursor: pointer; transition: border-color .15s; } .loan-card:hover { border-color: var(--accent); } .loan-card.active { border-color: var(--accent-strong); border-width: 1.5px; } /* 대출 카드에서 가장 먼저 봐야 하는 것은 '매달 얼마가 나가는가'다. 잔금은 그다음이다 — 잔금은 당장 통장에서 빠지는 돈이 아니지만 월 상환액은 이번 달에 실제로 빠진다. 그런데 월 상환액은 카드에 아예 없었고, 잔금 글씨도 작고 흐려서 눈에 들어오지 않았다. 월 상환액을 크게 세우고 색을 준다. */ .loan-card .org { font-size: 14px; font-weight: 600; color: var(--text); } .loan-card .nm { font-size: 12px; color: var(--text-soft); margin: 3px 0 12px; } .loan-card .pay-lbl { font-size: 12px; color: var(--warning); font-weight: 600; letter-spacing: 0.01em; margin-bottom: 3px; } .loan-card .pay { font-size: 25px; font-weight: 600; color: var(--warning); letter-spacing: -0.015em; line-height: 1.1; margin-bottom: 13px; } .loan-card .bal { font-size: 17px; font-weight: 600; color: var(--text); } .loan-card .bal-lbl { font-size: 12px; color: var(--text-soft); margin-bottom: 2px; } .loan-card .bar-track { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 11px; } .loan-card .bar-fill { height: 100%; border-radius: 4px; background: var(--accent); } .loan-card .paid-note { font-size: 12px; color: var(--text-soft); margin-top: 6px; } /* 대출 합계 — 카드를 일곱 장 보면서 머리로 더하게 두지 않는다 */ #loanSumBar { margin-bottom: 16px; } #loanSumBar .ls { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } #loanSumBar .i { padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); } #loanSumBar .l { font-size: 13px; color: var(--text-faint); font-weight: 600; } #loanSumBar .v { font-size: 27px; font-weight: 600; margin: 5px 0 3px; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; } #loanSumBar .v.pay { color: var(--warning); } #loanSumBar .d { font-size: 12px; color: var(--text-faint); } /* ---------- 원가계산서(내부용) memo — 나머지는 견적서와 동일한 .dp-* 레터헤드 스타일 재사용 ---------- */ .cost-memo { font-size: 12px; font-weight: 400; color: #444; border-top: 1px solid #ccc; padding-top: 10px; white-space: pre-wrap; line-height: 1.6; } .cost-memo .lbl { font-weight: 600; color: #1a1a1a; margin-bottom: 4px; display: block; } /* 급여명세서 실지급액 박스 — 한눈에 띄도록 큼직하게 */ .cost-total-row { display: flex; justify-content: flex-end; margin-bottom: 4px; } .cost-total-box { border: 1.5px solid #1a1a1a; border-radius: 8px; padding: 14px 26px; text-align: right; min-width: 260px; } .cost-total-box .lbl { font-size: 12px; color: #666; } .cost-total-box .val { font-size: 24px; font-weight: 600; margin-top: 4px; color: #161616; } /* ---------- 영업용 서류: 담당 거래처 + 단계 탭 ---------- */ .ai-context { display: flex; flex-direction: column; gap: 6px; max-width: 360px; margin-bottom: 16px; } .ai-context label { font-size: 12px; font-weight: 600; color: var(--text-soft); } .ai-context input { font-family: inherit; font-size: 14px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .ai-tabs, .qc-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px; } #finTabs { position: sticky; top: 0; z-index: 60; background: var(--bg); padding-top: 6px; margin-left: -4px; padding-left: 4px; margin-right: -4px; padding-right: 4px; } @media (max-width: 860px) { #finTabs { top: 56px; } } .cal-hover-preview { position: fixed; z-index: 300; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px; font-size: 12px; max-width: 240px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; } .cal-hover-preview.show { opacity: 1; transform: translateY(0); } .cal-hover-preview .h-title { font-weight: 600; margin-bottom: 5px; } .cal-hover-preview .h-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; } .ai-tab, .qc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 600; } .ai-tab-n, .qc-tab-n { font-size: 12px; font-weight: 600; color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .ai-tab.active, .qc-tab.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } .ai-tab.active .ai-tab-n, .qc-tab.active .qc-tab-n { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .ai-panel { display: none; } .ai-panel.active { display: block; } .ai-placeholder { padding: 46px 20px; text-align: center; } .ai-placeholder .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--text-faint); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .ai-placeholder .ico svg { width: 22px; height: 22px; } .ai-placeholder h3 { font-size: 15px; margin: 0 0 6px; } .ai-placeholder p { font-size: 13px; color: var(--text-faint); margin: 0; max-width: 380px; margin: 0 auto; } /* 위쪽 여백(24px)은 "새 구획이 시작된다"는 걸 보여주는 간격, 아래쪽(padding-bottom 8px + 테두리)은 그 구획의 첫 필드와 붙는 간격 — 이 둘의 차이가 뚜렷해야 구획이 나뉘어 보인다. 앞서는 필드 줄(.field-row)이 자기 밑 여백을 안 갖고 있어서, 예전엔 위쪽 4px만으로 다음 구획 제목이 바로 앞 입력칸에 거의 붙어 보이는 문제가 있었다. */ .form-section-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 24px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .form-section-title:first-child { margin-top: 0; } /* 2026-09-20: 서류 입력창을 카드형(항목/수량/단가/금액 리스트 + 부가세 토글 + 요약)으로 간소화 — .items-head/.items-table 등 공유 클래스라 서식류 전체(견적서~공문)에 한 번에 적용된다. */ .items-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 14px 12px; } .items-head { display: flex; align-items: center; justify-content: space-between; margin-top: 0; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; } .items-head label { font-size: 13px; font-weight: 600; color: var(--text); } .items-table { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; padding-right: 2px; } .item-row { display: grid; grid-template-columns: 1.6fr 0.7fr 0.7fr 0.7fr 1.1fr 22px; gap: 5px; align-items: center; padding: 3px 0; } .stmt-items-table .item-row { grid-template-columns: 0.5fr 0.5fr 1.6fr 0.8fr 0.6fr 0.9fr 22px; } .item-row.item-row-head { font-size: 12px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .item-row input { font-family: inherit; font-size: 12px; padding: 7px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--text); width: 100%; min-width: 0; } .item-row input::placeholder { color: var(--text-faint); } .item-row input:focus { outline: none; border-color: var(--accent); } .item-row input[data-f="amount"], .item-row input[data-f="unitPrice"] { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .item-remove-btn { width: 20px; height: 20px; border-radius: 6px; border: none; background: transparent; color: var(--text-faint); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; } .item-remove-btn:hover { background: var(--danger-soft); color: var(--danger); } .item-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 9px; border-radius: 9px; border: 1.5px dashed var(--border); background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 600; } .item-add-btn:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); } .item-add-btn svg { width: 14px; height: 14px; } /* 요약 카드(공급가액/부가세/합계) — 입력 폼 안에서도 바로 확인할 수 있게 미리보기와 별개로 표시 */ .doc-summary-card { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .doc-summary-card .row { display: flex; justify-content: space-between; color: var(--text-soft); } .doc-summary-card .row.total { color: var(--text); font-weight: 600; font-size: 15px; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 2px; } .doc-summary-card .row b { font-variant-numeric: tabular-nums; color: var(--text); } .doc-summary-card .row.total b { color: var(--accent-strong); } .primary-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-strong); color: var(--accent-contrast); border: none; border-radius: 9px; padding: 10px 16px; font-size: var(--fs-base); line-height: var(--lh-tight); font-weight: 600; } .primary-btn svg { width: 15px; height: 15px; } /* 서식류 전체 공통 — 입력 폼의 마지막 필드(용도 등)와 미리보기/발행 버튼 줄 사이에 여백이 아예 없어서 붙어 보였다. .doc-builder는 flex/grid gap이 안 먹는 block 레이아웃이라 여기서 직접 위쪽 여백을 준다. */ .doc-preview-wrap { min-width: 0; margin-top: 24px; } .doc-preview-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; } /* 미리보기/발행 버튼 크기가 글자 수 차이("미리보기" vs "발행(PDF로 저장)")로 제각각이었다 — 서식류 전체에서 두 버튼이 툴바 폭을 절반씩 나눠 갖게 통일한다. */ .doc-preview-toolbar button { flex: 1; justify-content: center; } .primary-btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .primary-btn.saved { background: var(--success); } .doc-preview-scroll { overflow-x: auto; background: var(--surface-2); border-radius: 12px; padding: 20px; } /* ===== 2026-09-19 재측정 — 원본 xlsm(팩토리_공식문서.xlsm 견적서 시트)의 용지 설정이 실제로는 paperSize=9(A4, 210x297mm)라는 걸 openpyxl로 확인함(기존 186x279mm는 오차였음). 사용자가 새로 보내준 팩토리 견적서 실물 스크린샷(920x1303px, 페이지 영역만 913x1292px)을 픽셀 단위로 직접 측정해서(px_per_mm≈4.349, 두 축 모두 A4 비율과 정확히 일치) 팩토리 로고· 레터헤드·하단 배너 위치를 다시 잡았다 — 임의로 고른 값 없음. 세인 쪽은 이번에 받은 스크린샷이 없어서, 페이지 크기가 커진 비율(가로 210/186, 세로 297/279)만큼 기존 실측값을 비례 환산했다 — 세인 실물 스크린샷을 새로 받으면 재검증 필요. */ /* ===== 2026-09-20 여백 체계 재정비 — 견적서를 기준 삼아 상단(레터헤드 이미지 기준) 3.5cm, 하단(배너 이미지 기준) 2cm, 좌우 2cm의 고정 여백으로 전 서식에 동일하게 통일했다. 레터헤드/배너 이미지 자체의 실측 크기(entity별 width/height)는 그대로 두고, 위치만 이 여백 체계 위에서 잡는다. .dp-letterhead-wrap은 display:table로 이미지 크기만큼만 감싸도록 해서, 그 안의 .dp-stamp(직인) 퍼센트 좌표가 페이지 여백이 바뀌어도 항상 레터헤드 이미지 자체를 기준으로 정확히 같은 자리에 붙어있게 만들었다(감싸는 박스 폭이 페이지 폭이 아니라 이미지 폭과 같아짐). */ /* ★ 여백은 서식의 규격이다 — 내용이 넘치면 내용을 줄인다 ★ A4 한 장에 위 35mm·좌우 20mm·아래 20mm 여백을 두고, 배너는 아래 여백 위에 고정한다. 내용이 길다고 배너를 아래로 밀면 여백을 침범하거나 두 장으로 넘어간다. 그래서 **본문이 쓸 수 있는 높이를 정해 두고**, 거기 맞춰 내용을 줄인다. 넘치는지는 scripts/check-boot.mjs 가 고칠 때마다 재어 본다. */ .doc-preview { width: 210mm; min-height: 297mm; margin: 0 auto; background: #ffffff; color: #161616; box-shadow: 0 2px 24px rgba(0,0,0,0.18); padding: 35mm 20mm 20mm; font-family: "Noto Sans KR", sans-serif; box-sizing: border-box; display: flow-root; position: relative; } .dp-letterhead-wrap { position: relative; display: table; margin: 0 0 0 auto; } .dp-letterhead { display: block; } .dp-stamp { position: absolute; left: 91.8%; top: 84.1%; width: 12mm; height: 12mm; border-radius: 50%; object-fit: cover; } /* 실측: 세인 로고는 팩토리보다 세로로 길고 더 위에서 시작함(원본 이미지 자체가 다름). 세인 값은 팩토리 재측정 배율(가로 x1.129032, 세로 x1.064516)로 비례 환산한 값. */ /* 「내 서류」 — 뗄 수 있는 서류 세 가지를 나란히 놓는다. 미리보기는 서식류 화면과 같이 버튼을 눌러야 창으로 뜬다. */ .mydoc-grid { display: grid; gap: 16px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .mydoc-grid > .panel { margin: 0; } .doc-preview.entity-sein .dp-letterhead { width: 137.29mm; height: 89.31mm; } .doc-preview.entity-sein .dp-banner { width: 170.16mm; height: 15.44mm; } .doc-preview.entity-factory .dp-letterhead { width: 121.6mm; height: 66.9mm; } .doc-preview.entity-factory .dp-banner { width: 155.9mm; height: 10.2mm; } .dp-title { font-size: 48px; font-weight: 700; text-align: left; color: #161616; margin: 8mm 0 0; line-height: 1; } .dp-intro { font-size: 16px; font-weight: 400; color: #161616; margin: 3mm 0 0; } .dp-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; font-weight: 700; margin: 0; color: #161616; } .dp-meta.mt-gap { margin-top: 13.4mm; } .dp-meta .lbl { color: #161616; margin-right: 4px; } .dp-meta .right { font-size: 13px; } .dp-meta .right.recipient { font-size: 17px; } .dp-table { width: 100%; border-collapse: collapse; margin-top: 3.9mm; font-size: 13.5px; color: #161616; } .dp-table th { background: #D9D9D9; border: 0.75px solid #BFBFBF; padding: 6px 6px; font-weight: 700; font-size: 12.5px; } .dp-table td { border: 0.75px solid #D9D9D9; padding: 4px 6px; text-align: center; height: 20px; font-weight: 400; } /* ===== 급여명세서 — 세무사 공식 서식(「근로기준1」)에 맞춤 ===== 2026-09-28 대표님이 세무서에서 받은 강정선 급여명세서를 놓고 칸 이름·차례· 단위 표기까지 맞췄다. 우리가 임의로 정한 이름을 쓰면 같은 달 같은 사람의 명세서가 회사 것과 세무사 것 두 벌로 갈린다. 법정 기재사항 근거는 근로기준법 제48조 제2항 · 같은 법 시행령 제27조의2. */ /* 세무사 서식에는 레터헤드가 없다. 우리는 서식의 얼굴이라 남기되, 이 명세서는 담을 것이 많아 한 장을 넘긴다 — 여기서만 70% 로 줄여 쓴다(실측 66.9→46.8mm). */ #paySlipPreview .dp-letterhead { width: 85.12mm !important; height: 46.83mm !important; } #paySlipPreview .dp-table td { padding: 0.9mm 2mm; height: auto; font-size: 10.3px; line-height: 1.3; } #paySlipPreview .dp-table th { padding: 0.9mm 2mm; font-size: 9.8px; text-align: center; } #paySlipPreview .ps-title { font-size: 20px; font-weight: 700; text-align: center; margin: 4mm 0 0; letter-spacing: 1px; } #paySlipPreview .ps-top { display: flex; justify-content: space-between; font-size: 10.5px; margin: 2.5mm 0 1.5mm; } #paySlipPreview .ps-unit { font-size: 9px; color: #6A6A6A; text-align: right; margin: 1.6mm 0 0; } #paySlipPreview .dp-table td.nm { text-align: left; } #paySlipPreview .dp-table td.k { background: #EFEFEC; font-weight: 600; width: 19mm; text-align: center; } #paySlipPreview .ps-hours { margin-top: 1.5mm; } #paySlipPreview .ps-hours td { text-align: center; } #paySlipPreview .ps-main { margin-top: 1mm; } #paySlipPreview .ps-main td.num, #paySlipPreview .ps-main th.num { width: 27mm; } #paySlipPreview .ps-main tr.sub td { background: #F2F2F0; font-weight: 600; } #paySlipPreview .ps-main tr.total td { background: #D9D9D9; font-weight: 700; font-size: 11.5px; } #paySlipPreview .ps-calc { margin-top: 1mm; } #paySlipPreview .ps-calc td.nm { width: 26mm; } #paySlipPreview .ps-calc td.way { text-align: left; font-size: 9.6px; color: #4A4A4A; } #paySlipPreview .ps-calc td.num, #paySlipPreview .ps-calc th.num { width: 26mm; } #paySlipPreview .ps-foot { font-size: 9.2px; color: #5A5A5A; line-height: 1.5; margin-top: 2.5mm; } /* 대표님 지시(2026-09-28) — 맨 아래 당구장표시 한 줄. 이 회사는 실수령액을 먼저 정하고 세전급여를 거꾸로 셈하므로, 공제 항목 하나하나는 실제 고지액과 다를 수 있다. */ #paySlipPreview .ps-star { font-size: 9.6px; color: #3D3D3D; margin-top: 2mm; padding: 1.5mm 2.2mm; border: 0.3mm solid #C9C9C9; background: #F7F7F5; line-height: 1.45; } #paySlipPreview .ps-law { font-size: 8.6px; color: #9A9A9A; display: block; margin-top: 1mm; } #paySlipPreview .ps-thanks { font-size: 9.8px; color: #4A4A4A; text-align: center; margin-top: 3mm; } .dp-table td.name { text-align: left; } .dp-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .dp-table tfoot td { font-weight: 700; } .dp-table tfoot tr.vat td { background: #F2F2F2; } .dp-table tfoot tr.vat td:first-child { text-align: center; } .dp-table tfoot tr.total td { background: #D9D9D9; } .dp-table tfoot tr.total td:first-child { text-align: center; } /* 표 바깥 테두리 중 좌우(세로) 외곽선만 지우고, 위아래(가로) 외곽선과 칸 사이 안쪽 선은 전부 그대로 둔다 — 좌우만 열린 형태. */ .dp-table tr > *:first-child { border-left: none; } .dp-table tr > *:last-child { border-right: none; } .cert-table td.cert-key { width: 26%; background: #F7F7F7; font-weight: 700; } .cert-table td { height: 34px; } /* 배너는 내용 분량과 무관하게 항상 페이지 아래 여백(2cm) 위에 고정한다. 내용이 짧은 문서(급여명세서·재직/경력증명서)는 표 바로 아래 흐름으로 두면 배너가 중간에 붕 뜨기 때문이다. */ .dp-banner { display: block; position: absolute; left: 0; right: 0; bottom: 20mm; margin: 0 auto; } /* 본문이 배너 자리로 내려앉지 않게 바닥 선을 끌어올린다. 아래 여백 20mm + 배너 높이 + 숨 쉴 틈 6mm 이 값이 곧 「본문이 쓸 수 있는 높이」를 정한다 — 검사가 이 값을 읽어 내용이 넘치는지 재어 본다. 여백을 줄이는 것이 아니라 내용을 줄여야 한다. */ .doc-preview.entity-factory { padding-bottom: 36mm; } /* 배너 10.2mm */ .doc-preview.entity-sein { padding-bottom: 42mm; } /* 배너 15.44mm */ @page { size: A4 portrait; margin: 0; } @media print { body * { visibility: hidden; } #docPreview, #docPreview *, #archiveDocPreview, #archiveDocPreview *, #stmtPreview, #stmtPreview *, #costPreview, #costPreview *, #paySlipPreview, #paySlipPreview *, #empCertPreview, #empCertPreview *, #careerCertPreview, #careerCertPreview *, #propPreview, #propPreview *, #taxPreview, #taxPreview *, #specPreview, #specPreview *, #detailPreview, #detailPreview *, #costphotoPreview, #costphotoPreview *, #costmasterPreview, #costmasterPreview *, #receiptPreview, #receiptPreview *, #printspecPreview, #printspecPreview *, #storagePreview, #storagePreview *, #officialPreview, #officialPreview *, #svdPreview, #svdPreview * { visibility: visible; } #docPreview, #archiveDocPreview, #paySlipPreview, #empCertPreview, #careerCertPreview, #propPreview, #taxPreview, #costPreview, #specPreview, #detailPreview, #costphotoPreview, #costmasterPreview, #receiptPreview, #printspecPreview, #storagePreview, #officialPreview, #svdPreview { position: absolute; top: 0; left: 0; width: 210mm; min-height: 297mm; box-shadow: none; margin: 0; padding: 35mm 20mm 20mm; } /* 화면에서 안 겹쳐도 출력에서 겹치면 소용이 없다 — 같은 선을 인쇄에도 그대로 건다. :not(.dp-multi) 를 붙인 까닭 — 여러 장짜리 서식(.dp-multi)은 바깥 상자가 아니라 장(.dp-sheet)마다 여백을 갖는다. 그 바깥 상자에까지 36mm 를 물리면 전체 높이가 「장 수 × 297mm + 36mm」가 되어 PDF 자르는 자리가 통째로 밀린다. 예전에는 #svdPreview.dp-multi{padding:0 !important} 의 명시도로 간신히 이기고 있었는데, !important 하나가 빠지면 바로 무너지는 구조였다. 아예 안 걸리게 한다. */ .doc-preview.entity-factory:not(.dp-multi) { padding-bottom: 36mm !important; } .doc-preview.entity-sein:not(.dp-multi) { padding-bottom: 42mm !important; } #stmtPreview { position: absolute; top: 0; left: 0; width: 210mm; min-height: 297mm; box-shadow: none; margin: 0; } .no-print { display: none !important; } } /* ---------- 거래명세서 ---------- */ .stmt-preview { width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; color: #1a1a1a; box-shadow: 0 2px 24px rgba(0,0,0,0.18); padding: 35mm 20mm 20mm; box-sizing: border-box; font-family: "Noto Sans KR", sans-serif; font-size: 11px; display: flow-root; } .stmt-copy { border: 1.5px solid #333; margin-bottom: 8mm; } .stmt-copy-head { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-bottom: 1.5px solid #333; } .stmt-copy-head .stmt-title { font-size: 22px; font-weight: 800; letter-spacing: 6px; } .stmt-copy-head .stmt-for { font-size: 10px; color: #555; } .stmt-copy-head .stmt-date { font-size: 11px; } .stmt-parties { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #333; } .stmt-party { padding: 6px 12px; } .stmt-party + .stmt-party { border-left: 1px solid #333; } .stmt-party-title { font-size: 10px; font-weight: 700; color: #333; margin-bottom: 3px; } .stmt-party-row { display: flex; gap: 8px; padding: 2px 0; font-size: 10.5px; } .stmt-party-row .lbl { width: 66px; color: #666; flex-shrink: 0; } .stmt-table { width: 100%; border-collapse: collapse; font-size: 10.5px; } .stmt-table th, .stmt-table td { border: 1px solid #333; padding: 4px 5px; text-align: center; height: 18px; } .stmt-table td.name { text-align: left; } .stmt-table td.num { text-align: right; font-variant-numeric: tabular-nums; } /* 표 바깥 테두리만 지우고 안쪽 선은 유지 (거래명세서 자체는 stmt-copy 박스 테두리로 이미 감싸져 있음) */ .stmt-table tr > *:first-child { border-left: none; } .stmt-table tr > *:last-child { border-right: none; } .stmt-table thead tr:first-child > * { border-top: none; } .stmt-table tbody tr:last-child > * { border-bottom: none; } .stmt-foot { display: flex; border-top: 1.5px solid #333; } .stmt-foot > div { flex: 1; padding: 7px 12px; border-left: 1px solid #333; font-size: 10.5px; } .stmt-foot > div:first-child { border-left: none; } .stmt-foot .stmt-foot-label { color: #666; font-size: 9.5px; } .stmt-foot .stmt-foot-value { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; } /* ---------- 발행 견적서 아카이브 ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(10,10,9,0.55); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 30px 20px; overflow-y: auto; } .modal-box { background: var(--bg); border-radius: 16px; width: fit-content; max-width: 100%; box-shadow: var(--shadow); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .modal-title { font-size: 14px; font-weight: 600; } .icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); display: flex; align-items: center; justify-content: center; font-size: 15px; } table.clients tr.clickable { cursor: pointer; } ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } /* ---------- 모바일 반응형 (사이드바를 드로어 메뉴로) ---------- */ .mobile-topbar { display: none; } .sidebar-backdrop { display: none; } @media (max-width: 860px) { .app { flex-direction: column; } .mobile-topbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--ink); position: sticky; top: 0; z-index: 120; } .mobile-topbar .icon-btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: #F0F0EA; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 200; width: 78vw; max-width: 300px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 0 rgba(0,0,0,0); } .sidebar.open { transform: translateX(0); box-shadow: 10px 0 40px rgba(0,0,0,0.35); } .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(10,10,9,0.5); z-index: 190; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .sidebar-backdrop.show { opacity: 1; pointer-events: auto; } .main { padding: 18px 14px 60px; min-width: 0; } .topbar h1 { font-size: 19px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kpi-card { padding: 13px 12px 12px; } .kpi-value { font-size: 17px; } .kpi-label, .kpi-note { font-size: 12px; } .summary-grid { grid-template-columns: 1fr; } .cal-grid { gap: 3px; } .cal-cell { min-height: 64px; padding: 5px 4px; } .cal-cell .d { font-size: 12px; } .cal-cell .amt { font-size: 12px; } .cal-dow { font-size: 12px; } .entity-tabs { max-width: none; } /* 좁은 화면 — 160px 짜리 카드는 글씨가 두 줄씩 접힌다. 한 줄에 한 장이 낫다. */ .loan-card-grid { grid-template-columns: 1fr; } table.clients { min-width: 760px; } /* 문서 미리보기 모달 — 제목("견적서 미리보기" 등)과 전송/발행/닫기 버튼이 한 줄에 다 들어가려다 보니 좁은 화면에서 제목이 줄바꿈되고 버튼끼리 눌려 답답해 보였다(2026-09-20 사용자 스크린샷으로 확인). 제목 줄과 버튼 줄을 분리하고, 버튼 두 개는 폭을 균등하게 채우게 한다. */ #docPreviewModal .modal-head { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; } #docPreviewModal .modal-head > div { flex-wrap: nowrap; } #docPreviewSendBtn, #docPreviewPublishBtn { flex: 1; justify-content: center; } /* 버튼 두 줄(제목+버튼)이 모달 높이를 너무 많이 잡아먹으면 실제 문서 미리보기 영역이 좁아져서 "미리보기가 작게 보인다"는 체감이 커진다 — 모바일에서만 이 모달의 버튼을 더 작게 줄여서 문서가 보이는 실제 영역을 넓힌다. */ #docPreviewModal .modal-title { font-size: 13px; } #docPreviewModal #docPreviewSendBtn, #docPreviewModal #docPreviewPublishBtn { padding: 8px 10px; font-size: 13px; gap: 5px; } #docPreviewModal #docPreviewSendBtn svg, #docPreviewModal #docPreviewPublishBtn svg { width: 13px; height: 13px; } } /* ── 아래는 원래 문서 뒤쪽에 따로 있던 두 번째