/* ──────────────────────────────────────────────────────────── REFACTOR_0427 / UI 컴팩트 테마 (2026-04-29~) 목적: 백오피스 한 화면 정보량 극대화 적용: 일 때만 활성화 원복: body 클래스만 제거하면 즉시 원상복구 상세 명세: SKILL/REFACTOR_0427/13_UI_COMPACT_TO_BE.md ──────────────────────────────────────────────────────────── */ /* body 자체에는 font-size 설정 안 함 — 사이드바 메뉴/모달 등 다른 영역 영향받지 않도록. 컴팩트 폰트는 본문 영역(.sub_content / 테이블 / 버튼 등)에 개별 적용. */ /* ─── 본문 상단 / 좌우 여백 (세로 공간 적극 회수) ──────── */ /* 사용자 요구: 좌우 padding 은 Bootstrap 기본 유지 (가독성). 세로만 적극 축소 */ body.compact-mode .container, body.compact-mode .container-fluid { padding-top: 4px !important; padding-bottom: 4px !important; } body.compact-mode .sub_content, body.compact-mode .main-content, body.compact-mode #contents, body.compact-mode .content_wrap { padding-top: 4px !important; padding-bottom: 4px !important; font-size: 12.5px; line-height: 1.3; } /* 페이지 제목 영역 (sub_head_title 등) 위아래 여백 축소 */ body.compact-mode .sub_head, body.compact-mode .page_title, body.compact-mode .sub_head_wrap, body.compact-mode .head_title_wrap { padding-top: 4px !important; padding-bottom: 4px !important; margin-bottom: 6px !important; } body.compact-mode h1, body.compact-mode h2, body.compact-mode h3, body.compact-mode .sub_head_title { margin-top: 0 !important; margin-bottom: 4px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* mb-4 / mb-5 같은 큰 margin 클래스 일괄 축소 */ body.compact-mode .mb-4 { margin-bottom: 0.5rem !important; } body.compact-mode .mb-5 { margin-bottom: 0.75rem !important; } body.compact-mode .my-4 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } body.compact-mode .my-5 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } body.compact-mode .py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } body.compact-mode .py-5 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } /* ─── 검색 / 필터 폼 (세로만 축소, 가로 padding 유지) ─── */ body.compact-mode .form-control, body.compact-mode .form-control-md, body.compact-mode .form-control-sm, body.compact-mode .custom-select { padding-top: 0.2rem; padding-bottom: 0.2rem; /* 좌우 padding은 Bootstrap 기본 유지 (가독성) */ font-size: 13px; height: auto; min-height: 28px; line-height: 1.3; } body.compact-mode .input-group > .form-control, body.compact-mode .input-group > .custom-select { min-height: 28px; } body.compact-mode .row > [class*="col"] { padding-top: 3px; padding-bottom: 3px; } /* ─── 버튼 (세로만 축소, 가로 padding 보수적 유지) ───── */ body.compact-mode .btn { padding-top: 0.2rem; padding-bottom: 0.2rem; /* padding-left/right 는 Bootstrap 기본(0.75rem) 유지 — 좌우 비율 보존 */ font-size: 12.5px; min-height: 26px; line-height: 1.3; } body.compact-mode .btn-sm { padding-top: 0.12rem; padding-bottom: 0.12rem; font-size: 11.5px; min-height: 22px; } /* ─── 테이블 — 행 높이 적극 축소 (사용자 요구: 9행 → 13행) ─ 주의: 프로젝트는 .table_01 (커스텀) 사용. 기본 padding 을 덮어쓰기 위해 !important 사용. */ body.compact-mode .table, body.compact-mode .table_01 { font-size: 12.5px !important; margin-bottom: 0.4rem !important; } body.compact-mode .table th, body.compact-mode .table td, body.compact-mode .table_01 th, body.compact-mode .table_01 td { padding: 3px 6px !important; vertical-align: middle !important; line-height: 1.3 !important; font-size: 13px !important; /* text-align 은 원래 마크업 (table.text-center / td.text-left 등) 존중 */ } /* 헤더는 좌정렬 + 배경 살짝 진하게 */ body.compact-mode .table thead th { font-weight: 600; background: #f5f5f5; border-bottom: 1px solid #ddd; } /* 체크박스 / 번호 / 상태 등 너비가 짧은 컬럼은 가운데 유지 가능 해당 셀에 .col-center 명시 */ body.compact-mode .table th.col-center, body.compact-mode .table td.col-center { text-align: center; } /* 액션 컬럼 (수정/삭제/복사) */ body.compact-mode .table th.col-actions, body.compact-mode .table td.col-actions { white-space: nowrap; width: 1%; } body.compact-mode .table .btn, body.compact-mode .table_01 .btn { margin: 0 1px !important; padding: 2px 7px !important; font-size: 12px !important; min-height: 22px !important; line-height: 1.3 !important; } /* 테이블 셀 내부 텍스트의 line-height / margin 축소 (가독성 유지하며 적당히) */ body.compact-mode .table td p, body.compact-mode .table td .keep_all, body.compact-mode .table td span, body.compact-mode .table td div, body.compact-mode .table_01 td p, body.compact-mode .table_01 td .keep_all, body.compact-mode .table_01 td span, body.compact-mode .table_01 td div { line-height: 1.3 !important; margin-bottom: 0 !important; margin-top: 0 !important; } /* 셀 내 d-flex gap (메모/상품 등 다단 셀의 갭) */ body.compact-mode .table_01 td .d-flex.gap_5 { gap: 4px !important; } body.compact-mode .table_01 td .d-flex.gap_8, body.compact-mode .table_01 td .d-flex.gap_10 { gap: 6px !important; } /* 셀 내 배지 (.b-tag / .g-tag) */ body.compact-mode .table_01 td .b-tag, body.compact-mode .table_01 td .g-tag { padding: 1px 5px !important; font-size: 11.5px !important; line-height: 1.3 !important; } /* 인풋 (체크박스 라벨, page_size 셀렉트 등) 행 안의 폼 요소 */ body.compact-mode .table_01 td .form-control, body.compact-mode .table_01 td .custom-select, body.compact-mode .table_01 td .custom-select2 { min-height: 24px !important; padding: 1px 7px !important; font-size: 12px !important; } /* ─── 다중 라인 셀 압축 (행 높이 핵심 culprit) ─────────── - 고객명 셀: 이름 + 아이콘 4개 (bell/magnifier/card 등, 1.6rem = 25.6px) - 결합/처리상태 셀: status_top + status_bottom(메모) - 접수일/개통일 셀: 2줄 (접수, 개통) */ /* 셀 내부 아이콘 (img / no_btn img) 적당히 — 1.6rem inline style override */ body.compact-mode .table_01 td img, body.compact-mode .table_01 td .no_btn img { width: 18px !important; height: auto !important; } /* 결합/처리상태 셀 — status_top / status_bottom (메모) */ body.compact-mode .table_01 .td_status_combo { padding: 2px 6px !important; } body.compact-mode .table_01 .status_top { padding: 0 !important; margin: 0 !important; line-height: 1.3 !important; } body.compact-mode .table_01 .status_bottom { padding: 0 !important; margin: 0 !important; font-size: 11.5px !important; line-height: 1.3 !important; max-height: 18px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* p (셀 내부) 마진 제거, line-height 적당히 */ body.compact-mode .table_01 td p, body.compact-mode .table_01 td p.m-0 { margin: 0 !important; line-height: 1.3 !important; } /* 셀 내 d-flex 의 gap (적당히) */ body.compact-mode .table_01 td .d-flex { gap: 4px !important; margin: 0 !important; } /* 셀 내 br 효과 (line-height로 흡수) */ body.compact-mode .table_01 td br { line-height: 1.3 !important; } /* 검색폼 영역 */ body.compact-mode .border_radius10_e3 { padding: 6px 12px !important; margin-bottom: 6px !important; } body.compact-mode .border_radius10_e3 .form_group .py-3 { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; } body.compact-mode .border_radius10_e3 .form_group .mb-3 { margin-bottom: 0.15rem !important; } body.compact-mode .border_radius10_e3 .gap_10 { gap: 4px !important; } /* 검색폼 입력 박스 자체도 약간 더 컴팩트 */ body.compact-mode .form-control, body.compact-mode .form-control-md, body.compact-mode .custom-select { min-height: 26px !important; padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; } /* "총 N개" + 목록 위 액션 행 — mb-4 효과 무력화 (이미 위에서 처리하지만 보강) */ body.compact-mode .list-header-actions, body.compact-mode .d-flex.mb-4 { margin-bottom: 4px !important; } body.compact-mode .table tr { /* 행 자체 min-height 강제 안 함 (자연스럽게) */ } /* ─── 페이지네이션 ──────────────────────────────── */ body.compact-mode .pagination .page-link, body.compact-mode .pagination .btn { padding: 0.2rem 0.5rem; font-size: 12px; min-height: 26px; } /* ─── 색상 코드 행 (D-003-A: 접수목록 시범) ───────── */ body.compact-mode .row-status-callback, body.compact-mode tr.row-status-callback td { background: #e8f5e9 !important; /* 회신요청 = 연녹색 */ } body.compact-mode .row-status-new, body.compact-mode tr.row-status-new td { background: #e3f2fd !important; /* 신규 = 연파랑 */ } /* ─── 사이드바 / 메뉴: 컴팩트 적용 안 함 (사용자 결정 — 접어서 사용) ─── */ /* ─── 헤더 ────────────────────────────────────── */ body.compact-mode .top_header, body.compact-mode #mng_top_wrap, body.compact-mode .navbar { padding-top: 4px; padding-bottom: 4px; } /* ─── 카드 / 박스 ──────────────────────────────── */ body.compact-mode .card, body.compact-mode .panel { margin-bottom: 8px; } body.compact-mode .card-body, body.compact-mode .panel-body { padding: 8px 12px; } body.compact-mode .card-header { padding: 6px 12px; font-size: 13px; } /* ─── 모달 ────────────────────────────────────── */ body.compact-mode .modal-body { padding: 10px 14px; } body.compact-mode .modal-header, body.compact-mode .modal-footer { padding: 8px 14px; } /* ─── 모바일 (768px 미만) 컴팩트 강도 완화 ─────────── */ @media (max-width: 767.98px) { body.compact-mode { font-size: 14px; } body.compact-mode .table th, body.compact-mode .table td { padding: 0.45rem 0.5rem; } }