/* admin.css — 관리자 콘솔(AdminLayout·AdminPage·Sections/*). 원본 AdminPage.tsx의 inline style을 adm-* 클래스로 옮겼다. 표·카드·탭 기본은 app.css. */
.adm-flash { margin: 0 0 16px; }
.adm-inline { display: inline-flex; }
.adm-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adm-stack { display: flex; flex-direction: column; gap: 14px; }
.adm-sub-text { font-size: 11.5px; color: var(--ink-4); }
.adm-hint { font-size: 11.5px; color: var(--ink-4); margin-top: 6px; line-height: 1.5; }
.adm-hint-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.adm-hint-row svg { flex-shrink: 0; margin-top: 1px; }
.adm-empty { padding: 60px 20px; text-align: center; color: var(--ink-4); font-size: 13px; }
.adm-empty.small { padding: 24px 22px; text-align: left; font-size: 12.5px; }
.adm-center { display: grid; place-items: center; gap: 10px; padding: 48px; color: var(--ink-4); text-align: center; font-size: 12.5px; }
.adm-icon-24 { width: 24px; height: 24px; }
.adm-icon-26 { width: 26px; height: 26px; }
.adm-icon-28 { width: 28px; height: 28px; }
.icon-btn.danger { color: var(--danger); }
.adm-pill-10 { font-size: 10px; }
.adm-row-acts { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.adm-order-btn { width: 22px; height: 22px; color: var(--ink-4); }
.adm-note { padding: 12px; background: var(--surface-2); border-radius: 10px; font-size: 12px; color: var(--ink-3); line-height: 1.55; display: flex; gap: 10px; align-items: flex-start; }
.adm-note.between { justify-content: space-between; align-items: center; }
.adm-note.between .num { color: var(--ink); font-weight: 550; }
.adm-note.warn { background: color-mix(in oklch, var(--warn) 8%, var(--surface)); border: 1px solid color-mix(in oklch, var(--warn) 25%, var(--line)); color: var(--ink-2); font-size: 11.5px; margin-top: 14px; }
.adm-note.warn svg { color: var(--warn); flex-shrink: 0; margin-top: 1px; }
.adm-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.adm-swatch.lg { width: 12px; height: 12px; border-radius: 4px; }
.adm-h2 { font-size: 15px; font-weight: 650; letter-spacing: -.015em; margin: 0; }
.adm-card-h2 { font-size: 18px; font-weight: 600; letter-spacing: -.018em; margin-top: 4px; }
.adm-mono-label { font-size: 10.5px; color: var(--ink-4); letter-spacing: .1em; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
.adm-section-kicker { font-size: 11px; color: var(--ink-4); letter-spacing: .1em; margin-bottom: 12px; font-weight: 600; }

/* 사이드바 나가기 */
.adm-exit { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ink); color: var(--bg); border-radius: 10px; text-decoration: none; transition: background .15s; }
.adm-exit:hover { background: var(--ink-2); }
.adm-exit-icon { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.adm-exit-text { flex: 1; min-width: 0; }
.adm-exit-title { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.adm-exit-sub { font-size: 10.5px; opacity: .65; margin-top: 1px; }
.shell.compact .adm-exit-text, .shell.compact .adm-exit > svg { display: none; }

/* 통계 카드·큰 숫자 */
.adm-stat-grid { gap: 14px; }
.adm-stat { text-decoration: none; color: inherit; transition: transform .2s; display: block; }
a.adm-stat:hover { transform: translateY(-2px); }
.adm-stat-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.adm-stat-value { font-size: 36px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.adm-stat-delta { font-size: 11.5px; font-weight: 550; white-space: nowrap; color: var(--ink-4); }
.adm-stat-delta.ok { color: var(--ok); } .adm-stat-delta.warn { color: var(--warn); } .adm-stat-delta.accent { color: var(--accent); }
.adm-big-row { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.adm-big { font-size: 30px; font-weight: 500; letter-spacing: -.025em; line-height: 1; }
.adm-big.md { font-size: 28px; } .adm-big.sm { font-size: 26px; }
.adm-big-unit { font-size: 13px; color: var(--ink-4); }
.adm-bar-track { height: 5px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.adm-bar-track > div { height: 100%; background: var(--ink); transition: width .3s; }

/* 개요 */
.adm-split { gap: 20px; margin-top: 24px; }
.adm-trend { display: flex; flex-direction: column; }
.adm-trend-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.adm-trend-total { font-size: 32px; font-weight: 600; letter-spacing: -.025em; margin-top: 4px; }
.adm-trend-total span { font-size: 14px; color: var(--ink-4); font-weight: 500; }
.adm-trend-empty { flex: 1; min-height: 140px; display: grid; place-items: center; gap: 8px; text-align: center; color: var(--ink-4); border: 1px dashed var(--line); border-radius: 10px; font-size: 12.5px; }
.adm-bars { display: flex; align-items: flex-end; gap: 6px; flex: 1; min-height: 140px; }
.adm-bar { flex: 1; background: var(--accent); border-radius: 4px; min-height: 2px; }
.adm-trend-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--ink-4); }
.adm-trend-axis .accent { color: var(--accent); }
.adm-logs-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.adm-logs-head { padding: 22px 22px 14px; display: flex; justify-content: space-between; align-items: baseline; }
.adm-logs-title { font-size: 15px; font-weight: 600; }
.adm-logs-list { flex: 1; overflow-y: auto; }
.adm-log-row { display: flex; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); align-items: flex-start; }
.adm-log-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); margin-top: 8px; flex-shrink: 0; }
.adm-log-body { flex: 1; min-width: 0; }
.adm-log-line { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.adm-log-line b { font-weight: 600; } .adm-log-line span { color: var(--ink-3); }
.adm-log-target { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; }
.adm-log-time { font-size: 11px; color: var(--ink-5); margin-top: 3px; }

/* 세그먼트(원본 inline 버튼 그룹) */
.adm-seg { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border-radius: 8px; }
.adm-seg.fill { border-radius: 10px; }
.adm-seg-item { flex: 1; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-4); font-size: 12.5px; font-weight: 550; text-align: center; text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; }
.adm-seg-item.on, .adm-seg-item:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.adm-seg-item.big { padding: 10px 12px; border-radius: 7px; text-align: left; justify-content: flex-start; }
.adm-seg-item.big > div { flex: 1; min-width: 0; }
.adm-seg-title { font-size: 12.5px; font-weight: 600; }
.adm-seg-desc { font-size: 10.5px; opacity: .7; margin-top: 1px; }
.adm-preset-custom { margin-top: 8px; }

/* 초대 코드 */
.adm-grid-codes { grid-template-columns: 2fr 1.4fr 1.4fr 1fr 1.4fr 140px; }
.adm-code-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-code { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.adm-ext-badge { width: 22px; height: 22px; border-radius: 6px; background: color-mix(in oklch, var(--warn) 14%, transparent); color: var(--warn); display: grid; place-items: center; flex-shrink: 0; }
.adm-usage { display: flex; align-items: center; gap: 8px; }
.adm-usage-text { font-size: 12.5px; font-weight: 550; }
.adm-usage-bar { width: 60px; height: 4px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.adm-usage-bar > div { height: 100%; background: var(--ink); }
.adm-usage-bar > div.full { background: var(--ink-4); }
.adm-creator { display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
.adm-kind-wrap { padding: 0 24px 16px; border-bottom: 1px solid var(--line); }
.adm-code-preview { background: var(--ink); color: #fff; padding: 18px; border-radius: 12px; margin-bottom: 22px; text-align: center; }
.adm-code-preview.external { background: linear-gradient(135deg, #D97706, #B45309); }
.adm-code-preview-kicker { font-size: 10px; opacity: .65; letter-spacing: .14em; }
.adm-code-preview-code { font-size: 26px; font-weight: 600; letter-spacing: .05em; margin-top: 6px; }

/* 가입 승인 */
.adm-done { text-align: center; padding: 80px 20px; color: var(--ink-4); }
.adm-done-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--surface-2); display: inline-grid; place-items: center; margin-bottom: 16px; }
.adm-done-title { font-size: 16px; color: var(--ink-2); font-weight: 500; }
.adm-done-sub { font-size: 13px; margin-top: 6px; }
.adm-pending-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 14px; }
.adm-pending-card { padding: 22px; }
.adm-pending-head { display: flex; gap: 14px; }
.adm-pending-text { flex: 1; min-width: 0; }
.adm-pending-name { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.adm-pending-card .adm-note { margin-top: 16px; }
.adm-pending-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }

/* 멤버 */
.adm-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.adm-search { flex: 1 1 220px; max-width: 320px; margin: 0; }
.adm-filter-form { display: flex; gap: 10px; align-items: center; flex: 1; flex-wrap: wrap; }
.adm-member-select { max-width: 180px; }
.adm-subfilter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -4px 0 16px; }
.adm-grid-members { grid-template-columns: 1.7fr 1.4fr 0.8fr 0.9fr 0.9fr 0.9fr 1fr 44px; }
.adm-table-members { overflow: visible; }
.adm-member-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-member-cell.sm { gap: 8px; }
.adm-activity { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.adm-menu-cell { display: flex; justify-content: flex-end; position: relative; }
.table-row.menu-open { background: var(--surface-2); }
.adm-member-menu { position: absolute; top: 34px; right: 0; width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 60; padding: 6px; animation: pageIn .15s cubic-bezier(.2,.7,.2,1); text-align: left; }
.adm-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.adm-menu-list { display: flex; flex-direction: column; gap: 1px; padding: 2px; }
.adm-menu-list form { display: block; }
.adm-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; background: transparent; border: 0; color: var(--ink-2); font-size: 12.5px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; font-family: inherit; }
.adm-menu-item:hover { background: var(--surface-2); }
.adm-menu-item.warn { color: var(--warn); } .adm-menu-item.ok { color: var(--ok); } .adm-menu-item.danger { color: var(--danger); }
.adm-menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.adm-menu-scroll { padding: 4px; max-height: 260px; overflow-y: auto; }
.adm-menu-label { font-size: 11px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px 8px; }
.adm-role-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; background: transparent; border: 1px solid transparent; text-align: left; margin-bottom: 4px; cursor: pointer; font-family: inherit; color: inherit; }
.adm-role-opt.on { background: var(--surface-2); border-color: var(--ink); }
.adm-role-opt:hover { background: var(--surface-2); }
.adm-dept-opt { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; background: transparent; border: 0; text-align: left; cursor: pointer; font-family: inherit; color: inherit; font-size: 12.5px; }
.adm-dept-opt svg:first-child { color: var(--ink-4); flex-shrink: 0; }
.adm-dept-opt.on { background: var(--surface-2); font-weight: 600; }
.adm-dept-opt:hover { background: var(--surface-2); }
.adm-info-form { padding: 8px; }
.adm-info-field { display: block; margin-bottom: 10px; }
.adm-info-field span { font-size: 11px; color: var(--ink-4); display: block; margin-bottom: 4px; }
.adm-info-field em { font-size: 11px; color: var(--ink-4); margin-top: 4px; display: block; font-style: normal; }
.adm-info-field .input { padding: 8px 10px; font-size: 13px; }

/* 부서 */
.adm-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.adm-dept-card { padding: 22px; position: relative; transition: border-color .2s; }
.adm-dept-card:hover { border-color: var(--line-strong); }
.adm-dept-name { font-size: 18px; font-weight: 600; letter-spacing: -.018em; margin-top: 6px; }
.adm-dept-count { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.adm-dept-count .num { font-size: 36px; font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.adm-dept-count span:last-child { font-size: 13px; color: var(--ink-4); }
.adm-dept-people { display: flex; margin-top: 14px; min-height: 28px; align-items: center; }
.adm-dept-avatar { border: 2px solid var(--surface); border-radius: 50%; }
.adm-dept-avatar + .adm-dept-avatar, .adm-dept-avatar + .adm-dept-more { margin-left: -6px; }
.adm-dept-more { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--ink-4); border: 2px solid var(--surface); display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.adm-org-kicker { display: flex; align-items: center; gap: 6px; }
.adm-org-kicker svg { color: var(--warn); }
.adm-org-mods { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px; }
.adm-card-acts { position: absolute; top: 12px; right: 12px; display: flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .15s; align-items: center; }
.adm-dept-card:hover .adm-card-acts, .adm-type-card:hover .adm-card-acts, .adm-role-card:hover .adm-card-acts, .adm-card-acts:focus-within { opacity: 1; }
.adm-add-card { border: 1.5px dashed var(--line-strong); background: transparent; border-radius: 14px; min-height: 158px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-4); text-decoration: none; transition: all .2s; font-size: 13px; font-weight: 500; }
.adm-add-card.tall { min-height: 168px; } .adm-add-card.taller { min-height: 180px; }
.adm-add-card:hover { border-color: var(--ink); color: var(--ink); }
.adm-toggle-list { background: var(--surface-2); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.adm-toggle-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--ink-4); }
.adm-toggle-row svg:first-of-type { color: var(--ink-5); flex-shrink: 0; }
.adm-toggle-row span { flex: 1; }
.adm-toggle-row:has(input:checked) { background: var(--surface); color: var(--ink); font-weight: 550; }
.adm-toggle-row:has(input:checked) svg:first-of-type { color: var(--ink); }
.adm-switch { position: relative; width: 30px; height: 18px; border-radius: 99px; background: var(--line-strong); transition: background .2s; flex-shrink: 0; display: block; }
.adm-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .2s; }
.adm-switch.lg { width: 36px; height: 20px; } .adm-switch.lg::after { width: 16px; height: 16px; }
label:has(input:checked) > .adm-switch { background: var(--ink); }
label:has(input:checked) > .adm-switch::after { left: 14px; }
label:has(input:checked) > .adm-switch.lg::after { left: 18px; }
.adm-toggle-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 8px; cursor: pointer; }
.adm-toggle-card.master { background: var(--surface-2); border-radius: 12px; margin-bottom: 10px; }
.adm-toggle-card.master:has(input:checked) { background: color-mix(in oklch, var(--accent) 8%, var(--surface-2)); border-color: color-mix(in oklch, var(--accent) 32%, var(--line)); }
.adm-toggle-card.master:has(input:checked) > svg { color: var(--accent); }
.adm-toggle-card.master:has(input:checked) > .adm-switch { background: var(--accent); }
.adm-toggle-card > svg { color: var(--ink-4); flex-shrink: 0; }

