/* ==========================================================================
KCB GROUP ERP — 공통 UI 시스템
기준 폭 1600px / 좌측 정렬 / 라이트 테마
모든 화면은 이 파일 하나만 링크하면 동일한 룩앤필을 갖습니다.
========================================================================== */
/* --------------------------------------------------------------------------
1. 디자인 토큰
-------------------------------------------------------------------------- */
:root{
--page-w: 1600px;
/* surface */
--bg: #f1f5f9;
--card: #ffffff;
--card-alt: #fbfdff;
--th: #f8fafc;
--hover: #f8fbff;
/* line */
--bd: #e2e8f0; /* 카드·표 외곽 */
--bd-in: #eef2f7; /* 표 행 구분선 */
--bd-field: #cbd5e1; /* 입력 테두리 */
/* text */
--tx: #0f172a;
--tx2: #475569;
--tx3: #94a3b8;
--tx4: #b6c0cc;
/* brand */
--primary: #1d4ed8;
--primary-h: #1e40af;
--primary-l: #eff6ff;
--primary-bd:#bfdbfe;
/* status */
--ok: #047857;
--ok-bg: #ecfdf5;
--ok-bd: #a7f3d0;
--warn: #92400e;
--warn-bg: #fffbeb;
--warn-bd: #fde68a;
--danger: #b91c1c;
--danger-bg: #fef2f2;
--danger-bd: #fecaca;
/* geometry */
--r: 10px;
--r-sm: 7px;
--r-xs: 5px;
--sh: 0 1px 2px rgba(15,23,42,.04);
/* type */
--fs: 13.5px;
--mono: "JetBrains Mono","D2Coding",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--tx);
font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-size:var(--fs);
line-height:1.45;
-webkit-font-smoothing:antialiased;
}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
/* --------------------------------------------------------------------------
2. 페이지 셸 (1600px 좌측 정렬)
-------------------------------------------------------------------------- */
.page{width:100%;max-width:var(--page-w);min-width:0;padding:24px 24px 72px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:16px}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--tx3);margin-bottom:7px}
.crumb b{color:var(--tx2);font-weight:600}
.crumb .sep{margin:0 6px;color:#cbd5e1}
h1.title{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em}
.subtitle{margin:5px 0 0;font-size:12.5px;color:var(--tx2)}
.head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.head-actions .lbl{font-size:13px;font-weight:700;color:var(--tx2);white-space:nowrap}
/* --------------------------------------------------------------------------
3. 버튼
-------------------------------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
height:36px;padding:0 16px;border-radius:var(--r-sm);
border:1px solid var(--bd-field);background:#fff;color:var(--tx2);
font-weight:600;white-space:nowrap;cursor:pointer;transition:.12s;
}
.btn:hover{background:#f8fafc;border-color:#94a3b8;color:var(--tx);text-decoration:none}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(29,78,216,.16)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-h);border-color:var(--primary-h);color:#fff}
.btn-danger{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger)}
.btn-danger:hover{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.btn-lg{height:40px;padding:0 24px;font-size:14px;font-weight:700}
.btn-sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:var(--r-xs)}
.btn-xs{height:26px;padding:0 9px;font-size:12px;border-radius:var(--r-xs)}
.btn-dash{border-style:dashed}
.btn-link{border:0;background:none;color:var(--primary);padding:0 4px;height:auto;font-weight:600}
.btn-link:hover{background:none;text-decoration:underline;color:var(--primary-h)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-group{display:inline-flex;gap:6px}
/* --------------------------------------------------------------------------
4. 카드
-------------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:14px;overflow:hidden}
.card-head{
display:flex;align-items:center;gap:12px;
padding:14px 16px;border-bottom:1px solid var(--bd);
}
.card-head .ico{
width:30px;height:30px;border-radius:8px;flex-shrink:0;
background:var(--primary-l);border:1px solid #dbeafe;color:var(--primary);
display:flex;align-items:center;justify-content:center;font-size:14px;
}
.card-head .txt{min-width:0}
.card-head .t{font-size:14px;font-weight:800;letter-spacing:-.01em}
.card-head .s{font-size:12px;color:var(--tx3);margin-top:1px}
.card-head .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.card-head .cnt{font-size:12.5px;font-weight:700;color:var(--primary)}
.card-body{padding:16px}
.card-body.tight{padding:0}
/* 상태 안내 줄 */
.notice{
display:block;line-height:1.7;
padding:11px 16px;margin-bottom:14px;
background:#f8fafc;border:1px solid var(--bd);border-radius:var(--r);
color:var(--tx2);font-size:12.5px;
}
.notice.fx{display:flex;align-items:center;gap:8px;line-height:1.55}
.notice.blue{background:var(--primary-l);border-color:#dbeafe;color:#1e40af}
.notice.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.statusline{
margin:14px 16px 0;padding:9px 12px;border-radius:var(--r-sm);
background:#f8fafc;border:1px solid var(--bd);color:var(--tx2);
font-family:var(--mono);font-size:12px;font-weight:600;
}
/* --------------------------------------------------------------------------
5. 검색 바 (셀 분할형)
-------------------------------------------------------------------------- */
.filterbar{
display:flex;flex-wrap:wrap;align-items:stretch;
background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
box-shadow:var(--sh);margin-bottom:14px;overflow:hidden;
}
.fb-cell{
flex:1 1 0;min-width:170px;padding:11px 14px;
border-right:1px solid var(--bd-in);border-bottom:1px solid transparent;
}
.fb-cell > label{display:block;font-size:11.5px;font-weight:700;color:var(--tx2);margin-bottom:5px}
.fb-cell > label .req{color:#ef4444;margin-left:2px}
.fb-cell .fb-in{
width:100%;height:26px;padding:0;border:0;background:none;outline:none;
font-size:13.5px;font-weight:600;color:var(--tx);
}
.fb-cell .fb-in::placeholder{color:var(--tx4);font-weight:500}
.fb-cell select.fb-in{
appearance:none;padding-right:22px;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 0 center;
}
.fb-cell input[type=date].fb-in,
.fb-cell input[type=month].fb-in{font-weight:600}
.fb-actions{
display:flex;align-items:center;gap:8px;
padding:11px 16px;background:var(--th);border-left:1px solid var(--bd-in);
flex:0 0 auto;margin-left:auto;
}
.fb-actions .meta{font-size:12.5px;color:var(--tx2);font-weight:600;white-space:nowrap}
.fb-row2{flex-basis:100%;display:flex;align-items:center;gap:8px;padding:0 14px 12px;border-top:0}
/* --------------------------------------------------------------------------
6. 입력 요소
-------------------------------------------------------------------------- */
.f{
width:100%;height:34px;padding:0 10px;
border:1px solid var(--bd-field);border-radius:var(--r-xs);background:#fff;
}
.f:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.f[readonly],.f:disabled{background:#f8fafc;color:var(--tx2)}
.f::placeholder{color:var(--tx4)}
.f.num{text-align:right;font-variant-numeric:tabular-nums}
.f.center{text-align:center}
.f.sm{height:30px}
select.f{
appearance:none;padding-right:30px;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center;
}
textarea.f{height:auto;min-height:76px;padding:9px 10px;resize:vertical;line-height:1.55}
.f-wrap{display:flex;align-items:center;gap:6px}
.hint{font-size:12px;color:var(--tx3);margin-top:6px}
.chk,.radio{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;color:var(--tx2)}
.chk input,.radio input{accent-color:var(--primary);width:15px;height:15px;margin:0}
.sel-company{
width:320px;height:38px;padding:0 34px 0 12px;
border:1px solid var(--bd-field);border-radius:var(--r-sm);background:#fff;
appearance:none;font-weight:600;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center;
}
.sel-company:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
/* --------------------------------------------------------------------------
7. 표
-------------------------------------------------------------------------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;table-layout:fixed}
table.tbl th{
height:44px;padding:0 12px;text-align:left;
background:var(--th);border-bottom:1px solid var(--bd);
font-size:12.5px;font-weight:700;color:var(--tx2);white-space:nowrap;
}
table.tbl th + th{border-left:1px solid var(--bd-in)}
table.tbl td{
height:54px;padding:8px 12px;border-bottom:1px solid var(--bd-in);
vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover td{background:var(--hover)}
table.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl .center{text-align:center}
table.tbl .mono{font-family:var(--mono);font-size:12.5px;color:var(--tx2)}
table.tbl .strong{font-weight:700;color:var(--tx)}
table.tbl .muted{color:var(--tx3)}
table.tbl .act{text-align:right}
table.tbl .act .btn-group{justify-content:flex-end}
.tbl-empty{padding:56px 0;text-align:center;color:var(--tx3);font-weight:600}
.tbl-foot{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:11px 16px;border-top:1px solid var(--bd);background:var(--th);
font-size:12.5px;color:var(--tx2);font-weight:600;
}
.tbl-foot .sum{display:flex;gap:18px}
.tbl-foot .sum b{color:var(--tx);font-variant-numeric:tabular-nums}
/* 표 안의 굵은 합계 행 */
table.tbl tr.total td{background:#f1f5f9;font-weight:800;border-top:1px solid var(--bd)}
/* --------------------------------------------------------------------------
8. 배지 / 칩
-------------------------------------------------------------------------- */
.badge{
display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:var(--r-xs);
font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent;
}
.badge-code{font-family:var(--mono);background:var(--primary-l);border-color:#dbeafe;color:var(--primary)}
.badge-ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok);font-family:var(--mono)}
.badge-use{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.badge-off{background:#f8fafc;border-color:var(--bd);color:var(--tx3)}
.badge-warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.badge-info{background:var(--primary-l);border-color:#dbeafe;color:var(--primary)}
.badge-danger{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger)}
.badge-purple{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}
.badge-y{width:23px;justify-content:center;padding:0;background:#f0fdf4;border-color:#bbf7d0;color:#15803d;font-family:var(--mono)}
.chip{
display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 10px;
border-radius:999px;background:var(--primary-l);border:1px solid var(--primary-bd);
color:var(--primary);font-size:12px;font-weight:600;
}
.chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0}
/* --------------------------------------------------------------------------
9. 통계 타일
-------------------------------------------------------------------------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px}
.stat .k{font-size:12px;font-weight:700;color:var(--tx2)}
.stat .v{margin-top:6px;font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .v.sm{font-size:19px}
.stat .d{margin-top:3px;font-size:11.5px;color:var(--tx3)}
.stat.accent .v{color:var(--primary)}
/* 한 줄 요약 바 */
.summary{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
box-shadow:var(--sh);margin-bottom:14px;overflow:hidden;
}
.summary > div{padding:13px 16px;border-right:1px solid var(--bd-in)}
.summary > div:last-child{border-right:0}
.summary .k{font-size:12px;font-weight:700;color:var(--tx2)}
.summary .v{margin-top:4px;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
/* --------------------------------------------------------------------------
10. 탭
-------------------------------------------------------------------------- */
.tabs-pill{display:flex;gap:6px;margin-bottom:14px}
.tabs-pill button{
height:34px;padding:0 16px;border-radius:var(--r-sm);
border:1px solid transparent;background:none;color:var(--tx2);
font-weight:600;cursor:pointer;transition:.12s;
}
.tabs-pill button:hover{background:#fff;border-color:var(--bd)}
.tabs-pill button.on{background:#fff;border-color:var(--bd);box-shadow:var(--sh);color:var(--tx);font-weight:800}
.tabs-line{display:flex;align-items:center;border-bottom:1px solid var(--bd);padding:0 16px;background:#fff}
.tabs-line button{
position:relative;height:46px;padding:0 22px;display:inline-flex;align-items:center;gap:7px;
border:0;background:none;cursor:pointer;color:var(--tx2);font-weight:600;
}
.tabs-line button small{font-size:11.5px;color:var(--tx3);font-weight:600}
.tabs-line button.on{color:var(--primary);font-weight:800}
.tabs-line button.on small{color:#60a5fa}
.tabs-line button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--primary);border-radius:2px}
.tabs-line .guide{
margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;
border-radius:999px;background:var(--warn-bg);border:1px solid var(--warn-bd);
color:var(--warn);font-size:12px;font-weight:600;
}
.tabs-line .guide:hover{text-decoration:none;background:#fef3c7}
/* --------------------------------------------------------------------------
11. 폼 (등록·수정 화면)
-------------------------------------------------------------------------- */
.form-sec{
display:flex;align-items:center;gap:9px;
padding:11px 16px;background:var(--th);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
font-size:13px;font-weight:800;color:var(--tx);
}
.form-sec::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--primary)}
.card > .form-sec:first-child{border-top:0}
.form-grid{display:grid;grid-template-columns:132px minmax(0,1fr) 132px minmax(0,1fr);gap:0}
.form-grid.one{grid-template-columns:132px minmax(0,1fr)}
.form-grid.three{grid-template-columns:repeat(3,132px minmax(0,1fr))}
.form-grid .fl{
display:flex;align-items:center;padding:0 12px;min-height:52px;
background:var(--th);border-bottom:1px solid var(--bd-in);border-right:1px solid var(--bd-in);
font-size:12.5px;font-weight:700;color:var(--tx2);
}
.form-grid .fv{
display:flex;align-items:center;gap:8px;padding:9px 12px;min-height:52px;
border-bottom:1px solid var(--bd-in);border-right:1px solid var(--bd-in);
}
.form-grid .fv:last-child,.form-grid .fl:last-child{border-right:0}
.form-grid .fl.empty{background:#fff}
.form-grid .span2{grid-column:span 2}
.form-grid .span3{grid-column:span 3}
.form-grid .span4{grid-column:span 4}
.form-grid .row-last{border-bottom:0}
.req{color:#ef4444;margin-left:2px}
.q{width:15px;height:15px;border-radius:50%;background:#cbd5e1;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:help;margin-left:4px}
/* 라벨이 위에 붙는 입력 그리드 (조회 조건 패널) */
.field-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 16px}
.field-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.field-grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.field-grid .fg-span2{grid-column:span 2}
.field-grid .fg-full{grid-column:1/-1}
.field-grid label{display:block;font-size:12px;font-weight:700;color:var(--tx2);margin-bottom:6px}
.form-foot{display:flex;align-items:center;gap:8px;padding:14px 16px;border-top:1px solid var(--bd);background:var(--card-alt)}
.form-foot.right{justify-content:flex-end}
.form-foot .spacer{margin-left:auto}
.result-box{
margin-top:14px;padding:14px 16px;border-radius:var(--r-sm);
background:var(--card-alt);border:1px solid var(--bd);color:var(--tx2);font-weight:600;
}
/* --------------------------------------------------------------------------
12. 페이지네이션 / 툴바
-------------------------------------------------------------------------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-top:1px solid var(--bd)}
.pagination .pg{font-family:var(--mono);font-weight:700;color:var(--tx2);padding:0 6px}
.toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--bd);background:var(--card-alt);flex-wrap:wrap}
.toolbar .spacer{margin-left:auto}
/* --------------------------------------------------------------------------
13. 달력
-------------------------------------------------------------------------- */
.cal{border-top:1px solid var(--bd)}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);background:var(--th)}
.cal-week div{padding:9px 0;text-align:center;font-size:12.5px;font-weight:700;color:var(--tx2);border-right:1px solid var(--bd-in)}
.cal-week div:last-child{border-right:0}
.cal-week div:first-child{color:#dc2626}
.cal-week div:last-child{color:var(--primary)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-cell{
min-height:132px;padding:8px;border-top:1px solid var(--bd-in);border-right:1px solid var(--bd-in);
display:flex;flex-direction:column;gap:5px;
}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell .d{display:flex;align-items:center;justify-content:space-between}
.cal-cell .d b{font-size:12.5px;font-weight:700}
.cal-cell .d .add{font-size:11.5px;font-weight:700;color:var(--primary);opacity:0;transition:.12s}
.cal-cell:hover .d .add{opacity:1}
.cal-cell.out{background:#fafbfc}
.cal-cell.out .d b{color:var(--tx4)}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--primary);border-radius:4px}
.cal-ev{
padding:5px 7px;border-radius:var(--r-xs);font-size:11.5px;font-weight:600;
background:var(--primary-l);border:1px solid #dbeafe;color:#1e40af;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-ev .amt{float:right;font-variant-numeric:tabular-nums;font-weight:700}
.cal-ev.green{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
.cal-ev.purple{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}
.cal-ev.amber{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
/* --------------------------------------------------------------------------
14. 세금계산서 본표 전용
-------------------------------------------------------------------------- */
.optbar{display:flex;align-items:center;gap:26px;padding:12px 16px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.optgrp{display:flex;align-items:center;gap:10px}
.optgrp .name{font-weight:700;color:var(--tx2)}
.seg{display:inline-flex;border:1px solid var(--bd-field);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.seg label{display:inline-flex;align-items:center;height:30px;padding:0 14px;cursor:pointer;font-weight:600;color:var(--tx2);border-left:1px solid var(--bd-in)}
.seg label:first-child{border-left:0}
.seg label input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--primary);color:#fff}
.optbar .divider{width:1px;height:22px;background:var(--bd)}
.optbar .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.mini-field{display:flex;align-items:center;gap:6px;color:var(--tx2);font-weight:600}
.mini-field .f{height:28px}
.doc-title{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bd)}
.doc-title h2{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em}
.doc-title .hint{font-size:12px;color:var(--tx3)}
.parties{display:flex;border-bottom:1px solid var(--bd)}
.party{flex:1 1 0;min-width:0;display:grid;grid-template-columns:32px 96px minmax(0,1fr) 84px minmax(0,1fr);grid-auto-rows:38px}
.party + .party{border-left:1px solid var(--bd)}
.party .band{grid-row:1 / span 6;grid-column:1;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:upright;font-weight:800;font-size:12.5px;letter-spacing:4px;border-right:1px solid var(--bd-in)}
.party.sup .band{background:var(--danger-bg);color:var(--danger)}
.party.buy .band{background:var(--primary-l);color:var(--primary)}
.party .lb{display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--bd-in);border-right:1px solid var(--bd-in);font-weight:700;font-size:12.5px}
.party.sup .lb{background:var(--danger-bg);color:var(--danger)}
.party.buy .lb{background:var(--primary-l);color:var(--primary)}
.party .cel{display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--bd-in);border-right:1px solid var(--bd-in);min-width:0}
.party .cel:last-child,.party .lb:last-child{border-right:0}
.party .row-last .lb,.party .row-last .cel,.party .lb.row-last,.party .cel.row-last{border-bottom:0}
.party .span3{grid-column:span 3}
.party .f{height:30px}
.sum3{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--bd)}
.sum3 .h{display:flex;align-items:center;justify-content:center;height:34px;background:var(--th);font-weight:700;color:var(--tx2);font-size:12.5px;border-right:1px solid var(--bd-in);border-bottom:1px solid var(--bd-in)}
.sum3 .h:last-child{border-right:0}
.sum3 .v{display:flex;align-items:center;height:42px;padding:0 10px;border-right:1px solid var(--bd-in)}
.sum3 .v:last-child{border-right:0}
.sum3 .v .f{height:32px}
.big-num{font-size:15px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.memo-row{display:grid;grid-template-columns:128px minmax(0,1fr) 44px;border-bottom:1px solid var(--bd-in)}
.memo-row .h{display:flex;align-items:center;justify-content:center;background:var(--th);font-weight:700;color:var(--tx2);font-size:12.5px;border-right:1px solid var(--bd-in)}
.memo-row .v{padding:6px 10px;display:flex;align-items:center}
.memo-row .v .f{height:30px}
.memo-row .a{display:flex;align-items:center;justify-content:center;border-left:1px solid var(--bd-in)}
.icobtn{
width:24px;height:24px;border-radius:50%;border:1px solid var(--bd-field);background:#fff;color:var(--tx2);
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;padding:0;
}
.icobtn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.icobtn.del:hover{background:#ef4444;border-color:#ef4444}
table.items{width:100%;border-collapse:collapse;table-layout:fixed;min-width:1400px}
table.items th{height:36px;background:var(--th);font-weight:700;font-size:12.5px;color:var(--tx2);border-bottom:1px solid var(--bd);border-right:1px solid var(--bd-in);text-align:center;padding:0 6px}
table.items th:last-child{border-right:0}
table.items td{height:42px;padding:5px 6px;border-bottom:1px solid var(--bd-in);border-right:1px solid var(--bd-in);vertical-align:middle}
table.items td:last-child{border-right:0}
table.items tbody tr:hover td{background:var(--hover)}
table.items tbody tr:last-child td{border-bottom:0}
table.items .f{height:30px}
.cell-flex{display:flex;align-items:center;gap:5px}
.pay{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 300px;border-top:1px solid var(--bd)}
.pay .col{border-right:1px solid var(--bd-in)}
.pay .col:last-child{border-right:0}
.pay .h{height:34px;display:flex;align-items:center;justify-content:center;background:var(--th);font-weight:700;font-size:12.5px;color:var(--tx2);border-bottom:1px solid var(--bd-in)}
.pay .v{height:48px;display:flex;align-items:center;padding:0 10px}
.pay .v .f{height:32px}
.pay .total .h{background:#f1f5f9;color:var(--tx)}
.pay .total .v .f{font-weight:800;font-size:14px;background:#f8fafc}
.pay .kind .inner{display:flex;align-items:center;justify-content:center;gap:14px;height:48px;padding:0 12px}
.pay .kind .lead{font-weight:700;color:var(--tx2)}
/* --------------------------------------------------------------------------
15. 페이지 푸터
-------------------------------------------------------------------------- */
.page-foot{
display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;
border-top:1px solid var(--bd);color:var(--tx3);font-size:12px;
}
.page-foot .brand{font-weight:800;color:var(--tx2)}
.page-foot .mono{font-family:var(--mono)}
.page-foot .spacer{margin-left:auto}
/* --------------------------------------------------------------------------
16. 레이어 팝업 (등록·수정 모달)
-------------------------------------------------------------------------- */
.modal-dim{
position:fixed;inset:0;z-index:1000;
display:flex;align-items:flex-start;justify-content:center;
padding:56px 24px;overflow-y:auto;
background:rgba(15,23,42,.48);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
animation:mdlFade .16s ease-out;
}
.modal-dim[hidden]{display:none}
body.modal-open{overflow:hidden}
.modal{
position:relative;width:100%;margin:auto;
background:var(--card);border-radius:12px;
box-shadow:0 24px 60px rgba(15,23,42,.28),0 2px 8px rgba(15,23,42,.12);
display:flex;flex-direction:column;max-height:calc(100vh - 112px);
animation:mdlUp .18s cubic-bezier(.2,.8,.3,1);
overflow:hidden;
}
.modal-sm{max-width:560px}
.modal-md{max-width:760px}
.modal-lg{max-width:1000px}
.modal-xl{max-width:1240px}
@keyframes mdlFade{from{opacity:0}to{opacity:1}}
@keyframes mdlUp{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{
display:flex;align-items:center;gap:12px;flex-shrink:0;
height:56px;padding:0 12px 0 20px;border-bottom:1px solid var(--bd);
}
.modal-head .t{font-size:16px;font-weight:800;letter-spacing:-.01em}
.modal-head .s{font-size:12px;color:var(--tx3);margin-top:1px}
.modal-head .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.modal-x{
width:32px;height:32px;border-radius:8px;border:0;background:none;color:var(--tx2);
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:19px;line-height:1;
}
.modal-x:hover{background:#f1f5f9;color:var(--tx)}
.modal-body{overflow-y:auto;flex:1 1 auto}
.modal-body.pad{padding:18px 20px}
.modal-body > .form-sec:first-child{border-top:0}
.modal-body > .form-grid:last-child .fl,
.modal-body > .form-grid:last-child .fv{border-bottom-width:1px}
.modal-foot{
display:flex;align-items:center;gap:8px;flex-shrink:0;
padding:14px 20px;border-top:1px solid var(--bd);background:var(--card-alt);
}
.modal-foot .spacer{margin-left:auto}
.modal-foot .hint{margin:0}
/* 모달 안의 폼 라벨 폭은 조금 좁게 */
.modal .form-grid{grid-template-columns:118px minmax(0,1fr) 118px minmax(0,1fr)}
.modal .form-grid.one{grid-template-columns:118px minmax(0,1fr)}
.modal .form-grid .fl,.modal .form-grid .fv{min-height:48px}
/* 파일 첨부 줄 */
.file-row{display:flex;align-items:center;gap:9px;width:100%}
.file-row .name{color:var(--tx3)}
.attach-note{
width:auto;padding:11px 14px;border-radius:var(--r-sm);background:var(--card-alt);
border:1px solid var(--bd);color:var(--tx2);font-size:12px;line-height:1.6;
}
/* --------------------------------------------------------------------------
17. 파일 드롭존 / 카드 내 검색바 / 헤더 태그
-------------------------------------------------------------------------- */
/* flex 컨테이너(.fv) 안에서는 가로를 꽉 채운다 */
.fv > .attach-note,.form-grid > .attach-note{width:100%}
.dropzone{
width:100%;min-height:104px;padding:18px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
border:1.5px dashed var(--bd-field);border-radius:var(--r-sm);background:var(--card-alt);
color:var(--tx2);text-align:center;transition:.12s;cursor:pointer;
}
.dropzone:hover,.dropzone.on{border-color:var(--primary);background:var(--primary-l)}
.dropzone .t{font-weight:700;color:var(--tx)}
.dropzone .s{font-size:12px;color:var(--tx3)}
.dropzone .s b{color:var(--tx2)}
/* 카드 안에 들어가는 검색바 (권한 관리·가입 승인형) */
.card > .filterbar{
margin:0;border:0;border-bottom:1px solid var(--bd);border-radius:0;box-shadow:none;
}
.card > .filterbar:last-child{border-bottom:0}
/* 카드 헤더 우측 코드 태그 (v0 / ATTACH 등) */
.card-head .tag{
font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;
color:var(--tx3);
}
/* 비밀번호 마스킹 셀 */
.secret{display:inline-flex;align-items:center;gap:8px}
.secret .dots{font-family:var(--mono);letter-spacing:2px;color:var(--tx2)}
/* 단계 안내 (1 → 2 → 3 → 4) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--bd);background:var(--card-alt)}
.steps .step{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-right:1px solid var(--bd-in)}
.steps .step:last-child{border-right:0}
.steps .step .n{
flex-shrink:0;width:22px;height:22px;border-radius:50%;
background:var(--primary);color:#fff;font-family:var(--mono);font-size:11.5px;font-weight:700;
display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.steps .step .t{font-size:13px;font-weight:700}
.steps .step .d{font-size:12px;color:var(--tx3);margin-top:2px}
/* 선택된 대상 표시 바 */
.pickbar{display:flex;align-items:flex-end;gap:14px;padding:13px 16px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.pickbar .fld{min-width:220px}
.pickbar .fld > label{display:block;font-size:11.5px;font-weight:700;color:var(--tx2);margin-bottom:5px}
.pickbar .spacer{margin-left:auto}
/* 진행 상태 줄 */
.progress{height:6px;border-radius:99px;background:#e2e8f0;overflow:hidden;width:100%}
.progress > i{display:block;height:100%;background:var(--primary);border-radius:99px}
/* --------------------------------------------------------------------------
18. 대시보드 / 차트
-------------------------------------------------------------------------- */
:root{
--c1:#1d4ed8; /* 계열 1 — 매출 */
--c2:#0d9488; /* 계열 2 — 매입·지출 (CVD 검증 통과 조합) */
}
.grid2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.grid2 > .card,.grid3 > .card{margin-bottom:0}
.chart{padding:16px 18px 10px}
.chart-legend{display:flex;align-items:center;gap:18px;margin-bottom:14px;font-size:12.5px;color:var(--tx2);font-weight:600}
.chart-legend span{display:inline-flex;align-items:center;gap:7px}
.chart-legend i{width:10px;height:10px;border-radius:3px;display:block}
.chart-legend .unit{margin-left:auto;color:var(--tx3);font-weight:500}
.chart-plot{
position:relative;height:196px;
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:end;gap:10px;
border-bottom:1px solid var(--bd);
background:repeating-linear-gradient(to top,transparent 0,transparent 48px,var(--bd-in) 48px,var(--bd-in) 49px);
}
.chart-col{height:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.chart-col i{
position:relative;width:20px;border-radius:4px 4px 0 0;min-height:2px;display:block;
}
.chart-col i.s1{background:var(--c1)}
.chart-col i.s2{background:var(--c2)}
.chart-col i::after{
content:attr(data-v);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
background:#0f172a;color:#fff;font-size:11px;font-weight:600;white-space:nowrap;
padding:3px 7px;border-radius:5px;opacity:0;pointer-events:none;transition:.12s;
}
.chart-col i:hover::after{opacity:1}
.chart-col i:hover{outline:2px solid #fff;outline-offset:-2px;filter:brightness(1.08)}
.chart-x{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;padding-top:8px}
.chart-x span{text-align:center;font-size:11.5px;color:var(--tx3);font-weight:600}
.chart-note{padding:0 18px 14px;font-size:12px;color:var(--tx3)}
/* 목록형 위젯 (할 일·최근 활동) */
.list-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--bd-in)}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:var(--hover)}
.list-row .t{font-weight:600}
.list-row .s{font-size:12px;color:var(--tx3);margin-top:2px}
.list-row .spacer{margin-left:auto}
.list-row .amt{font-variant-numeric:tabular-nums;font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--primary)}
.dot.warn{background:#f59e0b}.dot.ok{background:#10b981}.dot.danger{background:#ef4444}
/* --------------------------------------------------------------------------
19. 상세 화면 (읽기 전용 정보 + 타임라인)
-------------------------------------------------------------------------- */
.info-grid{display:grid;grid-template-columns:150px minmax(0,1fr) 150px minmax(0,1fr)}
.info-grid.one{grid-template-columns:150px minmax(0,1fr)}
.info-grid .k{
display:flex;align-items:center;padding:0 14px;min-height:48px;
background:var(--th);border-bottom:1px solid var(--bd-in);border-right:1px solid var(--bd-in);
font-size:12.5px;font-weight:700;color:var(--tx2);
}
.info-grid .v{
display:flex;align-items:center;gap:8px;padding:11px 14px;min-height:48px;
border-bottom:1px solid var(--bd-in);border-right:1px solid var(--bd-in);
}
.info-grid .v:last-child,.info-grid .k:last-child{border-right:0}
.info-grid .span3{grid-column:span 3}
.info-grid .row-last{border-bottom:0}
.timeline{padding:6px 18px 16px}
.timeline .tl{position:relative;padding:0 0 18px 26px;border-left:2px solid var(--bd)}
.timeline .tl:last-child{padding-bottom:2px;border-left-color:transparent}
.timeline .tl::before{
content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;
background:#fff;border:2px solid var(--bd-field);
}
.timeline .tl.on::before{background:var(--primary);border-color:var(--primary)}
.timeline .tl.done::before{background:var(--ok);border-color:var(--ok)}
.timeline .tl .t{font-weight:700;font-size:13px}
.timeline .tl .d{font-size:12px;color:var(--tx3);margin-top:3px}
.timeline .tl .m{font-family:var(--mono);font-size:11.5px;color:var(--tx3)}
/* --------------------------------------------------------------------------
20. 빈 상태 / 토스트 / 권한 매트릭스 / 로그인
-------------------------------------------------------------------------- */
.empty-state{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
padding:64px 20px;text-align:center;
}
.empty-state .ico{
width:52px;height:52px;border-radius:14px;background:var(--th);border:1px solid var(--bd);
display:flex;align-items:center;justify-content:center;font-size:22px;
}
.empty-state .t{font-size:15px;font-weight:700}
.empty-state .d{font-size:12.5px;color:var(--tx3);max-width:420px;line-height:1.7}
.toast{
display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-sm);
background:#0f172a;color:#fff;font-weight:600;box-shadow:0 8px 24px rgba(15,23,42,.24);
}
.toast .ico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}
.toast.ok .ico{background:#10b981}
.toast.danger .ico{background:#ef4444}
.toast.warn .ico{background:#f59e0b;color:#111}
.toast button{margin-left:6px;border:0;background:none;color:#94a3b8;cursor:pointer;font-size:15px}
table.matrix th:first-child,table.matrix td:first-child{
position:sticky;left:0;background:var(--card);z-index:1;
border-right:1px solid var(--bd);
}
table.matrix thead th:first-child{background:var(--th)}
table.matrix td{text-align:center}
table.matrix td:first-child{text-align:left;font-weight:600}
table.matrix .grp td{background:var(--th);font-weight:800;font-size:12.5px}
table.matrix .grp td:first-child{background:var(--th)}
.auth{display:flex;min-height:100vh}
.auth .brandside{
width:44%;min-width:420px;padding:56px 48px;color:#e2e8f0;
background:linear-gradient(160deg,#0f172a 0%,#12233f 60%,#123240 100%);
display:flex;flex-direction:column;
}
.auth .brandside .logo{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:800;color:#fff}
.auth .brandside .logo .mark{
width:38px;height:38px;border-radius:10px;background:#0d9488;color:#fff;
display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;
}
.auth .brandside h2{margin:auto 0 14px;font-size:26px;line-height:1.45;color:#fff;font-weight:800;letter-spacing:-.02em}
.auth .brandside p{margin:0 0 auto;color:#94a3b8;font-size:13.5px;line-height:1.8}
.auth .brandside .foot{color:#64748b;font-size:12px;font-family:var(--mono)}
.auth .formside{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.auth .box{width:100%;max-width:380px}
.auth .box h1{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.auth .box .sub{margin:0 0 26px;font-size:13px;color:var(--tx2)}
.auth .box label{display:block;font-size:12.5px;font-weight:700;color:var(--tx2);margin:0 0 6px}
.auth .box .f{height:42px;margin-bottom:14px}
.auth .box .btn{width:100%;height:44px;font-size:14px;font-weight:700}
.auth .box .row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 20px}
/* 번호 페이지네이션 */
.pagination .pg-btn{
min-width:32px;height:32px;padding:0 9px;border-radius:var(--r-xs);
border:1px solid var(--bd-field);background:#fff;color:var(--tx2);
font-family:var(--mono);font-weight:700;cursor:pointer;
}
.pagination .pg-btn:hover{background:#f8fafc;color:var(--tx)}
.pagination .pg-btn.on{background:var(--primary);border-color:var(--primary);color:#fff}
/* 아바타 */
.avatar{
width:28px;height:28px;border-radius:8px;flex-shrink:0;
background:var(--primary-l);border:1px solid #dbeafe;color:var(--primary);
display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
/* 팝업 상단 아이콘 (확인 팝업) */
.modal-icon{
width:44px;height:44px;border-radius:12px;margin:20px auto 0;
display:flex;align-items:center;justify-content:center;font-size:20px;
background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger);
}
.modal-icon.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.modal-icon.info{background:var(--primary-l);border-color:var(--primary-bd);color:var(--primary)}
.modal-msg{padding:14px 24px 20px;text-align:center}
.modal-msg .t{font-size:15px;font-weight:800}
.modal-msg .d{margin-top:8px;font-size:13px;color:var(--tx2);line-height:1.7}
/* --------------------------------------------------------------------------
21. 분할 패널 / 트리 / 결재 흐름 / 알림
-------------------------------------------------------------------------- */
.split-panel{display:grid;grid-template-columns:340px minmax(0,1fr);align-items:start}
.split-panel > .left{border-right:1px solid var(--bd);min-width:0;display:flex;flex-direction:column}
.split-panel > .right{min-width:0}
.pick-head{
display:flex;align-items:center;gap:8px;padding:11px 14px;flex-shrink:0;
border-bottom:1px solid var(--bd);background:var(--th);
}
.pick-head .f{height:30px;min-width:0}
.pick-list{
overflow-y:auto;overscroll-behavior:contain;
max-height:620px;min-width:0;flex:1 1 auto;
}
.pick-list .item{
display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;
width:100%;box-sizing:border-box;min-width:0;
border-bottom:1px solid var(--bd-in);border-left:3px solid transparent;
}
.pick-list .item:hover{background:var(--hover)}
.pick-list .item.on{background:var(--primary-l);border-left-color:var(--primary)}
.pick-list .item .sq{
width:26px;height:26px;border-radius:7px;flex-shrink:0;
background:var(--th);border:1px solid var(--bd);color:var(--tx3);
display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;
}
.pick-list .item.on .sq{background:#fff;border-color:var(--primary-bd);color:var(--primary)}
.pick-list .item .txt{min-width:0;flex:1 1 auto}
.pick-list .item .t{
font-weight:700;font-size:13px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pick-list .item .s{
font-family:var(--mono);font-size:11px;color:var(--tx3);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pick-list .item .cnt-b{
flex-shrink:0;min-width:26px;height:20px;padding:0 6px;border-radius:5px;
background:var(--th);border:1px solid var(--bd);color:var(--tx2);
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:11px;font-weight:700;
}
.pick-list .item.on .cnt-b{background:#fff;border-color:var(--primary-bd);color:var(--primary)}
.pick-foot{
padding:10px 14px;border-top:1px solid var(--bd);background:var(--th);flex-shrink:0;
font-size:12px;color:var(--tx2);font-weight:600;display:flex;align-items:center;gap:8px;
}
.pick-foot .spacer{margin-left:auto}
/* 메뉴 트리 */
.tree-name{display:flex;align-items:center;gap:8px}
.tree-name .ind{display:inline-block;color:var(--tx4);font-family:var(--mono);flex-shrink:0}
.tree-name .ico{
width:22px;height:22px;border-radius:6px;background:var(--th);border:1px solid var(--bd);
display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;
}
.tree-name.depth1{padding-left:0}
.tree-name.depth2{padding-left:22px}
.tree-name.depth3{padding-left:44px}
.drag{cursor:grab;color:var(--tx4);font-size:15px;user-select:none}
/* 결재 흐름 */
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flow .node{
display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;
background:var(--primary-l);border:1px solid var(--primary-bd);color:var(--primary);
font-size:12.5px;font-weight:700;
}
.flow .node .n{
width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:10.5px;font-family:var(--mono);
}
.flow .node.end{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
.flow .node.end .n{background:var(--ok)}
.flow .arr{color:var(--tx4);font-size:14px}
/* 알림 */
.list-row.unread{background:var(--primary-l)}
.list-row.unread .t::after{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--primary);margin-left:7px;vertical-align:middle;
}
.list-row .time{font-size:11.5px;color:var(--tx3);font-family:var(--mono);white-space:nowrap}
.ico-round{
width:32px;height:32px;border-radius:10px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:14px;
background:var(--th);border:1px solid var(--bd);
}
.ico-round.blue{background:var(--primary-l);border-color:#dbeafe}
.ico-round.green{background:var(--ok-bg);border-color:var(--ok-bd)}
.ico-round.amber{background:var(--warn-bg);border-color:var(--warn-bd)}
.ico-round.red{background:var(--danger-bg);border-color:var(--danger-bd)}
/* --------------------------------------------------------------------------
22. 유틸
-------------------------------------------------------------------------- */
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.spacer{margin-left:auto}
.mono{font-family:var(--mono)}
.muted{color:var(--tx3)}
.nowrap{white-space:nowrap}
.mb0{margin-bottom:0}
.mt14{margin-top:14px}
/* --------------------------------------------------------------------------
23. 급여 명세 (지급 / 공제 대비표) — .paysheet + .net-bar
-------------------------------------------------------------------------- */
.paysheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--bd)}
.paysheet > .col{border-right:1px solid var(--bd-in);min-width:0}
.paysheet > .col:last-child{border-right:0}
.paysheet .ph{
display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;
background:var(--th);border-bottom:1px solid var(--bd-in);
font-size:12.5px;font-weight:700;color:var(--tx2);
}
.paysheet .ph .cnt{margin-left:auto;font-weight:600;color:var(--tx3);font-size:12px}
.paysheet .it{
display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;
border-bottom:1px solid var(--bd-in);font-size:13px;
}
.paysheet .it:last-child{border-bottom:0}
.paysheet .it .n{color:var(--tx2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paysheet .it .a{
margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;
font-weight:600;color:var(--tx);white-space:nowrap;
}
.paysheet .it .a .u{font-family:inherit;font-weight:500;color:var(--tx3);margin-left:2px}
.paysheet .it.zero .n,.paysheet .it.zero .a{color:var(--tx4);font-weight:500}
.paysheet .it .tag{
font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:var(--r-xs);
background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-bd);flex-shrink:0;
}
.paysheet .it .tag.gray{background:var(--th);color:var(--tx3);border-color:var(--bd)}
.paysheet .it .rate{font-size:11.5px;color:var(--tx3);font-family:var(--mono);flex-shrink:0}
.paysheet .sum{
display:flex;align-items:center;height:44px;padding:0 14px;
background:#f1f5f9;border-top:1px solid var(--bd-in);
}
.paysheet .sum .n{font-weight:700;color:var(--tx)}
.paysheet .sum .a{
margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;
font-weight:800;font-size:15px;color:var(--tx);
}
.paysheet .filler{flex:1 1 auto}
.paysheet > .col{display:flex;flex-direction:column}
.paysheet > .col .body{flex:1 1 auto}
.net-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--bd)}
.net-bar > div{padding:13px 16px;border-right:1px solid var(--bd-in)}
.net-bar > div:last-child{border-right:0}
.net-bar .k{font-size:12px;font-weight:700;color:var(--tx2);display:flex;align-items:center;gap:6px}
.net-bar .v{
margin-top:5px;font-size:21px;font-weight:800;font-family:var(--mono);
font-variant-numeric:tabular-nums;color:var(--tx);
}
.net-bar .v .u{font-size:13px;font-weight:600;color:var(--tx3);margin-left:3px}
.net-bar .s{margin-top:3px;font-size:11.5px;color:var(--tx3)}
.net-bar .minus .v{color:var(--danger)}
.net-bar .net{background:var(--primary-l)}
.net-bar .net .k,.net-bar .net .v{color:var(--primary)}
.net-bar .net .s{color:#60a5fa}
/* --------------------------------------------------------------------------
24. 사원 상세 · 근로계약 레이아웃 보정 (v1.9)
좁은 칸에서 라벨/값이 줄바꿈으로 깨지는 것을 막는다.
-------------------------------------------------------------------------- */
/* 좌(좁게) / 우(넓게) 2단 — .grid2 의 반대 비율 */
.grid2.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);align-items:start}
.empty-state.sm{padding:40px 20px}
/* info-grid : 라벨은 절대 줄바꿈하지 않는다 */
.info-grid .k{white-space:nowrap}
.info-grid.lb130{grid-template-columns:130px minmax(0,1fr) 130px minmax(0,1fr)}
.info-grid.lb130.one{grid-template-columns:130px minmax(0,1fr)}
/* 한 줄로 붙여야 하는 값 (사번, 계정, 회사명 등) */
.info-grid .v.line{
flex-wrap:nowrap;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
.info-grid .v.line > *{flex-shrink:0}
.info-grid .v .ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* net-bar : 칸 수 · 텍스트 값 대응 */
.net-bar.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.net-bar.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.net-bar.sm .v{font-size:18px}
/* 숫자가 아닌 값(예: '급여대장 확정 후') — 모노 폰트/자간 깨짐 방지 */
.net-bar .v.txt{
font-family:inherit;font-size:14px;font-weight:700;line-height:1.45;
letter-spacing:0;white-space:normal;color:var(--tx2);
}
.net-bar .net .v.txt{color:var(--primary)}
.net-bar .v .badge{vertical-align:middle;margin-left:6px}
/* paysheet : 값이 아직 없는 상태의 안내 블록 */
.paysheet .ph .badge{margin-left:auto}
.paysheet .ph .badge + .cnt{margin-left:8px}
.ps-note{padding:16px 14px}
.ps-note .t{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:6px}
.ps-note .s{font-size:12.5px;color:var(--tx2);line-height:1.65}
.ps-note .btns{display:flex;gap:8px;margin-top:12px}
.paysheet .sum .a.pend{color:var(--tx3);font-weight:700;font-size:13px;font-family:inherit}
/* 파일 한 줄 표시 */
.file-line{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;white-space:nowrap}
.file-line .fn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tbl-empty .s{margin-top:6px;font-size:12.5px;font-weight:500;color:var(--tx4)}
/* --------------------------------------------------------------------------
25. 계약 문서함 (.docbox) — 초안 / 체결본 / 기타 파일 (v2.0)
-------------------------------------------------------------------------- */
.grid3 > .card,.grid2 > .card{display:flex;flex-direction:column}
.docbox{display:flex;flex-direction:column;flex:1 1 auto;min-height:196px}
.docbox .list{flex:1 1 auto}
.docbox .item{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--bd-in)}
.docbox .item:last-child{border-bottom:0}
.docbox .item .meta{min-width:0;flex:1 1 auto}
.docbox .item .meta .n{
font-size:13px;font-weight:700;color:var(--tx);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.docbox .item .meta .s{
margin-top:3px;font-size:11.5px;color:var(--tx3);font-family:var(--mono);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.docbox .item .btn-group{flex-shrink:0;margin-left:auto}
.docbox .none{
flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:7px;padding:30px 18px;text-align:center;
}
.docbox .none .ic{
width:40px;height:40px;border-radius:12px;background:var(--th);border:1px dashed var(--bd-field);
display:flex;align-items:center;justify-content:center;font-size:17px;opacity:.75;margin-bottom:2px;
}
.docbox .none .t{font-size:13px;font-weight:700;color:var(--tx2)}
.docbox .none .s{font-size:12px;color:var(--tx3);line-height:1.65;max-width:260px}
.docbox .foot{
display:flex;align-items:center;gap:8px;padding:11px 16px;
border-top:1px solid var(--bd-in);background:var(--card-alt);
}
.docbox .foot .muted{font-size:11.5px}
.docbox .foot .spacer{margin-left:auto}
/* 파일 종류 배지 */
.ft{
flex-shrink:0;width:34px;height:34px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:-.02em;
}
.ft.pdf{background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger)}
.ft.doc{background:var(--primary-l);border:1px solid var(--primary-bd);color:var(--primary)}
.ft.xls{background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok)}
.ft.etc{background:var(--th);border:1px solid var(--bd);color:var(--tx3)}
/* 단계 안내 — 현재/완료/대기 구분 */
.steps .step.done .n{background:var(--ok)}
.steps .step.todo .n{background:#cbd5e1;color:#fff}
.steps .step.todo .t{color:var(--tx3)}
.steps .step.on{background:var(--primary-l);box-shadow:inset 3px 0 0 var(--primary)}
.steps .step .t .badge{margin-left:6px}
.steps.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* 값이 비어 있는 칸 — "-" 대신 이유를 쓴다 */
.v .pend{color:var(--tx3);font-size:12.5px}
.v .pend b{color:var(--tx2);font-weight:700}
/* --------------------------------------------------------------------------
26. 문서함형 조밀 목록 (v2.1) — .tabs-doc / .qbar / .tools / .list-wrap / .tbl.grid
많은 건을 한 화면에서 훑는 조회 화면용. 행 높이 30px, 모든 셀 격자선.
-------------------------------------------------------------------------- */
/* 탭 — 발행 | 발행대기 | 삭제 */
.tabs-doc{display:flex;align-items:center;border-bottom:1px solid var(--bd);margin-bottom:12px;background:var(--card);border-radius:var(--r-sm) var(--r-sm) 0 0}
.tabs-doc button{
position:relative;background:none;border:0;cursor:pointer;
padding:0 20px;height:42px;font-size:14.5px;font-weight:700;color:var(--tx3);
}
.tabs-doc button:hover{color:var(--tx2)}
.tabs-doc button + button::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:var(--bd)}
.tabs-doc button.on{color:var(--primary);font-weight:800}
.tabs-doc button.on::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--primary);border-radius:2px}
.tabs-doc button .cnt{margin-left:5px;font-size:12px;font-weight:700;color:var(--tx4)}
.tabs-doc button.on .cnt{color:var(--primary)}
.tabs-doc .spacer{margin-left:auto;padding-right:14px}
/* 조회 조건 한 줄 */
.qbar{
display:flex;align-items:center;flex-wrap:wrap;gap:8px;
padding:11px 16px;background:var(--card);border:1px solid var(--bd);
border-radius:var(--r-sm);box-shadow:var(--sh);margin-bottom:10px;
}
.qbar .lb{font-size:13px;font-weight:700;color:var(--tx);margin-right:8px;white-space:nowrap}
.qbar .f{width:auto;height:32px;font-size:12.5px}
.qbar .f.sel{width:120px}
.qbar .f.date{width:152px}
.qbar .f.kw{width:290px}
.qbar .f.kw-lg{width:360px}
.qbar .tilde{color:var(--tx3);padding:0 2px}
.qbar .div{width:1px;height:20px;background:var(--bd);margin:0 14px}
.qbar .spacer{margin-left:auto}
.qbar .btn{height:32px}
.btn-link{
background:none;border:0;padding:0 8px;cursor:pointer;
color:var(--primary);font-weight:700;font-size:12.5px;font-family:inherit;
}
.btn-link:hover{text-decoration:underline}
/* 목록 툴바 */
.tools{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.tools .spacer{margin-left:auto}
.tools .meta{font-size:12.5px;color:var(--tx2);font-weight:600}
.tools .meta b{color:var(--tx);font-family:var(--mono)}
.chip{
display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
border:1px solid var(--bd);border-radius:var(--r-xs);background:#fff;
font-size:12.5px;font-weight:700;color:var(--tx2);cursor:pointer;white-space:nowrap;
}
.chip:hover{border-color:var(--bd-field)}
.chip .dt{width:9px;height:9px;border-radius:50%;background:var(--tx4)}
.chip.on{border-color:var(--primary-bd);background:var(--primary-l);color:var(--primary)}
.chip.on .dt{background:var(--primary)}
/* 격자 목록 상자 — 합계행이 항상 바닥에 붙는다 */
.list-wrap{
display:flex;flex-direction:column;min-height:520px;margin-bottom:14px;
background:var(--card);border:1px solid var(--bd);border-radius:var(--r-sm);
box-shadow:var(--sh);overflow:hidden;
}
.list-wrap .scroll{flex:1 1 0;height:0;overflow:auto}
.list-wrap .scroll > .tbl{height:100%}
.tbl.grid{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl.grid th,.tbl.grid td{
border:1px solid var(--bd-in);padding:0 8px;height:30px;
white-space:nowrap;color:var(--tx2);font-weight:500;text-align:left;
}
.tbl.grid thead th{
position:sticky;top:0;z-index:2;
background:var(--th);color:var(--tx);font-weight:700;text-align:center;height:34px;
border-top:0;box-shadow:inset 0 -1px 0 var(--bd);
}
.tbl.grid th:first-child,.tbl.grid td:first-child{border-left:0}
.tbl.grid th:last-child,.tbl.grid td:last-child{border-right:0}
.tbl.grid td.center,.tbl.grid th.center{text-align:center}
.tbl.grid td.num,.tbl.grid th.num{text-align:right}
.tbl.grid td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tx);font-weight:600}
.tbl.grid td.mono{font-family:var(--mono);font-size:12px}
.tbl.grid td.strong{color:var(--tx);font-weight:700}
.tbl.grid tbody tr:hover > td{background:var(--hover)}
.tbl.grid tbody tr.sel > td{background:var(--primary-l)}
.tbl.grid a{color:var(--primary);font-weight:700}
.tbl.grid .badge{height:19px;padding:0 6px;font-size:10.5px;border-radius:var(--r-xs)}
.tbl.grid .btn{height:22px;padding:0 10px;font-size:11.5px;border-radius:var(--r-xs)}
.tbl.grid input[type=checkbox]{width:14px;height:14px;accent-color:var(--primary);cursor:pointer;vertical-align:middle}
/* 남는 공간을 먹는 빈 행 — 격자선을 그리지 않는다 */
.tbl.grid tr.sp > td{border:0;height:100%;background:#fff}
.tbl.grid tr.sp > td.none{
text-align:center;vertical-align:middle;
color:var(--tx3);font-size:13px;font-weight:600;line-height:1.9;
}
.tbl.grid tr.sp > td.none .s{display:block;font-size:12px;font-weight:500;color:var(--tx4)}
/* 합계행 */
.tbl.grid tfoot td{
position:sticky;bottom:0;z-index:2;
background:var(--th);color:var(--tx);font-weight:800;height:34px;
border-top:1px solid var(--bd);
}
.tbl.grid tfoot td.num{font-family:var(--mono)}
.tbl.grid tfoot td.lbl{text-align:center;font-weight:800}
/* 정렬 캐럿 */
.sortable{cursor:pointer;user-select:none}
.sortable::after{content:"▾";margin-left:4px;font-size:9px;color:var(--tx4);vertical-align:1px}
.sortable.asc::after{content:"▴";color:var(--primary)}
.sortable.desc::after{content:"▾";color:var(--primary)}
/* 카드 안에 들어가는 격자 목록 — 카드가 이미 테두리를 가지므로 이중선 제거 */
.card > .list-wrap{border:0;box-shadow:none;border-radius:0;margin:0;min-height:420px}
.card > .list-wrap > .tbl-foot{border-top:1px solid var(--bd)}
.list-wrap > .tbl-foot{border-radius:0}
/* --------------------------------------------------------------------------
27. 로그인 화면 보강 (v2.1)
-------------------------------------------------------------------------- */
.auth .brandside{position:relative;overflow:hidden}
.auth .brandside::after{
content:"";position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;
border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,.22),transparent 68%);
}
.auth .brandside > *{position:relative;z-index:1}
.auth .brandside h2{margin:44px 0 14px;font-size:27px}
.auth .brandside p{margin:0 0 30px}
.auth .feat{display:flex;flex-direction:column;gap:16px;margin:0 0 auto}
.auth .feat .it{display:flex;gap:13px;align-items:flex-start}
.auth .feat .ic{
width:36px;height:36px;border-radius:10px;flex-shrink:0;font-size:15px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
display:flex;align-items:center;justify-content:center;
}
.auth .feat .t{color:#e8edf5;font-size:13.5px;font-weight:700}
.auth .feat .d{color:#8fa3bd;font-size:12.5px;margin-top:3px;line-height:1.6}
.auth .brandside .foot{margin-top:34px;display:flex;align-items:center;gap:10px}
.auth .brandside .foot .dot{width:6px;height:6px;border-radius:50%;background:#10b981}
.auth .box{max-width:400px}
.auth .box .cap{
font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--primary);
margin:0 0 9px;font-family:var(--mono);
}
.auth .box h1{font-size:24px}
.auth .box .sub{margin:0 0 24px}
.auth .box .f{height:44px;margin-bottom:13px;font-size:13.5px}
.auth .box .btn{height:46px}
.auth .box .chk{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer;margin:0}
.auth .box .chk input{width:15px;height:15px;accent-color:var(--primary)}
.auth .box .row a{font-size:12.5px;font-weight:700;color:var(--primary)}
.auth .divider{
display:flex;align-items:center;gap:12px;margin:18px 0;
color:var(--tx4);font-size:11.5px;font-weight:700;
}
.auth .divider::before,.auth .divider::after{content:"";flex:1;height:1px;background:var(--bd)}
.auth .helper{
display:flex;align-items:center;justify-content:center;gap:10px;
margin-top:22px;font-size:12px;color:var(--tx3);
}
.auth .helper a{color:var(--tx2);font-weight:700}
.auth .helper .sep{color:var(--bd-field)}
/* 아이콘 없이 문장만 넣는 안내 — .notice 의 flex 를 끈다 */
.notice.tx{display:block;line-height:1.7;padding:12px 15px}
.notice.info{background:var(--primary-l);border-color:var(--primary-bd);color:var(--primary)}
.notice b{font-weight:800}
.auth .brandside .mid{margin:auto 0}
.auth .brandside h2{margin:0 0 14px}
/* --------------------------------------------------------------------------
28. 앱 셸 — 아이콘 레일 + 사이드바 + 상단바 (v2.2)
구조 : .app > .rail + .side + .app-body(.topbar + .subbar + .app-main > .page)
-------------------------------------------------------------------------- */
.app{display:flex;min-height:100vh;background:var(--bg)}
/* 좌측 아이콘 레일 */
.rail{
width:58px;flex-shrink:0;background:#0f172a;color:#94a3b8;
display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 14px;
position:sticky;top:0;height:100vh;z-index:40;
}
.rail .home{
width:38px;height:38px;border-radius:10px;background:#0d9488;color:#fff;
display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;
margin-bottom:10px;flex-shrink:0;
}
.rail a{
width:46px;padding:8px 0 6px;border-radius:9px;cursor:pointer;
display:flex;flex-direction:column;align-items:center;gap:3px;
color:#94a3b8;text-decoration:none;position:relative;transition:.12s;
}
.rail a .ic{font-size:17px;line-height:1}
.rail a .t{font-size:10.5px;font-weight:700;letter-spacing:-.02em}
.rail a:hover{background:rgba(255,255,255,.07);color:#e2e8f0;text-decoration:none}
.rail a.on{background:rgba(29,78,216,.28);color:#fff}
.rail a.on::before{content:"";position:absolute;left:-6px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#38bdf8}
.rail a .dot{position:absolute;top:6px;right:9px;width:6px;height:6px;border-radius:50%;background:#ef4444}
.rail .spacer{margin-top:auto}
/* 메뉴 사이드바 */
.side{
width:238px;flex-shrink:0;background:#fff;border-right:1px solid var(--bd);
position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;z-index:35;
}
.side .head{
height:52px;display:flex;align-items:center;padding:0 16px;gap:8px;
border-bottom:1px solid var(--bd);position:sticky;top:0;background:#fff;z-index:1;
}
.side .head .t{font-size:15px;font-weight:800;letter-spacing:-.02em}
.side .grp{padding:6px 0 2px}
.side .grp > .gt{
display:flex;align-items:center;width:100%;gap:6px;
padding:11px 16px 7px;background:none;border:0;cursor:pointer;font-family:inherit;
font-size:12px;font-weight:800;color:var(--tx3);letter-spacing:.02em;
}
.side .grp > .gt .ar{margin-left:auto;font-size:10px;color:var(--tx4);transition:.15s}
.side .grp.closed > .gt .ar{transform:rotate(-90deg)}
.side .grp.closed > .items{display:none}
.side .items{display:flex;flex-direction:column}
.side .items a{
display:flex;align-items:center;gap:8px;padding:9px 16px 9px 24px;
font-size:13px;font-weight:600;color:var(--tx2);text-decoration:none;position:relative;
}
.side .items a:hover{background:var(--hover);color:var(--tx);text-decoration:none}
.side .items a.on{color:var(--primary);font-weight:800;background:var(--primary-l)}
.side .items a.on::before{content:"";position:absolute;left:12px;width:4px;height:4px;border-radius:50%;background:var(--primary)}
.side .items a .cnt{
margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:99px;
background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger);
font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.side .items a .cnt.gray{background:var(--th);border-color:var(--bd);color:var(--tx3)}
.side .sfoot{padding:14px 16px 20px;border-top:1px solid var(--bd);margin-top:8px}
.side .sfoot .v{font-size:11.5px;color:var(--tx4);font-family:var(--mono)}
/* 사이드바 접기 */
.app.side-off .side{display:none}
/* 본문 컬럼 */
.app-body{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
/* 상단바 */
.topbar{
height:52px;flex-shrink:0;background:#fff;border-bottom:1px solid var(--bd);
display:flex;align-items:center;gap:10px;padding:0 16px;
position:sticky;top:0;z-index:30;
}
.topbar .burger{
width:32px;height:32px;border:1px solid var(--bd);border-radius:var(--r-xs);background:#fff;
cursor:pointer;font-size:14px;color:var(--tx2);display:flex;align-items:center;justify-content:center;
}
.topbar .burger:hover{background:var(--th)}
.topbar .co{display:flex;align-items:center;gap:8px;min-width:0}
.topbar .co .nm{font-size:14px;font-weight:800;white-space:nowrap}
.topbar .co .biz{font-size:12px;color:var(--tx3);font-family:var(--mono);white-space:nowrap}
.topbar .co select{
height:32px;border:1px solid var(--bd-field);border-radius:var(--r-xs);background:#fff;
padding:0 26px 0 10px;font-size:12.5px;font-weight:700;color:var(--tx);max-width:230px;
}
.topbar .spacer{margin-left:auto}
.topbar .tb-btn{
height:32px;padding:0 10px;border:1px solid var(--bd);border-radius:var(--r-xs);background:#fff;
display:inline-flex;align-items:center;gap:6px;cursor:pointer;
font-size:12.5px;font-weight:700;color:var(--tx2);position:relative;white-space:nowrap;
}
.topbar .tb-btn:hover{background:var(--th)}
.topbar .tb-btn .bdg{
position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 5px;border-radius:99px;
background:#ef4444;color:#fff;font-size:10px;font-weight:800;
display:flex;align-items:center;justify-content:center;
}
.topbar .me{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--bd);margin-left:2px}
.topbar .me .av{
width:30px;height:30px;border-radius:50%;background:var(--primary-l);color:var(--primary);
border:1px solid var(--primary-bd);display:flex;align-items:center;justify-content:center;
font-size:12.5px;font-weight:800;flex-shrink:0;
}
.topbar .me .nm{font-size:12.5px;font-weight:800;line-height:1.25;white-space:nowrap}
.topbar .me .ro{font-size:11px;color:var(--tx3);white-space:nowrap}
/* 파란 경로 바 */
.subbar{
height:42px;flex-shrink:0;background:var(--primary);color:#fff;
display:flex;align-items:center;gap:8px;padding:0 18px;font-size:13px;font-weight:600;
}
.subbar .path{display:flex;align-items:center;gap:7px;color:#c7dbff}
.subbar .path b{color:#fff;font-weight:800}
.subbar .path .sep{color:#8ab4ff}
.subbar .spacer{margin-left:auto}
.subbar .kv{display:flex;align-items:center;gap:6px;color:#c7dbff;font-size:12.5px}
.subbar .kv b{color:#fff;font-family:var(--mono);font-weight:800}
.subbar .sb-btn{
height:28px;padding:0 12px;border-radius:99px;border:0;cursor:pointer;
background:#fbbf24;color:#3f2d00;font-size:12.5px;font-weight:800;font-family:inherit;
}
.subbar .sb-btn.ghost{background:rgba(255,255,255,.16);color:#fff}
/* 본문 — 페이지는 1600px 고정, 좌측 정렬 */
.app-main{flex:1 1 auto;padding:18px 20px 28px;overflow-x:auto}
.app-main > .page{margin:0}
.app .page{padding:0}
/* --------------------------------------------------------------------------
29. 운영 준비도 점검 (.check-list) + 지표 타일 (.mini-kpi) (v2.3)
-------------------------------------------------------------------------- */
.check-list{display:flex;flex-direction:column}
.check-list .row{
display:flex;align-items:flex-start;gap:14px;padding:15px 18px;
border-bottom:1px solid var(--bd-in);
}
.check-list .row:last-child{border-bottom:0}
.check-list .row:hover{background:var(--hover)}
.check-list .no{
width:24px;height:24px;border-radius:7px;flex-shrink:0;margin-top:1px;
background:var(--th);border:1px solid var(--bd);color:var(--tx2);
font-family:var(--mono);font-size:11.5px;font-weight:800;
display:flex;align-items:center;justify-content:center;
}
.check-list .row.ok .no{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
.check-list .row.warn .no{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.check-list .row.need .no{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger)}
.check-list .body{flex:1 1 auto;min-width:0}
.check-list .t{font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:7px}
.check-list .d{font-size:12.5px;color:var(--tx2);margin-top:3px;line-height:1.6}
.check-list .why{font-size:12px;color:var(--tx3);margin-top:5px}
.check-list .kpis{display:flex;gap:8px;flex-shrink:0;align-items:center}
.check-list .act{flex-shrink:0;display:flex;align-items:center;margin-left:4px}
.mini-kpi{
min-width:88px;padding:7px 11px;border-radius:var(--r-sm);
background:var(--card-alt);border:1px solid var(--bd-in);text-align:right;
}
.mini-kpi .k{font-size:11px;font-weight:700;color:var(--tx3);white-space:nowrap}
.mini-kpi .v{
margin-top:2px;font-size:16px;font-weight:800;color:var(--tx);
font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.mini-kpi.bad .v{color:var(--danger)}
.mini-kpi.warn .v{color:var(--warn)}
.mini-kpi.ok .v{color:var(--ok)}
/* 2열 입력 폼을 카드 안에 넣을 때 */
.card > .form-grid{border-top:1px solid var(--bd-in)}
.form-actions{
display:flex;align-items:center;gap:8px;padding:13px 20px;
border-top:1px solid var(--bd-in);background:var(--card-alt);
}
.form-actions .spacer{margin-left:auto}
.form-actions .muted{font-size:12px}
.chk-row{display:flex;flex-wrap:wrap;gap:9px 18px;width:100%}
.chk-row .chk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer;white-space:nowrap}
.chk-row .chk input{width:15px;height:15px;accent-color:var(--primary)}
/* --------------------------------------------------------------------------
30. 스텝 줄이기 (v2.4)
.cmdk 통합 검색 (⌘K) · .bulkbar 선택 일괄 작업 · .dz-result 업로드 즉시 검증
-------------------------------------------------------------------------- */
/* ---- 통합 검색 (어디서든 ⌘K / Ctrl+K) ---- */
.cmdk-dim{
position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.42);
display:flex;align-items:flex-start;justify-content:center;padding:96px 20px;
backdrop-filter:blur(2px);
}
.cmdk{
width:100%;max-width:660px;background:#fff;border-radius:14px;overflow:hidden;
box-shadow:0 24px 64px rgba(15,23,42,.28);display:flex;flex-direction:column;max-height:70vh;
}
.cmdk .in{display:flex;align-items:center;gap:11px;padding:0 18px;border-bottom:1px solid var(--bd)}
.cmdk .in .ic{font-size:16px;color:var(--tx3)}
.cmdk .in input{
flex:1 1 auto;height:56px;border:0;outline:none;background:none;
font-size:16px;font-weight:600;color:var(--tx);font-family:inherit;
}
.cmdk .in input::placeholder{color:var(--tx4);font-weight:500}
.cmdk .in kbd{
font-family:var(--mono);font-size:11px;font-weight:700;color:var(--tx3);
border:1px solid var(--bd);border-bottom-width:2px;border-radius:5px;padding:2px 6px;background:var(--th);
}
.cmdk .body{overflow-y:auto;flex:1 1 auto;padding:6px 0 10px}
.cmdk .sec{padding:11px 18px 5px;font-size:11px;font-weight:800;color:var(--tx3);letter-spacing:.06em}
.cmdk .it{
display:flex;align-items:center;gap:11px;padding:9px 18px;cursor:pointer;
text-decoration:none;color:var(--tx);
}
.cmdk .it:hover,.cmdk .it.on{background:var(--primary-l);text-decoration:none}
.cmdk .it .ic{
width:28px;height:28px;border-radius:8px;flex-shrink:0;font-size:13px;
background:var(--th);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;
}
.cmdk .it .t{font-size:13.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk .it .s{font-size:11.5px;color:var(--tx3);margin-left:auto;flex-shrink:0;font-family:var(--mono)}
.cmdk .it .tag{font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:var(--r-xs);background:var(--th);color:var(--tx3);border:1px solid var(--bd);flex-shrink:0}
.cmdk .none{padding:34px 18px;text-align:center;color:var(--tx3);font-size:13px;font-weight:600}
.cmdk .foot{
display:flex;align-items:center;gap:14px;padding:10px 18px;
border-top:1px solid var(--bd);background:var(--card-alt);font-size:11.5px;color:var(--tx3);
}
.cmdk .foot b{font-family:var(--mono);font-weight:700;color:var(--tx2)}
/* ---- 선택 일괄 작업 바 (행을 체크하면 아래에서 올라온다) ---- */
.bulkbar{
position:sticky;bottom:0;z-index:20;
display:flex;align-items:center;gap:10px;padding:11px 16px;
background:var(--tx);color:#fff;border-radius:var(--r-sm);
box-shadow:0 10px 30px rgba(15,23,42,.26);margin-top:-6px;
}
.bulkbar .n{font-size:13px;font-weight:800}
.bulkbar .n b{font-family:var(--mono);color:#7dd3fc}
.bulkbar .div{width:1px;height:18px;background:rgba(255,255,255,.22)}
.bulkbar .spacer{margin-left:auto}
.bulkbar .btn{
height:30px;padding:0 12px;background:rgba(255,255,255,.13);border-color:transparent;color:#fff;
font-size:12.5px;
}
.bulkbar .btn:hover{background:rgba(255,255,255,.22)}
.bulkbar .btn.go{background:var(--primary);border-color:transparent}
.bulkbar .btn.go:hover{background:#2563eb}
.bulkbar .btn.bad{background:#dc2626;border-color:transparent}
.bulkbar .x{background:none;border:0;color:#94a3b8;cursor:pointer;font-size:15px;padding:0 2px}
.bulkbar .x:hover{color:#fff}
/* ---- 업로드 즉시 검증 결과 ---- */
.dz-result{border-top:1px solid var(--bd-in)}
.dz-result .f{
display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:1px solid var(--bd-in);
width:auto;height:auto;border-left:0;border-right:0;border-top:0;border-radius:0;background:none;
}
.dz-result .f:last-child{border-bottom:0}
.dz-result .f .meta{min-width:0;flex:1 1 auto}
.dz-result .f .n{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-result .f .s{font-size:11.5px;color:var(--tx3);margin-top:2px;font-family:var(--mono)}
.dz-result .f .badge{flex-shrink:0}
.dz-result .f .x{background:none;border:0;color:var(--tx4);cursor:pointer;font-size:14px;flex-shrink:0}
.dz-result .f .x:hover{color:var(--danger)}
/* ==========================================================================
31. v2.5 — 레거시 모달 브리지 · 반응형(1366/390) · 인쇄(A4) · 클릭영역
========================================================================== */
/* --------------------------------------------------------------------------
31-1. 레거시 팝업 마크업 브리지
현재 ERP 의 JS 가 만드는 .ui-modal-backdrop / .ui-modal / .modal-backdrop 과
부모 딤이 없는 .modal.modal-lg 를 정본 레이어로 렌더링한다.
★ JS 를 고치지 않고 이 CSS 만으로 팝업이 화면 중앙 레이어로 뜬다.
-------------------------------------------------------------------------- */
.ui-modal-backdrop,
.modal-backdrop{
position:fixed;inset:0;z-index:100;
background:rgba(15,23,42,.45);
display:none;align-items:flex-start;justify-content:center;
padding:56px 20px;overflow-y:auto;overscroll-behavior:contain;
}
.ui-modal-backdrop.open,
.ui-modal-backdrop.is-open,
.ui-modal-backdrop[open],
.ui-modal-backdrop.show,
.modal-backdrop.open,
.modal-backdrop.show{display:flex}
.ui-modal,
.modal-backdrop > .modal,
.ui-modal-backdrop > .modal{
width:100%;max-width:760px;margin:auto;
background:var(--card);border-radius:var(--r);
box-shadow:0 24px 64px rgba(15,23,42,.3);
display:flex;flex-direction:column;max-height:calc(100vh - 112px);
}
.ui-modal.ui-modal-sm,.ui-modal[data-size=sm]{max-width:560px}
.ui-modal.ui-modal-lg,.ui-modal[data-size=lg]{max-width:1000px}
.ui-modal.ui-modal-xl,.ui-modal[data-size=xl]{max-width:1240px}
/* 딤 없이 body 직계로 나오는 .modal.modal-* 도 레이어로 띄운다 */
body > .modal.modal-sm,body > .modal.modal-md,body > .modal.modal-lg,body > .modal.modal-xl{
position:fixed;left:50%;top:56px;transform:translateX(-50%);z-index:101;
max-height:calc(100vh - 112px);
}
/* 레거시 내부 파트 → 정본 파트와 같은 모양 */
.ui-modal-header,.ui-modal .modal-header,.modal-backdrop .modal-header{
display:flex;align-items:center;gap:12px;flex-shrink:0;
padding:16px 20px;border-bottom:1px solid var(--bd);
}
.ui-modal-header .title,.ui-modal-header h2,.ui-modal-header h3,
.modal-header .title,.modal-header h2,.modal-header h3{
margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--tx);
}
.ui-modal-header .sub,.modal-header .sub{font-size:12px;color:var(--tx3);margin-top:2px}
.ui-modal-body,.ui-modal .modal-body,.modal-backdrop .modal-body{
flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0;min-height:0;
}
.ui-modal-footer,.ui-modal .modal-footer,.modal-backdrop .modal-footer{
display:flex;align-items:center;gap:8px;flex-shrink:0;
padding:14px 20px;border-top:1px solid var(--bd);background:var(--card-alt);
}
.ui-modal-footer .spacer,.modal-footer .spacer{margin-left:auto}
.ui-modal-close,.ui-modal [data-close],.modal-header .close{
width:30px;height:30px;border-radius:var(--r-xs);border:1px solid var(--bd);
background:#fff;color:var(--tx2);cursor:pointer;font-size:14px;line-height:1;
display:flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0;
}
.ui-modal-close:hover,.modal-header .close:hover{background:var(--th);color:var(--tx)}
body.ui-modal-open,body.modal-open{overflow:hidden}
/* --------------------------------------------------------------------------
31-2. 클릭 영역 — 표 안 버튼이 인접 셀에 가리는 문제 (P05)
-------------------------------------------------------------------------- */
.tbl td,.tbl th{position:relative}
.tbl td .btn,.tbl td button,.tbl td a.btn,
.tbl.grid td .btn,.tbl.grid td button{position:relative;z-index:2}
/* 고정 열(sticky) 이 버튼 위를 덮지 않게 */
.tbl .sticky-col{position:sticky;left:0;z-index:1;background:inherit}
.tbl tr:hover .sticky-col{background:var(--hover)}
/* 셀 전체를 누르게 만드는 링크는 버튼보다 아래에 깔린다 */
.tbl td .cell-link{position:absolute;inset:0;z-index:1}
/* --------------------------------------------------------------------------
31-3. 반응형 — 1366px 노트북
-------------------------------------------------------------------------- */
.app-main,.app-body{min-width:0}
@media (max-width:1500px){
.app .side{width:206px}
.app-main{padding:16px 14px 24px}
.page{padding:18px 0 48px}
.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
.field-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.qbar{gap:6px}
.qbar .f.kw,.qbar .f.kw-lg{width:200px}
}
@media (max-width:1180px){
.app .rail{width:52px}
.app .side{display:none}
.grid2,.grid2.rev,.grid3{grid-template-columns:minmax(0,1fr)}
.summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.summary > div{border-bottom:1px solid var(--bd-in)}
.steps,.steps.c3,.steps.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps .step{border-bottom:1px solid var(--bd-in)}
.info-grid,.info-grid.lb130{grid-template-columns:130px minmax(0,1fr)}
.info-grid .span3{grid-column:span 1}
.field-grid,.field-grid.c4,.field-grid.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* --------------------------------------------------------------------------
31-4. 반응형 — 390px 모바일
★ 입력 폭이 28px 로 붕괴하던 문제(M13)를 여기서 막는다.
-------------------------------------------------------------------------- */
@media (max-width:700px){
.app{flex-direction:column}
.app .rail{
width:100%;height:auto;flex-direction:row;position:sticky;top:0;
padding:6px 8px;gap:2px;overflow-x:auto;
}
.app .rail .home{margin-bottom:0;margin-right:6px}
.app .rail a{width:auto;min-width:54px;padding:6px 8px 5px}
.app .rail a.on::before{left:8px;right:8px;top:auto;bottom:-2px;width:auto;height:3px;border-radius:3px 3px 0 0}
.topbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
.topbar .co select{max-width:100%;flex:1 1 160px}
.topbar .co .biz,.topbar .me .ro{display:none}
.subbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:6px}
.app-main{padding:12px 10px 24px}
.page{padding:0 0 40px}
.page-head{flex-direction:column;align-items:stretch;gap:12px}
.head-actions{flex-wrap:wrap}
.head-actions .btn{flex:1 1 auto}
/* 폼 — 라벨 위 / 값 아래 1열. 입력은 항상 100% */
.form-grid,.form-grid.one,.modal .form-grid,.modal .form-grid.one{grid-template-columns:minmax(0,1fr)}
.form-grid .fl,.form-grid .fv{border-right:0}
.form-grid .fl{min-height:0;padding:12px 14px 0;border-bottom:0;background:none}
.form-grid .fv{padding:6px 14px 12px;flex-wrap:wrap}
.form-grid .span3,.form-grid .span4{grid-column:span 1}
.fv > .f,.fv > input.f,.fv > select.f{flex:1 1 100%;width:100%;min-width:0}
.fv > .btn{flex:0 0 auto}
.field-grid,.field-grid.c4,.field-grid.c5{grid-template-columns:minmax(0,1fr)}
.info-grid,.info-grid.one,.info-grid.lb130,.info-grid.lb130.one{grid-template-columns:minmax(0,1fr)}
.info-grid .k{border-right:0;border-bottom:0;padding-bottom:2px;background:none}
.info-grid .v{padding-top:2px}
.info-grid .span3{grid-column:span 1}
.info-grid .v.line{white-space:normal;flex-wrap:wrap}
.summary,.stat-grid{grid-template-columns:minmax(0,1fr)}
.steps,.steps.c3,.steps.c5{grid-template-columns:minmax(0,1fr)}
.qbar{flex-direction:column;align-items:stretch}
.qbar .lb{margin-right:0}
.qbar .f,.qbar .f.sel,.qbar .f.date,.qbar .f.kw,.qbar .f.kw-lg{width:100%}
.qbar .div{display:none}
.qbar .btn{width:100%}
.tools{flex-wrap:wrap}
.tools .btn,.tools .chip{flex:1 1 auto}
.list-wrap{min-height:0}
.card > .list-wrap{min-height:0}
.modal-dim{padding:8px}
.modal,.ui-modal{max-width:100%;max-height:calc(100dvh - 16px)}
.ui-modal-backdrop,.modal-backdrop{padding:8px}
.bulkbar{flex-wrap:wrap}
.paysheet{grid-template-columns:minmax(0,1fr)}
.net-bar,.net-bar.c2,.net-bar.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
.check-list .row{flex-wrap:wrap}
.check-list .kpis{width:100%;flex-wrap:wrap}
/* 표 → 카드 : data-l 라벨이 갖춰진 표에만 .resp 를 붙여 옵트인한다.
.resp 가 없는 표는 헤더를 그대로 두고 표 안에서 가로 스크롤한다. (R03) */
.tbl.resp thead{display:none}
.tbl.resp,.tbl.resp tbody,.tbl.resp tr,.tbl.resp td{display:block;width:auto}
.tbl.resp colgroup{display:none}
.tbl.resp tr{border:1px solid var(--bd);border-radius:var(--r-sm);margin:0 0 8px;padding:4px 0;background:#fff}
.tbl.resp td{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
height:auto;min-height:0;padding:7px 12px;border:0;text-align:right;white-space:normal;
overflow-wrap:anywhere;
}
.tbl.resp td::before{
content:attr(data-l);flex:0 0 auto;text-align:left;
font-size:12px;font-weight:700;color:var(--tx2);white-space:nowrap;
}
.tbl.resp td:empty,.tbl.resp tr.sp{display:none}
.tbl.resp tr.sp td.none{display:block;text-align:center;padding:28px 12px}
.tbl.resp tr.sp:has(td.none){display:block;border:0;background:none}
.tbl.resp td.act{justify-content:flex-end;border-top:1px solid var(--bd-in);margin-top:2px;padding-top:9px;flex-wrap:wrap}
.tbl.resp td.act::before{display:none}
.tbl.resp td .btn-group{flex-wrap:wrap;justify-content:flex-end}
.tbl.resp td .f{width:100%;min-width:0;flex:1 1 auto}
.tbl.resp tfoot{display:block}
.tbl.resp tfoot tr{background:var(--th)}
.list-wrap:has(.tbl.resp){overflow:visible}
.list-wrap:has(.tbl.resp) .scroll{overflow:visible;height:auto}
.tbl-wrap:has(.tbl.resp){overflow:visible}
/* .resp 가 아닌 표 — 헤더 유지 + 표 안에서만 가로 스크롤 */
.tbl-wrap,.list-wrap .scroll{overflow:auto;-webkit-overflow-scrolling:touch}
.tbl:not(.resp){min-width:640px}
.tbl:not(.resp) td .f{min-width:88px}
table.matrix{min-width:720px}
.act-group{flex-wrap:wrap}
.act-group .lb{flex-basis:100%;min-width:0}
.act-group .muted{flex-basis:100%}
.paysheet .it{flex-wrap:wrap}
}
/* --------------------------------------------------------------------------
31-5. 인쇄 — A4 (급여명세서 · 사업소득 지급명세서 · 거래명세서)
-------------------------------------------------------------------------- */
.print-only{display:none}
@media print{
@page{size:A4 portrait;margin:12mm 12mm 14mm}
html,body{background:#fff!important}
.rail,.side,.topbar,.subbar,.page-head .head-actions,.page-foot,
.qbar,.tools,.bulkbar,.tabs-doc,.tabs-pill,.no-print,.modal-dim,.cmdk-dim{display:none!important}
.app,.app-body{display:block}
.app-main{padding:0}
.page{max-width:none;width:auto;padding:0}
.print-only{display:block}
/* 긴 내용을 담은 카드까지 통째로 avoid 하면 빈 페이지가 생긴다.
카드는 페이지를 넘길 수 있게 두고, 제목만 다음 내용과 붙여 둔다. */
.card{break-inside:auto;box-shadow:none;border-color:#000;margin-bottom:5mm}
.card-head{break-after:avoid}
.card > .info-grid,.card > .form-grid{break-inside:auto}
.card-head{background:#fff;min-height:0;padding-top:8px;padding-bottom:8px}
.card-head .ico{display:none}
.page-head{margin-bottom:6mm}
.info-grid .k,.info-grid .v{min-height:0;padding-top:6px;padding-bottom:6px}
.paysheet .it,.paysheet .sum,.paysheet .ph{min-height:0;padding-top:6px;padding-bottom:6px}
.net-bar{margin-top:6px}
.tbl{font-size:10.5pt}
.tbl thead{display:table-header-group} /* 페이지마다 헤더 반복 */
.tbl.grid thead th{position:static} /* sticky 는 헤더 반복을 막는다 */
/* 합계는 마지막 페이지에 한 번만 나와야 한다.
table-footer-group 은 페이지마다 반복돼 중간 페이지에 전체 합계가 찍힌다. */
.tbl tfoot{display:table-row-group}
.tbl tr{break-inside:avoid}
.tbl.grid th,.tbl.grid td{height:auto;padding:4px 6px}
/* 인쇄에서는 내부 스크롤 영역을 펼쳐 모든 행이 페이지에 나오게 한다 */
.list-wrap,.tbl-wrap,.scroll{
overflow:visible!important;height:auto!important;max-height:none!important;
min-height:0!important;flex:none!important;box-shadow:none;
}
.list-wrap .scroll > .tbl{height:auto!important}
.tbl tr.sp{display:none}
/* 지급/공제 시트 : 인쇄에서는 한 열로 펼치고, 긴 항목명이 줄바꿈해도 겹치지 않게 한다 */
.paysheet{display:block}
.paysheet > .col{border-right:0;border-bottom:1px solid #000}
.paysheet .it{
height:auto!important;min-height:0;align-items:flex-start;
padding-top:5px;padding-bottom:5px;break-inside:avoid;
}
.paysheet .it .n{white-space:normal!important;overflow:visible!important;
text-overflow:clip!important;line-height:1.5}
.paysheet .sum{height:auto!important;padding-top:6px;padding-bottom:6px;break-before:avoid}
.paysheet .ph{height:auto!important;padding-top:5px;padding-bottom:5px;break-after:avoid}
.net-bar{break-inside:avoid}
a[href]::after{content:""}
.badge{border:1px solid #666;color:#000;background:#fff}
.print-page-break{break-before:page}
/* 인쇄에서는 말줄임을 쓰지 않는다 — 긴 항목명이 잘리면 안 된다 */
.ell,.tbl td,.tbl th,.paysheet .n,.info-grid .v,.card .t{
overflow:visible!important;text-overflow:clip!important;white-space:normal!important;
word-break:break-word;
}
/* 화면용 고정 열 폭(colgroup)은 인쇄에서 내용에 맞춰 다시 잡는다 */
.tbl{table-layout:auto!important}
.tbl col{width:auto!important}
.tbl td.num,.tbl th.num{white-space:nowrap!important;width:1%}
.tbl td.center,.tbl th.center{white-space:nowrap!important;width:1%}
/* 표 하단 요약이 마지막 행과 겹치지 않게 : 흐름 안에 두고 여백을 준다 */
.tbl-foot{
position:static!important;height:auto!important;min-height:0;
margin-top:4mm;padding:6px 0;break-inside:avoid;break-before:avoid;
border-top:1px solid #000;background:#fff!important;
}
.list-wrap{display:block!important}
/* 업무 조작 버튼은 출력하지 않는다 */
.form-actions,.head-actions,.card-head .right .btn,.btn-group,
button,a.btn,label.btn,.modal-x,.bulkbar,.cmdk{display:none!important}
.tbl th.act,.tbl td.act{display:none!important}
}
/* 인쇄 미리보기 화면 — A4 비율 문서 */
.a4{
width:210mm;min-height:297mm;margin:0 auto 14px;padding:14mm 14mm 16mm;
background:#fff;border:1px solid var(--bd);box-shadow:var(--sh);
}
@media print{ .a4{width:auto;min-height:0;margin:0;padding:0;border:0;box-shadow:none} }
/* --------------------------------------------------------------------------
32. v2.5 신규 컴포넌트
-------------------------------------------------------------------------- */
/* 버전 이력 (계약서 양식) */
.ver-list{display:flex;flex-direction:column}
.ver-list .v{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--bd-in)}
.ver-list .v:last-child{border-bottom:0}
.ver-list .v.cur{background:var(--primary-l)}
.ver-list .no{
flex-shrink:0;min-width:44px;height:26px;padding:0 9px;border-radius:99px;
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:11.5px;font-weight:800;
background:var(--th);border:1px solid var(--bd);color:var(--tx2);
}
.ver-list .v.cur .no{background:var(--primary);border-color:var(--primary);color:#fff}
.ver-list .meta{min-width:0;flex:1 1 auto}
.ver-list .meta .n{font-size:13px;font-weight:700;overflow-wrap:anywhere}
.ver-list .meta .s{margin-top:3px;font-size:11.5px;color:var(--tx3);font-family:var(--mono)}
.ver-list .meta .why{margin-top:4px;font-size:12px;color:var(--tx2)}
.ver-list .act{flex-shrink:0;display:flex;gap:6px}
/* 품목 입력 행 (거래명세서 · 세금계산서) */
.item-rows{border-top:1px solid var(--bd-in)}
.item-rows .hd,.item-rows .rw{
display:grid;grid-template-columns:44px minmax(0,1fr) 110px 90px 130px 140px 150px 52px;
align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--bd-in);
}
.item-rows .hd{background:var(--th);font-size:12px;font-weight:700;color:var(--tx2)}
.item-rows .rw .f{height:32px}
.item-rows .no{font-family:var(--mono);font-size:12px;color:var(--tx3);text-align:center}
.item-rows .del{
width:30px;height:30px;border-radius:var(--r-xs);border:1px solid var(--bd);background:#fff;
color:var(--tx3);cursor:pointer;font-size:13px;justify-self:center;
}
.item-rows .del:hover{border-color:var(--danger-bd);background:var(--danger-bg);color:var(--danger)}
.item-rows .add{padding:12px 16px}
@media (max-width:700px){
.item-rows .hd{display:none}
.item-rows .rw{grid-template-columns:minmax(0,1fr);gap:7px;padding:12px 14px;position:relative}
.item-rows .rw .f{width:100%}
.item-rows .rw .no{
text-align:left;font-weight:800;color:var(--tx2);font-size:12px;
padding-bottom:2px;border-bottom:1px solid var(--bd-in);margin-bottom:2px;
}
.item-rows .rw .no::before{content:"품목 "}
.item-rows .del{position:absolute;top:9px;right:12px;justify-self:auto}
}
/* 권한 변경 차이 (before → after) */
.diff{display:flex;flex-direction:column}
.diff .r{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center;gap:10px;
padding:10px 16px;border-bottom:1px solid var(--bd-in);font-size:12.5px}
.diff .r:last-child{border-bottom:0}
.diff .r .arw{text-align:center;color:var(--tx4)}
.diff .r .n{font-weight:700;color:var(--tx);grid-column:1/-1;margin-bottom:-2px}
.diff .was{color:var(--tx3);text-decoration:line-through}
.diff .now{color:var(--ok);font-weight:700}
.diff .r.add .now{color:var(--ok)}
.diff .r.rem .now{color:var(--danger)}
.diff .none{padding:28px 16px;text-align:center;color:var(--tx3);font-weight:600;font-size:13px}
/* API 로그 — 긴 오류 메시지 */
.log-msg{
display:block;max-width:100%;overflow-wrap:anywhere;white-space:normal;
font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--tx2);
}
.log-msg.clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.log-more{
background:none;border:0;padding:0;margin-left:4px;cursor:pointer;
color:var(--primary);font-size:11.5px;font-weight:700;font-family:inherit;
}
.code-chip{
display:inline-block;padding:2px 7px;border-radius:var(--r-xs);
background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger);
font-family:var(--mono);font-size:11px;font-weight:700;white-space:nowrap;
}
.code-chip.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
/* 인증 계열 화면 (가입 · 비밀번호 찾기 · 403) 안내 블록 */
.auth .box .msg{
display:flex;flex-direction:column;gap:9px;padding:16px;border-radius:var(--r-sm);
background:var(--card-alt);border:1px solid var(--bd);margin-bottom:18px;
}
.auth .box .msg .t{font-size:13.5px;font-weight:800;color:var(--tx)}
.auth .box .msg .d{font-size:12.5px;color:var(--tx2);line-height:1.7}
.auth .box .msg ul{margin:0;padding-left:17px;font-size:12.5px;color:var(--tx2);line-height:1.85}
.auth .box .grid2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
@media (max-width:700px){ .auth .box .grid2col{grid-template-columns:minmax(0,1fr)} .auth .brandside{display:none} }
.auth .box .hint{font-size:11.5px;color:var(--tx3);margin:-8px 0 13px;line-height:1.6}
.auth .box .err{
font-size:12px;color:var(--danger);margin:-8px 0 13px;font-weight:600;
display:flex;align-items:flex-start;gap:5px;
}
.auth .formside{overflow-y:auto;padding:40px 20px}
.auth .box .wide{max-width:520px}
/* 상세 화면의 위험도 구분 액션 묶음 */
.act-group{display:flex;align-items:center;gap:8px;padding:13px 20px;border-top:1px solid var(--bd-in)}
.act-group .lb{font-size:12px;font-weight:700;color:var(--tx2);min-width:76px}
.act-group.danger{background:var(--danger-bg);border-top-color:var(--danger-bd)}
.act-group.danger .lb{color:var(--danger)}
.act-group .spacer{margin-left:auto}
/* --------------------------------------------------------------------------
33. 좁은 폭에서 flex 자식이 눌려 글자가 세로로 쪼개지는 것 방지 (v2.5)
-------------------------------------------------------------------------- */
.tbl-foot,.card-head,.dz-result .f,.ver-list .v,.check-list .row,.file-line,.file-row{
flex-wrap:wrap;
}
.tbl-foot > *,.dz-result .f .meta,.ver-list .meta,.card-head .txt{min-width:0}
.tbl-foot .sum,.tbl-foot .muted{white-space:normal;overflow-wrap:anywhere}
@media (max-width:700px){
/* 인라인 min-width 를 가진 넓은 표는 모바일에서 해제 */
.tbl.grid[style]{min-width:0!important;width:100%!important}
.card-head{align-items:flex-start;gap:8px}
.card-head .right{margin-left:0;flex-basis:100%;flex-wrap:wrap}
.tbl-foot{flex-direction:column;align-items:flex-start;gap:6px}
.dz-result .f{align-items:flex-start}
.dz-result .f .badge{margin-left:38px}
.summary .v{font-size:18px}
.steps .step{align-items:flex-start}
.flow{flex-direction:column;align-items:stretch}
.flow .arr{transform:rotate(90deg);text-align:center}
.pickbar{flex-direction:column;align-items:stretch}
.pickbar .fld{min-width:0}
.split-panel{grid-template-columns:minmax(0,1fr)}
.split-panel > .left{border-right:0;border-bottom:1px solid var(--bd)}
.pick-list{max-height:260px}
.a4{width:auto;min-height:0;padding:16px}
/* 세금계산서 발행 화면(고정 서식)은 가로 스크롤로 원형 유지 */
.tax-doc{overflow-x:auto}
.tax-doc > *{min-width:900px}
}
@media (max-width:700px){
.row{flex-wrap:wrap}
.row > *{min-width:0}
.row > .spacer{margin-left:0;flex-basis:100%}
/* 세금계산서 발행 서식은 고정 격자다. 무너뜨리지 말고 가로로 스크롤한다 */
.parties,.sum3,.pay,.items,.tax-top{min-width:900px}
.card:has(> .parties),.card:has(> .sum3),.card:has(> .pay),
.card:has(> .items),.card:has(> .tax-top){overflow-x:auto}
}
/* 인라인 flex 를 쓰는 옛 블록 (부가세·법인세 결과 요약) */
.result-box{flex-wrap:wrap;row-gap:14px}
.result-box > *{min-width:0}
@media (max-width:700px){
.result-box{gap:16px!important}
.result-box > .spacer{margin-left:0;flex-basis:100%}
/* 세로 라벨 밴드는 서식상 의도된 것 — 가로 스크롤 안에서 유지 */
.band{writing-mode:vertical-rl}
}
/* ==========================================================================
34. v2.6 — 실제 ERP DOM 대응 (R02 · R04 · P11 모바일)
========================================================================== */
/* --------------------------------------------------------------------------
34-1. R02 급여 표의 [data-item-components] 버튼이 셀에 가리는 문제
현재 ERP 구조 : | … |
셀 자체가 포인터를 가로채므로, 셀 안의 상호작용 요소를 위로 올린다.
★ 기존 선택자와 DOM 구조를 바꾸지 않는다.
-------------------------------------------------------------------------- */
td.item-employee-name,
td:has(> [data-item-components]),
td:has([data-item-components]){ position:relative; overflow:visible }
[data-item-components]{
position:relative;z-index:3;pointer-events:auto;
min-height:26px;padding:0 10px; /* 클릭 영역 확보 */
}
/* 셀 전체를 덮는 링크·오버레이가 있으면 버튼 아래로 내린다 */
td.item-employee-name > a:not(.btn),
td.item-employee-name > .cell-link,
td.item-employee-name::after{ z-index:1 }
/* 고정 열이 버튼 위를 덮지 않게 */
.tbl .sticky-col,.tbl td.sticky{ z-index:1 }
.tbl td .btn,.tbl td button,.tbl.grid td .btn,.tbl.grid td button{ z-index:2 }
/* --------------------------------------------------------------------------
34-2. R04 입력 + 보조 버튼 줄 — 좁은 폭에서 버튼을 없애지 않고 줄바꿈한다
-------------------------------------------------------------------------- */
.in-actions{display:flex;align-items:center;gap:6px;width:100%;flex-wrap:wrap;min-width:0}
.in-actions > .f{flex:1 1 180px;min-width:0;width:auto}
.in-actions > .btn{flex:0 0 auto}
.in-actions > .full{flex-basis:100%}
@media (max-width:820px){
.in-actions > .f{flex:1 1 100%}
.in-actions > .btn{flex:1 1 auto}
}
/* 기존 ERP 마크업(래퍼 없이 input+button 이 fv 안에 나열된 경우)도 같은 결과 */
@media (max-width:820px){
.fv{flex-wrap:wrap;row-gap:6px}
.fv > input.f,.fv > select.f{flex:1 1 100%;min-width:0}
.fv > .btn{flex:0 1 auto}
}
/* --------------------------------------------------------------------------
34-3. P11 보험 요율 — 모바일에서 액션 바가 버튼을 덮는 문제
-------------------------------------------------------------------------- */
#insuranceRateSection,.insurance-card-actions{position:relative}
.insurance-card-actions{z-index:1;flex-wrap:wrap;gap:8px}
#insuranceRateSection [data-rate-id],
.insurance-card-actions .btn{position:relative;z-index:3}
@media (max-width:820px){
.insurance-card-actions{position:static;width:100%}
.insurance-card-actions .btn{flex:1 1 auto}
#insuranceRateSection .card-head{flex-wrap:wrap}
#insuranceRateSection .card-head .right{flex-basis:100%;margin-left:0}
}
/* 데모 전용 표시 */
.demo-note{
display:block;margin-bottom:14px;
padding:10px 14px;border-radius:var(--r-sm);
background:#fffbeb;border:1px dashed #fcd34d;color:#92400e;
font-size:12.5px;line-height:1.7;
}
.demo-note b{font-weight:800}
/* 아이콘 등 가로 배치가 필요할 때만 flex 를 켠다 (문장이 세로로 쪼개지지 않도록) */
.demo-note.fx{display:flex;align-items:flex-start;gap:8px}
/* --------------------------------------------------------------------------
34-4. 파일 input — 운영 계약(id/name/accept)을 그대로 쓰는 진짜
기존 ‘파일 선택 + 파일명’ 모양을 유지하면서 접근성(키보드·스크린리더)을 확보한다.
-------------------------------------------------------------------------- */
.f-file{
flex:1 1 240px;min-width:0;width:100%;
padding:7px 10px;font:inherit;font-size:13px;color:var(--tx1);
background:var(--bg-in);border:1px solid var(--bd-in);border-radius:var(--r-sm);
}
.f-file::file-selector-button{
margin:-2px 10px -2px -4px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:700;
color:var(--tx1);background:#fff;border:1px solid var(--bd);border-radius:var(--r-sm);cursor:pointer;
}
.f-file::file-selector-button:hover{background:var(--bg-sec)}
.f-file:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.file-line.in-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.dropzone .f-file{max-width:340px;margin:2px auto 0}
a.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
@media (max-width:700px){ .f-file{flex:1 1 100%} }
/* --------------------------------------------------------------------------
34-5. S07 가입 승인 — 승인 소속·권한 편집기 (#approvalEditor)
운영 계약(account_approvals.php)의 id/data-* 를 그대로 쓴다.
-------------------------------------------------------------------------- */
.item-rows.assign .hd,.item-rows.assign .rw{
grid-template-columns:44px minmax(0,1fr) minmax(0,220px) 52px;
}
@media (max-width:820px){
.item-rows.assign .hd{display:none}
.item-rows.assign .rw{grid-template-columns:minmax(0,1fr);gap:7px;padding:12px 14px;position:relative}
.item-rows.assign .rw .no::before{content:"소속 "}
}
#approvalEditor{scroll-margin-top:16px}
#approvalEditor[hidden]{display:none!important}
.appr-target{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
padding:14px 20px;border-bottom:1px solid var(--bd-in);background:var(--bg-sec);
}
.appr-target .who{font-size:14px;font-weight:800}
.appr-target .sub{font-size:12px;color:var(--tx2)}
.appr-foot{
display:flex;flex-wrap:wrap;align-items:center;gap:8px;
padding:14px 20px;border-top:1px solid var(--bd-in);
}
.appr-foot .spacer{flex:1 1 auto}
/* --------------------------------------------------------------------------
34-6. 팝업 내부 표 — 중첩 가로 스크롤 정리
표는 자기 래퍼 안에서만 가로 스크롤하고, 팝업 본문 자체는 가로로 밀리지 않는다.
-------------------------------------------------------------------------- */
.modal-body{overflow-x:hidden;min-width:0}
.modal-body > *{min-width:0;max-width:100%}
.modal-body .tbl-wrap,
.modal-body .list-wrap,
.modal-body .scroll{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.modal-body .tbl-wrap table.tbl{min-width:520px}
@media (max-width:700px){
.modal-body .tbl-wrap table.tbl{min-width:480px}
}
/* --------------------------------------------------------------------------
34-7. .fv 안에서 여러 줄을 세로로 쌓아야 할 때 (검색 + 선택 + 안내)
.fv 는 flex 이므로 그대로 넣으면 가로로 늘어선다.
-------------------------------------------------------------------------- */
.fv > .stack{display:block;width:100%;min-width:0}
.fv > .stack > * + *{margin-top:8px}
.fl-inline{flex:0 0 auto;font-size:12.5px;font-weight:700;white-space:nowrap}
/* --------------------------------------------------------------------------
34-8. 버튼으로 여는 파일 선택 (운영 계약: 버튼 + 읽기전용 파일명 입력)
네이티브 file input 은 화면에서 감추되 접근성 트리는 남겨 둔다.
-------------------------------------------------------------------------- */
.sr-file{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
label.chk{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--tx1);cursor:pointer}
label.chk input[type=checkbox]{width:15px;height:15px;accent-color:var(--primary);cursor:pointer}
/* --------------------------------------------------------------------------
34-9. 하단 액션 바 — 버튼이 늘어나도 모바일에서 문장이 세로로 쪼개지지 않게
-------------------------------------------------------------------------- */
.form-actions{flex-wrap:wrap;row-gap:10px}
.form-actions > .muted,.form-actions > .pend{flex:1 1 100%;min-width:0}
.form-actions .spacer{display:none}
@media (min-width:821px){
.form-actions > .muted,.form-actions > .pend{flex:0 1 auto}
.form-actions .spacer{display:block;margin-left:auto}
}
@media (max-width:820px){
.form-actions .btn{flex:1 1 auto;justify-content:center}
}
/* --------------------------------------------------------------------------
35. 시안 전용 상태 미리보기 바 (erp-states.js) — 운영 배포 시 제거
-------------------------------------------------------------------------- */
.state-bar{
position:fixed;left:0;right:0;bottom:0;z-index:60;
display:flex;align-items:center;flex-wrap:wrap;gap:8px;
padding:10px 16px;background:#1f2937;color:#e5e7eb;
border-top:2px dashed #fcd34d;font-size:12.5px;
}
.state-bar .tag{
padding:2px 8px;border-radius:var(--r-xs);background:#fcd34d;color:#78350f;
font-weight:800;font-size:11px;
}
.state-bar .t{font-weight:700;margin-right:4px}
.state-bar .s{flex:1 1 100%;color:#9ca3af;font-size:11.5px;line-height:1.6}
.state-bar .btn{
height:26px;padding:0 12px;font-size:12px;background:#374151;color:#e5e7eb;
border-color:#4b5563;
}
.state-bar .btn:hover{background:#4b5563}
.state-bar .btn.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
body:has(.state-bar) .page{padding-bottom:110px}
@media print{ .state-bar{display:none!important} body:has(.state-bar) .page{padding-bottom:0} }
/* 처리 중 표시 */
.is-busy{opacity:.6;cursor:progress}
.spin{
display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:6px;
border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.field-err{
display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--danger);
}
.f.err,.f.is-error{border-color:var(--danger-bd);background:var(--danger-bg)}
/* 팝업 안 상태 미리보기 버튼 (시안 전용) */
.demo-note .mstate-btns{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:8px}
.demo-note.fx{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
/* --------------------------------------------------------------------------
35-1. hidden 속성이 항상 이기게 한다.
.notice / .card 처럼 display 를 직접 지정한 규칙이 UA 기본 [hidden] 을 덮어써서
숨겨야 할 상태 블록이 화면에 남는 문제를 막는다.
-------------------------------------------------------------------------- */
[hidden]{display:none!important}
/* --------------------------------------------------------------------------
35-2. 급여 항목 팝업 — 390px 에서 항목명이 가려지지 않게
‘계산 기준’ 배지는 좁은 화면에서 접고, 표가 모달 폭 안에 들어오게 한다.
-------------------------------------------------------------------------- */
@media (max-width:700px){
#piEarnTable th:nth-child(2),#piEarnTable td:nth-child(2),
#piDedTable th:nth-child(2),#piDedTable td:nth-child(2){display:none}
/* 고정 레이아웃은 숨긴 열의 colgroup 폭까지 잡아먹는다 → 자동 레이아웃으로 바꾼다 */
#piEarnTable,#piDedTable{min-width:0!important;table-layout:auto!important}
#piEarnTable col,#piDedTable col{width:auto!important}
#piEarnTable .pi-name,#piDedTable .pi-name{white-space:normal;word-break:break-word}
#piEarnTable td.num,#piDedTable td.num{width:130px}
#piEarnTable th.center:last-child,#piDedTable th.center:last-child,
#piEarnTable td.center:last-child,#piDedTable td.center:last-child{width:44px}
.modal-body .tbl-wrap table.tbl{min-width:0}
}
/* --------------------------------------------------------------------------
36. 표 셀 안의 버튼이 잘리지 않게 (v2.8 · 근본 원인 수정)
§12 의 table.tbl td{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
은 긴 텍스트를 줄이는 데는 맞지만, "텍스트 + 버튼"이 같이 들어 있는 칸에서는
버튼을 칸 밖으로 밀어내 잘라 버립니다. 잘린 자리는 클릭이 칸으로 가서
버튼이 눌리지 않습니다. 그런 칸만 잘림을 풀고 줄바꿈을 허용합니다.
-------------------------------------------------------------------------- */
table.tbl td.act,
table.tbl td.item-employee-name,
table.tbl td.item-components,
table.tbl td:has([data-item-components]),
table.tbl td:has([data-rate-id]),
table.tbl td:has(.insurance-rate-action),
table.tbl td:has(> .btn),
table.tbl td:has(> .btn-group){
overflow:visible;
text-overflow:clip;
white-space:normal;
height:auto;
word-break:break-word;
}
table.tbl td.item-employee-name{line-height:1.55;padding-top:7px;padding-bottom:7px}
table.tbl td.item-employee-name > .btn,
table.tbl td.item-employee-name > .btn-group{margin-left:8px;vertical-align:middle}
/* --------------------------------------------------------------------------
37. 소속 회사 · 역할 반복행 (v2.8)
현행 ERP JS 가 #companyAccessRows 안에 아래 구조를 다시 만들어 넣습니다.
그래서 디자인은 시안 전용 클래스가 아니라 **이 클래스들에 붙입니다.**
행이 JS 로 새로 생성돼도 같은 모양이 유지됩니다.
-------------------------------------------------------------------------- */
#companyAccessRows,.access-rows{border-top:1px solid var(--bd-in)}
#companyAccessRows .company-access-row,
.access-rows .company-access-row{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px) 84px;
gap:10px 12px;align-items:end;padding:12px 16px;border-bottom:1px solid var(--bd-in);
}
#companyAccessRows .company-access-row:last-child,
.access-rows .company-access-row:last-child{border-bottom:0}
#companyAccessRows .form-field,
.access-rows .form-field{display:flex;flex-direction:column;gap:5px;min-width:0}
#companyAccessRows .form-field > label,
.access-rows .form-field > label{
font-size:11.5px;font-weight:700;color:var(--tx2);white-space:nowrap;
}
#companyAccessRows select,#companyAccessRows .f,
.access-rows select,.access-rows .f{width:100%;min-width:0}
#companyAccessRows .form-field.row-del > label,
.access-rows .form-field.row-del > label{visibility:hidden}
/* JS 가 label 없이 select 만 넣는 경우에도 높이가 맞게 */
#companyAccessRows .company-access-row > select,
.access-rows .company-access-row > select{align-self:end}
@media (max-width:820px){
#companyAccessRows .company-access-row,
.access-rows .company-access-row{grid-template-columns:minmax(0,1fr);gap:8px}
#companyAccessRows .form-field.row-del > label,
.access-rows .form-field.row-del > label{display:none}
#companyAccessRows .form-field.row-del .btn,
.access-rows .form-field.row-del .btn{width:100%}
}