* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --bg: #0a0b0f;
            --bg-alt: #0a0c10;
            --panel: #131519;
            --header-bg: rgba(19,21,25,0.75);
            --border: rgba(255,255,255,0.10);
            --border-strong: rgba(255,255,255,0.20);
            --chip-hover: rgba(255,255,255,0.16);
            --surface-hover: rgba(255,255,255,0.05);
            --accent: #4f8ef7;
            --accent-rgb: 79,142,247;
            --accent-hover: #3a7de8;
            --accent-dim: rgba(79,142,247,0.14);
            --danger: #e74c3c;
            --success: #3ecf8e;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            --text-muted: #888888;
            --text-faint: #666666;
            /* 마인드맵 카드 뱃지 상태색. 흰 글자와 4.5:1 이상을 보장하는 값으로 고른다. */
            --mm-badge-overdue-bg: #5f6672;
            --mm-badge-overdue-fg: #ffffff;
            --mm-badge-today-bg: #4f8ef7;
            --mm-badge-today-fg: #0b1220;
            --native-scheme: dark;
            --cal-sunday: #e0607a;
            --cal-saturday: #5b9bf5;
            --badge-write: #a8e0c0;
            --badge-read: #e0c8a0;
            --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --ease: cubic-bezier(0.4, 0, 0.2, 1);
        }
        body.theme-light {
            --bg: #f4f5f7;
            --bg-alt: #eceef1;
            --panel: #ffffff;
            --header-bg: rgba(255,255,255,0.82);
            --border: rgba(0,0,0,0.10);
            --border-strong: rgba(0,0,0,0.22);
            --chip-hover: rgba(0,0,0,0.06);
            --surface-hover: rgba(0,0,0,0.035);
            --accent: #2563eb;
            --accent-rgb: 37,99,235;
            --accent-hover: #1d4ed8;
            --accent-dim: rgba(37,99,235,0.12);
            --danger: #dc2626;
            --success: #059669;
            --text-primary: #14161c;
            --text-secondary: #3d424c;
            --text-muted: #6b7078;
            --text-faint: #9096a0;
            --mm-badge-overdue-bg: #5f6672;
            --mm-badge-overdue-fg: #ffffff;
            --mm-badge-today-bg: #2563eb;
            --mm-badge-today-fg: #ffffff;
            --native-scheme: light;
            --cal-sunday: #d6234e;
            --cal-saturday: #1d5fd6;
            --badge-write: #178a56;
            --badge-read: #b8791f;
        }
        body { font-family: var(--font); background: var(--bg); color: var(--text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.005em; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
        .header { background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 14px 28px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
        .logo { font-size: 20px; font-weight: 650; color: var(--accent); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
        .header-right { display: flex; align-items: center; gap: 16px; }
        /* 화면 위 리소스의 우선순위는 의미 기반 토큰으로 관리한다.
           BASE rail < editor < editor rail < Pet < blocking modal. */
        :root { --z-floating-utility: 950; --z-editor: 3000; --z-floating-utility-editor: 3050; --z-pet: 3100; --z-editor-modal: 3500; --floating-control-size: 44px; --floating-control-gap: 8px; }
        .floating-utility-rail { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: var(--z-floating-utility); display: flex; flex-direction: column; align-items: center; gap: var(--floating-control-gap); padding: 4px; }
        body[data-floating-layer="editor"] .floating-utility-rail { z-index: var(--z-floating-utility-editor); }
        body[data-floating-layer="modal"] .floating-utility-rail,
        .floating-utility-rail.is-modal-obscured { visibility: hidden; pointer-events: none; }
        .theme-toggle-btn { position: static; z-index: auto; display: flex; align-items: center; justify-content: center; width: var(--floating-control-size); height: var(--floating-control-size); border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--text-secondary); cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease); flex-shrink: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
        .theme-toggle-btn:hover { transform: scale(1.08); }
        .theme-toggle-btn:hover { background: var(--chip-hover); color: var(--text-primary); }
        .theme-toggle-btn svg { width: 17px; height: 17px; }
        .user-info { font-size: 14px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
        .user-info svg { width: 15px; height: 15px; opacity: 0.75; }
        .btn { padding: 8px 20px; border-radius: 7px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; transition: background 0.15s var(--ease), transform 0.15s var(--ease); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
        .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
        .btn-primary { background: var(--accent); color: white; box-shadow: 0 1px 2px rgba(79,142,247,0.15), 0 4px 12px rgba(79,142,247,0.18); }
        .btn-primary:hover { background: var(--accent-hover); }
        .btn-primary:active { transform: scale(0.97); }
        .btn-danger { background: var(--danger); color: white; }

        /* ── 사이드바 내비게이션 ── */
        :root { --sidebar-width: 224px; }
        .app-body { display: flex; align-items: flex-start; }
        .sidebar { width: var(--sidebar-width); flex-shrink: 0; padding: 18px 12px; position: sticky; top: 57px; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); min-height: calc(100vh - 57px); }
        .tab { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--text-muted); transition: background 0.15s var(--ease), color 0.15s var(--ease); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; }
        .tab svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; transition: opacity 0.15s var(--ease); }
        .tab:hover { background: var(--border); color: var(--text-secondary); }
        .tab.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
        .tab.active svg { opacity: 1; }
        /* ── 작업 공간 드릴다운 ──
           기본 화면은 '내 자료'뿐이고, 남의 자료는 여기서 켜야 합류한다.
           탭 목록 아래에 두어 '무엇을 보는가'(탭)와 '누구 것을 보는가'(범위)를 나란히 놓는다. */
        #wsPicker { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
        .ws-title { display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 0 12px 6px; }
        /* 새 공유는 기본으로 숨겨진 자료라 눈에 띄어야 한다 — 개수는 강조색, 해제는 그 옆에. */
        .ws-new-count { font-size: 9.5px; letter-spacing: 0; min-width: 15px; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: #fff; text-align: center; }
        .ws-seen-all { margin-left: auto; background: none; border: none; padding: 0; font-size: 10px; letter-spacing: 0; color: var(--text-faint); cursor: pointer; text-transform: none; }
        .ws-seen-all:hover { color: var(--accent); }
        .ws-row.is-new { color: var(--text-secondary); }
        .ws-tag.new { background: var(--accent); color: #fff; }
        .ws-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
        .ws-row:hover { background: var(--border); color: var(--text-secondary); }
        .ws-row input { accent-color: var(--accent); flex-shrink: 0; margin: 0; cursor: pointer; }
        .ws-row input:disabled { cursor: default; opacity: 0.55; }
        .ws-row span { overflow: hidden; text-overflow: ellipsis; }
        .ws-row small { margin-left: auto; font-size: 10.5px; color: var(--text-faint); flex-shrink: 0; }
        .ws-tag { font-style: normal; font-size: 9.5px; padding: 1px 5px; border-radius: 999px; background: var(--accent-dim); color: var(--accent); margin-left: 4px; }
        /* 소유자가 섞여 보일 때만 붙는 구분 머리글 — 그리드 한 줄을 통째로 차지한다. */
        .ws-band { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 18px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); }
        .ws-band:first-child { margin-top: 0; }
        .ws-band::after { content: ''; flex: 1; height: 1px; background: var(--border); }
        .ws-band small { order: 1; font-size: 10.5px; font-weight: 400; color: var(--text-faint); }

        /* ── 내 활동 ── 차트 라이브러리 없이(빌드 스텝이 없는 구성) div 높이로 막대를 그린다. */
        .act-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 26px; }
        /* 지표는 눌러서 해당 카드 목록으로 갈 수 있다 — 눌리는 것처럼 보여야 한다. */
        .act-card { display: block; width: 100%; text-align: left; font: inherit; letter-spacing: inherit;
                    background: none; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
                    cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); }
        .act-card:hover { background: var(--surface-hover); border-color: var(--border-strong); }
        .act-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .act-card.warn { border-color: var(--danger); }
        .act-card-value { display: block; font-size: 26px; font-weight: 650; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
        .act-card.warn .act-card-value { color: var(--danger); }
        .act-card-label { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
        .act-card-sub { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
        .act-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 34px; align-items: start; }
        @media (max-width: 860px) { .act-cols { grid-template-columns: 1fr; gap: 26px; } }
        .act-sub { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
        .act-spark { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
        .act-bar-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; }
        .act-bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
        .act-bar.empty { background: var(--border); }
        .act-bar-wrap span { font-size: 9px; color: var(--text-faint); }
        .act-board { margin-bottom: 12px; cursor: pointer; border-radius: 6px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; transition: background 0.15s var(--ease); }
        .act-board:hover { background: var(--surface-hover); }
        .act-board-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 5px; }
        .act-board-top span { display: flex; align-items: center; gap: 7px; min-width: 0; }
        .act-board-top span i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
        .act-board-top small { color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
        .act-progress { height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; }
        .act-progress div { height: 100%; background: var(--accent); border-radius: 999px; }
        .act-tags { display: flex; flex-wrap: wrap; gap: 6px; }
        .act-tag { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; padding: 3px 9px;
                   border: none; border-radius: 999px; background: var(--accent-dim); color: var(--accent);
                   cursor: pointer; transition: background 0.15s var(--ease); }
        .act-tag:hover { background: var(--accent); color: #fff; }
        .act-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .act-tag b { font-weight: 600; opacity: 0.7; font-variant-numeric: tabular-nums; }
        /* 기록이 쌓여도 페이지 자체는 길어지지 않게 — 이 안에서만 스크롤된다.
           높이를 화면에 맞춰 잡되(dvh: 모바일 주소창 개폐에 흔들리지 않음) 너무 짧아지지 않도록 max로 하한. */
        .act-feed { max-height: max(320px, calc(100dvh - 330px)); overflow-y: auto; overscroll-behavior: contain;
                    padding-right: 6px; margin-right: -6px; }
        .act-feed::-webkit-scrollbar { width: 8px; }
        .act-feed::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
        .act-feed::-webkit-scrollbar-track { background: transparent; }
        #actFeedCount { letter-spacing: 0; text-transform: none; color: var(--text-muted); }
        .act-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
        .act-search { flex: 1 1 150px; min-width: 0; background: var(--panel); color: var(--text-primary);
                      border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: 12.5px; font-family: inherit; }
        .act-search:focus { outline: none; border-color: var(--accent); }
        .act-search::placeholder { color: var(--text-faint); }
        .act-clear { background: none; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer; padding: 0 6px; }
        .act-clear:hover { color: var(--accent); }
        /* 되돌리기는 줄에 머무를 때만 드러낸다 — 모든 줄에 상시 버튼이 있으면 기록이 아니라 조작판이 된다.
           키보드로 옮겨왔을 때도 보여야 하므로 focus-within을 함께 건다. */
        .act-revert { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; opacity: 0; transition: opacity 0.15s var(--ease); }
        .act-item:hover .act-revert, .act-item:focus-within .act-revert { opacity: 1; }
        @media (hover: none) { .act-revert { opacity: 1; } }
        .act-revert button { font: inherit; font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
                             border: 1px solid var(--border-strong); background: none; color: var(--text-muted); cursor: pointer; }
        .act-revert button:hover { border-color: var(--accent); color: var(--accent); }
        .act-revert button:disabled { opacity: 0.5; cursor: default; }
        /* 날짜 머리글은 스크롤해도 위에 남는다 — 지금 보는 줄이 며칠 것인지 잃지 않도록 */
        .act-day { position: sticky; top: 0; z-index: 1; background: var(--bg);
                   font-size: 11px; color: var(--text-faint); margin: 16px 0 7px; padding: 4px 0; }
        .act-day:first-child { margin-top: 0; }
        .act-item { display: flex; gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
        .act-item:hover { background: var(--border); }
        .act-time { font-size: 11px; color: var(--text-faint); flex-shrink: 0; padding-top: 2px; font-variant-numeric: tabular-nums; }
        .act-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .act-body b { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .act-detail { font-size: 12px; color: var(--text-secondary); }
        .act-trashed { font-style: normal; font-size: 9.5px; padding: 1px 5px; border-radius: 999px; background: var(--border); color: var(--text-faint); }

        /* ── 감사 로그 (관리자 탭) ── */
        .audit-table-wrap { overflow-x: auto; margin-bottom: 6px; }
        .audit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
        .audit-table th { text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
                          color: var(--text-faint); padding: 0 10px 7px; border-bottom: 1px solid var(--border); }
        .audit-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
        .audit-table tr:last-child td { border-bottom: none; }
        .audit-table .num { text-align: right; font-variant-numeric: tabular-nums; }
        .audit-table .num.warn { color: var(--danger); font-weight: 600; }
        .audit-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
        .audit-table .dim { color: var(--text-faint); font-size: 11px; }
        .audit-table tr.idle td { opacity: 0.5; }   /* 한 번도 나타나지 않은 계정 */
        .audit-item { cursor: default; }
        .audit-item:hover { background: var(--surface-hover); }
        .audit-action { font-weight: 400; color: var(--text-muted); }
        /* 실패·잠금은 이 화면을 여는 주된 이유라 눈에 먼저 들어와야 한다. */
        .audit-item.bad { background: rgba(231,76,60,0.06); }
        .audit-item.bad .audit-action { color: var(--danger); }
        .act-where.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
        .act-where { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-faint); }
        .act-where i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
        /* 운영자는 긴 목록을 읽기 전에 '지금 주의할 일이 있는가'를 먼저 판단한다. */
        .audit-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 12px; }
        .audit-overview-card { min-height: 92px; border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; background: var(--panel); }
        .audit-overview-card.alert { border-color: rgba(231,76,60,0.55); background: rgba(231,76,60,0.06); }
        .audit-overview-label { color: var(--text-faint); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }
        .audit-overview-value { margin-top: 7px; color: var(--text-primary); font-size: 23px; font-weight: 650; font-variant-numeric: tabular-nums; }
        .audit-overview-card.alert .audit-overview-value { color: var(--danger); }
        .admin-pet-pagination { display:flex; align-items:center; justify-content:center; gap:14px; margin:12px 0 24px; }
        .pet-rating-readonly { color:#e8ad34 !important; letter-spacing:.05em; }
        .audit-overview-sub { margin-top: 4px; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
        .audit-new-ips { margin: 10px 0 22px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
        .audit-new-ips-head { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
        .audit-new-ip { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
        .audit-new-ip:last-child { border-bottom: none; }
        .audit-new-ip small { color: var(--text-faint); white-space: nowrap; }

        .sidebar-resize-handle { width: 5px; flex-shrink: 0; cursor: col-resize; position: sticky; top: 57px; align-self: stretch; min-height: calc(100vh - 57px); background: transparent; }
        .sidebar-resize-handle:hover, .sidebar-resize-handle.dragging { background: var(--accent); }
        .content { flex: 1; min-width: 0; padding: 28px 36px; }
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: kklab-fade-in 0.2s var(--ease); }

        /* ── 모바일: 햄버거 메뉴로 여닫는 사이드바 ── */
        .hamburger-btn { display: none; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; align-items: center; justify-content: center; margin-right: 4px; }
        .hamburger-btn svg { width: 22px; height: 22px; }
        /* 모바일에서는 사이드바가 접혀 있어 작업 공간 배지가 보이지 않는다 — 여기에 점만 찍는다. */
        .hamburger-btn { position: relative; }
        .hamburger-btn.has-new::after { content: ''; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
        .sidebar-backdrop { display: none; position: fixed; top: 57px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 149; }
        @media (max-width: 768px) {
            .hamburger-btn { display: inline-flex; }
            .logo { font-size: 17px; }
            .sidebar { position: fixed; top: 57px; left: 0; bottom: 0; z-index: 150; background: var(--bg); width: 240px; box-shadow: 2px 0 24px rgba(0,0,0,0.45); transform: translateX(-100%); transition: transform 0.2s var(--ease); }
            body.sidebar-open .sidebar { transform: translateX(0); }
            body.sidebar-open .sidebar-backdrop { display: block; }
            .content { padding: 16px; max-width: none; }
            .sidebar-resize-handle { display: none; }
            body.split-mode #appBody { width: 48%; }
            body.split-mode #splitViewContainer { width: 52%; }
            .mm-table-header { flex-direction: column; }
            .mm-list-actions { flex-wrap: wrap; }
        }

        /* ── 분할 보기 (칸반/작업테이블/간트/캘린더/마인드맵을 2개씩 나란히) ── */
        .split-view-container { display: none; height: calc(100vh - 57px); }
        .split-view-container.show { display: flex; }
        .split-pane { flex: 1; min-width: 0; height: 100%; }
        .split-iframe { width: 100%; height: 100%; border: none; display: block; background: var(--bg); }
        .split-divider { width: 4px; flex-shrink: 0; background: var(--border); cursor: col-resize; }
        .split-divider:hover { background: var(--accent); }
        body.split-mode #appBody { display: flex !important; width: 50%; min-width: 0; }
        body.split-mode #splitViewContainer { display: flex; width: 50%; flex-shrink: 0; }
        body.split-mode #splitPane1 { display: none; }
        body.split-mode #splitPane2 { flex: 1; }
        #embedTabStrip { display: none; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--panel); flex-wrap: wrap; position: sticky; top: 0; z-index: 50; }
        .embed-tab-btn { padding: 6px 12px; border-radius: 6px; border: none; background: var(--border); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
        .embed-tab-btn:hover { background: var(--chip-hover); color: var(--text-primary); }
        .embed-tab-btn.active { background: var(--accent); color: var(--text-primary); }
        body.embed-mode .header,
        body.embed-mode .sidebar,
        body.embed-mode .sidebar-resize-handle { display: none !important; }
        body.embed-mode #embedTabStrip { display: flex; }
        body.embed-mode .app-body { align-items: stretch; }
        body.embed-mode .content { padding: 14px 16px; max-width: none; }
        @keyframes kklab-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
        .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
        .card { background: var(--panel); border-radius: 12px; padding: 24px; border: 1px solid var(--border); }
        .card-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
        .card-value { font-size: 28px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
        .card-change { font-size: 13px; margin-top: 6px; }
        .up { color: var(--success); }
        .section-title { font-size: 21px; font-weight: 700; margin-bottom: 18px; color: var(--text-primary); letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; }
        .section-title svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
        .placeholder { background: var(--panel); border-radius: 12px; border: 1px dashed var(--border); padding: 60px; text-align: center; color: var(--text-faint); }
        .board-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 24px; }
        .board-header .section-title { flex-shrink: 0; white-space: nowrap; }
        .memo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
        .memo-card { background: var(--panel); border-radius: 12px; padding: 20px; border: 1px solid var(--border); transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease); }
        .memo-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
        .memo-card-image { width: 100%; border-radius: 8px; margin-bottom: 12px; max-height: 200px; object-fit: cover; cursor: pointer; }
        .memo-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
        .memo-content { font-size: 14px; color: var(--text-muted); line-height: 1.6; white-space: pre-wrap; }
        .memo-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
        .memo-date { font-size: 11px; color: var(--text-faint); }
        .memo-author { font-size: 11px; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
        .memo-author svg { width: 12px; height: 12px; flex-shrink: 0; }
        .memo-actions { display: flex; gap: 4px; }
        .memo-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
        .memo-btn:hover { background: var(--border); }
        .memo-btn.edit:hover { color: var(--accent); }
        .memo-btn.delete:hover { color: var(--danger); }
        .write-form { background: var(--panel); border-radius: 12px; padding: 24px; border: 1px solid var(--border); margin-bottom: 24px; display: none; }
        .write-form.show { display: block; }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
        .form-group input, .form-group textarea { width: 100%; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 14px; font-family: inherit; color-scheme: var(--native-scheme); }
        .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); }
        .form-group textarea { height: 120px; resize: vertical; }
        .form-actions { display: flex; gap: 8px; justify-content: flex-end; }
        .drop-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: 0.2s; color: var(--text-faint); font-size: 14px; background: var(--bg); }
        .drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); color: var(--accent); }
        .drop-zone input[type="file"] { display: none; }
        .image-preview-wrap { position: relative; display: inline-block; margin-top: 10px; }
        .image-preview { max-width: 100%; max-height: 200px; border-radius: 8px; object-fit: cover; display: block; }
        .image-remove-btn { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.6); border: none; color: var(--text-primary); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
        .image-remove-btn:hover { background: var(--danger); }
        .upload-status { font-size: 12px; color: var(--accent); margin-top: 6px; }
        /* URL 이미지 입력 */
        .url-image-section { margin-top: 12px; }
        .url-input-row { display: flex; gap: 8px; align-items: center; }
        .url-input-row input { flex: 1; }
        .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; }
        .btn-sm-primary { background: var(--accent); color: var(--text-primary); }
        .btn-sm-secondary { background: var(--border); color: var(--text-secondary); }
        .url-preview-wrap { margin-top: 10px; position: relative; display: none; }
        .url-preview-img { max-width: 100%; max-height: 200px; border-radius: 8px; object-fit: cover; }
        .url-preview-remove { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.6); border: none; color: var(--text-primary); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
        .url-preview-remove:hover { background: var(--danger); }
        .url-hint { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
        /* 탭 구분선 */
        .img-tab-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
        .img-tab-divider span { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
        .img-tab-divider::before, .img-tab-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
        /* 인라인 편집 */
        .memo-edit-form { margin-top: 10px; display: none; }
        .memo-edit-form.show { display: block; }
        .memo-edit-input { width: 100%; padding: 6px 10px; background: var(--bg); border: 1px solid var(--accent); border-radius: 6px; color: var(--text-primary); font-size: 14px; font-family: inherit; margin-bottom: 6px; }
        .memo-edit-textarea { width: 100%; padding: 6px 10px; background: var(--bg); border: 1px solid var(--accent); border-radius: 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; resize: vertical; height: 80px; }
        .memo-edit-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
        /* ── 마인드맵 카드 ── */
        .mm-card { background: var(--panel); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: 0.2s; cursor: pointer; }
        .mm-card:hover { border-color: var(--accent); transform: translateY(-2px); }
        .mm-card-preview { width: 100%; height: 160px; background: var(--bg-alt); position: relative; overflow: hidden; }
        .mm-card-preview svg { width: 100%; height: 100%; }
        .mm-card-body { padding: 14px 16px; }
        .mm-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
        .mm-card-meta { font-size: 11px; color: var(--text-faint); display: flex; justify-content: space-between; align-items: center; }
        .mm-card-actions { display: flex; gap: 4px; }
        .mm-list-actions { display:flex; align-items:center; gap:8px; }
        .mm-search-input { min-width:150px; padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text-primary); font:inherit; font-size:12px; }
        .mm-search-input:focus { outline:none; border-color:var(--accent); }
        .mm-table-panel { margin-top:24px; padding:18px; background:var(--panel); border:1px solid var(--border); border-radius:12px; }
        .mm-table-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:12px; }
        .mm-table-header h3 { margin:0 0 4px; font-size:15px; color:var(--text-primary); }
        .mm-table-header p { margin:0; color:var(--text-faint); font-size:12px; }
        .mm-table-controls { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
        .mm-table-controls select, .mm-table-controls input { min-height:30px; background:var(--bg); color:var(--text-secondary); border:1px solid var(--border); border-radius:6px; padding:5px 8px; font:inherit; font-size:12px; }
        .mm-table-scroll { max-height:min(52vh,560px); overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; }
        .mm-table-bulkbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:36px; margin:0 0 8px; padding:7px 9px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text-muted); font-size:11px; }
        .mm-table-bulkbar[hidden], .mm-gantt-export-panel[hidden] { display:none; }
        .mm-table-select-all { display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--text-secondary); }
        .mm-table-bulkbar #mmTableSelectionCount { color:var(--text-faint); }
        .mm-table-bulkbar #mmTableGanttExportBtn { margin-left:auto; }
        .mm-gantt-export-panel { margin:0 0 10px; padding:12px; border:1px solid color-mix(in srgb, var(--accent) 36%, var(--border)); border-radius:9px; background:color-mix(in srgb, var(--accent) 7%, var(--panel)); color:var(--text-secondary); }
        .mm-gantt-export-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
        .mm-gantt-export-head h4 { margin:0 0 3px; color:var(--text-primary); font-size:13px; }
        .mm-gantt-export-head p { margin:0; color:var(--text-faint); font-size:11px; }
        .mm-gantt-export-fields { display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:10px; }
        .mm-gantt-export-fields label { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-muted); }
        .mm-gantt-export-fields select { min-height:30px; max-width:220px; background:var(--bg); color:var(--text-secondary); border:1px solid var(--border); border-radius:6px; padding:5px 8px; font:inherit; font-size:12px; }
        .mm-gantt-export-summary { margin-top:9px; color:var(--text-muted); font-size:11px; }
        .mm-gantt-export-required { color:var(--text-primary) !important; }
        .mm-gantt-export-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:10px; }
        .mm-node-table { width:100%; min-width:1040px; border-collapse:collapse; table-layout:fixed; font-size:12px; color:var(--text-secondary); }
        .mm-node-table th, .mm-node-table td { border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top; line-height:1.4; }
        .mm-node-table th { position:sticky; top:0; z-index:2; background:var(--panel); color:var(--text-muted); font-weight:600; white-space:nowrap; }
        .mm-node-table th button { border:0; background:transparent; color:inherit; padding:0; font:inherit; cursor:pointer; }
        .mm-node-table th button::after { content:'↕'; margin-left:4px; color:var(--text-faint); font-size:10px; }
        .mm-node-table th[aria-sort="ascending"] button::after { content:'↑'; color:var(--accent); }
        .mm-node-table th[aria-sort="descending"] button::after { content:'↓'; color:var(--accent); }
        .mm-node-table th[data-col="selected"], .mm-node-table td[data-col="selected"] { text-align:center; }
        .mm-node-table th[data-col="created"] { white-space:nowrap; }
        .mm-node-table th[data-col="label"], .mm-node-table td[data-col="label"] { padding-left:var(--mm-table-variable-pad,10px); padding-right:var(--mm-table-variable-pad,10px); }
        .mm-node-table th[data-col]:not([data-col="selected"]) { position:relative; }
        .mm-node-table th[draggable="true"] { cursor:grab; }
        .mm-node-table th.mm-table-th-dragging { opacity:.45; }
        .mm-node-table th.mm-table-th-drag-over { box-shadow:inset 3px 0 0 var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--panel)); }
        .mm-table-col-resize-handle { position:absolute; top:0; right:-4px; width:8px; height:100%; cursor:col-resize; z-index:4; }
        .mm-table-col-resize-handle:hover { background:color-mix(in srgb, var(--accent) 55%, transparent); }
        .mm-table-padding-control { display:inline-flex; align-items:center; gap:4px; min-height:30px; padding:4px 7px; border:1px solid var(--border); border-radius:6px; color:var(--text-muted); font-size:11px; }
        .mm-table-padding-control input { width:72px; min-height:auto; padding:0; border:0; }
        .mm-node-table tbody tr { cursor:pointer; }
        .mm-node-table tbody tr:hover { background:var(--bg); }
        .mm-table-check { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
        .mm-table-date { color:var(--text-muted); font-variant-numeric:tabular-nums; }
        .mm-table-node-label { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); }
        .mm-table-tag-list, .mm-table-flow-list { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
        .mm-table-flow { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:3px 5px; border:1px solid var(--border); border-radius:6px; background:var(--bg); }
        .mm-table-flow-endpoint { max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:0; padding:0; background:transparent; color:var(--text-secondary); cursor:pointer; font:inherit; font-size:11px; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset:2px; }
        .mm-table-flow-endpoint.current { color:var(--text-primary); font-weight:600; text-decoration:none; cursor:default; }
        .mm-table-flow-connector { display:inline-flex; align-items:center; justify-content:center; min-width:20px; color:var(--accent); font-size:13px; }
        .mm-table-flow[data-relation="normal"] .mm-table-flow-connector { color:var(--text-faint); }
        .mm-table-flow-status { color:var(--accent); font-size:10px; white-space:nowrap; }
        .mm-table-schedule { display:grid; grid-template-columns:1fr 1fr auto; gap:4px; align-items:center; }
        .mm-table-schedule input { min-width:0; width:100%; min-height:27px; padding:3px 5px; background:var(--bg); color:var(--text-secondary); border:1px solid var(--border); border-radius:5px; font:inherit; font-size:11px; }
        .mm-table-schedule input[type="number"] { width:48px; }
        .mm-table-schedule small { grid-column:1/-1; color:var(--text-faint); font-size:10px; }
        .mm-table-schedule .kb-provisional-badge { grid-column:1/-1; width:max-content; }
        .mm-table-muted { color:var(--text-faint); font-size:11px; }
        .mm-conflict-panel { position:absolute; z-index:120; right:12px; top:12px; width:min(430px,calc(100% - 24px)); max-height:min(52vh,440px); overflow:auto; padding:10px; border:1px solid color-mix(in srgb, #d08b2f 55%, var(--border)); border-radius:10px; background:var(--panel); box-shadow:0 14px 40px rgba(0,0,0,.32); }
        .mm-conflict-panel[hidden] { display:none; }
        .mm-conflict-panel-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
        .mm-conflict-panel h3 { margin:0 0 4px; color:var(--text-primary); font-size:15px; }
        .mm-conflict-panel p { margin:0; color:var(--text-muted); font-size:11px; }
        .mm-conflict-items { display:grid; gap:7px; margin:12px 0; }
        .mm-conflict-item { display:grid; grid-template-columns:minmax(100px, .8fr) 1fr 1fr auto; gap:7px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:7px; font-size:11px; }
        .mm-conflict-item strong { color:var(--text-primary); }
        .mm-conflict-value { min-width:0; padding:5px 6px; border-radius:5px; background:var(--bg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .mm-conflict-value.selected { outline:1px solid var(--accent); }
        .mm-conflict-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
        .mm-conflict-actions .btn-sm { font-size:11px; padding:4px 7px; }
        .mm-edge-gantt-action { border-top:1px solid var(--border) !important; margin-top:4px; color:var(--accent) !important; font-weight:600; }
        .mm-edge-gantt-export-panel { position:absolute; z-index:130; right:12px; top:12px; width:min(680px,calc(100% - 24px)); max-height:min(78vh,680px); overflow:auto; padding:14px; border:1px solid color-mix(in srgb, var(--accent) 48%, var(--border)); border-radius:10px; background:var(--panel); box-shadow:0 18px 50px rgba(0,0,0,.4); }
        .mm-edge-gantt-export-panel[hidden] { display:none; }
        .mm-edge-gantt-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
        .mm-edge-gantt-head h3 { margin:0 0 4px; color:var(--text-primary); font-size:15px; }
        .mm-edge-gantt-head p, .mm-edge-gantt-warning { margin:0; color:var(--text-faint); font-size:11px; }
        .mm-edge-gantt-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; margin-top:12px; }
        .mm-edge-gantt-flow > span { color:var(--accent); font-size:22px; }
        .mm-edge-gantt-flow section { min-width:0; padding:9px; border:1px solid var(--border); border-radius:8px; background:var(--bg); }
        .mm-edge-gantt-flow strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); font-size:12px; }
        .mm-edge-gantt-flow small { color:var(--text-faint); font-size:10px; }
        .mm-edge-gantt-fields { display:grid; grid-template-columns:1fr 1fr auto; gap:5px; margin-top:8px; }
        .mm-edge-gantt-fields label, .mm-edge-gantt-options label { display:flex; flex-direction:column; gap:3px; color:var(--text-muted); font-size:10px; }
        .mm-edge-gantt-fields input, .mm-edge-gantt-options select { min-width:0; min-height:28px; padding:4px 5px; border:1px solid var(--border); border-radius:5px; background:var(--panel); color:var(--text-secondary); font:inherit; font-size:11px; }
        .mm-edge-gantt-options { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
        .mm-edge-gantt-options[hidden] { display:none; }
        .mm-edge-gantt-options label { min-width:180px; }
        .mm-edge-gantt-warning { margin-top:10px; color:#d6a453; }
        .mm-edge-gantt-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:12px; }
        .mm-gantt-focus .bar { stroke:var(--accent); stroke-width:3px; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 65%, transparent)); }
        /* ── 마인드맵 에디터 오버레이 ── */
        .mm-overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.92); z-index: var(--z-editor, 3000); flex-direction: column; }
        .mm-overlay.show { display: flex; }
        .mm-editor-workspace { display:flex; flex:1; min-height:0; min-width:0; }
        .mm-primary-pane { display:flex; flex:1 1 auto; min-width:0; min-height:0; flex-direction:column; }
        .mm-split-divider { flex:0 0 7px; cursor:col-resize; background:var(--border); border-left:1px solid rgba(255,255,255,.05); border-right:1px solid rgba(0,0,0,.25); }
        .mm-split-divider:hover, .mm-split-divider.dragging { background:var(--accent); }
        .mm-secondary-pane { flex:1 1 auto; min-width:0; min-height:0; background:var(--bg); display:flex; flex-direction:column; }
        .mm-secondary-pane[hidden], .mm-split-divider[hidden] { display:none; }
        .mm-secondary-toolbar { flex:0 0 auto; min-height:38px; padding:5px 8px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--border); background:var(--panel); color:var(--text-faint); font-size:11px; }
        .mm-secondary-toolbar select { min-width:130px; flex:1; background:var(--bg); color:var(--text-secondary); border:1px solid var(--border); border-radius:6px; padding:5px 7px; }
        .mm-secondary-frame { flex:1; min-width:0; min-height:0; width:100%; border:0; background:var(--bg); }
        .mm-toolbar { padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        /* ── 명령 레지스트리 기반 툴바 ──
           원본 버튼은 각 panel 안에서 그대로 재사용한다. 따라서 이 스타일이 로드되지 않거나
           Coordinator가 초기화되지 않아도 인라인 legacy 툴바가 기능을 잃지 않는다. */
        .mm-toolbar-enhanced { position:relative; z-index:10; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"persistent persistent" "commands context"; align-items:start; padding:7px 12px; gap:6px 10px; overflow:visible; }
        .mm-toolbar-persistent { grid-area:persistent; display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
        .mm-toolbar-persistent .mm-title-input { flex:1 1 160px; }
        .mm-toolbar-persistent .mm-editor-map-search { flex:0 1 110px; }
        .mm-toolbar-persistent .mm-editor-map-select { flex:0 1 190px; }
        .mm-toolbar-command-area { grid-area:commands; display:flex; align-items:center; gap:7px; min-width:0; position:relative; }
        .mm-toolbar-tabs { display:flex; align-items:center; gap:2px; flex:0 0 auto; }
        .mm-toolbar-tab { min-height:28px; padding:4px 9px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--text-faint); cursor:pointer; font:inherit; font-size:11px; white-space:nowrap; }
        .mm-toolbar-tab:hover, .mm-toolbar-tab:focus-visible { color:var(--text-primary); background:var(--bg); outline:none; }
        .mm-toolbar-tab.active { color:var(--text-primary); background:var(--bg); border-color:var(--border); box-shadow:inset 0 -2px 0 var(--accent); }
        .mm-toolbar-favorites { position:relative; display:flex; align-items:center; gap:4px; min-width:0; max-width:min(50vw,520px); padding-left:7px; border-left:1px solid var(--border); }
        .mm-toolbar-favorites-label { color:var(--text-faint); font-size:10px; white-space:nowrap; }
        .mm-toolbar-favorite-actions { display:flex; align-items:center; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:thin; }
        .mm-toolbar-favorites-empty { color:var(--text-faint); font-size:10px; white-space:nowrap; }
        .mm-toolbar-favorite, .mm-toolbar-favorite-edit { min-height:27px; padding:4px 7px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text-secondary); cursor:pointer; font:inherit; font-size:11px; white-space:nowrap; }
        .mm-toolbar-favorite:hover, .mm-toolbar-favorite:focus-visible, .mm-toolbar-favorite-edit:hover, .mm-toolbar-favorite-edit:focus-visible { border-color:var(--accent); color:var(--text-primary); outline:none; }
        .mm-toolbar-favorite[disabled], .mm-toolbar-favorite-edit[disabled] { opacity:.45; cursor:not-allowed; }
        .mm-toolbar-favorite-editor { position:absolute; top:calc(100% + 5px); left:0; z-index:120; width:min(430px, calc(100vw - 24px)); max-height:min(360px, 55vh); overflow:auto; padding:9px; border:1px solid var(--border); border-radius:9px; background:var(--panel); box-shadow:0 12px 30px rgba(0,0,0,.35); }
        .mm-toolbar-favorite-editor[hidden] { display:none; }
        .mm-toolbar-favorite-editor-heading { margin-bottom:7px; color:var(--text-faint); font-size:11px; }
        .mm-toolbar-favorite-row { display:flex; align-items:center; gap:4px; padding:2px 0; }
        .mm-toolbar-favorite-toggle { flex:1; min-width:0; padding:5px 7px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--text-secondary); cursor:pointer; font:inherit; font-size:11px; text-align:left; }
        .mm-toolbar-favorite-toggle:hover, .mm-toolbar-favorite-toggle:focus-visible, .mm-toolbar-favorite-toggle[aria-pressed="true"] { background:var(--bg); border-color:var(--border); color:var(--text-primary); outline:none; }
        .mm-toolbar-favorite-move { width:25px; height:25px; padding:0; border:1px solid var(--border); border-radius:5px; background:var(--bg); color:var(--text-secondary); cursor:pointer; }
        .mm-toolbar-favorite-move:hover, .mm-toolbar-favorite-move:focus-visible { color:var(--text-primary); border-color:var(--accent); outline:none; }
        .mm-toolbar-panels { flex:1 1 auto; min-width:0; }
        .mm-toolbar-panel { display:flex; align-items:center; gap:7px; min-width:0; min-height:29px; flex-wrap:wrap; }
        .mm-toolbar-panel[hidden] { display:none; }
        .mm-toolbar-panel > span:not(.sr-only) { color:var(--text-faint); font-size:10px; white-space:nowrap; }
        .mm-toolbar-panel .mm-toolbar-sep { display:none; }
        .mm-toolbar-panel button[aria-disabled="true"], .mm-toolbar-selection-context button[aria-disabled="true"] { opacity:.45; }
        .mm-toolbar-selection-context { grid-area:context; display:flex; align-items:center; justify-content:flex-end; gap:5px; min-height:29px; padding-left:8px; border-left:1px solid var(--border); }
        .mm-toolbar-selection-context[hidden] { display:none; }
        .mm-toolbar-context-label { color:var(--text-faint); font-size:10px; white-space:nowrap; }
        .mm-toolbar-enhanced .mm-search-results { position:absolute; top:calc(100% + 3px); left:0; }
        .mm-toolbar-enhanced input:focus-visible, .mm-toolbar-enhanced select:focus-visible, .mm-toolbar-enhanced button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
        @media (max-width: 859px) {
            .mm-toolbar-enhanced { grid-template-columns:minmax(0,1fr); grid-template-areas:"persistent" "commands" "context"; max-height:36vh; overflow-y:auto; }
            .mm-toolbar-command-area { flex-wrap:wrap; }
            .mm-toolbar-favorites { max-width:100%; border-left:0; border-top:1px solid var(--border); padding:5px 0 0; flex:1 0 100%; }
            .mm-toolbar-selection-context { justify-content:flex-start; padding:5px 0 0; border-left:0; border-top:1px solid var(--border); }
        }
        @media (max-width: 480px) {
            .mm-toolbar-enhanced { padding:6px 9px; }
            .mm-toolbar-persistent .mm-title-input { flex-basis:100%; max-width:none; }
            .mm-toolbar-persistent .mm-editor-map-search { flex:1 1 90px; }
            .mm-toolbar-persistent .mm-editor-map-select { flex:1 1 140px; min-width:0; }
            .mm-toolbar-tab { padding-inline:7px; }
            .mm-toolbar-panel { gap:5px; }
            .mm-toolbar-panel .mm-sketch-settings { flex-basis:100%; }
        }
        .mm-title-input { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); padding: 5px 10px; font-size: 14px; font-weight: 600; flex: 1; min-width: 140px; max-width: 260px; }
        .mm-title-input:focus { outline: none; border-color: var(--accent); }
        .mm-editor-map-select { min-width:150px; max-width:230px; min-height:30px; background:var(--bg); color:var(--text-secondary); border:1px solid var(--border); border-radius:6px; padding:5px 8px; font:inherit; font-size:12px; }
        .mm-editor-map-search { width:100px; min-height:30px; background:var(--bg); color:var(--text-secondary); border:1px solid var(--border); border-radius:6px; padding:5px 7px; font:inherit; font-size:11px; }
        .mm-toolbar-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
        .mm-color-btn { appearance: none; padding: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; flex-shrink: 0; transition: transform 0.1s; }
        .mm-color-btn:hover { transform: scale(1.25); border-color: rgba(255,255,255,0.6); }
        .mm-zoom-btn { background: var(--border); border: none; color: var(--text-secondary); border-radius: 5px; width: 26px; height: 26px; cursor: pointer; font-size: 15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .mm-zoom-btn:hover { background: var(--chip-hover); color: var(--text-primary); }
        .mm-zoom-label { font-size: 11px; color: var(--text-faint); min-width: 34px; text-align:center; flex-shrink:0; }
        /* 연결선 모드 토글 (일반 선 / 화살표 선) */
        .mm-mode-btn { background:var(--border); border:none; color:var(--text-secondary); border-radius:6px; padding:5px 11px; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0; transition:0.15s; line-height:1; }
        .mm-mode-btn:hover { background:var(--chip-hover); color:var(--text-primary); }
        .mm-mode-btn.active { background:var(--accent); color:var(--text-primary); }
        /* 버블 테두리 두께 슬라이더 */
        .mm-thickness-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; }
        .mm-thickness-wrap input[type=range] { width:64px; accent-color:var(--accent); cursor:pointer; }
        .mm-thickness-wrap input[type=range]:disabled { opacity:0.4; cursor:not-allowed; }
        .mm-thickness-label { font-size:11px; color:var(--text-faint); min-width:46px; flex-shrink:0; }
        .mm-sketch-settings { display:flex; align-items:center; gap:7px; flex-shrink:0; }
        .mm-sketch-setting-title, .mm-sketch-setting { font-size:11px; color:var(--text-faint); white-space:nowrap; }
        .mm-sketch-setting { display:flex; align-items:center; gap:4px; }
        .mm-sketch-setting input[type=range] { width:54px; accent-color:var(--accent); cursor:pointer; }
        .mm-sketch-setting output { min-width:24px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
        .mm-save-status { font-size:11px; color:var(--text-faint); min-width:72px; text-align:center; white-space:nowrap; }
        .mm-save-status[data-state="saving"] { color:var(--accent); }
        .mm-save-status[data-state="dirty"], .mm-save-status[data-state="retry"] { color:#d69e2e; }
        .mm-save-status[data-state="conflict"], .mm-save-status[data-state="error"] { color:#e56b6f; }
        .mm-hint { padding: 3px 14px; font-size: 11px; color: #2d3555; background: var(--bg-alt); flex-shrink: 0; }
        /* ── 캔버스 ──
           Excalidraw 레퍼런스처럼 무격자·단색 캔버스다. pan/zoom 좌표용 변수와
           mmUpdateGrid()는 legacy 호출 호환성을 위해 남기지만 시각적 grid에는 사용하지 않는다. */
        .mm-canvas-wrap {
            flex: 1; position: relative; overflow: hidden; isolation:isolate;
            --mm-canvas-bg: #11141d;
            --mm-hand-font: "Excalifont", "Xiaolai", "Comic Sans MS", "Segoe Print", "Bradley Hand", "Noteworthy", "Chalkboard SE", cursive;
            --mm-grid-line: rgba(255,255,255,0.055);
            --mm-grid-line-strong: rgba(255,255,255,0.11);
            --mm-grid-minor-size:24px;
            --mm-grid-major-size:120px;
            --mm-grid-minor-x:0px; --mm-grid-minor-y:0px;
            --mm-grid-major-x:0px; --mm-grid-major-y:0px;
            background-color: var(--mm-canvas-bg);
        }
        .mm-canvas-wrap::before {
            content:""; display:none; position:absolute; inset:0; z-index:0; pointer-events:none;
        }
        .mm-overlay.light-theme .mm-canvas-wrap {
            --mm-canvas-bg: #eef1f6;
            --mm-grid-line: rgba(20,30,55,0.07);
            --mm-grid-line-strong: rgba(20,30,55,0.13);
        }
        .mm-canvas-inner {
            position: absolute; top:0; left:0; width:100%; height:100%; transform-origin: 0 0; z-index:1;
            background: transparent;
        }
        .mm-svg { position: absolute; top:0; left:0; width:20000px; height:20000px; overflow: visible; pointer-events: none; }
        .mm-edge-group, .mm-edge-interaction { pointer-events: none; }
        .mm-edge-hit { pointer-events: stroke; }
        .mm-edge-visible.mm-edge-task-order { stroke-dasharray: 7 3; filter: drop-shadow(0 0 2px rgba(224,160,48,.45)); }
        .mm-sketch-edge-layer, .mm-sketch-node-layer { pointer-events:none; }
        .mm-sketch-edge path, .mm-sketch-edge line, .mm-sketch-arrowhead path, .mm-sketch-arrowhead line,
        .mm-sketch-background-shape path, .mm-sketch-background-shape rect,
        .mm-sketch-node-boundary path, .mm-sketch-node-boundary rect { pointer-events:none; }
        .mm-sketch-background-shape { opacity:.78; }
        .mm-edge-action { fill:var(--accent); stroke:var(--panel); stroke-width:2px; opacity:0; cursor:pointer; transition:opacity .12s, transform .12s; }
        .mm-edge-interaction:hover > .mm-edge-action, .mm-edge-interaction:focus-within > .mm-edge-action, .mm-edge-action:focus { opacity:1; outline:none; }
        .mm-edge-relation-popover { position:absolute; z-index:90; min-width:154px; transform:none; padding:4px; background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
        .mm-edge-relation-popover[hidden] { display:none; }
        .mm-edge-relation-popover button { display:block; width:100%; padding:6px 9px; border:0; border-radius:5px; background:transparent; color:var(--text-secondary); text-align:left; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
        .mm-edge-relation-popover button:hover, .mm-edge-relation-popover button[aria-checked="true"] { background:var(--bg); color:var(--text-primary); }
        .mm-nodes-layer { position: absolute; top:0; left:0; width:20000px; height:20000px; pointer-events: none; }
        /* ── 버블 ──
           border-width는 longhand로 분리: JS에서 인라인 style.borderWidth만 따로 덮어써도
           style/color는 아래 규칙을 그대로 따르도록 (두께 슬라이더 기능에서 사용) */
        .mm-bubble { position: absolute; border-radius: 10px; padding: 6px 14px; color: var(--mm-bubble-text, #dde); font-family:var(--mm-hand-font); font-size: 14px; font-weight: 400; letter-spacing:.01em; cursor: move; user-select: none; text-align: center; white-space: pre-wrap; overflow-wrap:anywhere; word-break:break-word; border:0 solid transparent; box-shadow:none; transform: translate(-50%,-50%); pointer-events: all; transition: outline-color 0.12s, background 0.15s; display:flex; align-items:center; justify-content:center; }
        .mm-shape { z-index:0; opacity:.78; }
        .mm-bubble:not(.mm-shape) { z-index:1; }
        .mm-overlay.mm-readonly .mm-bubble { pointer-events: none; cursor: default; }
        .mm-overlay.mm-readonly .mm-card-badge { pointer-events:auto; }
        .mm-bubble:hover { text-shadow:0 0 1px currentColor; }
        .mm-bubble.selected { outline: 1.5px dashed rgba(210,185,100,0.9); outline-offset: 4px; }
        .mm-bubble.connecting { outline: 1.5px dashed rgba(100,180,130,0.95); outline-offset: 4px; cursor: crosshair; }
        /* 드래그로 정확히 겹친 '단 하나의' 타겟 버블만 표시되는 하이라이트 (연결 로직 정밀화) */
        .mm-bubble.drop-target { outline: 2px dashed rgba(255,196,77,0.95); outline-offset: 4px; }
        .mm-bubble .mm-edit-input { background: transparent; border: none; color: inherit; font: inherit; line-height:1.35; text-align: center; outline: none; min-width: 40px; max-width: 290px; width:100%; flex:none; box-sizing:border-box; padding:2px 0; overflow-y:auto; }
        .mm-editor-search { width:130px; min-width:110px; }
        .mm-search-results { display:none; position:relative; max-width:180px; max-height:160px; overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:6px; z-index:20; }
        .mm-search-results button, .mm-search-results span { display:block; width:100%; padding:6px 8px; border:0; background:transparent; color:var(--text-secondary); text-align:left; font:inherit; font-size:12px; cursor:pointer; }
        .mm-search-results button:hover { background:var(--bg); color:var(--text-primary); }
        .mm-field-hint { display:block; margin-top:4px; color:var(--text-faint); font-size:10.5px; }
        .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
        /* 라이트 테마에서는 버블 배경 자체를 밝은 팔레트로 바꿔 그리므로(mmDisplayColor) 글씨도 어두운 색으로 전환 */
        .mm-overlay.light-theme { --mm-bubble-text: #16233d; }
        .mm-overlay.light-theme .mm-bubble { color:#16233d; }
        /* ── 리사이즈 핸들 ── */
        .mm-rz-e  { position:absolute; right:-6px;  top:50%; transform:translateY(-50%); width:12px; height:26px; cursor:ew-resize; z-index:5; border-radius:3px; background:rgba(255,255,255,0.18); }
        .mm-rz-s  { position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:26px; height:12px; cursor:ns-resize; z-index:5; border-radius:3px; background:rgba(255,255,255,0.18); }
        .mm-rz-se { position:absolute; right:-6px;  bottom:-6px; width:12px; height:12px; cursor:nwse-resize; z-index:5; border-radius:2px; background:rgba(255,255,255,0.28); }
        .mm-card-badge { appearance:none; padding:0; position:absolute; left:-11px; top:-11px; width:24px; height:24px; border-radius:50%; background:#3ecf8e; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:6; box-shadow:0 1px 5px rgba(0,0,0,0.6); border:2px solid rgba(255,255,255,0.4); transition: transform 0.12s; }
        .mm-card-badge svg { width:12px; height:12px; color:#0a2318; pointer-events:none; }
        /* 연결 카드의 마감 상태. 색만으로 상태를 전달하지 않는다 — 숫자와 aria-label이 함께 있다.
           지난 카드를 회색으로 낮추는 것은 마인드맵이 '구조를 보는 화면'이기 때문이다. 다만 오늘
           마감까지 회색에 묻히면 놓치므로 별도 색을 유지한다(칸반의 3단계와 같은 구조).

           --text-faint를 그대로 쓰지 않는 이유: 다크에서 #666 배경에 --panel 글자를 얹으면
           대비가 3.18:1로 WCAG AA(4.5:1)에 미달한다(실측). 뱃지 전용 의미 토큰을 두어 앱 테마
           (body.theme-light)와 캔버스 밝기(.mm-overlay.light-theme) 어느 조합에서도 대비를
           보장한다. 값을 바꾸면 tests/mindmap-card-badge.test.js가 아니라 실제 대비를 다시 재라. */
        .mm-card-badge-days { font-size:10px; font-weight:700; line-height:1; letter-spacing:-.02em; pointer-events:none; font-variant-numeric:tabular-nums; }
        .mm-card-badge.has-days.is-overdue { background:var(--mm-badge-overdue-bg); }
        .mm-card-badge.has-days.is-overdue .mm-card-badge-days { color:var(--mm-badge-overdue-fg); }
        .mm-card-badge.has-days.is-today { background:var(--mm-badge-today-bg); }
        .mm-card-badge.has-days.is-today .mm-card-badge-days { color:var(--mm-badge-today-fg); }
        .mm-card-badge.has-days.is-upcoming .mm-card-badge-days { color:#0a2318; }
        .mm-card-badge:hover, .mm-card-badge:focus-visible { transform: scale(1.2); box-shadow:0 2px 8px rgba(0,0,0,0.7); outline:2px solid var(--accent); outline-offset:2px; }
        .mm-card-date-tooltip { position:absolute; z-index:45; transform:translate(-50%,-100%); padding:6px 8px; border:1px solid var(--border); border-radius:7px; background:var(--panel); color:var(--text-primary); box-shadow:0 8px 22px rgba(0,0,0,.38); font-size:12px; white-space:nowrap; pointer-events:none; }
        .mm-card-date-tooltip[hidden] { display:none; }
        .mm-card-date-auto { margin-left:5px; color:var(--text-faint); font-size:9px; font-weight:600; }
        .mm-notice { position:absolute; left:50%; bottom:24px; z-index:60; transform:translate(-50%,12px); max-width:min(520px,calc(100vw - 32px)); padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text-secondary); box-shadow:0 8px 24px rgba(0,0,0,.35); font-size:12px; opacity:0; pointer-events:none; transition:opacity .15s,transform .15s; }
        .mm-notice.show { opacity:1; transform:translate(-50%,0); }
        @media (max-width: 859px) {
            .mm-split-divider, .mm-secondary-pane { display:none !important; }
        }
        /* ── 셀렉션 박스 ── */
        .mm-sel-box { position:absolute; border:1.5px dashed rgba(210,185,100,0.7); background:rgba(210,185,100,0.04); pointer-events:none; z-index:20; }
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(6,7,9,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; justify-content: center; align-items: center; }
        .modal-overlay.show { display: flex; animation: kklab-fade-in 0.15s var(--ease); }
        .modal { background: var(--panel); border-radius: 16px; padding: 40px; width: 360px; max-width: calc(100vw - 32px); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
        @media (max-width: 480px) {
            .modal-overlay { align-items: flex-start; overflow-y: auto; padding: 16px 0; }
            .modal, .kb-modal, .ct-edit-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
            .modal { padding: 24px; }
            .modal input, .modal select, .modal textarea, .kb-modal input, .kb-modal select, .kb-modal textarea, .ct-edit-modal input, .ct-edit-modal select, .ct-edit-modal textarea { font-size: 16px; }
            .kb-card-color-swatch, .mm-color-btn { width: 28px; height: 28px; }
        }
        .modal-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
        .modal-tab { flex: 1; padding: 8px; text-align: center; border-radius: 6px; cursor: pointer; font: inherit; font-size: 14px; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
        .modal-tab.active { background: var(--accent); color: var(--text-primary); border-color: var(--accent); }
        .modal-tab:focus-visible, .ct-workload-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .modal-btn { width: 100%; padding: 12px; margin-top: 8px; border-radius: 8px; }
        .error-msg { color: var(--danger); font-size: 13px; margin-top: 8px; display: none; }
        .empty-state { text-align: center; padding: 60px; color: var(--text-faint); }
        .empty-state div { font-size: 48px; margin-bottom: 16px; }
        /* 이미지 라이트박스 */
        .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 2000; justify-content: center; align-items: center; cursor: zoom-out; }
        .lightbox.show { display: flex; }
        .lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; object-fit: contain; }
        .feedback-fab { position:static; z-index:auto; width:var(--floating-control-size); height:var(--floating-control-size); border-radius:50%; border:1px solid var(--border); background:var(--accent); color:var(--text-primary); cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.35); font-size:20px; }
        .feedback-fab:hover { transform:translateY(-2px); }
        .feedback-modal { width:440px; }
        .feedback-help { margin:-10px 0 18px; color:var(--text-faint); font-size:12px; line-height:1.5; }
        .feedback-modal textarea { min-height:130px; resize:vertical; }

        /* ══════════════════════════════════
           🗂 칸반 보드
        ══════════════════════════════════ */
        /* 보드 목록 그리드 */
        .kb-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
        .kb-board-card { border-radius: 14px; padding: 22px 20px 18px; cursor: pointer; transition: 0.2s; position: relative; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--border); }
        .kb-board-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.5); filter: brightness(1.12); }
        /* 보드 타일 배경은 테마와 무관하게 항상 어두운 팔레트 색이므로(kb-color-swatch 참고) 제목 글씨는 밝은색으로 고정 */
        .kb-board-card-title { font-size: 16px; font-weight: 700; color: #f3f4f9; text-shadow: 0 1px 4px rgba(0,0,0,0.6); word-break: break-word; }
        .kb-board-card-meta { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 12px; display: flex; justify-content: space-between; align-items: center; }
        .kb-board-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
        .kb-board-card-del { background: rgba(0,0,0,0.3); border: none; color: rgba(255,255,255,0.5); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: 0.15s; flex-shrink: 0; }
        .kb-board-card-del:hover, .kb-board-card-del:focus-visible { background: rgba(255,255,255,0.22); color: #fff; outline: none; }
        .kb-board-card-delete { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(231,76,60,0.62); border-radius: 50%; background: rgba(80,20,20,0.36); color: #ffd4d1; cursor: pointer; }
        .kb-board-card-delete:hover, .kb-board-card-delete:focus-visible { background: rgba(231,76,60,0.76); color: #fff; outline: none; }
        .kb-board-card-delete svg { width: 12px; height: 12px; }
        .kb-board-card.dragging { opacity: 0.4; cursor: grabbing; }
        .kb-board-card.drag-target { outline: 2px solid var(--accent); outline-offset: 2px; }
        .kb-share-badge { display: flex; align-items: center; gap: 3px; font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 2px; }
        .kb-share-badge.write { color: var(--badge-write); }
        .kb-share-badge.read { color: var(--badge-read); }
        .share-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); }
        .share-row:last-child { border-bottom: none; }
        .share-row-user { display: flex; align-items: center; gap: 6px; }
        .share-row-user svg { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }
        .share-row-actions { display: flex; align-items: center; gap: 6px; }
        .share-row-actions select { background: var(--border); color: var(--text-secondary); border: none; border-radius: 5px; padding: 3px 6px; font-size: 12px; }
        .share-row-actions button { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 3px; display: flex; }
        .share-row-actions button:hover { color: var(--danger); }
        .share-empty { color: var(--text-faint); font-size: 12.5px; padding: 6px 0; }

        /* 칸반 에디터 오버레이 */
        .kb-overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg-alt); z-index: var(--z-editor, 3000); flex-direction: column; }
        .kb-overlay.show { display: flex; }
        .kb-topbar { padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
        .kb-topbar-title { font-size: 16px; font-weight: 700; color: var(--text-primary); flex: 1; }
        .kb-topbar-title { cursor: text; border-radius: 6px; padding: 2px 8px; outline: none; }
        .kb-topbar-title:hover { background: rgba(255,255,255,0.08); }
        .kb-topbar-title:focus { background: rgba(255,255,255,0.12); box-shadow: 0 0 0 1px rgba(79,142,247,0.6); }
        .kb-topbar-btn { background: var(--border); border: none; color: var(--text-secondary); border-radius: 6px; padding: 5px 12px; font-size: 13px; cursor: pointer; transition: 0.15s; }
        .kb-topbar-btn:hover { background: var(--chip-hover); color: var(--text-primary); }
        .kb-topbar-btn.primary { background: var(--accent); color: var(--text-primary); }
        .kb-topbar-btn.primary:hover { background: var(--accent-hover); }
        .kb-topbar-jump { display: flex; gap: 4px; }
        .kb-board-switcher { min-width: 0; max-width: 190px; padding: 5px 26px 5px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; text-overflow: ellipsis; }
        .kb-board-switcher:hover { border-color: var(--accent); color: var(--text-primary); }
        .kb-board-switcher:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .kb-change-banner { display: none; align-items: center; gap: 8px; padding: 7px 18px; background: rgba(79,142,247,0.12); border-bottom: 1px solid rgba(79,142,247,0.3); color: var(--accent); font-size: 12.5px; flex-shrink: 0; }
        .kb-change-banner button { background: var(--accent); border: none; color: var(--text-primary); border-radius: 5px; padding: 3px 10px; font-size: 12px; cursor: pointer; margin-left: 4px; }
        .kb-change-banner button:hover { background: var(--accent-hover); }
        .kb-topbar-icon-btn { background: var(--border); border: none; color: var(--text-secondary); border-radius: 6px; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.15s; flex-shrink: 0; }
        .kb-topbar-icon-btn:hover { background: var(--chip-hover); color: var(--text-primary); }
        .kb-topbar-icon-btn svg { width: 16px; height: 16px; }
        .mm-jump-kanban-btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
        .mm-jump-kanban-btn svg { width: 14px; height: 14px; display: block; }

        /* 검색/태그 필터 바 */
        .kb-search-bar { padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .kb-search-result-count { font-size: 12px; color: var(--text-faint); }
        .kb-search-clear-btn { background: none; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 5px; }
        .kb-search-clear-btn:hover { background: var(--border); color: var(--text-secondary); }
        .kb-card-hidden { display: none !important; }

        /* 리스트 컨테이너 */
        .kb-lists-wrap { flex: 1; min-height: 0; display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 30px; overflow-x: scroll; overflow-y: hidden; scrollbar-gutter: stable both-edges; }
        .kb-lists-wrap::-webkit-scrollbar { height: 12px; }
        .kb-lists-wrap::-webkit-scrollbar-track { background: var(--bg-alt); border-radius: 999px; }
        .kb-lists-wrap::-webkit-scrollbar-thumb { background: var(--border); border: 3px solid var(--bg-alt); border-radius: 999px; }
        .kb-lists-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

        /* 개별 리스트(컬럼) */
        .kb-list { background: var(--panel); border-radius: 12px; padding: 0; width: 270px; flex-shrink: 0; display: flex; flex-direction: column; max-height: calc(100vh - 100px); border: 1px solid var(--border); }
        .kb-list-header { padding: 12px 14px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
        .kb-list-title { font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1; cursor: pointer; }
        .kb-list-title:focus { outline: none; border-bottom: 1px solid var(--accent); }
        .kb-list-count { font-size: 11px; color: var(--text-faint); background: var(--bg); border-radius: 10px; padding: 1px 7px; }
        .kb-list-disclosure { display: none; }
        .kb-list-del { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; }
        .kb-list-del:hover { background: var(--border); color: var(--danger); }

        /* 카드 스크롤 영역 */
        .kb-cards { flex: 1; overflow-y: auto; padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
        .kb-cards::-webkit-scrollbar { width: 4px; }
        .kb-cards::-webkit-scrollbar-track { background: transparent; }
        .kb-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        /* 칸반 카드 */
        .kb-card { background: var(--bg); border-radius: 8px; padding: 10px 12px; border: 1px solid var(--border); cursor: grab; transition: 0.15s; position: relative; user-select: none; }
        .kb-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
        .kb-card.kb-card-focus-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim), 0 4px 16px rgba(var(--accent-rgb),0.22); }
        .kb-card.dragging { opacity: 0.4; cursor: grabbing; }
        /* 카드 커스텀 배경색은 라이트/다크 테마와 무관하게 항상 저채도 어두운 팔레트(cardColorPalette)이므로,
           본문 텍스트 색을 테마 변수(var(--text-primary) 등)에 맡기면 라이트 모드에서 검은 글씨가 어두운 배경에 묻혀 버림.
           이 카드 안에서만 텍스트 관련 변수를 밝은 값으로 고정해 항상 잘 보이게 함 */
        .kb-card.kb-card-colored { --text-primary: #f3f4f9; --text-secondary: #dadce6; --text-muted: #b8bbcc; --text-faint: #999cb0; --border: rgba(255,255,255,0.16); }
        .kb-card-text { font-size: 13px; color: var(--text-primary); line-height: 1.5; word-break: break-word; padding-right: 18px; user-select: text; cursor: text; }
        .kb-card-footer {
            display: flex; gap: 2px;
            position: absolute; top: 4px; right: 4px;
            background: var(--panel); border-radius: 6px; padding: 2px;
            opacity: 0; visibility: hidden;
            transition: opacity 0.15s, visibility 0.15s;
            z-index: 2;
        }
        .kb-card:hover .kb-card-footer { opacity: 1; visibility: visible; }
        .kb-card-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 3px 5px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
        .kb-card-btn:hover { background: var(--border); color: var(--text-secondary); }
        .kb-card-btn.del:hover { color: var(--danger); }
        .kb-card-mobile-actions { display: none; }
        .kb-card-edit-wrap { display: none; margin-top: 6px; }
        .kb-card-edit-wrap.show { display: block; }
        .kb-card-edit-wrap.show ~ .kb-card-footer,
        .kb-card:has(.kb-card-edit-wrap.show) .kb-card-footer { opacity: 1; visibility: visible; position: static; background: none; margin-top: 6px; justify-content: flex-end; padding: 0; }
        .kb-card-edit-input { width: 100%; background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; color: var(--text-primary); padding: 6px 8px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 56px; user-select: text; }
        .kb-card-edit-input:focus { outline: none; }
        .kb-card-edit-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
        .kb-card-edit-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
        .kb-card-edit-toolbar .kb-card-color-picker { flex: 1; min-width: 0; margin-top: 0; }
        .kb-card-edit-toolbar .kb-card-edit-actions { flex-shrink: 0; margin: 0 0 0 auto; }

        /* 드롭 대상 하이라이트 */
        .kb-cards.drag-over { background: rgba(79,142,247,0.06); border-radius: 8px; }
        .kb-drop-indicator { height: 3px; background: var(--accent); border-radius: 2px; margin: 2px 0; pointer-events: none; }

        /* + 카드 추가 버튼 */
        .kb-add-card { padding: 8px 12px 10px; }
        .kb-add-card-btn { width: 100%; background: none; border: none; color: var(--text-faint); font-size: 13px; cursor: pointer; text-align: left; padding: 6px 8px; border-radius: 6px; transition: 0.15s; }
        .kb-add-card-btn:hover { background: var(--border); color: var(--text-secondary); }
        .kb-add-card-form { display: none; padding: 4px 0; }
        .kb-add-card-form.show { display: block; }
        .kb-add-card-textarea { width: 100%; background: var(--bg); border: 1px solid var(--accent); border-radius: 6px; color: var(--text-primary); padding: 8px 10px; font-size: 13px; font-family: inherit; resize: none; height: 68px; }
        .kb-add-card-textarea:focus { outline: none; }
        .kb-add-card-actions { display: flex; gap: 6px; margin-top: 6px; }

        /* + 리스트 추가 */
        .kb-add-list { width: 270px; flex-shrink: 0; }
        .kb-add-list-btn { width: 100%; background: rgba(255,255,255,0.05); border: 1.5px dashed var(--border); color: var(--text-faint); border-radius: 12px; padding: 14px; font-size: 14px; cursor: pointer; transition: 0.15s; }
        .kb-add-list-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(79,142,247,0.06); }
        .kb-add-list-form { display: none; background: var(--panel); border-radius: 12px; padding: 14px; border: 1px solid var(--border); }
        .kb-add-list-form.show { display: block; }
        .kb-add-list-input { width: 100%; background: var(--bg); border: 1px solid var(--accent); border-radius: 6px; color: var(--text-primary); padding: 8px 10px; font-size: 14px; font-family: inherit; }
        .kb-add-list-input:focus { outline: none; }
        .kb-add-list-actions { display: flex; gap: 6px; margin-top: 8px; }

        /* 새 보드 모달 */
        .kb-modal { background: var(--panel); border-radius: 16px; padding: 32px; width: 380px; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
        .kb-modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; }

        /* 작업 테이블 행 인라인 편집 모달: 칸반으로 이동하지 않고 표에서 바로 카드 정보를 수정 */
        .ct-edit-modal { background: var(--panel); border-radius: 16px; padding: 28px; width: 560px; max-width: 92vw; max-height: 86vh; overflow-y: auto; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
        .ct-edit-modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); }
        .ct-edit-modal-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; margin-bottom: 16px; }
        .ct-edit-modal-body { background: var(--bg); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
        .ct-edit-readonly-banner { display: flex; align-items: center; gap: 6px; color: #e0a030; font-size: 12px; margin-bottom: 12px; }
        .kb-color-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
        .kb-color-swatch { appearance: none; padding: 0; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: 0.15s; }
        .kb-color-swatch:hover { transform: scale(1.15); }
        .kb-color-swatch.selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--border-strong); }

        /* 카드 배경색 팔레트 (보드 색상 팔레트와 별개) */
        .kb-card-color-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
        .kb-card-color-swatch { appearance: none; padding: 0; width: 20px; height: 20px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: 0.15s; }
        .kb-card-color-swatch:hover { transform: scale(1.2); }
        .kb-card-color-swatch.selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--border-strong); }
        .kb-card-color-swatch.none { background: var(--bg) !important; border: 1px dashed var(--text-faint); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 10px; }
        .kb-card-color-swatch.none.selected { border-color: var(--text-primary); border-style: solid; }

        /* 카드 메모(설명) */
        .kb-card-memo-input { width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); padding: 6px 8px; font-size: 12px; font-family: inherit; resize: vertical; min-height: 90px; max-height: 220px; overflow-y: auto; margin-top: 8px; box-sizing: border-box; user-select: text; }
        .kb-card-memo-input:focus { outline: none; border-color: var(--accent); }
        .kb-card-timeline-section { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
        .kb-card-timeline-label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
        .kb-card-timeline-list { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
        .kb-card-timeline-empty { font-size: 11px; color: var(--text-faint); padding: 4px 0; }
        .kb-timeline-item { font-size: 12px; }
        .kb-timeline-comment { background: var(--panel); border-radius: 6px; padding: 6px 8px; }
        .kb-timeline-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-muted); margin-bottom: 2px; }
        .kb-timeline-meta b { color: var(--text-secondary); font-weight: 600; }
        .kb-timeline-del { margin-left: auto; background: none; border: none; color: var(--text-faint); cursor: pointer; display: inline-flex; padding: 1px; }
        .kb-timeline-del:hover { color: var(--danger); }
        .kb-timeline-text { color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
        .kb-timeline-activity { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 11px; }
        .kb-timeline-activity-text b { color: var(--text-muted); font-weight: 600; }
        .kb-timeline-activity-when { flex-shrink: 0; color: var(--text-faint); }
        .kb-card-comment-row { display: flex; gap: 6px; margin-top: 8px; }
        .kb-card-comment-input { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); padding: 6px 8px; font-size: 12px; font-family: inherit; box-sizing: border-box; }
        .kb-card-comment-input:focus { outline: none; border-color: var(--accent); }
        .kb-card-memo-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-faint); margin-top: 4px; cursor: pointer; user-select: none; }
        .kb-card-memo-badge:hover { color: var(--accent); }
        .kb-card-due-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-faint); margin-top: 4px; margin-right: 8px; }
        .kb-card-due-badge svg { width: 11px; height: 11px; }
        .kb-card-due-badge.due-today { color: var(--accent); }
        .kb-card-due-badge.due-overdue { color: var(--danger); }
        .kb-provisional-badge { display:inline-flex; align-items:center; margin-left:3px; padding:1px 4px; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius:4px; color:var(--accent); font-size:9px; font-weight:700; line-height:1.2; opacity:.82; vertical-align:middle; }
        .kb-provisional-badge[title] { cursor:help; }
        .kb-card-dday { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 6px; background: var(--border); color: var(--text-secondary); font-size: 10.5px; font-weight: 700; line-height: 1.2; }
        .kb-card-dday.due-today { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
        .kb-card-dday.due-overdue { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
        .kb-card-due-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
        .kb-card-due-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
        .kb-card-due-label svg { width: 12px; height: 12px; }
        .kb-card-due-input { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); padding: 4px 6px; font-size: 12px; font-family: inherit; color-scheme: var(--native-scheme); }
        .kb-card-due-input:focus { outline: none; border-color: var(--accent); }
        .kb-card-due-clear { background: none; border: none; color: var(--text-faint); cursor: pointer; display: inline-flex; align-items: center; padding: 2px; border-radius: 4px; }
        .tag-chip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600; color: #fff; white-space: nowrap; line-height: 1.6; }
        .kb-tag-editor { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; }
        .kb-tag-editor .tag-chip { gap: 4px; }
        .kb-tag-chip-x { background: none; border: none; color: rgba(255,255,255,0.85); cursor: pointer; display: inline-flex; padding: 0; margin: 0 -2px 0 2px; line-height: 1; }
        .kb-tag-chip-x svg { width: 9px; height: 9px; }
        .kb-tag-input { flex: 1; min-width: 80px; background: none; border: none; color: var(--text-secondary); font-size: 12px; font-family: inherit; padding: 2px 0; }
        .kb-tag-input:focus { outline: none; }
        .kb-card-due-clear:hover { background: var(--border); color: var(--text-secondary); }
        .kb-card-due-clear svg { width: 11px; height: 11px; }
        .kb-card-meta-select { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); padding: 4px 6px; font-size: 12px; font-family: inherit; max-width: 110px; }
        .kb-card-meta-select:focus { outline: none; border-color: var(--accent); }
        .kb-card-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
        .kb-card-tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
        .kb-card-assignee-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); }
        .kb-card-assignee-badge svg { width: 11px; height: 11px; }
        .kb-card-priority-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; }
        .kb-card-priority-badge svg { width: 11px; height: 11px; }
        .kb-card-recurrence-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #7a8699; }
        .kb-card-recurrence-badge svg { width: 11px; height: 11px; }

        /* 리스트 드래그 */
        .kb-list.dragging { opacity: 0.35; }
        .kb-list.list-drag-over { outline: 2px solid var(--accent); outline-offset: 2px; }
        /* 카드 완료 토글 */
        .kb-card-body { display: flex; gap: 8px; align-items: flex-start; }
        .kb-toggle-btn { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-faint); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-faint); transition: 0.15s; margin-top: 1px; padding: 0; }
        .kb-toggle-btn:hover { border-color: var(--success); }
        .kb-card-done .kb-toggle-btn { border-color: var(--success); color: var(--success); background: rgba(46,204,113,0.1); }
        .kb-card-done .kb-card-text { text-decoration: line-through; color: var(--text-faint); opacity: 0.6; }
        .kb-card-done { opacity: 0.75; }

        /* ══════════════════════════════════
           📁 파일함
        ══════════════════════════════════ */
        .files-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; margin-bottom: 4px; }
        .files-sort { display: flex; align-items: center; gap: 6px; }
        .files-sort-select { background: var(--panel); border: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; padding: 6px 10px; border-radius: 7px; font-family: inherit; cursor: pointer; }
        .files-sort-select:focus { outline: none; border-color: var(--accent); }
        .files-sort-dir { background: var(--panel); border: 1px solid var(--border); color: var(--text-secondary); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 13px; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
        .files-sort-dir:hover { background: var(--chip-hover); color: var(--text-primary); }
        .files-view-toggle { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; padding: 2px; }
        .files-view-btn { background: none; border: none; color: var(--text-muted); width: 28px; height: 26px; border-radius: 5px; cursor: pointer; font-size: 13px; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
        .files-view-btn:hover { color: var(--text-secondary); }
        .files-view-btn.active { background: var(--accent); color: var(--text-primary); }

        /* 목록 보기 (기본) */
        .files-list-view .files-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; background: var(--panel); transition: border-color 0.15s var(--ease); }
        .files-list-view .files-row:hover { border-color: var(--border-strong, rgba(255,255,255,0.2)); }
        .files-row-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .files-row-icon { flex-shrink: 0; display: inline-flex; }
        .files-row-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text-primary); }
        .files-row-meta { color: var(--text-faint); font-size: 12px; margin-left: 6px; }
        .files-row-actions { display: flex; gap: 2px; flex-shrink: 0; }

        /* 아이콘(그리드) 보기 */
        .files-grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
        .files-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 10px 12px; text-align: center; transition: border-color 0.15s var(--ease), transform 0.15s var(--ease); position: relative; }
        .files-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
        .files-tile-icon { margin-bottom: 8px; display: flex; justify-content: center; }
        .files-tile-icon svg { width: 30px; height: 30px; }
        .files-tile-name { font-size: 12.5px; color: var(--text-primary); word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
        .files-tile-meta { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }
        .files-tile-actions { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }

        /* ══════════════════════════════════
           📅 캘린더
        ══════════════════════════════════ */
        .cal-nav { display: flex; align-items: center; gap: 4px; }
        .cal-nav-btn { background: var(--panel); border: 1px solid var(--border); color: var(--text-secondary); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
        .cal-nav-btn:hover { background: var(--chip-hover); color: var(--text-primary); }
        .cal-nav-btn svg { width: 15px; height: 15px; }
        .cal-nav-label { font-size: 14px; font-weight: 600; color: var(--text-primary); min-width: 96px; text-align: center; white-space: nowrap; }
        /* 캘린더는 날짜 글자 양옆의 작은 화살표보다, < 오늘 >을 하나의 조작 묶음으로 둔다.
           간트의 기존 간결한 화살표는 이 범위 밖이라 그대로 유지된다. */
        .cal-calendar-nav { gap: 8px; }
        .cal-nav-controls { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
        .cal-calendar-nav .cal-nav-btn { width: 38px; height: 36px; background: transparent; border: none; border-radius: 6px; }
        .cal-calendar-nav .cal-nav-btn:hover { background: var(--chip-hover); }
        .cal-nav-today { min-width: 52px; height: 36px; padding: 0 10px; border: none; border-radius: 6px; background: var(--accent-dim); color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
        .cal-nav-today:hover { background: var(--accent); color: var(--text-primary); }
        .cal-nav-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .cal-calendar-nav .cal-nav-label { min-width: 0; text-align: left; }
        .cal-view-toggle { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; padding: 2px; }
        .cal-view-toggle button { padding: 5px 12px; border: none; background: none; color: var(--text-muted); font-size: 12.5px; font-weight: 600; border-radius: 5px; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
        .cal-view-toggle button.active { background: var(--accent-dim); color: var(--accent); }
        .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 20px; margin-bottom: 6px; }
        .cal-weekdays div { text-align: center; font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
        .cal-weekdays div.sunday { color: var(--cal-sunday); }
        .cal-weekdays div.saturday { color: var(--cal-saturday); }
        /* 캘린더 그리드: 주(week) 단위 행을 세로로 쌓은 구조. 각 주 행 안에 "범위 바 레인"(cal-week-bars,
           여러 날짜에 걸친 카드가 하나의 막대로 표시됨)과 "날짜 칸 그리드"(cal-week-days, 기존 구조 그대로)가
           위아래로 있음 — 7열 그리드 트랙이 서로 동일해서 바가 정확히 해당 날짜 칸들 위쪽에 정렬됨. */
        .cal-grid { display: flex; flex-direction: column; gap: 6px; }
        .cal-week-row { display: flex; flex-direction: column; gap: 3px; }
        .cal-week-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; grid-auto-rows: 17px; }
        .cal-week-bars:empty { display: none; }
        .cal-week-days { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(96px, auto); gap: 6px; }
        .cal-grid.week-mode .cal-week-days { grid-auto-rows: minmax(420px, 1fr); }
        .cal-grid.fourday-mode .cal-week-bars, .cal-grid.fourday-mode .cal-week-days, .cal-weekdays.fourday-mode { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .cal-grid.fourday-mode .cal-week-days { grid-auto-rows: minmax(250px, 1fr); }
        .cal-day { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px 6px 4px; display: flex; flex-direction: column; min-width: 0; }
        .cal-day.other-month { opacity: 0.35; }
        .cal-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
        .cal-day.sunday, .cal-day.holiday { background: rgba(224,96,122,0.07); }
        .cal-day.saturday { background: rgba(91,155,245,0.07); }
        .cal-day-num { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; flex-shrink: 0; display: flex; align-items: baseline; gap: 5px; }
        .cal-day.today .cal-day-num { color: var(--accent); }
        .cal-day.sunday .cal-day-num, .cal-day.holiday .cal-day-num { color: var(--cal-sunday); }
        .cal-day.saturday .cal-day-num { color: var(--cal-saturday); }
        .cal-day.today.sunday .cal-day-num, .cal-day.today.holiday .cal-day-num, .cal-day.today.saturday .cal-day-num { color: var(--accent); }
        .cal-holiday-name { font-size: 9.5px; font-weight: 500; color: var(--cal-sunday); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cal-day-cards { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
        /* 배경은 항상 카드/보드의 어두운 팔레트색이거나 진한 파랑 기본값이라 테마와 무관하게 밝은 글씨 고정 */
        .cal-card-chip { font-size: 10.5px; padding: 2px 6px; border-radius: 5px; color: #f3f4f9; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter 0.15s var(--ease); }
        .cal-card-chip svg { width: 9px; height: 9px; vertical-align: -1px; margin-right: 2px; opacity: 0.85; flex-shrink: 0; }
        .cal-card-chip:hover { filter: brightness(1.25); }
        .cal-card-chip.done { opacity: 0.5; text-decoration: line-through; }
        .cal-card-chip.overdue { outline: 1px solid var(--danger); }
        .cal-card-chip.dragging { opacity: 0.4; cursor: grabbing; }
        .cal-card-chip:focus-visible, .cal-range-bar:focus-visible, .cal-day-more:focus-visible, .cal-list-item:focus-visible,
        .kb-color-swatch:focus-visible, .kb-card-color-swatch:focus-visible, .mm-color-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .cal-range-bar { font-size: 10px; padding: 2px 8px; border-radius: 5px; color: #f3f4f9; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; transition: filter 0.15s var(--ease); }
        .cal-range-bar:hover { filter: brightness(1.25); }
        .cal-range-bar.done { opacity: 0.5; text-decoration: line-through; }
        .cal-range-bar.dragging { opacity: 0.4; cursor: grabbing; }
        .cal-day-more { font-size: 10px; color: var(--text-faint); padding: 1px 6px; cursor: pointer; }
        .cal-day-more:hover { color: var(--text-secondary); }
        .cal-day { cursor: pointer; transition: border-color 0.15s var(--ease); }
        .cal-day:hover { border-color: var(--border-strong, rgba(255,255,255,0.22)); }
        .cal-day.cal-drag-over { border-color: var(--accent); background: rgba(79,142,247,0.08); }
        .cal-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .cal-toolbar-right > * { flex-shrink: 0; }
        .cal-mobile-view-jump { display: none; }
        .cal-search-wrap { position: relative; display: flex; align-items: center; }
        .cal-search-icon { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--text-faint); pointer-events: none; }
        .cal-search-input { background: var(--panel); border: 1px solid var(--border); border-radius: 7px; color: var(--text-primary); font-size: 13px; padding: 7px 10px 7px 30px; width: 180px; font-family: inherit; transition: border-color 0.15s var(--ease), width 0.15s var(--ease); }
        .cal-search-input:focus { outline: none; border-color: var(--accent); width: 230px; }
        @media (max-width: 768px) {
            .cal-search-input { width: 120px; }
        }
        .cal-list-view { margin-top: 8px; }
        /* 4일 보기 아래의 주간 브리핑은 카드형 목록이 아니라, 특이 일정과 반복 일정을
           읽는 짧은 안내문이다. 같은 4일 보기라면 데스크톱과 모바일 모두에서 제공한다. */
        .cal-list-view[style*="display: block"] + .cal-weekly-briefing,
        .cal-weekly-briefing[hidden] { display: none !important; }
        .cal-weekly-briefing:not([hidden]) { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
        .cal-weekly-briefing-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
        .cal-weekly-briefing-heading h2 { font-size: 16px; font-weight: 650; color: var(--text-primary); }
        .cal-weekly-briefing-heading span { font-size: 12px; color: var(--text-faint); text-align: right; line-height: 1.35; }
        .cal-weekly-briefing-section + .cal-weekly-briefing-section { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
        .cal-weekly-briefing-section h3 { font-size: 12px; color: var(--text-muted); font-weight: 650; margin-bottom: 8px; }
        .cal-weekly-briefing-group + .cal-weekly-briefing-group { margin-top: 9px; }
        .cal-weekly-briefing-group { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; }
        .cal-weekly-briefing-group h4 { font-size: 12px; color: var(--accent); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cal-weekly-briefing-group p,
        .cal-weekly-briefing-empty { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
        .cal-weekly-briefing-item time { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
        .cal-weekly-briefing-dday { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; margin-left: 4px; padding: 0 4px; border-radius: 999px; background: var(--accent-dim); color: var(--accent); font-size: 10px; font-weight: 700; line-height: 1.45; font-variant-numeric: tabular-nums; }
        .cal-weekly-briefing-separator { color: var(--text-faint); }
        .cal-weekly-briefing-empty { color: var(--text-faint); }
        .cal-list-title { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
        .cal-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; cursor: pointer; background: var(--panel); transition: border-color 0.15s var(--ease); }
        .cal-list-item:hover { border-color: var(--accent); }
        .cal-move-hint { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
        .cal-list-item-date { font-size: 12px; color: var(--text-muted); min-width: 42px; flex-shrink: 0; }
        .cal-list-item-date.today { color: var(--accent); font-weight: 600; }
        .cal-list-item-date.overdue { color: var(--danger); font-weight: 600; }
        .cal-list-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .cal-list-item-content { flex: 1; font-size: 13.5px; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cal-list-item-content svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; opacity: 0.7; color: #7a8699; }
        .cal-list-item-content.done { color: var(--text-faint); text-decoration: line-through; }
        .cal-list-item-board { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }

        /* ══════════════════════════════════
           📊 작업 테이블
        ══════════════════════════════════ */
        .ct-toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
        .ct-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
        .ct-table { border-collapse: collapse; font-size: 13px; table-layout: fixed; }
        .ct-table thead th { position: relative; text-align: left; padding: 9px 16px 9px 12px; color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--panel); transition: color 0.15s var(--ease), background 0.1s var(--ease); }
        .ct-table thead th:hover { color: var(--text-primary); }
        .ct-table thead th.ct-th-dragging { opacity: 0.35; }
        .ct-table thead th.ct-th-drag-over { background: var(--accent-dim); box-shadow: inset 2px 0 0 var(--accent); }
        .ct-col-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
        .ct-col-resize-handle:hover, .ct-col-resize-handle.active { background: var(--accent); opacity: 0.5; }
        .ct-sort-arrow { font-size: 9px; color: var(--accent); margin-left: 2px; }
        .ct-table tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s var(--ease); }
        .ct-table tbody tr:last-child { border-bottom: none; }
        .ct-table tbody tr:hover { background: var(--panel); }
        .ct-table tbody td { padding: 9px 12px; color: var(--text-secondary); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ct-table tbody td.ct-content, .ct-table tbody td.ct-tags-cell { white-space: normal; overflow: visible; text-overflow: clip; }
        .ct-content.done { color: var(--text-faint); text-decoration: line-through; }
        .ct-content svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; opacity: 0.7; color: #7a8699; }
        .ct-check-btn { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-faint); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 11px; color: var(--text-faint); }
        .ct-check-btn:disabled { cursor: not-allowed; opacity: 0.4; }
        .ct-check-btn.done { border-color: var(--success); color: var(--success); background: rgba(62,207,142,0.1); }
        .ct-board-tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
        .ct-board-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .ct-due { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
        .ct-due.overdue { color: var(--danger); font-weight: 600; }
        .ct-due.today { color: var(--accent); font-weight: 600; }
        .ct-owner-cell { font-size: 11.5px; color: var(--text-muted); }
        .ct-priority-cell { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
        .ct-priority-cell svg { width: 11px; height: 11px; }
        .ct-assignee-cell { font-size: 12.5px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
        .ct-assignee-cell svg { width: 12px; height: 12px; color: var(--text-muted); }
        .ct-recurrence-cell { font-size: 12.5px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
        .ct-recurrence-cell svg { width: 11px; height: 11px; color: #7a8699; }
        .ct-workload { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
        .ct-workload-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; appearance: none; background: var(--panel); color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
        .ct-workload-item:hover { border-color: var(--border-strong, rgba(255,255,255,0.22)); }
        .ct-workload-item.active { border-color: var(--accent); background: var(--accent-dim); }
        .ct-workload-name { font-size: 13px; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: 4px; }
        .ct-workload-name svg { width: 13px; height: 13px; color: var(--text-muted); }
        .ct-workload-count { font-size: 12px; color: var(--text-muted); }
        .ct-workload-overdue { font-size: 11px; color: var(--danger); font-weight: 600; }
        .ct-pagination { min-height: 28px; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-muted); font-size: 12px; }
        .ct-pagination-controls { display: inline-flex; align-items: center; gap: 7px; }
        .ct-pagination .btn-sm:disabled { opacity: 0.45; cursor: default; }

        /* ── 간트 차트 ── */
        :root {
            --g-arrow-color: #5b9bf5;
            --g-bar-color: #1c2534;
            --g-bar-border: #2c4870;
            --g-tick-color-thick: rgba(255,255,255,0.14);
            --g-tick-color: rgba(255,255,255,0.06);
            --g-actions-background: var(--panel);
            --g-border-color: var(--border);
            --g-text-muted: var(--text-muted);
            --g-text-light: var(--text-primary);
            --g-text-dark: #e4e4e4;
            --g-progress-color: rgba(79,142,247,0.4);
            --g-handle-color: #cfcfcf;
            --g-weekend-label-color: rgba(255,255,255,0.03);
            --g-expected-progress: #5a5a5a;
            --g-header-background: var(--panel);
            --g-row-color: var(--bg);
            --g-row-border-color: var(--border);
            --g-today-highlight: var(--accent);
            --g-popup-actions: var(--panel);
            --g-weekend-highlight-color: rgba(255,255,255,0.02);
        }
        body.theme-light {
            --g-arrow-color: #1d5fd6;
            --g-bar-color: #cfe0fb;
            --g-bar-border: #7fa8e8;
            --g-tick-color-thick: rgba(0,0,0,0.14);
            --g-tick-color: rgba(0,0,0,0.06);
            --g-text-dark: #16233d;
            --g-progress-color: rgba(37,99,235,0.35);
            --g-handle-color: #6b7280;
            --g-weekend-label-color: rgba(0,0,0,0.03);
            --g-expected-progress: #9ca3af;
            --g-weekend-highlight-color: rgba(0,0,0,0.025);
            /* var(--bg) 등 app 변수를 :root에서만 참조하면 커스텀 프로퍼티 상속 특성상
               body.theme-light가 --bg를 바꿔도 :root에서 이미 계산된 값이 그대로 상속되어 버림
               (아래처럼 이 블록에서 다시 선언해야 라이트 값으로 재계산됨) */
            --g-actions-background: var(--panel);
            --g-border-color: var(--border);
            --g-text-muted: var(--text-muted);
            --g-text-light: var(--text-primary);
            --g-header-background: var(--panel);
            --g-row-color: var(--bg);
            --g-row-border-color: var(--border);
            --g-today-highlight: var(--accent);
            --g-popup-actions: var(--panel);
        }
        .gantt-view-modes { display: flex; gap: 4px; }
        .gantt-view-btn { padding: 6px 14px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel); color: var(--text-muted); font-size: 12.5px; cursor: pointer; font-weight: 600; }
        .gantt-view-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
        .gantt-header { gap: 10px; }
        .gantt-title-row, .gantt-view-jump, .gantt-toolbar { display: flex; align-items: center; }
        .gantt-title-row { gap: 8px; min-width: 0; }
        .gantt-view-jump { gap: 4px; }
        .gantt-toolbar { gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
        .gantt-view-jump .kb-topbar-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        #ganttChart { border: 1px solid var(--border); border-radius: 10px; overflow: auto; background: var(--panel); }
        .gantt-dep-panel { margin-top: 20px; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--panel); }
        .gantt-dep-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .gantt-dep-picker { display: grid; grid-template-columns: minmax(150px, 230px); gap: 4px; }
        .gantt-dep-picker label { color: var(--text-faint); font-size: 11.5px; }
        .gantt-dep-picker .files-sort-select, .gantt-dep-search { min-width: 0; width: 100%; }
        .gantt-dep-search { min-height: 31px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-primary); font: inherit; font-size: 12px; }
        .gantt-dep-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
        .gantt-dep-date-fields { margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
        .gantt-dep-date-hint { margin: 0 0 8px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
        .gantt-dep-date-rows { display: flex; flex-direction: column; gap: 7px; }
        .gantt-dep-date-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-secondary); font-size: 12.5px; }
        .gantt-dep-date-card { min-width: 120px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
        .gantt-dep-date-row label { display: inline-flex; align-items: center; gap: 5px; color: var(--text-faint); font-size: 11.5px; }
        .gantt-dep-date-row input { min-height: 32px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text-primary); font: inherit; }
        .gantt-dep-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
        .gantt-dep-entry { border-radius: 7px; background: var(--bg); overflow: hidden; }
        .gantt-dep-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); padding: 6px 10px; border-radius: 7px; background: var(--bg); }
        .gantt-dep-rule { margin-left: auto; color: var(--text-faint); font-size: 11.5px; white-space: nowrap; }
        .gantt-dep-item-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
        .gantt-dep-item-actions .kb-card-btn { margin: 0; }
        .gantt-dep-schedule { padding: 10px; border-top: 1px solid var(--border); background: var(--panel); }
        .gantt-dep-schedule-heading { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
        .gantt-dep-schedule-heading strong { font-size: 12.5px; color: var(--text-primary); }
        .gantt-dep-schedule-heading span, .gantt-dep-schedule-note { color: var(--text-faint); font-size: 11.5px; line-height: 1.45; }
        .gantt-dep-schedule-fields { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
        .gantt-dep-schedule-fields label, .gantt-dep-schedule-known-date { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--text-muted); font-size: 11.5px; }
        .gantt-dep-schedule-fields label > span { display: inline-flex; align-items: center; gap: 4px; }
        .gantt-dep-schedule-fields input { min-height: 32px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-primary); font: inherit; }
        .gantt-dep-schedule-fields input[type="number"] { width: 58px; }
        .gantt-dep-schedule-preview { min-height: 18px; margin: 9px 0 3px; color: var(--accent); font-size: 12px; line-height: 1.45; }
        .gantt-dep-schedule-note { margin: 0; }
        .gantt-dep-schedule-actions { display: flex; gap: 6px; margin-top: 9px; }

        /* ── 공개 랜딩 (app/landing.js) ──
           인트로(z:5000)와 로그인 모달(z:1000) 사이에 놓인다. 인트로가 끝나면 이 화면이 남고,
           여기서 '로그인'을 눌러야 모달이 드러난다. 인트로/로그인 로직은 건드리지 않는다.
           백엔드(Render 무료 플랜)는 슬립에서 깨는 데 30~60초가 걸리므로, 이 화면은 정적 자산만으로
           즉시 렌더링되어야 한다 — API 응답을 기다리는 요소를 여기에 두지 말 것. */
        .kklab-landing { display: none; }
        html[data-kklab-landing="1"] .kklab-landing { display: block; }
        .kklab-landing {
            position: fixed; inset: 0; z-index: 4000; overflow-y: auto;
            background: var(--bg); color: var(--text-primary);
            transition: opacity 0.35s var(--ease);
        }
        .kklab-landing.is-hiding { opacity: 0; pointer-events: none; }
        .lp-wrap { max-width: 1000px; margin: 0 auto; padding: 56px 24px 72px; }
        .lp-mark { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
        .lp-title { font-size: clamp(26px, 4.4vw, 40px); font-weight: 700; line-height: 1.28; margin: 14px 0 0; letter-spacing: -0.01em; }
        .lp-sub { font-size: clamp(14px, 1.7vw, 16px); line-height: 1.75; color: var(--text-secondary); margin: 16px 0 0; max-width: 62ch; }
        .lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
        .lp-btn { border: 1px solid var(--border); background: var(--panel); color: var(--text-primary);
                  padding: 12px 20px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer;
                  transition: border-color .15s, transform .1s; font-family: inherit; }
        .lp-btn:hover { border-color: var(--accent); }
        .lp-btn:active { transform: translateY(1px); }
        .lp-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
        .lp-btn[disabled] { opacity: .6; cursor: default; }
        .lp-note { font-size: 12.5px; color: var(--text-secondary); margin: 12px 0 0; min-height: 18px; }
        .lp-section { margin: 52px 0 0; }
        /* 운영 현황 — 서버에서 실시간으로 받은 값. 자리를 채우는 장식이 아니라 확인 가능한 사실이다. */
        .lp-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
        .lp-op { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
        .lp-op b { display: block; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; color: var(--text-primary); }
        .lp-op b.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; }
        .lp-op span { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }
        .lp-card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; padding: 1px 5px; border-radius: 4px; background: var(--border); }
        .lp-h2 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; margin: 0 0 18px; }
        .lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
        .lp-card { border: 1px solid var(--border); border-radius: 11px; background: var(--panel); padding: 16px; }
        .lp-card h3 { font-size: 14px; margin: 0 0 7px; font-weight: 650; }
        .lp-card p { font-size: 13px; line-height: 1.68; color: var(--text-secondary); margin: 0; }
        /* 화면 미리보기 — 이미지 파일 없이 CSS만으로 그린 축약형. 네트워크 없이 즉시 뜬다. */
        .lp-shot { border: 1px solid var(--border); border-radius: 11px; background: var(--panel); padding: 13px; overflow: hidden; }
        .lp-shot-label { font-size: 12px; font-weight: 650; margin: 0 0 10px; color: var(--text-secondary); }
        .lp-mini { display: flex; gap: 6px; height: 92px; }
        .lp-col { flex: 1; background: var(--bg-alt, rgba(127,127,127,.09)); border-radius: 6px; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
        .lp-chip { height: 13px; border-radius: 3px; background: var(--border); }
        .lp-chip.a { background: var(--accent); opacity: .75; }
        .lp-cal { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 20px; gap: 3px; height: 92px; }
        .lp-cell { background: var(--bg-alt, rgba(127,127,127,.09)); border-radius: 3px; }
        .lp-cell.on { background: var(--accent); opacity: .7; }
        .lp-bars { display: flex; flex-direction: column; gap: 7px; justify-content: center; height: 92px; }
        .lp-bar { height: 12px; border-radius: 6px; background: var(--accent); opacity: .72; }
        .lp-nodes { position: relative; height: 92px; }
        .lp-node { position: absolute; padding: 3px 8px; font-size: 10px; border-radius: 5px;
                   background: var(--bg-alt, rgba(127,127,127,.12)); border: 1px solid var(--border); white-space: nowrap; }
        .lp-line { position: absolute; height: 1.5px; background: var(--accent); opacity: .55; }
        .lp-foot { margin: 52px 0 0; padding-top: 22px; border-top: 1px solid var(--border);
                   display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12.5px; color: var(--text-secondary); }
        .lp-foot a { color: var(--accent); text-decoration: none; }
        .lp-foot a:hover { text-decoration: underline; }
        .lp-form { display: none; margin: 18px 0 0; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); padding: 18px; max-width: 460px; }
        .lp-form.show { display: block; }
        .lp-form label { display: block; font-size: 12px; color: var(--text-secondary); margin: 0 0 5px; }
        .lp-form input, .lp-form textarea {
            width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
            border: 1px solid var(--border); background: var(--bg); color: var(--text-primary);
            font-size: 13.5px; font-family: inherit; }
        .lp-form textarea { resize: vertical; min-height: 66px; }
        @media (max-width: 640px) { .lp-wrap { padding: 36px 18px 56px; } }

        /* ── 로그인 전 WebGL 리퀴드 인트로 (app/intro.js) ── */
        /* 기본은 숨김 — 페인트 전 인라인 스크립트가 html[data-kklab-intro="1"]을 동기적으로 붙여야만
           보이게 함(embed=1·이미 로그인·세션당 재생완료 중 하나라도 해당하면 아예 안 그려짐). */
        .kklab-intro { display: none; }
        html[data-kklab-intro="1"] .kklab-intro { display: flex; }
        .kklab-intro {
            position: fixed; inset: 0; z-index: 5000;
            flex-direction: column; align-items: center; justify-content: center;
            background: var(--bg); /* WebGL이 아예 못 뜨는 순간에도 항상 유효한 배경 */
            overflow: hidden;
            transition: opacity 0.5s var(--ease), filter 0.5s var(--ease);
        }
        .kklab-intro-exiting { opacity: 0; filter: blur(18px); pointer-events: none; }
        /* transform: translateZ(0) + will-change로 이 캔버스를 별도 GPU 합성 레이어로 강제 승격시킴 —
           일부 GPU/브라우저 조합(Apple Silicon Metal 백엔드 등)에서 캔버스 자체엔 정상적으로 그려지는데
           (readPixels로 직접 확인해도 값이 맞음) 최종 화면 합성 단계에서 반영이 안 되는 경우가 있어
           별도 레이어로 분리해 이 문제를 우회하기 위함. */
        .kklab-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: translateZ(0); will-change: transform; }
        .kklab-intro-word {
            position: relative; font-family: var(--font); font-weight: 650; letter-spacing: -0.02em;
            font-size: clamp(48px, 7vw, 96px); color: var(--text-primary); line-height: 1;
            text-shadow: 0 2px 40px rgba(0,0,0,0.35);
            opacity: 0; transform: translateY(6px);
            animation: kklab-intro-fade-up 0.8s var(--ease) 0.15s forwards;
        }
        body.theme-light .kklab-intro-word { text-shadow: 0 2px 30px rgba(255,255,255,0.6); }
        @keyframes kklab-intro-fade-up { to { opacity: 1; transform: translateY(0); } }
        .kklab-intro-hint {
            position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
            background: none; border: none; color: var(--text-faint); font-family: var(--font);
            font-size: 12.5px; cursor: pointer; padding: 8px 14px; border-radius: 8px;
            display: flex; align-items: center; gap: 6px;
            opacity: 0; animation: kklab-intro-fade-up 0.8s var(--ease) 0.6s forwards;
            transition: color 0.15s var(--ease);
        }
        .kklab-intro-hint:hover, .kklab-intro-hint:focus-visible { color: var(--text-secondary); }
        .kklab-intro-hint svg { width: 13px; height: 13px; animation: kklab-intro-chevron 1.6s ease-in-out infinite; }
        @keyframes kklab-intro-chevron { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
        @media (prefers-reduced-motion: reduce) {
            .kklab-intro-word, .kklab-intro-hint { animation: none; opacity: 1; transform: none; }
            .kklab-intro-hint svg { animation: none; }
        }
        /* 로그인 화면의 은은한 상시 배경(app/intro.js의 initLoginBackground) — 모달(z-index:1000)보다
           훨씬 아래라 낮은 값이면 충분하고, 모달 자체의 backdrop-filter: blur(6px) + 반투명 스크림을
           그대로 통과해서 은은하게 비치는 걸 노림(별도 흐림 처리 불필요). */
        .kklab-login-bg {
            position: fixed; inset: 0; z-index: 1;
            background: var(--bg);
            background-size: cover;
            background-position: center;
            overflow: hidden;
            pointer-events: none;
        }
        /* 캔버스 자체는 화면에 안 보여도 됨 — app/intro.js가 주기적으로 toDataURL() 스냅샷을 떠서
           .kklab-login-bg의 background-image로 보여주는 방식으로 바뀜(일부 GPU/브라우저 조합에서
           WebGL 캔버스를 직접 화면에 합성하는 경로가 신뢰할 수 없어서). opacity:0으로 안 보이게만 하고
           display:none은 안 씀 — clientWidth/clientHeight가 0이 되면 리사이즈 계산이 깨짐. */
        .kklab-login-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
        /* WebGL 컨텍스트 획득 실패 또는 prefers-reduced-motion일 때: 같은 팔레트의 정지 그라디언트로 대체.
           .kklab-intro와 .kklab-login-bg 둘 다 자기 자신의 background: var(--bg) 선언을 갖고 있고
           이 규칙과 클래스 선택자 우선순위가 완전히 같아서(단일 클래스, 0-1-0), 소스 순서가 늦은 쪽이
           이김 — 반드시 이 두 규칙보다 뒤에 와야 실제로 그라디언트가 보임(전에 앞에 있어서 로그인
           배경 쪽 background: var(--bg)에 덮여 안 보이는 버그가 있었음).
           color-mix()는 비교적 최근 CSS 기능(Chrome/Edge 111+, Safari 16.4+)이라 사내 고정 버전
           브라우저 등에서는 지원되지 않을 수 있고, 지원 안 되면 이 선언 전체가 무효화돼 background가
           그냥 --bg 단색으로 남아 그라디언트가 아예 안 보이는 문제가 있었음(WebGL도 막힌 환경이면
           이중으로 아무것도 안 보이게 됨) — background-color + rgba(var(--accent-rgb))로 대체해
           훨씬 오래된 브라우저에서도 항상 보이도록 함. */
        .kklab-intro-static {
            background-color: var(--bg);
            background-image: radial-gradient(ellipse at 50% 42%, rgba(var(--accent-rgb), 0.75) 0%, rgba(var(--accent-rgb), 0) 72%);
        }

  body.locked .header,body.locked .app-body,body.locked .kb-overlay{display:none!important}
  body.locked #modalOverlay{display:flex!important}
  #tabRegister{display:none!important}
  body.locked #modalCloseBtn{display:none!important}

        /* ── 작은 모바일 화면: 읽을 수 있는 일정·세로 칸반 ──
           월간 7열은 제목 영역을 키워도 iPhone 폭에서는 해결되지 않는다. 기본 4일 보기는 제목을
           2~3줄로 보여 주고, 일정/주/월 보기는 필요할 때만 사용자가 선택한다. 칸반은 가로 스크롤 대신
           리스트를 세로로 쌓아 보드의 양 끝이 화면 밖으로 밀리지 않게 한다. */
        @media (max-width: 480px) {
            /* iPhone에서는 패스키 등록·분할 보기를 실행할 맥락이 없고, 헤더의 로그인 조작이
               내용 폭을 밀어낸다. 로그인 상태 확인과 로그아웃만 남긴다. */
            .header { padding: 10px 12px; gap: 10px; }
            .header-right { margin-left: auto; gap: 0; }
            .header-right .user-info,
            #passkeySetupBtn,
            #splitViewBtn { display: none !important; }
            .header-right #loginBtn,
            .header-right #logoutBtn { padding: 7px 11px; font-size: 13px; }
            .cal-mobile-view-jump { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
            .cal-mobile-view-jump-btn { width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
            .cal-mobile-view-jump-btn:hover { background: var(--chip-hover); color: var(--text-primary); }
            .cal-mobile-view-jump-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
            .cal-mobile-view-jump-btn svg { width: 15px; height: 15px; }
            .cal-toolbar-right { width: 100%; gap: 8px; }
            .cal-search-wrap { flex: 1 1 132px; min-width: 0; }
            .cal-search-input, .cal-search-input:focus { width: 100%; }
            .cal-view-toggle button { padding: 5px 9px; }
            .cal-calendar-nav { flex: 1 0 100%; width: 100%; justify-content: space-between; }
            .cal-calendar-nav .cal-nav-label { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; text-align: right; font-size: 12px; }
            .cal-list-item { align-items: flex-start; gap: 8px; }
            .cal-list-item-date { min-width: 38px; padding-top: 1px; }
            .cal-list-item-content { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
            .cal-list-item-board { max-width: 72px; padding-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            /* 세로로 긴 날짜 칸 대신 아래의 주간 브리핑이 다음 3일 정보를 보완한다. */
            .cal-grid.fourday-mode .cal-week-days { grid-auto-rows: minmax(220px, auto); gap: 8px; }
            .cal-grid.fourday-mode .cal-week-bars { gap: 8px; grid-auto-rows: 36px; }
            .cal-grid.fourday-mode .cal-day { padding: 8px; }
            /* 4일 보기의 요일 행이 이미 '월 10'처럼 날짜를 표시한다. 셀 안의 '8월 10일'은
               모바일에서 중복이므로 숨겨 카드 제목에 더 많은 세로 공간을 준다. */
            .cal-grid.fourday-mode .cal-day-num { display: none; }
            .cal-grid.fourday-mode .cal-day-cards { gap: 5px; }
            .cal-grid.fourday-mode .cal-card-chip { font-size: 12px; padding: 4px 5px; white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
            .cal-grid.fourday-mode .cal-range-bar { font-size: 11px; padding: 3px 6px; white-space: normal; overflow: hidden; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
            .cal-weekly-briefing:not([hidden]) { margin-top: 16px; padding: 15px 2px 0; }
            .cal-weekly-briefing-heading { gap: 8px; }
            .cal-weekly-briefing-heading h2 { font-size: 15px; }
            .cal-weekly-briefing-heading span { font-size: 11px; }
            .cal-weekly-briefing-group { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }

            .gantt-header { align-items: stretch; flex-wrap: wrap; }
            .gantt-title-row { width: 100%; justify-content: space-between; }
            .gantt-view-jump .kb-topbar-icon-btn { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--panel); }
            .gantt-toolbar { width: 100%; justify-content: flex-start; }
            .gantt-toolbar .files-sort-select { min-width: 0; flex: 1 1 130px; }
            .gantt-dep-panel { padding: 12px; }
            .gantt-dep-picker { grid-template-columns: minmax(0, 1fr); width: 100%; }
            .gantt-dep-picker .files-sort-select, .gantt-dep-search { min-height: 38px; font-size: 16px; }
            .gantt-dep-date-row { align-items: flex-start; gap: 7px; }
            .gantt-dep-date-card { flex: 1 0 100%; max-width: none; }
            .gantt-dep-date-row label { flex: 1 1 130px; justify-content: space-between; font-size: 12px; }
            .gantt-dep-date-row input { min-height: 36px; font-size: 16px; }
            .gantt-dep-item { align-items: flex-start; flex-wrap: wrap; padding: 9px 10px; }
            .gantt-dep-rule { order: 3; width: calc(100% - 70px); margin-left: 0; white-space: normal; }
            .gantt-dep-item-actions { margin-left: auto; }
            .gantt-dep-schedule { padding: 11px 10px; }
            .gantt-dep-schedule-fields { flex-direction: column; align-items: stretch; }
            .gantt-dep-schedule-fields label, .gantt-dep-schedule-known-date { justify-content: space-between; min-height: 36px; font-size: 12px; }
            .gantt-dep-schedule-fields input { min-height: 36px; font-size: 16px; }
            .gantt-dep-schedule-fields input[type="number"] { width: 72px; }

            /* 상단의 보드 이름·전환·공유·화면 이동 버튼을 한 줄에서 압축하면 Safari가
               선택기의 폭을 거의 0으로 줄인다. 이름과 전환을 각각 한 줄로 우선 배치한다. */
            .kb-topbar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
            .kb-topbar-title { order: 1; flex: 1 0 100%; font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .kb-board-switcher { order: 2; flex: 1 0 100%; width: 100%; max-width: none; min-height: 36px; font-size: 15px; }
            #kbReadOnlyBanner { order: 3; flex: 1 0 100%; margin-left: 0 !important; }
            .kb-topbar-jump { order: 4; margin-left: auto; }
            .kb-topbar > .kb-topbar-btn { order: 4; flex-shrink: 0; white-space: nowrap; }

            /* 인라인 카드 편집은 모달이 아니어서 기존 iOS 16px 입력 보정이 적용되지 않았다.
               핵심 입력값을 13px→16px으로 키워 읽기와 터치 조작을 함께 개선한다. */
            .kb-card-edit-input { font-size: 16px; line-height: 1.55; min-height: 72px; padding: 9px 10px; }
            .kb-card-memo-input, .kb-card-comment-input, .kb-card-due-input, .kb-card-meta-select, .kb-tag-input { font-size: 16px; }
            .kb-card-memo-input, .kb-card-comment-input { padding: 8px 10px; }
            .kb-card-due-input, .kb-card-meta-select { padding: 7px 8px; min-height: 36px; }
            .kb-card-due-label, .kb-card-timeline-label { font-size: 14px; }
            .kb-card-due-label svg { width: 14px; height: 14px; }
            .kb-card-edit-actions .btn-sm, .kb-card-comment-row .btn-sm { padding: 8px 12px; font-size: 14px; }
            /* 세 작업 버튼을 카드 아래에 펼치면 내용보다 조작부가 더 커진다. iOS에서는 작은
               메뉴 진입점만 카드 위에 두고, 수정·보관·삭제는 떠 있는 메뉴 안에서 누른다. */
            .kb-card-text { padding-right: 38px; }
            .kb-card-footer { position: absolute; top: 5px; right: 5px; opacity: 1; visibility: visible; background: none; margin: 0; padding: 0; z-index: 4; }
            .kb-card-footer > .kb-card-desktop-action { display: none; }
            .kb-card-mobile-actions { display: block; position: relative; }
            .kb-card-action-trigger { width: 30px; height: 30px; min-width: 30px; padding: 0 0 4px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text-muted); cursor: pointer; font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1; }
            .kb-card-action-menu { position: absolute; top: 35px; right: 0; z-index: 5; display: none; min-width: 112px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 8px 18px rgba(0,0,0,0.22); }
            .kb-card.kb-card-actions-open .kb-card-action-menu { display: flex; flex-direction: column; }
            .kb-card-action-item { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 32px; padding: 6px 8px; border: 0; border-radius: 5px; background: none; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
            .kb-card-action-item:hover, .kb-card-action-item:focus-visible { background: var(--border); outline: none; }
            .kb-card-action-item svg { width: 14px; height: 14px; }
            .kb-card-action-item.del { color: var(--danger); }
            .kb-card-edit-wrap.show ~ .kb-card-footer,
            .kb-card:has(.kb-card-edit-wrap.show) .kb-card-footer { display: none; }
            .kb-card-dday { font-size: 12px; padding: 3px 7px; }
            .kb-card-edit-toolbar { gap: 8px; flex-wrap: nowrap; }
            .kb-card-edit-toolbar .kb-card-color-picker { gap: 4px; flex-wrap: nowrap; }
            .kb-card-edit-toolbar .kb-card-color-swatch { width: 18px; height: 18px; border-radius: 5px; }
            .kb-card-edit-toolbar .kb-card-edit-actions .btn-sm { min-height: 32px; padding: 6px 8px; font-size: 13px; }
            .kb-search-bar { padding: 10px 12px; }
            .kb-lists-wrap { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; overflow-x: hidden; overflow-y: auto; }
            .kb-list, .kb-add-list { width: 100%; flex: 0 0 auto; max-height: none; }
            .kb-cards { flex: none; overflow-y: visible; }
            /* 첫 리스트만 처음에 열고 나머지는 헤더만 둔다. 접힘은 표시 상태일 뿐 카드 순서나
               드래그 데이터는 그대로여서, 필요한 리스트를 탭 한 번으로 빠르게 펼칠 수 있다. */
            /* Notion처럼 제목 왼쪽의 꺾쇠가 접힘(›)·펼침(⌄)을 보여 준다. 삭제 ×는 반대편에
               남아 손가락으로 서로를 혼동하지 않는다. 내용은 언제나 아래로만 펼쳐진다. */
            .kb-list-disclosure { display: inline-flex; order: -1; width: 40px; height: 40px; min-width: 40px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-secondary); cursor: pointer; }
            .kb-list-disclosure span { font-size: 24px; font-family: Arial, sans-serif; font-weight: 400; line-height: 1; transition: transform 0.15s; transform: rotate(90deg); }
            .kb-list-collapsed .kb-list-disclosure span { transform: rotate(0deg); }
            .kb-list-collapsed .kb-list-header { border-bottom: 0; padding-bottom: 10px; }
            .kb-list-collapsed .kb-cards, .kb-list-collapsed .kb-add-card { display: none; }
            .kb-lists-wrap.kb-mobile-filter-active .kb-list-collapsed .kb-cards { display: flex; }
            /* 태그·검색 필터에서 카드가 0개인 리스트는 모바일 세로 흐름에서 결과를 아래로 밀기만 한다.
               클래스는 JS가 공통으로 붙이지만, 숨김은 작은 화면에서만 적용해 데스크톱의 컬럼 맥락은 유지한다. */
            .kb-lists-wrap.kb-mobile-filter-active .kb-list-filter-empty,
            .kb-lists-wrap.kb-mobile-filter-active #kbAddListArea { display: none; }
        }