* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0e1622;
--surface: #16202e;
--border: #2a3648;
--accent: #5b90d6;
--accent2: #4a8fa0;
--warn: #d2a24c;
--danger: #d96666;
--success: #4fb57e;
--text: #e7ebf2;
--muted: #8d9bb3;
--sidebar-w: 220px;
--navy: #1b3b6f;
--modal-overlay-bg: rgba(0,0,0,.55);
--z-base: 1;
--z-sticky: 10;
--z-menu: 100;
--z-drawer: 200;
--z-modal-bg: 900;
--z-modal: 1000;
--z-popover: 2000;
--z-toast: 3000;
}
/* ── 라이트 모드: 네이비 기반 전문 결재시스템 톤 ── */
[data-theme="light"] {
--bg: #eef1f6;
--surface: #ffffff;
--border: #d7dee8;
--text: #16233d;
--muted: #5b6b85;
--accent: #2b5ea3;
--accent2: #2f8f5b;
--navy: #14284a;
--warn: #c08a2e;
--danger: #b23a3b;
--success: #2f8f5b;
--modal-overlay-bg: rgba(0,0,0,.35);
font-family: -apple-system,'Noto Sans KR','SF Pro Display',sans-serif;
-webkit-font-smoothing: antialiased;
}
/* 라이트 배경 — 단색 */
[data-theme="light"] body {
background: #f2f4f7;
}
/* 사이드바 — 단색 */
[data-theme="light"] .sidebar {
background: #ffffff;
border-right: 1px solid var(--border);
box-shadow: none;
}
[data-theme="light"] .nav-item {
border-radius: 9px; margin: 0 6px 1px;
font-size: 13px; color: var(--text); padding: 8px 10px;
}
[data-theme="light"] .nav-item:hover { background: rgba(0,0,0,.05); color: var(--text); }
[data-theme="light"] .nav-group-hd { color: var(--text); }
[data-theme="light"] .comp-num { background: rgba(0,0,0,.08); }
/* 컴포넌트 넘버링 = 관리자 전용. 일반사용자/로그인전 화면엔 숨김 (대표 지시 2026-07-23) */
body:not(.is-admin) .comp-num { display: none !important; }
body:not(.is-admin) .admin-only { display: none !important; }
/* 탑바 */
[data-theme="light"] .topbar {
background: #ffffff;
border-bottom: 1px solid rgba(60,60,67,.12);
}
[data-theme="light"] .page-title { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
/* 카드 — 단색 */
[data-theme="light"] .card {
background: #ffffff;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: none;
position: relative;
}
[data-theme="light"] .card::before { display: none; }
[data-theme="light"] .card-title {
font-size: 11px; font-weight: 600; color: var(--muted);
letter-spacing: .04em; text-transform: uppercase;
}
/* 테이블 */
[data-theme="light"] th {
font-size: 11px; color: var(--muted); letter-spacing: .03em;
font-weight: 600; border-bottom: 1px solid rgba(60,60,67,.12);
}
[data-theme="light"] td {
border-bottom: 1px solid rgba(60,60,67,.08);
font-size: 13px; color: var(--text);
}
[data-theme="light"] tr:hover td { background: rgba(0,122,255,.03); }
[data-theme="light"] tr:last-child td { border-bottom: none; }
/* 버튼 */
[data-theme="light"] .btn-primary {
background: var(--accent); color: #fff;
border-radius: 8px; font-weight: 600;
box-shadow: 0 2px 6px rgba(0,122,255,.25);
}
[data-theme="light"] .btn-outline {
background: rgba(0,0,0,.05); border: none; color: var(--text);
border-radius: 8px;
}
[data-theme="light"] .btn-outline:hover { background: rgba(0,122,255,.1); color: var(--accent); }
[data-theme="light"] .btn-danger { background: rgba(255,59,48,.08); color: #FF3B30; border: none; }
[data-theme="light"] .btn-danger:hover { background: #FF3B30; color: #fff; }
/* 인풋 */
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
background: #fff; border: 1px solid rgba(60,60,67,.22);
border-radius: 8px; color: var(--text); font-size: 14px;
}
[data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0,122,255,.12);
background: #fff;
outline: none;
}
/* 뱃지 */
[data-theme="light"] .badge-blue { background: rgba(0,122,255,.1); color: var(--accent); }
[data-theme="light"] .badge-green { background: rgba(52,199,89,.12); color: #34C759; }
[data-theme="light"] .badge-red { background: rgba(255,59,48,.1); color: #FF3B30; }
[data-theme="light"] .badge-yellow { background: rgba(255,204,0,.15); color: #B8860B; }
/* 모달 오버레이 */
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,.35); }
[data-theme="light"] .modal {
background: #fff; border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}
[data-theme="light"] .modal-header { background: #fff; border-bottom: 1px solid rgba(60,60,67,.12); }
[data-theme="light"] .modal-footer { background: #fff; border-top: 1px solid rgba(60,60,67,.1); }
/* 라이트: 모달·선택박스·편집셀 불투명화 (--surface 반투명 오버라이드, 대표지시) */
[data-theme="light"] .pw-card { background: #fff; border-color: rgba(60,60,67,.12); }
[data-theme="light"] .col-menu { background: #fff; border-color: rgba(60,60,67,.12); }
[data-theme="light"] .cal-sheet { background: #fff; border-color: rgba(60,60,67,.12); }
[data-theme="light"] .dp-pop { background: #fff; border-color: rgba(60,60,67,.18); }
[data-theme="light"] .cell-input { background: #fff; border-color: var(--border); }
/* 라이트: 칩 테두리 복원 (연한 배경이 흰 바탕에 묻혀 윤곽 소실, 대표지시) */
[data-theme="light"] .chip-green { border: 1px solid rgba(34,197,94,.40); }
[data-theme="light"] .chip-yellow { border: 1px solid rgba(245,158,11,.40); }
[data-theme="light"] .chip-red { border: 1px solid rgba(239,68,68,.40); }
[data-theme="light"] .chip-blue { border: 1px solid rgba(43,94,163,.40); }
[data-theme="light"] .chip-dyn { border: 1px solid rgba(var(--cc-rgb), .40); }
/* 토글 버튼 */
.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; color: var(--muted); cursor: pointer; font-size: 14px; transition: .15s; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* ️ AGY-6 접근성: 전역 고대비 포커스링 (:focus-visible) 복원 (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
outline: 2px solid var(--accent, #5b90d6) !important;
outline-offset: 2px !important;
}
[data-theme="dark"] :focus-visible {
outline-color: #93c5fd !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}
[data-theme="light"] :focus-visible {
outline-color: #1d4ed8 !important;
box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.25);
}
/* ️ AGY-6 접근성: 라이트 모드 고대비 텍스트·뱃지·경고창 보정 (WCAG 2.1 AA 4.5:1 이상) */
[data-theme="light"] .alert-red { background: #fef2f2 !important; border: 1px solid #fca5a5 !important; color: #991b1b !important; }
[data-theme="light"] .alert-yellow { background: #fffbeb !important; border: 1px solid #fcd34d !important; color: #92400e !important; }
[data-theme="light"] .badge-HACCP { background: #dcfce7 !important; color: #15803d !important; }
[data-theme="light"] .badge-출하 { background: #e0f2fe !important; color: #0369a1 !important; }
[data-theme="light"] .badge-생산 { background: #e0e7ff !important; color: #3730a3 !important; }
[data-theme="light"] .badge-인사 { background: #fef3c7 !important; color: #b45309 !important; }
[data-theme="light"] .badge-Audit, [data-theme="light"] .badge-경고 { background: #fee2e2 !important; color: #b91c1c !important; }
[data-theme="light"] .badge-연차 { background: #f3e8ff !important; color: #6b21a8 !important; }
[data-theme="light"] .chip-yellow { background: #fef9c3 !important; border-color: #facc15 !important; color: #854d0e !important; }
[data-theme="light"] .chip-green { background: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; }
[data-theme="light"] .avatar { background: #14284a !important; color: #ffffff !important; }
body { font-family: 'Pretendard', -apple-system, sans-serif;
background: var(--bg);
color: var(--text); display: flex; height: 100vh; overflow: hidden; font-size: 14px; }
/* ── 장식용 블롭 배경 제거 (flat 디자인) ── */
.bg-blobs {
display: none;
}
.blob {
position: absolute; border-radius: 50%; will-change: transform;
}
/* 다크 모드 블롭 */
.blob-1 { width: 700px; height: 700px; top: -200px; left: -150px;
background: radial-gradient(circle, rgba(43,94,163,0.55) 0%, transparent 70%);
filter: blur(72px);
animation: drift1 22s ease-in-out infinite alternate; }
.blob-2 { width: 600px; height: 600px; top: -100px; right: -180px;
background: radial-gradient(circle, rgba(168,85,247,0.45) 0%, transparent 70%);
filter: blur(64px);
animation: drift2 18s ease-in-out infinite alternate; }
.blob-3 { width: 650px; height: 650px; bottom: -200px; left: 30%;
background: radial-gradient(circle, rgba(34,211,238,0.35) 0%, transparent 70%);
filter: blur(80px);
animation: drift3 26s ease-in-out infinite alternate; }
.blob-4 { width: 500px; height: 500px; bottom: -100px; right: -80px;
background: radial-gradient(circle, rgba(236,72,153,0.30) 0%, transparent 70%);
filter: blur(60px);
animation: drift4 20s ease-in-out infinite alternate; }
@keyframes drift1 { from{transform:translate(0,0) scale(1)} to{transform:translate(60px,-50px) scale(1.12)} }
@keyframes drift2 { from{transform:translate(0,0) scale(1)} to{transform:translate(-55px,45px) scale(0.90)} }
@keyframes drift3 { from{transform:translate(0,0) scale(1)} to{transform:translate(40px,-35px) scale(1.08)} }
@keyframes drift4 { from{transform:translate(0,0) scale(1)} to{transform:translate(-40px,30px) scale(1.15)} }
/* 라이트 모드 블롭 — 더 밝고 선명하게 */
[data-theme="light"] .blob-1 {
background: radial-gradient(circle, rgba(43,94,163,0.48) 0%, transparent 68%); }
[data-theme="light"] .blob-2 {
background: radial-gradient(circle, rgba(168,85,247,0.38) 0%, transparent 68%); }
[data-theme="light"] .blob-3 {
background: radial-gradient(circle, rgba(14,165,233,0.32) 0%, transparent 68%); }
[data-theme="light"] .blob-4 {
background: radial-gradient(circle, rgba(236,72,153,0.26) 0%, transparent 68%); }
/* SIDEBAR */
.sidebar { width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; position: relative; z-index: var(--z-base); }
.logo { padding: 20px 16px; border-bottom: 1px solid var(--border); }
.logo-name { font-size: 16px; font-weight: 700; color: var(--accent); }
.logo-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.logo-ver { font-size: 10px; color: var(--muted); opacity: .65; margin-top: 6px; font-family: monospace; }
.nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.nav-section { padding: 16px 16px 4px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer; border-radius: 0; transition: background .15s; color: var(--muted); font-size: 13px; }
.nav-item:hover { background: rgba(43,94,163,.08); color: var(--text); }
.nav-item.active { background: var(--accent); color: #fff; border-right: none; box-shadow: 0 2px 8px rgba(43,94,163,.3); }
.nav-item.active .comp-num { background: rgba(255,255,255,.25); }
/* 전자결재(E41) — 스크롤 영역(.nav) 밖 .logo 바로 아래에 위치해 스크롤해도 고정, parent 폭에 꽉 차는 단색 배너 */
.nav-icon { width: 16px; text-align: center; }
/* MAIN */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: var(--z-base); }
.topbar { height: 52px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 16px; background: var(--surface); position: relative; z-index: 50; }
.page-title { font-size: 15px; font-weight: 600; }
.erp-company-tabs { display:none; align-self:stretch; align-items:stretch; gap:2px; }
.erp-company-tabs.visible { display:flex; }
.erp-company-tab { appearance:none; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); padding:0 10px; font:600 12px/1 inherit; white-space:nowrap; cursor:pointer; transition:color .15s,border-color .15s; }
.erp-company-tab:hover { color:var(--text); }
.erp-company-tab.active { color:var(--text); border-bottom-color:var(--accent); }
.erp-company-tab[data-company-code="HNC"].active { border-bottom-color:var(--accent2); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.badge { background: var(--danger); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.content { flex: 1; overflow-y: auto; padding: 24px; }
/* ERP MAIN LAYOUT — 메인 폼 + 우측 미니달력 위젯 (전 화면 공통) */
.erp-main-layout { display: flex; align-items: flex-start; gap: 20px; width: 100%; }
.content-main { flex: 1; min-width: 0; }
.content-calendar { flex: 0 0 320px; width: 320px; }
/* CALENDAR WIDGET */
.calendar-widget-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px; box-shadow: none; position: sticky; top: 24px; }
.cw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cw-title { font-size: 14px; font-weight: 700; }
.cw-title-btn { appearance:none; border:0; border-radius:6px; background:transparent; color:var(--text); padding:5px 8px; font-family:inherit; cursor:pointer; }
.cw-title-btn:hover { background:rgba(43,94,163,.12); color:var(--accent); }
.cw-nav-btn { width: 26px; height: 26px; border: 1px solid var(--border); background: transparent; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 13px; line-height: 1; }
.cw-nav-btn:hover { background: rgba(43,94,163,.12); }
.cw-add-btn { background: rgba(43,94,163,.15); border-color: rgba(43,94,163,.4); color: var(--accent, #2b5ea3); font-weight: 700; }
.cw-add-btn:hover { background: rgba(43,94,163,.28); }
#cw-ev-modal { display:none; position:fixed; inset:0; z-index:var(--z-modal); align-items:center; justify-content:center; background:rgba(0,0,0,.5); }
#cw-ev-modal.open { display:flex; }
#sl-detail-modal { display:none; position:fixed; inset:0; z-index:var(--z-modal); align-items:center; justify-content:center; background:rgba(0,0,0,.5); }
#sl-detail-modal.open { display:flex; }
.cw-ev-box { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:20px; width:300px; max-width:92vw; }
.sl-detail-box { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:26px; width:480px; max-width:92vw; max-height:86vh; overflow-y:auto; }
.sl-detail-box h4 { margin:0 0 16px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.sl-detail-box .cw-ev-row { margin-bottom:14px; }
.sl-detail-box .cw-ev-row label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.sl-detail-box .cw-ev-row input, .sl-detail-box .cw-ev-row select, .sl-detail-box .cw-ev-row textarea { width:100%; box-sizing:border-box; font-size:14px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:9px 11px; }
.sl-detail-box .cw-ev-row textarea { resize:vertical; }
.sl-detail-box .cw-ev-btns button { flex:1; padding:10px; border-radius:7px; border:1px solid var(--border); cursor:pointer; font-size:13.5px; }
.cw-ev-box h4 { margin:0 0 14px; font-size:14px; font-weight:700; }
.cw-ev-box .cw-ev-row { margin-bottom:10px; }
.cw-ev-box .cw-ev-row label { display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
.cw-ev-box .cw-ev-row input, .cw-ev-box .cw-ev-row select, .cw-ev-box .cw-ev-row textarea { width:100%; box-sizing:border-box; font-size:13px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:6px 9px; }
.cw-ev-box .cw-ev-row textarea { resize:none; }
.cw-ev-msg { font-size:12px; min-height:16px; margin-bottom:8px; }
.cw-ev-btns { display:flex; gap:8px; }
.cw-ev-btns button { flex:1; padding:9px; border-radius:7px; border:1px solid var(--border); cursor:pointer; font-size:13px; }
.cw-ev-btns .cw-ev-save { background:var(--accent,#2b5ea3); color:#fff; border-color:var(--accent,#2b5ea3); font-weight:600; }
.cw-ev-btns .cw-ev-cancel { background:transparent; color:var(--text); }
.cw-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cw-dow-row { margin-bottom: 4px; }
.cw-dow { font-size: 10px; color: var(--muted); font-weight: 700; padding-bottom: 4px; }
.cw-day { position: relative; font-size: 12px; padding: 7px 0; border-radius: 6px; cursor: pointer; color: var(--text); }
.cw-day:hover { background: rgba(43,94,163,.12); }
.cw-day.other-month { visibility: hidden; cursor: default; }
.cw-day.today { background: var(--accent); color: #fff; font-weight: 700; }
.cw-day.selected { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
.cw-day.today.selected { outline-color: #fff; }
.cw-day .event-dot { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--danger); }
.cw-day.today .event-dot { background: #fff; }
.content-calendar.hidden { display: none; }
/* SCHEDULE LIST WIDGET (사이드바 미니달력 아래 · 카테고리탭+일정목록) */
.schedule-list-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px; margin-top: 16px; box-shadow: none; }
.sl-head { margin-bottom: 10px; }
.sl-title { font-size: 13px; font-weight: 700; }
.sl-clear-btn { font-size: 11px; color: var(--accent); cursor: pointer; margin-left: 6px; text-decoration: underline; }
.sl-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.sl-tab { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 11px; padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.sl-tab:hover { color: var(--text); }
.sl-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sl-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.sl-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 18px 0; }
.sl-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 8px; background: rgba(128,128,128,.06); }
.sl-item-body { flex: 1; min-width: 0; }
.sl-item-title { font-size: 12.5px; color: var(--text); font-weight: 600; word-break: break-all; }
.sl-item-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.badge { display: inline-block; flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.badge-생산 { background: rgba(43,94,163,.15); color: #818cf8; }
.badge-출하 { background: rgba(34,211,238,.15); color: #22d3ee; }
.badge-HACCP { background: rgba(34,197,94,.15); color: #4ade80; }
.badge-인사 { background: rgba(245,158,11,.15); color: #fbbf24; }
.badge-Audit { background: rgba(239,68,68,.15); color: #f87171; }
.badge-연차 { background: rgba(168,85,247,.15); color: #c084fc; }
.badge-경고 { background: rgba(239,68,68,.25); color: #f87171; }
.badge-기타 { background: rgba(128,128,128,.18); color: var(--muted); }
/* SCREENS */
.screen { display: none !important; }
.screen.active { display: block !important; }
.screen.active { display: block; }
/* CARDS */
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 20px; box-shadow: none; position: relative; min-width: 0; }
.card::before { display: none; }
.card-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.kpi-value { font-size: 28px; font-weight: 700; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.demo-badge { display:inline-block; font-size:10px; font-weight:700; color:var(--muted); background:rgba(128,128,128,.16); border:1px solid var(--border); border-radius:6px; padding:1px 6px; margin-left:8px; vertical-align:middle; letter-spacing:0; text-transform:none; }
.kpi-up { color: var(--success); }
.kpi-down { color: var(--danger); }
/* TABLE */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px 12px; font-size: 11px; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); }
td { padding: 12px 12px; border-bottom: 1px solid rgba(42,42,46,.5); font-size: 13px; }
tr:hover td { background: rgba(255,255,255,.02); }
/* STATUS CHIPS */
.chip { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.chip-green { background: rgba(34,197,94,.15); color: var(--success); }
.chip-yellow { background: rgba(245,158,11,.15); color: var(--warn); }
.chip-red { background: rgba(239,68,68,.15); color: var(--danger); }
.chip-blue { background: rgba(43,94,163,.15); color: var(--accent); }
/* 회사(소속)별 구분색 — 팔레트는 suCompanyColor() 참고, --cc-rgb는 렌더 시 인라인으로 주입 */
.chip-dyn { background: rgba(var(--cc-rgb), .15); color: rgb(var(--cc-rgb)); }
.approval-line-decided-at { display:block; margin-top:2px; font-size:10px; font-weight:400; white-space:nowrap; }
/* BUTTONS */
.btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: opacity .15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn:hover { opacity: .85; }
/* SECTION HEADER */
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sec-head h2 { font-size: 15px; font-weight: 600; }
.screen-context { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:16px 0; }
/* ── MRP Sticky CTA Header Bar (Part L) ── */
.mrp-sticky-cta-bar {
position: sticky;
top: -24px;
z-index: 40;
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 12px 0;
margin: -24px 0 16px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
box-sizing: border-box;
width: 100%;
}
.mrp-sticky-cta-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.mrp-sticky-cta-info .sec-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.mrp-sticky-cta-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.mrp-sticky-cta-actions .btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
min-height: 38px;
padding: 8px 16px;
box-sizing: border-box;
cursor: pointer;
}
.mrp-sticky-cta-actions .btn-pri {
font-weight: 700;
box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
@media (max-width: 768px) {
.mrp-sticky-cta-bar {
top: -16px;
margin: -16px 0 12px 0;
padding: 10px 0;
}
.mrp-sticky-cta-actions {
width: 100%;
justify-content: stretch;
gap: 8px;
}
.mrp-sticky-cta-actions .btn {
flex: 1;
justify-content: center;
min-height: 44px;
}
}
@media (max-width: 480px) {
.mrp-sticky-cta-bar {
top: -12px;
margin: -12px 0 12px 0;
padding: 8px 0;
}
}
/* CHART PLACEHOLDER */
.chart-placeholder { background: rgba(43,94,163,.05); border: 1px dashed var(--border); border-radius: 8px; height: 180px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
/* FORM */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
#approval-d-meta .form-grid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px 12px; }
#approval-d-meta .form-grid > div { min-width: 0; overflow-wrap: anywhere; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; color: var(--muted); }
.form-group input, .form-group select, .form-group textarea {
background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
padding: 9px 12px; color: var(--text); font-size: 13px; font-family: inherit; outline: none;
}
.form-group input:focus, .form-group select:focus { border-color: var(--accent); }
.form-group textarea { resize: vertical; min-height: 80px; }
/* ── 전자결재: 리치에디터/별첨 ── */
.aw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; padding: 6px; background: var(--bg); }
.aw-toolbar button { min-width: 28px; height: 28px; padding: 0 6px; border: none; background: transparent; color: var(--text); border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.aw-toolbar button:hover { background: rgba(43,94,163,.15); }
.approval-person-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-top:8px; }
.approval-person-card { aspect-ratio:4/3; min-width:0; padding:10px; border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; gap:8px; background:var(--surface); }
.approval-person-card-main { display:flex; align-items:center; gap:7px; min-width:0; }
.approval-person-card-name { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.approval-person-card-actions { margin-top:auto; display:flex; justify-content:center; gap:6px; }
@media (max-width:1024px) { .approval-person-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:768px) { .approval-person-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:390px) { .approval-person-grid { grid-template-columns:1fr; } }
.aw-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
#approval-w-body { border: 1px solid var(--border); border-radius: 0 0 8px 8px; padding: 12px; font-size: 13.5px; line-height: 1.6; }
#approval-w-body:focus { outline: none; border-color: var(--accent); }
#approval-w-body img { max-width: 100%; border-radius: 6px; }
.approval-attach-link { font-size: 12.5px; color: var(--accent); cursor: pointer; text-decoration: underline; }
.approval-dropzone { margin-top: 10px; border: 1px dashed var(--border); border-radius: 8px; padding: 20px; text-align: center; font-size: 12.5px; color: var(--muted); transition: .15s; }
.approval-dropzone.drag { border-color: var(--accent); color: var(--accent); background: rgba(43,94,163,.06); }
.approval-tbl { width: 100%; border-collapse: collapse; margin-top: 6px; }
.approval-tbl th, .approval-tbl td { border: 1px solid var(--border); padding: 6px 8px; font-size: 12.5px; text-align: left; }
.approval-tbl th { background: var(--bg); color: var(--muted); font-weight: 600; white-space: nowrap; }
/* ── 지출결의서 전용 서식 표(대표 제공 참고 이미지와 동일한 형태) — 실제 종이양식처럼 앱 테마와 무관하게
고정 흑백 톤 유지(인쇄물 재현이 목적이라 다크모드에서도 라이트 문서 그대로 보이는 게 맞음) ── */
.approval-expense-form { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; color: #1a1a1a; }
.approval-expense-form th, .approval-expense-form td { border: 1px solid #444; padding: 6px 8px; }
.approval-expense-form .aef-lbl { background: #333; color: #fff; font-weight: 600; text-align: center; white-space: nowrap; }
.approval-expense-form .aef-title { text-align: center; font-size: 16px; font-weight: 700; padding: 10px 8px; }
.approval-expense-form .aef-c { text-align: center; }
.approval-expense-form .aef-r { text-align: right; }
.approval-expense-form th:not(.aef-lbl) { background: #eee; color: #1a1a1a; font-weight: 600; white-space: nowrap; }
/* ── 전자결재: 상단 탭(밑줄+개수뱃지) ── */
.appr-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 12px; flex-wrap: wrap; }
.appr-tab { position: relative; background: none; border: none; padding: 9px 1px 11px; font-size: 13.5px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.appr-tab:hover { color: var(--text); }
.appr-tab.active { color: var(--accent); font-weight: 700; }
.appr-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 1px 1px 0 0; }
.appr-tab-count { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: var(--border); color: var(--muted); }
.appr-tab.active .appr-tab-count { background: rgba(43,94,163,.18); color: var(--accent); }
/* ── 전자결재: 목록/상세 분할뷰(선택 전=표 전체폭, 선택 시=좌 간략목록+우 상세) ── */
.approval-split { display: flex; gap: 16px; align-items: flex-start; }
.approval-list-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.approval-split.has-selection .approval-list-pane {
flex: 0 0 clamp(210px, 18vw, 260px);
width: clamp(210px, 18vw, 260px);
min-width: 190px;
max-width: 270px;
}
.approval-detail-pane { flex: 1; min-width: 0; }
/* .screen.active{display:block !important}가 우선순위(importance)로 이 규칙의 display:flex를 항상 이겨서
내부 스크롤 컨테이너(#approval-dashboard-scroll)가 flex 자식으로 취급되지 않아 높이가 콘텐츠만큼(문서
2759건 표 포함) 그대로 늘어나고, 부모(overflow:hidden)에 잘려 맨 아래 추이 그래프까지 스크롤이 아예
안 되던 결함 — !important로 우선순위를 맞추고 ID 특정도가 더 높아 정상적으로 이김 */
#screen-approval-dashboard.active{display:flex !important;flex-direction:column;height:calc(100vh - 96px);min-height:0;overflow:hidden;}
#approval-dashboard-sticky{position:relative;flex:0 0 auto;background:var(--bg);padding:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
#approval-dashboard-scroll{flex:1 1 auto;overflow:auto;padding-right:4px;min-height:0;}
#approval-d-body { max-width: 100%; overflow: visible; }
#approval-d-body .se-contents, #approval-d-body #hw_dext_default_style { overflow: visible !important; }
#approval-d-body .se-drawing-object-wrapper { display: block; max-width: 100%; overflow: visible !important; vertical-align: top !important; line-height: 0; }
#approval-d-body img { display:block; max-width:100% !important; height:auto !important; border-radius:6px; }
#approval-list-rows { display: flex; flex-direction: column; gap: 8px; }
.approval-row-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; cursor: pointer; transition: .15s; }
.approval-row-card:hover { border-color: var(--accent); }
.approval-row-card.selected { border-color: var(--accent); background: rgba(43,94,163,.08); box-shadow: 0 0 0 1px var(--accent); }
@media (max-width: 900px) {
.approval-split { flex-direction: column; }
.approval-split.has-selection .approval-list-pane { display: none; } /* 모바일에서 문서 선택 시 목록을 숨겨 상세(본문)가 화면 맨 위에 바로 보이게 함 — 닫기로 복귀 */
}
/* ── 전자결재: 통합 대시보드(E43) ── */
.adb-grid2{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;margin-bottom:14px;align-items:stretch;}
.adb-grid2 > .card{display:flex;flex-direction:column;}
@media (max-width:920px){ .adb-grid2{grid-template-columns:1fr;} }
.adb-legend{display:flex;gap:14px;font-size:11px;color:var(--muted);margin-bottom:10px;flex-wrap:wrap;}
.adb-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle;}
.adb-kpi{border-left:3px solid var(--border);}
.adb-kpi.warn{border-left-color:var(--warn);}
.adb-kpi.accent{border-left-color:var(--accent);}
.adb-kpi.success{border-left-color:var(--success);}
.adb-kpi.danger{border-left-color:var(--danger);}
.adb-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;width:100%;background:none;border:none;padding:1px 0;cursor:pointer;font-family:inherit;color:inherit;text-align:left;border-radius:6px;}
.adb-bar-row:last-of-type{margin-bottom:0;}
.adb-bar-row:hover .adb-bar-lbl{color:var(--accent);}
.adb-bar-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.adb-bar-lbl{width:52px;font-size:12px;color:var(--text);font-weight:600;flex-shrink:0;transition:color .12s;}
.adb-bar-track{flex:1;height:15px;border-radius:5px;overflow:hidden;display:flex;background:var(--bg);gap:2px;}
.adb-bar-seg{height:100%;transition:filter .12s;}
.adb-bar-seg:hover{filter:brightness(1.15);}
.adb-bar-total{width:34px;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0;}
#adb-bar-chart{flex:1;display:flex;flex-direction:column;justify-content:center;}
.adb-cal-hd{display:flex;align-items:center;gap:10px;}
.adb-cal-nav{background:transparent;border:1px solid var(--border);color:var(--text);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.adb-cal-nav:hover{border-color:var(--accent);color:var(--accent);}
.adb-cal-nav:disabled{opacity:.3;cursor:default;}
.adb-cal-my{font-size:13.5px;font-weight:700;min-width:76px;text-align:center;}
.adb-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:8px;}
.adb-cal-wd{text-align:center;font-size:9px;font-weight:700;color:var(--muted);padding:1px 0 3px;}
.adb-cal-wd.sun{color:var(--danger);}
.adb-cal-wd.sat{color:var(--accent2);}
.adb-cal-day{border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
padding:2px;font-family:inherit;color:inherit;height:23px;transition:border-color .12s,background .12s;}
.adb-cal-day:hover{border-color:var(--border);background:var(--bg);}
.adb-cal-day.empty{visibility:hidden;pointer-events:none;}
.adb-cal-day.sun .adb-cal-num{color:var(--danger);}
.adb-cal-day.sat .adb-cal-num{color:var(--accent2);}
.adb-cal-day.today{border-color:var(--accent);}
.adb-cal-day.selected{background:rgba(43,94,163,.14);border-color:var(--accent);}
.adb-cal-day.in-range{background:rgba(43,94,163,.16);border-radius:0;}
.adb-cal-day.range-start{background:var(--accent);border-color:var(--accent);border-radius:6px 0 0 6px;}
.adb-cal-day.range-end{background:var(--accent);border-color:var(--accent);border-radius:0 6px 6px 0;}
.adb-cal-day.range-start.range-end{border-radius:6px;}
.adb-cal-day.range-start .adb-cal-num,.adb-cal-day.range-end .adb-cal-num{color:#fff;}
.adb-cal-num{font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;}
.adb-cal-dot{width:4px;height:4px;border-radius:50%;background:var(--border);}
.adb-cal-selline{font-size:11.5px;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:8px;margin-top:8px;min-height:14px;visibility:hidden;}
#master-cal-grid.adb-cal-grid .adb-cal-day,#sr-cal-grid.adb-cal-grid .adb-cal-day{height:32px;} /* 영업 달력만 더 넉넉하게(전자결재 대시보드 달력은 기존 높이 유지) */
.adb-cal-grid-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;}
.adb-cal-month-btn{padding:10px 0;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-size:13px;font-family:inherit;transition:.12s;}
.adb-cal-month-btn:hover{border-color:var(--accent);color:var(--accent);}
.adb-cal-month-btn.selected{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700;}
.mcal-body{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px;overflow:hidden;max-height:900px;opacity:1;transition:max-height .22s ease,opacity .16s ease,margin-top .22s ease;}
.mcal-body.collapsed{max-height:0;opacity:0;margin-top:0;pointer-events:none;}
/* 재고 제품속성 필터 컬럼 전용 — 버튼 살짝 작게, 목록은 4.5개 높이만 보이고 스크롤바는 숨김(휠/드래그 스크롤은 그대로) */
#master-invf-cols .chip-btn{font-size:12px;padding:6px 10px;}
#master-invf-cols .invf-col-list{max-height:151px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
#master-invf-cols .invf-col-list::-webkit-scrollbar{display:none;}
#bom-attr-cols .chip-btn{font-size:12px;padding:6px 10px;}
#bom-attr-cols .invf-col-list{max-height:151px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
#bom-attr-cols .invf-col-list::-webkit-scrollbar{display:none;}
#bom-attr-cols.collapsed{margin-top:0 !important;}
.adb-cal-selline.show{visibility:visible;}
.adb-cal-selline button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;text-decoration:underline;font-family:inherit;}
.adb-tooltip{position:fixed;pointer-events:none;background:var(--text);color:var(--bg);font-size:11.5px;font-weight:600;
padding:6px 9px;border-radius:7px;z-index:var(--z-popover);opacity:0;transform:translate(-50%,-100%) translateY(-8px);transition:opacity .1s;
white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.adb-tooltip.show{opacity:1;}
.adb-dday{font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;display:inline-block;font-variant-numeric:tabular-nums;}
.adb-dday.urgent{background:rgba(239,68,68,.15);color:var(--danger);}
.adb-dday.soon{background:rgba(245,158,11,.15);color:var(--warn);}
.adb-dday.ok{background:rgba(113,113,122,.15);color:var(--muted);}
.adb-line-row{display:flex;align-items:center;}
.adb-line-av{position:relative;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;background:var(--border);flex-shrink:0;}
.adb-line-av.done{background:var(--navy);}
.adb-line-av.wait{background:var(--surface);color:var(--muted);border:1.5px dashed var(--border);}
.adb-line-av.rejected{background:var(--danger);}
.adb-line-av i{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--success);color:#fff;font-size:7px;font-style:normal;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--surface);}
.adb-line-av.rejected i{background:var(--danger);}
.adb-line-conn{width:10px;height:1.5px;background:var(--border);flex-shrink:0;}
.adb-line-conn.done{background:var(--success);}
/* 결재함 목록 "결재현황" 열 — 결재선(참조자·후열 확인 전용 참여자 제외) 진행 점 표시 */
.appr-line-row{display:flex;align-items:center;justify-content:center;gap:0;}
.appr-line-dot{position:relative;width:11px;height:11px;border-radius:50%;flex-shrink:0;background:var(--warn);}
.appr-line-dot.done{background:var(--success);}
.appr-line-dot.rejected{background:var(--danger);}
.appr-line-dot.is-me{box-shadow:0 0 0 2px var(--accent);}
.appr-line-conn{width:7px;height:1.5px;background:var(--border);flex-shrink:0;}
.appr-line-conn.done{background:var(--success);}
th.adb-sortable{cursor:pointer;user-select:none;}
th.adb-sortable:hover{color:var(--text);}
th.adb-sortable:focus-visible{outline:2px solid var(--accent);}
.adb-sort-arrow{font-size:9px;opacity:.5;margin-left:2px;}
.adb-sort-arrow.active{opacity:1;color:var(--accent);}
.adb-trend-card{margin-bottom:14px;min-width:0;}
.adb-trend-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;}
.adb-trend-sub{font-size:11px;color:var(--muted);margin-top:3px;}
.adb-trend-legend{display:flex;align-items:center;justify-content:flex-end;gap:13px;flex-wrap:wrap;font-size:11px;color:var(--muted);}
.adb-trend-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle;}
.adb-trend-legend i.line{width:15px;height:0;border-top:2px dashed var(--accent2);border-radius:0;}
.adb-trend-chart{width:100%;max-width:100%;min-height:188px;overflow:hidden;}
.adb-trend-chart svg{display:block;width:100%;height:188px;overflow:visible;}
.adb-trend-grid{stroke:var(--border);stroke-width:1;opacity:.65;}
.adb-trend-axis{fill:var(--muted);font-size:9px;font-family:inherit;}
.adb-trend-bar{cursor:default;transition:opacity .12s;}
.adb-trend-bar:hover{opacity:.78;}
.adb-trend-ma{fill:none;stroke:var(--accent2);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round;stroke-linecap:round;}
.adb-trend-empty{height:188px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;}
@media (max-width:600px){
.adb-trend-head{display:block;}
.adb-trend-legend{justify-content:flex-start;margin-top:9px;gap:10px;}
}
/* ── 대시보드: 영업·재고·생산 3축(E44 v2) ── */
.bd-pillar{min-width:0;border-top:3px solid var(--bd-pc,var(--border));cursor:pointer;transition:box-shadow .12s;}
.bd-pillar:hover{box-shadow:0 0 0 1px var(--bd-pc,var(--border)) inset;}
.bd-pillar.sales{--bd-pc:#f59e0b;}
.bd-pillar.inv{--bd-pc:var(--accent2);}
.bd-pillar.prod{--bd-pc:var(--accent);}
.bd-p-hd{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.bd-p-icon{width:32px;height:32px;border-radius:9px;background:rgba(128,128,128,.16);
display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.bd-p-title{font-size:15px;font-weight:800;}
.bd-p-window{margin-left:auto;font-size:10.5px;color:var(--muted);background:var(--bg);padding:3px 9px;border-radius:20px;}
.bd-kpi-hero{background:var(--bg);border-radius:12px;padding:14px 16px;margin-bottom:8px;}
.bd-kpi-hero-lbl{font-size:11.5px;color:var(--muted);font-weight:600;}
.bd-kpi-hero-row{display:flex;align-items:baseline;gap:8px;margin-top:4px;flex-wrap:wrap;}
.bd-kpi-hero-num{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.bd-trend{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;}
.bd-trend.up{color:var(--success);background:rgba(34,197,94,.12);}
.bd-trend.down{color:var(--danger);background:rgba(239,68,68,.12);}
.bd-trend.flat{color:var(--muted);background:rgba(128,128,128,.12);}
.bd-kpi-ytd{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);
padding:9px 2px;margin-bottom:8px;border-bottom:1px dashed var(--border);}
.bd-kpi-ytd b{font-size:13px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;}
.bd-kpi-ytd.bd-muted-note{font-size:11px;justify-content:flex-start;color:var(--muted);line-height:1.5;}
.bd-chart-wrap{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.bd-chart-lbl{font-size:10.5px;color:var(--muted);margin-bottom:6px;}
.bd-chart-empty{height:56px;display:flex;align-items:center;justify-content:center;font-size:11.5px;color:var(--muted);
background:var(--bg);border-radius:8px;border:1px dashed var(--border);}
.bd-chart-range{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-top:3px;}
.bd-hoverline{stroke:var(--border);stroke-width:1;pointer-events:none;opacity:0;}
.bd-hoverdot{pointer-events:none;opacity:0;stroke:var(--surface);stroke-width:2;}
.bd-hitlayer{fill:transparent;cursor:crosshair;}
.bd-goal-line{stroke:var(--accent);stroke-width:1.25;stroke-dasharray:5 3;pointer-events:none;}
.bd-goal-handle{fill:var(--surface);stroke:var(--accent);stroke-width:2;cursor:ns-resize;touch-action:none;}
.bd-goal-handle:hover,.bd-goal-handle:focus{fill:var(--accent);outline:none;}
.bd-goal-marker{fill:var(--muted);stroke:var(--surface);stroke-width:1;pointer-events:none;}
.bd-goal-marker.achieved{fill:var(--success);}
.bd-goal-label{fill:var(--text);font-size:7.5px;font-weight:700;pointer-events:none;}
.bd-goal-badge{pointer-events:none;}
.bd-goal-badge rect{fill:var(--surface);stroke:var(--border);stroke-width:1;}
.bd-goal-badge text{fill:var(--success);font-size:7.5px;font-weight:800;text-anchor:middle;}
.bd-top5-wrap{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.bd-top5-lbl{font-size:10.5px;color:var(--muted);margin-bottom:8px;}
.bd-top5-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;cursor:pointer;}
.bd-top5-row:last-child{margin-bottom:0;}
.bd-top5-row:hover .bd-top5-name{text-decoration:underline;}
.bd-top5-rank{width:20px;height:20px;border-radius:50%;font-size:10px;font-weight:800;color:var(--muted);background:var(--bg);
flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.bd-top5-row:first-child .bd-top5-rank{color:#fff;background:var(--bd-pc);}
.bd-top5-body{flex:1;min-width:0;}
.bd-top5-name{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bd-top5-bar-track{height:4px;border-radius:3px;background:var(--bg);margin-top:3px;overflow:hidden;}
.bd-top5-bar-fill{height:100%;border-radius:3px;background:var(--bd-pc);}
.bd-top5-val{font-size:11px;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums;}
.bd-top5-empty{font-size:11.5px;color:var(--muted);padding:8px 0;}
/* ── CFO 대시보드 벤토그리드 (Bento Grid) ── */
.bento-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.bento-toolbar-title{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;}
.bento-btn-reset{font-size:11px;padding:4px 10px;border-radius:6px;color:var(--muted);border:1px solid var(--border);
background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:inherit;transition:.12s;}
.bento-btn-reset:hover{color:var(--text);border-color:var(--accent);background:var(--bg);}
.bento-grid{display:grid;gap:16px;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));transition:grid-template-columns .2s ease;}
/* 4단계 반응형 브레이크포인트 (480 / 768 / 1024 / 1440px) */
@media (max-width:479.98px){
.bento-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:12px;}
}
@media (min-width:480px) and (max-width:767.98px){
.bento-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
}
@media (min-width:768px) and (max-width:1023.98px){
.bento-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
}
@media (min-width:1024px) and (max-width:1439.98px){
.bento-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
}
@media (min-width:1440px){
.bento-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
}
.bento-card{position:relative;min-width:0;margin:0 !important;}
.bento-resize-handle{position:absolute;top:8px;right:0;bottom:8px;width:14px;cursor:col-resize;touch-action:none;user-select:none;
z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease;border-radius:0 8px 8px 0;}
.bento-card:hover .bento-resize-handle,.bento-resize-handle:focus,.bento-resize-handle.resizing{opacity:1;}
.bento-resize-handle::after{content:'';width:3px;height:24px;border-radius:2px;background:var(--border);transition:background .15s,height .15s;}
.bento-resize-handle:hover::after,.bento-resize-handle.resizing::after{background:var(--accent);height:38px;}
.bento-card.resizing{outline:2px solid var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.18);z-index:12;}
.bento-grid.is-resizing{user-select:none;cursor:col-resize;}
.bento-resize-badge{position:absolute;top:8px;right:20px;background:var(--surface);color:var(--accent);border:1px solid var(--accent);
font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;pointer-events:none;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.15);}
.bd-combo-card{padding:20px 22px;}
.bd-combo-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:6px;}
.bd-combo-title{font-size:15px;font-weight:800;}
.bd-combo-sub{font-size:11.5px;color:var(--muted);margin-bottom:14px;}
.bd-combo-legend{display:flex;gap:6px;flex-wrap:wrap;}
.bd-combo-leg-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;border:1px solid var(--border);
background:var(--bg);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:.12s;}
.bd-combo-leg-btn i{width:8px;height:8px;border-radius:2px;flex-shrink:0;}
.bd-combo-leg-btn.off{opacity:.35;}
.bd-combo-leg-btn:hover{border-color:var(--text);}
.bd-combo-axis-lbl{font-size:9.5px;fill:var(--muted);}
.bd-combo-grid-line{stroke:var(--border);stroke-width:0.5;}
.alert.alert-clickable{cursor:pointer;transition:.12s;}
.alert.alert-clickable:hover{opacity:.82;}
@keyframes bdRowFlash{0%{background:rgba(43,94,163,.28);}100%{background:transparent;}}
.bd-row-flash{animation:bdRowFlash 1.6s ease-out;}
.bd-tooltip{position:fixed;pointer-events:none;background:var(--text);color:var(--bg);font-size:11.5px;font-weight:600;
padding:6px 9px;border-radius:7px;z-index:var(--z-popover);opacity:0;transform:translate(-50%,-100%) translateY(-8px);transition:opacity .1s;
white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.bd-tooltip.show{opacity:1;}
.bd-tooltip .tt-sub{opacity:.7;font-weight:500;}
.aw-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aw-chip { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: .15s; white-space: nowrap; }
.aw-chip:hover { border-color: var(--accent); color: var(--text); }
.aw-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
/* PROGRESS */
.progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: var(--accent); }
/* MINI STAT */
.mini-stat { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mini-stat:last-child { border-bottom: none; }
/* ALERT */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.alert-red { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.alert-yellow { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #fcd34d; }
/* NAV ACCORDION */
.nav-group-hd { display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer; font-size: 13px; color: var(--muted); transition: background .15s; user-select: none; }
.nav-group-hd:hover { background: rgba(43,94,163,.08); }
.nav-group-hd .arrow { margin-left: auto; font-size: 10px; color: var(--muted); transition: transform .2s; display: inline-block; }
.nav-group-hd.open .arrow { transform: rotate(90deg); }
.sitemap-link { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; cursor:pointer; transition:.15s; border:1px solid var(--border); color:var(--text); }
.sitemap-link:hover { background: rgba(43,94,163,.15); border-color: var(--accent); color: var(--accent); }
.nav-sub { display: none; }
.nav-sub.open { display: block; }
.nav-sub .nav-item { padding-left: 32px; }
.nav-sub-label { padding: 6px 16px 2px 32px; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
/* 3섹션 아코디언 */
.nav-section-hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); transition: background .15s; user-select: none; border-top: 1px solid var(--border); }
.nav-section-hd:hover { background: rgba(43,94,163,.08); }
.nav-section-hd .sec-arrow { margin-left: auto; font-size: 10px; color: var(--muted); transition: transform .2s; display: inline-block; }
.nav-section-hd.open { color: var(--accent); }
.nav-section-hd.open .sec-arrow { transform: rotate(90deg); }
.nav-section-body { display: none; }
.nav-section-body.open { display: block; }
/* SIDEBAR BOTTOM */
.sidebar-foot { padding: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); flex-shrink:0; }
.sidebar-foot .admin-only { display:block; width:100%; box-sizing:border-box; margin-top:8px !important; }
.company-name { color: var(--text); font-weight: 600; font-size: 13px; }
/* INLINE CHART BARS */
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .7; transition: opacity .2s; }
.bar:hover { opacity: 1; }
/* CALENDAR */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.cal-hd { padding: 8px 6px; font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cal-hd.weekend { color: var(--danger); }
.cal-day { min-height: 88px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); vertical-align: top; position: relative; }
.cal-day.other-month { opacity: .3; }
.cal-day.today { background: rgba(43,94,163,.07); }
.cal-day-num { font-size: 12px; font-weight: 700; margin-bottom: 4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-day.today .cal-day-num { background: var(--accent); color: #fff; }
.cal-day.weekend-day .cal-day-num { color: var(--danger); opacity: .8; }
.cal-event { font-size: 10px; padding: 2px 5px; border-radius: 3px; margin-bottom: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; line-height: 1.4; }
.cal-event:hover { opacity: .8; }
.ev-prod { background: rgba(43,94,163,.25); color: #a5b4fc; }
.ev-haccp { background: rgba(34,197,94,.2); color: #4ade80; }
.ev-hr { background: rgba(245,158,11,.2); color: var(--warn); }
.ev-audit { background: rgba(239,68,68,.2); color: #f87171; }
.ev-etc { background: rgba(34,211,238,.15); color: var(--accent2); }
.ev-leave { background: rgba(168,85,247,.2); color: #c084fc; }
.ev-alert { background: rgba(239,68,68,.2); color: #f87171; font-weight: 700; }
.cal-day:not(.other-month) { cursor: pointer; transition: background .15s; }
.cal-day:not(.other-month):hover { background: rgba(43,94,163,.06); }
.db-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:1px 0; }
.db-cal-hd { font-size:10px; font-weight:600; color:var(--muted); text-align:center; padding:5px 0 6px; letter-spacing:.04em; }
.db-cal-hd.wd { color:var(--danger); opacity:.7; }
.db-cal-day { display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; font-weight:500; transition:background .1s; position:relative; padding:4px 0; }
.db-cal-day:not(.other-m):hover .db-day-n { background:rgba(43,94,163,.15); }
.db-day-n { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .1s; }
.db-cal-day.today-d .db-day-n { background:var(--accent); color:#fff; font-weight:700; }
.db-cal-day.has-ev::after { content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent2); opacity:.75; }
.db-cal-day.today-d.has-ev::after { background:#fff; }
.db-cal-day.other-m { opacity:.2; cursor:default; }
.db-cal-day.wd .db-day-n { color:var(--danger); opacity:.8; }
.db-ev-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:12px; }
.db-ev-row:last-child { border-bottom:none; }
.db-ev-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
/* CALENDAR MODAL — 반응형 팝업 */
.cal-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:var(--z-modal); align-items:flex-end; justify-content:center; }
.cal-modal-overlay.open { display:flex !important; }
/* Mobile: 바텀 시트 */
.cal-sheet { background:var(--surface); border-radius:16px 16px 0 0; padding:20px 20px 28px; width:100%; max-height:60vh; overflow-y:auto; border-top:1px solid var(--border); animation:slideUp .22s ease; }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
/* Tablet (768px+): 중앙 모달 */
@media(min-width:768px){
.cal-modal-overlay { align-items:center; }
.cal-sheet { border-radius:16px; width:440px; max-height:70vh; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,.45); animation:popIn .18s ease; }
}
/* Desktop (1024px+): 블러 백드롭 + 세련된 다이얼로그 */
@media(min-width:1024px){
.cal-modal-overlay { background:rgba(0,0,0,.35); }
.cal-sheet { width:380px; box-shadow:0 24px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); }
}
@keyframes popIn { from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }
.cal-sheet .ev-row { font-size:13px; padding:9px 14px; border-radius:7px; margin-bottom:7px; line-height:1.4; }
/* NUMBER BADGE */
.num-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 15px; background: rgba(43,94,163,.22); color: #a5b4fc; font-size: 9px; font-weight: 700; border-radius: 3px; padding: 0 3px; margin-right: 5px; font-family: 'Courier New', monospace; flex-shrink: 0; vertical-align: middle; line-height: 1; }
/* CHIP BUTTONS (click-select) */
.chip-btn { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; transition: all .15s; }
.chip-btn.active { background: rgba(43,94,163,.2); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip-btn:hover { border-color: var(--accent); color: var(--text); }
/* TOAST */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--success); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 13px; font-weight: 600; z-index: var(--z-toast); transition: transform .3s ease; white-space: nowrap; }
.toast.toast-error { background: var(--danger); }
.toast.toast-loading { background: var(--accent); }
.toast.show { transform: translateX(-50%) translateY(0); }
/* HAMBURGER */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all .2s; }
/* OVERLAY */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: var(--z-menu); }
.overlay.open, #modal-po-create:not(.hidden) { display: flex; align-items: center; justify-content: center; }
.overlay.hidden, #modal-po-create.hidden { display: none !important; }
/* TABLE SCROLL WRAPPER */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 카드뷰 인프라 — 모바일(≤767px) 테이블 → 카드 (data-label 있는 경우) */
@media(max-width:767px){
.card-tbl thead{display:none;}
.card-tbl tr{display:block;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;padding:6px 0;background:var(--surface);}
.card-tbl td{display:flex;justify-content:space-between;align-items:baseline;padding:6px 14px;font-size:13px;border:none;}
.card-tbl td::before{content:attr(data-label);color:var(--muted);font-size:11px;font-weight:600;white-space:nowrap;margin-right:10px;flex-shrink:0;}
.card-tbl td:empty{display:none;}
}
/* 대량 조회 그리드(기준정보·작업자·인사·근태현황·사용자관리) 전용 — 표 영역만 자체 스크롤,
제목·검색창·열도구·컬럼헤더는 화면 스크롤과 무관하게 항상 보이도록(대표 피드백 2026-08-05) */
#screen-master .table-wrap, #screen-man .table-wrap,
#screen-attendance-list .table-wrap, #screen-users .table-wrap { max-height: calc(100vh - 400px); overflow-y: auto; }
/* 다열 기준정보 표: 열을 압축하지 않고 표 영역에서 가로 스크롤 */
/* max-content는 펼침 행의 width:100% 내부표와 순환 계산되어 표 폭이 비정상적으로 커질 수 있다.
표는 화면 폭을 기준으로 두고, gSyncMin이 열 합계만큼의 안전한 최소폭을 부여한다. */
#screen-master #master-table { width:100%; min-width:100%; table-layout:auto; }
.ship-drill-content { width:min(100%,1200px); overflow-x:auto; }
/* 관계법령은 .form-group 밖의 독립 입력칸이라 브라우저 기본 높이(약 18px)가 노출됐다.
제목·검색·날짜·분류를 동일한 40px 입력 기준으로 맞춘다. */
#screen-legal input:not([type="checkbox"]):not([type="radio"]), #screen-legal select {
box-sizing:border-box; min-height:40px; padding:9px 12px; line-height:20px;
font:inherit;
}
#screen-legal .legal-alert-form .btn { min-height:40px; }
#screen-hr .table-wrap { max-height: calc(100vh - 300px); overflow-y: auto; }
#screen-master thead th, #screen-man thead th, #screen-hr thead th,
#screen-attendance-list thead th, #screen-users thead th { position: sticky; top: 0; background: var(--surface); z-index: var(--z-sticky); }
/* 작업자 급여 폭포수 — 직원 요약 → 카테고리 → 조회 상세. 월별 수기 입력은 접힘 밖에 상시 노출. */
.pr-waterfall-list { display:grid; gap:12px; }
.pr-employee { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.pr-employee-summary { display:flex; align-items:center; gap:18px; padding:15px 18px; border-left:4px solid var(--accent); background:rgba(43,94,163,.055); }
.pr-employee-person { flex:1; min-width:150px; }
.pr-employee-name { font-size:15px; font-weight:800; color:var(--text); }
.pr-employee-meta { margin-top:3px; font-size:10.5px; color:var(--muted); }
.pr-employee-totals { display:flex; align-items:center; gap:22px; }
.pr-summary-metric { min-width:108px; text-align:right; }
.pr-summary-label { display:block; margin-bottom:2px; font-size:10px; color:var(--muted); }
.pr-summary-value { font-size:14px; font-weight:800; color:var(--text); }
.pr-summary-value.net { color:var(--accent2); font-size:16px; }
.pr-categories { display:grid; gap:8px; padding:10px; background:var(--bg); }
.pr-category { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.pr-category-head { display:flex; align-items:center; gap:10px; padding:11px 13px; border-left:3px solid var(--accent2); cursor:pointer; user-select:none; transition:background .15s; }
.pr-category-head:hover,.pr-category-head.open { background:rgba(43,94,163,.09); }
.pr-category-arrow { font-size:9px; color:var(--accent); transition:transform .2s; }
.pr-category-arrow.open { transform:rotate(90deg); }
.pr-category-title { flex:1; font-size:12.5px; font-weight:800; color:var(--text); }
.pr-category-total { text-align:right; }
.pr-category-total .pr-summary-label { margin:0; }
.pr-category-total .pr-summary-value { font-size:13px; }
.pr-category-detail { display:none; padding:11px 13px; border-top:1px solid var(--border); }
.pr-category-detail.open { display:block; }
.pr-value-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:8px; }
.pr-value-item { min-width:0; padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); }
.pr-value-label { display:flex; align-items:flex-start; justify-content:space-between; gap:4px; min-height:17px; font-size:10.5px; color:var(--muted); }
.pr-value-number { margin-top:4px; font-size:13px; font-weight:700; color:var(--text); text-align:right; overflow-wrap:anywhere; }
.pr-edit-always { padding:0 13px 12px; border-top:1px solid var(--border); background:rgba(43,94,163,.025); }
.pr-edit-title { padding:9px 0 7px; font-size:10px; font-weight:700; color:var(--muted); }
.pr-edit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,210px)); gap:8px; }
.pr-edit-field { display:grid; grid-template-columns:minmax(64px,1fr) minmax(84px,110px); align-items:center; gap:8px; }
.pr-edit-field label { font-size:11px; font-weight:700; color:var(--text); }
.pr-edit-field .cell-input { width:100%; min-width:0; padding:7px 8px; text-align:right; background:var(--surface); }
.pr-empty { padding:28px 16px; text-align:center; color:var(--muted); }
/* 상단 알림 벨 — 내가 처리해야 할 결재·회람·최근 공문 */
.notif-wrap { position: relative; display: flex; align-items: center; }
.notif-btn { position: relative; background: transparent; border: none; font-size: 17px; line-height: 1;
cursor: pointer; padding: 5px 7px; border-radius: 8px; color: var(--text); }
.notif-btn:hover { background: rgba(43,94,163,.14); }
.notif-btn.has-new { animation: notifRing 2.4s ease-in-out infinite; }
@keyframes notifRing { 0%,88%,100%{transform:none} 90%{transform:rotate(-13deg)} 93%{transform:rotate(11deg)} 96%{transform:rotate(-6deg)} }
.notif-count { position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
line-height: 16px; text-align: center; }
.notif-panel { display: none; position: absolute; top: calc(100% + 9px); right: 0; width: 340px;
max-height: 62vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; box-shadow: 0 14px 36px rgba(0,0,0,.30); z-index: var(--z-popover); }
.notif-panel.open { display: block; }
.notif-head { display:flex; align-items:center; justify-content:space-between; padding: 11px 14px;
border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--muted);
position: sticky; top: 0; background: var(--surface); }
.notif-refresh { background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:0 2px; }
.notif-refresh:hover { color: var(--accent); }
.notif-group { padding: 9px 14px 5px; font-size: 10.5px; font-weight: 700; color: var(--accent);
letter-spacing: .03em; background: rgba(43,94,163,.06); }
.notif-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none;
border-top: 1px solid var(--border); background: transparent; cursor: pointer; font-family: inherit; }
.notif-item:hover { background: rgba(43,94,163,.10); }
.notif-title { font-size: 12.5px; color: var(--text); font-weight: 600; }
.notif-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.notif-empty { padding: 28px 14px; text-align: center; font-size: 12px; color: var(--muted); }
/* 급여대장 구분 탭 — 귀속월 줄 바로 아래 */
.pr-tabs { display:flex; gap:4px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); flex-wrap:wrap; }
.pr-tab { padding:7px 16px; border:1px solid var(--border); border-radius:8px; background:transparent;
color:var(--muted); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:all .12s; }
.pr-tab:hover { color:var(--text); border-color:var(--accent); }
.pr-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
/* 급여 열 출처 뱃지 — 근태/인사 기준정보 어디서 수정하는 값인지 헤더에 표시 */
.pr-src { display:block; margin-top:3px; font-size:9.5px; font-weight:600; letter-spacing:0; text-transform:none; cursor:pointer; }
.pr-src-att { color:#8b5cf6; }
.pr-src-hr { color:#2b5ea3; }
.pr-src:hover { text-decoration:underline; }
/* ── MOBILE ── */
@media (max-width: 768px) {
body { font-size: 13px; }
.pr-employee-summary { align-items:flex-start; gap:12px; padding:13px 14px; }
.pr-employee-totals { flex-direction:column; align-items:flex-end; gap:7px; }
.pr-summary-metric { min-width:100px; }
.pr-employee-totals .pr-summary-metric:first-child { display:none; }
.pr-categories { padding:8px; }
.pr-category-head { padding:11px; }
.pr-value-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pr-edit-grid { grid-template-columns:1fr; }
/* Sidebar: slide-in drawer */
.sidebar {
position: fixed; left: -100%; top: 0; height: 100%; z-index: var(--z-drawer);
transition: left .25s ease; width: 260px;
}
.sidebar.open { left: 0; }
/* Main fills full width */
.main { width: 100%; }
/* Topbar & Header 390px Overflow Fix */
.topbar { padding: 0 10px; height: 48px; gap:6px; }
.page-title { font-size: 13.5px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.erp-company-tabs { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.erp-company-tabs::-webkit-scrollbar { display: none; }
.erp-company-tab { padding:0 5px; font-size:11px; min-height: 44px; display: inline-flex; align-items: center; }
.hamburger { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.notif-btn, .theme-toggle { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.content { padding: 16px 12px; padding-bottom: 96px !important; }
/* 미니달력 위젯 — 모바일에서는 본문 아래로 쌓임 */
.erp-main-layout { flex-direction: column; }
.content-calendar { width: 100%; flex: 0 0 auto; }
.calendar-widget-card { position: static; }
.cw-nav-btn { width: 36px; height: 36px; }
#screen-master .table-wrap, #screen-man .table-wrap,
#screen-attendance-list .table-wrap, #screen-users .table-wrap {
max-height: calc(100vh - 260px);
}
/* Grids collapse */
.g2, .g3, .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Cards */
.card { padding: 14px; border-radius: 8px; }
.kpi-value { font-size: 22px; }
@media (max-width: 390px) {
.g2, .g3, .g4, .g5 { grid-template-columns: 1fr; }
.content { padding: 12px 8px; }
.kpi-value { font-size: 20px; }
.card { padding: 12px; }
/* ️ Defect 2 Fix: 390px Mobile Table Horizontal Overflow Optimization */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#mrpTable th, #mrpTable td, #poTable th, #poTable td { padding: 6px 4px; font-size: 11px; }
#mrpTable .hide-mobile, #poTable .hide-mobile { display: none !important; }
.topbar { padding: 0 6px !important; gap: 4px !important; }
.page-title { font-size: 12.5px !important; max-width: 95px !important; }
.erp-company-tab { padding: 0 4px !important; font-size: 10px !important; }
.topbar-right { gap: 4px !important; }
}
/* Form grid → single column */
.form-grid { grid-template-columns: 1fr; gap: 12px; }
#approval-d-meta .form-grid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px 12px; }
.form-grid [style*="grid-column"] { grid-column: 1 !important; }
/* Buttons full width on forms */
.form-actions { display: flex; flex-direction: column; gap: 8px; }
.form-actions .btn { width: 100%; padding: 12px; font-size: 14px; }
/* Touch-friendly inputs */
.form-group input, .form-group select, .form-group textarea {
padding: 11px 12px; font-size: 16px; /* prevents iOS zoom */
}
.btn { min-height: 44px; }
/* Section headers */
.sec-head { flex-wrap: wrap; gap: 10px; }
.sec-head .btn { width: 100%; }
.screen-context { align-items:stretch; }
.screen-context .btn { width:100%; }
/* Alerts */
.alert { font-size: 12px; }
/* Calendar mobile */
.cal-day { min-height: 55px !important; padding: 4px !important; }
.cal-event { font-size: 9px !important; padding: 1px 3px !important; }
.cal-hd { font-size: 11px !important; padding: 6px 4px !important; }
/* Charts shorter */
.bar-chart { height: 60px; }
/* Hide topbar date on small screens */
.topbar-right span { display: none; }
/* Nav items bigger touch target */
.nav-item, .nav-group-hd { padding: 12px 16px; font-size: 14px; min-height: 44px; box-sizing: border-box; }
.nav-section-hd { min-height: 44px; box-sizing: border-box; }
.sidebar-foot button, .sidebar-foot a { min-height: 44px; box-sizing: border-box; }
}
@media (max-width: 480px) {
.g2, .g4, .g5 { grid-template-columns: 1fr; }
.kpi-value { font-size: 20px; }
}
.comp-num {
display: inline-block;
font-size: 9px;
font-weight: 700;
color: var(--accent);
background: rgba(43,94,163,.12);
border: 1px solid rgba(43,94,163,.25);
border-radius: 4px;
padding: 0 4px;
margin-right: 4px;
line-height: 16px;
vertical-align: middle;
font-family: "SF Mono", monospace;
letter-spacing: .3px;
}
/* SmartSelect — 직접 입력 */
.chip-custom { border-style: dashed !important; color: var(--accent) !important; opacity: .75; }
.chip-custom.active { opacity: 1; border-style: solid !important; }
.chip-custom-wrap { display: none; align-items: center; gap: 8px; margin-top: 8px; width: 100%; }
.chip-custom-input { flex: 1; padding: 10px 13px; border-radius: 10px; border: 1.5px solid var(--border); background: transparent; color: var(--text, var(--txt, #e2e8f0)); font-size: 14px; outline: none; }
.chip-custom-confirm { padding: 10px 16px; border-radius: 10px; border: none; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.chip-custom-confirm:active { opacity: .8; }
/* select에 붙는 직접입력 박스(.sel-custom-wrap)는 좁은 테이블 셀 안에서도 행 높이를 밀어내거나
옆 행과 겹치지 않도록 뜨는 형태로 오버라이드(2026-08-07 — 인사 기준정보 테이블편집에서 레이아웃 깨짐) */
.chip-custom-wrap.sel-custom-wrap { position: absolute; width: max-content; min-width: 180px; max-width: 260px; margin-top: 4px; z-index: var(--z-menu); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
table.tbl-modern td { position: relative; }
/* ===== 그리드 모던화 (신정기공 거래처 패턴 이식) ===== */
.data-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.data-search{flex:1;min-width:220px;padding:9px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:13px;transition:.15s;}
.data-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,94,163,.18);}
.data-count{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;}
.btn-sm{padding:6px 12px;font-size:12px;font-family:inherit;border-radius:7px;}
.table-wrap{overflow-x:auto;}
table.tbl-modern{width:100%;border-collapse:collapse;table-layout:fixed;}
table.tbl-modern th,table.tbl-modern td{text-align:center;vertical-align:middle;transition:background .12s;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text);}
table.tbl-modern.sales-drill-table th,table.tbl-modern.sales-drill-table td{padding:5px 8px;white-space:normal;word-break:break-word;} /* 매출 드릴다운 품목 표 — 가시화면 폭에 맞춰 줄바꿈 허용(대표 지시: 좌우 스크롤 없이 전부 보이도록) — .tbl-modern 기본 규칙보다 상세도를 높여 덮어씀 */
tr.ship-drill>td.sales-drill-cell{padding:0!important;background:rgba(43,94,163,.05);border-left:3px solid var(--accent);}
.sales-drill-viewport{position:sticky;left:0;width:calc(var(--master-viewport-width, 100%) - 3px);min-width:min(860px, 100%);max-width:calc(100vw - 320px);box-sizing:border-box;padding:10px 12px;overflow-x:auto;}
table.tbl-modern th{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;position:relative;}
/* 열 너비 조정 그립 — 헤더 우측 경계 드래그(더블클릭 = 해당 열 너비 초기화) */
.col-grip{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:var(--z-base);background:transparent;}
.col-grip::after{content:'';position:absolute;top:20%;right:4px;width:2px;height:60%;background:var(--border);border-radius:1px;transition:background .12s;}
.col-grip:hover::after{background:var(--accent);}
.col-grip.rz::after{background:var(--accent);}
table.tbl-modern tbody tr:not(.cli-add-row):hover td{background:rgba(43,94,163,.07);}
/* 생산실적 세부내역서 — 단일표(제품/원부포/인원/설비/유틸리티) */
table.prod-statement{table-layout:auto;}
table.prod-statement td{text-align:left;font-size:12.5px;padding:8px 12px;}
tr.prod-cat-hd td{background:var(--accent2);color:#fff;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:7px 12px;}
tr.prod-col-hd td{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px 6px;border-bottom:1px solid var(--border);}
td.prod-empty{color:var(--muted);font-size:11.5px;font-style:italic;}
tr.prod-add-row td{background:var(--bg);padding:8px 12px;}
.prod-sub{font-size:10.5px;color:var(--muted);margin-right:6px;white-space:nowrap;}
/* 2026-08-06 높이 일치 수정 — padding/font-size를 .cell-input(그리드 표준 입력칸)과 통일.
이전엔 padding 4px 6px·11.5px로 다른 데이터그리드 입력칸(9px 10px·12.5px)보다 눈에 띄게 낮았음. */
tr.prod-add-row input,tr.prod-add-row select{font-size:12.5px;padding:9px 10px;margin-right:4px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);}
tr.prod-add-row input[type="number"]{width:72px;}
tr.prod-add-row input[type="text"]{width:110px;}
.prod-cost-section{margin-bottom:8px;border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--surface)}
.prod-cost-section:last-child{margin-bottom:0}
.prod-cost-head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-left:4px solid var(--accent2);background:rgba(43,94,163,.05);cursor:pointer;user-select:none;transition:background .15s}
.prod-cost-head:hover,.prod-cost-head.open{background:rgba(43,94,163,.12)}
.prod-cost-title{flex:1;font-size:12px;font-weight:800;color:var(--text)}
.prod-cost-hint{font-size:10.5px;color:var(--muted)}
.prod-cost-arrow{font-size:10px;color:var(--accent);transition:transform .2s}
.prod-cost-arrow.open{transform:rotate(90deg)}
.prod-cost-detail{display:none;border-top:1px solid var(--border)}
.prod-cost-detail.open{display:block}
.prod-cost-quick{border-top:1px solid var(--border);background:var(--bg)}
.prod-cost-detail .table-wrap,.prod-cost-quick .table-wrap{border:0;border-radius:0}
.prod-cost-quick .prod-add-row input,.prod-cost-quick .prod-add-row select,.prod-cost-quick .prod-add-row .btn{vertical-align:middle}
@media(max-width:600px){
.prod-cost-head{align-items:center;padding:11px 12px}
.prod-cost-hint{display:none}
.prod-cost-quick .prod-sub{display:block;margin:0 0 6px}
.prod-cost-quick tr.prod-add-row input[type="number"],.prod-cost-quick tr.prod-add-row input[type="text"],.prod-cost-quick tr.prod-add-row select,.prod-cost-quick .prod-add-row .btn{box-sizing:border-box;width:calc(50% - 4px);min-width:0;margin:0 4px 6px 0}
}
/* 핀(고정) 열은 자체 불투명 배경이 있어 행 호버색이 안 먹음 → 스티키 셀도 호버색 강제(불투명 대체) */
:root{--stk-hover:#1b1c27;}
[data-theme="light"]{--stk-hover:#f3f3fe;}
tbody tr:hover td[style*="position:sticky"]{background:var(--stk-hover)!important;}
.cli-cell{overflow-wrap:break-word;word-break:break-word;}
.act-btn{background:rgba(255,255,255,.06);border:none;color:var(--muted);font-size:12px;padding:5px 11px;border-radius:6px;cursor:pointer;font-family:inherit;transition:.12s;}
.act-btn:hover{background:rgba(43,94,163,.15);color:var(--accent);}
.act-btn.edit{background:rgba(43,94,163,.16);color:var(--accent);} .act-btn.edit:hover{background:rgba(43,94,163,.26);color:var(--accent);}
.act-btn.form{background:rgba(34,211,238,.16);color:var(--accent2);} .act-btn.form:hover{background:rgba(34,211,238,.26);color:var(--accent2);}
.act-btn.del{background:rgba(239,68,68,.16);color:var(--danger);} .act-btn.del:hover{background:rgba(239,68,68,.26);color:var(--danger);}
[data-theme="light"] .act-btn{background:rgba(0,0,0,.05);}
.row-actions{display:flex;gap:5px;justify-content:center;}
tr.cli-add-row td{padding:0;border-bottom:none;}
.inline-add-trigger{display:flex;align-items:center;gap:8px;padding:12px 14px;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;}
.inline-add-trigger:hover{background:rgba(43,94,163,.09);}
/* 드릴다운 트리 스타일(펼침 토글 원형뱃지 + 자식행 트리라인) — 출하지시/작업지시/매출/재고유통기한별 공용 */
.tree-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-size:9px;line-height:1;background:transparent;flex:0 0 auto;vertical-align:middle;}
.tree-drill-row{position:relative;padding-left:22px!important;}
.tree-drill-row::before{content:'';position:absolute;left:8px;top:-1px;width:1px;background:var(--border);height:calc(50% + 2px);}
.tree-drill-row::after{content:'';position:absolute;left:8px;top:calc(50% + 1px);width:11px;height:1px;background:var(--border);}
.tree-drill-row:not(.tree-drill-last)::before{height:calc(100% + 2px);}
/* 재고 조회 드릴다운 수량 6열: 기본 균등폭(약 148px) 대신 절반인 74px 고정 */
#master-tbody .ship-drill .invexp-drill-qty{width:74px;min-width:74px;padding-left:6px;padding-right:6px;}
tr.editing td,tr.cli-erow td{padding:3px 5px;}
tr.editing td{background:rgba(43,94,163,.09)!important;}
tr.cli-erow td{background:rgba(43,94,163,.04);}
.cell-input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font-size:12.5px;font-family:inherit;}
.cell-input:focus{outline:none;box-shadow:0 0 0 2px rgba(43,94,163,.22);}
input[type="number"]{appearance:textfield;-moz-appearance:textfield;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.inline-actions{display:flex;gap:5px;justify-content:center;}
.inline-actions button{padding:6px 11px;border-radius:7px;border:none;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;}
.inline-actions .ia-save{background:var(--accent);color:#fff;}
.inline-actions .ia-cancel{background:rgba(255,255,255,.1);color:var(--muted);}
[data-theme="light"] .inline-actions .ia-cancel{background:rgba(0,0,0,.06);}
.col-picker{position:relative;}
.sf-lb{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:600;}
/* 항목 선택 창 = 기준값 × 1.5 (대표 지시 2026-07-30 · 가로·세로 1.5배). 배율 변경 시 아래 6줄만 조정 */
.col-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:11px;z-index:var(--z-menu);min-width:261px;max-height:480px;overflow:auto;max-width:min(94vw,1000px);}
.col-menu.open{display:block;}
.col-menu.cols2.open{display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,auto);gap:0 6px;min-width:auto;}
.col-menu label{display:flex;align-items:center;gap:12px;padding:9px 12px;font-size:18px;color:var(--text);border-radius:10px;cursor:pointer;white-space:nowrap;}
.col-menu label input[type="checkbox"]{width:21px;height:21px;flex:0 0 auto;cursor:pointer;}
.col-menu label .col-pin{cursor:pointer;margin-left:auto;font-size:21px;line-height:1;}
.col-menu label:hover{background:rgba(43,94,163,.1);}
/* 정적 목업표 조회 모던화(중앙정렬·hover, DB없음→스타일만) */
table.tbl-view{width:100%;border-collapse:collapse;}
table.tbl-view th,table.tbl-view td{text-align:center;vertical-align:middle;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text);}
table.tbl-view th{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
table.tbl-view tbody tr:hover td{background:rgba(43,94,163,.05);}
/* 생산실적 어코디언 스타일 — L1(카테고리) L2(품목) L3(LOT) */
.wo-perf-acc{margin-bottom:8px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.wo-l1{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;user-select:none;transition:background .15s;background:var(--surface)}
.wo-l1:hover{background:rgba(43,94,163,.08)}
.wo-l1.open{background:rgba(43,94,163,.12)}
.wo-l1-icon{font-size:16px;width:24px;text-align:center;flex-shrink:0}
.wo-l1-name{font-size:13px;font-weight:700;color:var(--text);flex:1}
.wo-l1-rate{display:flex;align-items:center;gap:10px}
.wo-bar{flex:1;height:6px;background:rgba(43,94,163,.1);border-radius:3px;min-width:80px;max-width:120px;overflow:hidden}
.wo-bar-fill{height:100%;border-radius:3px;transition:width .3s}
.wo-bar-ok{background:#059669}.wo-bar-warn{background:#d97706}.wo-bar-danger{background:#dc2626}.wo-bar-over{background:#7c3aed}
.wo-pn{display:flex;gap:16px;min-width:140px}
.wo-pn-item{text-align:right;min-width:60px;font-size:12px}
.wo-pn-l{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:600}
.wo-pn-v{font-size:13px;font-weight:700}
.wo-rate-badge{font-size:11px;padding:3px 10px;border-radius:8px;font-weight:700;min-width:50px;text-align:center;flex-shrink:0}
.wo-rate-ok{background:#064e3b;color:#6ee7b7}.wo-rate-warn{background:#422006;color:#fcd34d}.wo-rate-danger{background:#7f1d1d;color:#fca5a5}.wo-rate-over{background:#3b0764;color:#d8b4fe}.wo-rate-na{background:rgba(43,94,163,.1);color:var(--muted)}
.wo-l1-arrow{font-size:10px;color:var(--muted);transition:transform .2s;width:14px;flex-shrink:0}
.wo-l1-arrow.open{transform:rotate(90deg)}
.wo-l2-wrap{display:none;background:rgba(43,94,163,.04)}
.wo-l2-wrap.open{display:block}
.wo-l2-hdr{display:flex;gap:8px;padding:7px 16px 7px 42px;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);background:rgba(43,94,163,.06)}
.wo-l2{display:flex;align-items:center;gap:8px;padding:10px 16px 10px 42px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.wo-l2:last-of-type{border-bottom:none}
.wo-l2:hover{background:rgba(43,94,163,.08)}
.wo-l2.open{background:rgba(43,94,163,.1)}
.wo-l2-arrow{font-size:9px;color:var(--muted);transition:transform .2s;width:12px;flex-shrink:0}
.wo-l2-arrow.open{transform:rotate(90deg);color:var(--accent)}
.wo-l2-name{font-size:12px;color:var(--text);flex:1;font-weight:600}
.wo-l2-nums{display:flex;gap:12px;min-width:180px}
.wo-l2n{text-align:right;min-width:60px;font-size:11px}
.wo-l2n-l{font-size:8px;color:var(--muted);text-transform:uppercase;font-weight:600}
.wo-l2n-v{font-size:12px;font-weight:700}
.wo-l3-wrap{display:none;background:rgba(0,0,0,.1)}
.wo-l3-wrap.open{display:block}
.wo-l3-hdr{display:flex;gap:8px;padding:6px 16px 6px 60px;font-size:8px;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--border);font-weight:600}
.wo-l3-row{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 60px;border-bottom:1px solid var(--border);font-size:11px}
.wo-l3-row:last-child{border-bottom:none}
.wo-lot-code{font-family:monospace;color:var(--accent);min-width:110px;font-size:11px}
.wo-l3v{text-align:right;min-width:60px;color:var(--muted);font-size:11px}
.wo-l3v.actual{color:var(--accent2);font-weight:700}
/* 완제품 LOT는 헤더·행을 같은 grid로 고정 → 열 기준선 일치 */
.wo-product-l3-grid{display:grid;grid-template-columns:64px minmax(180px,1.5fr) repeat(4,minmax(110px,1fr));gap:0;width:100%;text-align:center;}
.wo-l3-hdr.wo-product-l3-grid{font-size:11px;}
.wo-product-l3-grid .wo-lot-code,.wo-product-l3-grid .wo-l3v{min-width:0;text-align:center;}
.wo-product-l3-grid.wo-l3-row{cursor:pointer;}
.wo-product-l3-grid.wo-l3-row:hover{background:rgba(43,94,163,.08);}
/* 생산계획(작업지시) 대시보드 — KPI카드 대신 월별 상태별 막대그래프 + 상태 비중 도넛(2026-08-12 디자인 피드백) */
.wo-month-chart{display:flex;align-items:flex-end;gap:6px;height:170px;padding:4px 2px 0}
.wo-month-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:0;cursor:pointer;padding:3px 2px;border-radius:6px;transition:all .15s}
.wo-month-col:hover{background:rgba(43,94,163,.06)}
.wo-month-col.is-selected{background:rgba(43,94,163,.1);outline:1.5px solid var(--accent2);outline-offset:1px}
.wo-month-total{font-size:10px;font-weight:700;color:var(--text);margin-bottom:3px;font-variant-numeric:tabular-nums;line-height:1}
.wo-month-bar{width:100%;max-width:28px;display:flex;flex-direction:column-reverse;border-radius:4px 4px 0 0;overflow:hidden;background:var(--border)}
.wo-month-seg{width:100%;flex-basis:0;transition:filter .12s;cursor:pointer}
.wo-month-seg:hover{filter:brightness(1.15)}
.wo-month-lbl{margin-top:5px;font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.wo-chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.wo-chart-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text)}
.wo-chart-legend-sw{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.wo-pie-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.wo-pie-center-total{font-size:22px;font-weight:800;fill:var(--text)}
.wo-pie-center-lbl{font-size:10px;fill:var(--muted);font-weight:600}
.wo-pie-legend{display:flex;flex-direction:column;gap:10px;flex:1;min-width:140px}
.wo-pie-legend-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.wo-pie-legend-sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.wo-pie-legend-name{color:var(--text);font-weight:600;min-width:44px}
.wo-pie-legend-val{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
/* BOM 폭포수 어코디언 — L1 제품합계 → L2 카테고리소계 → L3 기존 재료행 */
.bom-waterfall-summary{display:flex;align-items:center;gap:14px;padding:15px 18px;margin-bottom:8px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:11px;background:var(--surface);cursor:pointer;user-select:none;transition:background .15s}
.bom-waterfall-summary:hover,.bom-waterfall-summary.open{background:rgba(43,94,163,.09)}
.bom-waterfall-title{font-size:14px;font-weight:800;color:var(--text);flex:1}
.bom-waterfall-values{display:flex;gap:22px;align-items:center}
.bom-waterfall-metric{text-align:right;min-width:110px}
.bom-waterfall-label{display:block;font-size:10px;color:var(--muted);margin-bottom:2px}
.bom-waterfall-value{font-size:15px;font-weight:800;color:var(--accent2)}
.bom-waterfall-arrow{font-size:11px;color:var(--accent);transition:transform .2s}
.bom-waterfall-arrow.open{transform:rotate(90deg)}
.bom-category-row{cursor:pointer;background:rgba(43,94,163,.04)}
.bom-category-row:hover td,.bom-category-row.open td{background:rgba(43,94,163,.1)!important}
.bom-category-row td:first-child{border-left:3px solid var(--accent)}
.bom-category-name{text-align:left!important;font-weight:800!important;padding-left:24px!important}
.bom-category-arrow{display:inline-block;margin-right:9px;font-size:10px;color:var(--accent);transition:transform .2s}
.bom-category-arrow.open{transform:rotate(90deg)}
.bom-ingredient-row{display:none}
.bom-ingredient-row.open{display:table-row}
.bom-ingredient-row td:first-child{border-left:3px solid var(--success)}
/* 재고 현황 폭포수 어코디언 — L1 총계 → L2 상태별 소계 → L3 기존 SKU 행 */
.inv-waterfall-summary{display:flex;align-items:center;gap:14px;padding:15px 18px;margin-bottom:8px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:11px;background:var(--surface);cursor:pointer;user-select:none;transition:background .15s}
.inv-waterfall-summary:hover,.inv-waterfall-summary.open{background:rgba(43,94,163,.09)}
.inv-waterfall-title{flex:1;font-size:14px;font-weight:800;color:var(--text)}
.inv-waterfall-values{display:flex;align-items:center;gap:22px}
.inv-waterfall-metric{min-width:110px;text-align:right}
.inv-waterfall-label{display:block;margin-bottom:2px;font-size:10px;color:var(--muted)}
.inv-waterfall-value{font-size:15px;font-weight:800;color:var(--accent2)}
.inv-waterfall-arrow{flex:0 0 auto;font-size:11px;color:var(--accent);transition:transform .2s}
.inv-waterfall-arrow.open{transform:rotate(90deg)}
.inv-status-list{display:none}
.inv-status-list.open{display:block}
.inv-status-row{cursor:pointer;background:rgba(43,94,163,.04)}
.inv-status-row:hover td,.inv-status-row.open td{background:rgba(43,94,163,.1)!important}
.inv-status-row td:first-child{border-left:3px solid var(--accent)}
.inv-status-name{text-align:left!important;font-weight:800!important;padding-left:24px!important}
.inv-status-arrow{display:inline-block;margin-right:9px;font-size:10px;color:var(--accent);transition:transform .2s}
.inv-status-arrow.open{transform:rotate(90deg)}
.inv-sku-row{display:none}
.inv-sku-row.open{display:table-row}
.inv-sku-row td:first-child{border-left:3px solid var(--success)}
@media(max-width:600px){
.bom-waterfall-summary{align-items:flex-start;padding:13px 14px}
.bom-waterfall-values{gap:10px;flex-direction:column;align-items:flex-end}
.bom-waterfall-metric{min-width:100px}
.bom-category-name{padding-left:14px!important}
.inv-waterfall-summary{align-items:flex-start;padding:13px 14px}
.inv-waterfall-values{flex-direction:column;align-items:flex-end;gap:10px}
.inv-waterfall-metric{min-width:100px}
.inv-status-name{padding-left:14px!important}
}
/* CCP 일지 폭포수 어코디언 — L1 전체총계 → L2 CCP포인트 소계 → L3 기존 점검행 */
.ccp-waterfall-summary{display:flex;align-items:center;gap:14px;padding:15px 18px;margin-bottom:8px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:11px;background:var(--surface);cursor:pointer;user-select:none;transition:background .15s}
.ccp-waterfall-summary:hover,.ccp-waterfall-summary.open{background:rgba(43,94,163,.09)}
.ccp-waterfall-title{font-size:14px;font-weight:800;color:var(--text);flex:1}
.ccp-waterfall-values{display:flex;align-items:center;gap:22px}
.ccp-waterfall-metric{text-align:right;min-width:84px}
.ccp-waterfall-label{display:block;margin-bottom:2px;font-size:10px;color:var(--muted)}
.ccp-waterfall-value{font-size:15px;font-weight:800;color:var(--accent2)}
.ccp-waterfall-value.fail{color:var(--danger)}
.ccp-waterfall-arrow,.ccp-point-arrow{display:inline-block;font-size:10px;color:var(--accent);transition:transform .2s}
.ccp-waterfall-arrow.open,.ccp-point-arrow.open{transform:rotate(90deg)}
.ccp-point-row{cursor:pointer;background:rgba(43,94,163,.04)}
.ccp-point-row:hover td,.ccp-point-row.open td{background:rgba(43,94,163,.1)!important}
.ccp-point-row td:first-child{border-left:3px solid var(--accent)}
.ccp-point-name{text-align:left!important;font-weight:800!important;padding-left:24px!important}
.ccp-point-arrow{margin-right:9px}
.ccp-record-row{display:none}
.ccp-record-row.open{display:table-row}
.ccp-record-row td:first-child{border-left:3px solid var(--success)}
/* 근태 현황 폭포수 어코디언 — L1 기간총계 → L2 직원소계 → L3 기존 일자행 */
.att-waterfall-summary{display:flex;align-items:center;gap:14px;padding:15px 18px;margin-bottom:10px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:11px;background:var(--surface);cursor:pointer;user-select:none;transition:background .15s}
.att-waterfall-summary:hover,.att-waterfall-summary.open{background:rgba(43,94,163,.09)}
.att-waterfall-title{flex:1;min-width:150px;font-size:14px;font-weight:800;color:var(--text)}
.att-waterfall-period{display:block;margin-top:3px;font-size:10px;font-weight:600;color:var(--muted)}
.att-waterfall-values{display:flex;align-items:center;gap:22px}
.att-waterfall-metric{min-width:96px;text-align:right}
.att-waterfall-label{display:block;margin-bottom:2px;font-size:10px;color:var(--muted)}
.att-waterfall-value{font-size:15px;font-weight:800;color:var(--accent2)}
.att-waterfall-arrow,.att-employee-arrow{display:inline-block;flex:0 0 auto;font-size:10px;color:var(--accent);transition:transform .2s}
.att-waterfall-arrow.open,.att-employee-arrow.open{transform:rotate(90deg)}
.att-waterfall-list.is-collapsed .att-employee-row,.att-waterfall-list.is-collapsed .att-detail-row{display:none}
.att-waterfall-list.is-collapsed .att-detail-row.editing{display:table-row}
.att-employee-row{cursor:pointer;background:rgba(43,94,163,.04)}
.att-employee-row:hover td,.att-employee-row.open td{background:rgba(43,94,163,.1)!important}
.att-employee-row td:first-child{border-left:3px solid var(--accent)}
.att-employee-content{display:flex;align-items:center;gap:16px;min-height:24px;text-align:left}
.att-employee-name{flex:1;font-weight:800}
.att-employee-arrow{margin-right:9px}
.att-employee-meta{margin-left:7px;font-size:10px;font-weight:600;color:var(--muted)}
.att-employee-metrics{display:flex;align-items:center;justify-content:flex-end;gap:20px}
.att-employee-metric{font-size:11px;color:var(--muted);white-space:nowrap}
.att-employee-metric strong{margin-left:5px;font-size:12px;color:var(--text)}
.att-detail-row{display:none}
.att-detail-row.open,.att-detail-row.editing{display:table-row}
.att-detail-row td:first-child{border-left:3px solid var(--success)}
@media(max-width:600px){
.ccp-waterfall-summary{align-items:flex-start;gap:10px;padding:13px 14px}
.ccp-waterfall-values{flex-direction:column;align-items:flex-end;gap:7px}
.ccp-waterfall-metric{min-width:94px}
.ccp-point-name{padding-left:14px!important}
#ccp-point-list table{min-width:760px}
.att-waterfall-summary{align-items:flex-start;gap:10px;padding:13px 14px}
.att-waterfall-title{min-width:118px}
.att-waterfall-values{flex-direction:column;align-items:flex-end;gap:7px}
.att-waterfall-metric{min-width:92px}
.att-employee-content{gap:10px}
.att-employee-metrics{gap:12px}
#al2-table{min-width:760px}
}
/* 발주서 관리 폭포수 어코디언 — L1 전체총계 → L2 상태별 소계 → L3 기존 발주서 행 */
.po-waterfall-summary{display:flex;align-items:center;gap:14px;padding:15px 18px;margin-bottom:8px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:11px;background:var(--surface);cursor:pointer;user-select:none;transition:background .15s}
.po-waterfall-summary:hover,.po-waterfall-summary.open{background:rgba(43,94,163,.09)}
.po-waterfall-title{flex:1;font-size:14px;font-weight:800;color:var(--text)}
.po-waterfall-values{display:flex;align-items:center;gap:22px}
.po-waterfall-metric{min-width:96px;text-align:right}
.po-waterfall-label{display:block;margin-bottom:2px;font-size:10px;color:var(--muted)}
.po-waterfall-value{font-size:15px;font-weight:800;color:var(--accent2)}
.po-waterfall-arrow,.po-status-arrow{display:inline-block;flex:0 0 auto;font-size:10px;color:var(--accent);transition:transform .2s}
.po-waterfall-arrow.open,.po-status-arrow.open{transform:rotate(90deg)}
.po-status-list{display:none}
.po-status-list.open{display:block}
.po-status-row{cursor:pointer;background:rgba(43,94,163,.04)}
.po-status-row:hover td,.po-status-row.open td{background:rgba(43,94,163,.1)!important}
.po-status-row td:first-child{border-left:3px solid var(--accent)}
.po-status-name{text-align:left!important;font-weight:800!important;padding-left:24px!important}
.po-status-arrow{margin-right:9px}
.po-order-row{display:none}
.po-order-row.open{display:table-row}
.po-order-row td:first-child{border-left:3px solid var(--success)}
@media(max-width:600px){
.po-waterfall-summary{align-items:flex-start;gap:10px;padding:13px 14px}
.po-waterfall-values{flex-direction:column;align-items:flex-end;gap:7px}
.po-waterfall-metric{min-width:94px}
.po-status-name{padding-left:14px!important}
.po-status-list table{min-width:840px}
}