/* ── Design Tokens ── */
        :root {
            /* Brand */
            --color-primary: #03C75A;
            --color-primary-hover: #02b350;
            --color-primary-light: #f0fff7;
            --color-primary-bg: #f0f9f5;

            /* Semantic */
            --color-error: #dc2626;
            --color-error-hover: #b91c1c;
            --color-error-bg: #fff1f2;
            --color-success: #03C75A;
            --color-success-bg: #ecfdf5;
            --color-warning: #f59e0b;
            --color-warning-bg: #fffbeb;

            /* Functional (chart/stat) */
            --color-blue: #4a90d9;
            --color-orange: #f59e0b;
            --color-teal: #0891b2;
            --color-indigo: #6366f1;
            --color-purple: #7c3aed;

            /* Text (5단계) */
            --text-primary: #222;
            --text-secondary: #555;
            --text-muted: #888;
            --text-hint: #767676;  /* WCAG AA 4.5:1 대비 충족 */
            --text-placeholder: #a3a3a3;  /* WCAG AA 3:1 (대형 텍스트/UI) */

            /* Background */
            --bg-page: #f0f2f5;
            --bg-card: #ffffff;
            --bg-subtle: #f8f9fa;
            --bg-input: #fafafa;
            --bg-hover: #f5f5f5;

            /* Border */
            --border-default: #e0e0e0;
            --border-light: #f0f0f0;
            --border-divider: #eee;

            /* Radius (5단계) */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-pill: 20px;

            /* Shadow (3단계) */
            --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
            --shadow-lg: 0 20px 60px rgba(0,0,0,0.2);

            /* Font Size (8단계) */
            --font-2xs: 10px;
            --font-xs: 11px;
            --font-sm: 12px;
            --font-base: 13px;
            --font-md: 14px;
            --font-lg: 16px;
            --font-xl: 20px;
            --font-2xl: 26px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; background: var(--bg-page); color: #333; min-height: 100vh; }

        .navbar { background: var(--color-primary); color: white; padding: 0 28px; height: 60px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(3,199,90,0.3); position: sticky; top: 0; z-index: 100; }
        .navbar-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
        .navbar-brand span { font-size: 22px; }
        .navbar-actions { display: flex; gap: 8px; }

        .breadcrumb { padding: 12px 28px; background: var(--bg-card); border-bottom: 1px solid var(--border-divider); display: flex; align-items: center; gap: 8px; font-size: var(--font-base); }
        .breadcrumb a { color: var(--color-primary); text-decoration: none; cursor: pointer; font-weight: 500; }
        .breadcrumb a:hover { text-decoration: underline; }
        .breadcrumb-sep { color: var(--text-placeholder); }
        .breadcrumb-current { color: var(--text-secondary); font-weight: 600; }

        .container { padding: 20px 28px; max-width: 1400px; margin: 0 auto; }

        .card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
        .card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }

        .btn { padding: 7px 14px; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-base); font-weight: 600; font-family: inherit; transition: all 0.15s; display: inline-flex; align-items: center; gap: 4px; }
        .btn-primary { background: var(--color-primary); color: white; }
        .btn-primary:hover { background: var(--color-primary-hover); box-shadow: 0 2px 8px rgba(3,199,90,0.3); }
        .btn-secondary { background: #f5f6f7; color: var(--text-secondary); border: 1px solid var(--border-default); }
        .btn-secondary:hover { background: #eaeaea; }
        .btn-danger { background: var(--color-error); color: white; }
        .btn-danger:hover { background: var(--color-error-hover); }
        .btn-white { background: white; color: var(--color-primary); border: 1px solid var(--color-primary); }
        .btn-white:hover { background: var(--color-primary-light); }
        .btn-sm { padding: 5px 10px; font-size: var(--font-sm); border-radius: var(--radius-md); }
        .btn-xs { padding: 3px 8px; font-size: var(--font-xs); border-radius: var(--radius-sm); }

        /* ── Stats + Date Filter Card ── */
        .stats-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 20px 24px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
        .stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
        .stat-item { background: var(--bg-input); border-radius: 10px; padding: 14px 12px; text-align: center; border: 1px solid var(--border-light); transition: border-color 0.15s; }
        .stat-item.green  { border-left: 3px solid var(--color-primary); }
        .stat-item.blue   { border-left: 3px solid var(--color-blue); }
        .stat-item.orange { border-left: 3px solid var(--color-orange); }
        .stat-item.teal   { border-left: 3px solid var(--color-teal); }
        .stat-item.indigo { border-left: 3px solid var(--color-indigo); }
        .stat-num { font-size: var(--font-2xl); font-weight: 800; line-height: 1; }
        .stat-item.green  .stat-num { color: var(--color-primary); }
        .stat-item.blue   .stat-num { color: var(--color-blue); }
        .stat-item.orange .stat-num { color: var(--color-orange); }
        .stat-item.teal   .stat-num { color: var(--color-teal); }
        .stat-item.indigo .stat-num { color: var(--color-indigo); }
        .stat-lbl { font-size: var(--font-xs); color: var(--text-muted); margin-top: 5px; font-weight: 600; letter-spacing: 0.3px; }
        .stat-desc { font-size: var(--font-2xs); color: var(--text-placeholder); margin-top: 2px; }

        /* ── Compact Date Filter ── */
        .date-filter { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--border-divider); flex-wrap: wrap; }
        .df-label { font-size: var(--font-xs); color: var(--text-hint); font-weight: 700; margin-right: 2px; }
        .df-preset { padding: 4px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; font-size: var(--font-sm); font-weight: 600; color: var(--text-secondary); background: white; transition: all 0.15s; }
        .df-preset:hover { border-color: var(--color-primary); color: var(--color-primary); }
        .df-preset.active { background: var(--color-primary); border-color: var(--color-primary); color: white; }
        .df-nav { padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-sm); font-weight: 700; color: var(--text-muted); background: white; transition: all 0.15s; }
        .df-nav:hover { background: var(--border-light); }
        .df-range-display { font-size: var(--font-sm); font-weight: 700; color: var(--text-secondary); padding: 4px 10px; background: var(--color-primary-bg); border-radius: var(--radius-pill); border: 1px solid #c8eedd; }
        .df-custom-inputs { display: flex; align-items: center; gap: 5px; }
        .df-custom-inputs input[type=date] { padding: 4px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--font-sm); color: var(--text-secondary); background: var(--bg-input); }
        .df-custom-inputs input[type=date]:focus { outline: none; border-color: var(--color-primary); }
        .df-sep { color: var(--text-hint); font-size: var(--font-sm); }

        /* ── Group tag filter ── */
        .grp-tag { padding: 4px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; font-size: var(--font-sm); font-weight: 600; color: var(--text-secondary); background: white; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
        .grp-tag:hover { border-color: var(--text-hint); background: var(--bg-subtle); }
        .grp-tag.active { background: var(--color-primary); border-color: var(--color-primary); color: white; }
        .grp-filter-row { display: flex; align-items: center; gap: 6px; padding: 8px 0 6px; flex-wrap: wrap; border-bottom: 1px dashed var(--border-light); margin-bottom: 10px; }
        /* ── Sortable th ── */
        .sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
        .sortable-th:hover { background: #f0f4ff; }
        .sort-icon { display: inline-block; margin-left: 4px; opacity: 0.4; font-size: var(--font-2xs); }
        .sort-icon.active { opacity: 1; color: var(--color-primary); }

        /* ── Table ── */
        .table-wrap { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; min-width: 500px; }
        th { text-align: left; padding: 9px 14px; background: var(--bg-subtle); border-bottom: 2px solid var(--border-divider); font-size: var(--font-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
        td { padding: 9px 14px; border-bottom: 1px solid var(--border-light); font-size: var(--font-base); vertical-align: middle; }
        tbody tr:last-child td { border-bottom: none; }
        tbody tr.clickable:hover { background: #f5fff9; cursor: pointer; }
        .cnt-cell { text-align: center; }
        .cnt-num { font-size: var(--font-lg); font-weight: 800; line-height: 1; }
        .cnt-num.orange { color: var(--color-orange); }
        .cnt-num.teal { color: var(--color-teal); }

        /* ── 계층 테이블 (그룹/카페/계정) ── */
        /* 그룹 헤더 */
        tr.row-group-hdr td {
            padding: 8px 14px 8px 0;
            border-top: 2px solid transparent; /* JS에서 group color로 덮음 */
            border-bottom: none;
            background: transparent;
        }
        tr.row-group-hdr + tr td { border-top: none; }

        /* 카페 행 */
        tr.row-cafe { cursor: pointer; }
        tr.row-cafe td {
            padding: 12px 14px;
            background: #f5faf8;
            border-bottom: 1px solid #e0ede6;
            border-top: 1px solid #e8f2ec;
        }
        tr.row-cafe:hover td { background: #eaf6f0; }
        /* 카페 좌측 컬러바 — JS에서 style 직접 설정 */
        tr.row-cafe td:first-child { border-left: 3px solid var(--color-primary); }

        /* 계정 행 */
        tr.row-acc td {
            padding: 8px 14px;
            background: var(--bg-card);
            border-bottom: 1px solid #f3f3f3;
        }
        tr.row-acc:hover td { background: #f5fff9; cursor: pointer; }
        /* 계정 첫 번째 셀 좌측 들여쓰기 + 라인 */
        tr.row-acc td:first-child {
            padding-left: 42px;
            border-left: 3px solid transparent;
            position: relative;
        }
        tr.row-acc td:first-child::before {
            content: '';
            position: absolute;
            left: 20px; top: 0; bottom: 0;
            width: 2px;
            background: #c8e6d8;
        }
        /* 노트 (특이사항 서브텍스트) */
        .acc-note { font-size: var(--font-xs); color: var(--text-hint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; display: block; }
        /* 숫자가 0일 때 흐리게 표시 */
        .cnt-num.zero { opacity: 0.3; }

        /* ── Form ── */
        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
        .form-group { display: flex; flex-direction: column; gap: 6px; }
        .form-group.full { grid-column: 1 / -1; }
        .form-group label { font-size: var(--font-sm); font-weight: 700; color: var(--text-secondary); }
        .form-group input, .form-group select, .form-group textarea {
            padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
            font-size: var(--font-md); font-family: inherit; background: var(--bg-input);
        }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none; border-color: var(--color-primary); background: var(--bg-card);
        }
        .form-group textarea { resize: vertical; min-height: 68px; }
        .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-light); }

        /* ── Modal ── */
        .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
        .modal-overlay.active { display: flex; }
        .modal { background: var(--bg-card); border-radius: var(--radius-xl); padding: 26px; width: 92%; max-width: 640px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: mIn 0.18s ease; }
        @keyframes mIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-title { font-size: var(--font-lg); font-weight: 700; color: var(--text-primary); }
        .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-hint); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
        .modal-close:hover { background: var(--border-light); color: var(--text-secondary); }

        /* ── Badges ── */
        .badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-pill); font-size: var(--font-xs); font-weight: 700; white-space: nowrap; }
        .badge-green  { background: var(--color-success-bg); color: #059669; }
        .badge-yellow { background: var(--color-warning-bg); color: #d97706; }
        .badge-red    { background: var(--color-error-bg); color: var(--color-error); }
        .badge-blue   { background: #eff6ff; color: #2563eb; }
        .badge-gray   { background: var(--border-light); color: var(--text-muted); }
        .badge-purple  { background: #f3e8ff; color: var(--color-purple); }
        .badge-orange  { background: #fff3e0; color: #e65100; }
        .badge-teal    { background: #e0f7fa; color: var(--color-teal); }
        .badge-darkred { background: #fce4ec; color: #b71c1c; }

        /* ── Info grid ── */
        .info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
        .info-grid > div { min-width: 0; }
        .info-grid-cafe { grid-template-columns: auto minmax(0, 1fr) auto; }
        .info-lbl { font-size: var(--font-2xs); color: var(--text-hint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
        .info-val { font-size: var(--font-md); color: var(--text-primary); font-weight: 500; }
        .info-val .link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

        /* ── Empty state ── */
        .empty-state { text-align: center; padding: 36px 24px; color: var(--text-placeholder); }
        .empty-icon { font-size: 36px; margin-bottom: 10px; }
        .empty-state p { font-size: var(--font-md); line-height: 1.6; }

        .link { color: var(--color-primary); text-decoration: none; font-weight: 500; }
        .link:hover { text-decoration: underline; }
        .truncate { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
        .inline-mgr-select { padding: 3px 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--font-sm); color: var(--text-secondary); background: var(--bg-input); cursor: pointer; max-width: 130px; }
        .inline-mgr-select:focus { outline: none; border-color: var(--color-primary); background: var(--bg-card); }
        .inline-mgr-select:hover { border-color: var(--color-primary); }
        .action-btns { display: flex; gap: 4px; align-items: center; }

        /* ── Join status custom dropdown ── */
        .join-drop-wrap { position: relative; display: inline-block; }
        .join-drop-trigger { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 3px; }
        .join-drop-trigger::after { content: '▾'; font-size: 9px; opacity: 0.6; }
        .join-drop-menu { display: none; position: fixed; z-index: 9999;
            background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md);
            box-shadow: var(--shadow-md); padding: 4px; min-width: 130px; }
        .join-drop-menu.open { display: block; }
        .join-drop-item { display: flex; align-items: center; padding: 5px 8px; border-radius: var(--radius-md);
            cursor: pointer; font-size: var(--font-sm); font-weight: 600; white-space: nowrap; }
        .join-drop-item:hover { background: var(--bg-hover); }

        /* ── Daily entries (table) ── */

        /* ── Account lookup ── */
        .acc-search-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
        .acc-search-input { flex: 1; min-width: 180px; padding: 8px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--font-md); background: var(--bg-input); }
        .acc-search-input:focus { outline: none; border-color: var(--color-primary); background: var(--bg-card); }
        .acc-filter-select { padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--font-base); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; }
        .acc-filter-select:focus { outline: none; border-color: var(--color-primary); }
        .acc-result-count { font-size: var(--font-sm); color: var(--text-hint); font-weight: 600; margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
        .acc-result-count span { display: block; white-space: nowrap; }
        .highlight { background: #fff3b0; border-radius: 2px; padding: 0 1px; }
        .pagination { display: flex; align-items: center; gap: 4px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
        .pg-btn { padding: 4px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: white; font-size: var(--font-sm); font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
        .pg-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
        .pg-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: white; }
        .pg-btn:disabled { opacity: 0.3; cursor: default; }
        .pg-info { font-size: var(--font-sm); color: var(--text-hint); padding: 0 6px; }
        /* ── Week nav (inside account/cafe detail) ── */
        .mini-week-nav { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-subtle); border-radius: var(--radius-md); padding: 5px 10px; border: 1px solid var(--border-divider); }
        .mwn-btn { background: none; border: none; cursor: pointer; font-size: var(--font-sm); color: var(--text-muted); padding: 1px 5px; border-radius: var(--radius-sm); font-weight: 700; }
        .mwn-btn:hover { background: var(--border-divider); }
        .mwn-label { font-size: var(--font-sm); font-weight: 700; color: var(--text-secondary); min-width: 96px; text-align: center; }
        .mwn-today { font-size: var(--font-2xs); color: var(--color-primary); font-weight: 700; cursor: pointer; padding: 1px 5px; border-radius: var(--radius-sm); }
        .mwn-today:hover { background: #e6f9f0; }

        /* ── Account pool add modal ── */
        .pool-item-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.1s; border-left: 3px solid transparent; }
        .pool-item-row:last-child { border-bottom: none; }
        .pool-item-row:hover { background: #f8f8f8; }
        .pool-item-row input[type=radio] { width: 14px; height: 14px; accent-color: var(--color-primary); flex-shrink: 0; }
        /* checkbox → 원형 디자인 */
        .pool-item-row input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 2px solid #ccc; border-radius: 50%; flex-shrink: 0; cursor: pointer; position: relative; transition: border-color 0.15s, background 0.15s; }
        .pool-item-row input[type=checkbox]:checked { border-color: var(--color-primary); background: var(--color-primary); }
        .pool-item-row input[type=checkbox]:checked::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
        .pool-item-id { font-size: 13px; font-weight: 600; color: #333; }
        .pool-item-memo { font-size: 11px; color: #aaa; margin-left: auto; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* ── Login ── */
        .login-wrap { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; }
        .login-card { background: var(--bg-card); border-radius: var(--radius-xl); padding: 40px 36px; width: 380px; box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
        .login-logo { text-align: center; margin-bottom: 28px; }
        .login-logo .logo-icon { font-size: 48px; display: block; margin-bottom: 10px; }
        .login-logo h1 { font-size: var(--font-xl); font-weight: 800; color: var(--text-primary); }
        .login-logo p { font-size: var(--font-base); color: var(--text-hint); margin-top: 4px; }
        .login-btn { width: 100%; padding: 12px; background: var(--color-primary); color: white; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 20px; transition: background 0.15s; }
        .login-btn:hover { background: var(--color-primary-hover); }
        .login-error { color: var(--color-error); font-size: var(--font-base); text-align: center; margin-top: 10px; min-height: 18px; }

        /* ── 접속 환경 표시 ── */
        .login-env { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border-divider); text-align: center; }
        .login-env-header { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--font-xs); color: var(--text-hint); font-weight: 600; }
        .login-env-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); display: inline-block; animation: envPulse 1.5s ease-in-out infinite; }
        .login-env-detail { font-size: var(--font-2xs); color: var(--text-placeholder); margin-top: 6px; letter-spacing: 0.3px; font-variant-numeric: tabular-nums; }
        @keyframes envPulse {
            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(3,199,90,0.4); }
            50% { opacity: 0.4; box-shadow: 0 0 6px 2px rgba(3,199,90,0.3); }
        }

        /* ── Section labels (이번 범위 / 다른 기간) ── */
        .section-lbl { font-size: var(--font-xs); font-weight: 700; margin-bottom: 8px; }
        .section-lbl.current { color: var(--text-hint); }
        .section-lbl.other   { color: var(--text-placeholder); }

        /* ── Role group headers (Settings) ── */
        .role-group-hdr { font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
        .role-group-hdr.admin   { color: var(--color-purple); }
        .role-group-hdr.manager { color: #1a73e8; }

        /* ── 감사 로그 ── */
        .audit-table { width:100%; border-collapse:collapse; font-size:12px; }
        .audit-table th { background:var(--bg-subtle); padding:7px 10px; text-align:left; font-weight:700; color:var(--text-muted); font-size:var(--font-xs); border-bottom:2px solid var(--border-divider); white-space:nowrap; }
        .audit-table td { padding:7px 10px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
        .audit-table tr:last-child td { border-bottom:none; }
        .audit-table tr:hover td { background:#fafafa; }
        .audit-role-admin { display:inline-block; background:#ede9fe; color:#6d28d9; border-radius:4px; padding:1px 6px; font-size:10px; font-weight:700; }
        .audit-role-mgr   { display:inline-block; background:#e0f2fe; color:#0369a1; border-radius:4px; padding:1px 6px; font-size:10px; font-weight:700; }
        .audit-action-del { color:var(--color-error); font-weight:600; }
        .audit-action-add { color:#16a34a; font-weight:600; }
        .audit-action-edit { color:#2563eb; font-weight:600; }
        .audit-detail { font-size:var(--font-xs); color:var(--text-muted); margin-top:2px; }

        /* ── 데이터 관리 카드 ── */
        .dm-section { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #f0f0f0; }
        .dm-section:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
        .dm-section-label { font-size:var(--font-xs); font-weight:700; color:var(--text-hint); letter-spacing:0.6px; text-transform:uppercase; margin-bottom:10px; }
        .dm-storage-wrap { background:#f7f8fa; border-radius:8px; padding:10px 12px; margin-bottom:12px; font-size:12px; color:#666; }
        .dm-storage-bar { height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; margin:5px 0; }
        .dm-storage-fill { height:100%; border-radius:3px; transition:width 0.4s; }
        .dm-danger-box { border:1.5px solid #fca5a5; border-radius:10px; padding:12px 14px; background:#fff8f8; }
        .dm-danger-toggle { background:none; border:none; color:var(--color-error); font-weight:700; font-size:var(--font-base); cursor:pointer; padding:0; display:flex; align-items:center; gap:6px; width:100%; text-align:left; }
        .dm-danger-body { margin-top:12px; }

        /* ── 카페 운영 메모 카드 ── */
        .cafe-memo-card { background:#f8fffe; border:1px solid #d1fae5; border-radius:10px; padding:16px 18px; margin-bottom:16px; }
        .cafe-memo-card .cm-section { margin-bottom:12px; }
        .cafe-memo-card .cm-section:last-child { margin-bottom:0; }
        .cafe-memo-lbl { font-size:11px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px; }
        .cafe-memo-val { font-size:13px; color:#333; white-space:pre-wrap; line-height:1.6; }
        .cafe-memo-warn { background:#fff7ed; border:1px solid #fed7aa; border-radius:7px; padding:10px 14px; font-size:13px; color:#92400e; white-space:pre-wrap; line-height:1.6; }
        .cm-tag { display:inline-block; background:#fee2e2; color:#991b1b; border-radius:4px; padding:1px 7px; font-size:11px; font-weight:600; margin:2px 2px 2px 0; }
        .cm-style-badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:600; }
        .cm-style-strict  { background:#fee2e2; color:#991b1b; }
        .cm-style-normal  { background:#e0f2fe; color:#0369a1; }
        .cm-style-free    { background:#dcfce7; color:#166534; }
        .cm-style-unknown { background:#f3f4f6; color:#6b7280; }
        .warn-badge { display:inline-flex; align-items:center; gap:3px; background:#fff7ed; border:1px solid #fed7aa; color:#b45309; border-radius:4px; padding:1px 6px; font-size:11px; font-weight:700; cursor:pointer; }

        /* ── 담당자 성과 리포트 ── */
        .report-period-tabs { display:flex; gap:6px; margin-bottom:16px; }
        .report-tab { padding:5px 14px; border-radius:var(--radius-pill); font-size:var(--font-sm); font-weight:700; cursor:pointer; border:1.5px solid var(--border-default); background:white; color:var(--text-muted); transition:all 0.15s; }
        .report-tab.active { background:var(--color-primary); color:white; border-color:var(--color-primary); }
        .report-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
        .report-card { border:1px solid #e8e8e8; border-radius:10px; padding:14px 16px; background:white; }
        .report-card-name { font-size:var(--font-md); font-weight:700; color:var(--text-primary); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
        .report-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid #f3f4f6; font-size:12px; }
        .report-row:last-child { border-bottom:none; }
        .report-row .label { color:var(--text-muted); }
        .report-row .val { font-weight:700; color:var(--text-primary); }
        .report-row .val.orange { color:var(--color-orange); }
        .report-row .val.teal { color:var(--color-teal); }
        .report-row .val.green { color:var(--color-primary); }
        .report-row .val.indigo { color:var(--color-indigo); }
        .report-total-row { margin-top:8px; padding-top:8px; border-top:2px solid #e8e8e8; display:flex; justify-content:space-between; font-size:13px; font-weight:700; }
        .report-rank { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:11px; font-weight:700; background:#f3f4f6; color:#888; flex-shrink:0; }
        .report-rank.r1 { background:#ffd700; color:#7c5300; }
        .report-rank.r2 { background:#c0c0c0; color:#444; }
        .report-rank.r3 { background:#cd7f32; color:#fff; }
        /* 네비 리포트 버튼 */
        .nav-report-btn { background:rgba(255,255,255,0.18); color:white; border:1.5px solid rgba(255,255,255,0.5); padding:5px 13px; border-radius:var(--radius-pill); font-size:var(--font-sm); font-weight:700; cursor:pointer; transition:all 0.15s; }
        .nav-report-btn:hover, .nav-report-btn.active { background:white; color:var(--color-primary); border-color:white; }
        /* 메인 미니 위젯 */
        .mini-report-widget { background:white; border:1px solid #e8e8e8; border-radius:12px; margin-bottom:14px; overflow:hidden; }
        .mrw-header { display:flex; align-items:center; justify-content:space-between; padding:11px 20px; cursor:pointer; user-select:none; gap:10px; }
        .mrw-header:hover { background:#fafafa; }
        .mrw-title { font-size:var(--font-base); font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
        .mrw-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
        .mrw-chip { font-size:12px; color:#555; background:#f5f5f5; border-radius:20px; padding:2px 9px; }
        .mrw-chip.top1 { background:#fff8e1; color:#92400e; font-weight:700; }
        .mrw-body { border-top:1px solid #f0f0f0; padding:12px 24px 14px; overflow:hidden; }
        .mrw-rank-list { display:flex; flex-direction:column; gap:7px; }
        .mrw-rank-row { display:grid; grid-template-columns:22px minmax(50px,130px) 1fr auto auto; gap:8px; align-items:center; }
        .mrw-rank-num { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:#f3f4f6; color:#888; }
        .mrw-rank-num.r1 { background:#ffd700; color:#7c5300; }
        .mrw-rank-num.r2 { background:#c0c0c0; color:#444; }
        .mrw-rank-num.r3 { background:#cd7f32; color:#fff; }
        .mrw-rank-name { font-size:13px; font-weight:600; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
        .mrw-bar-wrap { background:#f3f4f6; border-radius:4px; height:8px; overflow:hidden; min-width:0; }
        .mrw-bar { height:8px; border-radius:var(--radius-sm); background:var(--color-primary); transition:width 0.3s; }
        .mrw-rank-val { font-size:var(--font-sm); font-weight:700; color:var(--color-primary); white-space:nowrap; text-align:right; }
        .mrw-rank-detail { font-size:12px; color:#666; white-space:nowrap; text-align:right; font-weight:500; letter-spacing:0.3px; }
        .mrw-toggle-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:1.5px solid #e0e0e0; background:white; color:#aaa; font-size:11px; cursor:pointer; flex-shrink:0; transition:all 0.15s; user-select:none; }
        .mrw-toggle-btn:hover { border-color:#bbb; color:#555; background:#f5f5f5; }
        .report-chart-controls { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
        .chart-type-btn { padding:5px 13px; border-radius:20px; border:1.5px solid #e0e0e0; background:white; font-size:12px; font-weight:600; cursor:pointer; color:#666; transition:all 0.15s; }
        .chart-type-btn:hover { border-color:#bbb; }
        .chart-type-btn.active { background:#4f46e5; border-color:#4f46e5; color:white; }
        .chart-admin-btn { padding:5px 13px; border-radius:20px; border:1.5px solid #e0e0e0; background:white; font-size:12px; font-weight:600; cursor:pointer; color:#666; transition:all 0.15s; margin-left:auto; }
        .chart-admin-btn.on { background:#ede9fe; border-color:#9f7aea; color:#6d28d9; }
        .report-chart-wrap { background:#fafafa; border:1px solid #f0f0f0; border-radius:10px; padding:14px 16px 8px; margin-bottom:16px; }

        /* ── 계정 활동 상태 태그 ── */
        .activity-tag { display:inline-flex; align-items:center; gap:3px; border-radius:4px; padding:1px 6px; font-size:10px; font-weight:700; white-space:nowrap; }
        .activity-tag.active   { background:#dcfce7; color:#166534; }
        .activity-tag.warning  { background:#fff7ed; color:#b45309; }
        .activity-tag.inactive { background:#fee2e2; color:#991b1b; }
        .activity-tag.longterm { background:#1f2937; color:#f9fafb; }
        .activity-tag.none     { background:#f3f4f6; color:#9ca3af; }

        /* ── Navbar user info ── */
        .navbar-user { display: flex; align-items: center; gap: 8px; }
        .user-chip { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.18); padding: 4px 12px; border-radius: 20px; font-size: 13px; }
        .user-chip .role-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.85; }
        .user-chip .role-dot.admin { background: #ffd700; }
        .user-chip .nickname { font-weight: 700; color: white; }
        .user-chip .role-lbl { font-size: 11px; color: rgba(255,255,255,0.75); }

        /* ── Utility Classes ── */
        .text-center { text-align: center; }
        .text-hint { color: var(--text-hint); font-weight: 400; font-size: var(--font-xs); }
        .text-muted { color: var(--text-muted); }
        .text-error { color: var(--color-error); }
        .text-success { color: var(--color-primary); }
        .flex-row { display: flex; align-items: center; gap: 8px; }
        .flex-row-tight { display: flex; align-items: center; gap: 4px; }
        .flex-wrap { flex-wrap: wrap; }
        .col-full { grid-column: 1 / -1; }
        .section-divider { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-divider); }
        .code-tag { font-size: var(--font-sm); background: var(--bg-hover); padding: 2px 6px; border-radius: var(--radius-sm); font-family: inherit; }
        .empty-inline { text-align: center; padding: 18px; color: var(--text-hint); font-size: var(--font-base); }
        .empty-inline-sm { text-align: center; padding: 14px; color: var(--text-placeholder); font-size: var(--font-sm); }