/* ★ Pretendard — 동적 서브셋(variable). 종전 static 판은 unicode-range 가 없어
   가중치 1벌당 한글 전체(1MB+)를 통으로 받았다. 서브셋 판은 쓰는 글자 조각만 받는다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

        :root {
            /* ★ 앱 전역 글꼴 (2026-08-05) — Tailwind 가 html 에
               `font-family: var(--default-font-family, …)` 를 걸므로 이 변수만 정의하면
               특이도 싸움 없이 전체가 Pretendard 로 바뀐다.
               ⚠ 종전에는 위 @import 로 폰트를 **받아만 놓고 적용하는 선언이 없어**
                 OS 기본값(맥 Apple SD Gothic Neo / 윈도우 맑은 고딕)으로 렌더됐다
                 — 같은 화면이 기기마다 달라 보이던 원인. */
            --default-font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                                   system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

            --sidebar-w: 260px; /* legacy */
            --ctx-w: 220px;
            --topbar-h: 52px;
            --bg-main: #f4f7f9;
            --primary: #0f172a;
            --accent: #2563eb;
            --doc-border: #e2e8f0;
            --card-bg: #ffffff;
            --text-main: #334155;
            --text-sub: #64748b;
            --text-muted: #94a3b8;
            --border: #e2e8f0;
            --input-bg: transparent;
            --topbar-bg: rgba(255,255,255,0.85);
            --tbl-font: clamp(0.68rem, 1.4vw, 0.85rem);
            --tbl-pad-x: clamp(3px, 0.6vw, 8px);
            --tbl-pad-y: clamp(4px, 0.5vw, 8px);

            /* ── Design Tokens ── */
            --radius-xs: 4px;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --radius-full: 9999px;

            --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
            --shadow-xl: 0 16px 40px rgba(0,0,0,0.16);

            --color-blue: #3b82f6;
            --color-blue-dark: #2563eb;
            --color-blue-light: #eff6ff;
            --color-green: #10b981;
            --color-red: #ef4444;
            --color-orange: #f97316;
            --color-amber: #f59e0b;
            --color-indigo: #6366f1;
            --color-purple: #a855f7;
        }

        /* 다크모드 제거됨 — 라이트모드 전용 */

        /* Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* ══ 앱 전체 레이아웃 (Linear style) ══ */
        body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background-color: var(--bg-main); color: var(--text-main); }

        /* ── 상단 앱 탑바 ── */
        .app-topbar {
            height: var(--topbar-h);
            background: #ffffff;
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 16px 0 20px;
            flex-shrink: 0; z-index: 40;
            position: relative;
        }
        .topbar-left { display: flex; align-items: center; gap: 0; height: 100%; }
        .topbar-right { display: flex; align-items: center; gap: 6px; }
        .topbar-logo { display: flex; align-items: center; gap: 8px; padding-right: 14px; }
        .topbar-sections { display: flex; align-items: center; height: 100%; }
        .topbar-section-btn {
            height: 100%; padding: 0 14px;
            display: flex; align-items: center; gap: 6px;
            font-size: 12.5px; font-weight: 600; color: #64748b;
            border: none; border-bottom: 2px solid transparent;
            background: none; cursor: pointer;
            transition: all .15s; white-space: nowrap;
        }
        .topbar-section-btn:hover { color: #1e293b; }
        .topbar-section-btn.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 700; }
        .topbar-icon-btn {
            width: 32px; height: 32px; border-radius: 8px; border: none;
            display: flex; align-items: center; justify-content: center;
            color: #64748b; background: none; cursor: pointer; transition: all .12s;
        }
        .topbar-icon-btn:hover { background: #f1f5f9; color: #334155; }

        /* ── 모바일 전용 우측 버튼 (데스크탑에선 숨김) ── */
        .mobile-topbar-right { display: none; }
        .mobile-topbar-icon {
            width: 34px; height: 34px; border-radius: 50%; border: none;
            display: flex; align-items: center; justify-content: center;
            color: #64748b; background: #f1f5f9; cursor: pointer; transition: all .12s;
        }
        .mobile-topbar-icon:active { background: #e2e8f0; }
        /* 모바일 유저 드롭다운 */
        .mobile-user-dropdown {
            position: fixed; top: 48px; right: 8px; z-index: 500;
            background: white; border-radius: 14px; border: 1px solid #e2e8f0;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15); min-width: 200px; overflow: hidden;
        }
        .mobile-user-info { padding: 14px 16px 10px; background: #f8fafc; }
        .mobile-user-divider { height: 1px; background: #e2e8f0; }
        .mobile-user-menu-item {
            display: flex; align-items: center; gap: 10px;
            width: 100%; padding: 13px 16px; border: none; background: none;
            font-size: 13px; font-weight: 700; color: #334155; cursor: pointer;
            transition: background .1s; text-align: left;
        }
        .mobile-user-menu-item:hover { background: #f8fafc; }
        .mobile-user-menu-item:active { background: #f1f5f9; }
        .mobile-user-menu-item.text-red-600 { color: #dc2626; }

        /* ── 앱 바디 (탑바 아래) ── */
        .app-body {
            display: flex; flex: 1; overflow: hidden;
        }

        /* ── 컨텍스트 패널 (좌측) ── */
        .context-panel {
            width: var(--ctx-w); flex-shrink: 0;
            background: #f8fafc;
            border-right: 1px solid var(--border);
            overflow-y: auto; overflow-x: hidden;
            display: flex; flex-direction: column;
            padding: 8px 0 40px;
            transition: transform .25s, width .2s;
        }
        .ctx-section { padding: 4px 0; }
        .ctx-section.hidden { display: none !important; }
        .ctx-section-header {
            padding: 10px 16px 4px;
            font-size: 10px; font-weight: 800; color: #94a3b8;
            text-transform: uppercase; letter-spacing: 0.08em;
        }
        .ctx-nav-item {
            display: flex; align-items: center; gap: 8px;
            padding: 7px 12px 7px 16px;
            font-size: 12.5px; font-weight: 500; color: #475569;
            cursor: pointer; border-radius: 6px; margin: 1px 6px;
            border: none; background: none; width: calc(100% - 12px);
            text-align: left; transition: all .1s;
        }
        .ctx-nav-item:hover { background: #e2e8f0; color: #1e293b; }
        .ctx-nav-item.ctx-active, .ctx-nav-item.active {
            background: #dbeafe; color: #1d4ed8; font-weight: 700;
        }
        .ctx-divider { height: 1px; background: #e2e8f0; margin: 8px 12px; }
        /* ── 프로젝트 사이드탭 다이어트 — '더보기' 접기 (proj-nav-more.js) ── */
        #ctx-project .ctx-more-item { display: none; }
        #ctx-project.ctx-more-open .ctx-more-item { display: flex; }
        /* detail 모드 강제표시(patches-extracted.css #ctxnav-* !important)를 접힘 상태에서 이김 */
        body.workspace-detail-mode-v27 #ctx-project:not(.ctx-more-open) .ctx-more-item { display: none !important; }
        .ctx-more-toggle {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            margin: 4px 6px 2px; padding: 6px 12px;
            font-size: 11px; font-weight: 700; color: #94a3b8;
            background: none; border: 1px dashed #e2e8f0; border-radius: 8px;
            cursor: pointer; width: calc(100% - 12px); transition: all .12s;
        }
        .ctx-more-toggle:hover { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
        .ctx-more-toggle .cmt-chev { font-size: 10px; }
        /* 보드(프로젝트 목록) 모드에선 토글 숨김 */
        body.workspace-board-mode-v8 #ctxMoreToggle { display: none !important; }
        /* 컴팩트 사이드바: 좁은 레일에선 토글 숨김, 확장 시 노출 */
        body.compact-sidebar #ctxMoreToggle { display: none; }
        body.compact-sidebar .context-panel:hover #ctxMoreToggle,
        body.compact-sidebar .context-panel:focus-within #ctxMoreToggle,
        body.compact-sidebar .context-panel.compact-pinned #ctxMoreToggle { display: flex; }
        .ctx-workspace-select {
            margin: 4px 10px 2px;
        }

        /* ── 메인 콘텐츠 ── */
        /* base .main-content / .content-area rules are defined once in the Main Area block below */

        /* ── 페이지 헤더 (콘텐츠 내부) ── */
        .page-header {
            display: flex; align-items: flex-start; justify-content: space-between;
            margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
        }
        .page-title { font-size: 1.4rem; font-weight: 900; color: var(--text-main); line-height: 1.2; }
        .page-subtitle { font-size: 0.78rem; color: var(--text-sub); font-weight: 500; margin-top: 3px; }

        /* ── legacy compat ── */
        .nav-item { padding: 7px 12px 7px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: #475569; border-left: 2px solid transparent; border-radius: 6px; margin: 1px 6px; transition: all 0.1s; }
        .nav-item:hover { background: #e2e8f0; color: #1e293b; }
        .nav-item.active { background: #dbeafe; color: #1d4ed8; border-left-color: #2563eb; font-weight: 700; }

        /* Main Area */
        .main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; position: relative; min-width: 0; }
        .topbar { background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 10; position: sticky; top: 0; }
        .content-area { padding: 40px; max-width: 1400px; margin: 0 auto; width: 100%; }

        /* Document Table Styles */
        .doc-table-wrap { background: var(--card-bg); border-radius: 12px; overflow-x: auto; border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); -webkit-overflow-scrolling: touch; }
        .doc-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px; }
        .doc-table th { background: var(--card-bg); font-size: clamp(0.62rem, 1.1vw, 0.78rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-sub); padding: var(--tbl-pad-y) var(--tbl-pad-x); border-bottom: 2px solid var(--border); }
        .doc-table td { padding: var(--tbl-pad-y) var(--tbl-pad-x); font-size: var(--tbl-font); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-main); }
        .doc-table th, .doc-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 12px 8px; text-align: center; vertical-align: middle; word-wrap: break-word; }
        .doc-table th { background-color: var(--card-bg); font-weight: 700; color: var(--text-sub); font-size: 0.85rem; letter-spacing: -0.02em; }
        .doc-table td { font-size: 0.85rem; color: var(--text-main); }
        .doc-table tr:last-child td { border-bottom: none; }
        .doc-table tr td:last-child, .doc-table tr th:last-child { border-right: none; }
        
        /* Inputs */
        .input-no-border { border: none; outline: none; background: var(--input-bg); width: 100%; text-align: center; font-family: inherit; font-size: var(--tbl-font); padding: 5px; border-radius: 6px; transition: background 0.2s; color: var(--text-main); }
        .input-no-border:hover, .input-no-border:focus { background-color: #f1f5f9; }
        .text-right-input { text-align: right; padding-right: 12px; font-variant-numeric: tabular-nums; }
        input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

        /* Buttons */
        .btn { padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; letter-spacing: -0.01em; }
        .btn-primary { background: var(--accent); color: white; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }
        .btn-primary:hover { background: #2563eb; transform: translateY(-1px); }
        .btn-outline { border-color: var(--border); background: var(--card-bg); color: var(--text-sub); }
        .btn-outline:hover { background: var(--bg-main); border-color: var(--text-muted); }
        .btn-hwp { background: #0284c7; color: white; }

        /* Quote Components */
        .quote-paper { max-width: 800px; margin: 0 auto; background: white; padding: 60px; border: 1px solid #cbd5e1; box-shadow: 0 10px 25px rgba(0,0,0,0.05); position: relative; color: black; }
        .quote-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
        .quote-table th, .quote-table td { border: 1px solid #000; padding: 10px; text-align: center; font-size: 0.85rem; }
        .quote-table th { background-color: #f2f2f2; font-weight: bold; }
        .seal-area { display: none; }
        .seal-img { display: none; }

        /* Tabs */
        .tabs-container { display: flex; gap: 8px; border-bottom: 2px solid #e2e8f0; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; align-items: flex-end; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
        .tabs-container::-webkit-scrollbar { display: none; }
        .folder-tab { padding: 10px 20px; font-size: 0.85rem; font-weight: 700; cursor: pointer; color: var(--text-sub); margin-bottom: -6px; position: relative; white-space: nowrap; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .folder-tab.active { color: var(--accent); }
        .folder-tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); }
        .btn-new-tab { padding: 6px 14px; font-size: 0.75rem; font-weight: 800; border-radius: 6px; background: var(--bg-main); color: var(--text-sub); margin-bottom: -2px; cursor: pointer; border: 1px dashed var(--border); transition: all 0.2s; }
        .btn-new-tab:hover { background: var(--border); border-color: var(--text-muted); color: var(--text-main); }

        .stat-card {
            background: var(--card-bg); border-radius: 14px; padding: 18px 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid var(--border);
            position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s;
        }
        .stat-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        
        .view-section { display: none; }
        .view-section.active { display: block; }
        /* 재무 통합 뷰 — 상단 탭바 */
        .fin-tabbar {
            display: flex; gap: 4px; padding: 12px 0 0;
            border-bottom: 2px solid #e2e8f0; overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .fin-tab {
            padding: 8px 16px; font-size: 13px; font-weight: 700;
            color: #94a3b8; border: none; background: none; cursor: pointer;
            white-space: nowrap; border-bottom: 3px solid transparent;
            transition: all 0.15s;
        }
        .fin-tab:hover { color: #475569; }
        .fin-tab.active { color: #1e293b; border-bottom-color: #1e293b; }

        /* Kanban */
        .kanban-col { background: #f8fafc; border-radius: 12px; padding: 16px; border: 1px solid #e2e8f0; min-height: 300px; }
        .kanban-card { background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; margin-bottom: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: transform 0.2s, opacity 0.2s; position: relative; cursor: grab; }
        .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
        .kanban-card.kb-dragging { opacity: 0.4; cursor: grabbing; }
        .kanban-col.kb-drag-over { background: #eff6ff; border-color: #3b82f6; box-shadow: inset 0 0 0 2px #3b82f6; }

        /* Calendar events interactive */
        .cal-day { cursor: pointer; transition: background 0.15s; position: relative; }
        .cal-day:hover { background: #f1f5f9 !important; }
        .cal-event { cursor: pointer; }
        .cal-event:hover { opacity: 0.85; }
        .cal-event-start { border-radius: 3px 0 0 3px; margin-right: -2px; }
        .cal-event-mid { border-radius: 0; margin: 0 -2px; }
        .cal-event-end { border-radius: 0 3px 3px 0; margin-left: -2px; }
        .cal-event-single { border-radius: 3px; }
        .cal-drop-target { background: #dbeafe !important; }

        /* Event Modal */
        .event-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:300; justify-content:center; align-items:center; }
        .event-modal-overlay.open { display:flex; }
        .event-modal { background:white; border-radius:16px; padding:28px; max-width:440px; width:92%; box-shadow:0 20px 60px rgba(0,0,0,0.15); max-height:85vh; overflow-y:auto; }
        .event-modal label { display:block; font-size:11px; font-weight:800; color:#64748b; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
        .event-modal input, .event-modal textarea { width:100%; padding:8px 10px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; outline:none; font-family:inherit; margin-bottom:12px; }
        .event-modal input:focus, .event-modal textarea:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.1); }

        /* Estimate tooltip */
        .est-tooltip { position:relative; cursor:help; }
        .est-tooltip .est-tip { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#1e293b; color:#e2e8f0; font-size:10px; font-weight:500; padding:6px 10px; border-radius:6px; white-space:nowrap; z-index:50; margin-top:4px; pointer-events:none; }
        .est-tooltip:hover .est-tip { display:block; }

        /* Read Only Mode for External Share */
        body.shared-mode { overflow-y: auto !important; height: auto !important; }
        body.shared-mode .sidebar { display: none !important; }
        body.shared-mode .app-topbar { display: none !important; }
        body.shared-mode .context-panel { display: none !important; }
        body.shared-mode .app-body { display: block !important; }
        body.shared-mode .share-hide { display: none !important; }
        body.shared-mode .topbar { display: none !important; }
        body.shared-mode .content-area { padding-top: 20px; }
        body.shared-mode .view-section { display: none !important; }
        body.shared-mode #view-dashboard { display: block !important; } 
        body.shared-mode #view-wbs { display: block !important; margin-top: 0; } 
        /* 공유 뷰에서도 WBS 일정 편집 허용 */
        body.shared-mode.shared-edit-mode #view-wbs input, body.shared-mode.shared-edit-mode #view-wbs select, body.shared-mode.shared-edit-mode #view-wbs textarea { pointer-events: auto !important; background: white !important; border: 1px solid #e2e8f0 !important; }
        body.shared-mode.shared-edit-mode .event-modal-overlay input, body.shared-mode.shared-edit-mode .event-modal-overlay select, body.shared-mode.shared-edit-mode .event-modal-overlay textarea { pointer-events: auto !important; background: white !important; border: 1px solid #e2e8f0 !important; }
        body.shared-mode.shared-edit-mode .shared-edit-btn { display: inline-flex !important; }
        body.shared-mode #view-dashboard input, body.shared-mode #view-dashboard select { pointer-events: none; background: transparent; border: none !important; }
        body.shared-mode .shared-history { display: block !important; }

        /* ★ 포털 전용 모드 — 클라이언트 공유링크 (?mode=portal) */
        body.portal-mode {
            background: #f0f4f8;
            overflow-y: auto !important;
            height: auto !important;
        }
        body.portal-mode .sidebar { display: none !important; }
        body.portal-mode .app-topbar { display: none !important; }
        body.portal-mode .context-panel { display: none !important; }
        body.portal-mode .app-body { display: block !important; padding: 0 !important; }
        body.portal-mode .topbar { display: none !important; }
        body.portal-mode .mobile-header { display: none !important; }
        body.portal-mode .mobile-bottom-nav { display: none !important; }
        body.portal-mode .share-hide { display: none !important; }
        body.portal-mode .print-hide { display: none !important; }
        body.portal-mode .view-section { display: none !important; }
        body.portal-mode #view-portal { display: block !important; }
        body.portal-mode #view-portal > div { padding: 16px; max-width: 720px; margin: 0 auto; }
        body.portal-mode #portalPreview { pointer-events: auto; }
        body.portal-mode #portalMessage { display: none !important; }
        body.portal-mode #portalMessageDisplay { display: block !important; }
        /* ── 외부 용역 셀프등록 모드 (완전 격리) ── */
        body.extjoin-mode {
            background: #f1f5f9 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            height: auto !important;
            min-height: 100vh;
        }
        body.extjoin-mode #view-extjoin {
            display: block !important;
            min-height: 100vh;
            padding: 24px 16px;
            max-width: 560px;
            margin: 0 auto;
        }
        .history-item { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
        .history-item:last-child { border-bottom: none; }
        .history-log { max-height: 300px; overflow-y: auto; }


        /* Gantt Chart */
        .gantt-container { overflow-x: auto; }
        .gantt-bar { height: 24px; border-radius: 4px; position: absolute; top: 4px; min-width: 6px; cursor: pointer; transition: opacity 0.2s; font-size: 10px; color: white; padding: 0 6px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .gantt-bar:hover { opacity: 0.8; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
        .gantt-row { position: relative; height: 32px; border-bottom: 1px solid #f1f5f9; }
        .gantt-header-cell { font-size: 10px; text-align: center; border-right: 1px solid #e2e8f0; min-width: 32px; padding: 4px 0; }
        .gantt-grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #f1f5f9; }
        .gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; z-index: 3; }
        /* Budget vs Actual */
        .bva-bar { height: 20px; border-radius: 3px; transition: width 0.5s ease; }
        .bva-budget { background: #93c5fd; }
        .bva-actual { background: #f97316; }
        /* Deadline alerts */
        .deadline-warn { background: #fffbeb !important; }
        .deadline-urgent { background: #fef2f2 !important; animation: urgentPulse 2s infinite; }
        @keyframes urgentPulse { 0%,100% { box-shadow: none; } 50% { box-shadow: inset 0 0 0 2px #ef4444; } }
        /* Template modal */
        .template-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; cursor: pointer; transition: all 0.2s; }
        .template-card:hover { border-color: #3b82f6; background: #eff6ff; }
        /* Dashboard chart */
        .dash-chart { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }
        /* Role badge */
        .role-badge { font-size: 10px; padding: 2px 8px; border-radius: 12px; font-weight: 700; }
        .role-admin { background: #dbeafe; color: #1d4ed8; }
        .role-editor { background: #dcfce7; color: #15803d; }
        .role-viewer { background: #f1f5f9; color: #64748b; }

        /* ★ 내 일정 필터 (공유모드) */
        .my-sched-toggle { background: #eff6ff; border: 2px solid #3b82f6; color: #1d4ed8; font-weight: 800; font-size: 0.75rem; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
        .my-sched-toggle.off { background: #f8fafc; border-color: #cbd5e1; color: #64748b; }

        /* ★ 공유 모달 */
        .share-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:350; justify-content:center; align-items:center; }
        .share-modal-overlay.open { display:flex; }

        body.pdf-exporting .print-hide, body.pdf-exporting .share-hide, body.pdf-exporting .guide-banner, body.pdf-exporting [data-pdf-hide="true"] { display: none !important; }
        body.pdf-exporting button { display: none !important; }
        /* ★ PDF 출력 시 견적서 배경색 제거 — 깨끗한 흰 배경 */
        body.pdf-exporting #view-quote input,
        body.pdf-exporting #view-quote select,
        body.pdf-exporting #view-quote textarea { background: transparent !important; background-color: transparent !important; }
        body.pdf-exporting .quote-grand-total { background: transparent !important; background-color: transparent !important; }
        body.pdf-exporting .quote-table tfoot { background: transparent !important; background-color: transparent !important; }
        body.pdf-exporting .quote-supplier-table th,
        body.pdf-exporting .quote-supplier-table td { background: transparent !important; background-color: transparent !important; }
        body.pdf-exporting #view-quote [class*="bg-slate"],
        body.pdf-exporting #view-quote [class*="bg-blue"],
        body.pdf-exporting #view-quote [class*="bg-amber"],
        body.pdf-exporting #view-quote [class*="bg-emerald"],
        body.pdf-exporting #view-quote [class*="bg-indigo"],
        body.pdf-exporting #view-quote [class*="bg-orange"] { background: transparent !important; background-color: transparent !important; }

        /* ★ 재무정보 숨김 (팀원/게스트) */
        body.hide-finance .finance-only { display: none !important; }
        body.hide-finance .finance-blur { filter: blur(6px); pointer-events: none; user-select: none; }

        @media print {
            .sidebar, .topbar, .print-hide, .tabs-container, .mobile-header, .guide-banner, [data-pdf-hide="true"] { display: none !important; }
            .main-content { overflow: visible; }
            .content-area { padding: 0; max-width: 100%; margin: 0; }
            body { background: white; height: auto; display: block; }
            @page { size: A4 portrait; margin: 8mm; }
            body.print-landscape @page { size: A4 landscape; margin: 8mm; }
            .doc-table-wrap { border: none; box-shadow: none; }
            .doc-table { border: 2px solid black; min-width: 100%; }
            
            /* ★ 견적서 한 페이지 출력 최적화 */
            .quote-paper { box-shadow: none; border: none; padding: 20px 25px; aspect-ratio: auto; max-width: 100%; }
            /* 인쇄 시 견적서 배경색 제거 */
            #view-quote input, #view-quote select, #view-quote textarea { background: transparent !important; background-color: transparent !important; }
            .quote-grand-total { background: transparent !important; background-color: transparent !important; }
            .quote-table tfoot { background: transparent !important; background-color: transparent !important; }
            .quote-supplier-table th, .quote-supplier-table td { background: transparent !important; background-color: transparent !important; }
            #view-quote [class*="bg-slate"], #view-quote [class*="bg-blue"],
            #view-quote [class*="bg-amber"] { background: transparent !important; background-color: transparent !important; }
            .quote-paper h1 { margin-bottom: 20px !important; font-size: 22px !important; }
            .quote-paper .mb-10 { margin-bottom: 16px !important; }
            .quote-paper .mb-4 { margin-bottom: 8px !important; }
            .quote-paper .mt-8 { margin-top: 12px !important; }
            .quote-grand-total { padding: 6px 8px !important; margin-bottom: 4px !important; }
            .quote-table th, .quote-table td { padding: 5px 6px !important; font-size: 0.8rem !important; }
            .quote-supplier-table th, .quote-supplier-table td { padding: 2px 4px !important; }
            
            /* ★ 컬러 출력 보장 */
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
            [class*="bg-blue"], [class*="bg-slate"], [class*="bg-indigo"], [class*="bg-purple"], [class*="bg-emerald"] { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            [class*="text-blue"], [class*="text-red"], [class*="text-purple"], [class*="text-emerald"], [class*="text-slate"] { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            th, thead tr { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            .quote-grand-total { background: rgba(219,234,254,0.5) !important; -webkit-print-color-adjust: exact !important; }
            .quote-table th { background: #f2f2f2 !important; -webkit-print-color-adjust: exact !important; }
            .bg-slate-800 { background: #1e293b !important; -webkit-print-color-adjust: exact !important; }
            .bg-slate-800 th { color: white !important; }
        }

        /* Drag & Drop */
        .drag-handle { cursor: grab; opacity: 0.3; transition: opacity 0.2s; user-select: none; font-size: 14px; }
        .drag-handle:hover { opacity: 0.8; }
        tr.dragging { opacity: 0.4; background: #dbeafe !important; }
        tr.drag-over { border-top: 3px solid var(--accent) !important; }

        /* Calendar event drag */
        .cal-event { cursor: pointer; user-select: none; }
        .cal-event[draggable="true"] { cursor: grab; }
        .cal-event.cal-dragging { opacity: 0.3; }
        .cal-day.cal-drop-target { background: #dbeafe !important; box-shadow: inset 0 0 0 2px #3b82f6; }

        /* Quote supplier table: prevent text clipping */
        .quote-supplier-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
        .quote-supplier-table th { white-space: nowrap; font-size: 9px; padding: 3px 4px; overflow: hidden; text-overflow: ellipsis; }
        .quote-supplier-table td { padding: 2px 3px; overflow: hidden; max-width: 0; }
        .quote-supplier-table input { font-size: 10px; min-width: 0; width: 100%; box-sizing: border-box; display: block; overflow: hidden; text-overflow: ellipsis; }

        /* Estimate category picker */
        .est-cat-wrap { position: relative; display: flex; align-items: center; }
        .est-cat-wrap input { flex: 1; min-width: 0; }
        .est-cat-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 10px; color: #94a3b8; padding: 2px 4px; border-radius: 3px; line-height: 1; z-index: 2; }
        .est-cat-btn:hover { color: #3b82f6; background: #eff6ff; }
        .est-cat-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100; max-height: 200px; overflow-y: auto; }
        .est-cat-dropdown.open { display: block; }
        .est-cat-dropdown div { padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; color: #334155; }
        .est-cat-dropdown div:hover { background: #eff6ff; color: #2563eb; }

        /* Responsive - Mobile & Tablet */
        .mobile-header { display: none; }
        .mobile-bottom-nav { display: none; }

        /* ════════════════════════════════════════
           RESPONSIVE — 태블릿 이하 (≤1024px)
           사이드바 오버레이 전환 + 모바일 헤더/하단 네비 활성화
        ════════════════════════════════════════ */
        @media (max-width: 1024px) {
            body { flex-direction: column; overflow: hidden; }
            .main-content { flex: 1; width: 100%; min-height: 0; }
            :root { --sidebar-w: 0px; }

            /* 사이드바: 오버레이 드로어 */
            .sidebar { display: none; position: fixed; left: 0; width: 280px; height: 100vh;
                       z-index: 200; overflow-y: auto; flex-shrink: 0; }
            .sidebar.open { display: flex; box-shadow: 4px 0 20px rgba(0,0,0,0.3); }
            .sidebar-brand { padding: 16px 20px; }
            .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; }
            .sidebar-overlay.active { display: block; }

            /* 모바일 상단 헤더 */
            .mobile-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
                             background: #ffffff; color: var(--text-main); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
            .mob-proj-select { flex: 1; min-width: 0; background: var(--bg-main);
                               border: 1px solid var(--border); color: var(--text-main); font-size: 0.7rem;
                               padding: 6px 8px; border-radius: 8px; outline: none; font-weight: 700; appearance: none; }
            .mob-proj-select option { color: #1e293b; background: white; }

            /* 모바일 하단 네비 — 제거(2026-06-25, 사장님 요청). 메인 네비는 상단으로 이전됨, 이 바는 서브메뉴만이라 불필요 */
            .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
                                 background: white; border-top: 1px solid #e2e8f0;
                                 padding: 8px 12px max(8px, env(safe-area-inset-bottom));
                                 justify-content: center;
                                 box-shadow: 0 -4px 16px rgba(0,0,0,0.06); }

            /* 탑바 */
            .topbar { padding: 10px 14px; flex-wrap: wrap; gap: 6px; top: 44px; }
            .topbar h2 { font-size: 1.05rem; }
            #topbarActionsWrapper { display: none; }

            /* 콘텐츠 */
            .content-area { padding: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); max-width: 100%; } /* 하단 네비 제거 → 72px 예약 회수 */
            .doc-table { min-width: 700px; }
            .quote-paper { padding: 20px; aspect-ratio: auto; }
            .stat-card { padding: 14px; }

            /* ★ docInfoBox: 태블릿 */
            #docInfoBox #docInfoDetail { grid-template-columns: repeat(2, 1fr); }
        }


        /* ════ COMMAND PALETTE ════ */
        #cmdPalette { transition: opacity 0.15s, transform 0.15s; }
        #cmdPalette.hidden { opacity:0; pointer-events:none; }
        #cmdPalette .cmd-item { display:flex; align-items:center; gap:10px; padding:10px 14px;
            border-radius:10px; cursor:pointer; transition:background 0.1s; }
        #cmdPalette .cmd-item:hover, #cmdPalette .cmd-item.cmd-active { background:#eff6ff; }
        #cmdPalette .cmd-item .cmd-icon { width:32px; height:32px; border-radius:8px; display:flex;
            align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
        #cmdPalette .cmd-item .cmd-label { font-size:13px; font-weight:700; color:#1e293b; }
        #cmdPalette .cmd-item .cmd-sub { font-size:11px; color:#94a3b8; margin-top:1px; }
        #cmdPalette .cmd-item .cmd-kbd { margin-left:auto; font-size:10px; background:#f1f5f9;
            border:1px solid #e2e8f0; border-radius:4px; padding:2px 6px; color:#64748b; flex-shrink:0; }
        #cmdPalette .cmd-group-label { font-size:9px; font-weight:900; color:#94a3b8;
            text-transform:uppercase; letter-spacing:.1em; padding:8px 14px 4px; }

        /* ════ SETTINGS SLIDE PANEL ════ */
        #settingsPanel { position:fixed; top:0; right:0; bottom:0; width:min(600px,100vw);
            background:white; z-index:250; box-shadow:-8px 0 40px rgba(0,0,0,0.12);
            transform:translateX(100%); transition:transform 0.3s cubic-bezier(.4,0,.2,1);
            display:flex; flex-direction:column; overflow:hidden; }
        #settingsPanel.open { transform:translateX(0); }
        #settingsPanelOverlay { position:fixed; inset:0; background:rgba(0,0,0,0.3);
            z-index:249; opacity:0; pointer-events:none; transition:opacity 0.3s; }
        #settingsPanelOverlay.open { opacity:1; pointer-events:all; }
        #settingsPanel .sp-header { background:linear-gradient(135deg,#1e293b,#334155);
            padding:20px 24px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
        #settingsPanel .sp-body { flex:1; overflow-y:auto; padding:24px; space-y:24px; }
        @media (max-width:640px) {
            #settingsPanel { width:100vw; }
        }

        /* ════ QUICK ACTION FAB ════ */
        #fabBtn { position:fixed; bottom:80px; right:20px; z-index:200;
            width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#6366f1);
            color:white; font-size:22px; display:flex; align-items:center; justify-content:center;
            box-shadow:0 4px 20px rgba(59,130,246,0.5); cursor:pointer; border:none;
            transition:transform 0.2s, box-shadow 0.2s; }
        #fabBtn:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(59,130,246,0.6); }
        #fabBtn.open { transform:rotate(45deg); }
        #fabMenu { position:fixed; bottom:142px; right:20px; z-index:200;
            display:flex; flex-direction:column; gap:8px; align-items:flex-end;
            opacity:0; pointer-events:none; transform:translateY(10px);
            transition:opacity 0.2s, transform 0.2s; }
        #fabMenu.open { opacity:1; pointer-events:all; transform:translateY(0); }
        .fab-item { display:flex; align-items:center; gap:10px; cursor:pointer; }
        .fab-item .fab-label { background:white; color:#1e293b; font-size:12px; font-weight:700;
            padding:6px 12px; border-radius:20px; box-shadow:0 2px 12px rgba(0,0,0,0.12);
            white-space:nowrap; }
        .fab-item .fab-icon { width:40px; height:40px; border-radius:50%; display:flex;
            align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
            box-shadow:0 2px 12px rgba(0,0,0,0.15); }
        @media (min-width:769px) {
            #fabBtn { bottom:24px; }
            #fabMenu { bottom:88px; }
        }

        /* ════════════════════════════════════════
           RESPONSIVE — 모바일 (≤768px)
           탑바 숨김, 핵심 컨텐츠만 표시
        ════════════════════════════════════════ */
        
        /* ── 출퇴근 위젯 모바일 ── */
        @media (max-width: 640px) {
            #clockWidget { padding: 12px; }
            #clockInBtn, #clockOutBtn { padding: 10px 20px; font-size: 13px; }
            #clockWorkType { font-size: 12px; }
            #clockTodayInfo { flex-direction: column; gap: 6px; }
        }
        /* 전사관리 섹션 헤더 구분 */
        .ctx-section-header span.global-badge {
            font-size: 9px; color: #94a3b8; font-weight: 500;
            background: #f1f5f9; padding: 1px 5px; border-radius: 4px; margin-left: 4px;
        }

        @media (max-width: 768px) {
            .app-topbar { padding: 0 8px !important; }
            /* 탭 영역: 6개 섹션이 좁은 폰에서 잘리지 않도록 가로 스크롤 (라벨 유지 — 폴더 아이콘 중복으로 아이콘만 표시는 부적합) */
            .topbar-left { flex: 1; min-width: 0; }
            .topbar-sections { overflow-x: auto; flex-wrap: nowrap;
                -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
            .topbar-sections::-webkit-scrollbar { display: none; }
            .app-topbar .topbar-section-btn { padding: 0 9px; font-size: 12px; flex-shrink: 0; }
            .app-topbar .topbar-section-btn svg { width: 16px; height: 16px; }
            /* 제안서 AI 모바일 — Phase 7부터 OS 네이티브 셸이라 iframe 호환 이슈 없음. mobile-nav.js의 sub nav도 정의됨. */
            .context-panel { display: none !important; }
            #finMobileTabBar { display: flex !important; }
            .content-area { padding: 6px !important; padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; padding-top: 48px !important; } /* 하단 네비 제거 → 회수 */

            /* 전체 크기 축소 — 줄바꿈 방지 */
            body { font-size: 13px !important; word-break: keep-all !important; overflow-x: hidden; }
            * { word-break: keep-all !important; }

            /* 모든 테이블 가로 스크롤 강제 */
            table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
            thead { display: table; width: 100%; }
            tbody { display: table; width: 100%; }
            tr { display: table-row; }
            th, td { white-space: nowrap !important; padding: 4px 6px !important; font-size: 11px !important; max-width: none !important; }
            /* JS 인라인 스타일 덮어쓰기 */
            td[style], th[style] { white-space: nowrap !important; }
            td a, td span, td button { white-space: nowrap !important; }

            /* 탭 바 가로 스크롤 */
            .tabs-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
            .folder-tab, [class*="tab"] button { white-space: nowrap !important; flex-shrink: 0 !important; }
            /* flex 줄바꿈 방지 (근태/상태바 등) */
            #clockTodayInfo { flex-wrap: nowrap !important; }

            /* 지출결의 상단 요약 테이블 — 가로 스크롤 */
            #view-expense table { min-width: 500px; }
            #view-expense thead th { font-size: 9px !important; white-space: nowrap !important; padding: 6px 4px !important; }

            /* 자금관리 탭 바 */
            #treasuryContainer > div:first-child { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
            #treasuryContainer button { white-space: nowrap !important; flex-shrink: 0 !important; font-size: 11px !important; }
            .text-xs { font-size: 10px !important; }
            .text-sm { font-size: 12px !important; }
            .text-base { font-size: 13px !important; }
            .text-lg { font-size: 15px !important; }
            .text-xl { font-size: 17px !important; }
            h1, h2, .text-2xl { font-size: 18px !important; }
            h3 { font-size: 14px !important; }
            p { font-size: 13px !important; }

            /* 무거운 섹션 숨김 */
            .mob-hide { display: none !important; }
            .guide-banner { display: none !important; }
            .topbar-right { display: none !important; }
            /* 모바일 전용 우측 버튼 */
            .mobile-topbar-right { display: flex !important; align-items: center; margin-left: auto; padding-right: 4px; }
            /* 수동 저장/PDF/Excel 버튼 숨김 */
            #fabBtn, #fabMenu { display: none !important; }
            /* 모바일 서브 네비 */
            #mobileSubNav { min-height: 40px; display: flex; align-items: center; }
            .mob-sub-item {
                padding: 6px 14px; border-radius: 16px; font-size: 11px; font-weight: 700;
                border: none; background: #f1f5f9; color: #475569; cursor: pointer;
                transition: all 0.15s; white-space: nowrap;
            }
            .mob-sub-item:active { transform: scale(0.95); }
            .mob-sub-item.active { background: #1e293b; color: white; }
            #currentWorkspaceBox .flex-shrink-0 button { font-size: 9px !important; padding: 3px 6px !important; }
            /* 프로젝트 헤더 간소화 */
            #currentWorkspaceBox { padding: 6px 10px !important; }
            #docInfoDetail { gap: 6px !important; }
            /* 카드/박스 축소 */
            .rounded-2xl { border-radius: 10px !important; }
            .rounded-xl { border-radius: 8px !important; }
            .p-4 { padding: 10px !important; }
            .p-5, .p-6 { padding: 12px !important; }
            .px-4 { padding-left: 10px !important; padding-right: 10px !important; }
            .py-3 { padding-top: 6px !important; padding-bottom: 6px !important; }
            .py-4 { padding-top: 8px !important; padding-bottom: 8px !important; }
            .mb-4 { margin-bottom: 10px !important; }
            .mb-6 { margin-bottom: 12px !important; }
            .gap-4 { gap: 8px !important; }
            .gap-6 { gap: 10px !important; }

            /* ★ docInfoBox 모바일: 상세는 2컬럼 */
            #docInfoBox #docInfoDetail { grid-template-columns: repeat(2, 1fr); }

            /* 테이블 */
            .doc-table { min-width: 560px; }
            /* ★ 768px에서 tbl-font var 재정의 → 모든 테이블/인풋 자동 반영 */
            :root { --tbl-font: clamp(0.62rem, 2.2vw, 0.78rem); --tbl-pad-x: 3px; --tbl-pad-y: 5px; }

            /* 탭 */
            .folder-tab { font-size: 0.63rem; padding: 7px 9px; white-space: nowrap; }
            .tabs-container { gap: 2px; }

            /* 버튼 */
            .btn { padding: 6px 10px; font-size: 0.68rem; }
            .btn-new-tab { font-size: 0.6rem; padding: 5px 8px; }

            /* stat-card */
            .stat-card { padding: 10px 12px !important; white-space: normal !important; word-break: keep-all !important; }
            .stat-card .font-black { font-size: 15px !important; white-space: nowrap !important; }
            .stat-card .text-\[10px\] { font-size: 9px !important; white-space: nowrap !important; }
            /* 그리드 2열 유지 */
            .grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
            .sm\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
            .stat-card [class*="text-2xl"],
            .stat-card [class*="text-3xl"],
            .stat-card [class*="text-4xl"] {
                font-size: clamp(0.85rem, 3.5vw, 1.3rem);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }
            .stat-card [class*="text-xs"],
            .stat-card [class*="text-[9px]"],
            .stat-card p { font-size: 0.6rem; }

            /* 그리드 */
            .grid.grid-cols-3, .grid.grid-cols-4 { grid-template-columns: 1fr 1fr; gap: 8px; }

            /* 견적서 */
            .quote-receiver-supplier { flex-direction: column; gap: 12px; }
            .quote-receiver-supplier > div { width: 100%; padding-right: 0; }
            .quote-paper { padding: 14px; max-width: 100%; }
            .quote-paper h1 { font-size: 1.3rem; letter-spacing: 0.15em; margin-bottom: 1rem; }

            /* 모달 */
            .modal-inner { padding: 16px; max-height: 92vh; }

            /* 간트 */
            .gantt-container { min-width: 600px; }
        }

        /* ★ 프로젝트 타입 선택 카드 */
        .proj-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .proj-type-card { border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.15s; background: #f8fafc; }
        .proj-type-card:hover { border-color: #93c5fd; background: #eff6ff; }
        .proj-type-card.selected { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
        .proj-type-card .type-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 4px; }
        .proj-type-card .type-name { font-size: 0.68rem; font-weight: 800; color: #1e293b; }
        .proj-type-card .type-desc { font-size: 0.58rem; color: #94a3b8; margin-top: 2px; }
        .proj-type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 0.65rem; font-weight: 800; background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

        /* ★ 홈 위젯 드래그 */
        .home-widget { position: relative; transition: opacity 0.15s; }
        .home-widget.dragging { opacity: 0.4; }
        .home-widget.drag-over { outline: 2px dashed #3b82f6; outline-offset: 3px; border-radius: 16px; }
        .home-edit-mode .home-widget { cursor: grab; }
        .home-edit-mode .home-widget:active { cursor: grabbing; }
        .widget-drag-handle { display: none; position: absolute; top: 10px; right: 10px; z-index: 10; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px 8px; cursor: grab; font-size: 11px; font-weight: 800; color: #64748b; user-select: none; }
        .home-edit-mode .widget-drag-handle { display: flex; align-items: center; gap: 4px; }
        .widget-toggle-btn { display: none; position: absolute; top: 10px; left: 10px; z-index: 10; background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px; padding: 3px 8px; cursor: pointer; font-size: 10px; font-weight: 900; color: #92400e; }
        .home-edit-mode .widget-toggle-btn { display: flex; align-items: center; gap: 3px; }
        .home-widget.widget-hidden { display: none; }
        .home-edit-mode .home-widget.widget-hidden { display: block; opacity: 0.35; }
        .home-edit-done-bar { display: none; position: sticky; top: 0; z-index: 90; background: #1e3a5f; color: white; padding: 8px 16px; border-radius: 12px; margin-bottom: 12px; font-size: 12px; font-weight: 900; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(30,58,95,0.3); }
        .home-edit-mode ~ * .home-edit-done-bar, #view-home.home-edit-mode .home-edit-done-bar { display: flex !important; }

        /* ★ 런닝오더 */
        .ro-row { display: grid; grid-template-columns: 90px 1fr 110px 90px 70px 44px; gap: 0; border-bottom: 1px solid #f1f5f9; align-items: center; min-height: 42px; }
        .ro-row:hover { background: #f8fafc; }
        .ro-row.ro-done { opacity: 0.5; }
        .ro-row.ro-done .ro-task-text { text-decoration: line-through; color: #94a3b8; }
        .ro-row input, .ro-row select { border: none; outline: none; background: transparent; width: 100%; font-size: 0.78rem; font-weight: 600; padding: 8px 6px; color: #1e293b; }
        .ro-time-col { font-size: 0.8rem; font-weight: 800; color: #2563eb; padding: 8px 10px; }
        .ro-check { width: 20px; height: 20px; accent-color: #2563eb; cursor: pointer; }
        .ro-section-header { background: #1e293b; color: white; font-size: 0.7rem; font-weight: 800; padding: 6px 12px; letter-spacing: 0.05em; text-transform: uppercase; }
        @media (max-width: 768px) {
            .ro-row { grid-template-columns: 76px 1fr 80px 36px; }
            .ro-row .ro-duration-col, .ro-row .ro-location-col { display: none; }
        }

        /* ★ 전사 관리 뷰 모바일 개선 */
        @media (max-width: 768px) {
            /* 칸반: 가로 스크롤 대신 세로 스택 (파이프라인/정산/TODO) */
            #pipelineKanban, #settlementKanban, #todoKanban {
                flex-direction: column !important;
                gap: 12px !important;
            }
            #pipelineKanban > div,
            #settlementKanban > div,
            #todoKanban > div {
                width: 100% !important;
                flex-shrink: unset !important;
            }
            /* 요약바: 2컬럼 */
            #pipelineSummaryBar,
            #settlementSummaryBar,
            #quoteListSummary,
            #crmSummary,
            #todoSummary,
            #attendSummary,
            #globalCalSummary { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
            /* 칸반 카드 max-height 늘림 */
            #pipelineKanban > div > div:last-child,
            #settlementKanban > div > div:last-child,
            #todoKanban > div > div:last-child { max-height: none !important; }
            /* 전사 뷰 헤더 flex 정렬 */
            #view-global .flex.items-center.justify-between { flex-direction: column; align-items: flex-start; gap: 8px; }
            #view-global .flex.gap-2.items-center.flex-wrap { width: 100%; }
            /* 테이블 가로 스크롤 */
            #quoteListTable, #crmTable, #attendTable { overflow-x: auto; }
            /* 회의록 3컬럼 → 1컬럼 */
            #meetingList .grid.grid-cols-1.md\\:grid-cols-3 { grid-template-columns: 1fr !important; }
            /* 모달 */
            .modal-inner { margin: 8px !important; }
        }

        @media (max-width: 480px) {
            #pipelineSummaryBar { grid-template-columns: repeat(2, 1fr) !important; }
            #pipelineKanban > div .flex.gap-1 button { font-size: 8px !important; padding: 2px 4px !important; }
        }

        /* ★ 크루 DB 피커 */
        .crew-picker-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 400; align-items: flex-end; justify-content: center; }
        .crew-picker-overlay.open { display: flex; }
        .crew-picker-sheet { background: white; border-radius: 20px 20px 0 0; width: 100%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
        @media (min-width: 768px) { .crew-picker-sheet { border-radius: 16px; margin: auto; max-height: 70vh; } }
        @media (max-width: 768px) {
            #wbsBody tr td:nth-child(8),
            #wbsListView thead tr th:nth-child(8) { display: none; }
            #wbsListView .doc-table { min-width: 460px; }
            #allProjectsBody tr td.finance-only,
            #view-home table thead th.finance-only { display: none; }
        }
        @media (max-width: 480px) {
            .mobile-header { padding: 6px 10px; }
            .mob-proj-select { font-size: 0.65rem; padding: 5px 6px; }
            .content-area { padding: 6px; padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* 하단 네비 제거 → 회수 */

            /* ★ 테이블 폰트 */
            .doc-table { min-width: 480px; }
            :root { --tbl-font: clamp(0.6rem, 2.8vw, 0.75rem); --tbl-pad-x: 2px; --tbl-pad-y: 4px; }

            /* stat-card: 더 작게 */
            .stat-card { padding: 10px 12px; }
            .stat-card [class*="text-2xl"],
            .stat-card [class*="text-3xl"] {
                font-size: clamp(0.85rem, 4vw, 1.15rem);
            }
            /* ★ stat-card 레이블 폰트 */
            .stat-card .text-xs, .stat-card [class*="text-[9px]"] { font-size: clamp(0.58rem,2.3vw,0.72rem); }

            /* 탭 */
            .folder-tab { font-size: 0.6rem; padding: 5px 8px; }

            /* ★ 카드 body padding 축소 */
            .portal-card-body, .card-body { padding: 14px; }

            /* ★ 버튼 그룹 wrap */
            .btn-group-mobile { flex-wrap: wrap; gap: 6px; }

            /* ★ extcrew 테이블 컬럼 모바일 숨김 */
            #extCrewTableBody tr td:nth-child(4),
            #extCrewTableBody tr td:nth-child(6),
            #extCrewTableBody tr th:nth-child(4),
            #extCrewTableBody tr th:nth-child(6) { display: none; }

            /* ★ 모달 풀스크린 */
            .modal-inner { padding: 12px; max-height: 96vh; border-radius: 16px 16px 0 0; }
            #extCrewModal > div, #extCrewRegLinkModal > div { 
                border-radius: 20px 20px 0 0; 
                position: fixed; bottom: 0; left: 0; right: 0; 
                max-height: 94vh; overflow-y: auto; margin: 0;
                max-width: 100%;
            }

            /* ★ 포털 섹션 토글 그리드 */
            #portalSectionToggles { grid-template-columns: 1fr 1fr; }

            /* ★ 홈 버튼 행 스크롤 처리 */
            .bg-white.p-4.rounded-xl .flex-wrap { gap: 6px; }
            .bg-white.p-4.rounded-xl button { font-size: 0.65rem; padding: 5px 8px; }
        }

            /* 모달 */
            .modal-inner { margin: 4px; border-radius: 12px; }

            /* 인풋 */
            .input-no-border { font-size: 0.65rem; padding: 3px 2px; }
            .text-right-input { padding-right: 4px; }

            /* 견적서 */
            .quote-paper { padding: 10px; }
            .quote-paper h1 { font-size: 1.05rem; }
            .quote-supplier-table th, .quote-supplier-table td { padding: 2px 1px; }
            .quote-supplier-table input { font-size: 9px; }

            /* 스크롤 보정 */
            .main-content { scroll-padding-top: 44px; }
        }

        /* 결재 CSS 제거됨 */

        /* ══ 전사관리 탭 UI (pill) ══ */
        .global-tab {
            flex-shrink: 0;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 700;
            color: #64748b;
            border-radius: 20px;
            white-space: nowrap;
            transition: background .15s, color .15s;
            background: transparent;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            line-height: 1;
        }
        .global-tab:hover { background: #f1f5f9; color: #1e293b; }
        .global-tab.active { background: #1e293b; color: white; font-weight: 800; }
        .global-content-wrap { padding: 28px 40px; max-width: 1400px; margin: 0 auto; }
        #view-global { padding: 0 !important; }
        @media (max-width: 1024px) { .global-content-wrap { padding: 16px; } }
        @media (max-width: 768px) {
            #globalTopNav { top: 52px; }
            .global-tab { padding: 5px 10px; font-size: 11px; }
            .global-content-wrap { padding: 12px 10px 80px; }
            /* 캘린더 모바일: 셀 최소높이 축소, 이벤트는 점으로 표시 */
            .cal-day { min-height: 50px !important; padding: 2px !important; }
            .cal-day .cal-event { font-size: 7px !important; padding: 1px 2px !important; min-height: 12px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
            .cal-day .text-xs { font-size: 10px !important; }
            /* 달력 요일 헤더 축소 */
            table th { font-size: 10px !important; padding: 4px 2px !important; }
            #pipelineKanban, #settlementKanban, #todoKanban { flex-direction: column !important; }
            #pipelineSummaryBar { grid-template-columns: repeat(4,1fr) !important; }
            #settlementSummaryBar, #quoteListSummary, #crmSummary, #todoSummary, #attendSummary { grid-template-columns: repeat(2,1fr) !important; }
            #meetingList { grid-template-columns: 1fr !important; }
            /* 패치노트 모바일: 뱃지 축소 */
            #patchLogModal .w-16 { width: 3rem; flex-shrink: 0; }
            #patchLogModal .flex-1 { min-width: 0; }
        }

        /* ── 가이드 배너 ── */
        .guide-banner { transition: all 0.2s; }
        .guide-banner b { font-weight: 900; }
        /* ── 게스트/팀원 권한 제한 ── */
        body.hide-finance .finance-only { display: none !important; }
        body.hide-finance [data-finance] { display: none !important; }
        body.hide-finance .ctx-global-section { display: none !important; }
        /* extjoin-mode: OS UI 완전 숨김 */


/* ══ patch-v16-6-style ══ */
        /* v16.6 — 모바일 UX/워크스페이스 보드 정리 */
        .workspace-hub-hero {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.16);
            background:
                radial-gradient(circle at top right, rgba(125, 211, 252, 0.26), transparent 28%),
                radial-gradient(circle at bottom left, rgba(96, 165, 250, 0.22), transparent 24%),
                linear-gradient(135deg, #0f172a 0%, #1d4ed8 52%, #1e40af 100%);
            box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
        }
        .workspace-hub-hero::after {
            content: "";
            position: absolute;
            inset: auto -56px -56px auto;
            width: 180px;
            height: 180px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            filter: blur(6px);
            pointer-events: none;
        }
        .workspace-hub-stat {
            border: 1px solid rgba(255,255,255,0.14);
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
        }
        .workspace-hub-board { align-items: stretch; }
        .workspace-hub-card {
            position: relative;
            overflow: hidden;
            min-height: 320px;
            border-radius: 24px;
            border: 1px solid #e2e8f0;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .workspace-hub-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: var(--hub-accent, #3b82f6);
        }
        .workspace-hub-card::after {
            content: "";
            position: absolute;
            top: -64px;
            right: -64px;
            width: 160px;
            height: 160px;
            border-radius: 999px;
            background: radial-gradient(circle, color-mix(in srgb, var(--hub-accent, #3b82f6) 22%, white) 0%, transparent 70%);
            opacity: .7;
            pointer-events: none;
        }
        .workspace-hub-card:hover {
            transform: translateY(-4px);
            border-color: color-mix(in srgb, var(--hub-accent, #3b82f6) 34%, #cbd5e1);
            box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
        }
        .workspace-hub-card .bg-slate-50 { background: rgba(248, 250, 252, 0.92) !important; }
        .workspace-hub-card .border-slate-100 { border-color: #e2e8f0 !important; }
        .workspace-hub-card button {
            position: relative;
            z-index: 1;
        }
        @media (max-width: 768px) {
            #globalSearchWrap,
            #saveStatus { display: none !important; }

            .topbar-right { gap: 4px; }
            .workspace-hub-hero { padding: 18px 16px !important; border-radius: 20px !important; }
            .workspace-hub-hero .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            .workspace-hub-card { min-height: auto; border-radius: 20px; }
            .workspace-hub-controls { gap: 10px !important; }
            #view-workspacehub #workspaceHubSearch { display: none !important; }

            .context-panel.mob-menu-open {
                display: flex !important;
                flex-direction: column;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                bottom: 0 !important;
                right: auto !important;
                width: min(88vw, 340px) !important;
                height: 100vh !important;
                z-index: 300 !important;
                border-radius: 0 20px 20px 0 !important;
                box-shadow: 10px 0 36px rgba(15,23,42,0.22) !important;
                overflow-y: auto !important;
                background: white !important;
                padding: 14px 12px 18px !important;
                animation: _mobSlideLeft 0.26s cubic-bezier(0.34,1.1,0.64,1) both;
            }
            @keyframes _mobSlideLeft {
                from { transform: translateX(-100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }

            /* 모바일 하단 서브메뉴 — flex로 통일 */
        }

        @media (max-width: 480px) {
            .workspace-hub-card { padding: 16px !important; }
            .workspace-hub-hero h2 { font-size: 1.35rem !important; line-height: 1.25 !important; }
            .workspace-hub-stat { padding: 12px 10px !important; }
            .workspace-hub-card h3 { font-size: 1rem !important; }
        }

/* ══ patch-v17-0-style ══ */
        #workspaceHubDebug{display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; margin:0 !important; padding:0 !important; border:0 !important;}
#view-workspacehub #docInfoBox,
        #view-workspacehub #deadlineAlerts { display:none !important; }

        #view-workspacehub .workspace-hub-hero {
            background: linear-gradient(135deg, #0f1f4d 0%, #1f3f99 100%) !important;
            border-radius: 28px !important;
            box-shadow: 0 18px 40px rgba(31,63,153,0.18);
        }
        #view-workspacehub .workspace-hub-controls input,
        #view-workspacehub .workspace-hub-controls select {
            min-height: 52px;
            font-weight: 700;
        }
        #view-workspacehub .workspace-hub-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 24px;
            box-shadow: 0 10px 28px rgba(15,23,42,0.08);
            overflow: hidden;
            position: relative;
        }
        #view-workspacehub .workspace-hub-card::before{
            content:"";
            position:absolute; inset:0 auto 0 0; width:6px; background:var(--hub-accent, #3b82f6);
        }
        #view-workspacehub .workspace-hub-card:hover{
            transform: translateY(-2px);
            box-shadow: 0 16px 36px rgba(15,23,42,0.12);
        }
        #mobnav-more, #fabBtn, #fabMenu { display:none !important; }

        @media (max-width: 767px){
            .sidebar-overlay { z-index: 299 !important; }
            #contextPanel.mob-menu-open{
                display:flex !important;
                z-index: 310 !important;
                pointer-events:auto !important;
                visibility:visible !important;
                opacity:1 !important;
            }
            #view-workspacehub .workspace-hub-hero{
                padding: 18px 16px !important;
                border-radius: 24px !important;
            }
            #view-workspacehub .workspace-hub-controls{
                gap: 10px !important;
            }
            #view-workspacehub #workspaceHubSearch{
                display:block !important;
                width:100% !important;
            }
        }

/* ══ hideDocInfoBoxV46 ══ */
#docInfoBox{display:none !important;}

/* ══ v48-sidebar-group-style ══ */
#docInfoBox,
#currentWorkspaceBox{
  display:none !important;
}
#ctx-project .v48-nav-group-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin:.25rem 0 .35rem;
  padding:.45rem .6rem;
  border:0;
  background:transparent;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  text-align:left;
  border-radius:.75rem;
  cursor:pointer;
}
#ctx-project .v48-nav-group-toggle:hover{ background:#f8fafc; color:#334155; }
#ctx-project .v48-nav-group-toggle .v48-chev{
  width:14px; height:14px; flex-shrink:0; transition:transform .18s ease;
}
#ctx-project .v48-nav-group-toggle.is-collapsed .v48-chev{ transform:rotate(-90deg); }
#ctx-project .v48-nav-group-body{ display:block; margin-bottom:.2rem; }
#ctx-project .v48-nav-group-body .ctx-nav-item{ margin-bottom:.15rem; }
body.workspace-board-mode-v8 #ctx-project .v48-nav-group-toggle,
body.workspace-board-mode-v8 #ctx-project .v48-nav-group-body{ display:none !important; }

/* ════════════════════════════════════════
   ★ 메신저 v2 — 제거됨 (2026-04-15)
   ════════════════════════════════════════ */

/* ── 반응형 ── */
@media (max-width: 768px) {
  #fabBtn { bottom: 140px !important; }
  #fabMenu { bottom: 200px !important; }
  /* 슬라이드 패널 모바일 전체 너비 */
  [data-slide-panel] { max-width: 100% !important; }
  /* WBS 슬라이드 패널 모바일 */
  .wbs-panel { width: 100vw !important; max-width: 100vw !important; }
  /* 모바일 헤더 배경 어둡게 */
  .mobile-header { background: linear-gradient(135deg, #1e293b, #334155) !important; color: white !important; }
}

/* ══ 재무 탭 (context-panel 교체 방식) ══ */
/* ══ 재무 탭 사이드바 ══ */
.fin-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    border-radius: 6px;
    margin: 1px 6px;
    width: calc(100% - 12px);
    transition: all .1s;
    background: none;
    border: none;
    text-align: left;
}
.fin-nav-item:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.fin-nav-item.fin-nav-active {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 700;
}
.fin-panel.hidden { display: none !important; }
@media (max-width: 768px) {
    #financeSidebar { width: 180px; font-size: 11px; }
}
@media (max-width: 480px) {
    #financeSidebar { display: none; }
}

/* ── 모달 디자인 시스템 ── */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalScaleIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.os-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 10000; display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: modalFadeIn 0.2s ease;
    backdrop-filter: blur(2px);
}
.os-modal {
    background: white; border-radius: 16px; overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
    animation: modalScaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex; flex-direction: column; max-height: 85vh;
}
.os-modal-header {
    background: #1e293b; color: white; padding: 18px 24px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.os-modal-header h3 {
    font-size: 16px; font-weight: 900; margin: 0; letter-spacing: -0.3px;
}
.os-modal-close {
    color: rgba(255,255,255,0.6); font-size: 20px; cursor: pointer;
    border: none; background: none; padding: 4px 8px; border-radius: 6px;
    transition: all 0.15s;
}
.os-modal-close:hover { color: white; background: rgba(255,255,255,0.1); }
.os-modal-body {
    padding: 24px; overflow-y: auto; flex: 1;
}
.os-modal-footer {
    padding: 16px 24px; border-top: 1px solid #e2e8f0;
    display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
}
@media (max-width: 768px) {
    .os-modal-overlay { align-items: flex-end; padding: 0; }
    .os-modal {
        width: 100% !important; max-width: 100% !important;
        border-radius: 12px 12px 0 0; max-height: 90vh;
        animation: modalSlideUp 0.3s ease;
    }
    .os-modal-header { padding: 12px 16px !important; }
    .os-modal-header h3 { font-size: 14px !important; }
    .os-modal-body { padding: 14px 16px !important; }
    .os-modal-footer { padding: 10px 16px !important; }
    @keyframes modalSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

/* ═══ Phase 3-3: 모바일 최적화 ═══ */
@media (max-width: 768px) {
    /* 간트 차트 터치 스크롤 */
    .gantt-scroll-area {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    /* 테이블 가로 스크롤 */
    .quote-table, .exp-table, table.w-full {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 프로젝트 테이블 컬럼 축소 */
    #projectListContainer table th:nth-child(n+5),
    #projectListContainer table td:nth-child(n+5) {
        display: none;
    }
    /* 재무 카드 1열 */
    .stat-card { min-width: 0 !important; }
    /* 버튼 그룹 줄바꿈 */
    .flex.gap-1, .flex.gap-2 { flex-wrap: wrap; }
    /* 산출/견적/지출 인라인 편집 폰트 */
    .input-no-border { font-size: 11px !important; min-height: 30px; padding: 4px 6px !important; }
    /* WBS 테이블 → 카드 스타일 (줄바꿈 허용) */
    #wbsBody tr.wbs-row { display: block !important; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 6px; padding: 8px 10px; }
    #wbsBody tr.wbs-row td { display: inline-block !important; border: none !important; padding: 1px 3px !important; font-size: 11px !important; white-space: normal !important; }
    #wbsBody tr.wbs-row td:first-child { display: none !important; }
    #view-wbs thead { display: none !important; }
    #view-wbs table { min-width: 0 !important; display: block !important; }
    /* 지출결의 카드 스타일 (줄바꿈 허용) */
    #expBody tr.exp-row { display: block !important; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 6px; padding: 8px 10px; }
    #expBody tr.exp-row td { display: inline-block !important; border: none !important; padding: 1px 3px !important; font-size: 11px !important; white-space: normal !important; }
    #expBody tr.exp-row td:first-child { display: none !important; }
    /* 견적 테이블 */
    #quoteListBody tr { display: block; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px; padding: 10px; }
    #quoteListBody tr td { display: inline-block; border: none !important; padding: 2px 4px !important; }
    /* 자금관리 거래 카드 */
    .treasury-tx-row { display: block !important; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 6px; padding: 10px 12px !important; }
    .treasury-tx-row td { display: inline-block !important; border: none !important; padding: 2px 4px !important; }
    /* 글자 크기 자동 조절 */
    body { font-size: 14px; }
    h1, h2, h3 { word-break: keep-all; }
    .text-xs { font-size: 11px !important; }
    .text-sm { font-size: 13px !important; }
    /* 간트 세로 모드 */
    .gantt-scroll-area { min-height: auto !important; }
}

/* ═══════════════════════════════════════════════
   UI/UX PRO MAX — Accessibility & Polish
   Brand: #0F172A (Navy), #1E293B (Dark), #3B82F6 (Blue),
          #F8FAFC (Snow), #94A3B8 (Cloud)
═══════════════════════════════════════════════ */

/* ── 1. Focus States (Accessibility) ── */
*:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
select:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.ctx-nav-item:focus-visible,
.topbar-section-btn:focus-visible,
.topbar-icon-btn:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: -2px;
}

/* ── 2. Smooth Transitions (Interactive Elements) ── */
a, button, select, .ctx-nav-item, .nav-item, .folder-tab,
.global-tab, .fin-tab, .template-card, .proj-type-card,
.role-badge, .mob-sub-item {
    transition: all 0.2s ease;
}
input, textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* ── 3. Scrollbar (Dark Theme Match) ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #F8FAFC; }
::-webkit-scrollbar-thumb {
    background: #94A3B8;
    border-radius: 6px;
    border: 1px solid #F8FAFC;
}
::-webkit-scrollbar-thumb:hover { background: #64748b; }
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94A3B8 #F8FAFC;
}

/* ── 4. Toast / Notification Polish ── */
.toast, [class*="toast"], #toastWrap > div {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.6);
    backdrop-filter: blur(8px);
    animation: toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 5. Table Improvements ── */
.doc-table tbody tr:nth-child(even) { background: rgba(248, 250, 252, 0.5); }
.doc-table tbody tr:hover { background: #EFF6FF; }
.doc-table tbody tr { transition: background-color 0.15s ease; }
.doc-table th {
    position: relative;
    background-color: #F8FAFC !important;
}

/* ── 6. Card Hover Effects ── */
.dash-chart,
.kanban-col,
.template-card,
.proj-type-card,
.home-widget > div,
[class*="rounded-xl"][class*="border"][class*="bg-white"],
[class*="rounded-2xl"][class*="border"][class*="bg-white"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dash-chart:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}
.kanban-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.18s ease;
}

/* ── 7. Input Field Focus (Branded) ── */
.event-modal input:focus,
.event-modal textarea:focus,
.event-modal select:focus,
#shareModal input:focus,
#shareModal select:focus,
#crewPickerOverlay input:focus,
.os-modal input:focus,
.os-modal textarea:focus,
.os-modal select:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    outline: none;
}
select:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* ── 8. Loading / Skeleton Animation ── */
@keyframes skeletonPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton,
.loading-skeleton {
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.8s ease-in-out infinite;
    border-radius: 6px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.skeleton * { visibility: hidden; }

/* Subtle pulse for loading states */
@keyframes subtlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.loading-pulse {
    animation: subtlePulse 1.5s ease-in-out infinite;
}

/* ── Empty States ── */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 24px; text-align: center; color: #94a3b8;
}
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.empty-state-title { font-size: 16px; font-weight: 700; color: #64748b; margin-bottom: 8px; }
.empty-state-desc { font-size: 13px; color: #94a3b8; max-width: 320px; line-height: 1.6; }
.empty-state-action { margin-top: 20px; }

/* ── 9. Reduced Motion (Accessibility) ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skeleton, .loading-skeleton {
        animation: none;
        background: #E2E8F0;
    }
}

/* ═══════════════════════════════════════════════════════
   MOBILE TOUCH UX OPTIMIZATION
   Field crew uses phones for WBS, attendance, daily logs.
   All touch targets >= 44px, active states, safe areas.
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── 1. Touch Targets (minimum 44px) ── */

    /* Context nav items */
    .ctx-nav-item {
        min-height: 44px;
        padding: 10px 12px 10px 16px;
    }

    /* Folder tabs */
    .folder-tab {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Finance tabs */
    .fin-tab {
        min-height: 44px;
        padding: 10px 14px;
    }

    /* Global tabs (home sub-tabs) */
    .global-tab {
        min-height: 44px;
        padding: 8px 14px;
    }

    /* Buttons */
    .btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Topbar icon buttons */
    .topbar-icon-btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* Mobile topbar icons */
    .mobile-topbar-icon {
        min-width: 40px;
        min-height: 40px;
    }

    /* Kanban cards — more padding for touch */
    .kanban-card {
        padding: 14px 16px;
    }

    /* Table rows — touch-friendly height */
    .doc-table td {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Finance nav items */
    .fin-nav-item {
        min-height: 44px;
        padding: 10px 12px 10px 16px;
    }

    /* Mobile sub-nav items */
    .mob-sub-item {
        min-height: 36px;
        padding: 8px 16px;
    }

    /* Mobile user menu items */
    .mobile-user-menu-item {
        min-height: 44px;
        padding: 14px 16px;
    }

    /* Running order rows */
    .ro-row {
        min-height: 44px;
    }

    /* Nav items (legacy) */
    .nav-item {
        min-height: 44px;
        padding: 10px 12px 10px 16px;
    }

    /* ── 2. Better Mobile Spacing ── */

    /* Page title smaller on mobile */
    .page-title {
        font-size: 1.1rem;
    }

    /* Stat cards — tighter padding */
    .stat-card {
        padding: 14px;
    }

    /* Modals — bottom-sheet feel on mobile */
    .os-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .os-modal {
        width: 96% !important;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
    }

    /* ── 3. Active/Pressed States for Touch ── */

    /* Buttons — press scale */
    .btn:active,
    .btn-primary:active,
    .btn-outline:active,
    .btn-new-tab:active {
        transform: scale(0.97);
    }

    /* Cards — press scale */
    .stat-card:active,
    .kanban-card:active,
    .workspace-hub-card:active,
    .template-card:active,
    .proj-type-card:active {
        transform: scale(0.98);
    }

    /* Nav items — background darken on press */
    .ctx-nav-item:active,
    .nav-item:active,
    .fin-nav-item:active {
        background: #cbd5e1;
    }

    /* Tabs — background darken on press */
    .folder-tab:active,
    .fin-tab:active,
    .global-tab:active {
        background: #e2e8f0;
    }

    /* Topbar buttons — press state */
    .topbar-icon-btn:active,
    .mobile-topbar-icon:active,
    .topbar-section-btn:active {
        background: #e2e8f0;
        transform: scale(0.95);
    }

    /* ── 4. Prevent Text Selection on Interactive Elements ── */
    button,
    .btn,
    .ctx-nav-item,
    .nav-item,
    .fin-nav-item,
    .folder-tab,
    .fin-tab,
    .global-tab,
    .mob-nav-item,
    .mob-sub-item,
    .topbar-section-btn,
    .topbar-icon-btn,
    .mobile-topbar-icon,
    .kanban-card,
    .stat-card {
        -webkit-user-select: none;
        user-select: none;
    }

    /* ── 5. Smooth Scrolling & Touch Scroll ── */
    html {
        scroll-behavior: smooth;
    }
    .main-content,
    .content-area,
    .tabs-container,
    .doc-table-wrap,
    .context-panel,
    #treasuryContainer,
    .kanban-col {
        -webkit-overflow-scrolling: touch;
    }

    /* ── 6. Safe Area Support (notched phones) ── */
    .mobile-bottom-nav {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    /* 하단 네비 제거(2026-06-25) → 예약 공간 회수, safe-area만 유지 */
    .content-area {
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }

    .global-content-wrap {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    /* ── 7. Touch Feedback Timing ── */
    /* Reduce tap highlight delay */
    .btn,
    .ctx-nav-item,
    .nav-item,
    .folder-tab,
    .fin-tab,
    .global-tab,
    .mob-sub-item,
    .kanban-card,
    .topbar-section-btn,
    .topbar-icon-btn,
    .mobile-topbar-icon {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* ══════════════════════════════════════════════════════════
   ★ 근태 위젯 (clockWidget) — 상태별 시각 힌트
   ── non-blocking: 모달 없이 색상/펄스만으로 현재 상태를 전달
   ── 좌측 4px 컬러 바로 상태를 즉시 인식 가능
   ══════════════════════════════════════════════════════════ */
#clockWidget {
    position: relative;
    transition: box-shadow 240ms ease, border-color 240ms ease;
}
#clockWidget.clockwidget-pending,
#clockWidget.clockwidget-working,
#clockWidget.clockwidget-done,
#clockWidget.clockwidget-eod {
    overflow: hidden;
}
#clockWidget.clockwidget-pending::before,
#clockWidget.clockwidget-working::before,
#clockWidget.clockwidget-done::before,
#clockWidget.clockwidget-eod::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

/* 미출근 평일: 앰버 바 (조용한 환기) */
#clockWidget.clockwidget-pending::before { background: #f59e0b; }

/* 근무 중: 에메랄드 바 (생산성 신호) */
#clockWidget.clockwidget-working::before { background: #10b981; }

/* 퇴근 완료: 슬레이트 바 (차분한 완료) */
#clockWidget.clockwidget-done::before { background: #94a3b8; }
#clockWidget.clockwidget-done { background: #f8fafc; }

/* 18시 퇴근 알림 하이라이트: 장미색 바 + 부드러운 글로우 */
#clockWidget.clockwidget-eod::before { background: #f43f5e; }
#clockWidget.clockwidget-eod {
    box-shadow: 0 0 0 1px rgba(244,63,94,0.15), 0 4px 20px rgba(244,63,94,0.10);
}

/* 출근 힌트 펄스 — Linear/Notion 스타일 조용한 환기 (15초 후 제거) */
@keyframes clockwidget-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(245,158,11,0);    }
}
#clockWidget.clockwidget-pulse {
    animation: clockwidget-breathe 2.4s ease-in-out 3;
}

/* 접근성: 모션 감소 선호 사용자에겐 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {
    #clockWidget.clockwidget-pulse { animation: none; }
    #clockWidget { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   산출내역 — 모드별 표시 제어 (원가관리 vs 집행관리)
   ══════════════════════════════════════════════════════════ */
/* 기본(원가관리): 집행관리 전용 DOM 숨김 */
#estInternalFooter { display: none; }
.est-paid-wrap { display: none !important; }

/* 집행관리 모드: 집행관리 DOM 표시 */
body.est-mode-internal #estInternalFooter { display: block; }
body.est-mode-internal .est-paid-wrap { display: inline-flex !important; }

/* 집행관리: 원가관리 summary bar(인력비/경비/.../공급가) 숨김
   — 집행관리 정산 카드가 같은 자리에 들어가므로 시각적 중복 제거 */
body.est-mode-internal .doc-table-wrap:has(#summaryLabor) {
    display: none;
}

/* 집행관리: 관리비/이윤 입력 박스 전체 숨김
   (집행관리 계산엔 무관 — 원가관리로 돌아가면 값은 메타에 보존됨) */
body.est-mode-internal div:has(> #estAdminPct),
body.est-mode-internal div:has(> #estProfitPct) {
    display: none;
}
/* 관리비/이윤 박스의 "부모 컨테이너"가 비어 보이지 않도록
   함께 있는 "단가 DB / 비율%" 버튼 묶음은 그대로 유지 */

/* 결제완료 행: 은은한 초록 + 금액 취소선 */
body.est-mode-internal .est-row[data-paid="true"] > td {
    background: #f0fdf4 !important;
}
body.est-mode-internal .est-row[data-paid="true"] .est-tot {
    color: #047857 !important;
    text-decoration: line-through;
    text-decoration-color: rgba(4, 120, 87, 0.45);
}
body.est-mode-internal .est-row[data-paid="true"] .est-role,
body.est-mode-internal .est-row[data-paid="true"] .est-note {
    color: #64748b !important;
}

/* 부분지급 행: 은은한 앰버 (지급완료 초록과 구분) */
body.est-mode-internal .est-row[data-pay="partial"] > td {
    background: #fffbeb !important;
}

/* 지급/부가세 칩 (산출근거 셀) — 집행관리 모드에서만 표시 */
.est-pay-chips { display: none; }
body.est-mode-internal .est-pay-chips {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}

/* ═══ 사전내수표 모드 (estimate-naesu.js, 2026-07-16) — 엑셀 "구조" + 앱 디자인 스킨 ═══ */
#estNaesuWrap { display: none; }
body.est-mode-naesu #estNaesuWrap { display: block; }
body.est-mode-naesu .doc-table-wrap:has(#estimateTable) { display: none; }
body.est-mode-naesu .doc-table-wrap:has(#summaryLabor) { display: none; }
body.est-mode-naesu div:has(> #estAdminPct),
body.est-mode-naesu div:has(> #estProfitPct) { display: none; }
body.est-mode-naesu #estInternalFooter { display: none !important; }
.naesu-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.naesu-table { border-collapse: collapse; table-layout: fixed; background: #fff; word-break: keep-all; }
.naesu-table th, .naesu-table td { border: 1px solid #eef2f7; }
.naesu-table th { background: #1e293b; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 0.05em; padding: 9px 4px; text-align: center; white-space: nowrap; border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 2px solid #0f172a; }
.naesu-table th.nae-h-red { color: #fcd34d; }    /* 발주 — amber-300 */
.naesu-table th.nae-h-green { color: #6ee7b7; }  /* 선금·지급 — emerald-300 */
.naesu-table th.nae-h-blue { color: #7dd3fc; }   /* 잔금·내수 — sky-300 */
.naesu-table td { vertical-align: middle; background: #fff; }
.naesu-table tbody tr:hover td { background: #f8fafc; }
.naesu-table .nae-in { display: block; width: 100%; border: none; outline: none; background: transparent; font-size: 0.75rem; padding: 6px 5px; color: #1e293b; font-family: inherit; }
.naesu-table textarea.nae-ta { resize: none; overflow: hidden; line-height: 1.45; min-height: 30px; white-space: pre-wrap; word-break: keep-all; }
.naesu-table .nae-date { font-size: 0.68rem; padding: 6px 2px; color: #64748b; }
.naesu-table .nae-date-empty:not(:focus) { color: transparent; }
.naesu-table .nae-center { text-align: center; }
.naesu-table .nae-right { text-align: right; }
.naesu-table .nae-num { text-align: right; padding: 6px 8px; font-size: 0.75rem; font-weight: 700; color: #1e293b; }
.naesu-table .nae-group-cell { text-align: center; font-weight: 900; background: #f8fafc; color: #334155; }
.naesu-table .nae-group-cell textarea { text-align: center; font-weight: 900; color: #334155; }
.naesu-table tbody tr:hover td.nae-group-cell { background: #f1f5f9; }
.naesu-table .nae-sub-row td { background: #f1f5f9 !important; font-weight: 800; }
.naesu-table .nae-sub-label { text-align: center; letter-spacing: 0.4em; font-size: 0.72rem; color: #475569; padding: 7px; }
.naesu-table .nae-bot-mid td { background: #1e293b !important; color: #fff !important; font-weight: 900; }
.naesu-table .nae-bot-strong td { background: #f8fafc !important; font-weight: 900; border-top: 2px solid #cbd5e1; }
.naesu-table .nae-bot-grand td { background: #eff6ff !important; color: #1e40af !important; font-weight: 900; border-top: 2px solid #93c5fd; }
.naesu-table .nae-bot-label { text-align: center; letter-spacing: 0.3em; font-weight: 900; font-size: 0.74rem; padding: 9px 4px; }
.naesu-table .nae-bot-desc { text-align: left; font-weight: 700; font-size: 0.72rem; padding: 6px 8px; color: inherit; }
.naesu-table .nae-noborder { border: none !important; background: #fff !important; }
.naesu-table .nae-rate-label { background: #ecfdf5 !important; color: #047857 !important; font-weight: 900; }
.naesu-table .nae-empty { text-align: center; padding: 40px 0; color: #94a3b8; font-size: 0.8rem; }
.nae-pct { width: 52px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 6px; font-size: 0.75rem; font-weight: 700; text-align: right; outline: none; background: #fff; color: #1e293b; }
/* 폭 100% — 고정 8.5rem이 금액 컬럼(90px)을 넘쳐 발주금액 컬럼까지 삐져나가던 것 수정 (2026-07-21 사장님 피드백) */
.nae-amt-ov { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; border: none; border-bottom: 2px solid #cbd5e1; background: transparent; text-align: right; font-weight: 900; font-size: 0.85rem; outline: none; color: inherit; }
.nae-amt-ov:focus { border-bottom-color: #2563eb; }
/* 할인 금액칸 — 이 열은 내부 74px 뿐이라 9자리(2,000,000)에 빠듯하다(하네스 실측 75px 필요).
   그래서 '−' 기호를 칸 안에 두지 않는다(차감은 '할인' 라벨과 '(과세표준 차감)' 이 말한다).
   대신 빨간 글자로 차감임을 보이고, 패딩을 0 으로 눌러 폭을 확보한다. PDF 는 '−2,000,000' 표기. */
.nae-disc-cell { display: flex; align-items: center; justify-content: flex-end; }
.nae-disc-cell > .nae-amt-ov { flex: 1 1 auto; width: auto; padding: 0; color: #dc2626; font-size: 0.8rem; }
/* 할인 사유 — 정산부 desc 칸에 들어가는 자유 텍스트 (2026-08-04) */
.nae-disc-note { width: 60%; min-width: 140px; max-width: 100%; box-sizing: border-box; border: none; border-bottom: 1px dashed #cbd5e1; background: transparent; font-size: 0.75rem; font-weight: 600; outline: none; color: #475569; }
.nae-disc-note:focus { border-bottom-color: #2563eb; border-bottom-style: solid; }
.nae-disc-note::placeholder { color: #cbd5e1; font-weight: 500; }
/* 📌 내수표 확정 잠금 — 계획 필드 비활성 표시 (선금·지급일자는 잠기지 않음) */
.naesu-table .nae-in.nae-locked, .nae-pct.nae-locked, .nae-amt-ov.nae-locked, .nae-disc-note.nae-locked { background: #f8fafc !important; color: #94a3b8 !important; cursor: not-allowed; }
/* 모바일 광역 table 규칙에서 내수표 제외 — 열정렬·줄바꿈 유지
   ⚠ 두 곳을 모두 이겨야 함: ① style.css ±601줄 table{display:block}(≤768px)
   ② compact-sidebar.css ±439줄 .content-area table tr{display:table}(≤900px — 로드 순서상 나중)
   → 범위는 더 넓은 900px, tr까지 명시 복구. tr이 display:table이 되면 colgroup이 무력화되어
   열이 4px로 붕괴(2026-07-16 모바일 레이아웃 박살 원인) */
@media (max-width: 900px) {
    table.naesu-table { display: table !important; overflow: visible !important; max-width: none !important; }
    .naesu-table thead { display: table-header-group !important; width: auto !important; }
    .naesu-table tbody { display: table-row-group !important; width: auto !important; }
    .naesu-table thead tr, .naesu-table tbody tr { display: table-row !important; width: auto !important; }
    .naesu-table th, .naesu-table td { white-space: normal !important; max-width: none !important; }
    .naesu-table th { white-space: nowrap !important; padding: 8px 2px !important; }
    .naesu-table td { padding: 0 !important; }
    .naesu-table .nae-num, .naesu-table .nae-sub-label, .naesu-table .nae-bot-label, .naesu-table .nae-bot-desc { padding: 6px 8px !important; }
}
/* 조건부 행 숨김(과세표준 등) — ★인라인 style.display 로는 위 900px 블록의
   `.naesu-table tbody tr{display:table-row!important}` 를 못 이긴다(est-int-row-hidden 선례).
   클래스 명시도(0,3,2) > 그 규칙(0,2,2) 이라 미디어 안팎 모두에서 이긴다. */
.naesu-table tbody tr.nae-row-hidden { display: none !important; }

/* ═══ 산출·견적 표 사전내수표 스타일 (2026-07-21 산출 / 2026-07-22 견적 배치②) — 다크 헤더 + 구분 rowspan 그룹 셀 + 단위 컬럼 ═══
   background !important — style.css ±1368 `.doc-table th { background-color:#F8FAFC !important }` 및
   .quote-table th(±206 #f2f2f2)를 이겨야 함 */
#estimateTable thead th,
#quoteEditTable thead th { background: #1e293b !important; color: #fff; font-weight: 800; letter-spacing: -0.01em; border-right: 1px solid #334155; border-bottom: 2px solid #0f172a; }
#estimateTable thead th:last-child,
#quoteEditTable thead th:last-child { border-right: none; }
#estimateTable td.est-group-cell,
#quoteEditTable td.est-group-cell { background: #f8fafc; border-right: 2px solid #cbd5e1; vertical-align: middle; padding: 4px 2px; }
.est-group-name { width: 100%; border: none; outline: none; background: transparent; resize: none; text-align: center; font-weight: 900; font-size: 0.8rem; color: #334155; font-family: inherit; line-height: 1.3; }
.est-group-del { display: block; margin: 2px auto 0; font-size: 10px; color: #94a3b8; background: none; border: none; cursor: pointer; white-space: nowrap; }
.est-group-del:hover { color: #ef4444; }
#estimateTable td.est-div-strip,
#quoteEditTable td.est-div-strip { text-align: left; padding-left: 8px; padding-right: 8px; }
/* 견적 편집 표 — 검정 엑셀 괘선을 산출과 같은 연회색 톤으로 (공식 PDF는 별도 빌더라 무관) */
#quoteEditTable { border: 1px solid var(--border); }
#quoteEditTable th, #quoteEditTable td { border: none; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
#quoteEditTable tbody tr:last-child td { border-bottom: 1px solid var(--border); }
/* 브라우저 직접 인쇄(Ctrl+P)는 종전 검정 괘선·밝은 헤더 유지 — id 특이도가 print 규칙을 이기는 것 상쇄 (2026-07-22) */
@media print {
    #quoteEditTable { border-color: #000 !important; }
    #quoteEditTable th, #quoteEditTable td { border-bottom: 1px solid #000 !important; border-right: 1px solid #000 !important; }
    #quoteEditTable thead th { background: #f2f2f2 !important; color: #000 !important; border-right: 1px solid #000 !important; border-bottom: 1px solid #000 !important; }
}
/* 데스크탑: 구분명은 그룹 셀에서 편집 — 스트립의 모바일용 구분명 입력·모바일 ✕는 숨김 */
.est-group-name-m { display: none !important; }
.est-div-del-m { display: none; }
@media (max-width: 768px) {
    .est-group-name-m { display: block !important; }
    .est-div-del-m { display: inline; }
}
/* 769–900px 밴드 — compact-sidebar 광역 tr{display:table}(≤900px)이 rowspan·colgroup을 파괴 → 표 복구
   (naesu 예외와 동일 원리 — ≤768px는 patches-extracted fit 블록이 이미 복구하므로 이 밴드만 봉합)
   접기 토글(est-tbl-collapsed)은 :not()으로 제외해 인라인 display:none 존중 */
@media (min-width: 769px) and (max-width: 900px) {
    #estimateTable:not(.est-tbl-collapsed),
    #quoteEditTable:not(.est-tbl-collapsed) { display: table !important; max-width: none !important; }
    #estimateTable thead, #quoteEditTable thead { display: table-header-group !important; width: auto !important; }
    #estimateTable tbody, #quoteEditTable tbody { display: table-row-group !important; width: auto !important; }
    #quoteEditTable tfoot { display: table-footer-group !important; width: auto !important; }
    #estimateTable thead tr, #estimateTable tbody tr,
    #quoteEditTable thead tr, #quoteEditTable tbody tr, #quoteEditTable tfoot tr { display: table-row !important; width: auto !important; }
}

/* ═══ 산출/견적 진입 게이트 (doc-entry-gate.js, 2026-07-17) ═══
   탭 2개 이상이면 진입 시 문서 목록만 표시 — 카드 클릭 시 .doc-entry 해제되어 문서 표시.
   목록(#estListView/#quoteListView)은 평소 right-slide-panel(fixed)이라 진입 모드에선 인라인 승격 */
#view-estimate.doc-entry > *:not(#estListView):not(.guide-banner),
#view-quote.doc-entry > *:not(#quoteListView):not(.guide-banner) { display: none !important; }
#view-estimate.doc-entry #estListView,
#view-quote.doc-entry #quoteListView {
    position: static !important;
    transform: none !important;
    transition: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 880px !important;
    min-width: 0 !important;
    margin: 0 auto 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: auto !important;
}
.est-pay-chips .est-pay-chip { white-space: nowrap; line-height: 1.4; }

/* 집행관리 금액 셀 = 발주금액 직접 입력 (2026-07-21 v2) — 원가·견적과 항목만 연동, 금액은 독립.
   미입력 시 placeholder(회색)로 수주가 표시 = 지급 기준 폴백과 일치 */
.est-tot-order .est-order-input { width: 100%; box-sizing: border-box; border: none; border-bottom: 2px solid #bae6fd; background: transparent; text-align: right; font-weight: 900; color: #0369a1; font-size: inherit; font-family: inherit; outline: none; padding: 2px 0; }
.est-tot-order .est-order-input:focus { border-bottom-color: #0284c7; }
.est-tot-order .est-order-input::placeholder { color: #94a3b8; font-weight: 600; }

/* 집행관리 단가 셀 = 수주단가(위) + 발주단가(아래) 2단 (2026-08-05)
   ★역할: 원가관리=고객 견적용 수주단가 / 집행관리=실제 외주 발주단가.
   발주 계열은 주황 톤(사전내수표 발주금액과 같은 색 언어)으로 수주가와 눈으로 구분한다. */
.est-price-order .est-orderprice-input { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px dashed #fed7aa; background: transparent; text-align: right; font-weight: 700; color: #b45309; font-size: 0.72rem; font-family: inherit; outline: none; padding: 1px 0; margin-top: 2px; }
.est-price-order .est-orderprice-input:focus { border-bottom-color: #b45309; border-bottom-style: solid; }
.est-price-order .est-orderprice-input::placeholder { color: #d6d3d1; font-weight: 500; font-size: 0.68rem; }

/* 모바일 지급 편집 버튼 — 산출근거 컬럼(칩 위치)이 ≤768px에서 숨겨지므로
   (patches-extracted.css td.c-note display:none) 액션 셀에 대체 진입점 제공 */
.est-pay-edit-m { display: none; }
/* 모바일 지급 상태 칩 (역할 셀 하단) — 산출근거 숨김으로 상태가 안 보이던 것 보완 */
.est-pay-chips-m { display: none; }
@media (max-width: 768px) {
    body.est-mode-internal .est-pay-edit-m {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        padding: 3px;
        min-width: 24px;
        min-height: 24px;
        cursor: pointer;
        background: none;
        border: none;
    }
    body.est-mode-internal .est-pay-chips-m {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        margin-top: 3px;
    }
    body.est-mode-internal .est-pay-chips-m .est-pay-chip {
        font-size: 10px;
        padding: 2px 6px;
        min-height: 18px;
    }
    /* 칩이 잘리지 않게 역할 셀 줄바꿈 허용 (patches-extracted의 nowrap ellipsis 무효화)
       ★ 2026-07-21: nth-child → c-* 클래스 전환 (사전내수표 스타일 개편으로 컬럼 삽입 — 위치 기반 셀렉터 폐기) */
    body.est-mode-internal #estimateTable tbody td.c-role {
        white-space: normal !important;
        overflow: visible !important;
    }
    /* 액션 셀: 체크박스+💸+✕가 nowrap ellipsis로 "…" 잘리던 것 — 세로 스택 허용 */
    body.est-mode-internal #estimateTable tbody td.c-del {
        white-space: normal !important;
        overflow: visible !important;
        text-align: center;
    }
    body.est-mode-internal #estimateTable col.c-del,
    body.est-mode-internal #estimateTable thead th.c-del,
    body.est-mode-internal #estimateTable tbody td.c-del { width: 11% !important; }
    body.est-mode-internal #estimateTable col.c-role,
    body.est-mode-internal #estimateTable thead th.c-role,
    body.est-mode-internal #estimateTable tbody td.c-role { width: 27% !important; }
    /* 집행관리 정산 카드: 라벨 줄바꿈 허용 + 가용자금 입력칸 축소 (375px에서 잘리던 것) */
    #estInternalFooter td { white-space: normal !important; overflow: visible !important; }
    #estIntBudget { width: 8.5rem !important; }
}

/* ══════════════════════════════════════════════════════════
   모바일 제스처 안정화 (2026-07-11)
   ══════════════════════════════════════════════════════════ */
/* 브라우저 자체 스와이프-뒤로가기(가로 오버스크롤 히스토리 내비) 차단
   — 엣지 스와이프로 사이드바 열 때 뒤로가기로 새던 문제.
   ※ 안드로이드 시스템 제스처(맨 엣지 ~24px)는 웹에서 차단 불가 — 엣지존 양보(compact-sidebar.js)로 커버 */
html, body { overscroll-behavior-x: none; }
/* 사이드바 열림 중 배경 스크롤 잠금 — 실제 스크롤러는 body가 아니라 .main-content */
body.mob-menu-open .main-content { overflow: hidden; }
/* dim 레이어 터치로 배경 스크롤 방지 */
.compact-overlay-bg { touch-action: none; }

/* 모드 토글 버튼 */
#estModeBar .est-mode-btn {
    transition: background 150ms ease, color 150ms ease;
    cursor: pointer;
}
#estModeBar .est-mode-btn:hover { filter: brightness(1.05); }

/* 지출결의 매칭 배지 — 첫 진입 시 부드러운 페이드 */
.est-expense-badge { animation: estBadgeFade 320ms ease-out; }
@keyframes estBadgeFade {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@media (prefers-reduced-motion: reduce) {
    .est-expense-badge { animation: none; }
}