@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

        :root {
            --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; }
        .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; }

            /* 모바일 하단 네비 */
            .mobile-bottom-nav { display: flex; 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: 72px; max-width: 100%; }
            .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; }
            .app-topbar .topbar-section-btn span { display: none; }
            .app-topbar .topbar-section-btn svg { width: 16px; height: 16px; }
            #tsec-proposal { display: none !important; }
            .context-panel { display: none !important; }
            #finMobileTabBar { display: flex !important; }
            .content-area { padding: 6px !important; padding-bottom: 60px !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: 68px; }

            /* ★ 테이블 폰트 */
            .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));
    }

    /* Ensure content doesn't hide behind bottom nav + safe area */
    .content-area {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    /* Global content wrap — account for bottom nav */
    .global-content-wrap {
        padding-bottom: calc(80px + 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;
    }
}