/* ★ 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;

            /* ★ 흐린 글자 한 단계 진하게 (2026-09-27, 순서표 8단계) — `text-slate-400`(649곳)이 흰 바탕 대비 2.6:1 로
               날짜·라벨·안내문이 안 읽혔다. Tailwind 는 유틸마다 `var(--color-slate-400)` 을 읽으므로 변수만 slate-500 값으로 바꾼다.
               ⚠ `.text-slate-400{color:…}` 를 여기 새로 쓰지 말 것 — 레이어 밖 규칙은 `hover:text-*` 같은 변형까지 이겨 hover 색이 죽는다.
               ⓘ 같은 변수를 쓰는 border·bg·placeholder slate-400 도 함께 조금 진해진다. 인라인 #94a3b8 글자는 #64748b 로 따로 바꿨다. */
            --color-slate-400: oklch(55.4% .046 257.417);

            /* ★ 글자 5단계 (2026-09-29, 순서표 24단계) — 메신저(.msgr-root 의 --m-*)가 쓰던 체계를 앱 전체의 단일 출처로 올렸다.
               새 글자 크기는 이 다섯에서 고른다 — px 를 새로 심지 않는다(tests/type-scale.test.js 가 11px 미만 선언 수를 못 늘리게 막는다).
               ⓘ 메신저 토큰(--m-base 등)은 이 값을 가리키는 별칭이다(patches-extracted.css). */
            --fs-badge: 11.5px;  /* 배지 — 이보다 작으면 글자가 아니라 잡음이다 */
            --fs-meta: 12px;     /* 시각·부가정보 */
            --fs-base: 14px;     /* 화면 기본 — 버튼·표·이름 */
            --fs-body: 15px;     /* 읽는 본문 — 대화·설명 */
            --fs-title: 16px;    /* 패널 제목 */

            --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: #64748b; /* 2026-09-27 한 단계 진하게 — 글자색으로 쓰인다(daily-log) */
            --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; flex-shrink: 0; }
        #sidebarLogoText { white-space: nowrap; }   /* 1024px 에서 «어니스트 / OS» 두 줄로 쪼개졌다 (2026-09-27) */
        .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: #64748b;
            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: #64748b;
            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:focus-within #ctxMoreToggle,
        body.compact-sidebar .context-panel.compact-pinned #ctxMoreToggle { display: flex; }
        @media (hover: hover) { body.compact-sidebar .context-panel:hover #ctxMoreToggle { display: flex; } }   /* 터치 기기에선 호버로 나타나면 첫 탭이 먹힌다(compact-sidebar.css 끝 주석) */
        .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.hidden { display: none; }   /* 위 .btn(레이어 밖)이 Tailwind .hidden(@layer utilities)을 이겨 «숨긴» 버튼이 보이던 것 — 근태 카드 퇴근·연장, 경비청구·일정 삭제 8곳(2026-10-24 운영 실측). .hidden 전체를 !important 로 올리지 않는다(hidden md:flex 류가 깨진다) */
        .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:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }   /* 꺼진 저장·«확인 후 마감»이 켜진 것처럼 보였다(2026-10-30) */
        .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: #64748b; 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-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, .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: #64748b; 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-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; }

            /* 모바일 하단 네비 — 제거(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:#64748b; 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:#64748b;
            text-transform:uppercase; letter-spacing:.1em; padding:8px 14px 4px; }

        /* ════ SETTINGS SLIDE PANEL ════ */
        #settingsPanel { position:fixed; top:0; right:0; bottom:0; width:min(680px,100vw);
            background:white; z-index:250;
            transform:translateX(100%); transition:transform 0.3s cubic-bezier(.4,0,.2,1);
            display:flex; flex-direction:column; overflow:hidden; }
        /* 그림자는 열렸을 때만 — 닫혀 화면 밖에 있어도 40px 번짐이 오른쪽 가장자리에 흰 띠로 비쳤다(2026-11-01 폰 신고) */
        #settingsPanel.open { transform:translateX(0); box-shadow:-8px 0 40px rgba(0,0,0,0.12); }
        #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; min-height:0; padding:20px; background:var(--bg-primary, #f8fafc); }
        @media (max-width:640px) {
            #settingsPanel { width:100vw; }
        }

        .settings-content { display:grid; gap:16px; max-width:760px; margin:auto; color:var(--text-primary, #1e293b); }
        .settings-card { background:var(--bg-secondary, #fff); border:1px solid var(--border-color, #e2e8f0); border-radius:16px; padding:24px; min-width:0; box-shadow:var(--shadow-sm); }
        .settings-card h3 { display:flex; align-items:center; gap:12px; font-size:var(--fs-title); font-weight:800; margin:0; }
        .settings-section-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; border-radius:10px; color:#2563eb; background:#eff6ff; }
        .settings-section-icon svg { width:20px; height:20px; }
        .settings-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
        .settings-scope { color:#475569; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:20px; padding:4px 10px; font-size:var(--fs-meta); white-space:nowrap; }
        .settings-description { font-size:var(--fs-base); color:var(--text-secondary, #64748b); line-height:1.7; margin:10px 0 20px; }
        .settings-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; }
        .settings-field { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:var(--fs-base); font-weight:700; }
        .settings-field input:not([type=file]) { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px; font-size:16px; font-weight:400; background:var(--bg-secondary, #fff); }
        .settings-field input:focus-visible { outline:2px solid #93c5fd; outline-offset:2px; border-color:#2563eb; }
        .settings-field small, .settings-hint { font-size:var(--fs-meta); color:var(--text-secondary, #64748b); line-height:1.7; font-weight:400; }
        .settings-hint { margin:12px 0 0; }
        .settings-image-row { display:flex; gap:10px; align-items:center; min-height:52px; }
        .settings-image-preview { width:52px; height:52px; object-fit:contain; background:#fff; border:1px solid #e2e8f0; border-radius:6px; }
        .settings-branding { margin-top:20px; padding-top:16px; border-top:1px solid #e2e8f0; }
        .settings-branding summary { cursor:pointer; min-height:44px; font-size:var(--fs-base); font-weight:700; padding:10px 12px; border-radius:10px; color:#475569; background:#f8fafc; }
        .settings-branding summary:hover { background:#eff6ff; color:#1d4ed8; }
        .settings-branding .settings-field-grid { margin-top:12px; }
        .settings-save-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid #e2e8f0; margin-top:20px; padding-top:16px; }
        #companySettingsStatus { flex:1 1 160px; margin:0; font-size:var(--fs-meta); line-height:1.6; }
        #companySettingsStatus[data-state="error"] { color:#b91c1c; }
        .settings-content .btn { min-height:44px; font-size:var(--fs-base); white-space:normal; }
        .settings-actions { display:flex; gap:8px; flex-wrap:wrap; }
        .settings-noti-status { font-size:var(--fs-base); line-height:1.6; margin:-6px 0 16px; }
        .settings-shortcuts { display:grid; margin-top:12px; }
        .settings-shortcuts button { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:12px 0; text-align:left; border-bottom:1px solid #e2e8f0; font-size:var(--fs-base); font-weight:700; }
        .settings-shortcuts button:last-child { border-bottom:0; }
        .settings-shortcuts button:hover { color:#1d4ed8; background:#f8fafc; }
        .settings-content button:focus-visible,
        .settings-content summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
        .settings-shortcuts small { display:block; color:var(--text-secondary, #64748b); font-size:var(--fs-meta); font-weight:400; margin-top:4px; }
        @media (max-width:480px) {
            #settingsPanel .sp-body { padding:12px; }
            #settingsPanel .sp-header { padding:16px; }
            .settings-card { padding:18px; }
            .settings-field-grid { grid-template-columns:minmax(0,1fr); }
            .settings-save-row .btn { width:100%; }
        }

        /* ════ 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: #64748b; 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; } /* 하단 네비 제거 → 회수 */

            /* 줄바꿈 방지 — ⚰️ 글자 축소(body 13px·표 11px·text-xs 10px …)는 2026-09-29 지웠다(순서표 24단계).
               폰에서 PC 보다 작게 그리고 확대까지 막아 읽을 수 없었다. 폰도 PC 와 같은 글자 크기다 — 되살리지 말 것. */
            body { word-break: keep-all !important; overflow-x: hidden; }
            * { word-break: keep-all !important; }

            /* 모든 테이블 가로 스크롤 강제
               🚨 thead·tbody·tr 는 표 부품 그대로 둔다(2026-09-17 폰 글자 겹침). 종전엔 thead·tbody 를
               각각 폭 100% 인 «따로 된 표»로 바꿨고, compact-sidebar.css 가 줄(tr)까지 고정폭 표로
               쪼개 칸 폭이 전부 같아졌다 → 아래 nowrap 글자가 옆 칸으로 넘쳐 겹쳤다(세금계산서 65칸 중 52칸).
               지금은 한 표로 남아 열이 맞고 넓으면 가로 스크롤된다. ⚠ 대가: 칸이 적은 표는 화면을
               꽉 채우지 않고 내용 폭만큼만 차지한다. ⚠ 줄을 카드로 바꾸는 표는 tbody 를 block 으로
               명시해야 카드 폭이 안 줄어든다(아래 Phase 3-3 · patches-extracted.css 재무 카드) */
            table:not(.pdf-output-document *) { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
            th:not(.pdf-output-document *), td:not(.pdf-output-document *) { white-space: nowrap !important; padding: 4px 6px !important; max-width: none !important; }
            /* JS 인라인 스타일 덮어쓰기 */
            td[style]:not(.pdf-output-document *), th[style]:not(.pdf-output-document *) { white-space: nowrap !important; }
            td a:not(.pdf-output-document *), td span:not(.pdf-output-document *), td button:not(.pdf-output-document *) { 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 { white-space: nowrap !important; padding: 6px 4px !important; }
            h1, h2, .text-2xl { font-size: 18px !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; }
            /* 프로젝트 헤더 간소화 */
            #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\] { 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: #64748b; 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: #64748b; }
        .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 { padding: 2px 4px !important; }
        }

        @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) {
            .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; }
            #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; }
        }

        /* 결재 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 { padding: 1px 2px !important; min-height: 12px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
            /* 달력 요일 헤더 — 칸만 좁힌다(글자 축소는 2026-09-29 삭제) */
            table th { 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 (워크스페이스 보드 규칙은 2026-09-29 허브 삭제 때 뺐다) */
        @media (max-width: 768px) {
            #globalSearchWrap,
            #saveStatus { display: none !important; }

            .topbar-right { gap: 4px; }

            .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로 통일 */
        }

/* ══ patch-v17-0-style ══ */
        #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;
            }
        }

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

/* ══ v48-sidebar-group-style ══ */
#docInfoBox{
  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; }
}

/* ══ 재무 탭 (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;
}
/* 동적 창의 기존 inline inset도 보이는 화면 높이로 맞춘다. */
.os-modal-overlay, .os-viewport-overlay {
    top: var(--os-viewport-top, 0px) !important;
    bottom: auto !important;
    height: var(--os-viewport-height, 100dvh);
}
.os-modal-overlay > .os-modal,
.os-viewport-overlay > :is(.os-modal, .os-scroll-form, .bg-white, .event-modal) {
    max-height: calc(var(--os-viewport-height, 100dvh) - 24px);
}
/* 계약 제목·이메일은 좁은 상세창에서 줄바꿈한다. */
.cdp-panel { overflow-wrap: anywhere; }
.cdp-panel > :first-child h3 { max-height: 4.5em; overflow-y: auto; }
/* PDF 배치 도구와 문서는 각각 스크롤하며 작은 화면에서도 문서 영역을 남긴다. */
.pdf-fields-editor > .pdf-fields-toolbar { flex-shrink: 0; max-height: 45%; overflow-y: auto; }
.pdf-fields-toolbar > :first-child { position: sticky; top: 0; z-index: 2; background: white; }
.pdf-fields-toolbar .pf-recip { max-width: 100%; overflow-wrap: anywhere; }
/* 별도 메일 패널도 공용 visualViewport 값을 사용한다. */
.os-viewport-panel {
    top: calc(var(--os-viewport-top, 0px) + var(--os-viewport-height, 100dvh) / 2) !important;
    max-height: calc(var(--os-viewport-height, 100dvh) - 24px) !important;
    min-width: 0;
}
#mailComposePanel { overflow-y: auto; overscroll-behavior-y: contain; }
#mailComposePanel > * { flex-shrink: 0; min-width: 0; }
#mailComposePanel > :first-child { flex-wrap: wrap; position: sticky; top: 0; z-index: 1; }
#mailComposePanel :is(input:not([type=color]), #mc-body) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#mailComposePanel > :nth-child(2) { flex-wrap: wrap; overflow-wrap: anywhere; }
#mc-attach-list > div { max-width: 100%; min-width: 0; }
#mc-attach-list > div > :not(:first-child) { flex-shrink: 0; }
#sigEditorPanel > :first-child, #sigEditorPanel > :last-child { flex-shrink: 0; }
.mail-signature-content { display: flex; flex: 1; min-height: 0; overflow-y: auto; }
.mail-signature-form, .mail-signature-preview { flex: 1; min-width: 0; }
#sig-preview { overflow-x: auto; }
@media (max-width: 600px) {
    .mail-signature-content { display: block; }
    .mail-signature-form { border-right: 0 !important; }
}
/* 입력칸 수보다 폼 안의 실제 여유 폭을 기준으로 줄을 바꾼다. */
.os-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.os-form-grid > * { min-width: 0; }
.os-form-grid :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
.os-form-grid-action { justify-self: end; min-width: 44px; min-height: 44px; }
.os-scroll-form { max-height: calc(var(--os-viewport-height, 100dvh) - 32px); overflow-y: auto; overscroll-behavior-y: contain; }
/* 날짜·시간의 iOS 내부 최소 폭을 확보한다. 숨김/표시 토글은 각 폼이 유지한다. */
.os-form-row { flex-wrap: wrap; gap: 8px; }
.os-form-row > div { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.os-form-row > .os-form-compact { flex-basis: 140px; }
.os-form-row :is(input, select) { max-width: 100%; box-sizing: border-box; }
@media (max-width: 480px) {
    .os-form-row > div:not(.os-form-compact) { flex-basis: 100%; }
}
.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 { min-height: 30px; padding: 4px 6px !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; }
    /* 카드 줄을 담는 tbody 는 block — 표 부품(row-group)으로 두면 브라우저가 카드를 보이지 않는
       표로 감싸 카드 폭이 내용만큼 줄어든다(실측 지출결의 카드 381→100px) */
    #wbsBody, #expBody, #quoteListBody { display: block; }
    /* 글자 크기는 PC 와 같다 — body·text-xs·text-sm 재정의는 2026-09-29 삭제(순서표 24단계) */
    h1, h2, h3 { word-break: keep-all; }
    /* 간트 세로 모드 */
    .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;
}
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.35);   /* 0.15 → 0.35 (2026-09-29) — 흐려서 어느 칸인지 잘 안 보였다 */
}
/* ⌨️ 표 안 입력칸(테두리 없음 — 산출·견적·지출·일정 표)은 테두리가 없어 위 «파란 테두리»가 안 생기고
   옅은 회색 바탕만 바뀌어 **지금 어느 칸에 쓰는지** 보이지 않았다(2026-09-27 검수) → 안쪽 2px 파란 선 + 옅은 파란 바탕.
   안쪽(outline-offset:-2px)이라 옆 칸을 덮지 않는다. (2026-09-29, 순서표 24단계 남은 제안) */
.input-no-border:focus {
    outline: 2px solid #3B82F6;
    outline-offset: -2px;
    background-color: #eff6ff;
}
.ctx-nav-item:focus-visible,
.topbar-section-btn:focus-visible,
.topbar-icon-btn:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: -2px;
}
/* ⌨️ 누르는 표 줄(tr role=button — 경비청구·수금 현황, `_kbClickable`)은 줄에 outline 이 제대로 안 그려진다
   (Chrome — 오른쪽 끝 세로 한 줄만, 2026-09-29 public/_kb-harness.html 실측) → 칸마다 안쪽 2px 파란 선 + 옅은 파란 바탕
   (표 입력칸 포커스와 같은 모양). 위·아래 선은 모든 칸, 왼쪽은 첫 칸, 오른쪽은 끝 칸. */
tr[role="button"]:focus-visible { outline: none; }
tr[role="button"]:focus-visible > td { background-color: #eff6ff; box-shadow: inset 0 2px 0 #3B82F6, inset 0 -2px 0 #3B82F6; }
tr[role="button"]:focus-visible > td:first-child { box-shadow: inset 2px 0 0 #3B82F6, inset 0 2px 0 #3B82F6, inset 0 -2px 0 #3B82F6; }
tr[role="button"]:focus-visible > td:last-child { box-shadow: inset -2px 0 0 #3B82F6, inset 0 2px 0 #3B82F6, inset 0 -2px 0 #3B82F6; }
/* ⌨️ 달력 날짜 칸(방향키로 옮긴다, calendar-view.js) — 기본 테두리는 칸 밖 4px(offset 2 + 두께 2)라 맨 가장자리 칸에서
   달력 상자(overflow-hidden·둥근 모서리)에 잘리고, 칸 사이 1px 틈에선 옆 칸 위에 그려진다 → 칸 안쪽에 그린다
   (2026-09-29 public/_cal-kb.html 에서 맨 왼쪽 아래 27일이 둥근 모서리까지 온전히 보이는 것 확인) */
.cal-day:focus-visible { outline: 2px solid #3B82F6; outline-offset: -2px; }
/* ⌨️ 일정 창 색 고르기 — 선택 표시 코드가 버튼마다 인라인 outline:none 을 걸어 키보드 포커스가 안 보였다(2026-09-30).
   !important 여야 인라인 스타일을 이긴다 · 직접 고르는 색(input type=color)은 투명이라 감싼 label 에 표시 */
#evtColorSwatches button:focus-visible, #evtColorCustomWrap:focus-within { outline: 3px solid #1d4ed8 !important; 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 — 평소엔 숨기고, 그 상자에 마우스를 올렸을 때만 얇게 (2026-11-02 사장님 «가로 세로 전부 정돈») ──
   크롬 121+·PC 앱은 표준 속성(scrollbar-width·color)이 있으면 ::-webkit-scrollbar 를 무시한다 → 표준 속성으로 그린다.
   회색 바탕 줄(track)은 없앤다. 트랙패드·터치·Shift+휠 스크롤은 그대로, 마우스는 올리면 나타난 막대를 잡는다. */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
*:hover, *:focus-within {
    scrollbar-color: rgba(100, 116, 139, 0.38) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
:hover::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.38); }
/* 화면 전체 세로 스크롤(본문·페이지)은 휠·트랙패드로 넘기므로 막대를 아예 안 그린다 — 마우스가 늘 그 안에 있어 «올릴 때만»이 «항상»이 된다 */
html, body, #mainContent { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, #mainContent::-webkit-scrollbar { display: none; }

/* ── 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,
.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: #64748b;
}
.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: #64748b; 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,
    .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,
    .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: #64748b; 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: #94a3b8; 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: #64748b !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-09-21) */
.naesu-table .nae-act { white-space: nowrap; }
.naesu-table .nae-drag { cursor: grab; color: #94a3b8; font-size: 13px; padding: 0 4px; user-select: none; -webkit-user-select: none; }
.naesu-table .nae-drag:hover { color: #475569; }
.naesu-table tr.nae-dragging > td { opacity: .4; }
/* 놓을 자리 — 구분 칸(세로 병합)에 선을 그으면 그룹 전체 아래에 그어진다 → 그 칸만 뺀다 */
.naesu-table tr.nae-drop-before > td:not(.nae-group-cell) { box-shadow: inset 0 3px 0 #2563eb; }
.naesu-table tr.nae-drop-after > td:not(.nae-group-cell) { box-shadow: inset 0 -3px 0 #2563eb; }
.naesu-table tr.nae-drop-into > td:not(.nae-group-cell) { background: #eff6ff !important; box-shadow: inset 0 0 0 2px #93c5fd; }
.naesu-table .nae-sub-add { float: left; letter-spacing: 0; font-size: 10px; font-weight: 800; color: #2563eb; background: #fff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 1px 7px; cursor: pointer; }
.naesu-table .nae-sub-add:hover { background: #eff6ff; }
.naesu-table .nae-empty-add { font-size: 11px; font-weight: 800; color: #2563eb; background: none; border: 1px dashed #93c5fd; border-radius: 6px; padding: 3px 10px; margin: 4px 0; cursor: pointer; }
.naesu-table .nae-empty-add:hover { background: #eff6ff; }
.naesu-table .nae-pre { display: block; font-size: 9.5px; font-weight: 600; color: #64748b; text-align: right; line-height: 1.2; padding: 0 5px 3px; white-space: nowrap; }
.naesu-table .nae-pre:empty { display: none; }

/* ═══ 산출·견적 표 사전내수표 스타일 (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: #64748b; 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 · 지출 2026-09-03) ═══
   탭 2개 이상이면 진입 시 문서 목록만 표시 — 카드 클릭 시 .doc-entry 해제되어 문서 표시.
   목록(#estListView/#quoteListView/#expListView)은 평소 right-slide-panel(fixed)이라 진입 모드에선 인라인 승격 */
#view-estimate.doc-entry > *:not(#estListView):not(.guide-banner),
#view-quote.doc-entry > *:not(#quoteListView):not(.guide-banner),
#view-expense.doc-entry > *:not(#expListView):not(.guide-banner) { display: none !important; }
#view-estimate.doc-entry #estListView,
#view-quote.doc-entry #quoteListView,
#view-expense.doc-entry #expListView {
    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: #64748b; 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; }
    /* 정산 카드 폭 규칙은 estimate-workspace.css «발주·지급 정산»(2026-10-12 표 → 숫자 칸) */
}

/* ══════════════════════════════════════════════════════════
   모바일 제스처 안정화 (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; }
}
/* 회의록 → 할 일: 담당자/날짜가 좁은 작성 창 밖으로 밀리지 않게 한다. */
.meeting-actions-panel input:not([type="checkbox"]),
.meeting-actions-panel select { min-width: 0; max-width: 100%; font-size: var(--fs-title); box-sizing: border-box; }
@media (max-width: 480px) {
    .meeting-actions-fields { flex-direction: column; }
    .meeting-actions-fields input, .meeting-actions-fields select { width: 100%; min-height: 44px; }
}

/* 상단 바 한 줄 유지 — 769px 이상 창에서 덜 중요한 글자부터 접는다(2026-10-15 사장님 «상단 메뉴 두 줄 넘침» → 시안 A).
   종전엔 오른쪽이 화면 밖으로 넘쳐(800px 에서 348px) 페이지 전체가 옆으로 밀렸다. 설치 앱은 native-desktop.css 가 같은 순서로 접는다.
   ≤1279: 로고 글자·이름/역할·«Saved» 글자(저장 필요·실패는 그대로 보인다 — 아바타 클릭은 로그아웃 그대로)
   ≤1099: 검색 칸 → 바로 옆 🔍(빠른 검색: 프로젝트·발주처·할 일·회의·팀원) · 탭·아이콘 사이 좁힘. ≤768 은 폰 머리가 따로 있다 */
@media (min-width: 769px) and (max-width: 1279px) {
    #sidebarLogoText, #userAvatar + div { display: none; }
    #saveStatusText:is(.text-emerald-500, :not([class])) { display: none; }
}
@media (min-width: 769px) and (max-width: 1099px) {
    #globalSearchWrap { display: none; }
    .app-topbar .topbar-section-btn { padding: 0 8px; }
    .topbar-right { gap: 4px; }
}

/* 관리자 시범: 추진일정표 */
#view-plan .plan-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:20px; color:#1e293b; font-size:var(--fs-body); }
#view-plan .plan-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
#view-plan h2 { flex:1; font-size:var(--fs-title); font-weight:700; min-width:180px; }
#view-plan .plan-notice { color:#4338ca; background:#eef2ff; border-radius:8px; padding:10px 12px; margin-bottom:12px; }
#view-plan .plan-limit { color:#92400e; padding:8px 0; }
#view-plan .plan-table { overflow-x:auto; }
#view-plan .plan-table:has(.plan-menu[open]) { padding-bottom:144px; }
#view-plan .plan-row { display:grid; grid-template-columns:44px 44px 36px minmax(160px,1.3fr) 150px 125px 125px minmax(100px,0.8fr) var(--plan-tl-col, minmax(360px,3fr)) 44px; align-items:center; gap:6px; border-bottom:1px solid #eef2f7; min-height:44px; min-width:calc(882px + var(--plan-tl, 360px)); }
#view-plan .plan-head { color:#64748b; font-size:var(--fs-meta); min-height:36px; }
#view-plan .plan-phase { background:#f8fafc; }
#view-plan .plan-phase .plan-input { grid-column:3 / 5; font-weight:700; }
#view-plan .plan-phase-meta { grid-column:5 / 9; color:#64748b; font-size:var(--fs-meta); }
#view-plan .plan-drag-handle { min-width:44px; min-height:44px; cursor:grab; touch-action:none; color:#64748b; font-size:22px; border-radius:6px; }
#view-plan .plan-drag-handle:hover { background:#e0e7ff; color:#4338ca; }
#view-plan .plan-drag-handle:focus-visible { outline:2px solid #818cf8; outline-offset:-2px; }
#view-plan.plan-dragging { user-select:none; cursor:grabbing; }
#view-plan.plan-dragging .plan-drag-handle { cursor:grabbing; }
#view-plan .plan-drag-source { background:#eef2ff; }
#view-plan .plan-drop-before { box-shadow:inset 0 3px #4f46e5; }
#view-plan .plan-drop-after { box-shadow:inset 0 -3px #4f46e5; }
#view-plan .plan-input { width:100%; min-width:0; border:1px solid transparent; border-radius:4px; background:transparent; padding:6px 4px; color:inherit; font:inherit; }
#view-plan .plan-input:hover { border-color:#cbd5e1; }
#view-plan .plan-input:focus { background:white; outline:2px solid #818cf8; }
#view-plan .plan-sides { display:flex; border:1px solid #e2e8f0; border-radius:6px; overflow:hidden; }
#view-plan .plan-sides button { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-meta); padding:5px 3px; color:#64748b; }
#view-plan .plan-sides button[aria-pressed="true"] { color:white; font-weight:700; }
#view-plan .plan-side-H[aria-pressed="true"], #view-plan .plan-bar.plan-side-H { background:#4f46e5; }
#view-plan .plan-side-C[aria-pressed="true"], #view-plan .plan-bar.plan-side-C { background:#f59e0b; }
#view-plan .plan-side-ALL[aria-pressed="true"], #view-plan .plan-bar.plan-side-ALL { background:#14b8a6; }
#view-plan .plan-bar.plan-side-phase { background:#c7d2fe; }
#view-plan .plan-check { display:grid; place-items:center; min-height:44px; cursor:pointer; }
#view-plan .plan-check input { width:18px; height:18px; accent-color:#4f46e5; cursor:pointer; }
#view-plan .plan-task-name { min-width:0; display:flex; align-items:center; gap:4px; }
#view-plan .is-done .plan-task-name input { text-decoration:line-through; color:#94a3b8; }
#view-plan .plan-state { font-size:var(--fs-badge); border-radius:4px; padding:1px 5px; flex:none; white-space:nowrap; }
#view-plan .plan-state-done { color:#047857; background:#d1fae5; }
#view-plan .plan-state-late { color:#b91c1c; background:#fee2e2; }
#view-plan .plan-state-doing { color:#1d4ed8; background:#dbeafe; }
#view-plan .plan-state-todo { color:#64748b; background:#f1f5f9; }
#view-plan .plan-star { color:#cbd5e1; font-size:22px; min-height:44px; }
#view-plan .plan-star.is-key { color:#f59e0b; }
#view-plan .plan-fold { color:#4f46e5; min-height:44px; }
#view-plan .plan-timeline { position:relative; min-height:36px; align-self:stretch; }
#view-plan .plan-row:not(.plan-head) .plan-timeline { background:repeating-linear-gradient(90deg, #e2e8f0 0 1px, transparent 1px var(--plan-grid)); }
/* 일·주 보기: 축이 월요일에서 시작하므로 매주 뒤 2/7 이 주말 */
#view-plan :is(.plan-zoom-day, .plan-zoom-week) .plan-row:not(.plan-head) .plan-timeline { background:repeating-linear-gradient(90deg, #e2e8f0 0 1px, transparent 1px var(--plan-grid)), repeating-linear-gradient(90deg, transparent 0 calc(var(--plan-week) * 5 / 7), #f1f5f9 calc(var(--plan-week) * 5 / 7) var(--plan-week)); }
/* 일·주 보기는 표가 가로로 길다 — 밀어도 업무명은 왼쪽에 남긴다 */
#view-plan :is(.plan-zoom-day, .plan-zoom-week, .plan-zoom-month) .plan-task-name { position:sticky; left:0; z-index:3; align-self:stretch; background:#fff; box-shadow:6px 0 6px -6px #0f172a26; }
#view-plan :is(.plan-zoom-day, .plan-zoom-week, .plan-zoom-month) .plan-phase > .plan-input { position:sticky; left:0; z-index:3; align-self:stretch; background:#f8fafc; }
/* 지난 일정 가져오기 창 — 모달은 body 아래라 #view-plan 밖이다 */
.plan-copy-step { display:block; font-weight:700; color:#334155; margin:4px 0 6px; }
.plan-copy-search { width:100%; min-height:40px; border:1px solid #cbd5e1; border-radius:8px; padding:0 10px; font-size:16px; }
.plan-copy-list { max-height:260px; overflow-y:auto; margin:8px 0 14px; border:1px solid #e2e8f0; border-radius:8px; }
.plan-copy-item { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:48px; padding:8px 12px; text-align:left; border-bottom:1px solid #f1f5f9; }
.plan-copy-item:hover { background:#f8fafc; }
.plan-copy-item[aria-pressed="true"] { background:#eef2ff; box-shadow:inset 3px 0 #4f46e5; }
.plan-copy-item strong { color:#1e293b; word-break:keep-all; }
.plan-copy-tabs { display:flex; gap:6px; margin:4px 0 8px; }
.plan-copy-tab { min-height:36px; padding:0 14px; border:1px solid #e2e8f0; border-radius:999px; color:#475569; font-size:var(--fs-meta); white-space:nowrap; }
.plan-copy-tab[aria-pressed="true"] { background:#eef2ff; border-color:#a5b4fc; color:#4338ca; font-weight:600; }
.plan-copy-tpl { display:flex; align-items:stretch; border-bottom:1px solid #f1f5f9; }
.plan-copy-tpl .plan-copy-item { flex:1; min-width:0; border-bottom:0; }
.plan-copy-del { flex:none; padding:0 12px; color:#94a3b8; font-size:var(--fs-meta); }
.plan-copy-del:hover { color:#dc2626; background:#fef2f2; }
.plan-copy-item span { color:#64748b; font-size:var(--fs-meta); }
.plan-copy-empty { padding:16px; color:#64748b; }
.plan-copy-date { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.plan-copy-date input { min-height:40px; border:1px solid #cbd5e1; border-radius:8px; padding:0 10px; font-size:16px; }
.plan-copy-preview { margin-top:12px; padding:10px 12px; border-radius:8px; background:#f8fafc; color:#334155; white-space:pre-line; line-height:1.6; }
#view-plan .plan-viewbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 16px; margin-bottom:8px; }
#view-plan .plan-filters { display:flex; flex-wrap:wrap; gap:6px; }
#view-plan .plan-chip { min-height:36px; padding:0 12px; border:1px solid #e2e8f0; border-radius:999px; color:#475569; font-size:var(--fs-meta); white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
#view-plan .plan-chip[aria-pressed="true"] { background:#eef2ff; border-color:#a5b4fc; color:#4338ca; font-weight:600; }
#view-plan .plan-view-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
#view-plan .plan-legend { display:flex; align-items:center; gap:4px; color:#64748b; font-size:var(--fs-meta); white-space:nowrap; margin-right:4px; }
#view-plan .plan-legend i { display:inline-block; width:14px; height:8px; border-radius:4px; margin-left:6px; }
#view-plan .plan-legend .plan-key-today { width:0; height:14px; border-left:2px solid #fb7185; border-radius:0; }
#view-plan .plan-legend .plan-key-event { width:0; height:14px; border-left:2px dashed #6366f1; border-radius:0; }
#view-plan .plan-legend .plan-key-late { background:#ef4444; }
#view-plan .plan-legend .plan-key-done { background:#14b8a6; opacity:.35; }
#view-plan .plan-today-btn { min-height:40px; padding:0 12px; border:1px solid #cbd5e1; border-radius:8px; color:#475569; font-weight:600; }
#view-plan .plan-today-btn:disabled { opacity:.4; cursor:default; }
#view-plan .plan-filtered .plan-drag-handle { visibility:hidden; }   /* 걸러 볼 때는 숨은 줄이 있어 순서 끌기를 막는다 */
#view-plan .has-event .plan-timeline::before { content:''; position:absolute; top:0; bottom:0; left:var(--plan-event); border-left:2px dashed #6366f1; opacity:.6; pointer-events:none; }
#view-plan .plan-event-flag { top:2px; transform:translateX(-50%); padding:0 6px; border-radius:4px; background:#4f46e5; color:#fff; font-size:var(--fs-badge); font-weight:700; z-index:1; }
#view-plan button.plan-event-flag { cursor:pointer; border:0; line-height:inherit; }
#view-plan button.plan-event-flag:hover { background:#4338ca; }
#view-plan .plan-zoom-month .plan-event-flag { top:22px; }   /* 월간은 둘째 줄이 비어 있어 월 이름을 덮지 않는다 */
#view-plan .plan-bar-late { background:#ef4444 !important; }
#view-plan .plan-bar-done { opacity:.35; }
#view-plan .plan-bar-drag { cursor:grab; touch-action:none; }
#view-plan .plan-bar-drag::after { content:''; position:absolute; inset:-10px -2px; }   /* 8px 막대도 잡히게 손 닿는 범위를 넓힌다 */
#view-plan .plan-grip { position:absolute; top:-10px; bottom:-10px; width:8px; z-index:1; cursor:ew-resize; }
#view-plan .plan-grip-s { left:-4px; } #view-plan .plan-grip-e { right:-4px; }
#view-plan.plan-bar-dragging, #view-plan.plan-bar-dragging * { cursor:grabbing !important; user-select:none; }
#view-plan .plan-bar-tip { position:absolute; top:-2px; transform:translateY(-100%); padding:2px 6px; border-radius:4px; background:#1e293b; color:#fff; font-size:var(--fs-badge); white-space:nowrap; z-index:4; pointer-events:none; }
#view-plan .plan-zooms { display:flex; border:1px solid #cbd5e1; border-radius:8px; overflow:hidden; }
#view-plan .plan-zooms button { min-width:44px; min-height:40px; padding:0 12px; color:#475569; font-weight:600; }
#view-plan .plan-zooms button + button { border-left:1px solid #e2e8f0; }
#view-plan .plan-zooms button[aria-pressed="true"] { background:#4f46e5; color:#fff; }
#view-plan .has-today .plan-timeline::after { content:''; position:absolute; top:0; bottom:0; left:var(--plan-today); border-left:2px solid #fb7185; opacity:.55; pointer-events:none; }
#view-plan .plan-bar { position:absolute; top:50%; transform:translateY(-50%); height:8px; border-radius:6px; }
#view-plan .plan-point { width:9px; height:9px; border-radius:0; transform:translate(-50%,-50%) rotate(45deg); }
#view-plan .plan-months { min-height:40px; }
#view-plan .plan-months span, #view-plan .plan-months .plan-event-flag { position:absolute; white-space:nowrap; }
#view-plan .plan-month { top:2px; padding-left:3px; border-left:1px solid #a5b4fc; font-weight:600; color:#475569; }
#view-plan .plan-week { top:22px; padding-left:2px; border-left:1px solid #e2e8f0; color:#94a3b8; font-size:var(--fs-badge); }
#view-plan .plan-menu { position:relative; }
#view-plan .plan-menu summary { cursor:pointer; list-style:none; min-height:44px; display:grid; place-items:center; }
#view-plan .plan-pdf-choices { position:absolute; right:0; z-index:10; min-width:140px; padding:4px; background:white; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 4px 12px #0f172a18; }
#view-plan .plan-pdf-choices button { display:block; width:100%; text-align:left; padding:10px 12px; min-height:44px; border-radius:4px; }
#view-plan .plan-pdf-choices button:hover { background:#eef2ff; }
#view-plan .plan-order-choices { position:absolute; right:0; top:100%; z-index:10; min-width:144px; background:white; border:1px solid #e2e8f0; border-radius:8px; padding:4px; box-shadow:0 4px 12px #0f172a18; }
#view-plan .plan-order-choices button { display:block; width:100%; min-height:44px; padding:10px 12px; text-align:left; white-space:nowrap; border-radius:4px; }
#view-plan .plan-order-choices button:hover { background:#eef2ff; }
#view-plan .plan-order-choices .plan-delete { color:#b91c1c; }
#view-plan .plan-add-task { display:block; width:100%; text-align:left; color:#4f46e5; padding-left:136px; min-height:44px; font-weight:600; }
#view-plan .plan-add-phase { margin-top:16px; }
#view-plan .plan-empty { padding:32px 12px; color:#64748b; }
@media (max-width:768px) {
    #view-plan .plan-card { padding:12px; }
    #view-plan .plan-toolbar h2 { flex-basis:100%; }
    #view-plan .plan-row { grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 44px; gap:4px; padding:8px 0; min-width:0; }
    #view-plan .plan-head { display:none; }
    #view-plan .plan-task > .plan-drag-handle { grid-column:1; grid-row:1; }
    #view-plan .plan-task > .plan-check { grid-column:1; grid-row:2; }
    #view-plan .plan-task > .plan-star { grid-column:1; grid-row:3; }
    #view-plan .plan-task > .plan-task-name { grid-column:2 / 4; grid-row:1; }
    #view-plan .plan-task > .plan-sides { grid-column:2 / 4; grid-row:2; }
    #view-plan .plan-task > input[type="date"]:nth-child(6) { grid-column:2; grid-row:3; }
    #view-plan .plan-task > input[type="date"]:nth-child(7) { grid-column:3; grid-row:3; }
    #view-plan .plan-task > .plan-menu { grid-column:4; grid-row:1; }
    #view-plan .plan-comment, #view-plan .plan-timeline, #view-plan .plan-view-right { display:none; }
    #view-plan .plan-input { font-size:16px; min-height:44px; }
    #view-plan .plan-sides button { min-height:44px; }
    #view-plan .plan-phase > .plan-drag-handle { grid-column:1; grid-row:1; }
    #view-plan .plan-phase > .plan-fold { grid-column:1; grid-row:2; }
    #view-plan .plan-phase > .plan-input { grid-column:2 / 4; grid-row:1; }
    #view-plan .plan-phase > .plan-menu { grid-column:4; grid-row:1; }
    #view-plan .plan-phase-meta { grid-column:2 / 4; grid-row:2; }
    #view-plan .plan-add-task { padding-left:48px; }
}
/* 좁은 폰은 시작·종료가 한 줄에 안 들어간다(360px에서 «2026. 10. 30.»의 해가 잘림, 2026-11-02) — 한 줄씩 내린다 */
@media (max-width:479px) {
    #view-plan .plan-task > input[type="date"]:nth-child(6) { grid-column:2 / 5; grid-row:3; }
    #view-plan .plan-task > input[type="date"]:nth-child(7) { grid-column:2 / 5; grid-row:4; }
}

/* WBS 시안 A — 글자는 공통 단계, 화면의 폰 목록만 요약 칸으로 전환한다. */
#wbsBody .wbs-mcard { display: none !important; }
/* 숨긴 요약 칸을 뒤에 붙여도 기존 마지막(삭제) 칸의 오른쪽 선은 그대로다. */
#wbsBody tr.wbs-row > td:nth-child(10) { border-right: none; }
.wbs-mcard-head { display: flex; align-items: center; gap: 8px; }
.wbs-mcard-title { flex: 1; min-width: 0; border: 0; padding: 0; background: none; color: inherit; text-align: left; font-size: var(--fs-body); font-weight: 800; overflow-wrap: anywhere; cursor: pointer; }
.wbs-mcard-title:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
.wbs-mcard-status { flex: none; border-radius: 999px; padding: 2px 8px; font-size: var(--fs-badge); font-weight: 700; }
.wbs-mcard-status-wait { background: #f1f5f9; color: #475569; }
.wbs-mcard-status-active { background: #dbeafe; color: #1d4ed8; }
.wbs-mcard-status-done { background: #dcfce7; color: #15803d; }
.wbs-mcard-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; color: #64748b; font-size: var(--fs-meta); }
.wbs-mcard-meta > span { overflow-wrap: anywhere; min-width: 0; }
.wbs-mcard-meta > span + span::before { content: '·'; margin-right: 8px; color: #94a3b8; }
.wbs-mcard-date-missing { color: #dc2626; font-weight: 700; }
@media screen and (max-width: 768px) {
    body:not(.pdf-exporting) #wbsBody { display: block; }
    body:not(.pdf-exporting) #wbsBody tr.wbs-row { display: block !important; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 8px; padding: 0; overflow: hidden; }
    body:not(.pdf-exporting) #wbsBody tr.wbs-row > td { display: none !important; }
    body:not(.pdf-exporting) #wbsBody tr.wbs-row > td.wbs-mcard { display: block !important; padding: 10px 12px !important; border: 0; border-left: 4px solid; text-align: left; white-space: normal !important; line-height: 1.5; }
    /* 표 안 span/button의 공통 nowrap보다 구체적으로: 카드의 긴 제목·담당 정보는 줄바꿈한다. */
    #wbsBody .wbs-mcard-title, #wbsBody .wbs-mcard-meta > span { white-space: normal !important; }
    body:not(.pdf-exporting) #view-wbs thead { display: none !important; }
    body:not(.pdf-exporting) #view-wbs #wbsTable { min-width: 0 !important; width: 100%; display: block !important; }
}

/* 공용 검색 선택창 — select-search.js, 확인창(100001) 아래.
   2026-10-27 «칸이 곧 검색칸»(사장님 결정): 누른 선택칸 자리에 검색칸이 겹치고(같은 높이·테두리·글자) 목록이 그 칸 아래(.up 이면 위)에 붙는다. PC·폰 같은 모양. */
.select-search {
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #2563eb;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
    color: #1e293b;
    overflow: hidden;
    font-size: var(--fs-body, 15px);
}
.select-search.up { flex-direction: column-reverse; }
.select-search-head { position: relative; flex-shrink: 0; border-bottom: 1px solid #e2e8f0; }
.select-search.up .select-search-head { border-bottom: 0; border-top: 1px solid #e2e8f0; }
.select-search-head::before { content: ''; position: absolute; left: 13px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border: 2px solid #94a3b8; border-radius: 50%; pointer-events: none; }
.select-search-head::after { content: ''; position: absolute; left: 25px; top: 50%; width: 6px; height: 2px; margin-top: 4px; background: #94a3b8; border-radius: 2px; transform: rotate(45deg); pointer-events: none; }
.select-search input {
    box-sizing: border-box;
    display: block;
    min-width: 0;
    width: 100%;
    height: 44px;
    font-size: 16px;
    border: 0;
    border-radius: 0;
    padding: 0 44px 0 38px;
    background: transparent;
    color: #1e293b;
    outline: none;
}
.select-search-close { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; font-size: 14px; cursor: pointer; }
.select-search-list { overflow-y: auto; overscroll-behavior: contain; min-height: 0; max-height: 60vh; padding: 4px 0; }
.select-search-option { position: relative; box-sizing: border-box; min-height: 44px; padding: 11px 36px 11px 12px; overflow-wrap: anywhere; word-break: keep-all; cursor: pointer; }
.select-search-option[aria-selected="true"] { color: #2563eb; font-weight: 700; }
.select-search-option[aria-selected="true"]::after { content: '✓'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 900; }
.select-search-option[data-active] { background: #f1f5f9; }
.select-search-option[aria-disabled="true"] { color: #94a3b8; cursor: not-allowed; }
.select-search-group { padding: 10px 12px 4px; color: #64748b; font-size: var(--fs-meta, 12px); font-weight: 700; }
.select-search-more { padding: 10px 12px 12px; color: #94a3b8; font-size: var(--fs-meta, 12px); }
.select-search-empty { padding: 24px 16px; color: #64748b; }
@media print { .select-search { display: none; } }
/* 작성이 필요한 항목 창 (project-missing-alerts.js, 2026-10-27) — 프로젝트 카드 · 할 일 한 줄 · 진행 막대 */
.pma-top { margin-bottom: 12px; font-size: var(--fs-meta, 13px); color: #64748b; }
.pma-prog { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 700; }
.pma-bar { flex: 1; max-width: 220px; height: 8px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.pma-bar i { display: block; height: 100%; width: 0; background: #059669; transition: width .2s; }
.pma-card { flex: 0 0 auto; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.pma-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 14px 16px 10px; }
.pma-title { flex: 1 1 200px; min-width: 0; font-size: var(--fs-body, 15px); word-break: keep-all; overflow-wrap: anywhere; }
.pma-meta { margin-top: 3px; font-size: var(--fs-meta, 13px); color: #64748b; }
.pma-late { color: #b91c1c; font-weight: 700; white-space: nowrap; }
.pma-count { flex: 0 0 auto; font-size: var(--fs-badge, 12px); font-weight: 800; color: #92400e; background: #fffbeb; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pma-task { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-top: 1px solid #e2e8f0; }
.pma-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; align-self: flex-start; margin-top: 6px; }
.pma-text { flex: 1 1 220px; min-width: 0; }
.pma-tt { font-size: var(--fs-base, 14px); font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.pma-hint { margin-top: 3px; font-size: var(--fs-meta, 13px); line-height: 1.5; color: #475569; word-break: keep-all; overflow-wrap: anywhere; }
/* 좁은 앱 카드에서도 입력칸과 저장 버튼 묶음이 카드 너비에 맞게 줄어들도록 한다. */
.pma-act { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.pma-act.pma-amt { flex: 1 1 260px; max-width: 340px; }
.pma-task.done { background: #ecfdf5; }
.pma-task.done .pma-dot { background: #059669; }
.pma-task.done .pma-tt { color: #065f46; }
.pma-note { margin-right: auto; align-self: center; font-size: var(--fs-meta, 13px); color: #64748b; }
@media (max-width: 768px) {
    .pma-act, .pma-act.pma-amt { flex: 1 1 100%; max-width: none; margin-left: 0; padding-left: 22px; }
    .pma-act:not(.pma-amt) > button { flex: 1; justify-content: center; min-height: 48px; }
}
/* 지출결의 요약 상자 (2026-10-27 확정 시안) — 상자 + 보라 합계 줄, 지급 현황은 합계 줄 오른쪽 */
#view-expense .exp-sum { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
#view-expense .exp-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#view-expense .exp-sum-cell { padding: 14px 18px; border-right: 1px solid #e2e8f0; min-width: 0; }
#view-expense .exp-sum-cell:last-child { border-right: 0; }
#view-expense .exp-sum-cell[hidden] { display: none; }
#view-expense .exp-sum-cell span { display: block; font-size: var(--fs-meta, 12px); font-weight: 700; color: #64748b; }
#view-expense .exp-sum-cell b { display: block; margin-top: 4px; color: #1e293b; white-space: nowrap; }
#view-expense .exp-sum-cell small { display: block; margin-top: 2px; font-size: var(--fs-meta, 12px); color: #64748b; }
#view-expense .exp-sum-cell em { font-style: normal; font-weight: 700; }
#view-expense .exp-sum-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 18px; border-top: 1px solid #e2e8f0; background: #faf5ff; }
#view-expense .exp-sum-total > span { font-size: var(--fs-base, 14px); font-weight: 800; color: #6d28d9; }
#view-expense .exp-sum-total > b { color: #6d28d9; white-space: nowrap; }
#view-expense .exp-sum-total .expense-payment-status { margin-left: auto; padding: 0; border: 0; background: none; font-size: var(--fs-base, 14px); }
/* 지출결의 표 PC 배치 (2026-10-28 시안 ① «목록 + 오른쪽 서랍») — 칸(DOM)은 그대로 두고 grid 로 배치만 바꾼다:
   줄에는 No·상호/적요(3·5 쌓기)·구분(2)·금액(7)·실 지급액(9)·준비 상태(17)·지급(13)·상세(15)만. 사업자번호(4)·일수(6)·세액(8)·계좌(10)·증빙(11)·
   지급 예정일(12)·삭제(14)·장비 표시(16)는 줄을 누르면 열리는 서랍(exp-drawer.js)에서 고친다.
   ★ 칸을 tr 밖으로 옮기지 말 것 — gatherDOMData(app.js)가 .exp-row 안에서 클래스로 다시 읽고, 서랍도 그 칸을 대신 누른다.
   폰(≤768)은 patches-extracted.css 카드 규칙(nth-child) — 열 순서를 바꾸지 말 것. PDF 는 데이터로 따로 만든다(patch-workspace-ops.js). */
@media screen and (min-width: 769px) {
    #view-expense #expenseTable { display: block; min-width: 0; border: 0; }
    #view-expense #expenseTable colgroup { display: none; }
    #view-expense #expenseTable thead, #view-expense #expBody { display: block; }
    #view-expense #expenseTable thead tr, #expBody tr.exp-row {
        display: grid; align-items: center; column-gap: 6px;
        grid-template-columns: 28px minmax(180px, 2.4fr) minmax(128px, 144px) minmax(92px, 120px) minmax(96px, 124px) minmax(140px, 1.5fr) 48px 40px;
    }
    #view-expense #expenseTable thead tr { border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
    #view-expense #expenseTable thead th { display: block; grid-row: 1; padding: 10px 6px !important; border: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #view-expense #expenseTable thead th:is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(8), :nth-child(10), :nth-child(11), :nth-child(12), :nth-child(14), :nth-child(16)),
    #expBody tr.exp-row > td:is(:nth-child(4), :nth-child(6), :nth-child(8), :nth-child(10), :nth-child(11), :nth-child(12), :nth-child(14), :nth-child(16)) { display: none; }
    #expBody tr.exp-row { border-bottom: 1px solid #e2e8f0; padding: 2px 0; cursor: pointer; }
    #expBody tr.exp-row:hover { background: #f8fafc; }
    #expBody tr.exp-row.exp-selected { background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb; }
    #expBody tr.exp-row > td { display: block; border: 0 !important; padding: 2px 6px; min-width: 0; grid-row: 1 / span 2; }
    #view-expense #expenseTable thead th:nth-child(1), #expBody tr.exp-row > td:nth-child(1) { grid-column: 1; }
    #view-expense #expenseTable thead th:nth-child(1) { padding-left: 4px !important; padding-right: 0 !important; text-overflow: clip; }
    #expBody tr.exp-row > td:nth-child(2) .exp-type { width: 100%; }
    #view-expense #expenseTable thead th:nth-child(3) { grid-column: 2; }
    #expBody tr.exp-row > td:nth-child(3) { grid-column: 2; grid-row: 1; padding-bottom: 0; }
    #expBody tr.exp-row > td:nth-child(5) { grid-column: 2; grid-row: 2; padding-top: 0; }
    #expBody tr.exp-row > td:nth-child(3) .exp-name { text-align: left; font-weight: 700; color: #1e293b; }
    /* 적요는 평소 한 줄, 누르면 두 줄로 (2026-10-27 «약간 두꺼운 것 같은데») */
    #expBody tr.exp-row > td:nth-child(5) .exp-desc { text-align: left; height: 22px; min-height: 22px; line-height: 20px; padding-top: 0; padding-bottom: 0; overflow: hidden; }
    #expBody tr.exp-row > td:nth-child(5) .exp-desc:focus { height: 44px; overflow: auto; }
    #view-expense #expenseTable thead th:nth-child(2), #expBody tr.exp-row > td:nth-child(2) { grid-column: 3; }
    #view-expense #expenseTable thead th:nth-child(7), #expBody tr.exp-row > td:nth-child(7) { grid-column: 4; text-align: right; }
    #view-expense #expenseTable thead th:nth-child(9), #expBody tr.exp-row > td:nth-child(9) { grid-column: 5; text-align: right; }
    #view-expense #expenseTable thead th:nth-child(17), #expBody tr.exp-row > td:nth-child(17) { grid-column: 6; }
    #view-expense #expenseTable thead th:nth-child(13), #expBody tr.exp-row > td:nth-child(13) { grid-column: 7; text-align: center; }
    #view-expense #expenseTable thead th:nth-child(15), #expBody tr.exp-row > td:nth-child(15) { grid-column: 8; text-align: center; }
    #expBody tr.exp-row .exp-more { width: 32px; height: 32px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #64748b; font-weight: 900; }
    #expBody tr.exp-row.exp-selected .exp-more { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
    #expBody > tr:not(.exp-row), #expBody > tr:not(.exp-row) > td { display: block; }
    /* 예외만 표시 — 지급 체크가 빠진 줄에만 «미지급»(체크하면 바로 사라진다 — 체크칸 바로 뒤 빈 표지의 형제 선택자라 다시 그릴 필요 없음).
       ★ :has(:checked) 로 쓰지 말 것 — 어느 선택칸이든 고를 때마다(:checked 가 바뀐다) 문서 전체 스타일을 다시 계산해 자금관리 1,000줄에서 1초씩 멈췄다(2026-10-29) */
    #expBody tr.exp-row > td:nth-child(13) > .exp-pay:not(:checked) + .exp-pay-flag::after { content: '미지급'; display: block; margin-top: 2px; font-size: var(--fs-badge, 11.5px); font-weight: 800; color: #b91c1c; white-space: nowrap; }
}
@media screen and (min-width: 769px) and (max-width: 900px) {
    #view-expense #expenseTable thead tr, #expBody tr.exp-row {
        grid-template-columns: 24px minmax(140px, 2fr) minmax(118px, 1fr) minmax(84px, 1fr) minmax(88px, 1fr) minmax(110px, 1.2fr) 40px 36px;
        column-gap: 2px;
    }
    #view-expense #expenseTable thead th { padding: 10px 2px !important; }
}
/* 준비 상태 칩(17번째 칸, exp-drawer.js _expReadyFill) — 표시 전용. 거래처 DB 계좌와 다르면(줄이 bg-red-50) «계좌 확인»을 앞에 */
#expBody tr.exp-row > td.exp-ready-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.exp-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-badge, 11.5px); font-weight: 800; line-height: 1.5; white-space: nowrap; }
.exp-chip-warn { background: #fef3c7; color: #92400e; }
.exp-chip-ok { background: #dcfce7; color: #166534; }
.exp-chip-asset { background: #e0e7ff; color: #3730a3; }
.exp-chip-info { background: #f1f5f9; color: #475569; }
#expBody tr.exp-row.bg-red-50 > td.exp-ready-cell::before { content: '계좌 확인'; display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-badge, 11.5px); font-weight: 800; line-height: 1.5; background: #fee2e2; color: #b91c1c; }
/* 지출결의 오른쪽 서랍(exp-drawer.js) — 앱 옆 패널(.wbs-panel)과 같은 자리·그림자. 폰은 아래에서 올라오는 창 */
.exp-drawer { position: fixed; top: 60px; right: 0; bottom: 0; z-index: 998; width: 440px; max-width: 100vw; background: #fff;
    border-left: 1px solid #e2e8f0; box-shadow: -8px 0 32px rgba(15, 23, 42, .10); display: flex; flex-direction: column; }
.exp-drawer[hidden], .exp-drawer-backdrop[hidden], .exp-drawer [hidden] { display: none !important; }
.exp-drawer-head { display: flex; align-items: flex-start; gap: 8px; padding: 16px 20px 12px; border-bottom: 1px solid #f1f5f9; }
.exp-drawer-titles { min-width: 0; }
.exp-drawer-kicker { font-size: var(--fs-meta, 12px); font-weight: 700; color: #64748b; }
.exp-drawer-title { margin-top: 2px; font-size: var(--fs-title, 16px); font-weight: 800; color: #0f172a; word-break: keep-all; overflow-wrap: anywhere; }
.exp-drawer-x { margin-left: auto; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; color: #64748b; font-weight: 900; }
.exp-drawer-x:hover { background: #f1f5f9; }
.exp-dw-lock { margin: 0; padding: 8px 20px; background: #f8fafc; color: #475569; font-size: var(--fs-meta, 12px); font-weight: 700; }
.exp-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.exp-dw-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.exp-dw-field.wide, .exp-dw-sum, .exp-dw-pay.wide { grid-column: 1 / -1; }
.exp-dw-label { font-size: var(--fs-badge, 11.5px); font-weight: 700; color: #64748b; }
.exp-dw-field input, .exp-dw-field select, .exp-dw-field textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; font-size: var(--fs-base, 14px); background: #fff; color: #0f172a; }
.exp-dw-field textarea { min-height: 56px; resize: vertical; line-height: 1.4; }
.exp-dw-field :disabled { background: #f8fafc; color: #64748b; }
.exp-dw-field.missing input, .exp-dw-field.missing textarea { border-color: #fcd34d; background: #fffbeb; }
.exp-dw-note:empty { display: none; }
.exp-dw-note { font-size: var(--fs-meta, 12px); font-weight: 700; color: #b91c1c; }
.exp-dw-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exp-dw-shop { font-weight: 700; color: #2563eb; word-break: break-all; }
.exp-dw-sum { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px; background: #f8fafc; border-radius: 10px; font-size: var(--fs-meta, 12px); color: #475569; }
.exp-dw-sum b { color: #0f172a; }
.exp-dw-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 10px; }
.exp-dw-proof-state { font-size: var(--fs-meta, 12px); font-weight: 800; color: #92400e; margin-right: auto; }
.exp-dw-proof-state.on { color: #166534; }
.exp-dw-pay { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #334155; }
.exp-dw-pay input { width: 18px; height: 18px; }
.exp-drawer-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid #f1f5f9; }
.exp-drawer-foot .exp-dw-del { margin-right: auto; color: #b91c1c; }
@media (min-width: 1280px) { body.exp-drawer-open #view-expense { padding-right: 440px; } }
@media (min-width: 769px) { .exp-drawer-backdrop { display: none !important; } }
@media (max-width: 768px) {
    #expBody tr.exp-row > td.exp-more-cell, #expBody tr.exp-row > td.exp-asset-cell { display: none !important; }
    /* 폰 카드 맨 아래 줄 = 준비 상태 칩 + «상세 ›» — 누르면 아래에서 상세 창이 올라온다(입력칸은 그 자리에서 고친다) */
    #expBody tr.exp-row > td.exp-ready-cell { display: flex !important; grid-column: 1 / -1 !important; grid-row: 4 !important; text-align: left !important; padding-top: 2px !important; }
    #expBody tr.exp-row > td.exp-ready-cell::after { content: '상세 ›'; margin-left: auto; font-size: var(--fs-meta, 12px); font-weight: 800; color: #2563eb; }
    #expBody tr.exp-row.exp-selected { background: #eff6ff !important; }
    .exp-drawer { top: auto; left: 0; right: 0; width: auto; max-height: 85vh; border-left: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(15, 23, 42, .16); }
    .exp-drawer-backdrop { position: fixed; inset: 0; z-index: 997; background: rgba(15, 23, 42, .22); }
    .exp-drawer-body { grid-template-columns: 1fr 1fr; }
    .exp-dw-field input, .exp-dw-field select, .exp-dw-field textarea { font-size: 16px; }   /* 16px 미만이면 아이폰이 확대하고 안 돌아온다 */
}