/* 게시판·자료실 유형 카드 */
.adm-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.adm-type-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; position: relative; transition: border-color .2s; }
.adm-type-card:hover { border-color: var(--line-strong); }
.adm-type-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.adm-type-color { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
.adm-type-color.sm { width: 22px; height: 22px; border-radius: 6px; }
.adm-type-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.adm-type-icon.bordered { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.adm-type-name { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.adm-type-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-items-label { font-size: 11px; color: var(--ink-4); letter-spacing: .06em; }
.adm-items-count { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.adm-type-fields { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.adm-fields-kicker { font-size: 10px; color: var(--ink-4); letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; }
.adm-field-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-field-pill { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.adm-field-pill span { margin-left: 4px; color: var(--ink-5); }
.adm-preview-card { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.adm-preview-title { font-size: 14px; font-weight: 600; letter-spacing: -.012em; }
.adm-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-color-pick { cursor: pointer; }
.adm-color-pick span { display: block; width: 30px; height: 30px; border-radius: 9px; border: 2px solid transparent; }
.adm-color-pick:has(input:checked) span { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; }
.adm-color-pick.round span { border-radius: 50%; }
.adm-icon-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-icon-pick { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.adm-icon-pick:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.adm-field-list { background: var(--surface-2); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.adm-field-row { display: grid; grid-template-columns: 1fr 104px auto auto; gap: 6px; align-items: center; padding: 6px; background: var(--surface); border-radius: 7px; border: 1px solid var(--line); }
.adm-field-input { padding: 6px 10px; font-size: 12.5px; border: 0; background: transparent; }
.adm-field-select { padding: 6px 8px; font-size: 12px; border: 0; background: transparent; }
.adm-lock-toggle { color: var(--ink-5); cursor: pointer; }
.adm-lock-toggle:has(input:checked) { color: var(--ink); }
.modal .tabs-item { border: 0; background: transparent; font-family: inherit; cursor: pointer; }

/* 스토리지 */
.adm-grid-storage { grid-template-columns: 2fr 1fr 100px 2fr 170px 140px; }
.adm-quota-presets { display: flex; gap: 4px; margin-top: 12px; }
.adm-quota-presets form { flex: 1; display: flex; }
.adm-quota-preset { flex: 1; padding: 5px 0; border: 0; border-radius: 5px; cursor: pointer; background: var(--surface-2); color: var(--ink-3); font-size: 11px; font-weight: 600; text-align: center; text-decoration: none; font-family: inherit; }
.adm-quota-preset.on { background: var(--ink); color: var(--bg); }
.adm-quota-edit { display: flex; align-items: center; gap: 4px; }
.adm-quota-edit .input { padding: 4px 8px; font-size: 12.5px; font-weight: 600; width: 72px; }
.adm-quota-edit .icon-btn { width: 26px; height: 26px; flex-shrink: 0; }
.adm-quota-edit span { font-size: 11px; color: var(--ink-4); }
.adm-custom-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* 지출·비품·휴가 */
.adm-grid-expenses { grid-template-columns: 2fr 1.4fr 1fr 1fr 1.2fr 100px 160px; }
.adm-grid-supply { grid-template-columns: 1.4fr 2fr 1.2fr 0.8fr 100px 150px; }
.adm-grid-vacations { grid-template-columns: 1.6fr 1fr 1.6fr 1.6fr 80px 100px 160px; }
.adm-grid-logs { grid-template-columns: 1.2fr 1.4fr 2fr 1fr; }
.adm-amount-sub { font-size: 10px; color: var(--ink-4); font-weight: 400; margin-left: 4px; }
.adm-cat-cell { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.adm-cat-cell svg { color: var(--ink-4); flex-shrink: 0; }
.adm-cat-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-2); margin-bottom: 16px; }
.adm-cat-list { display: flex; flex-direction: column; gap: 8px; }
.adm-cat-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.adm-cat-pct { width: 40px; text-align: right; color: var(--ink-3); font-weight: 550; }
.adm-merchant { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; }
.adm-vac-cards { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 26px; }
.adm-vac-card { flex: 0 0 auto; width: 232px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; }
.adm-vac-card:hover { border-color: var(--line-strong); }
.adm-vac-modal .modal-head { align-items: center; padding: 22px 24px; }
.adm-vac-head { display: flex; align-items: center; gap: 13px; min-width: 0; }
.adm-vac-name { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.adm-vac-balance { background: var(--surface-2); border-radius: 12px; padding: 18px; }
.adm-vac-remaining { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.adm-vac-track { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: 13px 0; }
.adm-vac-track > div { height: 100%; transition: width .4s; }
.adm-vac-stats { display: flex; gap: 18px; font-size: 12px; color: var(--ink-4); }
.adm-vac-stats b { font-weight: 650; }
.adm-vac-history-title { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin: 20px 0 10px; }
.adm-vac-history { display: flex; flex-direction: column; gap: 9px; max-height: 280px; overflow-y: auto; }
.adm-vac-history-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; }

/* 일과 모니터링 */
.adm-prio-dot { width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; }

/* 캘린더 유형 */
.adm-kind-list { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.adm-kind-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s; }
.adm-kind-row:hover { border-color: var(--line-strong); }
.adm-kind-row .adm-row-acts { opacity: 0; transition: opacity .15s; }
.adm-kind-row:hover .adm-row-acts, .adm-kind-row .adm-row-acts:focus-within { opacity: 1; }
.adm-kind-label { flex: 1; font-size: 13.5px; font-weight: 550; }
.adm-kind-pill { display: inline-block; font-size: 10.5px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }

/* 권한 */
.adm-default-role { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.adm-default-role > svg { color: var(--ink-3); flex-shrink: 0; }
.adm-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.adm-role-card { padding: 22px; position: relative; }
.adm-role-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.adm-role-name { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.adm-pill-default { font-size: 9.5px; padding: 1px 7px; }
.adm-role-count { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.adm-role-count span { font-size: 12px; color: var(--ink-4); font-weight: 400; }
.adm-role-caps { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); min-height: 40px; }
.adm-cap-pill { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.adm-cap-pill.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.adm-toggle-list.caps.off { opacity: .45; pointer-events: none; }
.adm-caps-cover { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.adm-caps-cover span { font-size: 11.5px; color: var(--ink-4); background: var(--surface); padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); }
.adm-sensitive { font-size: 10px; color: var(--warn); margin-left: 6px; font-style: normal; }

/* 모니터링 */
.adm-cost-card { background: var(--ink); color: var(--bg); }
.adm-cost-kicker { font-size: 10.5px; opacity: .6; letter-spacing: .1em; font-weight: 600; }
.adm-cost-meta { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11.5px; opacity: .75; }
.adm-cost-note { margin-top: 6px; font-size: 10.5px; opacity: .5; }
.adm-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-bottom: 24px; }
.adm-service { padding: 22px; }
.adm-service-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.adm-service-icon { width: 38px; height: 38px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; font-weight: 700; }
.adm-service-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); gap: 10px; }
.adm-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px; }
.adm-event { display: flex; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.adm-event-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.adm-event-icon.warn { background: color-mix(in oklch, var(--warn) 14%, transparent); color: var(--warn); }

@media (max-width: 900px) {
  .adm-grid-codes, .adm-grid-members, .adm-grid-storage, .adm-grid-expenses, .adm-grid-supply, .adm-grid-vacations, .adm-grid-logs { grid-template-columns: 1fr; }
  .table-head.adm-grid-codes, .table-head.adm-grid-members, .table-head.adm-grid-storage, .table-head.adm-grid-expenses, .table-head.adm-grid-supply, .table-head.adm-grid-vacations, .table-head.adm-grid-logs { display: none; }
  .adm-menu-cell { flex-wrap: wrap; }
  .adm-member-menu { position: static; flex-basis: 100%; width: 100%; margin-top: 8px; }
  .adm-card-acts { opacity: 1; }
  .adm-vac-cards { flex-direction: column; }
  .adm-vac-card { width: 100%; }
}
