/* 에디터/문서 본문 표 스타일 */
.ql-editor table { border-collapse: collapse; width: auto; margin: 4px 0; }
/* 두 번째 선택자: 전역 'tr:last-child td{border-bottom:none}' 보다 우선시켜 마지막 행 하단 테두리 유지 */
.ql-editor table td,
.ql-editor table tr:last-child td {
border: 1px solid #94a3b8; padding: 5px 9px; min-width: 48px;
vertical-align: top; word-break: break-word;
}
/* 전역 tr:hover 배경이 에디터 표 셀을 덮지 않도록 (셀 배경색 인라인 스타일은 그대로 우선) */
.ql-editor table tr:hover td { background-color: transparent; }
/* 표 셀 우클릭 안내 (에디터 내부) */
.ql-container .ql-editor td { cursor: text; }
/* 표 칸 경계선 리사이즈 커서 (셀의 text 커서보다 우선) */
.ql-editor.tbl-col-resize, .ql-editor.tbl-col-resize td { cursor: col-resize !important; }
.ql-editor.tbl-row-resize, .ql-editor.tbl-row-resize td { cursor: row-resize !important; }
/* 합계 행 셀 강조 */
.ql-editor td[data-total] { font-weight: 600; background: #f8fafc; }
.ql-editor td[data-total="sum"] { text-align: right; color: #1e3a8a; }
/* 안내문(읽기전용) 필드 박스 — 기안 작성 시 표시 */
.dt-info-box {
white-space: pre-wrap; word-break: break-word;
background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;
padding: 12px 14px; font-size: 13.5px; color: #334155; line-height: 1.7;
}
/* 멤버 편집 모달 서브 라벨 (직책/직위/결재참여/조직도) */
.um-sub-label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; font-weight: 500; }
/* 멤버 편집 모달 섹션 구분 헤더 */
.um-section-title { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.um-section-title:first-child { margin-top: 4px; }
/* 대시보드 최근 문서 2단 (데스크탑: 기안 좌 / 결재 우, 모바일: 세로) */
.dash-recent-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* 대시보드 상단 결재/차량 탭 */
/* 결재/차량 탭 - 두 버튼을 하나로 붙인 세그먼트 컨트롤(한 줄, 컴팩트) */
.dash-tabs { display: inline-flex; gap: 0; margin-bottom: 12px; border: 1.5px solid var(--border); border-radius: 99px; overflow: hidden; background: var(--surface, #fff); }
.dash-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 24px; border: none; border-radius: 0; background: transparent; font-size: 13px; font-weight: 800; color: #6a7285; cursor: pointer; }
.dash-tab + .dash-tab { border-left: 1.5px solid var(--border); }
.dash-tab .icon { width: 15px; height: 15px; }
.dash-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 펼치기/접기 버튼: 데스크탑 숨김(전체 표시), 모바일만 노출 */
.dash-more-btn { display: none; width: 100%; padding: 9px; border: none; border-top: 1px solid var(--border); background: #fafafa; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; }
@media (max-width: 860px) {
.dash-recent-row { grid-template-columns: 1fr; }
.dash-more-btn { display: block; }
/* 모바일 기본: 최근 문서 2개만 표시 */
.dash-recent-card:not(.expanded) .doc-table tbody tr:nth-child(n+3) { display: none; }
/* 펼침: 최대 7개까지 (8개 이상 숨김) */
.dash-recent-card.expanded .doc-table tbody tr:nth-child(n+8) { display: none; }
}
/* 부팅 로딩 (새로고침 시 로그인 화면 깜빡임 방지) */
#boot-loading { display: none; position: fixed; inset: 0; z-index: 5; background: #fff; align-items: center; justify-content: center; }
html.booting #login-screen { display: none; }
html.booting #boot-loading { display: flex; }
:root {
--primary: #4169E1;
--primary-dark: #3457c9;
--primary-hover: #3457c9; /* 브랜드 로열블루 hover(진한 톤) */
--icon-bg: #eef1f6; /* 통계카드 아이콘 칩 배경(중립) */
--icon-fg: #5a6478; /* 통계카드 아이콘 라인(중립) */
--secondary: #6b7280;
--success: #057a55;
--danger: #c81e1e;
--warning: #9f580a;
--warn: #8a5a00;
--warn-bg: #fdf0d5;
--bg: #f9fafb;
--surface: #ffffff;
--border: #e5e7eb;
--text: #111827;
--text-muted: #6b7280;
--sidebar-width: 240px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans KR', -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
/* ── 레이아웃 ── */
#app { display: flex; height: 100vh; overflow: hidden; }
#sidebar {
width: var(--sidebar-width); background: #f4f6fb; color: #3a4152;
display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
padding: 0 12px 14px; border-right: 1px solid #e6e8ee;
}
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#header {
background: var(--surface); border-bottom: 1px solid var(--border);
padding: 0 24px; height: 56px; display: flex; align-items: center;
justify-content: space-between; flex-shrink: 0;
}
#content { flex: 1; overflow-y: auto; padding: 24px; }
/* ── 사이드바 (6c 블루 시안: 라이트 · 흰 카드 · 로열 블루 #4169E1) ── */
.sidebar-logo {
padding: 20px 8px 14px;
}
.sidebar-logo-img { display: block; width: 96px; height: auto; margin-bottom: 8px; }
.sidebar-logo-text { font-size: 13px; font-weight: 800; color: #232936; line-height: 1.3; }
.user-card {
padding: 12px; margin-bottom: 12px;
background: #fff; border: 1px solid #e9ecf2; border-radius: 12px;
display: flex; align-items: center; gap: 11px;
}
.user-avatar {
width: 38px; height: 38px; border-radius: 50%; background: #4169E1;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.user-info .name { font-size: 14px; font-weight: 800; color: #232936; }
.user-info .dept { font-size: 11.5px; color: #8a93a8; margin-top: 1px; }
.nav-section { padding: 0; }
/* 섹션 카드: 흰 배경 라운드 카드로 그룹 묶기 */
.nav-card { background: #fff; border: 1px solid #e9ecf2; border-radius: 14px; padding: 8px; margin-bottom: 12px; }
.nav-logout { margin-top: 2px; }
.nav-label { font-size: 11px; font-weight: 800; color: #a2aab9; letter-spacing: .08em; padding: 4px 8px 8px; }
.nav-label-fav { color: #d99815; letter-spacing: normal; }
/* 섹션 안에서 메뉴 묶음을 가르는 선. 양옆에 보이는 메뉴가 있을 때만 남는다(_navSyncDividers) */
.nav-divider { height: 1px; background: #eef0f5; margin: 6px 8px; }
.nav-item {
display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 9px;
cursor: pointer; transition: background .15s, color .15s;
font-size: 13px; font-weight: 700; color: #3a4152; text-decoration: none;
}
.nav-item:hover { background: #f0f2f7; color: #232936; }
.nav-item.active { background: #eef2ff; color: #3149c4; font-weight: 800; }
.nav-item.active .nav-icon .icon { stroke: var(--primary); }
.nav-item .nav-icon { font-size: 16px; width: 18px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .nav-icon .icon { width: 16px; height: 16px; stroke: #8a93a8; }
.nav-badge {
margin-left: auto; background: #e5484d; color: #fff;
font-size: 11px; font-weight: 800; min-width: 20px; height: 20px;
border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.nav-logout .nav-item { color: #8a93a8; }
.nav-logout .nav-item:hover { background: #fdeeee; color: #d64545; }
/* ── 즐겨찾기 별 ── */
.nav-fav-star { margin-left: auto; opacity: 0; color: #c2c8d4; font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; flex: 0 0 auto; transition: opacity .12s, color .12s; }
.nav-item:hover .nav-fav-star { opacity: .6; }
.nav-fav-star:hover { opacity: 1 !important; color: #f0b429; }
.nav-fav-star.on { opacity: 1; color: #f0b429; }
.nav-fav-item .nav-fav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 즐겨찾기 편집 모드: 모든 별을 상시 노출 + 탭 영역 확대(모바일 대응) */
#sidebar.fav-edit .nav-fav-star { opacity: .75; padding: 4px 6px; font-size: 15px; }
#fav-edit-btn.on { color: #f0b429; }
/* 부서별 브리핑: 640px 고정폭 이메일 레이아웃을 모바일에서 화면 폭에 맞춰 축소(전체 보기) — JS(_fitBriefing)가 scale 지정 */
.db-scroll { overflow: hidden; text-align: center; }
#db-result .db-frame { display: block; margin: 0 auto; } /* 브리핑 iframe(고정 폭) 가운데 정렬 - 넓은 화면에서 좌측 치우침 방지 */
/* ── 드롭다운 메뉴 그룹 (라이트 카드 · 하위 트리는 좌측 보더 들여쓰기) ── */
.nav-group { justify-content: space-between; }
.nav-group .nav-caret { margin-left: auto; font-size: 11px; color: #b6bdca; transition: transform .2s; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-sub { display: none; overflow: hidden; margin: 2px 0 2px 11px; border-left: 1px solid #e6e8ee; padding-left: 4px; }
.nav-sub.open { display: block; }
.nav-subitem { padding: 6px 8px; font-size: 12.5px; font-weight: 700; color: #5a6273; }
.nav-subitem .nav-icon { width: 16px; }
.nav-subitem .nav-icon .icon { width: 14px; height: 14px; stroke: #9aa4bb; }
.nav-subitem:hover { background: #f0f2f7; color: #232936; }
/* 2단 그룹(전자결재): 하위 그룹 헤더도 하위 항목과 동일 정렬 */
.nav-sub > .nav-group { padding: 6px 8px; font-size: 12.5px; font-weight: 700; }
.nav-sub .nav-sub { margin-left: 8px; }
.nav-subitem.active { background: #eef2ff; color: #3149c4; font-weight: 800; }
.nav-subitem.active .nav-icon .icon { stroke: var(--primary); }
/* ── 헤더 ── */
.header-title { font-size: 16px; font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-badge {
position: absolute; top: -6px; right: -6px; background: #e02424; color: #fff;
font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px;
padding: 0 4px; display: flex; align-items: center; justify-content: center; line-height: 1;
}
/* ── 버튼 ── */
/* ── 버튼 줄바꿈 규칙 (전역) ──
좁은 화면(모바일)에서 버튼 글자가 두 줄이 될 때 한글이 '출/고'처럼 단어 중간에서 끊기던 문제.
한글은 기본 줄바꿈 규칙상 아무 글자에서나 끊기므로 keep-all로 단어를 지키고 띄어쓰기에서만 나눈다.
줄이 나뉘면 가운데 정렬한다. overflow-wrap은 띄어쓰기 없는 긴 문자열(URL 등)이 넘칠 때의 안전장치.
요소 셀렉터(0-0-1)라 클래스·인라인으로 정렬을 지정한 버튼(.um-org-btn, 표준결재선 등)은 그대로 우선한다. */
button { word-break: keep-all; overflow-wrap: break-word; text-align: center; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 8px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; font-family: inherit;
}
.btn .icon { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 6px -2px rgba(65,105,225,.55); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #046c4e; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #9b1c1c; }
.btn-outline { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* ── 라인 아이콘 ── */
.icon { width: 19px; height: 19px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
/* 양식 아이콘(formicon:) 래퍼 — 지정 크기에 맞춰 라인 SVG 채움 */
.dt-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.dt-ico-svg { width: 100%; height: 100%; display: block; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 22px; height: 22px; }
/* ── 카드 ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-header h3 { font-size: 14px; font-weight: 600; }
.card-body { padding: 20px; }
/* ── 통계 카드 ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
/* 차량 대시보드 기간 토글(오늘/어제/엊그제) */
.dv-period-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.dv-period-btn { border: none; background: transparent; height: 32px; padding: 0 14px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.dv-period-btn + .dv-period-btn { border-left: 1px solid var(--border); }
.dv-period-btn.active { background: var(--primary); color: #fff; }
.stat-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
padding: 8px 14px; display: flex; align-items: center; gap: 12px;
}
.stat-card.clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.stat-card.clickable:hover { border-color: var(--primary); box-shadow: 0 2px 10px -4px rgba(65,105,225,.4); }
/* 부서별 브리핑 조회일자 이전/다음 화살표 */
.db-date-nav { width: 34px; height: 38px; flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 8px; font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; }
.db-date-nav:hover { color: var(--primary); border-color: var(--primary); }
.stat-icon { font-size: 24px; width: 38px; height: 38px; border-radius: 10px; background: var(--icon-bg); color: var(--icon-fg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon .icon { width: 20px; height: 20px; }
.stat-value { font-size: 24px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* ── 테이블 ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: var(--bg); padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f9fafb; }
.clickable { cursor: pointer; }
/* 로딩 인디케이터: PARK 로고 채우기(공통) + 텍스트 */
.loading-inline { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #9ca3af; font-size: 12.5px; font-weight: 600; }
.park-fill-wrap.sm { width: 96px; }
.park-fill-wrap.xs { width: 52px; flex-shrink: 0; }
/* 연차 사용 이력 기간 필터: 세그먼트 그룹(전체 기간/이번달/지난달) */
.ll-seg { display: inline-flex; border: 1.5px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface, #fff); flex: none; }
.ll-seg .ll-month-btn { border: none; background: transparent; height: 36px; padding: 0 14px; font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.ll-seg .ll-month-btn + .ll-month-btn { border-left: 1px solid var(--border); }
.ll-seg .ll-month-btn.active { background: var(--primary); color: #fff; }
/* 제안·건의 게시판: 목록·버튼 안의 소형 라인 아이콘(공감·첨부) */
.sg-ic-sm { width: 14px; height: 14px; flex-shrink: 0; }
/* 공지사항 본문(노션 블록 → HTML) 타이포그래피 */
.notice-body { font-size: 14px; line-height: 1.75; color: var(--text); word-break: break-word; }
.notice-body p { margin: 0 0 6px; min-height: 8px; }
.notice-body h2 { font-size: 19px; margin: 20px 0 8px; }
.notice-body h3 { font-size: 16.5px; margin: 16px 0 7px; }
.notice-body h4 { font-size: 14.5px; margin: 13px 0 6px; }
.notice-body ul, .notice-body ol { margin: 4px 0 8px; padding-left: 22px; }
.notice-body li { margin: 2px 0; }
.notice-body blockquote { border-left: 3px solid var(--border); margin: 8px 0; padding: 4px 12px; color: #4a5262; }
.notice-body hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.notice-body .nb-indent { margin-left: 18px; }
.notice-body .nb-todo { display: flex; align-items: flex-start; gap: 7px; margin: 3px 0; }
.notice-body .nb-todo input { margin-top: 4px; }
.notice-body .nb-toggle { margin: 6px 0; }
.notice-body .nb-toggle summary { cursor: pointer; font-weight: 600; }
.notice-body .nb-callout { display: flex; gap: 9px; align-items: flex-start; border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.notice-body .nb-callout-ic { flex: none; }
.notice-body .nb-code { background: #f1f5f9; border-radius: 4px; padding: 1px 5px; font-size: 12.5px; color: #be185d; }
.notice-body .nb-pre { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: 12.5px; margin: 8px 0; }
.notice-body .nb-pre .nb-lang { font-size: 11px; color: #94a3b8; margin-bottom: 6px; }
.notice-body .nb-fig { margin: 10px 0; }
.notice-body .nb-fig img { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); }
.notice-body .nb-fig figcaption { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.notice-body .nb-file { margin: 6px 0; font-size: 13.5px; }
.notice-body .nb-file a { color: #4169E1; text-decoration: none; }
.notice-body .nb-file a:hover { text-decoration: underline; }
.notice-body .nb-tablewrap { overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch; }
.notice-body .nb-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.notice-body .nb-table th, .notice-body .nb-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
/* 모바일: 표를 좁게 접지 않고 최소 폭 확보 후 가로 스크롤(셀 줄바꿈 최소화로 가독성 향상) */
@media (max-width: 640px) {
.notice-body .nb-table { width: auto; min-width: 560px; }
.notice-body .nb-table th, .notice-body .nb-table td { white-space: normal; word-break: break-word; }
}
.notice-body .nb-table th { background: #f9fafb; font-weight: 700; }
.notice-body .nb-cols { display: flex; gap: 18px; flex-wrap: wrap; }
.notice-body .nb-cols .nb-col { flex: 1; min-width: 220px; }
.notice-body a { color: #4169E1; }
/* 한 줄(가로) 로딩: PARK 미니 로고 + 문구 - 카드/버튼/행 안의 컴팩트 진행 표시 공용 */
.loading-row { display: inline-flex; align-items: center; gap: 8px; color: #9ca3af; font-size: 12.5px; font-weight: 600; }
.loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: loading-spin .7s linear infinite; flex-shrink: 0; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
/* ── 배지 ── */
.badge {
display: inline-flex; align-items: center; padding: 2px 8px;
border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-pending { background: #fff8e6; color: #92400e; border: 1px solid #fcd34d; }
.badge-approved { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-rejected { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-recalled { background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }
.badge-waiting { background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }
.badge-type { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
/* ── 폼 ── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.form-label .required { color: #e02424; margin-left: 2px; }
.form-control {
width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
font-size: 13px; font-family: inherit; background: var(--surface);
transition: border-color .15s; outline: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(65,105,225,.1); }
/* select 펼침 목록(네이티브 팝업)은 color-scheme 상속만으론 브라우저에 따라 라이트로 남는 경우가 있어 옵션에 직접 지정 */
select.form-control option { background: var(--surface); color: var(--text); }
/* select에 height를 인라인으로 주면 상속된 line-height(1.7)+상하 패딩이 겹쳐 글자 아래가 잘렸다.
line-height는 낮춰 세로 중앙에 오게 하되 1로 누르면 한글(약 1.2em)이 위아래로 잘려 1.3으로 둔다.
화살표 자리를 위해 우측 패딩을 넉넉히 둔다. */
/* padding-right만 !important다. 화면마다 인라인으로 `padding:4px 8px` 같은 단축형을 주는데,
단축형이 이 값을 8px로 덮으면 화살표가 글자 위에 겹쳐 그려진다(실제로 '입고일시'가 그랬다).
화살표 자리는 디자인 선택이 아니라 이 배경 이미지를 쓰는 한 반드시 있어야 하는 공간이라
인라인보다 우선한다. 좌/상/하 패딩은 그대로 화면이 정한다. */
select.form-control {
line-height: 1.3; -webkit-appearance: none; appearance: none; padding-right: 30px !important; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
}
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* ── 결재선 설정 ── */
.approval-line { display: flex; flex-direction: column; gap: 8px; }
.approval-step {
display: flex; align-items: center; gap: 10px;
background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px;
}
.step-num {
width: 24px; height: 24px; border-radius: 50%; background: var(--primary);
color: #fff; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-info { flex: 1; }
.step-info select { width: 100%; }
.step-arrow { color: var(--text-muted); font-size: 18px; }
.btn-remove-step { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 18px; padding: 0; }
/* ── 문서 상세 ── */
.doc-header {
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
padding: 20px; margin-bottom: 16px;
}
/* 문서 헤더 행: 본문(좌, 가변) + 결재란(우, 고정) — 제목 길이와 무관하게 결재란 위치 고정 */
.doc-head-row { display: flex; gap: 16px; align-items: flex-start; }
.doc-head-main { flex: 1 1 auto; min-width: 0; } /* 제목이 길면 이 안에서 줄바꿈, 결재란은 안 밀림 */
.appr2-grid { flex: 0 0 auto; }
/* 결재란(도장 grid) — 화면·인쇄 공통 */
.appr2-grid { display: flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.appr2-col { display: flex; flex-direction: column; min-width: 64px; border-left: 1px solid #e2e8f0; text-align: center; }
.appr2-col:first-child { border-left: none; }
.appr2-kind { font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 4px 6px; border-bottom: 1px solid #e2e8f0; }
.appr2-kind.t-draft { background: #f1f5f9; color: #475569; }
.appr2-kind.t-agree { background: #fffbeb; color: #b45309; }
.appr2-kind.t-appr { background: #eff6ff; color: #1e40af; }
.appr2-stamp { height: 56px; display: flex; align-items: center; justify-content: center; padding: 5px; }
.appr2-mark {
width: 48px; height: 48px; border-radius: 50%; border: 2px solid #d11; color: #d11;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11px; letter-spacing: -0.3px; line-height: 1;
font-family: 'Noto Serif KR', serif; print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.appr2-reject { color: #d11; font-weight: 700; font-size: 12px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.appr2-wait { color: #cbd5e1; font-size: 11px; }
.appr2-foot { border-top: 1px solid #e2e8f0; padding: 4px 5px 5px; }
.appr2-name { font-size: 11px; font-weight: 600; color: #111; white-space: nowrap; }
.appr2-role { font-size: 9.5px; color: #94a3b8; white-space: nowrap; margin-top: 1px; }
.appr2-dt { font-size: 10px; color: #94a3b8; white-space: nowrap; line-height: 1.35; margin-top: 3px; }
/* 합의(협의) — 결재란 아래 텍스트만(테두리·라벨 없음) */
.appr2-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.appr2-agree-line { display: flex; align-items: center; gap: 7px; padding: 3px 0; justify-content: flex-end; }
.appr2-agree-ic { display: inline-flex; flex: 0 0 auto; color: #16a34a; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.appr2-agree-k { font-size: 11.5px; font-weight: 600; color: #d97706; flex: 0 0 auto; }
.appr2-agree-line.rejected .appr2-agree-ic { color: #d11; }
.appr2-agree-line.wait .appr2-agree-ic { color: #cbd5e1; }
.appr2-agree-nm { font-size: 12.5px; font-weight: 600; color: #111; white-space: nowrap; }
.appr2-agree-ro { font-size: 11.5px; font-weight: 500; color: #94a3b8; }
.appr2-agree-tm { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.appr2-agree-line.rejected .appr2-agree-tm { color: #d11; font-weight: 600; }
html[data-theme="dark"] .appr2-agree-nm { color: #e5e7eb; }
/* 결재란(도장) 다크 - @media screen으로 감싸 인쇄(PDF 출력)에는 새지 않게 한다.
결재란은 print-color-adjust:exact라 다크 색이 그대로 인쇄되면 용지가 검게 나온다.
도장 테두리·글자(#d11)는 다크에서도 그대로 - 붉은 인영은 어느 배경에서든 읽힌다. */
@media screen {
html[data-theme="dark"] .appr2-grid { background: var(--surface); border-color: var(--border); box-shadow: none; }
html[data-theme="dark"] .appr2-col { border-left-color: var(--border); }
html[data-theme="dark"] .appr2-kind { border-bottom-color: var(--border); }
html[data-theme="dark"] .appr2-kind.t-draft { background: #2a2f3a; color: #cbd5e1; }
html[data-theme="dark"] .appr2-kind.t-agree { background: #2a2214; color: #fbbf24; }
html[data-theme="dark"] .appr2-kind.t-appr { background: #16233a; color: #93c5fd; }
html[data-theme="dark"] .appr2-mark { border-color: #ff5a5a; color: #ff5a5a; } /* 어두운 배경에선 #d11이 탁해 밝은 적색으로 */
html[data-theme="dark"] .appr2-reject { color: #ff5a5a; }
html[data-theme="dark"] .appr2-foot { border-top-color: var(--border); }
html[data-theme="dark"] .appr2-name { color: var(--text); }
html[data-theme="dark"] .appr2-role,
html[data-theme="dark"] .appr2-dt { color: var(--text-muted); }
html[data-theme="dark"] .appr2-wait { color: #4b5563; }
html[data-theme="dark"] .appr2-agree-ro,
html[data-theme="dark"] .appr2-agree-tm { color: var(--text-muted); }
html[data-theme="dark"] .appr2-agree-line.rejected .appr2-agree-ic,
html[data-theme="dark"] .appr2-agree-line.rejected .appr2-agree-tm { color: #ff5a5a; }
html[data-theme="dark"] .appr2-agree-line.wait .appr2-agree-ic { color: #4b5563; }
}
/* 엑셀에서 복사·붙여넣은 표의 다크모드 (기안문 본문·작성 에디터)
엑셀은 셀에 배경색만 인라인으로 박고 글자색은 안 넣는다. 그래서 다크모드에선
'밝은 회색 배경 + 테마의 밝은 글자'가 되어 뭉갠다(실측: 셀 180개 중 인라인
글자색을 가진 셀 0개, 배경은 gray·#bfbfbf·#d9d9d9로 전부 밝은 색).
→ 배경이 박힌 셀에만 어두운 글자를 되돌려 엑셀에서 보던 대로 읽히게 한다.
배경이 없는 셀(투명)은 그대로 두어 다크 표면 위 밝은 글자를 유지한다.
전제: 스프레드시트 채우기색은 흰 종이 기준이라 사실상 항상 밝다.
@media screen - 인쇄에는 관여하지 않는다(인쇄는 원래 흰 종이). */
@media screen {
html[data-theme="dark"] .ql-editor td[style*="background"],
html[data-theme="dark"] .ql-editor th[style*="background"] { color: #111 !important; }
/* 표 격자선: 붙여넣기 표는 테두리가 옅어 다크에서 사라진다 */
html[data-theme="dark"] .ql-editor table td,
html[data-theme="dark"] .ql-editor table th { border-color: var(--border); }
}
/* 근태 조회 보기 토글 + 그룹 헤더 행(부서별·상태별) */
.att-view-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 차량 편집 주요항목 다중선택 태그 */
.veh-tag { display: inline-flex; align-items: center; padding: 4px 11px; border: 1px solid var(--border); border-radius: 14px; font-size: 12px; color: var(--text-muted); background: var(--surface); cursor: pointer; user-select: none; }
.veh-tag.on { background: #eff6ff; border-color: #93c5fd; color: #1e40af; font-weight: 600; }
html[data-theme="dark"] .veh-tag.on { background: #1e293b; color: #93c5fd; }
.att-grp td { background: rgba(100,116,139,.12); font-weight: 700; font-size: 12.5px; color: var(--text); }
@media (max-width: 640px) {
.doc-head-row { flex-wrap: wrap; }
.doc-head-main { flex: 1 1 100%; }
.appr2-wrap { flex: 1 1 100%; align-items: center; margin-top: 10px; }
.appr2-agree { min-width: 0; }
.appr2-grid { overflow-x: auto; max-width: 100%; }
.doc-meta { justify-content: center; text-align: center; } /* 모바일: 기안자·기안일 가운데 정렬 (결재란과 통일) */
}
/* 결재 내용 필드: 라벨을 값 위에 세로 배치 → 긴 라벨도 줄바꿈 최소화 */
.dt-fields { display: flex; flex-direction: column; }
.dt-frow { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.dt-frow:last-child { border-bottom: none; }
.dt-flabel { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 5px; line-height: 1.45; word-break: break-word; }
.dt-fvalue { font-size: 14px; color: #111; line-height: 1.6; }
.doc-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-muted); }
.doc-meta span { display: flex; align-items: center; gap: 4px; }
.approval-timeline { display: flex; flex-direction: row; align-items: flex-start; gap: 0; overflow-x: auto; padding: 6px 0 2px; }
.timeline-step {
display: flex; flex-direction: column; align-items: center; text-align: center;
position: relative; flex: 1 0 auto; min-width: 110px; padding: 0 6px;
}
.timeline-step:not(:last-child) .timeline-line {
position: absolute; left: 50%; top: 18px; width: 100%; height: 2px; background: var(--border); z-index: 0;
}
.timeline-icon {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 16px; z-index: 1; border: 2px solid var(--border); background: var(--surface);
}
.timeline-icon.approved { border-color: var(--success); background: #ecfdf5; color: var(--success); }
.timeline-icon.rejected { border-color: var(--danger); background: #fef2f2; color: var(--danger); }
.timeline-icon.pending { border-color: var(--primary); background: #eff6ff; color: var(--primary); }
.timeline-icon.waiting { border-color: var(--border); background: var(--bg); color: var(--secondary); }
.timeline-body { padding-top: 8px; width: 100%; }
.timeline-header { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 2px; }
.timeline-name { font-weight: 600; font-size: 13px; }
.timeline-date { font-size: 11px; color: var(--text-muted); }
.timeline-dept { font-size: 12px; color: var(--text-muted); }
.timeline-comment { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-style: italic; word-break: break-word; }
/* ── 검색 ── */
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search-bar .form-control { flex: 1; min-width: 200px; }
/* ── 모달 ── */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100;
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
background: var(--surface); border-radius: 10px; width: 100%; max-width: 580px;
max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 40px rgba(0,0,0,.2);
}
.modal-header {
padding: 16px 20px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.modal-header h3 { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--secondary); padding: 0; }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
/* 차량 세부: 모바일에서는 모달이 아닌 전체화면으로 */
@media (max-width: 768px) {
.modal-overlay.veh-detail-fs { padding: 0; align-items: stretch; justify-content: stretch; }
.modal-overlay.veh-detail-fs .modal {
max-width: none !important; width: 100% !important;
max-height: none; height: 100dvh; border-radius: 0; box-shadow: none;
}
}
/* 차량 세부 모달 좌측 메뉴(☰) 버튼: 데스크톱 숨김, 모바일 서랍 모드에서만 표시 (풀스크린 모달이 앱 헤더 햄버거를 덮으므로) */
.veh-rail-hamburger { display: none; }
@media (max-width: 768px) { .veh-rail-hamburger { display: inline-flex; align-items: center; } }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { .veh-rail-hamburger { display: inline-flex; align-items: center; } }
/* ── 차량 작업현황 부서 선택 필(pill) - 드롭다운 대신 눈에 보이는 버튼 ── */
.ws-dept-pill { white-space: nowrap; font-size: 13px; padding: 6px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 500; }
.ws-dept-pill:hover { background: #f3f4f6; }
.ws-dept-pill.active { background: var(--primary, #4169E1); border-color: var(--primary, #4169E1); color: #fff; font-weight: 600; }
/* ── 차량 작업현황 - 검색 대수 배지 ── */
.ws-count-badge { display: inline-block; margin-left: 6px; padding: 2px 11px; border-radius: 14px; background: var(--primary, #4169E1); color: #fff; font-size: 13px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
/* 차량 작업현황 헤더: 모바일에서 제목/컨트롤을 세로로 쌓아 배지·토글 잘림 방지 */
@media (max-width: 640px) {
.ws-header { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
.ws-header h3 { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.ws-header .ws-count-badge { margin-left: 0; }
.ws-header-actions { flex: 1 1 100%; justify-content: space-between !important; }
}
/* ── 차량 작업현황 관리 - 부서 순서 이동 버튼 ── */
/* 공용 드래그 정렬(_dsAttrs) - 순서 바꾸기는 전부 드래그로 통일 */
/* 공정 배정 관리: 차량번호·차량명을 누르면 차량 정보 모달 */
.ta-veh:hover b { color: var(--primary); text-decoration: underline; }
.ds-grip { cursor: grab; color: var(--text-muted); opacity: .45; display: inline-flex; align-items: center; flex: none; padding: 2px; touch-action: none; }
.ds-grip:active { cursor: grabbing; }
.ds-item:hover .ds-grip { opacity: .9; }
.ds-item.ds-dragging { opacity: .4; }
/* 놓을 자리 표시 - 테두리만 바꾸면 어디 끼워지는지 안 보여서 위쪽에 굵은 선을 넣는다 */
.ds-item.ds-over { border-color: var(--primary) !important; box-shadow: inset 0 3px 0 -1px var(--primary); }
.ws-move-btn { width: 20px; height: 15px; line-height: 1; font-size: 9px; padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 3px; cursor: pointer; }
.ws-move-btn:hover:not(:disabled) { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.ws-move-btn:disabled { opacity: .35; cursor: default; }
/* ── 부서 작업현황 관리 - 노션 담당부서 매핑 칩 ── */
.ws-chip { font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.ws-chip.on { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; font-weight: 600; }
/* ── 차량 작업현황: 표/보드 전환 토글 ── */
.ws-view-btn { border: none; background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 5px 14px; cursor: pointer; }
.ws-view-btn + .ws-view-btn { border-left: 1px solid var(--border); }
.ws-view-btn.active { background: var(--primary, #4169E1); color: #fff; }
.ws-grp-btn { font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; }
.ws-grp-btn:hover { background: #f3f4f6; }
.ws-grp-btn.active { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
/* 차량 작업현황 탭(입고대기/입고완료/출고완료) - 항상 버튼 한 줄(드롭다운 없음) */
.ws-tab-btn { border: 1px solid var(--border); background: var(--surface); cursor: pointer; padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: #6b7280; border-radius: 8px; white-space: nowrap; }
.ws-tab-btn:hover { background: #f3f4f6; }
.ws-tab-btn.active { background: var(--primary, #4169E1); border-color: var(--primary, #4169E1); color: #fff; }
@media (max-width: 480px) { .ws-tab-btn { padding: 7px 0; flex: 1; text-align: center; font-size: 13px; } }
/* 토요 근무 월간 편성 매트릭스 - 직원 열 고정 */
.satm-table { border-collapse: separate; border-spacing: 0; }
.satm-table th, .satm-table td { padding: 6px 8px; }
.satm-table .satm-name { position: sticky; left: 0; background: var(--surface); white-space: nowrap; z-index: 1; box-shadow: 1px 0 0 var(--border); font-weight: 600; }
/* ── 차량 작업현황: 공정별 보드(칸반) ── */
/* 작업현황 보드(칸반) - 카드 시안 1b(스트라이프): 좌측 4px 컬럼 accent 바 + 경과일 큰 숫자 */
.ws-board { display: flex; gap: 13px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.ws-board::-webkit-scrollbar, .ws-board-cards::-webkit-scrollbar { width: 9px; height: 9px; }
.ws-board::-webkit-scrollbar-thumb, .ws-board-cards::-webkit-scrollbar-thumb { background: #d6dadf; border-radius: 8px; }
.ws-board::-webkit-scrollbar-thumb:hover, .ws-board-cards::-webkit-scrollbar-thumb:hover { background: #c2c8ce; }
.ws-board::-webkit-scrollbar-track, .ws-board-cards::-webkit-scrollbar-track { background: transparent; }
.ws-board-lane { flex: 0 0 264px; width: 264px; background: #eef1f4; border-radius: 14px; display: flex; flex-direction: column; max-height: 68vh; }
.ws-board-lane-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 13px 11px; font-weight: 700; font-size: 14px; letter-spacing: -.01em; position: sticky; top: 0; background: #eef1f4; border-radius: 14px 14px 0 0; z-index: 1; }
.ws-board-lane-title { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-board-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ws-board-count { font-size: 12px; font-weight: 700; color: #6b7684; background: #dfe4e9; border-radius: 20px; padding: 2px 9px; min-width: 24px; text-align: center; }
.ws-board-cards { padding: 0 8px 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 0; }
/* min-height:max-content - 카드 많은 레인(세로 flex 컨테이너)에서 카드가 압축돼 차종·위치·일자가 잘리는 것 방지(overflow:hidden 카드는 flex-shrink:0이 안 먹어 min-height로 고정), 컨테이너가 스크롤 */
.ws-board-card { display: flex; flex: 0 0 auto; min-height: max-content; background: #fff; border: 1px solid #edf0f2; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03); cursor: pointer; transition: box-shadow .12s; }
.ws-board-card:hover { box-shadow: 0 4px 13px rgba(0,0,0,.09); }
/* 자동 갱신으로 공정이 바뀌어 다른 레인으로 옮겨온 카드 - 왜 화면이 바뀌었는지 알 수 있게 잠깐 표시 */
.ws-moved { animation: wsMoved 2.6s ease-out; }
@keyframes wsMoved {
0% { box-shadow: 0 0 0 2px #3182f6, 0 4px 14px rgba(49,130,246,.35); transform: scale(1.015); }
12% { box-shadow: 0 0 0 2px #3182f6, 0 4px 14px rgba(49,130,246,.35); transform: scale(1); }
100% { box-shadow: 0 0 0 0 rgba(49,130,246,0); }
}
@media (prefers-reduced-motion: reduce) { .ws-moved { animation: none; outline: 2px solid #3182f6; } }
.wsb-stripe { width: 4px; flex: 0 0 auto; align-self: stretch; }
.wsb-body { flex: 1; min-width: 0; padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; }
.wsb-top { display: flex; align-items: flex-start; gap: 8px; }
.wsb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wsb-plate-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wsb-plate { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: #191f28; }
.wsb-sub { font-size: 12.5px; color: #4e5968; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsb-stage { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #6b7684; }
.wsb-metric { flex: 0 0 auto; text-align: right; line-height: 1; }
.wsb-metric b { display: block; font-size: 21px; font-weight: 800; }
.wsb-metric span { display: block; font-size: 10px; color: #adb5bd; margin-top: 2px; }
/* 보조 숫자(발주·입고 경과) - 큰 숫자(정체일)와 섞이지 않게 한 단계 죽인다 */
.wsb-metric .wsb-metric-sub { font-size: 9.5px; color: #c1c7cd; margin-top: 3px; }
.wsb-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: #8b95a1; }
.wsb-loc { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsb-loc svg { flex: 0 0 auto; }
.wsb-date { flex: 0 0 auto; white-space: nowrap; }
/* 카드 추가정보(상황별) - 공정-세부·외주·특이사항/댓글·진행률 */
.wsb-extra { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.wsb-x { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #4e5968; min-width: 0; }
.wsb-x b { font-weight: 700; color: #3d4756; }
.wsb-x > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsb-x-sep { color: #adb5bd; flex: 0 0 auto; }
.wsb-x-os { color: #8a5a3c; }
.wsb-os-st { margin-left: 4px; font-size: 10px; background: #faece7; color: #712b13; border-radius: 99px; padding: 0 6px; }
.wsb-x-meta { color: #8b95a1; gap: 12px; }
.wsb-x-meta span { display: inline-flex; align-items: center; gap: 4px; }
.wsb-x-prog { gap: 7px; }
.wsb-prog-track { flex: 1; height: 5px; border-radius: 99px; background: #eef1f5; overflow: hidden; min-width: 0; }
.wsb-prog-fill { height: 100%; background: #1d9e75; border-radius: 99px; }
.wsb-prog-num { flex: 0 0 auto; font-size: 10.5px; color: #8b95a1; white-space: nowrap; }
html[data-theme="dark"] .wsb-x { color: #b6c2cf; }
html[data-theme="dark"] .wsb-x b { color: #d3dde6; }
html[data-theme="dark"] .wsb-x-os { color: #e0a582; }
html[data-theme="dark"] .wsb-os-st { background: #3a2417; color: #e9b58f; }
html[data-theme="dark"] .wsb-prog-track { background: #2b3542; }
.ws-board-empty { font-size: 12px; color: #cbd5e1; text-align: center; padding: 10px 0; }
@media (max-width: 640px) { .ws-board-lane { flex-basis: 228px; width: 228px; } }
/* ── 차량 검색 검색줄 - 데스크톱 한 줄, 모바일 2줄(입력 전체폭 → 체크·버튼) ── */
.vs-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.vs-row .vs-input { flex: 1; min-width: 200px; }
/* contenteditable 입력 - input이 아니라서 브라우저 저장 계정/자동완성 팝업이 뜨지 않음 */
.vs-ce, .ce-input { cursor: text; white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-user-select: text; user-select: text; }
.vs-ce br, .ce-input br { display: none; }
.vs-ce:empty::before, .ce-input:empty::before { content: attr(data-ph); color: #9ca3af; pointer-events: none; }
@media (max-width: 768px) {
.vs-row .vs-input { flex: 1 1 100%; }
.vs-row .vs-open-label { order: 2; }
.vs-row .vs-btn { order: 3; margin-left: auto; flex: 0 0 auto; }
}
/* ── 모바일 전용 차량 검색 플로팅 버튼 (데스크톱 숨김) ── */
#vs-fab { display: none; }
@media (max-width: 768px) {
#vs-fab {
display: flex; align-items: center; justify-content: center;
position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
background: var(--primary, #4169E1); color: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, .3); z-index: 96; /* 사이드바(95)·백드롭(90) 위 - 메뉴 펼침 시에도 노출·클릭 가능 */
}
#vs-fab:active { transform: scale(.94); }
#vs-fab .icon { width: 25px; height: 25px; }
}
/* ── 알림 ── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9700; display: flex; flex-direction: column; gap: 8px; } /* 모달(3000)·확인창(9500) 위 - 차량 세부(모바일 전체 화면) 열림 중에도 처리 토스트가 보이도록 */
.toast {
background: #1e2a3b; color: #fff; padding: 12px 18px; border-radius: 8px;
font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.2);
animation: slideIn .25s ease; max-width: 320px;
}
/* 진행·결과 카드 - 토스트와 같은 자리(우측 아래)에 얹혀 같은 순서로 쌓인다.
토스트와 달리 저절로 사라지지 않는다: 진행 중엔 계속, 결과는 확인을 눌러야 닫힌다.
차량 전용이었으나 전 화면 공용으로 올렸다(_actionProgress/_actionAlert). */
.act-card { background: var(--surface); color: var(--text); border: 1px solid var(--border);
border-left: 4px solid #4169E1; border-radius: 10px; padding: 11px 13px; max-width: 340px;
box-shadow: 0 6px 18px rgba(0,0,0,.16); animation: slideIn .25s ease; }
.act-card.ok { border-left-color: #0ca678; }
.act-card.err { border-left-color: #e02424; }
.act-row { display: flex; align-items: center; gap: 10px; }
.act-title { font-size: 13px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.act-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45;
white-space: pre-wrap; word-break: break-word; } /* 안내문에 줄바꿈을 넣는 곳이 있다(초기 비밀번호 등) */
.act-sub.ok { color: #0ca678; font-weight: 700; }
.act-sub.err { color: #e02424; font-weight: 700; }
.act-x { background: none; border: none; color: var(--text-muted); font-size: 17px; line-height: 1;
cursor: pointer; padding: 0 2px; flex: none; align-self: flex-start; }
.act-x:hover { color: var(--text); }
/* 중앙 진행 모달의 설명 문구 - 줄바꿈을 그대로 살린다(두 줄 안내) */
.act-modal-sub { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.7;
white-space: pre-wrap; word-break: break-word; }
/* 결과 뱃지 - 완료 ✓ / 실패 ! */
.act-badge { width: 20px; height: 20px; flex: none; border-radius: 50%; color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.act-badge.ok { background: #0ca678; }
.act-badge.err { background: #e02424; }
/* 결과 카드(세로형) - 진행이 끝난 뒤의 마무리 화면. 진행 중 카드(.act-row)와 달리 크게 세워
무슨 일이 끝났는지 한눈에 알린다. 좌측 컬러바 대신 원형 아이콘이 상태를 말한다. */
.act-card.act-done { border-left: 1px solid var(--border); padding: 20px 18px 16px; text-align: center; }
.act-ring { width: 42px; height: 42px; margin: 0 auto 11px; border-radius: 50%; color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; line-height: 1; }
.act-ring.ok { background: #12b76a; }
.act-ring.err { background: #e02424; }
.act-done-t { font-size: 14.5px; font-weight: 800; line-height: 1.4; word-break: break-word; }
.act-done-s { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.55;
white-space: pre-wrap; word-break: break-word; }
.act-done-btn { width: 100%; margin-top: 15px; height: 37px; border: none; border-radius: 9px;
font-size: 13px; font-weight: 700; color: #fff; background: #4169E1; cursor: pointer; }
.act-done-btn:hover { background: #3457c9; }
.act-done-btn.err { background: #e02424; }
.act-done-btn.err:hover { background: #c81e1e; }
/* 모달 위 중앙 안내창 - 우하단 결과 카드와 같은 세로형이지만 토스트처럼 작게(모달에 가리지 않게 중앙 배치) */
.modal.act-mini { width: 268px; min-width: 240px; max-width: calc(100vw - 32px); flex: none; text-align: center; padding: 18px 18px 15px; }
.modal.act-mini .act-ring { width: 36px; height: 36px; font-size: 18px; margin-bottom: 9px; }
.modal.act-mini .act-done-t { font-size: 13.5px; }
.modal.act-mini .act-done-s { font-size: 11.5px; margin-top: 5px; }
.modal.act-mini .act-done-btn { height: 35px; margin-top: 13px; }
/* 진행중 토스트 - PARK 로고 + 문구를 한 줄로. 토스트 배경은 테마와 무관하게 늘 어두운 남색이라
라이트에서도 흰 로고를 써야 보인다(다크 테마 규칙과 같은 방식). */
.toast-park { display: flex; align-items: center; gap: 9px; }
.toast-park .park-fill-wrap { width: 44px; }
.toast-park .park-fill-wrap img { content: url("logo-white.svg"); }
.toast.success { border-left: 4px solid #4169E1; }
.toast.error { border-left: 4px solid #e02424; }
.toast.info { border-left: 4px solid #6b7280; } /* toast(msg,'info') 호출부가 있는데 클래스가 없어 보더 없이 떴다 */
/* 출퇴근에서 불러오기 후보 행 - 데스크탑은 날짜 왼쪽·시각 오른쪽 한 줄, 모바일은 세로 카드로 쌓는다. */
.ot-cand { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; text-align: left; }
.ot-cand .ot-cand-date { font-weight: 600; white-space: nowrap; }
.ot-cand .ot-cand-times { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
.ot-cand { flex-direction: column; align-items: flex-start; gap: 5px; padding: 11px 13px; }
.ot-cand .ot-cand-times { white-space: normal; font-size: 12.5px; }
}
/* 모바일: 좌우 여백만 남기고 전체폭 - 작은 화면에서 문구가 덜 잘리게 */
@media (max-width: 640px) { .toast-container { left: 12px; right: 12px; bottom: 16px; } .toast { max-width: none; } }
/* 플로팅 버튼(차량 세부 저장 바 / 대시보드·작업현황 차량검색 FAB)이 있으면(모바일) 토스트를 전체폭 대신
우측 정렬·적당한 크기로 그 '위'에 배치한다. 버튼은 제자리 유지.
(:has(#veh-detail-overlay)는 단순 id 인자라 안정적 / vs-fab은 항상 DOM에 있어 body.vs-fab-on JS 토글로 판정) */
@media (max-width: 768px) {
body:has(#veh-detail-overlay) .toast-container,
body.vs-fab-on .toast-container { left: auto; right: 16px; bottom: 84px; max-width: 84vw; align-items: flex-end; }
body:has(#veh-detail-overlay) .toast,
body.vs-fab-on .toast { max-width: 84vw; }
}
/* 차량 세부 하단 여백은 본문 끝 스페이서(height:60px)가 이미 확보 - 추가 padding은 간격만 넓혀서 두지 않는다. */
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* ── 빈 상태 ── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 15px; }
/* ── 로그인 ── */
#login-screen {
min-height: 100vh; display: flex; align-items: stretch; justify-content: stretch;
}
.login-bg {
flex: 1; display: flex; align-items: center; justify-content: center;
background: #f5f6f8; padding: 24px;
background-image: radial-gradient(circle at 70% 20%, rgba(58,170,53,.08) 0%, transparent 50%),
radial-gradient(circle at 20% 80%, rgba(65,105,225,.06) 0%, transparent 50%);
}
.reset-view-bg { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: #f1f5f9; }
.fg-msg { font-size: 13px; margin-bottom: 10px; padding: 9px 12px; border-radius: 8px; }
.fg-msg.ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.fg-msg.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
html[data-theme="dark"] .fg-msg.ok { background: #132e1a; color: #4ade80; border-color: #245132; }
html[data-theme="dark"] .fg-msg.err { background: #2a1618; color: #ff8a8a; border-color: #5c2b2f; }
.todo-inline-confirm { display: flex; gap: 6px; align-items: center; padding: 8px 10px; margin: 4px 0 6px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; }
html[data-theme="dark"] .todo-inline-confirm { background: #132e1a; border-color: #245132; }
.login-card {
background: #fff;
border-radius: 16px;
padding: 48px 44px;
width: 100%;
max-width: 420px;
box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 20px 48px rgba(0,0,0,.10);
display: flex;
flex-direction: column;
align-items: center;
}
.login-logo {
margin-bottom: 20px;
}
.login-title {
font-size: 15px;
font-weight: 600;
color: #374151;
letter-spacing: 0.04em;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid #e5e7eb;
width: 100%;
text-align: center;
}
.login-card .form-group { width: 100%; }
.login-card .form-label { font-size: 13px; font-weight: 600; color: #374151; }
.login-card .form-control {
height: 46px; font-size: 14px; border-radius: 8px;
border: 1.5px solid #e5e7eb; background: #fafafa;
}
.login-card .form-control:focus {
border-color: #3aaa35; background: #fff;
box-shadow: 0 0 0 3px rgba(58,170,53,.12);
}
/* 아이디: 입력 + @도메인을 하나의 박스(한 칸)로 통합 — 도메인은 박스 안 우측 (첨부 디자인) */
.login-card .login-id-row {
height: 46px; padding: 0 10px 0 12px;
border: 1.5px solid #e5e7eb; border-radius: 8px; background: #fafafa;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.login-card .login-id-row:focus-within {
border-color: #3aaa35; background: #fff;
box-shadow: 0 0 0 3px rgba(58,170,53,.12);
}
.login-card .login-id-row > #login-id,
.login-card .login-id-row > #login-domain {
height: 42px; border: none !important; background: transparent !important;
box-shadow: none !important; border-radius: 0; padding: 0;
}
.login-card .login-id-row > #login-domain {
width: auto; padding-right: 14px; color: var(--text); cursor: pointer; font-size: 14px;
}
.login-card .login-id-row > span { color: #9ca3af; margin-right: 1px; }
/* 모바일: 통합 박스 유지, 카드 여백·도메인 글자 축소로 아이디 칸 확보 */
@media (max-width: 480px) {
.login-card { padding: 40px 22px; }
.login-card .login-id-row { padding: 0 10px; }
.login-card .login-id-row > #login-domain { font-size: 12.5px; padding-right: 18px; }
}
@media (max-width: 340px) {
.login-card { padding: 36px 14px; }
.login-card .login-id-row > #login-domain { font-size: 11.5px; }
}
.btn-login {
width: 100%; height: 48px; border: none; border-radius: 8px;
background: #4169E1; color: #fff;
font-size: 15px; font-weight: 700; cursor: pointer;
transition: all .15s; margin-top: 4px; letter-spacing: 0.04em;
display: flex; align-items: center; justify-content: center;
}
.btn-login:hover { background: #3457c9; }
.btn-login:disabled { opacity: .6; cursor: not-allowed; }
/* ── Quill 에디터 ── */
.quill-wrap { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.quill-wrap .ql-toolbar { border: none; border-bottom: 1px solid var(--border); background: var(--bg); }
.quill-wrap .ql-container { border: none; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; min-height: 180px; }
.quill-wrap .ql-editor { min-height: 180px; }
.quill-wrap .ql-editor img { max-width: 100%; border-radius: 4px; margin: 4px 0; }
/* ── 첨부파일 ── */
.attach-zone {
border: 2px dashed var(--border); border-radius: 6px; padding: 16px;
text-align: center; cursor: pointer; transition: all .15s; background: var(--bg);
}
.attach-zone:hover, .attach-zone.drag-over { border-color: var(--primary); background: #eff6ff; }
.attach-zone p { font-size: 13px; color: var(--text-muted); margin: 0; }
.attach-zone .attach-icon { font-size: 28px; margin-bottom: 6px; }
html[data-theme="dark"] .attach-zone:hover, html[data-theme="dark"] .attach-zone.drag-over { background: #1e293b; }
.attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.attach-item {
display: flex; align-items: center; gap: 10px; padding: 8px 12px;
background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
.attach-item .file-icon { font-size: 20px; flex-shrink: 0; }
.attach-item .file-info { flex: 1; min-width: 0; }
.attach-item .file-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-item .file-size { font-size: 11px; color: var(--text-muted); }
.attach-item .file-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; padding: 0; flex-shrink: 0; }
.attach-item .file-remove:hover { color: var(--danger); }
.attach-item .file-dl { font-size: 12px; color: var(--primary); text-decoration: none; flex-shrink: 0; }
.attach-item .file-dl:hover { text-decoration: underline; }
.upload-progress { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.upload-progress-bar { height: 100%; background: var(--primary); transition: width .3s; }
/* ── 문서함 필터 바 ── */
.docbox-filter {
padding: 14px 16px; border-bottom: 1px solid var(--border); background: #fafafa;
display: flex; flex-wrap: wrap; gap: 12px 44px; align-items: flex-start;
}
.docbox-filter .fb-col { display: flex; flex-direction: column; gap: 12px; }
.docbox-filter .fb-left { flex: 0 0 auto; }
.docbox-filter .fb-right { flex: 1 1 300px; min-width: 280px; }
.docbox-filter .fb-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.docbox-filter .fb-label { flex: 0 0 56px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.docbox-filter .fb-controls { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.docbox-filter .fb-date { width: 150px; }
.docbox-filter .fb-doctype { width: 100%; max-width: 320px; }
.docbox-filter .fb-field { flex: 0 0 110px; }
.docbox-filter .fb-keyword { flex: 1; min-width: 140px; }
.docbox-filter .fb-tilde { color: var(--text-muted); }
/* ── 역할 관리 헤더(제목 + 필터) ── */
.roles-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; gap: 12px; }
.roles-filters { display: flex; gap: 8px; align-items: center; }
/* 시스템 역할 관리 - 좌우 마스터-디테일: 왼쪽 역할 리스트, 오른쪽 상세/편집 */
/* 페이지 높이를 모니터에 맞춤: #content 박스(=100vh - 56 헤더 - 48 패딩)를 꽉 채우고, 양쪽 컬럼은 내부 스크롤 */
.roles-md { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; align-items: stretch; height: calc(100vh - 104px); }
.roles-md-list { padding: 12px; display: flex; flex-direction: column; min-height: 0; }
.roles-md-list-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; flex: none; }
.roles-md-list #role-list { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.roles-md-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.roles-md-pane > .card { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.role-list-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 9px; padding: 9px 10px; cursor: pointer; margin-bottom: 3px; }
.role-list-item:hover { background: var(--bg); }
.role-list-item.on { background: #eff4ff; border-color: #bfd0f5; }
html[data-theme="dark"] .role-list-item:hover { background: #232b36; }
html[data-theme="dark"] .role-list-item.on { background: #1e2a3d; border-color: #2f4a75; }
@media (max-width: 760px) {
/* 모바일: 컬럼 세로 적층 + 페이지 자연 스크롤(고정 높이·내부 스크롤 해제) */
.roles-md { grid-template-columns: 1fr; grid-template-rows: none; height: auto; align-items: start; }
.roles-md-list { min-height: 0; }
.roles-md-list #role-list { overflow-y: visible; max-height: none; }
.roles-md-pane > .card { overflow-y: visible; }
}
/* ── 결재의견 카드 (카카오워크 스타일) ── */
.opinion-list { display: flex; flex-direction: column; gap: 10px; }
.opinion-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: #fff; }
.opinion-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.opinion-status { font-weight: 700; font-size: 14px; }
.opinion-type { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 6px; }
.opinion-date { margin-left: auto; font-size: 12px; color: #9ca3af; white-space: nowrap; }
.opinion-comment { font-size: 14px; color: #374151; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.opinion-who { font-size: 12px; color: #9ca3af; margin-top: 8px; }
/* ── 햄버거 버튼 / 모바일 사이드바 ── */
.hamburger-btn {
display: none; background: none; border: none; font-size: 22px; line-height: 1;
cursor: pointer; color: var(--text); padding: 4px 10px 4px 0; margin-right: 2px;
}
#sidebar-backdrop {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90;
}
/* 폰 가로모드(짧은 높이·터치기기): 폭이 768px를 넘어도 좌측 메뉴를 서랍으로 자동 숨김 */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
.hamburger-btn { display: block; }
#sidebar {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
transform: translateX(-100%); transition: transform .25s ease;
box-shadow: 2px 0 16px rgba(0,0,0,.3);
}
#app.sidebar-open #sidebar { transform: translateX(0); }
#app.sidebar-open #sidebar-backdrop { display: block; }
}
/* 폰 가로(폭>768 = 표 레이아웃 유지): 세로공간 절약 + 문서번호 숨김 + 제목 넓힘 + 표 여백 축소 */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 769px) and (pointer: coarse) {
#content { padding: 14px 18px; }
.doc-table th, .doc-table td { padding: 7px 10px; }
.doc-table .dt-num { display: none; } /* 문서번호 열 숨김(가로에선 불필요) */
.doc-table td.dt-title { min-width: 240px; white-space: normal; } /* 제목 열 넓힘 */
}
/* ── 반응형 ── */
@media (max-width: 768px) {
.hamburger-btn { display: block; }
/* 사이드바를 화면 밖에서 슬라이드되는 서랍으로 전환 */
#sidebar {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
transform: translateX(-100%); transition: transform .25s ease;
box-shadow: 2px 0 16px rgba(0,0,0,.3);
}
#app.sidebar-open #sidebar { transform: translateX(0); }
#app.sidebar-open #sidebar-backdrop { display: block; }
#header { padding: 0 14px; }
#content { padding: 16px; }
.header-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 헤더 버튼은 모바일에서 아이콘만 표시 */
.header-actions .ha-text { display: none; }
.form-row { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr; }
/* 문서함 필터: 세로 스택 (상신일 → 기안양식 → 검색 → 버튼) */
.docbox-filter { flex-direction: column; align-items: stretch; gap: 12px; }
.docbox-filter .fb-col { width: 100%; }
.docbox-filter .fb-label { flex: 0 0 56px; }
.docbox-filter .fb-doctype { width: auto; max-width: none; flex: 1; }
.docbox-filter .fb-date { width: auto; flex: 1; min-width: 0; }
.docbox-filter .fb-keyword { flex: 1; min-width: 0; }
.docbox-filter .fb-btn-line .btn { flex: 1; justify-content: center; padding-top: 9px; padding-bottom: 9px; }
.docbox-filter .fb-btn-search { flex: 1.6; }
/* 세로 배치에서 fb-right가 세로로 늘어나 버튼 아래 빈 공간 생기던 문제 → 늘어남 방지 */
.docbox-filter .fb-right, .docbox-filter .fb-left { flex: 0 0 auto; min-width: 0; }
/* 기안양식 : 상태 = 5:5 (상단 날짜칸과 동일 비율) */
.docbox-filter #fb-doctype { flex: 1 1 0; width: auto; min-width: 0; max-width: none; }
.docbox-filter #fb-status { flex: 1 1 0; width: auto; min-width: 0; max-width: none !important; }
/* 결재선 타임라인: 모바일은 세로로 (가로 잘림 방지) */
.approval-timeline { flex-direction: column; align-items: stretch; overflow-x: visible; gap: 0; padding: 2px 0; }
.approval-timeline .timeline-step { flex-direction: row; align-items: flex-start; text-align: left; width: 100%; min-width: 0; flex: 0 0 auto; padding: 0 0 18px 0; gap: 12px; }
.approval-timeline .timeline-step:last-child { padding-bottom: 0; }
.approval-timeline .timeline-step:not(:last-child) .timeline-line { left: 18px; top: 38px; bottom: 0; width: 2px; height: auto; }
.approval-timeline .timeline-body { padding-top: 0; width: auto; flex: 1; text-align: left; }
.approval-timeline .timeline-header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 표 → 모바일 카드형 스택 (문서함 목록 + 관리자 표 공통) */
.doc-table thead, .resp-table thead { display: none; }
.doc-table, .doc-table tbody, .resp-table, .resp-table tbody { display: block; }
.doc-table tr, .resp-table tr { display: block; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 4px 14px; background: var(--surface); }
.doc-table td, .resp-table td { display: flex; justify-content: flex-start; align-items: flex-start; gap: 10px; border: none; padding: 7px 0; text-align: left; min-width: 0; }
.doc-table td::before, .resp-table td::before { content: attr(data-label); color: #9ca3af; font-size: 12px; font-weight: 600; text-align: left; flex: 0 0 76px; white-space: nowrap; }
.doc-table td.dt-title { font-weight: 700; font-size: 15px; }
.doc-table td[data-label="문서번호"] { display: none; }
/* 라벨 없는 셀(드래그 핸들 등)은 숨김 */
.resp-table td[data-label=""]::before { content: none; }
.resp-table td.rt-hide-mobile { display: none; }
/* 원문(pre)처럼 세로로 쌓여야 하는 셀 - flex 행이 되면 원문이 옆으로 찌그러진다(카드·입금 '확인 필요' 행) */
.resp-table td.rt-block { display: block; }
/* 역할 관리 헤더: 모바일은 제목 위 / 필터 아래 세로 스택 */
.roles-head { flex-direction: column; align-items: stretch; }
.roles-filters { flex-wrap: wrap; width: 100%; }
.roles-filters .form-control { flex: 1 1 130px; width: auto !important; min-width: 0; }
/* 양식 편집: 필드 행을 모바일에서 세로로 (필드명 한 줄 / 타입·필수·삭제 다음 줄) */
.dt-field-top { flex-wrap: wrap; }
.dt-field-top .dtf-drag { display: none; }
.dt-field-top .dtf-spacer { display: none; }
.dt-field-top .dtf-name { flex: 1 1 100% !important; }
.dt-field-top .dtf-type { flex: 1 1 auto !important; }
.dt-field-top .dtf-slot { flex: 1 1 100% !important; }
/* 직책/직위 관리: 모바일은 직위/직책 카드와 사용현황을 세로로 */
.pos-grid, .pos-usage-grid { grid-template-columns: 1fr !important; }
.pos-usage-avatars { display: none !important; }
/* 사용자 관리 헤더: 모바일은 검색(전체폭) / 인원+버튼(다음 줄), 일괄업로드 숨김 */
.kw-admin-header { flex-wrap: wrap; }
.kw-admin-header .kw-admin-search { flex: 1 1 100% !important; max-width: none !important; }
.kw-admin-header #kw-admin-count { margin: 0 auto 0 0 !important; }
.kw-admin-header .kw-admin-btns { flex-wrap: wrap; }
.kw-bulk-btn { display: none !important; }
/* 모달: 좁은 화면에서 여백 최소화 */
.modal-overlay { padding: 10px; }
/* 조직도/결재자·참조자 선택: 모바일은 위(부서) / 아래(멤버) 세로 분할 */
.oc-modal-body { flex-direction: column !important; }
.oc-modal-body .kw-tree-panel {
width: 100% !important; max-width: none !important; min-width: 0 !important;
height: 150px; flex-shrink: 0; border-bottom: 1px solid var(--border);
transition: height .2s ease;
}
.oc-modal-body .kw-tree-panel.expanded { height: 46vh; }
.oc-modal-body .oc-tree-expand-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
flex-shrink: 0; width: 100%; border: none; border-top: 1px solid var(--border);
background: #f3f4f6; color: var(--primary); font-size: 12px; font-weight: 600;
padding: 9px; cursor: pointer;
}
.oc-modal-body .kw-resizer { display: none !important; }
.oc-modal-body .kw-member-panel { width: 100%; flex: 1; min-height: 0; }
.oc-modal-body .kw-mp-body { overflow-x: auto; }
/* 모바일: 이름 검색창을 부서 검색창과 동일하게 — 제목 아래 전체 폭, 같은 여백(12px) */
.oc-modal-body .kw-mp-header { flex-wrap: wrap; gap: 8px; padding: 12px; }
.oc-modal-body .kw-mp-search { flex: 1 1 100%; padding: 0; }
.oc-modal-body .kw-mp-search input { width: 100%; }
/* 조직도 관리 페이지: 모바일은 위(부서)/아래(멤버) 세로 분할 + 확장 버튼 */
.kw-org-page { flex-direction: column; height: calc(100vh - 150px); }
.kw-org-page .kw-tree-panel {
width: 100% !important; max-width: none !important; min-width: 0 !important;
height: 200px; flex-shrink: 0; border-bottom: 1px solid var(--border);
transition: height .2s ease;
}
.kw-org-page .kw-tree-panel.expanded { height: 50vh; }
.kw-org-page .kw-resizer { display: none !important; }
.kw-org-page .kw-member-panel { width: 100%; flex: 1; min-height: 0; }
.kw-org-page .kw-mp-body { overflow-x: auto; }
/* 멤버 표: 모바일에선 직위·ID(이메일) 칸 숨김 (이름·관리만) */
.kw-org-page .kw-member-table th:nth-child(3), .kw-org-page .kw-member-table td:nth-child(3),
.kw-org-page .kw-member-table th:nth-child(4), .kw-org-page .kw-member-table td:nth-child(4) { display: none; }
.kw-org-page .kw-mp-header { flex-wrap: wrap; gap: 8px; }
.kw-org-page .oc-tree-expand-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
flex-shrink: 0; width: 100%; border: none; border-top: 1px solid var(--border);
background: #f3f4f6; color: var(--primary); font-size: 12px; font-weight: 600;
padding: 9px; cursor: pointer;
}
}
/* ── 결재선 카드 ── */
.approval-card {
display: flex; align-items: center; gap: 8px;
background: #fff; border: 1px solid var(--border); border-radius: 8px;
padding: 8px 10px; cursor: grab; user-select: none; position: relative;
transition: box-shadow .15s;
}
.approval-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.approval-card.dragging { opacity: .5; }
html[data-theme="dark"] .approval-card { background: var(--surface); border-color: var(--border); } /* 다크모드: 흰 카드 → 다크 표면(글자 var(--text) 가독) */
.approval-card-step {
width: 22px; height: 22px; border-radius: 50%; background: var(--primary);
color: #fff; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.approval-card-info { line-height: 1.3; }
.approval-card-name { font-size: 13px; font-weight: 600; }
.approval-card-dept { font-size: 11px; color: #9ca3af; }
.approval-card-remove {
background: none; border: none; cursor: pointer; color: #9ca3af;
font-size: 16px; line-height: 1; padding: 0 0 0 4px;
}
.approval-card-remove:hover { color: #e02424; }
/* ── 조직도 모달 ── */
.orgchart-dept { margin-bottom: 20px; }
.orgchart-dept-name {
font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase;
letter-spacing: .05em; margin-bottom: 10px; padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.orgchart-users { display: flex; flex-wrap: wrap; gap: 10px; }
.orgchart-user-card {
width: 110px; padding: 12px 8px; border: 2px solid var(--border); border-radius: 10px;
text-align: center; cursor: pointer; transition: all .15s; background: #fff;
position: relative;
}
.orgchart-user-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(65,105,225,.15); }
.orgchart-user-card.selected { border-color: #3aaa35; background: #f0fdf4; }
html[data-theme="dark"] .orgchart-user-card.selected { background: #132e1a; }
.orgchart-step-badge {
position: absolute; top: -8px; right: -8px;
width: 20px; height: 20px; border-radius: 50%; background: #3aaa35;
color: #fff; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.orgchart-avatar {
width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 6px;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 700;
}
.orgchart-user-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.orgchart-user-dept { font-size: 11px; }
/* ── 연차 현황 카드 ── */
.leave-balance-card {
background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
border: 1px solid #bfdbfe;
border-radius: 10px;
padding: 16px 20px;
margin: 0 auto 20px;
max-width: 440px;
}
.leave-balance-inner {}
.leave-stat-group { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 28px; }
.leave-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; }
/* 큰 숫자 기준선을 맞춘다 - '전 → 후' 셀은 작은 숫자·화살표가 섞여 line box의 baseline이 밀려
큰 숫자만 아래로 처졌다. baseline 정렬 flex로 두면 조각 크기와 무관하게 큰 숫자 아랫선이 일치한다.
flex는 텍스트 사이 공백을 없애므로 gap으로 대체한다. */
.leave-num { font-size: 26px; font-weight: 700; color: #1e40af; line-height: 1; display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; }
.leave-lbl { font-size: 11px; color: #6b7280; }
.leave-stat.used .leave-num { color: #9f580a; }
.leave-stat.remain .leave-num { color: #065f46; }
/* 모바일: 4개 통계를 한 줄에 (줄바꿈 없이 4등분, 라벨은 2줄까지 허용) */
@media (max-width: 640px) {
.leave-stat-group { flex-wrap: nowrap; gap: 6px; align-items: flex-start; }
.leave-stat { min-width: 0; flex: 1 1 0; }
.leave-num { font-size: 21px; }
.leave-lbl { font-size: 10px; line-height: 1.2; text-align: center; word-break: keep-all; }
}
.leave-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.leave-bar-fill { height: 100%; background: linear-gradient(90deg, #3aaa35, #4169E1); border-radius: 3px; transition: width .4s; }
/* 날짜 입력 박스 안, 날짜 값 오른쪽에 요일 표시(겹침) */
.date-dow-wrap { position: relative; display: inline-block; vertical-align: middle; }
.date-dow { position: absolute; top: 0; bottom: 0; left: 0; display: inline-flex; align-items: center; pointer-events: none; color: var(--text); font-size: 14px; white-space: nowrap; }
.date-dow:empty { display: none; }
/* ── 출퇴근 관리 서브 탭 ── */
.att-subtabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
/* 시스템 관리·운영 관리 허브 탭 가운데 정렬: '순서' 버튼의 margin-left:auto가 센터링을 무력화하므로 우측 절대배치로 분리 */
#settings-hub-bar, #settings-sub-bar { justify-content: center; position: relative; padding: 0 76px; }
#settings-hub-bar .att-tab-tail, #settings-sub-bar .att-tab-tail { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }
/* 꼬리 묶음 - 페이지가 붙인 버튼(예: 스키마 새로고침)과 순서 버튼을 한 줄에 나란히.
묶음이 절대배치를 맡으므로 안의 버튼들은 흐름대로 둔다(각자 절대배치하면 서로 겹친다). */
.att-tab-tail { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.att-tab-tail .att-tab-edit { position: static; margin: 0; }
/* 차량 정보 입력 탭줄: 즐겨찾기·순서 버튼을 우측 끝으로(플렉스 밀어내기 - 탭 수가 변해도 항상 우측) */
#vehentry-tab-bar .att-tab-tail { margin-left: auto; }
/* 시스템 관리 안의 탭 줄은 전부 가운데 - 허브 두 줄뿐 아니라 각 페이지가 스스로 그리는 하위 줄까지
(노션관리·알림 발송·제안·건의 게시판 관리 등). 표식은 _injectSettingsBar가 #content에 단다.
.att-subtabs는 근태·통계·공지에서도 쓰므로 클래스 전체를 건드리면 안 된다. */
#content[data-hub="sys"] .att-subtabs { justify-content: center; position: relative; padding: 0 76px; }
#content[data-hub="sys"] .att-subtabs .att-tab-tail { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }
/* ─── 시스템·운영 관리 좌측 트리 사이드바(데스크톱) ───
사이드바(#settings-side)는 #content 첫 자식으로 꽂힌다. grid 1열=사이드바(전체 행 스팬), 2열=페이지 내용.
페이지 내용은 최상위 노드가 여러 개라 flex로는 못 묶고, 자동 배치(2열 지정)로 행마다 쌓는다. */
#content[data-side] { display: grid; grid-template-columns: 208px minmax(0, 1fr); column-gap: 24px; align-content: start; }
#content[data-side] > * { grid-column: 2; min-width: 0; }
#content[data-side] > #settings-side { grid-column: 1; grid-row: 1 / span 400; }
/* 본문 정렬(2026-07-21 사용자 결정): 사이드바 옆에 좌측 정렬 + 최대 폭 1080px 통일.
페이지들이 인라인 max-width(820~1200px)+margin:0 auto로 제각각 가운데 정렬하던 것을 여기서 눌러 이긴다. */
/* margin:auto가 그리드 아이템에서는 shrink-to-fit을 일으킨다(본문이 내용 폭으로 쪼그라들며 치우침) - 양쪽 다 0으로 눌러 stretch시킨다 */
#content[data-side] > *:not(#settings-side) { margin-left: 0 !important; margin-right: 0 !important; max-width: 1080px !important; }
/* 트리로 옮긴 페이지 상단 탭 줄(데스크톱): 탭 버튼·드롭다운은 숨기고, 우측 꼬리(노션관리의 스키마 새로고침·카드 순서)만 남긴다.
탭 순서 버튼(↕ 순서)은 noOrder로 제거됐고 순서 변경은 트리 드래그가 담당한다. 기안 양식(dt-subtabs)은 꼬리가 없어 통째로 숨긴다. */
#content[data-side] #nm-subtabs .att-tab, #content[data-side] #vn-subtabs .att-tab, #content[data-side] #nset-subtabs .att-tab, #content[data-side] #sgm-tabs .att-tab,
#content[data-side] #nm-subtabs .att-tab-select, #content[data-side] #vn-subtabs .att-tab-select, #content[data-side] #nset-subtabs .att-tab-select, #content[data-side] #sgm-tabs .att-tab-select { display: none; }
#content[data-side] #nm-subtabs, #content[data-side] #vn-subtabs, #content[data-side] #nset-subtabs, #content[data-side] #sgm-tabs { border-bottom: none; padding: 0 !important; margin-bottom: 8px; justify-content: flex-end; }
#content[data-side] #nm-subtabs .att-tab-tail, #content[data-side] #vn-subtabs .att-tab-tail, #content[data-side] #nset-subtabs .att-tab-tail, #content[data-side] #sgm-tabs .att-tab-tail { position: static; transform: none; margin-left: auto; }
#content[data-side] #dt-subtabs { display: none !important; }
/* 트리 3단계(페이지 안 서브탭) */
.ss-sub3 { margin: 1px 0 3px 24px; border-left: 1px dashed var(--border); padding-left: 5px; }
.ss-sub3 .ss-item.s3 { padding: 5px 8px; font-size: 12px; }
/* 트리 메뉴 순서 드래그(권한자) - 손잡이는 행 안에 작게, 놓을 자리는 윗줄로 표시(.ds-item.ds-over 공용 규칙) */
#settings-side .ds-grip { padding: 0 1px; margin-left: -4px; }
#settings-side .ds-grip svg { width: 8px; height: 13px; display: block; }
/* 설정 페이지 카드 순서 드래그(권한자) - 그립이 카드 왼쪽 여백에 떠 있고, 모바일에서는 숨김 */
.pgc-wrap { position: relative; }
.pgc-wrap > .pgc-grip { position: absolute; left: -17px; top: 15px; display: inline-flex; opacity: .35; }
.pgc-wrap:hover > .pgc-grip { opacity: .9; }
@media (max-width: 720px) { .pgc-wrap > .pgc-grip { display: none; } }
#settings-side .ss-inner { position: sticky; top: 0; padding-bottom: 24px; }
.ss-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; margin-bottom: 8px; background: var(--surface); color: var(--text-muted); }
.ss-search svg { flex: none; }
.ss-search input, .ss-search .ce-input { border: none; outline: none; background: transparent; width: 100%; min-width: 0; font-size: 12.5px; font-family: inherit; color: var(--text); }
.ss-sec { font-size: 11px; font-weight: 800; color: var(--text-muted); letter-spacing: .4px; padding: 12px 8px 5px; }
.ss-grp { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); user-select: none; }
.ss-grp:hover { background: rgba(125, 125, 125, .09); }
.ss-grp .chev { margin-left: auto; font-size: 10px; color: var(--text-muted); }
.ss-grp.active { background: rgba(65, 105, 225, .1); color: var(--primary); }
.ss-sub { margin: 1px 0 3px 15px; border-left: 1px solid var(--border); padding-left: 5px; }
.ss-item { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--text-muted); user-select: none; }
.ss-item:hover { background: rgba(125, 125, 125, .09); color: var(--text); }
.ss-item.active { background: rgba(65, 105, 225, .1); color: var(--primary); font-weight: 700; }
.ss-item svg, .ss-grp svg { flex: none; opacity: .85; }
/* 모바일: 사이드바 대신 현재 위치 바 + 전체 메뉴 오버레이(리스트 허브) */
.ss-mbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ss-mbar .crumb { font-size: 12px; color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#settings-hub-overlay { position: fixed; inset: 0; z-index: 3200; background: var(--bg); overflow-y: auto; padding: 14px 16px 28px; }
#settings-hub-overlay .sh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 16px; }
#settings-hub-overlay .ss-search { padding: 9px 12px; border-radius: 99px; }
.sh-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sh-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--border); color: var(--text); }
.sh-row:last-child { border-bottom: none; }
.sh-row:active { background: rgba(125, 125, 125, .09); }
.sh-row.active { color: var(--primary); font-weight: 700; }
.sh-row .chev { margin-left: auto; color: var(--text-muted); font-size: 15px; }
.sh-row svg { flex: none; opacity: .85; }
@media (max-width: 720px) {
#content[data-side] { display: block; }
#settings-side { display: none; }
}
/* 시스템 관리 하위 줄(묶음 안의 페이지) - 윗줄(묶음)과 구분되게 작은 알약형, 밑줄 없음 */
#settings-sub-bar { border-bottom: none; margin-top: -10px; margin-bottom: 16px; gap: 4px; }
#settings-sub-bar .att-tab { font-size: 13px; padding: 6px 12px; border-bottom: none; border-radius: 99px; margin-bottom: 0; }
#settings-sub-bar .att-tab.active { background: #eff6ff; color: var(--primary); font-weight: 700; }
.att-tab { border: none; background: none; cursor: pointer; padding: 10px 16px; font-size: 14px; font-weight: 500; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: 6px 6px 0 0; }
.att-tab:hover { color: var(--primary); background: #f3f4f6; }
.att-tab.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }
.att-tab .icon { width: 15px; height: 15px; vertical-align: -2.5px; margin-right: 5px; } /* 라인 아이콘(흑백톤) - 텍스트 색을 따라감(활성=파랑) */
/* 세그먼트 버튼 그룹: 통계현황 결재/차량 전환 등 - 모바일에서도 버튼 유지 */
.seg-group { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); flex-shrink: 0; }
.seg-group button { border: none; background: none; cursor: pointer; padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg-group button + button { border-left: 1px solid var(--border); }
.seg-group button:hover { color: var(--primary); }
.seg-group button.active { background: var(--primary); color: #fff; }
.seg-group .icon { width: 15px; height: 15px; }
@media (max-width: 640px) { .seg-group button { padding: 7px 9px; font-size: 12.5px; gap: 4px; } } /* 모바일: 탭·기간 그룹이 한 줄에 들어가도록 */
/* 모바일 탭 드롭다운: 데스크톱은 숨김, 모바일은 탭 버튼 대신 드롭다운 노출 */
.att-tab-select { display: none; }
@media (max-width: 640px) {
.att-tab { padding: 9px 10px; font-size: 13px; }
.att-subtabs .att-tab, .att-subtabs .att-tab-edit { display: none; }
.att-subtabs { gap: 0; border-bottom: none; margin-bottom: 14px; }
.att-tab-select { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; font-weight: 700; color: var(--primary); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.att-subtabs.editing .att-tab { display: inline-block; } /* 편집 모드는 버튼 유지 */
}
/* 부서별 브리핑: 모바일에서 부서 칩 버튼 대신 드롭다운 */
.db-dept-select { display: none; }
/* 데스크톱: 조회 일자 위, 부서 선택 아래로 세로 배치 */
.db-f-date { margin-bottom: 12px; }
.db-f-dept { margin-bottom: 8px; }
@media (max-width: 640px) {
#db-dept-chips > button { display: none; }
.db-dept-select { display: block; width: 100%; }
/* 모바일: 조회 일자 + 부서 선택을 한 줄로 (라벨·셀렉트 모두 정렬) */
.db-filters { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.db-f-date, .db-f-dept { flex: 1; min-width: 0; margin-bottom: 0; }
.db-f-date > .form-label, .db-f-dept > .form-label { display: block; margin: 0 0 5px; font-size: 12px; line-height: 1.3; } /* 라벨 높이·간격 통일 */
.db-f-date br { display: none; } /* 조회 일자 라벨-셀렉트 간격을 부서 선택과 동일하게 */
.db-f-date select#db-snapdate { width: 100% !important; box-sizing: border-box; }
.db-date-hint { display: none; } /* 좁은 폭에서 라벨 줄바꿈 방지(안내는 하단 힌트에 있음) */
}
/* 탭 순서 변경 */
.att-tab-edit { margin-left: auto; align-self: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; margin-bottom: 6px; }
.att-tab-edit:hover { color: var(--primary); border-color: var(--primary); }
.att-tab-edit.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 근태 탭바 '현재 탭 즐겨찾기' 버튼 - 우측 그룹 [☆ 즐겨찾기][↕ 순서 변경] 한 줄 정렬 */
.att-fav-btn { align-self: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; padding: 3px 9px; font-size: 15px; line-height: 1.4; font-weight: 600; border-radius: 8px; margin-bottom: 6px; margin-left: auto; white-space: nowrap; }
.att-fav-btn:hover { color: var(--primary); border-color: var(--primary); }
.att-fav-btn.on { color: #f59e0b; border-color: #f59e0b; }
#att-subtabs .att-tab-edit { margin-left: 6px; } /* 즐겨찾기가 auto 마진을 가지므로 순서 변경은 바로 옆에 */
@media (max-width: 640px) {
/* 모바일: 드롭다운과 같은 줄 우측에 배치(아래로 꺾임 방지) */
.att-subtabs .att-tab-select { flex: 1 1 auto; width: auto; min-width: 0; }
.att-fav-btn { margin: 0 0 0 8px; }
#settings-hub-bar, #settings-sub-bar { padding: 0; } /* 모바일은 드롭다운만 보이므로 센터링용 좌우 패딩 해제 */
#content[data-hub="sys"] .att-subtabs { padding: 0; } /* 같은 이유 - 하위 탭 줄도 드롭다운으로 바뀐다 */
#settings-sub-bar { margin-top: 0; margin-bottom: 14px; } /* 데스크톱의 -10px 당김은 드롭다운 두 개가 겹치게 만든다 */
}
.att-subtabs.editing .att-tab { cursor: grab; border: 1px dashed var(--primary); border-radius: 8px 8px 0 0; background: #eff6ff; }
.att-subtabs.editing .att-tab:active { cursor: grabbing; }
/* 토요 근무 — 팀별 그룹 */
.sat-team { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.sat-team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: #f8fafc; cursor: pointer; flex-wrap: wrap; }
.sat-team-head:hover { background: #f1f5f9; }
.sat-team-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.sat-caret { color: #9ca3af; font-size: 12px; width: 12px; display: inline-block; }
.sat-team-count { font-size: 12px; font-weight: 600; color: var(--primary); background: #eff6ff; border-radius: 10px; padding: 1px 9px; }
.sat-team .table-wrap { border-top: 1px solid var(--border); }
.sat-team .doc-table { margin: 0; }
/* ── 부서 칩 (사용자관리 페이지) ── */
.dept-chip {
display: inline-flex; align-items: center; gap: 4px;
background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
border-radius: 20px; padding: 4px 10px; font-size: 13px; font-weight: 500;
}
.dept-chip-del {
background: none; border: none; cursor: pointer; color: #93c5fd;
font-size: 15px; line-height: 1; padding: 0; margin-left: 2px;
transition: color .1s;
}
.dept-chip-del:hover { color: #e02424; }
/* ── 부서 관리 ── */
.dept-mgr-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.dept-mgr-row:last-child { border-bottom: none; }
.dept-mgr-name { flex: 1; font-size: 14px; font-weight: 500; }
.dept-mgr-actions { display: flex; gap: 4px; flex-shrink: 0; }
.dept-mgr-branch { color: #d1d5db; margin-right: 6px; }
.dept-mgr-empty { color: var(--text-muted); font-size: 13px; padding: 8px; }
.dept-mgr-del { background: #fef2f2; color: #c81e1e; border: 1px solid #fca5a5; }
.dept-mgr-del:hover { background: #fee2e2; }
/* 추가/편집 폼 패널 - JS가 display를 바꾸면 인라인 hex 보정이 풀리므로 클래스로 고정 */
.dept-form-panel {
margin-top: 16px; padding: 16px; border-radius: 8px;
background: #f9fafb; border: 1px solid var(--border);
}
.dept-color-pick { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.dept-color-custom { width: 28px; height: 28px; border: none; border-radius: 5px; cursor: pointer; padding: 0; }
.dept-color-reset {
font-size: 11px; color: var(--text-muted); background: #f3f4f6;
border: none; border-radius: 5px; padding: 4px 8px; cursor: pointer;
}
.dept-color-reset:hover { background: #e5e7eb; }
html[data-theme="dark"] .dept-form-panel { background: #1a2029; }
html[data-theme="dark"] .dept-mgr-branch { color: #4a5262; }
html[data-theme="dark"] .dept-mgr-del { background: #2a1618; color: #ff8a8a; border-color: #5c2b2f; }
html[data-theme="dark"] .dept-mgr-del:hover { background: #3a1c20; }
html[data-theme="dark"] .dept-color-reset { background: #2b333d; color: var(--text-muted); }
html[data-theme="dark"] .dept-color-reset:hover { background: #363f4b; }
/* ── 조직도 페이지 ── */
.org-page { display: flex; flex-direction: column; align-items: center; padding: 24px 0; }
.org-top-row { display: flex; gap: 16px; justify-content: center; }
.org-connector-h {
width: 2px; height: 32px; background: var(--border); margin: 0 auto;
}
.org-dept-row {
display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;
padding-top: 0; position: relative;
}
.org-dept-row::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 80%; height: 2px; background: var(--border);
}
.org-dept-column {
display: flex; flex-direction: column; align-items: center; gap: 0;
position: relative;
}
.org-dept-column::before {
content: ''; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
width: 2px; height: 16px; background: var(--border);
}
.org-dept-label, .org-dept-name-badge {
font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase;
letter-spacing: .06em; padding: 4px 12px;
background: #e5e7eb; border-radius: 20px; display: inline-block;
}
.org-dept-members { display: flex; flex-direction: column; align-items: center; gap: 0; }
.org-vert-line { width: 2px; height: 16px; background: var(--border); margin: 0 auto; }
.org-dept-header { margin-bottom: 8px; }
/* 계층 트리 노드 */
.org-tree-node {
display: flex; flex-direction: column; align-items: center;
position: relative;
}
.org-tree-node::before {
content: ''; display: block; width: 2px; height: 16px;
background: var(--border); margin: 0 auto;
}
.org-children {
display: flex; gap: 32px; margin-top: 0; padding-top: 16px; position: relative;
flex-wrap: wrap; justify-content: center;
}
.org-children::before {
content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 2px;
background: var(--border);
}
.org-children > .org-tree-node { padding-top: 0; }
.org-node-card {
width: 140px; background: #fff; border: 2px solid var(--border);
border-radius: 12px; padding: 14px 10px; text-align: center;
box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: box-shadow .15s, transform .15s;
}
.org-node-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.org-node-card.ceo { width: 160px; }
.org-avatar {
width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 8px;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700;
}
.org-node-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.org-node-dept {
font-size: 11px; border-radius: 4px; padding: 2px 6px;
display: inline-block; margin-bottom: 2px;
}
.org-node-leave { font-size: 11px; color: #6b7280; margin-top: 6px; border-top: 1px solid #f3f4f6; padding-top: 6px; }
.org-node-leave b { color: #065f46; }
/* ── KakaoWork 스타일 조직도 페이지 ── */
.kw-org-page { display: flex; height: calc(100vh - 104px); gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* 왼쪽 트리 패널 */
.kw-tree-panel { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; background: #fff; min-width: 160px; max-width: 480px; }
.oc-tree-expand-btn { display: none; } /* 데스크톱에선 숨김(모바일 전용 부서패널 펼치기/접기) */
/* 리사이저 */
.kw-resizer {
width: 6px; flex-shrink: 0; cursor: col-resize;
background: var(--border); position: relative; transition: background .15s;
display: flex; align-items: center; justify-content: center;
}
.kw-resizer:hover { background: #bfdbfe; }
.kw-resizer-active { background: var(--primary) !important; }
.kw-resizer::after {
content: '⋮'; color: #9ca3af; font-size: 14px; line-height: 1;
pointer-events: none;
}
.kw-resizer:hover::after { color: var(--primary); }
.kw-tree-search { padding: 12px; border-bottom: 1px solid var(--border); }
.kw-tree-search input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 13px; outline: none; background: #f9fafb; }
.kw-tree-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.kw-tree-footer { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; gap: 4px; align-items: center; }
.kw-tree-footer .kw-tf-btn { background: none; border: 1px solid var(--border); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; color: #6b7280; }
.kw-tree-footer .kw-tf-btn:hover { background: #f3f4f6; color: var(--primary); }
.kw-tf-spacer { flex: 1; }
.kw-tree-node { user-select: none; }
.kw-tree-row { display: flex; align-items: center; padding: 5px 8px; cursor: pointer; gap: 3px; font-size: 13px; white-space: nowrap; overflow: hidden; user-select: none; }
.kw-tree-row:hover { background: #f3f4f6; }
.kw-tree-row.selected { background: #eff6ff; color: var(--primary); font-weight: 600; }
.kw-drag-handle { color: #d1d5db; font-size: 13px; cursor: grab; flex-shrink: 0; }
.kw-drag-handle:active { cursor: grabbing; }
.kw-drag-node[draggable] { cursor: default; }
/* 드롭 위치 표시 */
.kw-drop-before { border-top: 2px solid var(--primary) !important; background: #eff6ff !important; }
.kw-drop-after { border-bottom: 2px solid var(--primary) !important; background: #eff6ff !important; }
.kw-drop-into { background: #dbeafe !important; outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 4px; }
.kw-tree-toggle { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 11px; flex-shrink: 0; cursor: pointer; }
.kw-tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kw-tree-count { font-size: 11px; color: #9ca3af; flex-shrink: 0; }
/* 오른쪽 멤버 패널 */
.kw-member-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.kw-mp-header { padding: 14px 20px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.kw-mp-title { font-size: 15px; font-weight: 700; }
.kw-mp-subtitle { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.kw-mp-search { padding: 0 4px; }
.kw-mp-search input { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 13px; outline: none; width: 240px; background: #f9fafb; }
.kw-mp-body { flex: 1; overflow-y: auto; }
.kw-mp-footer { padding: 10px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.kw-mp-footer-btn { font-size: 13px; color: var(--primary); background: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.kw-mp-footer-btn:hover { background: #f3f4f6; }
.kw-mp-footer-count { font-size: 13px; color: #6b7280; }
/* 멤버 테이블 행 */
.kw-member-table { width: 100%; border-collapse: collapse; }
.kw-member-table th { font-size: 12px; color: #6b7280; font-weight: 500; padding: 8px 16px; border-bottom: 1px solid var(--border); text-align: left; background: #fafafa; white-space: nowrap; }
.kw-member-table td { padding: 10px 16px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; font-size: 13px; white-space: nowrap; }
.kw-member-table tr:hover td { background: #f9fafb; }
.kw-member-avatar { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.kw-member-name-cell { display: flex; align-items: center; gap: 10px; }
.kw-member-name { font-weight: 600; font-size: 13px; white-space: nowrap; }
.kw-member-sub { font-size: 11px; color: #9ca3af; margin-top: 1px; white-space: nowrap; }
.kw-member-tag { display: inline-block; font-size: 10px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: #6b7280; margin-left: 4px; }
.kw-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.kw-status-active { background: #0e9f6e; }
.kw-status-inactive { background: #d1d5db; }
.kw-3dot { background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; color: #9ca3af; font-size: 18px; }
.kw-3dot:hover { background: #f3f4f6; color: #374151; }
/* ── KakaoWork 스타일 멤버 관리 (admin 페이지) ── */
.kw-admin-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.kw-admin-search { flex: 1; max-width: 300px; }
.kw-admin-search input, .kw-admin-search .vs-ce { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font-size: 13px; outline: none; box-sizing: border-box; min-height: 35px; line-height: 18px; }
.kw-admin-btns { display: flex; gap: 8px; margin-left: auto; }
.kw-admin-table { width: 100%; border-collapse: collapse; }
.kw-admin-table th { font-size: 12px; color: #6b7280; font-weight: 500; padding: 10px 14px; border-bottom: 2px solid var(--border); text-align: left; background: #fafafa; white-space: nowrap; cursor: pointer; }
.kw-admin-table th:hover { color: var(--primary); }
.kw-admin-table td { padding: 10px 14px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; font-size: 13px; }
.kw-admin-table tr:hover td { background: #f9fafb; }
/* ── 멤버 모달 (사용자 추가/편집) ── */
.um-photo-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.um-photo-wrap { position: relative; width: 80px; height: 80px; cursor: pointer; }
.um-photo-placeholder { width: 80px; height: 80px; border-radius: 16px; background: #e5e7eb; display: flex; align-items: center; justify-content: center; }
.um-photo-edit { position: absolute; bottom: -4px; right: -4px; width: 24px; height: 24px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.um-photo-label { font-size: 12px; color: #9ca3af; margin-top: 6px; }
.um-radio-group { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.um-radio { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.um-org-row { display: flex; gap: 8px; align-items: center; }
.um-org-btn { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #374151; text-align: left; }
.um-org-btn:hover { border-color: var(--primary); }
.um-org-icon { color: #9ca3af; }
html[data-theme="dark"] .um-org-btn { background: #1f2630; color: var(--text); border-color: #333b47; }
html[data-theme="dark"] .um-org-row > label { color: #a7b2c2 !important; }
/* 조직 선택 모달 트리 */
.uot-node { user-select: none; }
.uot-row { display: flex; align-items: center; padding: 6px 16px; cursor: pointer; gap: 6px; font-size: 13px; }
.uot-row:hover { background: #f3f4f6; }
.uot-row.selected { background: #eff6ff; color: var(--primary); font-weight: 600; }
.uot-toggle { width: 14px; flex-shrink: 0; color: #9ca3af; font-size: 10px; }
.uot-name { flex: 1; }
/* ── 직책/직위 관리 ── */
.pos-list { border-bottom: 1px solid var(--border); }
.pos-item {
display: flex; align-items: center; gap: 8px; padding: 10px 16px;
border-bottom: 1px solid #f3f4f6; cursor: grab; transition: background .1s;
}
.pos-item:hover { background: #f9fafb; }
.pos-item:active { cursor: grabbing; }
.pos-drag { color: #d1d5db; font-size: 16px; cursor: grab; }
.pos-order { width: 20px; font-size: 12px; color: #9ca3af; text-align: center; flex-shrink: 0; }
.pos-name { flex: 1; font-size: 13px; font-weight: 500; }
.pos-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.pos-item:hover .pos-actions { opacity: 1; }
.pos-btn { background: none; border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; cursor: pointer; font-size: 12px; }
.pos-btn:hover { background: #f3f4f6; }
.pos-btn-del:hover { background: #fef2f2; border-color: #fca5a5; }
.pos-add-row { display: flex; gap: 8px; padding: 10px 16px; align-items: center; }
.pos-usage-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pos-usage-name { width: 70px; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.pos-usage-bar-wrap { flex: 1; height: 6px; background: #f3f4f6; border-radius: 3px; overflow: hidden; }
.pos-usage-bar { height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s; min-width: 2px; }
.pos-usage-count { width: 28px; font-size: 12px; color: #6b7280; text-align: right; flex-shrink: 0; }
.pos-usage-avatars { display: flex; align-items: center; gap: 3px; }
.pos-usage-av {
width: 22px; height: 22px; border-radius: 50%; background: var(--primary);
color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
/* ── 조직도 차트 뷰 ── */
.oc-toolbar { display: flex; align-items: center; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.oc-zoom-btns { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.oc-zoom-btn {
width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px;
background: #fff; cursor: pointer; font-size: 16px; font-weight: 700;
display: flex; align-items: center; justify-content: center; color: #374151;
line-height: 1;
}
.oc-zoom-btn:hover { background: #f3f4f6; border-color: var(--primary); color: var(--primary); }
.oc-zoom-label { font-size: 12px; color: #6b7280; min-width: 36px; text-align: center; }
/* 스크롤 영역 */
.oc-scroll-wrap { overflow: auto; padding: 16px 0 40px; }
/* 줌 래퍼: min-width:max-content 로 스크롤 영역 확보 → 좌측 잘림 방지 */
.oc-zoom-wrap {
transform-origin: top center; transition: transform .2s;
display: flex; justify-content: center;
min-width: max-content; padding: 0 80px;
}
/* 트리 루트 */
.oc-tree { display: inline-flex; flex-direction: column; align-items: center; padding-bottom: 24px; }
/* 노드 공통 */
.oc-node { display: flex; flex-direction: column; align-items: center; position: relative; }
/* ── 연결선 ─────────────────────────────────────────────── */
/* 자식 컨테이너: margin-top 으로 부모박스와 간격 확보 */
.oc-children {
display: flex; flex-direction: row; align-items: flex-start;
position: relative; margin-top: 44px;
}
/* 부모 박스 하단 → 수평선 세로 연결선 (border 사용 → 인쇄 시 항상 출력) */
.oc-children::before {
content: ''; position: absolute; top: -44px; left: calc(50% - 1px);
width: 0; height: 44px; border-left: 2px solid #94a3b8;
}
/* 각 자식 노드: 수평선→박스 세로선(::before) + 수평선(::after) */
.oc-children > .oc-node { padding: 44px 20px 0; position: relative; }
.oc-children > .oc-node::before {
content: ''; position: absolute; top: 0; left: calc(50% - 1px);
width: 0; height: 44px; border-left: 2px solid #94a3b8;
}
.oc-children > .oc-node::after {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 0; border-top: 2px solid #94a3b8;
}
.oc-children > .oc-node:first-child::after { left: 50%; }
.oc-children > .oc-node:last-child::after { right: 50%; }
.oc-children > .oc-node:only-child::after { display: none; }
/* ─────────────────────────────────────────────────────── */
/* 노드 박스 */
.oc-box {
width: 148px; border: 1.5px solid #cbd5e1; border-radius: 8px;
overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.09);
background: #fff; color: #1f2937; flex-shrink: 0; position: relative; z-index: 1;
transition: box-shadow .15s, transform .15s; cursor: default;
}
.oc-box:hover { box-shadow: 0 4px 16px rgba(0,0,0,.15); transform: translateY(-2px); }
.oc-box-root { width: 168px; }
.oc-box-header {
background: #4169E1; color: #fff; font-size: 12px; font-weight: 700;
padding: 7px 10px; text-align: center; letter-spacing: .01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.oc-box-body { padding: 10px 8px 8px; text-align: center; }
.oc-head-name { font-size: 13px; font-weight: 700; margin-bottom: 6px; text-align: center; }
.oc-head-inline-title { font-size: 11px; font-weight: 400; color: #6b7280; }
.oc-head-title { font-size: 11px; color: #6b7280; margin-bottom: 8px; line-height: 1.4; }
.oc-member-list { border-top: 1px solid #f3f4f6; padding-top: 5px; margin-bottom: 5px; }
.oc-member-row { font-size: 11px; color: #374151; line-height: 1.8; text-align: center; }
.oc-counts { font-size: 11px; color: #374151; border-top: 1px solid #f3f4f6; padding-top: 6px; }
.oc-cnt-sep { color: #d1d5db; margin: 0 3px; }
/* 다크모드(화면 전용 - 인쇄/PDF는 흰 카드 유지): 조직도 노드 박스를 다크 테마로. 부서 헤더(컬러)는 그대로 */
@media screen {
html[data-theme="dark"] .oc-box { background: #1f2630; color: var(--text); border-color: #333b47; }
html[data-theme="dark"] .oc-head-title, html[data-theme="dark"] .oc-head-inline-title { color: #9aa5b1; }
html[data-theme="dark"] .oc-member-row, html[data-theme="dark"] .oc-counts { color: #c3ccd6; }
html[data-theme="dark"] .oc-member-list, html[data-theme="dark"] .oc-counts { border-top-color: #333b47; }
html[data-theme="dark"] .oc-cnt-sep { color: #4a5262; }
}
/* ── 부서 관리 색상 스와치 ── */
.oc-cp-swatch {
width: 24px; height: 24px; border-radius: 5px; border: 2px solid transparent;
cursor: pointer; transition: transform .1s, border-color .1s;
}
.oc-cp-swatch:hover { transform: scale(1.18); border-color: rgba(0,0,0,.2); }
.oc-cp-swatch.oc-cp-active { border-color: #4169E1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4169E1; }
/* 활성 링의 흰 간격은 패널 배경색이어야 분리돼 보임 */
html[data-theme="dark"] .oc-cp-swatch:hover { border-color: rgba(255,255,255,.25); }
html[data-theme="dark"] .oc-cp-swatch.oc-cp-active { border-color: #6ea8fe; box-shadow: 0 0 0 2px #1a2029, 0 0 0 4px #6ea8fe; }
/* ── 컨텍스트 메뉴 ── */
.ctx-item { padding: 8px 16px; cursor: pointer; font-size: 13px; color: #374151; }
.ctx-item:hover { background: #f3f4f6; }
/* ── 인쇄/PDF 출력 ── */
@media print {
body { background: #fff !important; color: #000 !important; font-size: 12px; }
#sidebar, #header, .no-print { display: none !important; }
#main { display: block !important; overflow: visible; }
#content { padding: 0; overflow: visible; }
#doc-detail-wrap { max-width: 100% !important; }
.card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
.btn { display: none !important; }
.badge { border: 1px solid #ccc !important; }
a { color: #000 !important; text-decoration: none !important; }
.timeline-icon { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.doc-header { background: #f5f5f5 !important; }
.appr2-agree-nm { color: #111 !important; } /* 다크모드에서 인쇄해도 합의자 이름은 진하게 */
/* 문서 등 일반 인쇄 용지 (기본) */
@page { size: A4 portrait; margin: 12mm; }
/* 조직도 인쇄 시에만: print-area만 표시, 나머지 전부 숨김 */
body.printing-orgchart > *:not(#oc-print-area) { display: none !important; }
body.printing-orgchart #oc-print-area { display: block !important; overflow: visible !important; page: orgchart; }
@page orgchart { size: A3 landscape; margin: 8mm; }
/* 인쇄 전용 영역 overflow 해제 */
#oc-print-tree-wrap,
#oc-print-tree-wrap .oc-tree,
#oc-print-tree-wrap .oc-node,
#oc-print-tree-wrap .oc-children { overflow: visible !important; }
/* 인쇄용 박스 소형화 */
#oc-print-area .oc-box { width: 108px !important; box-shadow: none !important; }
#oc-print-area .oc-box-root { width: 124px !important; }
#oc-print-area .oc-box-header {
font-size: 10px !important; padding: 5px 6px !important;
print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
#oc-print-area .oc-box-body { padding: 6px 5px 5px !important; }
#oc-print-area .oc-head-name { font-size: 10px !important; margin-bottom: 1px !important; }
#oc-print-area .oc-head-title { font-size: 8px !important; margin-bottom: 4px !important; }
#oc-print-area .oc-counts { font-size: 8px !important; padding-top: 3px !important; }
/* 연결선 간격 축소 + border 재정의 (혹시 모를 override) */
#oc-print-area .oc-children { margin-top: 28px !important; }
#oc-print-area .oc-children::before {
top: -28px !important; height: 28px !important;
border-left: 1.5px solid #555 !important; width: 0 !important;
}
#oc-print-area .oc-children > .oc-node { padding: 28px 6px 0 !important; }
#oc-print-area .oc-children > .oc-node::before {
height: 28px !important;
border-left: 1.5px solid #555 !important; width: 0 !important;
}
#oc-print-area .oc-children > .oc-node::after {
border-top: 1.5px solid #555 !important; height: 0 !important;
}
}
/* 인쇄 전용 영역 (평소에는 숨김) */
#oc-print-area {
display: none;
font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;
background: #fff;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.oc-print-header { font-size: 11px; color: #6b7280; margin-bottom: 10px; }
#oc-print-tree-wrap { overflow: visible; }
/* ══════════ 토글 스위치 / 테마 선택 ══════════ */
.switch { position: relative; width: 44px; height: 24px; border: none; border-radius: 12px; background: #cbd5e1; cursor: pointer; padding: 0; flex-shrink: 0; transition: background .15s; }
.switch.on { background: var(--primary); }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.switch.on .switch-knob { left: 22px; }
.theme-opt.active { border-color: var(--primary) !important; color: var(--primary) !important; box-shadow: 0 0 0 1px var(--primary) inset; }
/* ══════════ 다크 모드 ══════════ */
html[data-theme="dark"] {
--primary: #3b82f6;
--primary-dark: #2563eb;
--bg: #161b22;
--surface: #1f2630;
--border: #30363d;
--text: #e6edf3;
--text-muted: #9aa7b4;
--icon-bg: #23273a;
--icon-fg: #aab0c6;
--warn: #fbbf24;
--warn-bg: #3a2f14;
color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] #sidebar { background: #11161d; border-right-color: #232a35; color: #c9d4e0; }
html[data-theme="dark"] .nav-card, html[data-theme="dark"] .user-card { background: #1a212c; border-color: #2a323e; }
html[data-theme="dark"] .nav-divider { background: #2a323e; } /* nav-card 테두리와 같은 톤 */
html[data-theme="dark"] .user-info .name, html[data-theme="dark"] .sidebar-logo-text { color: #fff; }
/* 다크모드: 로고 'ARK'가 어두운 회색(#404040)이라 시인성 낮음 → 밝은 변형(logo-dark.svg)으로 교체 */
html[data-theme="dark"] .sidebar-logo-img { content: url('logo-dark.svg'); }
html[data-theme="dark"] .nav-item { color: #c9d4e0; }
html[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
html[data-theme="dark"] .nav-logout .nav-item:hover { background: #3a2222; color: #ff8a8a; }
html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .nav-subitem.active { background: rgba(61,90,224,.28); color: #cdd7ff; }
html[data-theme="dark"] .nav-subitem { color: #aebccb; }
html[data-theme="dark"] .nav-subitem:hover { background: rgba(255,255,255,.06); color: #fff; }
html[data-theme="dark"] .nav-sub { border-left-color: #2a323e; }
html[data-theme="dark"] th { background: #1a2029; }
html[data-theme="dark"] tr:hover td { background: #262d38; }
html[data-theme="dark"] .dash-more-btn { background: #1a2029; }
html[data-theme="dark"] .docbox-filter,
html[data-theme="dark"] .quill-wrap .ql-toolbar { background: #1a2029; }
html[data-theme="dark"] #boot-loading { background: var(--bg); }
html[data-theme="dark"] .park-fill-wrap img { content: url("logo-white.svg"); } /* 다크 배경에서는 모든 로고 로딩을 흰 로고로 */
/* 로그인 화면 */
html[data-theme="dark"] .login-bg { background: #0d1117; }
html[data-theme="dark"] .login-card { background: var(--surface); box-shadow: 0 4px 6px rgba(0,0,0,.3), 0 20px 48px rgba(0,0,0,.55); }
html[data-theme="dark"] .login-title { color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .login-card .form-label { color: var(--text); }
html[data-theme="dark"] .login-card .form-control { background: #161b22; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .login-card .form-control:focus { background: #1f2630; }
/* 아이디 통합 박스 다크 테마 */
html[data-theme="dark"] .login-card .login-id-row { background: #161b22; border-color: var(--border); }
html[data-theme="dark"] .login-card .login-id-row:focus-within { background: #1f2630; border-color: #3aaa35; }
html[data-theme="dark"] .login-card .login-id-row > #login-domain { color: var(--text); }
html[data-theme="dark"] .reset-view-bg { background: #0d1117; }
/* 문서 상세: 다크 표면 위 텍스트 보정 */
html[data-theme="dark"] .dt-fvalue { color: var(--text); }
html[data-theme="dark"] .dt-flabel { color: var(--text-muted); }
html[data-theme="dark"] .dt-info-box { background: #10243a; border-color: #1e3a5f; color: #cbd5e1; }
/* Quill 에디터/본문 */
html[data-theme="dark"] .ql-editor { color: var(--text); }
html[data-theme="dark"] .ql-snow .ql-stroke { stroke: #9aa7b4; }
html[data-theme="dark"] .ql-snow .ql-fill { fill: #9aa7b4; }
html[data-theme="dark"] .ql-snow .ql-picker { color: #9aa7b4; }
html[data-theme="dark"] .ql-snow .ql-picker-options { background: var(--surface); }
/* ── 인라인 스타일(공백 없는 표기 #xxx) 중립색 보정 ──
상태 배지의 파스텔 색은 그대로 둠(어두운 배경에서도 가독성 유지) */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background:#fbfbfd"],
html[data-theme="dark"] [style*="background:#f8fafc"] { background-color: var(--surface) !important; }
html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background:#f1f5f9"] { background-color: #2b333d !important; }
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color:#111;"],
html[data-theme="dark"] [style*="color:#1f2937"] { color: var(--text) !important; }
html[data-theme="dark"] [style*="color:#374151"] { color: #cbd5e1 !important; }
html[data-theme="dark"] [style*="color:#6b7280"] { color: #9aa7b4 !important; }
html[data-theme="dark"] [style*="color:#9ca3af"] { color: #818d9b !important; }
html[data-theme="dark"] [style*="color:#4b5563"] { color: #b6c2cf !important; }
html[data-theme="dark"] [style*="color:#1e40af"],
html[data-theme="dark"] [style*="color:#1e3a8a"],
html[data-theme="dark"] [style*="color:#4169E1"] { color: #6ea8fe !important; }
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-top:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-bottom:1px solid #e5e7eb"] { border-color: var(--border) !important; }
/* 차량 세부 작업내역(_VT 팔레트)·세부정보 등 잔여 인라인 잉크색 보정 - 어두워진 카드 위 진회색 글자 */
html[data-theme="dark"] [style*="color:#232936"] { color: var(--text) !important; }
html[data-theme="dark"] [style*="color:#3a4152"],
html[data-theme="dark"] [style*="color:#4a5262"] { color: #cbd5e1 !important; }
html[data-theme="dark"] [style*="color:#5a6273"],
html[data-theme="dark"] [style*="color:#6a7285"] { color: #a7b2c2 !important; }
html[data-theme="dark"] [style*="color:#8a93a8"] { color: #96a1b6 !important; }
html[data-theme="dark"] [style*="color:#7c86a8"] { color: #9aa6bd !important; }
html[data-theme="dark"] [style*="color:#4a56b8"] { color: #aab8ec !important; }
html[data-theme="dark"] [style*="color:#3b5bdb"] { color: #93a8f4 !important; }
/* 연회색 배경 패널·칩 → 다크 (짝지어진 글자색은 위에서 밝게 보정됨) */
html[data-theme="dark"] [style*="background:#f7f8fb"],
html[data-theme="dark"] [style*="background:#fcfcfe"],
html[data-theme="dark"] [style*="background:#fafbfc"],
html[data-theme="dark"] [style*="background:#fafbfd"],
html[data-theme="dark"] [style*="background:#f6f7fb"],
html[data-theme="dark"] [style*="background:#f5f7fd"],
html[data-theme="dark"] [style*="background:#eef1f6"],
html[data-theme="dark"] [style*="background:#e9edf3"],
html[data-theme="dark"] [style*="background:#eef1fb"] { background-color: #232b36 !important; }
html[data-theme="dark"] [style*="background:#e7ebf7"] { background-color: #2a3450 !important; }
html[data-theme="dark"] [style*="background:#eceef3"],
html[data-theme="dark"] [style*="background:#e6e9f0"] { background-color: #2b333d !important; }
/* 밝은 실선 보더 → 다크 보더 (아래 hex는 보더 용도로만 사용) */
html[data-theme="dark"] [style*="#e6e8ee"],
html[data-theme="dark"] [style*="solid #eef0f4"],
html[data-theme="dark"] [style*="solid #f4f5f8"],
html[data-theme="dark"] [style*="solid #f2f3f7"],
html[data-theme="dark"] [style*="solid #f1f3f7"],
html[data-theme="dark"] [style*="solid #e4e7ee"],
html[data-theme="dark"] [style*="solid #dde1ea"],
html[data-theme="dark"] [style*="solid #d5dae3"],
html[data-theme="dark"] [style*="solid #cdd6ec"],
html[data-theme="dark"] [style*="solid #eceef3"],
html[data-theme="dark"] [style*="solid #edeef2"],
html[data-theme="dark"] [style*="solid #dce0e8"],
html[data-theme="dark"] [style*="solid #edeff3"],
html[data-theme="dark"] [style*="solid #e2e5ec"] { border-color: var(--border) !important; }
/* 작업현황 보드 레인(라이트 고정 배경 보정) */
/* 작업현황 보드(1b 스트라이프 카드) 다크 */
html[data-theme="dark"] .ws-board-lane, html[data-theme="dark"] .ws-board-lane-head { background: #171d26; }
html[data-theme="dark"] .ws-board-count { background: #2b333d; color: #9aa7b4; }
html[data-theme="dark"] .ws-board-card { background: #1f2630; border-color: #2a323e; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
html[data-theme="dark"] .ws-board-card:hover { box-shadow: 0 4px 13px rgba(0,0,0,.5); }
html[data-theme="dark"] .wsb-plate { color: #e9eef5; }
html[data-theme="dark"] .wsb-sub { color: #b6c2cf; }
html[data-theme="dark"] .wsb-stage { color: #9aa7b4; }
html[data-theme="dark"] .wsb-bottom { color: #8fa0b3; }
html[data-theme="dark"] .wsb-metric span { color: #788492; }
html[data-theme="dark"] .wsb-metric .wsb-metric-sub { color: #5b6672; }
html[data-theme="dark"] .ws-board::-webkit-scrollbar-thumb, html[data-theme="dark"] .ws-board-cards::-webkit-scrollbar-thumb { background: #39424e; }
html[data-theme="dark"] .ws-board::-webkit-scrollbar-thumb:hover, html[data-theme="dark"] .ws-board-cards::-webkit-scrollbar-thumb:hover { background: #475161; }
/* 대시보드·차량 리스트(vs-*) 다크: 클래스 고정색 보정 */
html[data-theme="dark"] .vs-item { border-bottom-color: #232a35; }
html[data-theme="dark"] .vs-item:hover { background: #232b36; }
html[data-theme="dark"] .vs-plate { color: #e9eef5; }
html[data-theme="dark"] .vs-item-sub { color: #a7b2c2; }
html[data-theme="dark"] .vs-avatar { background: #222c48; color: #9db1f7; }
html[data-theme="dark"] .vs-pill.prog { background: #20294a; color: #9db1f7; }
html[data-theme="dark"] .vs-pill.done { background: #12312a; color: #5fd3a9; }
html[data-theme="dark"] .vs-result { border-top-color: var(--border); }
html[data-theme="dark"] .vs-chip { background: #1f2630; border-color: #2a323e; color: #a7b2c2; }
html[data-theme="dark"] .vs-chip.on { background: #4263eb; border-color: #4263eb; color: #fff; }
/* 차량 검색 입력줄 다크모드(밝은 배경으로 남던 문제) */
html[data-theme="dark"] .vs-instant-input { background: #1f2630; border-color: #333b47; color: var(--text); }
html[data-theme="dark"] .vs-instant-input:focus { background: #232b36; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(66,99,235,.2); }
/* 부서 pill·탭 hover가 밝은 회색(#f3f4f6)으로 떠서 부적절하던 문제 - 다크 hover로 */
html[data-theme="dark"] .ws-dept-pill:hover { background: #2a323e; }
html[data-theme="dark"] .att-tab:hover { background: #232b36; }
html[data-theme="dark"] #settings-sub-bar .att-tab.active { background: #1e2a3d; } /* 하위 줄 활성 알약 - 밝은 #eff6ff는 어두운 배경에서 튄다 */
/* 인라인 배지(작업 성격·AS건·부품대기·임박 아바타 등) 다크: 연한 배경/진한 글자 → 어두운 배경/밝은 글자 */
html[data-theme="dark"] [style*="background:#eff6ff"] { background-color: #16233d !important; }
html[data-theme="dark"] [style*="background:#f5f3ff"] { background-color: #241d3d !important; }
html[data-theme="dark"] [style*="background:#fff7ed"] { background-color: #39230f !important; }
html[data-theme="dark"] [style*="background:#ecfdf5"] { background-color: #0f2b22 !important; }
html[data-theme="dark"] [style*="background:#fff4e6"] { background-color: #3a2a18 !important; }
html[data-theme="dark"] [style*="background:#e8f1ff"] { background-color: #182741 !important; }
html[data-theme="dark"] [style*="background:#fef2f2"] { background-color: #3a2026 !important; }
html[data-theme="dark"] [style*="background:#eef1fb"] { background-color: #222c48 !important; }
html[data-theme="dark"] [style*="background:#eef2f7"] { background-color: #2b333d !important; }
html[data-theme="dark"] [style*="background:#eef2ff"] { background-color: #232c48 !important; }
html[data-theme="dark"] [style*="background:#fbfbff"] { background-color: #1f2733 !important; }
html[data-theme="dark"] [style*="color:#4338ca"] { color: #a5b4fc !important; }
html[data-theme="dark"] [style*="solid #c7d2fe"] { border-color: #3a4788 !important; }
html[data-theme="dark"] [style*="color:#6d28d9"] { color: #b79cf7 !important; }
html[data-theme="dark"] [style*="color:#c2410c"] { color: #ff9e66 !important; }
html[data-theme="dark"] [style*="color:#047857"] { color: #4fd6a5 !important; }
html[data-theme="dark"] [style*="color:#475569"] { color: #aab6c4 !important; }
html[data-theme="dark"] [style*="color:#d9480f"] { color: #ff9b62 !important; }
html[data-theme="dark"] [style*="color:#1d4ed8"] { color: #8ab1ff !important; }
html[data-theme="dark"] [style*="color:#b91c1c"] { color: #f28b98 !important; }
html[data-theme="dark"] [style*="color:#e02424"] { color: #f47171 !important; }
html[data-theme="dark"] [style*="color:#e8590c"] { color: #ff8c5a !important; }
html[data-theme="dark"] [style*="color:#334155"] { color: #c3cede !important; }
html[data-theme="dark"] [style*="solid #bfdbfe"] { border-color: #2c4a7c !important; }
html[data-theme="dark"] [style*="solid #ddd6fe"] { border-color: #443577 !important; }
html[data-theme="dark"] [style*="solid #fed7aa"] { border-color: #7a4a1f !important; }
html[data-theme="dark"] [style*="solid #e2e8f0"] { border-color: #3a4351 !important; }
html[data-theme="dark"] [style*="solid #a7f3d0"] { border-color: #1c5c46 !important; }
html[data-theme="dark"] [style*="solid #ffd8a8"] { border-color: #7c4a12 !important; }
/* 부서별 브리핑(.db-scroll): 이메일 레이아웃 그대로 렌더 — 위 인라인 다크 변환을 원래 색으로 되돌림(라이트 카드) */
html[data-theme="dark"] .db-scroll [style*="background:#fff"],
html[data-theme="dark"] .db-scroll [style*="background:#ffffff"] { background-color: #ffffff !important; }
html[data-theme="dark"] .db-scroll [style*="background:#fafafa"] { background-color: #fafafa !important; }
html[data-theme="dark"] .db-scroll [style*="background:#f9fafb"] { background-color: #f9fafb !important; }
html[data-theme="dark"] .db-scroll [style*="background:#f8fafc"] { background-color: #f8fafc !important; }
html[data-theme="dark"] .db-scroll [style*="background:#f3f4f6"] { background-color: #f3f4f6 !important; }
html[data-theme="dark"] .db-scroll [style*="background:#f1f5f9"] { background-color: #f1f5f9 !important; }
html[data-theme="dark"] .db-scroll [style*="color:#111827"] { color: #111827 !important; }
html[data-theme="dark"] .db-scroll [style*="color:#111;"] { color: #111 !important; }
html[data-theme="dark"] .db-scroll [style*="color:#1f2937"] { color: #1f2937 !important; }
html[data-theme="dark"] .db-scroll [style*="color:#374151"] { color: #374151 !important; }
html[data-theme="dark"] .db-scroll [style*="color:#6b7280"] { color: #6b7280 !important; }
html[data-theme="dark"] .db-scroll [style*="color:#9ca3af"] { color: #9ca3af !important; }
html[data-theme="dark"] .db-scroll [style*="color:#4b5563"] { color: #4b5563 !important; }
html[data-theme="dark"] .db-scroll [style*="color:#1e40af"] { color: #1e40af !important; }
html[data-theme="dark"] .db-scroll [style*="color:#1e3a8a"] { color: #1e3a8a !important; }
html[data-theme="dark"] .db-scroll [style*="color:#4169E1"] { color: #4169E1 !important; }
html[data-theme="dark"] .db-scroll [style*="1px solid #e5e7eb"] { border-color: #e5e7eb !important; }
/* 전역 표 스타일(다크 th 배경·hover)이 흰 브리핑 카드에 새어들지 않게 */
html[data-theme="dark"] .db-scroll th { background: transparent !important; }
html[data-theme="dark"] .db-scroll tr:hover td { background: transparent !important; }
/* 연차 카드 */
html[data-theme="dark"] .leave-balance-card { background: linear-gradient(135deg, #16263a 0%, #11251c 100%); border-color: #234567; }
html[data-theme="dark"] .leave-num { color: #6ea8fe; }
html[data-theme="dark"] .leave-stat.used .leave-num { color: #fbbf77; }
html[data-theme="dark"] .leave-stat.remain .leave-num { color: #6ee7b7; }
html[data-theme="dark"] .leave-bar { background: #30363d; }
/* ── 다크모드 시인성 보강: 클래스로 하드코딩된 밝은 배경 컨테이너(인라인 오버라이드 미적용분) ── */
/* 결재 의견 카드 */
html[data-theme="dark"] .opinion-card { background: var(--surface); }
html[data-theme="dark"] .opinion-comment { color: #cbd5e1; }
/* 조직도 관리(왼쪽 트리 + 멤버 패널) */
html[data-theme="dark"] .kw-org-page,
html[data-theme="dark"] .kw-tree-panel { background: var(--surface); }
html[data-theme="dark"] .kw-tree-search input,
html[data-theme="dark"] .kw-mp-search input,
html[data-theme="dark"] .kw-admin-search input, html[data-theme="dark"] .kw-admin-search .vs-ce { background: #161b22; color: var(--text); }
html[data-theme="dark"] .kw-tree-row:hover,
html[data-theme="dark"] .kw-member-table tr:hover td,
html[data-theme="dark"] .kw-admin-table tr:hover td,
html[data-theme="dark"] .kw-tree-footer .kw-tf-btn:hover,
html[data-theme="dark"] .kw-mp-footer-btn:hover,
html[data-theme="dark"] .kw-3dot:hover,
html[data-theme="dark"] .pos-item:hover { background: #262d38; }
html[data-theme="dark"] .kw-tree-row.selected,
/* hover 배경 보정 - 라이트용 밝은 회색(#f3f4f6/#f1f5f9)이 다크에서 흰 줄로 튀던 것들 */
html[data-theme="dark"] .uot-row:hover,
html[data-theme="dark"] .ws-grp-btn:hover,
html[data-theme="dark"] .ws-tab-btn:hover,
html[data-theme="dark"] .sat-team-head,
html[data-theme="dark"] .sat-team-head:hover,
html[data-theme="dark"] .pos-btn:hover,
html[data-theme="dark"] .oc-zoom-btn:hover,
html[data-theme="dark"] .ctx-item:hover { background: #2b333d; }
html[data-theme="dark"] .ctx-item { color: var(--text); }
html[data-theme="dark"] .pos-btn-del:hover { background: #3a2222; border-color: #7f3a3a; } /* 삭제 hover는 붉은 톤 유지 */
html[data-theme="dark"] .uot-row.selected { background: #1b2a44; }
html[data-theme="dark"] .ws-move-btn:hover:not(:disabled),
html[data-theme="dark"] .ws-chip.on,
html[data-theme="dark"] .ws-grp-btn.active { background: #1e293b; border-color: #3a4568; color: #93c5fd; }
html[data-theme="dark"] .kw-member-table td,
html[data-theme="dark"] .kw-admin-table td { border-color: var(--border); }
html[data-theme="dark"] .kw-3dot:hover { color: var(--text); }
/* ── 이미지 선택 필드 (명함 디자인 등) ── */
.imgsel-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.imgsel-card { flex: 1 1 220px; max-width: 340px; border: 2px solid var(--border); border-radius: 10px; padding: 8px; cursor: pointer; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.imgsel-card:hover { border-color: var(--primary); }
.imgsel-card.sel { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.imgsel-card img { width: 100%; border-radius: 6px; display: block; }
.imgsel-noimg { width: 100%; min-height: 110px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 6px; color: var(--text-muted); font-size: 13px; }
.imgsel-label { text-align: center; font-weight: 700; font-size: 13px; margin-top: 6px; color: var(--text); }
/* 이미지 선택: 확대 버튼 + 라이트박스 */
.imgsel-thumb { position: relative; }
.imgsel-zoom { position: absolute; top: 6px; right: 6px; border: none; background: rgba(17,24,39,.72); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; cursor: zoom-in; opacity: 0; transition: opacity .15s; }
.imgsel-card:hover .imgsel-zoom { opacity: 1; }
@media (hover: none) { .imgsel-zoom { opacity: 1; } } /* 터치 기기는 항상 표시 */
/* 사진 뷰어는 항상 최상위(차량 세부 z3000·사진 모달 z3200·설정 허브 등 모든 모달 위, 확인창 z9500 아래) */
#img-lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
#img-lightbox figure { margin: 0; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: default; }
#img-lightbox img { max-width: 96vw; max-height: 84vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); background: #fff; }
#img-lightbox figcaption { color: #fff; font-weight: 700; font-size: 15px; }
/* 라이트박스 우상단 도구 줄 - 저장·닫기를 한 줄에. 종전엔 닫기만 fixed로 있었다. */
.img-lightbox-tools { position: fixed; top: 16px; right: 20px; display: flex; align-items: center; gap: 10px; z-index: 1; }
.img-lightbox-close { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; cursor: pointer; }
.img-lightbox-close:hover { background: rgba(255,255,255,.28); }
.img-lightbox-dl { height: 40px; padding: 0 16px; border-radius: 20px; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.img-lightbox-dl:hover { background: rgba(255,255,255,.28); }
.img-lightbox-dl:disabled { opacity: .55; cursor: default; }
.img-lightbox-dl svg { width: 17px; height: 17px; }
/* 결재 진행 액션 바 (하단 고정 + 의견 통합 + 알약 버튼) */
.appr-action-bar { position: sticky; bottom: 12px; z-index: 5; margin-bottom: 16px; border: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.appr-action-inner { padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.appr-action-head { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.appr-step-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(65,105,225,.12); color: var(--primary); font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.appr-action-msg { color: var(--text-muted); font-size: 13px; }
.appr-action-btns { display: flex; gap: 10px; margin-left: auto; }
.appr-pill { border: none; padding: 10px 28px; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; transition: filter .15s, transform .1s; }
.appr-pill:hover { filter: brightness(1.06); }
.appr-pill:active { transform: scale(.98); }
.appr-pill:disabled { opacity: .55; cursor: default; }
.appr-approve { background: #4169E1; color: #fff; }
.appr-reject { background: #e02424; color: #fff; }
.appr-cancel { background: #6b7280; color: #fff; }
.appr-cancel-bar .appr-step-chip { background: #eef2f6; color: #475569; }
/* 연차 사용 이력(원장) */
.ll-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.ll-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ll-title .ll-count { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.ll-empty { font-size: 12.5px; color: var(--text-muted); padding: 14px 4px; text-align: center; }
.ll-scroll { overflow-x: auto; }
.ll-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 12.5px; }
.ll-table th, .ll-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; vertical-align: top; }
.ll-table th { font-size: 11px; color: var(--text-muted); font-weight: 600; background: transparent; }
.ll-table tr:last-child td { border-bottom: none; }
.ll-table .ll-date { color: var(--text-muted); }
.ll-table .ll-sub { color: var(--text-muted); font-size: 11px; }
.ll-table .ll-note { color: var(--text-muted); white-space: normal; word-break: keep-all; min-width: 90px; }
.ll-table .ll-user { font-weight: 600; }
.ll-name-link { color: var(--primary); text-decoration: none; border-bottom: 1px dashed var(--primary); cursor: pointer; }
.ll-name-link:hover { opacity: .8; }
.ll-neg { color: #e02424; font-weight: 600; }
.ll-pos { color: #16a34a; font-weight: 600; }
.ll-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ll-tag.ll-use { background: #eff6ff; color: #1e40af; }
.ll-tag.ll-adj { background: #f0fdf4; color: #065f46; }
html[data-theme="dark"] .ll-tag.ll-use { background: #1e293b; color: #93c5fd; }
html[data-theme="dark"] .ll-tag.ll-adj { background: #14261c; color: #6ee7b7; }
/* 임직원 검색 헤더 (데스크탑: 제목 | 검색창 | 버튼 한 줄 / 모바일: 제목·버튼 윗줄, 검색창 아랫줄) */
.emp-search-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.emp-search-titlewrap { order: 1; flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; }
.emp-search-titlewrap h3 { margin: 0; }
.emp-search-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.emp-search-input { order: 2; flex: 1 1 220px; min-width: 0; width: auto; }
.emp-search-toggle { order: 3; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
.emp-search-toggle { order: 2; margin-left: auto; }
.emp-search-input { order: 3; flex: 1 1 100%; }
}
/* 임직원 검색 카드 + 조직도 위치 강조 */
.emp-card { transition: border-color .15s, box-shadow .15s; }
.emp-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.emp-name-link:hover { color: var(--primary); text-decoration: underline; }
.oc-focus { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 5px; background: rgba(65,105,225,.16) !important; animation: ocFocusPulse 1s ease-in-out 2; }
@keyframes ocFocusPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(65,105,225,.5); } 50% { box-shadow: 0 0 0 6px rgba(65,105,225,0); } }
/* 좌측 메뉴 순서 편집 */
.nav-edit-btn { margin: 2px 12px 6px; padding: 4px 8px; font-size: 11px; border: 1px dashed var(--border); background: transparent; color: var(--text-muted); border-radius: 6px; cursor: pointer; }
.nav-edit-btn:hover { color: var(--primary); border-color: var(--primary); }
.nav-item.nav-editing { cursor: grab; outline: 1px dashed rgba(65,105,225,.5); outline-offset: -2px; }
.nav-item.nav-editing:active { cursor: grabbing; }
/* 사용자/퇴직자 관리 상단 필터 바 (반응형) */
.kw-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 16px 14px; }
.kw-filter-grp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kw-filter-lbl { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.kw-filter-bar input[type="date"] { width: auto; }
.kw-filter-q { width: auto; min-width: 180px; }
.kw-filter-reset { justify-content: center; text-align: center; }
@media (max-width: 640px) {
.kw-filter-q { flex: 1 1 100%; min-width: 0; }
.kw-filter-grp { flex: 1 1 100%; padding: 6px 0; border-top: 1px dashed var(--border); }
.kw-filter-lbl { flex: 0 0 56px; }
.kw-filter-grp input[type="date"] { flex: 1 1 90px; min-width: 0; }
.kw-filter-reset { flex: 0 0 auto; margin: 8px auto 0; min-width: 160px; padding-left: 24px; padding-right: 24px; }
}
/* 표 헤더 클릭 정렬: 커서·정렬표시 (정렬 제외 표 제외) */
thead th { cursor: pointer; }
.mx-table thead th, [data-no-sort] thead th { cursor: default; }
.sort-ind { font-size: 10px; color: var(--primary); }
/* 사용자 관리 표: 열 너비 드래그 핸들 */
.kw-admin-table th { position: relative; }
.kw-col-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; user-select: none; z-index: 1; }
.kw-col-resize:hover { background: rgba(65,105,225,.3); }
.kw-col-item.kw-col-dragover { border-color: var(--primary) !important; }
/* 상신 후 문서 상세의 에디터(서식/사진) 내용에는 편집 툴바가 보이지 않도록 (읽기전용 영역 한정) */
.dt-fields .ql-toolbar, .dt-fvalue .ql-toolbar { display: none !important; }
/* ─── 객관식(다문항/표) 매트릭스 필드 ─── */
.mx-wrap { overflow-x: auto; }
.mx-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.mx-table th, .mx-table td { border: 1px solid var(--border); padding: 6px 8px; vertical-align: middle; }
.mx-table thead th { background: var(--bg); font-weight: 600; text-align: center; white-space: nowrap; color: var(--text-muted); }
.mx-table tr:last-child td { border-bottom: 1px solid var(--border); } /* 전역 tr:last-child 하단 테두리 제거 방지 */
.mx-table .mx-item { background: var(--bg); font-weight: 600; white-space: nowrap; text-align: center; }
.mx-table td.mx-choices { padding: 6px 8px; }
.mx-choices-inner { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mx-choice { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; font-size: 13px; }
.mx-choice input { cursor: pointer; }
.mx-note { padding: 4px 6px !important; font-size: 12px; min-width: 110px; }
.mx-table.mx-view td b { color: var(--primary); }
/* ─── 대시보드 출퇴근 퀵카드 — 모바일 전용 ─── */
.dash-att-card { display: none; }
@media (max-width: 768px) { .dash-att-card { display: block; } }
/* 노션 완료 작업 리스트 — 모바일에서는 차량번호·차량명·작업내용·완료시간만 표기 */
@media (max-width: 768px) { .ot-nt-hide-m { display: none !important; } }
/* 노션 완료 작업 (자동 첨부) — 문서 상세에서 표로 표기 */
.ot-tasks-wrap { overflow-x: auto; }
.ot-tasks-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.ot-tasks-table th, .ot-tasks-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; word-break: break-word; }
.ot-tasks-table thead th { background: #f9fafb; font-weight: 700; white-space: nowrap; color: var(--text-muted); }
.ot-tasks-table tbody td.ot-task-num { text-align: center; color: var(--text-muted); }
/* 전역 'tr:last-child td{border-bottom:none}'가 마지막 행 하단 테두리를 지워 표가 깨지는 것 방지 */
.ot-tasks-table tr:last-child td { border-bottom: 1px solid var(--border); }
.ot-tasks-table tr:hover td { background: transparent; }
/* 완료 작업: 데스크톱은 위 표, 모바일(≤768px)은 차량별 카드 - 같은 데이터를 CSS로 전환(인쇄/PDF는 표 유지) */
.ot-tasks-cards { display: none; }
@media (max-width: 768px) {
.ot-tasks-table { display: none; }
.ot-tasks-cards { display: flex; flex-direction: column; gap: 10px; }
.otc-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.otc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; padding: 8px 11px; background: var(--bg); border-bottom: 1px solid var(--border); }
.otc-plate { font-size: 14px; font-weight: 700; color: var(--text); }
.otc-model { font-size: 12.5px; color: var(--text-muted); }
.otc-cust { font-size: 12px; color: var(--text-muted); }
.otc-cnt { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.otc-item { padding: 8px 11px; border-bottom: 1px solid var(--border); }
.otc-item:last-child { border-bottom: none; }
.otc-title { font-size: 13.5px; color: var(--text); margin-bottom: 5px; word-break: break-word; }
.otc-meta { display: flex; flex-wrap: wrap; gap: 5px 9px; font-size: 12px; color: var(--text-muted); align-items: center; }
.otc-kind { font-size: 11px; color: var(--primary); background: rgba(65,105,225,.1); border-radius: 99px; padding: 1px 8px; }
.otc-loose { padding: 8px 11px; font-size: 12.5px; color: var(--text-muted); white-space: pre-wrap; word-break: break-word; }
}
/* 퇴근 재체크(기록 오류·연장근로 시 덮어쓰기) — 모바일 전용 */
.att-recheck-btn { display: none; height: 32px; padding: 0 12px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px dashed #f59e0b; color: #b45309; background: #fffbeb; border-radius: 8px; cursor: pointer; }
.att-recheck-note { display: none; }
@media (max-width: 768px) {
.att-recheck-btn { display: inline-flex; align-items: center; gap: 4px; }
.att-recheck-note { display: block; font-size: 11px; color: var(--text-muted); margin-top: 6px; }
}
/* ── 차량 세부: 스플릿 사이드바 (디자인 4a 데스크톱 / 5a 모바일) ── */
.veh-split { display: flex; background: #fff; border: 1px solid #e6e8ee; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 30px rgba(16,24,40,.06); margin-bottom: 16px; }
.veh-split-rail { width: 440px; flex-shrink: 0; background: linear-gradient(165deg,#4169E1,#2f50c0); color: #fff; padding: 26px 24px; display: flex; flex-direction: column; gap: 22px; }
.veh-rail-brand { display: flex; align-items: center; gap: 8px; opacity: .85; font-size: 13px; font-weight: 700; }
.veh-rail-title-no { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 5px; }
.veh-rail-title-sub { font-size: 13px; opacity: .8; }
.veh-rings { display: flex; gap: 14px; }
.veh-ring-tile { flex: 1; background: rgba(255,255,255,.1); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.veh-ring-tile span { font-size: 12.5px; font-weight: 700; opacity: .9; }
.veh-rail-meta { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.veh-rail-meta .lbl { opacity: .65; font-size: 12px; margin-bottom: 2px; }
.veh-rail-meta .val { font-weight: 700; line-height: 1.45; }
.veh-meta-pair { display: flex; flex-direction: column; gap: 12px; } /* 데스크톱: 세로(기존과 동일), 모바일: 가로 한 줄 */
.veh-rail-ship { flex-direction: row; } /* 입고완료/출고완료 한 줄(데스크톱·모바일 공통) */
.veh-rail-ship > button { flex: 1; min-width: 0; }
.veh-rail-info-btn { background: none; border: none; padding: 0; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.veh-rail-info-btn:hover { color: #fff; }
/* 차량 세부 하단 플로팅 바: 데스크톱=[검색][저장] 우측 정렬(간격 14px, 저장이 우측 끝), 모바일=검색 좌측 끝·저장 우측 끝 */
#veh-float-bar { position: absolute; right: 22px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 14px; }
@media (max-width: 768px) {
#veh-float-bar { left: 16px; right: 16px; justify-content: space-between; }
#veh-float-bar.single { justify-content: flex-end; } /* 버튼 1개(저장만/검색만)면 우측 유지 */
}
.veh-search-fab { border-radius: 24px; padding: 12px 22px; font-size: 13px; font-weight: 800; background: #fff; color: #3b5bdb; border: 1.5px solid #c8d3f5; box-shadow: 0 10px 28px rgba(0,0,0,.14); cursor: pointer; }
html[data-theme="dark"] .veh-search-fab { background: var(--surface); color: #93a8f4; border-color: #3a4568; }
/* 작업 편집 토글 버튼 - JS가 style.background 등을 직접 대입하면 다크모드 인라인 보정이 재직렬화로 깨지므로 클래스로 고정 */
.veh-taskdel-btn { background: #fff; color: #6a7285; border: 1px solid #e4e7ee; }
.veh-taskdel-btn.on { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
html[data-theme="dark"] .veh-taskdel-btn { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] .veh-taskdel-btn.on { background: #1e293b; color: #93c5fd; border-color: #3a4568; }
/* 공감 버튼(제안·건의) - 선택 상태 토글 */
.sg-like-btn.on { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
html[data-theme="dark"] .sg-like-btn.on { color: #93c5fd; border-color: #3a4568; background: #1e293b; }
/* 차량 옵션 설정 칩 토글 */
.vo-opt { cursor: pointer; font-size: 11.5px; padding: 2px 9px; border-radius: 11px; border: 1px solid var(--border); background: transparent; color: #6b7280; }
.vo-opt.on { border-color: #93c5fd; background: #eff6ff; color: #1e40af; }
html[data-theme="dark"] .vo-opt { color: var(--text-muted); }
html[data-theme="dark"] .vo-opt.on { border-color: #3a4568; background: #1e293b; color: #93c5fd; }
/* 작업 편집: 삭제 표시된 행 */
.vt-marked-del { opacity: .45; background: #fef2f2; }
html[data-theme="dark"] .vt-marked-del { background: #2a1618; }
.veh-rail-btns { margin-top: auto; display: flex; flex-direction: row; gap: 9px; } /* 노션에서 열기/사진 업로드 한 줄 */
.veh-rail-btns .veh-rail-btn { flex: 1; min-width: 0; }
.veh-rail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.veh-rail-btn:hover { background: rgba(255,255,255,.18); }
.veh-split-form { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 차량 세부 로딩 - PARK 로고 색상 채우기 애니메이션(회색 로고 위로 컬러가 좌→우 채워짐) */
.veh-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 90px 20px; gap: 20px; }
.park-fill-wrap { position: relative; width: 156px; }
.park-fill-wrap img { width: 100%; display: block; }
.park-fill-wrap .base { filter: grayscale(1); opacity: .18; }
.park-fill-wrap .fill { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); animation: parkFill 1.5s ease-in-out infinite; }
@keyframes parkFill { /* 좌→우로 다 채워지면 잠깐 유지 후 처음부터 다시 채움 */
0% { clip-path: inset(0 100% 0 0); }
82% { clip-path: inset(0 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
.veh-loading-sub { font-size: 12.5px; font-weight: 600; color: #9aa2b2; }
/* Notify(전달/주의 사항) 배너 - 앰버 강조 + 벨 아이콘, 권한자만 편집 */
.veh-notice { display: flex; gap: 10px; align-items: flex-start; margin: 14px 24px 0; padding: 11px 14px; background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: 11px; }
.veh-notice .icon { width: 18px; height: 18px; color: #d97706; flex: none; margin-top: 1px; }
.veh-notice-title { font-size: 11.5px; font-weight: 800; color: #b45309; letter-spacing: .02em; margin-bottom: 3px; }
.veh-notice-text { font-size: 13.5px; font-weight: 700; color: #92400e; white-space: pre-wrap; word-break: break-word; }
.veh-notice-input { width: 100%; box-sizing: border-box; border: 1px solid #fcd34d; border-radius: 8px; background: #fff; padding: 8px 10px; font-size: 13px; min-height: 56px; resize: vertical; font-family: inherit; }
.veh-notice-input:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
@media (max-width: 768px) { .veh-notice { margin: 12px 18px 0; } }
/* 작업내역 부서 그룹 - 부서마다 고정 색을 헤더 밴드·좌측 바·부서명·가이드선·작업구분에 함께 입혀
묶음이 한 덩어리로 읽히게 한다. 색은 부서명 해시로 고정(_vtDeptCls) - 어느 차량을 열어도 같은 색.
작업 행 자체는 무채색 유지: 여기까지 물들이면 완료·검수 버튼과 배지가 묻힌다. */
.vt-dept-band { background: var(--dcBg); border-top: 1px solid var(--dcBd); border-bottom: 1px solid var(--dcBd); }
.vt-dept-bar { background: var(--dcBar); }
.vt-dept-nm { color: var(--dcFg); }
.vt-dept-ct { background: var(--dcBd); color: var(--dcFg); }
.vt-grp { margin-left: 16px; border-left: 2px solid var(--dcBd); }
/* 표형(데스크톱)은 들여쓰기 없이 가이드선만 - 행이 그리드라 좌측 여백을 주면 헤더와 열이 어긋난다 */
.vt-grp-d { border-left: 2px solid var(--dcBd); }
.vt-cat { color: var(--dcFg); }
/* 작업구분 머리글 밴드 - 부서 밴드와 같은 색을 '더 옅게' 깔아 위계를 만든다(부서 > 작업구분).
color-mix로 배경(흰색·다크)과 섞으므로 라이트·다크 양쪽이 자동으로 맞는다.
미지원 브라우저는 앞줄의 단색(부서와 동일 톤)으로 떨어진다 - 읽기엔 지장 없다.
부서 밴드와 흰색 사이 밝기 폭이 좁아 농도만으론 약하다 - 채움은 60%로 두고 위쪽 경계선(dcBd)으로
구분 시작점을 명확히 한다. 부서 밴드 바로 아래 첫 줄은 선이 겹쳐 두꺼워지므로 뺀다. */
.vt-cat-band { background: var(--dcBg); background: color-mix(in srgb, var(--dcBg) 60%, transparent); border-top: 1px solid var(--dcBd); }
.vt-grp > .vt-cat-band:first-child, .vt-grp-d > .vt-cat-band:first-child { border-top: none; }
.vt-cat-ct { color: var(--dcFg); opacity: .72; font-weight: 700; }
/* 8슬롯: 라이트=옅은 배경+진한 글자, 다크=어두운 배경+밝은 글자(명암을 뒤집어야 양쪽 다 읽힌다) */
.vt-dc0 { --dcBg:#E1F5EE; --dcBd:#9FE1CB; --dcFg:#0F6E56; --dcBar:#1D9E75; }
.vt-dc1 { --dcBg:#EEEDFE; --dcBd:#CECBF6; --dcFg:#3C3489; --dcBar:#7F77DD; }
.vt-dc2 { --dcBg:#FAECE7; --dcBd:#F5C4B3; --dcFg:#712B13; --dcBar:#D85A30; }
.vt-dc3 { --dcBg:#E6F1FB; --dcBd:#B5D4F4; --dcFg:#0C447C; --dcBar:#378ADD; }
.vt-dc4 { --dcBg:#FBEAF0; --dcBd:#F4C0D1; --dcFg:#72243E; --dcBar:#D4537E; }
.vt-dc5 { --dcBg:#EAF3DE; --dcBd:#C0DD97; --dcFg:#27500A; --dcBar:#639922; }
.vt-dc6 { --dcBg:#FAEEDA; --dcBd:#FAC775; --dcFg:#633806; --dcBar:#BA7517; }
.vt-dc7 { --dcBg:#F1EFE8; --dcBd:#D3D1C7; --dcFg:#444441; --dcBar:#888780; }
html[data-theme="dark"] .vt-dc0 { --dcBg:#142a24; --dcBd:#235244; --dcFg:#7fd9bb; --dcBar:#2eb98c; }
html[data-theme="dark"] .vt-dc1 { --dcBg:#1e1c33; --dcBd:#3a3566; --dcFg:#b3aef0; --dcBar:#8f87e8; }
html[data-theme="dark"] .vt-dc2 { --dcBg:#2e1d16; --dcBd:#573225; --dcFg:#eba98d; --dcBar:#e0754d; }
html[data-theme="dark"] .vt-dc3 { --dcBg:#13233a; --dcBd:#254a75; --dcFg:#9dc4ee; --dcBar:#4a8fd8; }
html[data-theme="dark"] .vt-dc4 { --dcBg:#2f1722; --dcBd:#5c2b40; --dcFg:#eda6bf; --dcBar:#dd6b93; }
html[data-theme="dark"] .vt-dc5 { --dcBg:#1d2a12; --dcBd:#3c5522; --dcFg:#b3d488; --dcBar:#79b32d; }
html[data-theme="dark"] .vt-dc6 { --dcBg:#2f2410; --dcBd:#5c4519; --dcFg:#e8bf7d; --dcBar:#cf8a25; }
html[data-theme="dark"] .vt-dc7 { --dcBg:#24262a; --dcBd:#43464c; --dcFg:#c2c4c9; --dcBar:#8b8f97; }
.vt-dc8 { --dcBg:#FCEBEB; --dcBd:#F09595; --dcFg:#791F1F; --dcBar:#E24B4A; }
.vt-dc9 { --dcBg:#ECEDFB; --dcBd:#B7BCEE; --dcFg:#2E3585; --dcBar:#5B65D6; }
.vt-dc10 { --dcBg:#E4F4F7; --dcBd:#A3D9E2; --dcFg:#0B5566; --dcBar:#1391AC; }
.vt-dc11 { --dcBg:#F3F0E6; --dcBd:#D8CFAF; --dcFg:#5A4A18; --dcBar:#9A8434; }
html[data-theme="dark"] .vt-dc8 { --dcBg:#301414; --dcBd:#5e2727; --dcFg:#f0a2a2; --dcBar:#e05c5c; }
html[data-theme="dark"] .vt-dc9 { --dcBg:#1a1c33; --dcBd:#333866; --dcFg:#adb3f0; --dcBar:#7a83e0; }
html[data-theme="dark"] .vt-dc10 { --dcBg:#0f2a30; --dcBd:#1f5260; --dcFg:#8fd3e2; --dcBar:#28a5c2; }
html[data-theme="dark"] .vt-dc11 { --dcBg:#2b2718; --dcBd:#544c2c; --dcFg:#dcd0a0; --dcBar:#b39c48; }
/* 배지 - 부서 색과 같은 슬롯을 쓴다. 종전 하드코딩 색은 라이트 전용이라 다크에서 탁했다. */
.ui-cbadge { background: var(--dcBg); color: var(--dcFg); border: 1px solid var(--dcBd);
font-weight: 800; border-radius: 99px; flex: none; white-space: nowrap; }
/* 출고완료 잠금 안내(작업내역 위) - 경고가 아니라 상태 알림이라 파랑 계열 */
.veh-lock-note { font-size: 11.5px; line-height: 1.6; color: #3b5bdb; background: #eef3ff; border: 1px solid #c3d0f0; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
/* 출고완료 후에도 고칠 수 있는 유일한 항목 - 수정 버튼을 누르면 열린다 */
/* 수정·저장은 같은 자리(라벨 줄 우측 끝)에서 서로 바뀐다 - 눌러야 할 버튼이 늘 같은 곳에 있게 */
.veh-note-unlock { font-size: 10.5px; font-weight: 700; color: #3b5bdb; background: #fff; border: 1px solid #c3d0f0; border-radius: 6px; padding: 1px 8px; cursor: pointer; margin-left: auto; }
.veh-note-save { font-size: 10.5px; font-weight: 800; color: #fff; background: #3b5bdb; border: 1px solid #3b5bdb; border-radius: 6px; padding: 2px 10px; cursor: pointer; margin-left: auto; }
.veh-note-save:hover { background: #2f4bc0; border-color: #2f4bc0; }
/* 휴가 신청 폼 - 신청 일수 미리보기 배너(앰버) */
.leave-preview-banner { padding: 8px 12px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; font-size: 13px; margin-bottom: 12px; color: #92400e; }
.leave-preview-sub { color: #92700a; }
html[data-theme="dark"] .leave-preview-banner { background: #2a2214; border-color: #6b5417; color: #fcd34d; }
html[data-theme="dark"] .leave-preview-sub { color: #d4a94a; }
/* 사진 업로드 정보 배너(파랑) - Notify 배너와 동일 구조 */
.veh-split-form-head { padding: 18px 24px; border-bottom: 1px solid #eef0f4; font-size: 16px; font-weight: 800; }
.veh-split-grid { padding: 22px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.veh-split-grid .vehf-full { grid-column: 1 / -1; }
/* 주차위치 2개 셀렉트를 그리드 열(반반·열 간격 동일)에 정렬 - 다른 칸들과 좌우 경계 일치 (인라인 gap/flex 오버라이드) */
.veh-split-grid .veh-park-row { gap: 20px !important; }
.veh-split-grid .veh-park-row #veh-park1 { flex: 1 1 0 !important; }
.veh-split-form .form-group { margin: 0; }
.veh-split-form .form-label { font-size: 13px; font-weight: 700; color: #4a5262; margin-bottom: 8px; display: block; }
.veh-split-form .form-control { height: 44px; border: 1.5px solid #dce0e8; border-radius: 10px; padding: 0 14px; font-size: 14px; color: #232936; background: #fff; box-sizing: border-box; }
.veh-split-form textarea.form-control { height: auto; min-height: 80px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.veh-split-form select.form-control { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 13px center; }
.veh-split-form .form-control:focus { border-color: #4263eb; box-shadow: 0 0 0 3px rgba(66,99,235,.14); outline: none; }
/* 다크모드: 차량 세부 우측 폼(주차위치·공정 등 select·date·textarea)이 흰 배경으로 남던 문제 - 다크 패널에 맞춰 어둡게(주요항목 버튼과 통일) */
/* 다크모드: 차량 세부 우측 '세부 정보' 패널을 다크 테마로 - 패널 배경·헤더·라벨·입력·주요항목 드롭다운 모두 다크 */
html[data-theme="dark"] .veh-split { background: #161b22; border-color: var(--border); }
html[data-theme="dark"] .veh-split-form { color: var(--text); }
html[data-theme="dark"] .veh-split-form-head { color: var(--text); border-bottom-color: #2a323e; }
html[data-theme="dark"] .veh-split-form .form-label { color: #a7b2c2; }
html[data-theme="dark"] .veh-split-form .form-control { background: #1f2630; border-color: #333b47; color: var(--text); }
html[data-theme="dark"] .veh-split-form .form-control::placeholder { color: #8b95a1; }
html[data-theme="dark"] .veh-split-form .veh-ms-btn,
html[data-theme="dark"] .veh-split-form .veh-multi-panel { background: #1f2630 !important; color: var(--text) !important; border-color: #333b47 !important; }
html[data-theme="dark"] .veh-split-form .veh-multi-panel label { color: var(--text) !important; }
/* Notify(전달/주의 사항) 배너 다크 - 밝은 노랑 → 어두운 앰버 */
html[data-theme="dark"] .veh-notice { background: #2a2214; border-color: #6b5417; }
html[data-theme="dark"] .veh-notice-title { color: #fbbf24; }
html[data-theme="dark"] .veh-notice-text { color: #fcd34d; }
/* 출고완료 잠금 안내 - 어두운 배경에선 #3b5bdb가 탁해 밝은 청색으로 올린다(.appr2-mark와 같은 이유) */
html[data-theme="dark"] .veh-lock-note { background: #16233a; border-color: #2f4a7a; color: #93c5fd; }
html[data-theme="dark"] .veh-note-unlock { background: transparent; border-color: #2f4a7a; color: #93c5fd; }
html[data-theme="dark"] .veh-note-save { background: #3b5bdb; border-color: #3b5bdb; color: #fff; }
html[data-theme="dark"] .veh-note-save:hover { background: #4a68e0; border-color: #4a68e0; }
html[data-theme="dark"] .veh-notice-input { background: #1f2630; border-color: #6b5417; color: var(--text); }
html[data-theme="dark"] #veh-notice-editbtn { background: #1f2630 !important; color: #fbbf24 !important; border-color: #6b5417 !important; }
@media (max-width: 768px) {
.veh-split { flex-direction: column; }
.veh-split-rail { width: auto; padding: 18px; gap: 16px; }
.veh-ring-tile { flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px; border-radius: 12px; }
.veh-ring-tile svg { width: 56px; height: 56px; flex: 0 0 auto; }
.veh-ring-tile span { white-space: nowrap; }
.veh-split-grid { padding: 18px; gap: 14px; }
.veh-split-grid .veh-park-row { gap: 14px !important; } /* 주차위치 셀렉트 간격을 모바일 그리드 간격과 동일하게 */
.veh-split-form-head { padding: 15px 18px; }
.veh-split-form .form-control { height: 46px; }
/* 모바일 레일: 공정+딜레이 한 줄 / 노션·사진 한 줄 / 입출고 한 줄(제일 아래) */
.veh-meta-pair { flex-direction: row; gap: 18px; }
.veh-meta-pair .veh-meta-cell { flex: 1; min-width: 0; }
.veh-rail-btns { flex-direction: row; margin-top: 0; order: 1; }
.veh-rail-btns .veh-rail-btn { flex: 1; min-width: 0; }
.veh-rail-ship { flex-direction: row; order: 2; }
.veh-rail-ship > button { flex: 1; min-width: 0; }
}
/* ── 차량 검색: 인스턴트 검색(디자인 7b 데스크톱 / 7e 모바일) ── */
.vs-card .card-header { border-bottom: 1px solid #f0f1f5; }
.vs-search-head { padding: 18px 22px 14px; }
.vs-inputwrap { position: relative; }
.vs-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.vs-instant-input { height: 52px; line-height: 52px; border-radius: 13px; background: #f7f8fb; border: 1.5px solid #dce0e8; padding: 0 16px 0 46px; font-size: 16px; font-weight: 600; color: #232936; box-sizing: border-box; }
.vs-instant-input:focus { outline: none; border-color: #4263eb; box-shadow: 0 0 0 3px rgba(66,99,235,.14); background: #fff; }
.vs-chips { display: flex; gap: 8px; margin-top: 12px; }
.vs-chip { height: 30px; padding: 0 14px; border-radius: 9px; font-size: 12.5px; font-weight: 800; cursor: pointer; background: #fff; border: 1.5px solid #e4e7ee; color: #6a7285; }
.vs-chip.on { background: #4263eb; border-color: #4263eb; color: #fff; }
.vs-result { border-top: 1px solid #f0f1f5; max-height: min(72vh, 620px); overflow-y: auto; } /* 스크롤 담당: 결과 리스트 + 더 보기 버튼이 함께 스크롤 */
.vs-hint-empty { text-align: center; color: #9aa2b2; font-size: 14px; font-weight: 600; padding: 46px 18px; }
.vs-list { /* 자체 스크롤 없음 - .vs-result가 스크롤(더 보기 버튼까지 포함) */ }
.vs-item { display: flex; align-items: center; gap: 13px; padding: 13px 22px; border-bottom: 1px solid #f4f5f8; cursor: pointer; }
.vs-item:hover { background: #f7f8fc; }
.vs-avatar { width: 38px; height: 38px; border-radius: 10px; background: #eef1fb; color: #3b5bdb; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.vs-item-main { flex: 1; min-width: 0; }
/* 배지(작업성격·AS·부품대기·외주업체·주요항목)가 많으면 한 줄에 안 들어간다 - 좁은 화면에서
nowrap이면 넘쳐서 옆 칸(출고완료 알약) 위로 잘려 보였다. 줄바꿈을 허용한다(2026-07-17). */
.vs-item-top { display: flex; align-items: baseline; gap: 6px; row-gap: 4px; min-width: 0; flex-wrap: wrap; }
.vs-plate { font-size: 15px; font-weight: 800; color: #232936; white-space: nowrap; }
.vs-model { font-size: 12.5px; color: #8a93a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-item-sub { font-size: 12.5px; color: #6a7285; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-item-right { flex: 0 0 auto; }
.vs-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.vs-pill.prog { background: #eef1fb; color: #3b5bdb; }
.vs-pill.done { background: #e0f4ec; color: #0a8f65; }
/* 모바일: 카드를 뷰포트에 맞춰(페이지 스크롤 제거) 상단 카운트·검색·필터는 고정, 결과+더보기만 내부 스크롤 */
@media (max-width: 768px) {
.vs-card { display: flex; flex-direction: column; max-height: calc(100dvh - 90px); }
.vs-card .card-header, .vs-card .vs-search-head { flex-shrink: 0; }
.vs-card .vs-result { flex: 1 1 auto; min-height: 0; max-height: none; }
}
@media (max-width: 640px) {
.vs-search-head { padding: 14px 16px 12px; }
.vs-instant-input { height: 50px; line-height: 50px; font-size: 15px; }
.vs-item { padding: 12px 16px; gap: 12px; }
.vs-avatar { width: 36px; height: 36px; font-size: 14px; }
.vs-plate { font-size: 14.5px; }
}
/* ── 워크스페이스 캘린더 ── */
/* 헤더 레이아웃: 좌측 제목(월 네비/목록 제목) · 우측 컨트롤(월·목록 전환 + 구분 필터) */
.cal-head { gap: 12px 16px; }
.cal-head-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cal-head-ctrls { display: flex; align-items: center; gap: 10px; }
.cal-monthnav { display: flex; align-items: center; gap: 8px; }
.cal-viewsw { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.cal-head .cal-list-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.cal-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-filter-btn { display: none; }
@media (max-width: 640px) {
/* 모바일: 제목 줄과 컨트롤 줄을 각각 한 줄로 정렬 - 구분 필터 버튼은 우측 끝에 고정 */
.cal-head { flex-wrap: wrap; }
.cal-head-title { width: 100%; }
.cal-head-ctrls { width: 100%; justify-content: space-between; }
/* 모바일: 구분 필터를 드롭다운 패널로(다중 토글 유지) */
.cal-filter-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1.5px solid #dde1ea; background: #fff; color: #5a6273; white-space: nowrap; }
/* 우측 끝 버튼 기준으로 왼쪽으로 펼침. 뷰포트를 넘지 않도록 폭 제한(좌측 잘림 방지). */
.cal-filters { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.16); width: max-content; max-width: min(90vw, 300px); }
.cal-filters.open { display: flex; }
/* 목록 카드: 값이 없는 '상세' 셀은 라벨만 남는 빈 줄이 되므로 숨김 */
.doc-table td.cal-sub-empty { display: none; }
}
.cal-grid { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.cal-dow-row { display: grid; grid-template-columns: repeat(7,1fr); background: #f7f8fb; border-bottom: 1px solid var(--border); }
.cal-dow { padding: 8px 0; text-align: center; font-size: 12px; font-weight: 700; color: #6a7285; }
.cal-dow.sun { color: #e03131; } .cal-dow.sat { color: #3b5bdb; }
.cal-week { display: grid; grid-template-columns: repeat(7,1fr); position: relative; }
.cal-bars { position: absolute; inset: 0; pointer-events: none; }
.cal-bar { position: absolute; height: 17px; line-height: 17px; font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.cal-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -3px; }
.cal-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-cell { min-height: 98px; border-right: 1px solid #eef0f4; border-bottom: 1px solid #eef0f4; padding: 5px 6px; cursor: pointer; overflow: hidden; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.out { background: #fafbfc; }
.cal-cell.out .cal-daynum { color: #c8cdd8; }
.cal-cell.today { background: #eff4ff; }
/* 선택 테두리: 셀 자체를 올리면 hover/today 배경이 연장 바를 가리므로, 테두리만 ::after로 최상단에 그림 */
.cal-cell.sel { position: relative; }
.cal-cell.sel::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #4263eb; pointer-events: none; z-index: 5; }
.cal-cell:hover { background: #f2f6ff; }
.cal-daynum { font-size: 12.5px; font-weight: 700; color: #3a4152; margin-bottom: 4px; }
.cal-daynum.sun { color: #e03131; } .cal-daynum.sat { color: #3b5bdb; }
.cal-chips { display: flex; flex-direction: column; gap: 2px; }
.cal-chip { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.cal-more { font-size: 10.5px; color: #98a0b2; font-weight: 700; padding: 0 4px; }
.cal-ev-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #f4f5f8; }
.cal-ev-row:last-child { border-bottom: none; }
.cal-ev-tag { flex: none; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; min-width: 64px; text-align: center; box-sizing: border-box; } /* 고정폭·가운데 정렬 - 우측 내용 시작점 통일 */
/* 캘린더 다크모드 (이벤트 칩은 JS 인라인 색상 유지 - 밝은 톤 라벨은 두 테마 모두 가독) */
html[data-theme="dark"] .cal-grid { background: #161b22; }
html[data-theme="dark"] .cal-dow-row { background: #1a212b; }
html[data-theme="dark"] .cal-dow { color: #a7b2c2; }
html[data-theme="dark"] .cal-dow.sun { color: #ff6b6b; } html[data-theme="dark"] .cal-dow.sat { color: #5c7cfa; }
html[data-theme="dark"] .cal-cell { border-right-color: #262d38; border-bottom-color: #262d38; }
html[data-theme="dark"] .cal-cell.out { background: #12161d; }
html[data-theme="dark"] .cal-cell.out .cal-daynum { color: #4a5262; }
html[data-theme="dark"] .cal-cell.today { background: #1b2740; }
html[data-theme="dark"] .cal-cell:hover { background: #1e2735; }
html[data-theme="dark"] .cal-daynum { color: #c3ccd6; }
html[data-theme="dark"] .cal-daynum.sun { color: #ff6b6b; } html[data-theme="dark"] .cal-daynum.sat { color: #5c7cfa; }
html[data-theme="dark"] .cal-ev-row { border-bottom-color: #262d38; }
html[data-theme="dark"] .cal-filter-btn { background: #1f2630; border-color: #333b47; color: #a7b2c2; }
@media (max-width: 640px) {
.cal-cell { min-height: 62px; padding: 3px 3px; }
.cal-daynum { font-size: 11.5px; margin-bottom: 3px; }
.cal-chips { flex-direction: row; flex-wrap: wrap; gap: 3px; }
.cal-chip { width: 7px; height: 7px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; overflow: hidden; background: currentColor !important; }
.cal-more { font-size: 9.5px; padding: 0 2px; }
.cal-bar { height: 6px; padding: 0; border-radius: 3px; font-size: 0; line-height: 0; background: currentColor !important; }
}
/* AI 부서 배정 현황 표 - 모바일에서 공정(AI) 칸을 접힘 영역으로 내린다.
좁은 화면에서 공정 칩(62px)이 차량명 폭을 먹어 이름이 한두 글자로 잘렸다. */
.ta-d-stage { display: none; }
/* AI 공정 배정 현황 카드 - 데스크톱은 2장씩 나란히(460px 기준), 모바일은 한 장이 화면 폭에 맞는다.
min-width 380px을 그대로 두면 375px 화면을 넘어 카드가 잘리고 가로 스크롤이 생겼다. */
.sa-card-col { flex: 1 1 460px; min-width: 380px; }
/* 담당부서는 표 위 부서 칩과 같은 값이라 모바일에서 뺀다. 한 공정에 부서가 둘 이상일 때만
차량명 아래에 작게 남긴다(그때는 줄마다 값이 달라 정보가 된다). */
.sa-dept-sub { display: none; }
/* AI 공정 배정 현황만 모바일에서 표를 버리고 한 차량을 두 줄 카드로 쓴다(데스크톱은 위의 표 그대로).
이 표는 칸이 여섯이라 좁은 화면에서 차량명이 0px까지 눌렸다 - 열 다툼 자체를 없앤다.
윗줄: 차량번호 · 배정 주체 · (우측) 건수 / 아랫줄: 차량명 · (우측) 배정 시간.
같은 칸을 grid-area로 다시 배치할 뿐이라 데스크톱 표와 마크업이 하나로 유지된다.
부서 배정 현황(.ta-grid)은 사용자 요청으로 모바일에서도 표를 유지한다(아래 규칙 그대로). */
@media (max-width: 640px) {
.sa-card-col { min-width: 0; flex-basis: 100%; }
.sa-head { display: none !important; } /* 표가 아니므로 머리글 줄이 필요 없다 */
.sa-row {
grid-template-columns: auto auto minmax(0,1fr) !important;
grid-template-areas: "no by cnt" "name name dt" !important;
gap: 3px 8px !important; padding: 9px 8px !important;
}
.sa-row > :first-child { grid-area: no; } /* 차량번호 - 첫 칸이라 클래스 없이 잡는다 */
.sa-c-name { grid-area: name; }
.sa-c-cnt { grid-area: cnt; justify-self: end; }
.sa-c-dt { grid-area: dt; justify-self: end; }
.sa-c-by { grid-area: by; justify-self: start; }
.sa-col-dept { display: none !important; } /* 위 부서 칩과 같은 값 */
.sa-veh-cell { flex-direction: column; align-items: flex-start !important; gap: 1px !important; }
.sa-dept-sub { display: block; max-width: 100%; font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-grid { grid-template-columns: 72px minmax(0,1fr) 38px 76px 44px 16px !important; } /* 공정 62px 제거 */
.ta-col-stage { display: none !important; }
.ta-d-stage { display: inline-flex !important; }
}
/* ── 차량 작업 현황: 작업순 리스트·팀 요약 스트립·남은 작업 요약(카드) ── */
/* 리스트 뷰: 모바일=1열 세로, 데스크톱=폭에 따라 자동 다단(작업순은 좌→우, 위→아래로 읽는다) */
.ws-qlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.ws-qlist .ws-board-card { width: 100%; }
.ws-qlist .empty-state { grid-column: 1 / -1; }
.ws-wait { margin-top: 14px; }
.ws-wait > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-muted); padding: 4px 2px; user-select: none; }
.ws-sum-wrap { margin-bottom: 12px; max-width: 820px; }
.ws-sum-wrap .ws-sum { margin-bottom: 0; }
/* 데스크탑: 아코디언 없음 - 전체 타일 표시(.ws-sum-extra 그대로), '더보기' 토글 숨김 */
.ws-sum-toggle { display: none; margin-top: 6px; width: 100%; border: 1px dashed var(--border); background: var(--surface); color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px; border-radius: 8px; cursor: pointer; }
.ws-sum-toggle:hover { border-color: var(--primary); color: var(--primary); }
/* 모바일: 5번째부터 접고 '더보기'로 펼친다(펼침 = .ws-sum-wrap.open) */
@media (max-width: 720px) {
.ws-sum-toggle { display: block; }
.ws-sum-wrap:not(.open) .ws-sum-extra { display: none; }
}
/* 데스크탑: 한 줄(줄바꿈 없음)로 늘어놓고 폭을 넓힌다. 좁은 창은 가로 스크롤로 흘린다(레이아웃 깨짐 방지). */
.ws-sum { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 12px; max-width: 820px; overflow-x: auto; }
/* 대시보드 타일에서 넘어온 빠른 필터 표시줄(집계 스트립 대신) */
.ws-qfilter { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 8px 6px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--bg); font-size: 12.5px; color: var(--text); }
.ws-qfilter-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ws-qfilter b { font-weight: 700; }
.ws-qfilter button { border: none; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 2px 9px; font-size: 11.5px; color: var(--text-muted); cursor: pointer; }
.ws-qfilter button:hover { color: var(--primary); border-color: var(--primary); }
.ws-sum-c { flex: 1 1 72px; min-width: 72px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 7px 4px 6px; text-align: center; cursor: pointer; line-height: 1.2; }
/* 모바일은 접기/펼치기라 다시 감싼다 - base(.ws-sum nowrap) 뒤에 와야 이긴다(같은 명시도, 소스 순서) */
@media (max-width: 720px) { .ws-sum { flex-wrap: wrap; overflow-x: visible; } }
/* 대시보드 집계 스트립 - 워크시트보다 넓게, 타일도 살짝 크게 */
.ws-sum.dv-sum { max-width: none; margin-bottom: 16px; flex-wrap: wrap; overflow-x: visible; }
.ws-sum.dv-sum .ws-sum-c { flex: 1 1 96px; min-width: 84px; padding: 11px 6px 9px; }
.ws-sum.dv-sum .ws-sum-c b { font-size: 21px; }
.ws-sum.dv-sum .ws-sum-c span { font-size: 12px; }
/* 대시보드 집계 타일 아코디언(모바일 2줄 초과 시 더보기) */
.dv-sum-wrap { margin-bottom: 16px; }
.dv-sum-wrap .ws-sum.dv-sum { margin-bottom: 0; }
.dv-sum-toggle { margin-top: 8px; background: none; border: none; color: var(--primary); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.dv-sum-toggle:hover { text-decoration: underline; }
/* 부서별 타일 설정 칩 */
.dtile-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; user-select: none; }
.dtile-chip.on { background: rgba(65,105,225,.1); border-color: var(--primary); color: var(--primary); }
.dtile-chip:hover { border-color: var(--primary); }
/* 정보창 집계 타일 관리 - 표시 중 칩: 그립 드래그로 순서 이동, 가로 나열이라 놓을 자리는 왼쪽 모서리로 표시 */
.dtile-chip .ds-grip { padding: 0 3px 0 0; margin-left: -5px; }
.dtile-chip .ds-grip svg { width: 8px; height: 13px; display: block; }
.dtile-chip.ds-over { border-color: var(--primary) !important; box-shadow: inset 3px 0 0 -1px var(--primary) !important; }
.dtile-chip.on > span { cursor: pointer; }
/* 집계 타일 설명 툴팁 - 호버 즉시(약간의 지연 후) 타일 아래에 뜬다. 터치 기기는 호버가 없어 제외. */
@media (hover: hover) {
.ws-sum-c[data-tip] { position: relative; }
.ws-sum-c[data-tip]:hover::after {
content: attr(data-tip);
position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
background: #111827; color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.55;
padding: 7px 11px; border-radius: 8px; width: max-content; max-width: 230px; white-space: normal;
text-align: left; z-index: 60; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
animation: dvTipIn .12s ease-out .15s backwards;
}
.ws-sum-c[data-tip]:hover::before {
content: ''; position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
border: 5px solid transparent; border-bottom-color: #111827; z-index: 60; pointer-events: none;
animation: dvTipIn .12s ease-out .15s backwards;
}
}
@keyframes dvTipIn { from { opacity: 0; } }
.ws-sum-c b { display: block; font-size: 17px; font-weight: 800; color: var(--sumc, #3182f6); font-variant-numeric: tabular-nums; }
.ws-sum-c span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
.ws-sum-c.active { border-color: var(--sumc, #3182f6); box-shadow: inset 0 0 0 1px var(--sumc, #3182f6); }
.ws-sum-c:hover { background: #f6f8fa; }
.wsb-tasks { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4e5968; border-top: 1px dashed var(--border); margin-top: 2px; padding-top: 7px; }
.wsb-tasks b { font-weight: 800; }
.wsb-tasks-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.wsb-tasks-first { color: #8b95a1; font-weight: 500; }
@media (max-width: 640px) {
.ws-qlist { grid-template-columns: 1fr; }
.ws-sum { max-width: none; }
}
html[data-theme="dark"] .ws-sum-c { background: #1f2630; border-color: #2a323e; }
html[data-theme="dark"] .ws-sum-c:hover { background: #242c38; }
html[data-theme="dark"] .wsb-tasks { color: #b6c2cf; }
/* ── 역할 세부 권한: 좌측 카테고리 레일 + 세로 토글 리스트 (2026-07-21 재구성) ── */
.rperm { display: grid; grid-template-columns: 184px 1fr; gap: 14px; align-items: start; }
.rperm-tools { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rperm-search { position: relative; flex: 1; min-width: 150px; max-width: 260px; }
.rperm-search input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px 7px 30px; font-family: inherit; font-size: 12.5px; color: var(--text); outline: none; }
.rperm-search input:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(65,105,225,.14); }
.rperm-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.rperm-sum { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.rperm-sum b { color: var(--primary); font-weight: 800; font-variant-numeric: tabular-nums; }
/* 스위치 자동 저장 상태 표시 */
.rperm-saved { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rperm-saved.saving { color: var(--text-muted); }
.rperm-saved.ok { color: #0a8f65; }
.rperm-saved.err { color: #dc2626; }
/* 헤더 56 + #content 패딩 24 + sticky 12 + 하단 여백 12 = 104 → 본문 스크롤과 무관하게 레일만 독립 스크롤 */
.rperm-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; }
.rperm-tier > .rtl { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #9ca3af; text-transform: uppercase; padding: 2px 8px 5px; }
.rperm-rail a { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text-muted); padding: 6px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.rperm-rail a:hover { background: var(--surface); }
.rperm-rail a.on { background: rgba(65,105,225,.1); color: var(--primary); }
.rperm-rail a .rnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rperm-rail a .rct { font-size: 10.5px; font-weight: 800; color: #b6bccb; font-variant-numeric: tabular-nums; }
.rperm-rail a.on .rct { color: var(--primary); }
.rperm-rail a .rdot { width: 6px; height: 6px; border-radius: 50%; background: #d3d9e6; flex: none; }
.rperm-rail a.has .rdot { background: var(--primary); }
.rperm-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rperm-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; scroll-margin-top: 12px; }
.rperm-sec.empty-sec { display: none; }
.rperm-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.rperm-head .rt { font-size: 13px; font-weight: 800; color: var(--text); }
.rperm-head .rc { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg); border-radius: 99px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.rperm-head .ra { margin-left: auto; display: flex; gap: 3px; }
.rperm-head .ra a { font-size: 11px; font-weight: 700; text-decoration: none; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--border); color: var(--text-muted); }
.rperm-head .ra a:hover { border-color: var(--primary); color: var(--primary); }
.rperm-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border); cursor: pointer; margin: 0; }
.rperm-rows > .rperm-row:first-child { border-top: none; }
.rperm-row:hover { background: var(--bg); }
.rperm-row.hide { display: none; }
.rperm-lab { flex: 1; min-width: 0; font-size: 12.5px; }
.rperm-lab .rl { font-weight: 600; color: var(--text); }
.rperm-row.off .rperm-lab .rl { color: var(--text-muted); }
.rperm-lab .rbadges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.rperm-lab .rbadges span { white-space: nowrap; }
.rperm-sw { position: relative; width: 38px; height: 22px; flex: none; }
.rperm-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.rperm-tr { position: absolute; inset: 0; background: #cfd6e4; border-radius: 99px; transition: background .15s; }
.rperm-kn { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.rperm-sw input:checked ~ .rperm-tr { background: var(--primary); }
.rperm-sw input:checked ~ .rperm-kn { transform: translateX(16px); }
.rperm-sw input:focus-visible ~ .rperm-tr { outline: 2px solid var(--primary); outline-offset: 2px; }
html[data-theme="dark"] .rperm-tr { background: #3a445e; }
html[data-theme="dark"] .rperm-kn { background: #e7ecf6; }
html[data-theme="dark"] .rperm-rail a .rdot { background: #3a445e; }
html[data-theme="dark"] .rperm-rail a .rct { color: #6b7590; }
html[data-theme="dark"] .rperm-rail a:hover { background: #1b2334; }
html[data-theme="dark"] .rperm-row:hover, html[data-theme="dark"] .rperm-head .rc { background: #1b2334; }
@media (max-width: 720px) {
.rperm { grid-template-columns: 1fr; }
.rperm-rail { position: static; flex-direction: row; overflow-x: auto; max-height: none; gap: 6px; padding-bottom: 2px; }
.rperm-tier { display: contents; }
.rperm-tier > .rtl { display: none; }
.rperm-rail a { white-space: nowrap; border: 1px solid var(--border); border-radius: 99px; padding: 5px 11px; }
.rperm-rail a .rdot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rperm-tr, .rperm-kn { transition: none; } }
/* ── 차량 세부 댓글 카드 ── */
.veh-cmt-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px; }
.vcmt-title { font-size: 14px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.vcmt-title svg { width: 17px; height: 17px; color: var(--primary); }
.vcmt-cnt { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--bg); border-radius: 99px; padding: 1px 9px; }
.vcmt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.vcmt { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: var(--bg); }
.vcmt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vcmt-name { font-size: 13px; font-weight: 700; color: var(--text); }
.vcmt-dept { font-size: 11px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 0 7px; }
.vcmt-at { font-size: 11.5px; color: var(--faint, #98a0b2); font-variant-numeric: tabular-nums; }
.vcmt-del { margin-left: auto; width: 22px; height: 22px; border: none; background: none; color: #b6bccb; font-size: 17px; line-height: 1; cursor: pointer; border-radius: 6px; }
.vcmt-del:hover { color: #e02424; background: #fef2f2; }
.vcmt-body { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.vcmt-empty { font-size: 12.5px; color: var(--text-muted); text-align: center; padding: 16px 0; }
/* 입력창: 한 줄로 시작해 내용(줄바꿈)이 늘면 아래로 커진다(_vcmtGrow가 높이 계산). 최대치 넘으면 스크롤. */
.vcmt-compose textarea { display: block; width: 100%; min-height: 40px; max-height: 150px; resize: none; overflow-y: auto; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--surface); outline: none; }
.vcmt-compose textarea:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(65,105,225,.14); }
html[data-theme="dark"] .vcmt-del:hover { color: #f87171; background: #3a1a1a; }
/* ── 차량 댓글: 작성 도구(대상자·사진·붙여넣기) ── */
.vcmt-compose { position: relative; }
.vcmt-chips, .vcmt-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.vcmt-chips:not(:empty) { margin-bottom: 8px; }
.vcmt-thumbs:not(:empty) { margin-top: 8px; } /* 미리보기는 입력창 아래에 붙는다 */
.vcmt-mchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--primary); background: rgba(65,105,225,.1); border-radius: 99px; padding: 3px 6px 3px 10px; }
.vcmt-mchip a, .vcmt-thumb a { cursor: pointer; color: inherit; opacity: .7; font-weight: 800; }
.vcmt-mchip a:hover, .vcmt-thumb a:hover { opacity: 1; }
.vcmt-thumb { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.vcmt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcmt-thumb a { position: absolute; top: 1px; right: 3px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); font-size: 15px; line-height: 1; }
.vcmt-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.vcmt-tbtn { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; cursor: pointer; }
.vcmt-tbtn:hover { border-color: var(--primary); color: var(--primary); }
.vcmt-tbtn svg { width: 15px; height: 15px; }
.vcmt-mpop { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px -12px rgba(20,30,60,.3); overflow: hidden; }
.vcmt-msearch { width: 100%; border: none; border-bottom: 1px solid var(--border); padding: 9px 12px; font-family: inherit; font-size: 13px; color: var(--text); background: transparent; outline: none; }
.vcmt-mlist { max-height: 190px; overflow-y: auto; }
.vcmt-mrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.vcmt-mrow:hover { background: var(--bg); }
.vcmt-mrow.on { color: var(--primary); font-weight: 700; }
.vcmt-mrow.on b { color: var(--primary); }
.vcmt-mrow.active { background: rgba(65,105,225,.1); } /* 키보드 선택 커서 */
.vcmt-mdept { color: var(--text-muted); font-size: 11.5px; font-weight: 500; }
/* 목록 섹션 헤더(최근·내 부서·관련 부서·그 외) */
.vcmt-msec { font-size: 11px; color: var(--text-muted); background: var(--bg); padding: 4px 12px; position: sticky; top: 0; }
.vcmt-mteam span svg { color: var(--primary); }
.vcmt-mempty { padding: 12px; color: var(--text-muted); font-size: 12px; text-align: center; }
.vcmt-mchip.team { color: #0f766e; background: rgba(20,158,117,.12); } /* @부서 칩 - 개인과 구분 */
html[data-theme="dark"] .vcmt-mchip.team { color: #6ee7c8; background: rgba(20,158,117,.18); }
.vcmt-mentions span.team { color: #0f766e; background: rgba(20,158,117,.1); }
/* 등록된 댓글의 사진·언급 표시 */
.vcmt-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vcmt-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; }
.vcmt-mentions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.vcmt-mentions span { font-size: 11.5px; font-weight: 700; color: var(--primary); background: rgba(65,105,225,.09); border-radius: 99px; padding: 1px 9px; }
/* ── 사진 업로드 모달: 붙여넣기 대상 구분 표시 ── */
.vph-cat { border-radius: 12px; padding: 10px; margin: -10px; transition: box-shadow .12s, background .12s; }
.vph-cat-on { background: #f6f8ff; box-shadow: inset 0 0 0 1.5px #c7d2f7; }
.vph-paste-badge { display: none; margin-left: auto; font-size: 10.5px; font-weight: 800; color: #3b5bdb; background: #e2e8fb; border-radius: 99px; padding: 2px 9px; }
.vph-cat-on .vph-paste-badge { display: inline-block; }
/* ===== 법인카드 사용내역 (card ledger) ===== */
/* 좌측 통계 사이드바 + 우측 날짜별 그룹 원장. 색은 테마 변수라 다크모드도 그대로 적응한다. */
.clg-wrap { max-width: 1120px; margin: 0 auto; display: flex; gap: 20px; align-items: flex-start; }
.clg-side { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.clg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* 총 지출 강조 카드 - 브랜드 그라디언트(라이트·다크 공통 고정) */
.clg-total { background: linear-gradient(155deg, #4169E1, #2f47b8); border-radius: 16px; padding: 22px; color: #fff; box-shadow: 0 14px 30px -14px rgba(65,105,225,.55); }
.clg-total-lbl { font-size: 12.5px; font-weight: 600; opacity: .9; margin-bottom: 6px; }
.clg-total-amt { font-size: 29px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.clg-total-sub { font-size: 12.5px; opacity: .85; margin-top: 5px; }
.clg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.clg-card-h { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 14px; }
.clg-col { display: flex; flex-direction: column; }
/* 사용자별 진행 바 */
.clg-urow-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.clg-urow-name { font-size: 13px; font-weight: 600; color: var(--text); }
.clg-urow-cnt { color: var(--text-muted); font-weight: 500; }
.clg-urow-amt { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clg-ubar { height: 7px; background: color-mix(in srgb, var(--text-muted) 16%, transparent); border-radius: 4px; overflow: hidden; }
.clg-ubar > i { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
/* 카드별·기안 현황 행 */
.clg-srow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.clg-srow-name { font-size: 12.5px; color: var(--text); }
.clg-srow-amt { font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
/* 메인 헤더·툴바 */
.clg-title { font-size: 22px; font-weight: 800; color: var(--text); }
.clg-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.clg-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.clg-select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13px; }
.clg-search { flex: 1; min-width: 140px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.clg-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: 14px; padding: 10px 0; outline: none; }
.clg-search-ic { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.clg-manage { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.clg-manage:hover { color: var(--text); }
/* 날짜 그룹 */
.clg-groups { display: flex; flex-direction: column; gap: 16px; }
.clg-gh { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; }
.clg-gh-date { font-size: 13.5px; font-weight: 800; color: var(--text); }
.clg-gh-cnt { font-weight: 600; color: var(--text-muted); font-size: 12.5px; }
.clg-gh-sub { font-size: 14px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.clg-gcard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
/* 거래 행 */
.clg-tx { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.clg-tx:last-child { border-bottom: 0; }
.clg-tx:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.clg-time { font-size: 12px; font-weight: 700; color: var(--text-muted); width: 40px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.clg-mer { flex: 1; min-width: 0; }
.clg-mer-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clg-mer-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.clg-userwrap { display: inline-flex; align-items: center; }
.clg-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; border: 0; line-height: 1.4; }
.clg-chip svg { width: 12px; height: 12px; opacity: .6; }
.clg-chip-on { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.clg-chip-off { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.clg-chip:hover { filter: brightness(.97); }
.clg-chip-static { cursor: default; }
.clg-uclear { cursor: pointer; color: var(--text-muted); font-weight: 700; font-size: 13px; margin-left: 5px; line-height: 1; }
.clg-uclear:hover { color: var(--danger); }
.clg-amt { font-size: 14.5px; font-weight: 700; color: var(--text); width: 96px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.clg-amt-cancel { color: var(--text-muted); text-decoration: line-through; }
.clg-del { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 7px; color: color-mix(in srgb, var(--text-muted) 65%, transparent); cursor: pointer; flex-shrink: 0; padding: 0; }
.clg-del svg { width: 16px; height: 16px; }
.clg-del:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
/* 확인 필요(파싱 실패) 행 */
.clg-tx-raw { flex-direction: column; align-items: stretch; gap: 6px; }
.clg-raw-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clg-raw-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; color: var(--warn, #8a5a00); background: var(--warn-bg, #fdf0d5); }
.clg-raw-meta { color: var(--text-muted); font-size: 12px; }
.clg-raw-pre { margin: 0; white-space: pre-wrap; font-size: 12px; color: var(--text-muted); }
.clg-summary { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.clg-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; padding: 48px; text-align: center; color: var(--text-muted); font-size: 14px; }
@media (max-width: 860px) {
.clg-wrap { flex-direction: column; }
.clg-side { width: 100%; position: static; }
.clg-tx { flex-wrap: wrap; gap: 8px 10px; }
.clg-amt { margin-left: auto; width: auto; }
.clg-time { width: auto; }
}