/* _content/BPack.Components/Account/BpLoginPanel.razor.rz.scp.css */
/* BpLoginPanel — 로그인 카드 wrap 센터링 + 브랜드/타이틀 chrome.
   카드/알림/버튼은 BPack 컴포넌트 자체 스타일. 색상은 --bp-* 시맨틱 토큰만 사용. */

.bp-login-panel[b-99gy3bxsav] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bp-bg-page);
    color: var(--bp-text-primary);
    padding: var(--bp-space-4);
}

.bp-login-panel-inner[b-99gy3bxsav] {
    width: 100%;
    max-width: 480px;
}

.bp-login-panel-brand[b-99gy3bxsav] {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    min-width: 0;
    font-size: var(--bp-size-body);
    font-weight: var(--bp-weight-bold);
    color: var(--bp-text-primary);
}

.bp-login-panel-logo[b-99gy3bxsav] {
    flex: 0 0 auto;
}

.bp-login-panel-title[b-99gy3bxsav] {
    font-size: var(--bp-size-h2);
    font-weight: var(--bp-weight-bold);
    margin: 0 0 var(--bp-space-3) 0;
    color: var(--bp-text-primary);
}

.bp-login-panel-alert[b-99gy3bxsav] {
    margin-bottom: var(--bp-space-3);
}
/* _content/BPack.Components/Buttons/BpButton.razor.rz.scp.css */
/* BpButton 스코프드 스타일 */
/* _content/BPack.Components/Common/BpClock.razor.rz.scp.css */
/* BpClock 스코프드 스타일 */
/* _content/BPack.Components/Common/BpCodeBlock.razor.rz.scp.css */
/* BpCodeBlock 스코프드 스타일 */

/* 루트 요소 — ::deep 사용 불가 */
.bp-codeblock[b-bazovq100m] {
    border-radius: 8px;
    border: 1px solid var(--bp-border-light);
    overflow: hidden;
    margin: 8px 0;
}

/* 자식 요소 — ::deep 사용 */
[b-bazovq100m] .bp-codeblock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background-color: var(--bp-border-light);
    border-bottom: 1px solid var(--bp-border-light);
}

[b-bazovq100m] .bp-codeblock-lang {
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-text-secondary);
    text-transform: uppercase;
}

[b-bazovq100m] .bp-codeblock-copy {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--bp-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

[b-bazovq100m] .bp-codeblock-copy:hover {
    background-color: var(--bp-border-light);
    color: var(--bp-text-primary);
}

[b-bazovq100m] pre[class*="language-"] {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
}

[b-bazovq100m] code[class*="language-"] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}
/* _content/BPack.Components/Common/BpCopyright.razor.rz.scp.css */
/* 저작권·제품 정보 표기. 크기는 사이즈 등급 토큰만 쓴다(새 토큰을 만들지 않는다). */

.bp-copyright[b-9hnxkjk4mj] {
    color: var(--bp-text-secondary);
    font-size: var(--bp-control-font-md);
}

.bp-copyright.bp-xs[b-9hnxkjk4mj] { font-size: var(--bp-control-font-xs); }
.bp-copyright.bp-sm[b-9hnxkjk4mj] { font-size: var(--bp-control-font-sm); }
.bp-copyright.bp-lg[b-9hnxkjk4mj] { font-size: var(--bp-control-font-lg); }
.bp-copyright.bp-xl[b-9hnxkjk4mj] { font-size: var(--bp-control-font-xl); }

/* 마크는 아이콘 등급을 따른다 — 글자와 같이 커진다 */
.bp-copyright-logo[b-9hnxkjk4mj] {
    width: var(--bp-control-icon-md);
    height: var(--bp-control-icon-md);
    flex-shrink: 0;
}

.bp-copyright.bp-xs .bp-copyright-logo[b-9hnxkjk4mj] { width: var(--bp-control-icon-xs); height: var(--bp-control-icon-xs); }
.bp-copyright.bp-sm .bp-copyright-logo[b-9hnxkjk4mj] { width: var(--bp-control-icon-sm); height: var(--bp-control-icon-sm); }
.bp-copyright.bp-lg .bp-copyright-logo[b-9hnxkjk4mj] { width: var(--bp-control-icon-lg); height: var(--bp-control-icon-lg); }
.bp-copyright.bp-xl .bp-copyright-logo[b-9hnxkjk4mj] { width: var(--bp-control-icon-xl); height: var(--bp-control-icon-xl); }

/* ── 한 줄 ─────────────────────────────────────────────── */

.bp-copyright-line[b-9hnxkjk4mj] {
    display: flex;
    align-items: center;
    /* 기본은 왼쪽이다 — 문단·카드와 축을 맞춘다.
       가운데가 필요한 자리(로그인 카드 푸터 등)는 감싸는 쪽이 정한다. */
    justify-content: flex-start;
    flex-wrap: wrap;               /* 좁은 화면에서 줄바꿈 */
    gap: 6px;
    min-width: 0;
}

.bp-copyright-text[b-9hnxkjk4mj] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-copyright-sep[b-9hnxkjk4mj] {
    color: var(--bp-text-tertiary);
}

.bp-copyright-slot-inline[b-9hnxkjk4mj] {
    color: var(--bp-text-tertiary);
}

/* ── 카드 ─────────────────────────────────────────────────
   배치 기준은 BPack.Licensing.Ui 잠금 화면(BpLicenseGate) 이다 — 좌 히어로 + 우 내용.
   같은 토큰·같은 비율을 쓰므로 두 화면이 한 얼굴로 보인다. */

.bp-copyright-shell[b-9hnxkjk4mj] {
    display: grid;
    /* 폭은 HeroWidth 파라미터가 정한다(기본 260px — 잠금 화면과 같은 값).
       min(…, 100%) 은 좁은 화면에서 히어로가 컨테이너를 넘기지 않게 한다. */
    grid-template-columns:
        minmax(min(var(--bp-copyright-hero-width, 260px), 100%), var(--bp-copyright-hero-width, 260px))
        minmax(0, 1fr);
    width: 100%;
    /* 호스트가 MaxWidth 로 연다(F37 · HR-DGW-004). 기본은 잠금 화면과 같은 760px 이다. */
    max-width: var(--bp-copyright-max-width, 760px);
    background: var(--bp-bg-surface);
    border: 1px solid var(--bp-border-default);
    border-radius: var(--bp-radius-lg);
    overflow: hidden;
}

.bp-copyright-hero[b-9hnxkjk4mj] {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-2);
    min-width: 0;
    padding: var(--bp-space-5) var(--bp-space-4);
    background: linear-gradient(158deg, var(--bp-primary-700) 0%, var(--bp-primary-900) 100%);
    color: var(--bp-neutral-0);
}

.bp-copyright-hero-mark img[b-9hnxkjk4mj] {
    display: block;
    width: var(--bp-h-lg);
    height: var(--bp-h-lg);
}

/* 마크는 위, 이름·설명은 아래로 — 잠금 화면과 같은 리듬 */
.bp-copyright-hero-spacer[b-9hnxkjk4mj] {
    flex: 1 1 auto;
    min-height: var(--bp-space-4);
}

.bp-copyright-hero-title[b-9hnxkjk4mj] {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    margin: 0;
    min-width: 0;
    font-size: var(--bp-size-h3);
    font-weight: var(--bp-weight-bold);
}

/* 글자 칸을 따로 둔다 — flex item 의 자동 최소 크기가 풀리지 않으면
   긴 제품명이 자기 칸을 넘쳐 앞의 심볼 위로 겹쳐 그려진다. */
.bp-copyright-hero-name[b-9hnxkjk4mj] {
    min-width: 0;
    /* 끊는 자리는 마크업의 <wbr>(점 뒤)이 정한다.
       anywhere 는 그래도 안 들어갈 때의 마지막 수단이다 — 없으면 칸을 넘쳐 심볼 위로 겹친다. */
    overflow-wrap: anywhere;
}

.bp-copyright-hero-tag[b-9hnxkjk4mj] {
    margin: 0;
    /* 히어로의 흰 글자를 그대로 받는다 — 모달 안이면 전역 .bp-modal-content p 의 본문 글자색이
       상속을 이겨 어두운 패널 위에 회색 글자가 된다(F60). */
    color: inherit;
    font-size: var(--bp-size-small);
    opacity: 0.82;
}

.bp-copyright-hero-by[b-9hnxkjk4mj] {
    font-size: var(--bp-size-2xs);
    opacity: 0.72;
}

.bp-copyright-panel[b-9hnxkjk4mj] {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-3);
    min-width: 0;
    padding: var(--bp-space-5);
}

.bp-copyright-facts[b-9hnxkjk4mj] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* 라벨 11px · 값 14px 이라 stretch 로 두면 각자 자기 line box 위쪽에 앉아
       라벨 글자가 3px 위로 뜬다(박스는 맞아서 박스 좌표로는 안 잡힌다).
       행마다 첫 baseline 을 맞춘다 — 값이 여러 줄이어도 첫 줄 기준이다. */
    align-items: baseline;
    gap: var(--bp-space-2) var(--bp-space-4);
    margin: 0;
    font-size: var(--bp-size-small);
    line-height: var(--bp-line-normal);
}

/* 라벨은 잠금 화면의 .bp-lic-label 과 같은 모양 */
.bp-copyright-k[b-9hnxkjk4mj] {
    color: var(--bp-text-tertiary);
    font-size: var(--bp-size-2xs);
    font-weight: var(--bp-weight-semibold);
    letter-spacing: var(--bp-tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.bp-copyright-v[b-9hnxkjk4mj] {
    min-width: 0;
    color: var(--bp-text-primary);
    overflow-wrap: anywhere;      /* 긴 저작권 문구가 칸을 밀지 않게 */
}

/* 이용 조건 아래 금지 문구(F62) — 값보다 한 단계 작은 보조 줄 */
.bp-copyright-note[b-9hnxkjk4mj] {
    display: block;
    margin-top: var(--bp-space-1);
    color: var(--bp-text-tertiary);
    font-size: var(--bp-size-xs);
    word-break: keep-all;         /* 한국어가 낱말 중간(「금지/합니다」)에서 끊기지 않게 */
}

.bp-copyright-slot[b-9hnxkjk4mj] {
    padding-top: var(--bp-space-3);
    border-top: 1px solid var(--bp-border-light);
}

/* 좁은 화면 — 히어로를 위로 쌓는다 */
@media (max-width: 560px) {
    .bp-copyright-shell[b-9hnxkjk4mj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bp-copyright-hero[b-9hnxkjk4mj] {
        flex-direction: row;
        align-items: center;
        gap: var(--bp-space-3);
        flex-wrap: wrap;
    }

    .bp-copyright-hero-spacer[b-9hnxkjk4mj] {
        display: none;
    }

    .bp-copyright-hero-title[b-9hnxkjk4mj] {
        font-size: var(--bp-size-body);
    }
}
/* _content/BPack.Components/Common/BpDisplaySettings.razor.rz.scp.css */
/* 설정 본문 — 팝업·페이지가 같은 것을 쓴다 */
.bp-display-settings[b-dfo74lagx2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* 가로 폭은 페이지가 정한다 — 호스트는 자기 루트에 --settings-width 하나만 준다(시스템 설정 템플릿과 같은 변수).
   팝업은 창 폭이 상한이라 --settings-width: none 을 준다. */
.bp-display-settings-panel[b-dfo74lagx2] {
    width: 100%;
    max-width: var(--settings-width, 760px);
    min-width: 0;
}

/* 제품 칸 — 호스트가 넣은 카드 사이 간격 */
.bp-display-settings-host[b-dfo74lagx2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bp-display-settings-fields[b-dfo74lagx2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bp-display-settings-desc[b-dfo74lagx2] {
    margin: 12px 0 0;
    color: var(--bp-text-secondary);
    font-size: var(--bp-size-small);
}
/* _content/BPack.Components/Common/BpThemeToggle.razor.rz.scp.css */
/* BpThemeToggle 스코프드 스타일 */
.bp-theme-toggle[b-olvjdg7mds] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--bp-border-default);
    background: transparent;
    color: var(--bp-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.bp-theme-toggle:hover[b-olvjdg7mds] {
    background-color: var(--bp-overlay-hover);
    color: var(--bp-text-primary);
}

.bp-theme-toggle i[b-olvjdg7mds] {
    font-size: 18px;
}
/* _content/BPack.Components/Common/BpUpdatePanel.razor.rz.scp.css */
/* 업데이트 카드 본문 — 루트(BpCard)에는 scope 가 없어 이 래퍼에서 시작한다 */
.bp-update-panel[b-zktv2ys73k] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.bp-update-facts[b-zktv2ys73k] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: var(--bp-size-small);
}

.bp-update-facts dt[b-zktv2ys73k] {
    color: var(--bp-text-secondary);
}

.bp-update-facts dd[b-zktv2ys73k] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bp-update-mono[b-zktv2ys73k] {
    font-family: var(--bp-font-mono);
}

.bp-update-line[b-zktv2ys73k] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: var(--bp-size-small);
    overflow-wrap: anywhere;
}

.bp-update-muted[b-zktv2ys73k] {
    margin: 0;
    color: var(--bp-text-secondary);
    font-size: var(--bp-size-small);
}

.bp-update-tone-error[b-zktv2ys73k] {
    color: var(--bp-error-fg);
}

.bp-update-tone-warning[b-zktv2ys73k] {
    color: var(--bp-warning-fg);
}

.bp-update-tone-success[b-zktv2ys73k] {
    color: var(--bp-success-fg);
}

.bp-update-spinner[b-zktv2ys73k] {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border: 2px solid var(--bp-border-default);
    border-top-color: var(--bp-info-fg);
    border-radius: 50%;
    animation: bp-update-spin-b-zktv2ys73k 0.8s linear infinite;
}

@keyframes bp-update-spin-b-zktv2ys73k {
    to {
        transform: rotate(360deg);
    }
}

.bp-update-notes[b-zktv2ys73k] {
    padding: 10px 12px;
    border-radius: var(--bp-radius-sm);
    background: var(--bp-bg-muted);
    font-size: var(--bp-size-small);
}

.bp-update-notes-title[b-zktv2ys73k] {
    margin-bottom: 4px;
    font-weight: 600;
}

.bp-update-notes-body[b-zktv2ys73k] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 160px;
    overflow-y: auto;
}

.bp-update-problems[b-zktv2ys73k] {
    margin: 0;
    padding-left: 18px;
    font-size: var(--bp-size-small);
    overflow-wrap: anywhere;
}

.bp-update-actions[b-zktv2ys73k] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.bp-update-history[b-zktv2ys73k] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--bp-border-light);
}

.bp-update-history-title[b-zktv2ys73k] {
    font-size: var(--bp-size-small);
    font-weight: 600;
}

.bp-update-history-table[b-zktv2ys73k] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--bp-size-xs);
}

.bp-update-history-table th[b-zktv2ys73k],
.bp-update-history-table td[b-zktv2ys73k] {
    padding: 4px 8px;
    border-bottom: 1px solid var(--bp-border-light);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.bp-update-history-table th[b-zktv2ys73k] {
    color: var(--bp-text-secondary);
    font-weight: 500;
}
/* _content/BPack.Components/Display/BpAvatar.razor.rz.scp.css */
/* BpAvatar 스코프드 스타일 */
/* 루트 요소는 ::deep 없이 사용 */
.bp-avatar[b-cyfr2zoiyh] {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 600;
    /* primary/info/success/warning/error 6 variant 모두 진한 채색 배경.
       글자색은 라이트·다크 무관 항상 흰색 고정 (이전 var(--bp-bg-surface) 는
       다크에서 #1A1D23 이라 글자가 배경에 묻혔다). */
    color: var(--bp-neutral-0);
}

.bp-avatar.bp-xs[b-cyfr2zoiyh] {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

.bp-avatar.bp-sm[b-cyfr2zoiyh] {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.bp-avatar.bp-md[b-cyfr2zoiyh] {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.bp-avatar.bp-lg[b-cyfr2zoiyh] {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.bp-avatar.bp-xl[b-cyfr2zoiyh] {
    width: 64px;
    height: 64px;
    font-size: 20px;
}

.bp-avatar.bp-2xl[b-cyfr2zoiyh] {
    width: 80px;
    height: 80px;
    font-size: 24px;
}

.bp-avatar.bp-primary[b-cyfr2zoiyh] { background-color: var(--bp-primary-500); }
.bp-avatar.bp-secondary[b-cyfr2zoiyh] { background-color: var(--bp-text-tertiary); }
.bp-avatar.bp-success[b-cyfr2zoiyh] { background-color: var(--bp-success); }
.bp-avatar.bp-info[b-cyfr2zoiyh] { background-color: var(--bp-info); }
.bp-avatar.bp-warning[b-cyfr2zoiyh] { background-color: var(--bp-warning); }
.bp-avatar.bp-error[b-cyfr2zoiyh] { background-color: var(--bp-error); }

.bp-avatar img[b-cyfr2zoiyh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* _content/BPack.Components/Display/BpBadge.razor.rz.scp.css */
/* BpBadge 스코프드 스타일 */
/* _content/BPack.Components/Display/BpCard.razor.rz.scp.css */
/* BpCard 스코프드 스타일 */

/* 컴팩트 모드 — 헤더 높이 축소, 콘텐츠 패딩 최소화 */
.bp-card.bp-compact .bp-card-header[b-ikmhgob6dv] {
    height: 34px;
    min-height: 34px;
    /* 좌우 패딩을 헤더 폰트 상/하 여백(≈8px)에 맞춰 축소 — 컴팩트 푸터(0 8px)와도 일치 */
    padding: 0 8px;
}

.bp-card.bp-compact .bp-card-content[b-ikmhgob6dv] {
    padding: 4px;
}

/* 컴팩트 모드 — 푸터 */
.bp-card.bp-compact .bp-card-footer[b-ikmhgob6dv] {
    height: 34px;
    min-height: 34px;
    padding: 0 8px;
}

/* 외곽선 · 디자인 가이드 정렬 */
.bp-card.bp-outline[b-ikmhgob6dv] {
    border: 1px solid var(--bp-border-light);
}
/* _content/BPack.Components/Display/BpDataBar.razor.rz.scp.css */
/* BpDataBar — 셀 내 데이터 바 (엑셀 스타일) */
.bp-databar[b-z2q3hb98qg] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.bp-databar-fill[b-z2q3hb98qg] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0.28;
    transition: width var(--bp-duration-base) ease;
}

/* 다크 테마 : 배경이 어두우므로 더 진하게 */
[data-theme="dark"] .bp-databar-fill[b-z2q3hb98qg] {
    opacity: 0.45;
}

.bp-databar-fill.bp-primary[b-z2q3hb98qg] { background-color: var(--bp-primary-500); }
.bp-databar-fill.bp-accent[b-z2q3hb98qg]  { background-color: var(--bp-accent-500); }
.bp-databar-fill.bp-success[b-z2q3hb98qg] { background-color: var(--bp-success); }
.bp-databar-fill.bp-warning[b-z2q3hb98qg] { background-color: var(--bp-warning); }
.bp-databar-fill.bp-error[b-z2q3hb98qg]   { background-color: var(--bp-error); }
.bp-databar-fill.bp-info[b-z2q3hb98qg]    { background-color: var(--bp-info); }

.bp-databar-value[b-z2q3hb98qg] {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: right;
    padding: 0 6px;
    font-size: inherit;
    font-weight: 500;
    color: var(--bp-text-primary);
    white-space: nowrap;
}
/* _content/BPack.Components/Display/BpDescriptionItem.razor.rz.scp.css */
/* BpDescriptionItem — 라벨-값 한 항목 (dt/dd) */

.bp-desc-item[b-w51k5ui79m] {
    display: grid;
    grid-template-columns: var(--bp-desc-label-w, max-content) 1fr;
    align-items: var(--bp-desc-align, start);
    min-width: 0;
}

.bp-desc-label[b-w51k5ui79m] {
    color: var(--bp-text-secondary);
    font-weight: var(--bp-weight-medium);
    margin: 0;
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-desc-value[b-w51k5ui79m] {
    color: var(--bp-text-primary);
    margin: 0;
    padding: 6px 12px;
    min-width: 0;
    word-break: break-word;
    line-height: 1.5;
}
/* _content/BPack.Components/Display/BpDescriptionList.razor.rz.scp.css */
/* BpDescriptionList — 라벨-값 상세 뷰 컨테이너 (dl grid) */

.bp-desc[b-ijhde61lu3] {
    display: grid;
    width: 100%;
    margin: 0;
    color: var(--bp-text-primary);
}

/* 밀도 */
.bp-desc.bp-sm[b-ijhde61lu3] { font-size: var(--bp-size-xs); }
.bp-desc.bp-md[b-ijhde61lu3] { font-size: var(--bp-size-small); }
.bp-desc.bp-lg[b-ijhde61lu3] { font-size: var(--bp-size-body); }

/* 기본(비-구분선): 각 항목 하단 얇은 행 구분선 — 스펙시트 느낌 */
.bp-desc:not(.bp-desc-bordered)[b-ijhde61lu3]  .bp-desc-item {
    border-bottom: 1px solid var(--bp-border-light);
}

/* 구분선 모드: grid gap 을 border 색으로 채워 셀 경계선 표현 */
.bp-desc-bordered[b-ijhde61lu3] {
    gap: 1px;
    background: var(--bp-border-light);
    border: 1px solid var(--bp-border-light);
    border-radius: var(--bp-radius-md);
    overflow: hidden;
}
.bp-desc-bordered[b-ijhde61lu3]  .bp-desc-item {
    background: var(--bp-bg-surface);
}
.bp-desc-bordered[b-ijhde61lu3]  .bp-desc-label {
    background: var(--bp-bg-muted);
}
/* _content/BPack.Components/Display/BpImageLightbox.razor.rz.scp.css */
/* BpImageLightbox — 전체화면 이미지 라이트박스 (BpImageViewer 재사용 · 갤러리) */

.bp-lightbox-trigger[b-9s4tf05pgf] {
    display: inline-block;
    cursor: pointer;
}

/* 전체화면 오버레이 — 테마 surface 기반(라이트/다크 모두 정상) */
.bp-lightbox[b-9s4tf05pgf] {
    position: fixed;
    inset: 0;
    z-index: 1100; /* 모달(1000) 위 */
    display: flex;
    flex-direction: column;
    background: var(--bp-bg-muted);
    outline: none;
}

.bp-lightbox-bar[b-9s4tf05pgf] {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    padding: var(--bp-space-2) var(--bp-space-4);
    background: var(--bp-bg-surface);
    border-bottom: 1px solid var(--bp-border-light);
    flex-shrink: 0;
}

.bp-lightbox-title[b-9s4tf05pgf] {
    font-size: var(--bp-size-body);
    color: var(--bp-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
}

.bp-lightbox-counter[b-9s4tf05pgf] {
    font-size: var(--bp-size-small);
    color: var(--bp-text-secondary);
}

.bp-lightbox-spacer[b-9s4tf05pgf] {
    flex: 1;
}

.bp-lightbox-body[b-9s4tf05pgf] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    padding: var(--bp-space-3);
}

.bp-lightbox-stage[b-9s4tf05pgf] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

/* 라이트박스 안에서는 뷰어를 영역에 꽉 채움 (라이브러리 자체 합성 스타일) */
.bp-lightbox-stage[b-9s4tf05pgf]  .bp-image-viewer {
    height: 100%;
}

.bp-lightbox-nav[b-9s4tf05pgf] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--bp-radius-circle);
    background: var(--bp-bg-surface);
    color: var(--bp-text-primary);
    border: 1px solid var(--bp-border-light);
    box-shadow: var(--bp-shadow-md);
    cursor: pointer;
    font-size: var(--bp-size-h3);
    transition: background var(--bp-duration-fast);
}
.bp-lightbox-nav:hover[b-9s4tf05pgf] {
    background: var(--bp-bg-muted);
}

.bp-lightbox-thumbs[b-9s4tf05pgf] {
    display: flex;
    gap: var(--bp-space-2);
    padding: var(--bp-space-2) var(--bp-space-4);
    overflow-x: auto;
    justify-content: center;
    background: var(--bp-bg-surface);
    border-top: 1px solid var(--bp-border-light);
    flex-shrink: 0;
}

.bp-lightbox-thumb[b-9s4tf05pgf] {
    width: 56px;
    height: 42px;
    flex-shrink: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--bp-radius-sm);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--bp-duration-fast), border-color var(--bp-duration-fast);
}
.bp-lightbox-thumb:hover[b-9s4tf05pgf] {
    opacity: 1;
}
.bp-lightbox-thumb.bp-active[b-9s4tf05pgf] {
    opacity: 1;
    border-color: var(--bp-primary-500);
}
.bp-lightbox-thumb img[b-9s4tf05pgf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* _content/BPack.Components/Display/BpImageViewer.razor.rz.scp.css */
/* BpImageViewer — 이미지 뷰어 (Ctrl+휠 줌 · 드래그 팬 · 회전) */

.bp-image-viewer[b-ujjgvvnul3] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bp-border-light);
    border-radius: var(--bp-radius-md);
    overflow: hidden;
    background: var(--bp-bg-muted);
}

/* 부모 flex 컨테이너 채움 모드 (리사이즈 다이얼로그 등) — percentage 높이 대신 flex 로 채움 */
.bp-image-viewer.bp-image-fill[b-ujjgvvnul3] {
    flex: 1 1 auto;
    min-height: 0;
}

.bp-image-toolbar[b-ujjgvvnul3] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 6px 8px;
    background: var(--bp-bg-surface);
    border-bottom: 1px solid var(--bp-border-light);
    flex-shrink: 0;
}

.bp-image-zoom[b-ujjgvvnul3] {
    min-width: 52px;
    text-align: center;
    font-size: var(--bp-size-xs);
    color: var(--bp-text-secondary);
}

.bp-image-divider[b-ujjgvvnul3] {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: var(--bp-border-light);
}

/* JS 가 transform 으로 이미지를 이동/확대 — 캔버스는 클리핑만 (네이티브 스크롤 없음) */
.bp-image-canvas[b-ujjgvvnul3] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}
.bp-image-canvas.bp-image-grabbing[b-ujjgvvnul3] {
    cursor: grabbing;
}

.bp-image-img[b-ujjgvvnul3] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    max-width: none;   /* 전역 img{max-width:100%} 무력화 — 확대 허용 */
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.bp-image-empty[b-ujjgvvnul3] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--bp-text-tertiary);
    font-size: var(--bp-icon-2xl);
}
/* _content/BPack.Components/Display/BpProgress.razor.rz.scp.css */
/* BpProgress 스코프드 스타일 */
/* 루트 요소는 ::deep 없이 사용 */
.bp-progress[b-w2d5g0rfnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

[b-w2d5g0rfnl] .bp-progress-track {
    flex: 1;
    height: 8px;
    background-color: var(--bp-border-light);
    border-radius: 4px;
    overflow: hidden;
}

[b-w2d5g0rfnl] .bp-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

[b-w2d5g0rfnl] .bp-progress-fill.bp-primary { background-color: var(--bp-primary-500); }
[b-w2d5g0rfnl] .bp-progress-fill.bp-success { background-color: var(--bp-success); }
[b-w2d5g0rfnl] .bp-progress-fill.bp-warning { background-color: var(--bp-warning); }
[b-w2d5g0rfnl] .bp-progress-fill.bp-error { background-color: var(--bp-error); }

[b-w2d5g0rfnl] .bp-progress-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-text-secondary);
    min-width: 36px;
    text-align: right;
}

/* 불확정 모드 애니메이션 */
.bp-progress.bp-indeterminate .bp-progress-fill[b-w2d5g0rfnl] {
    width: 30% !important;
    animation: bp-progress-indeterminate-b-w2d5g0rfnl 1.5s ease-in-out infinite;
}

@keyframes bp-progress-indeterminate-b-w2d5g0rfnl {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
/* _content/BPack.Components/Display/BpSkeleton.razor.rz.scp.css */
/* BpSkeleton 스코프드 스타일 */
/* 루트 요소는 ::deep 없이 사용 */
.bp-skeleton[b-ad6y3k5t2y] {
    background-color: var(--bp-border-light);
    border-radius: 4px;
}

.bp-skeleton.bp-circle[b-ad6y3k5t2y] {
    border-radius: 50%;
}

.bp-skeleton.bp-animated[b-ad6y3k5t2y] {
    background: linear-gradient(90deg, var(--bp-border-light) 25%, var(--bp-border-light) 50%, var(--bp-border-light) 75%);
    background-size: 200% 100%;
    animation: bp-skeleton-shimmer-b-ad6y3k5t2y 1.5s infinite;
}

@keyframes bp-skeleton-shimmer-b-ad6y3k5t2y {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* _content/BPack.Components/Display/BpTag.razor.rz.scp.css */
/* BpTag 스코프드 스타일 */
/* 루트 요소는 ::deep 없이 사용 */
.bp-tag[b-9umfxdrdts] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.bp-tag.bp-primary[b-9umfxdrdts] {
    background-color: var(--bp-primary-50);
    color: var(--bp-primary-700);
}

/* secondary — --bp-text-secondary(neutral-600) 는 이 배경에서 4.08 로 문자 AA 미달이었다
   (HR-DVM-001). 한 단계 진한 --bp-ink-body(neutral-700)로 6.34 가 된다. */
.bp-tag.bp-secondary[b-9umfxdrdts] {
    background-color: var(--bp-border-light);
    color: var(--bp-ink-body);
}

/* Status variants — color-mix 로 라이트/다크 자동 적응.
   legacy --success/info/warning/error-50/700 단계 토큰은 다크 재정의가 있긴 하나
   "700 텍스트 + 50 배경" 조합이 새 시맨틱 토큰 체계와 맞지 않아 시맨틱 토큰만 사용.
   - 배경: status main 14% + surface — 옅은 톤
   - 텍스트: **--bp-{status}-fg** (전경 전용 토큰). 예전에는 status 45% + text-primary 로
     섞었는데 라이트에서 warning 4.36 으로 문자 AA(4.5)에 못 미쳤다(HR-DVM-001).
     -fg 는 라이트에서 어둡히고 다크에서 밝히므로 두 테마 모두 넉넉히 넘는다. */
.bp-tag.bp-success[b-9umfxdrdts] {
    background-color: color-mix(in srgb, var(--bp-success) 14%, var(--bp-bg-surface));
    color: var(--bp-success-fg);
}

.bp-tag.bp-info[b-9umfxdrdts] {
    background-color: color-mix(in srgb, var(--bp-info) 14%, var(--bp-bg-surface));
    color: var(--bp-info-fg);
}

.bp-tag.bp-warning[b-9umfxdrdts] {
    background-color: color-mix(in srgb, var(--bp-warning) 14%, var(--bp-bg-surface));
    color: var(--bp-warning-fg);
}

.bp-tag.bp-error[b-9umfxdrdts] {
    background-color: color-mix(in srgb, var(--bp-error) 14%, var(--bp-bg-surface));
    color: var(--bp-error-fg);
}

.bp-tag i[b-9umfxdrdts] {
    font-size: 10px;
    cursor: pointer;
    opacity: 0.7;
}

.bp-tag i:hover[b-9umfxdrdts] {
    opacity: 1;
}
/* _content/BPack.Components/Feedback/BpAlert.razor.rz.scp.css */
/* BpAlert 스코프드 스타일
   디자인(기본): 소프트 틴트 배경 + 컬러 아이콘 + 미묘한 보더 + 은은한 그림자. (좌측 두꺼운 띠 제거)
   Plain="true": 배경 틴트·그림자를 빼고 중립 테두리 + 컬러 아이콘만 (파일 끝 블록).
   텍스트는 variant 색이 아니라 테마 기본색(--bp-text-primary: 라이트=검정 · 다크=흰색)으로 가독성 확보.
   색 파생은 color-mix(라이트/다크 자동 적응). 크기는 5-tier(xs/sm/md/lg/xl) 밀도 스케일. */

/* 루트 (::deep 없이) */
.bp-alert[b-v0v33bqv9f] {
    display: flex;
    align-items: center;
    border-radius: var(--bp-radius-md);
    border: 1px solid transparent;
    color: var(--bp-text-primary);
    line-height: var(--bp-line-normal);
    box-shadow: var(--bp-shadow-md);
    position: relative;
}

/* 아이콘 — variant 컬러 글리프 (배경 원형/링 없음). 색은 variant 에서. */
[b-v0v33bqv9f] .bp-alert-icon {
    flex-shrink: 0;
    margin-right: var(--bp-space-2);
    line-height: 1;
}

/* 제목 */
[b-v0v33bqv9f] .bp-alert-title {
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-primary);
    white-space: nowrap;
    margin-right: 6px;
}

/* 메시지 */
[b-v0v33bqv9f] .bp-alert-message {
    flex: 1;
    min-width: 0;
    color: var(--bp-text-primary);
    overflow-wrap: anywhere;
}

/* 닫기 버튼 */
[b-v0v33bqv9f] .bp-alert-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bp-text-primary);
    opacity: 0.5;
    padding: 0;
    margin: 0 0 0 var(--bp-space-3);
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity var(--bp-duration-fast);
}
[b-v0v33bqv9f] .bp-alert-close:hover {
    opacity: 1;
}

/* ── 사이즈 (밀도 스케일: padding · 루트 폰트) ── */
.bp-alert.bp-xs[b-v0v33bqv9f] { padding: 7px 10px;  font-size: var(--bp-control-font-xs); }
.bp-alert.bp-sm[b-v0v33bqv9f] { padding: 9px 12px;  font-size: var(--bp-control-font-sm); }
.bp-alert.bp-md[b-v0v33bqv9f] { padding: 11px 14px; font-size: var(--bp-control-font-md); }
.bp-alert.bp-lg[b-v0v33bqv9f] { padding: 15px 18px; font-size: var(--bp-control-font-lg); }
.bp-alert.bp-xl[b-v0v33bqv9f] { padding: 19px 22px; font-size: var(--bp-control-font-xl); }

/* 아이콘 글리프 크기 (사이즈별) */
.bp-alert.bp-xs[b-v0v33bqv9f]  .bp-alert-icon { font-size: 15px; }
.bp-alert.bp-sm[b-v0v33bqv9f]  .bp-alert-icon { font-size: 16px; }
.bp-alert.bp-md[b-v0v33bqv9f]  .bp-alert-icon { font-size: 18px; }
.bp-alert.bp-lg[b-v0v33bqv9f]  .bp-alert-icon { font-size: 20px; }
.bp-alert.bp-xl[b-v0v33bqv9f]  .bp-alert-icon { font-size: 24px; }

/* ── Variant — 소프트 틴트 배경 + 미묘한 보더 + 컬러 아이콘 칩 ──
   BPack 표준 톤(--bp-success/info/warning/error)만 사용, shade 는 color-mix 로 파생. */

/* success */
.bp-alert.bp-success[b-v0v33bqv9f] {
    background-color: color-mix(in srgb, var(--bp-success) 11%, transparent);
    border-color:     color-mix(in srgb, var(--bp-success) 28%, transparent);
}
.bp-alert.bp-success[b-v0v33bqv9f]  .bp-alert-icon {
    color: var(--bp-success-fg);
}

/* info */
.bp-alert.bp-info[b-v0v33bqv9f] {
    background-color: color-mix(in srgb, var(--bp-info) 11%, transparent);
    border-color:     color-mix(in srgb, var(--bp-info) 28%, transparent);
}
.bp-alert.bp-info[b-v0v33bqv9f]  .bp-alert-icon {
    color: var(--bp-info-fg);
}

/* warning */
.bp-alert.bp-warning[b-v0v33bqv9f] {
    background-color: color-mix(in srgb, var(--bp-warning) 13%, transparent);
    border-color:     color-mix(in srgb, var(--bp-warning) 32%, transparent);
}
.bp-alert.bp-warning[b-v0v33bqv9f]  .bp-alert-icon {
    color: var(--bp-warning-fg);
}

/* error */
.bp-alert.bp-error[b-v0v33bqv9f] {
    background-color: color-mix(in srgb, var(--bp-error) 11%, transparent);
    border-color:     color-mix(in srgb, var(--bp-error) 28%, transparent);
}
.bp-alert.bp-error[b-v0v33bqv9f]  .bp-alert-icon {
    color: var(--bp-error-fg);
}

/* ── Plain — 조용한 표시 (대표 결정 2026-09-27) ──
   배경 틴트·그림자를 걷고 중립 테두리만 남긴다. 색은 아이콘에만 들어간다 — BpToast 와 같은 방식이다.
   ⚠️ variant 블록과 명시도가 같으므로(둘 다 .bp-alert.bp-* + scope 속성) **반드시 그 뒤에 둔다** — 순서로 이긴다. */
.bp-alert.bp-plain[b-v0v33bqv9f] {
    background-color: transparent;
    border-color: var(--bp-border-light);
    box-shadow: none;
}
/* _content/BPack.Components/Feedback/BpConfirmDialog.razor.rz.scp.css */
/* BpConfirmDialog 스코프드 스타일 */

.bp-modal-footer--center[b-uuvugxwitf] {
    justify-content: center;
}
/* _content/BPack.Components/Feedback/BpDialogProvider.razor.rz.scp.css */
/* BpDialogProvider 스코프드 스타일 */
/* _content/BPack.Components/Feedback/BpDrawer.razor.rz.scp.css */
/* BpDrawer — 가장자리 슬라이드 패널 */

.bp-drawer-container[b-apo2kytz6b] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    background: var(--bp-bg-overlay);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--bp-duration-base), visibility var(--bp-duration-base);
}

.bp-drawer-container.bp-drawer-open[b-apo2kytz6b] {
    visibility: visible;
    opacity: 1;
}

/* 모달리스 — 배경 투명 + 통과, 패널만 입력 수신 */
.bp-drawer-non-modal[b-apo2kytz6b] {
    background: transparent;
    pointer-events: none;
}
.bp-drawer-non-modal .bp-drawer[b-apo2kytz6b] {
    pointer-events: auto;
}

/* 배치별 정렬 */
.bp-drawer-right[b-apo2kytz6b] { justify-content: flex-end; }
.bp-drawer-left[b-apo2kytz6b] { justify-content: flex-start; }
.bp-drawer-top[b-apo2kytz6b] { align-items: flex-start; }
.bp-drawer-bottom[b-apo2kytz6b] { align-items: flex-end; }

/* 패널 */
.bp-drawer[b-apo2kytz6b] {
    display: flex;
    flex-direction: column;
    background: var(--bp-bg-surface);
    box-shadow: var(--bp-shadow-lg);
    max-width: 100%;
    max-height: 100%;
    transition: transform var(--bp-duration-base) var(--bp-ease-out);
}
.bp-drawer-right .bp-drawer[b-apo2kytz6b],
.bp-drawer-left .bp-drawer[b-apo2kytz6b] { width: 400px; height: 100%; }
.bp-drawer-top .bp-drawer[b-apo2kytz6b],
.bp-drawer-bottom .bp-drawer[b-apo2kytz6b] { height: 320px; width: 100%; }

/* 닫힘 = 화면 밖으로, 열림(.bp-drawer-open) = 제자리 */
.bp-drawer-right .bp-drawer[b-apo2kytz6b] { transform: translateX(100%); }
.bp-drawer-left .bp-drawer[b-apo2kytz6b] { transform: translateX(-100%); }
.bp-drawer-top .bp-drawer[b-apo2kytz6b] { transform: translateY(-100%); }
.bp-drawer-bottom .bp-drawer[b-apo2kytz6b] { transform: translateY(100%); }
.bp-drawer-open .bp-drawer[b-apo2kytz6b] { transform: translate(0, 0); }

/* 헤더 / 본문 / 푸터 */
.bp-drawer-header[b-apo2kytz6b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bp-border-light);
    flex-shrink: 0;
}
.bp-drawer-title[b-apo2kytz6b] {
    font-size: var(--bp-size-h3);
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-drawer-close[b-apo2kytz6b] { margin-left: auto; }

.bp-drawer-body[b-apo2kytz6b] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 20px;
    color: var(--bp-text-primary);
}

.bp-drawer-footer[b-apo2kytz6b] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--bp-border-light);
    flex-shrink: 0;
}
/* _content/BPack.Components/Feedback/BpLoading.razor.rz.scp.css */
/* BpLoading · BPack VI · 로고 마크 기반 로더
 * CSS 변수는 bp-variables.css 의 토큰 사용. 하드코딩 금지.
 * 애니메이션은 prefers-reduced-motion 규칙에 의해 자동 완화됨. */

/* ═════════════════════════════════════════════════
 *  MARK variant (기본) — BPack 로고 심볼 기반
 * ═════════════════════════════════════════════════ */
[b-h5icqh0rmh] .bp-loading-anim.bp-loading-mark {
    display: grid; place-items: center;
    position: relative;
}
[b-h5icqh0rmh] .bp-loading-anim.bp-loading-mark svg {
    width: 100%; height: 100%;
}

/* 둥근 사각형 (3도 까딱 이며 브랜드 색 유지) */
[b-h5icqh0rmh] .bp-loading-mark .bp-loading-square {
    fill: var(--bp-primary-500);
    transform-origin: 50% 50%;
    animation: bp-loading-square-rotate-b-h5icqh0rmh 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* B 스트로크 — dasharray 로 draw-in / draw-out 트레이스.
   display 를 토큰으로 뺐다: 스킨이 --bp-brand-default-display:none 으로 끄고
   자기 마크(--bp-brand-mark)를 대신 올린다. 기본값 inline 이라 무변화. */
[b-h5icqh0rmh] .bp-loading-mark .bp-loading-letter {
    display: var(--bp-brand-default-display, block);
    stroke: var(--bp-neutral-0);
    stroke-dasharray: 80 80;
    stroke-dashoffset: 80;
    animation: bp-loading-letter-draw-b-h5icqh0rmh 2.4s ease-in-out infinite;
}
/* Amber 시그널 닷 — pulse */
[b-h5icqh0rmh] .bp-loading-mark .bp-loading-dot-svg {
    fill: var(--bp-accent-500);
    transform-origin: 30px 6px;
    animation: bp-loading-dot-pulse-b-h5icqh0rmh 1.2s ease-in-out infinite;
}

@keyframes bp-loading-square-rotate-b-h5icqh0rmh {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
}
@keyframes bp-loading-letter-draw-b-h5icqh0rmh {
    0%   { stroke-dashoffset: 80; opacity: 0; }
    25%  { stroke-dashoffset: 0;  opacity: 1; }
    75%  { stroke-dashoffset: 0;  opacity: 1; }
    100% { stroke-dashoffset: -80; opacity: 0; }
}
@keyframes bp-loading-dot-pulse-b-h5icqh0rmh {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.5; }
}

/* Sizes · mark variant */
[b-h5icqh0rmh] .bp-loading-mark.bp-sm { width: 32px;  height: 32px; }
[b-h5icqh0rmh] .bp-loading-mark.bp-md { width: 56px;  height: 56px; }
[b-h5icqh0rmh] .bp-loading-mark.bp-lg { width: 88px;  height: 88px; }

/* ═════════════════════════════════════════════════
 *  DOTS variant — Amber 닷 3개 순차 pulse (인라인·컨트롤 내부)
 * ═════════════════════════════════════════════════ */
[b-h5icqh0rmh] .bp-loading-anim.bp-loading-dots {
    display: inline-flex; align-items: center;
    gap: var(--bp-space-1);
    height: var(--bp-loading-md);
}
[b-h5icqh0rmh] .bp-loading-dots .bp-loading-dot {
    width: 8px; height: 8px;
    border-radius: var(--bp-radius-circle);
    background: var(--bp-accent-500);
    animation: bp-loading-dots-bounce-b-h5icqh0rmh 1s ease-in-out infinite;
}
[b-h5icqh0rmh] .bp-loading-dots .bp-loading-dot:nth-child(2) { animation-delay: 0.15s; }
[b-h5icqh0rmh] .bp-loading-dots .bp-loading-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes bp-loading-dots-bounce-b-h5icqh0rmh {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* Sizes · dots */
[b-h5icqh0rmh] .bp-loading-dots.bp-sm { height: var(--bp-loading-sm); gap: 3px; }
[b-h5icqh0rmh] .bp-loading-dots.bp-sm .bp-loading-dot { width: 6px; height: 6px; }
[b-h5icqh0rmh] .bp-loading-dots.bp-md { height: var(--bp-loading-md); gap: var(--bp-space-1); }
[b-h5icqh0rmh] .bp-loading-dots.bp-lg { height: var(--bp-loading-lg); gap: var(--bp-space-2); }
[b-h5icqh0rmh] .bp-loading-dots.bp-lg .bp-loading-dot { width: 12px; height: 12px; }

/* ═════════════════════════════════════════════════
 *  RING variant — 이중 링 (Primary + Accent) 반대방향 회전
 * ═════════════════════════════════════════════════ */
[b-h5icqh0rmh] .bp-loading-anim.bp-loading-ring {
    position: relative;
    display: grid; place-items: center;
}
[b-h5icqh0rmh] .bp-loading-ring .bp-loading-ring {
    position: absolute; inset: 0;
    border-radius: var(--bp-radius-circle);
    border: 3px solid transparent;
    border-top-color: var(--bp-primary-500);
    border-right-color: var(--bp-primary-500);
    animation: bp-loading-ring-spin-b-h5icqh0rmh 1s linear infinite;
}
[b-h5icqh0rmh] .bp-loading-ring .bp-loading-ring-inner {
    inset: 6px;
    border-top-color: var(--bp-accent-500);
    border-right-color: var(--bp-accent-500);
    animation: bp-loading-ring-spin-b-h5icqh0rmh 1.4s linear infinite reverse;
}

@keyframes bp-loading-ring-spin-b-h5icqh0rmh {
    to { transform: rotate(360deg); }
}

/* Sizes · ring */
[b-h5icqh0rmh] .bp-loading-ring.bp-sm { width: var(--bp-loading-sm); height: var(--bp-loading-sm); }
[b-h5icqh0rmh] .bp-loading-ring.bp-md { width: var(--bp-loading-md); height: var(--bp-loading-md); }
[b-h5icqh0rmh] .bp-loading-ring.bp-lg { width: var(--bp-loading-lg); height: var(--bp-loading-lg); }

/* ═════════════════════════════════════════════════
 *  공통 : 텍스트 라벨
 * ═════════════════════════════════════════════════ */
[b-h5icqh0rmh] .bp-loading-text {
    font-size: var(--bp-size-small);
    color: var(--bp-text-secondary);
    font-weight: var(--bp-weight-medium);
}

/* ── 스킨 브랜드 마크 (F06) ──
   --bp-brand-mark 가 없으면 background-image:none 이라 아무것도 보이지 않는다.
   회전 사각형·펄스 닷은 그대로 두고 가운데 마크만 갈아끼운다. */
[b-h5icqh0rmh] .bp-loading-mark .bp-loading-brand-mark {
    position: absolute;
    inset: 22%;
    background-image: var(--bp-brand-mark, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}
/* _content/BPack.Components/Feedback/BpModal.razor.rz.scp.css */
/* BpModal 스코프드 스타일 */
/* _content/BPack.Components/Feedback/BpPopover.razor.rz.scp.css */
/* BpPopover 스코프드 스타일 */

/* 루트 요소 — ::deep 사용 불가 */
.bp-popover-wrapper[b-lgq888aebh] {
    position: relative;
    display: inline-flex;
}

/* 백드롭 — 팝오버 외부 클릭 시 닫기 */
[b-lgq888aebh] .bp-popover-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
}

/* 팝오버 본체 — position: fixed로 overflow 컨테이너 영향 없음 */
[b-lgq888aebh] .bp-popover {
    position: fixed;
    background: var(--bp-bg-surface);
    color: var(--bp-text-primary);
    border: 1px solid var(--bp-border-light);
    border-radius: 8px;
    padding: 12px;
    box-shadow: var(--bp-shadow-md);
    z-index: 999;
    min-width: 200px;
}
/* _content/BPack.Components/Feedback/BpReconnectModal.razor.rz.scp.css */
/* BpReconnectModal · Blazor Server 재연결 모달 (디자인 가이드 토큰) */
/* Blazor 가 components-reconnect-show/hide/failed/rejected 클래스로 제어 */

.bp-reconnect[b-yfdgp9dzrl] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--bp-z-modal);
    background: var(--bp-bg-overlay);
    align-items: center;
    justify-content: center;
}

.bp-reconnect.components-reconnect-show[b-yfdgp9dzrl],
.bp-reconnect.components-reconnect-failed[b-yfdgp9dzrl],
.bp-reconnect.components-reconnect-rejected[b-yfdgp9dzrl] {
    display: flex;
}

/* 상태별 content — 기본 숨김, 해당 상태 클래스에서만 노출 */
[b-yfdgp9dzrl] .bp-reconnect-show-content,
[b-yfdgp9dzrl] .bp-reconnect-failed-content,
[b-yfdgp9dzrl] .bp-reconnect-rejected-content {
    display: none;
}
.bp-reconnect.components-reconnect-show[b-yfdgp9dzrl]  .bp-reconnect-show-content        { display: block; }
.bp-reconnect.components-reconnect-failed[b-yfdgp9dzrl]  .bp-reconnect-failed-content    { display: block; }
.bp-reconnect.components-reconnect-rejected[b-yfdgp9dzrl]  .bp-reconnect-rejected-content { display: block; }

/* ── 진행 상태 다이얼로그 (재연결 시도 중) — 기존 카드 유지 ── */
[b-yfdgp9dzrl] .bp-reconnect-dialog {
    background-color: var(--bp-bg-surface);
    color: var(--bp-text-primary);
    border: 1px solid var(--bp-border-light);
    border-radius: var(--bp-radius-lg);
    padding: var(--bp-space-10) var(--bp-space-10) var(--bp-space-8);
    box-shadow: var(--bp-shadow-lg);
    text-align: center;
    min-width: 360px;
    max-width: 92vw;
}

[b-yfdgp9dzrl] .bp-reconnect-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--bp-space-4);
}

/* BpLoading inline 의 기준 상자 — mark lg(88px)와 같은 크기 */
[b-yfdgp9dzrl] .bp-reconnect-loader {
    position: relative;
    width: 88px;
    height: 88px;
}

[b-yfdgp9dzrl] .bp-reconnect-dialog .bp-reconnect-title {
    font-size: var(--bp-size-body);
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-primary);
    margin: 0 0 var(--bp-space-2);
}

[b-yfdgp9dzrl] .bp-reconnect-dialog .bp-reconnect-sub {
    font-size: var(--bp-size-small);
    color: var(--bp-text-tertiary);
    margin: 0;
    text-align: center;
}

/* ── 시스템 상태 패널 (실패/거부) — SCADA 인스파이어드 ── */
[b-yfdgp9dzrl] .bp-reconnect-panel {
    position: relative;
    background-color: var(--bp-bg-elevated);
    color: var(--bp-text-primary);
    border: 1px solid var(--bp-border-default);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow-lg);
    width: 460px;
    max-width: 92vw;
    overflow: hidden;
}

/* 좌상단 컬러 액센트 스트립 — 실패=red, 거부=amber */
[b-yfdgp9dzrl] .bp-reconnect-accent-strip {
    height: 4px;
    width: 100%;
}
[b-yfdgp9dzrl] .bp-reconnect-failed-accent .bp-reconnect-accent-strip {
    background: linear-gradient(90deg, var(--bp-error) 0%, color-mix(in srgb, var(--bp-error) 40%, transparent) 100%);
}
[b-yfdgp9dzrl] .bp-reconnect-rejected-accent .bp-reconnect-accent-strip {
    background: linear-gradient(90deg, var(--bp-warning) 0%, color-mix(in srgb, var(--bp-warning) 40%, transparent) 100%);
}

[b-yfdgp9dzrl] .bp-reconnect-panel-body {
    /* space-7(28px)은 토큰 미정의 → padding 선언 전체가 무효가 되어 여백이 0이었다. 정의된 토큰으로 교정. */
    padding: var(--bp-space-6);
    text-align: left;
}

/* 상태 핀 — 좌측 정렬, 펄스 도트 + 라벨 + 진단 코드 */
[b-yfdgp9dzrl] .bp-reconnect-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: color-mix(in srgb, var(--bp-text-primary) 6%, transparent);
    border: 1px solid var(--bp-border-light);
    border-radius: 999px;
    margin-bottom: var(--bp-space-5);
    font-family: var(--bp-font-mono, ui-monospace, "JetBrains Mono", monospace);
    font-size: 11px;
    font-weight: var(--bp-weight-semibold);
    letter-spacing: 0.06em;
}

[b-yfdgp9dzrl] .bp-reconnect-pulse-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
[b-yfdgp9dzrl] .bp-reconnect-failed-accent .bp-reconnect-pulse-dot {
    background-color: var(--bp-error);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-error) 70%, transparent);
    animation: bp-reconnect-pulse-red-b-yfdgp9dzrl 1.6s ease-out infinite;
}
[b-yfdgp9dzrl] .bp-reconnect-rejected-accent .bp-reconnect-pulse-dot {
    background-color: var(--bp-warning);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-warning) 70%, transparent);
    animation: bp-reconnect-pulse-amber-b-yfdgp9dzrl 1.6s ease-out infinite;
}

@keyframes bp-reconnect-pulse-red-b-yfdgp9dzrl {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-error) 70%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--bp-error) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-error) 0%, transparent); }
}
@keyframes bp-reconnect-pulse-amber-b-yfdgp9dzrl {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-warning) 70%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--bp-warning) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bp-warning) 0%, transparent); }
}

[b-yfdgp9dzrl] .bp-reconnect-status-label {
    color: var(--bp-text-primary);
}

[b-yfdgp9dzrl] .bp-reconnect-status-code {
    padding-left: 8px;
    margin-left: 4px;
    border-left: 1px solid var(--bp-border-default);
    color: var(--bp-text-tertiary);
    font-weight: var(--bp-weight-medium);
}

[b-yfdgp9dzrl] .bp-reconnect-panel .bp-reconnect-title {
    font-size: 18px;
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-primary);
    margin: 0 0 var(--bp-space-2);
    letter-spacing: -0.01em;
    text-align: center;
}

[b-yfdgp9dzrl] .bp-reconnect-panel .bp-reconnect-sub {
    font-size: var(--bp-size-small);
    color: var(--bp-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--bp-space-6);
}

/* 풀폭 액션 버튼 */
[b-yfdgp9dzrl] .bp-reconnect-action {
    width: 100%;
    justify-content: center;
}
/* _content/BPack.Components/Feedback/BpToastProvider.razor.rz.scp.css */
/* BpToastProvider 스코프드 스타일 */
/* _content/BPack.Components/Feedback/BpTooltip.razor.rz.scp.css */
/* BpTooltip 스코프드 스타일 */

/* 루트 요소 — ::deep 사용 불가 */
.bp-tooltip-wrapper[b-7q6igl77si] {
    position: relative;
    display: inline-flex;
}

/* 자식 요소 — ::deep 사용 */
[b-7q6igl77si] .bp-tooltip {
    position: absolute;
    background: var(--bp-tooltip-bg);
    color: var(--bp-bg-surface);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 999;
    pointer-events: none;
}

[b-7q6igl77si] .bp-tooltip.top {
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}

[b-7q6igl77si] .bp-tooltip.bottom {
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}

[b-7q6igl77si] .bp-tooltip.left {
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}

[b-7q6igl77si] .bp-tooltip.right {
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}
/* _content/BPack.Components/Grid/BpCardGrid.razor.rz.scp.css */
/* BpCardGrid 스코프드 스타일 */

/* ── 래퍼: 부모 flex 컨테이너를 채우도록 (BpSplitPanel 내부 동작 보장) ── */
.bp-card-grid[b-tehij8nci6] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* ── 그리드 테두리/둥근모서리 제거 (카드가 컨테이너 역할) ── */
[b-tehij8nci6] .bp-grid.bp-grid {
    border: none;
    border-radius: 0;
}

/* ── 그리드 툴바를 카드 헤더 영역으로 절대 위치 이동 ── */
[b-tehij8nci6] .bp-card-content .bp-grid-toolbar {
    position: absolute;
    top: -34px;
    right: 8px;   /* 컴팩트(34px 헤더): 버튼 우측 여백을 헤더 상/하 여백(≈8px)에 맞춤 */
    height: 34px;
    border-bottom: none;
    padding: 0;
    z-index: 1;
    background: transparent;
}

/* ── 비컴팩트 모드 (52px 헤더) ── */
.bp-card-grid:not(.bp-compact)[b-tehij8nci6]  .bp-card-content .bp-grid-toolbar {
    top: -52px;
    height: 52px;
    right: 16px;   /* 비컴팩트(52px 헤더): 상/하 여백(≈16px)에 맞춤 */
}

/* ── HeaderActions: BpGrid 툴바 내부에 CascadingValue로 렌더링됨 ── */
/* 별도 위치 조정 불필요 — 툴바 flex 레이아웃에 자연스럽게 참여 */
/* _content/BPack.Components/Grid/BpGrid.razor.rz.scp.css */
/* BpGrid 스코프드 스타일 */

/* ── 컨테이너 (루트 요소는 ::deep 없이 사용) ── */
.bp-grid[b-6demcxseao] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;              /* Containment (Phase 3) */
    min-height: 0;
    border: 1px solid var(--bp-border-light);
    border-radius: var(--bp-radius-lg);
    background-color: var(--bp-bg-surface);
    overflow: hidden;
    outline: none;
}

/* ── 툴바 ── */
[b-6demcxseao] .bp-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 34px;
    min-height: 34px;
    padding: 0 8px;
    border-bottom: 1px solid var(--bp-border-light);
    gap: 4px;
}

[b-6demcxseao] .bp-grid-toolbar-left {
    justify-content: flex-start;
}

[b-6demcxseao] .bp-grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── 테이블 래퍼 ── */
[b-6demcxseao] .bp-grid-table-wrapper {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ── 스크롤 모드 (고정 높이) ── */
[b-6demcxseao] .bp-grid-scroll {
    overflow: auto;
}

/* ── 테이블 ── */
[b-6demcxseao] .bp-grid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

[b-6demcxseao] .bp-grid-table-fixed {
    table-layout: fixed;
}

[b-6demcxseao] .bp-grid-table-fit-content {
    width: auto;
}

/* autoSizeColumns 가 열을 px 로 잠근 뒤에는 표 폭을 열 합으로 둔다(HR-SHELL-004).
   표 폭이 auto 면 브라우저가 table-layout:fixed 를 적용하지 않아(CSS 2.1 §17.5.2), 일괄 편집으로
   셀이 입력칸이 되는 순간 표가 컨테이너 폭으로 줄며 잠근 열 폭이 무시됐다. */
[b-6demcxseao] .bp-grid-table-fit-content[data-bp-autosized="1"] {
    width: max-content;
}

/* FitContent 모드: 셀 텍스트 줄바꿈 방지. 폭을 px 로 잠근(autoSizeColumns) 뒤
   리사이즈로 컬럼을 내용보다 좁히면 넘치는 텍스트는 말줄임으로 클립한다. */
[b-6demcxseao] .bp-grid-table-fit-content .bp-grid-td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 고정 헤더 ──
   thead 자체를 sticky 처리. position:sticky는 가장 가까운 스크롤 조상을 기준으로
   동작하므로, 그리드 자체(Height 지정 시 .bp-grid-scroll) 또는 부모 컨테이너
   (BpSplitPanel pane 등)가 스크롤되든 자동으로 붙는다.
   헤더가 멀티라인이라 높이가 늘어나도 헤더+필터행이 한 덩어리로 함께 따라간다.
   본문 frozen td(z-index:2)보다 위에 오도록 thead z-index:3 — frozen header th의
   inline z-index:3은 thead가 만드는 stacking context 안에서 형제 th 위로 올라간다. */
[b-6demcxseao] .bp-grid-thead-sticky {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ── 헤더 ── */
[b-6demcxseao] .bp-grid-th {
    height: var(--bp-row-default);
    padding: var(--bp-row-pad-default);
    text-align: left;
    font-size: var(--bp-size-xs);
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-secondary);
    background-color: var(--bp-bg-muted);
    box-shadow: inset 0 -1px 0 var(--bp-border-light);
    white-space: nowrap;
    user-select: none;
}

[b-6demcxseao] .bp-grid-th-resizable {
    position: relative;
    overflow: hidden;
}

/* ── 리사이즈 핸들 ── */
[b-6demcxseao] .bp-grid-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
}

[b-6demcxseao] .bp-grid-resize-handle::after {
    content: '';
    position: absolute;
    top: 25%;
    right: 0;
    width: 2px;
    height: 50%;
    background-color: transparent;
    border-radius: 1px;
    transition: background-color 0.15s;
}

[b-6demcxseao] .bp-grid-resize-handle:hover::after,
[b-6demcxseao] .bp-grid-resize-handle.active::after {
    background-color: var(--bp-primary-500);
}

[b-6demcxseao] .bp-grid-resize-handle.active::after {
    top: 0;
    height: 100%;
}

/* ── 정렬 ── */
[b-6demcxseao] .bp-grid-sortable {
    cursor: pointer;
}

[b-6demcxseao] .bp-grid-sortable:hover {
    background-color: var(--bp-bg-muted);
}

[b-6demcxseao] .bp-grid-sort-icon {
    display: inline-flex;
    margin-left: 4px;
    vertical-align: middle;
}

[b-6demcxseao] .bp-grid-sort-icon i {
    font-size: 10px;
    color: var(--bp-text-secondary);
}

[b-6demcxseao] .bp-grid-sort-inactive {
    color: var(--bp-text-disabled) !important;
}

/* ── 컬럼 재정렬 ── */
[b-6demcxseao] .bp-grid-dragging {
    opacity: 0.5;
}

[b-6demcxseao] .bp-grid-drop-before {
    box-shadow: inset 3px 0 0 0 var(--bp-primary-500), inset 0 -1px 0 var(--bp-border-light);
}

[b-6demcxseao] .bp-grid-drop-after {
    box-shadow: inset -3px 0 0 0 var(--bp-primary-500), inset 0 -1px 0 var(--bp-border-light);
}

[b-6demcxseao] th[draggable="true"] {
    cursor: grab;
}

[b-6demcxseao] th[draggable="true"]:active {
    cursor: grabbing;
}

/* ── 고정 컬럼 ── */
[b-6demcxseao] .bp-grid-th.bp-grid-frozen {
    background-color: var(--bp-bg-muted);
}

[b-6demcxseao] .bp-grid-td.bp-grid-frozen {
    background-color: var(--bp-bg-surface);
}

[b-6demcxseao] .bp-grid-row:hover .bp-grid-frozen {
    background-color: var(--bp-bg-muted);
}

[b-6demcxseao] .bp-grid-row-active .bp-grid-frozen {
    background-color: var(--bp-accent-50);
}

[b-6demcxseao] .bp-grid-row-selected .bp-grid-frozen {
    background-color: color-mix(in srgb, var(--bp-primary-500) 8%, transparent);
}

[b-6demcxseao] .bp-grid-frozen::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: var(--bp-border-light);
    pointer-events: none;
}

/* ── 세로 컬럼 구분선 ── */
[b-6demcxseao] .bp-grid-col-borders .bp-grid-th:not(.bp-grid-frozen),
[b-6demcxseao] .bp-grid-col-borders .bp-grid-td:not(.bp-grid-frozen) {
    border-right: 1px solid var(--bp-border-light);
}

[b-6demcxseao] .bp-grid-col-borders .bp-grid-th {
    text-align: center !important;
}

[b-6demcxseao] .bp-grid-col-borders .bp-grid-frozen::after {
    width: 2px;
    background-color: var(--bp-border-default);
}

/* ── 행 ── */
[b-6demcxseao] .bp-grid-row {
    transition: background-color var(--bp-duration-fast);
}

[b-6demcxseao] .bp-grid-row:hover {
    background-color: var(--bp-bg-muted);
}


/* ── 셀 ── */
[b-6demcxseao] .bp-grid-td {
    padding: var(--bp-row-pad-default);
    font-size: var(--bp-row-font-default);
    color: var(--bp-text-primary);
    vertical-align: middle;
    box-shadow: inset 0 -1px 0 var(--bp-border-light);
}

/* ── 밀도: Compact ── */
[b-6demcxseao] .bp-grid-compact .bp-grid-th {
    height: var(--bp-row-compact);
    padding: var(--bp-row-pad-compact);
    font-size: var(--bp-row-font-compact);
}

[b-6demcxseao] .bp-grid-compact .bp-grid-td {
    padding: var(--bp-row-pad-compact);
    font-size: var(--bp-row-font-compact);
}

[b-6demcxseao] .bp-grid-compact .bp-grid-row {
    height: var(--bp-row-compact);
}

/* ── 밀도: Comfortable ── */
[b-6demcxseao] .bp-grid-comfortable .bp-grid-th {
    height: var(--bp-row-comfortable);
    padding: var(--bp-row-pad-comfortable);
}

[b-6demcxseao] .bp-grid-comfortable .bp-grid-td {
    padding: var(--bp-row-pad-comfortable);
    font-size: var(--bp-row-font-comfortable);
}

[b-6demcxseao] .bp-grid-comfortable .bp-grid-row {
    height: var(--bp-row-comfortable);
}

/* ── 행 클릭 활성 상태 (체크박스 선택과 별도) · BpTree 와 동일: Accent(Amber) 배경 + 좌측 accent 바 ── */
/* `:hover` (spec 0,2,0) 보다 우선시되도록 `.bp-grid-row.bp-grid-row-active` 더블 클래스 사용. */
[b-6demcxseao] .bp-grid-row.bp-grid-row-active,
[b-6demcxseao] .bp-grid-row.bp-grid-row-active:hover {
    background-color: var(--bp-row-active-bg);
    color: var(--bp-row-active-text);
}
[b-6demcxseao] .bp-grid-row.bp-grid-row-active td:first-child {
    box-shadow: inset 3px 0 0 var(--bp-row-active-accent), inset 0 -1px 0 var(--bp-border-light);
}

/* 다크 테마 · active/selected 하이라이트는 bp-components.css 전역 규칙으로
 * 이동했다 (scoped CSS 의 [data-theme] 선택자는 html 에 스코프 attr 이 없어
 * 매칭되지 않는 문제 회피).
 */

[b-6demcxseao] .bp-grid-row-clickable {
    cursor: pointer;
}

/* ── 체크박스 선택 상태 ── */
[b-6demcxseao] .bp-grid-row-selected {
    background-color: color-mix(in srgb, var(--bp-primary-500) 8%, transparent) !important;
}

/* ── 편집 상태 — td padding 유지로 컬럼 폭 안정 ── */

/* readonly 셀 */
[b-6demcxseao] .bp-grid-row-editing .bp-grid-td:not(:has(.bp-grid-cell-edit)) {
    background-color: var(--bp-bg-muted);
}

/* editable 셀 */
[b-6demcxseao] .bp-grid-row-editing .bp-grid-td:has(.bp-grid-cell-edit) {
    background-color: var(--bp-bg-surface);
}

/* ── 신규 행 ── */
[b-6demcxseao] .bp-grid-row-new {
    background-color: color-mix(in srgb, var(--bp-success) 10%, transparent);
}

[b-6demcxseao] .bp-grid-row-new td:first-child {
    box-shadow: inset 3px 0 0 var(--bp-success), inset 0 -1px 0 var(--bp-border-light);
}

/* ── 삭제 마킹 행 ── */
[b-6demcxseao] .bp-grid-row-deleted {
    background-color: color-mix(in srgb, var(--bp-error) 10%, transparent);
    opacity: 0.6;
}

/* ── 변경(dirty) 행 ── */
[b-6demcxseao] .bp-grid-row-dirty td:first-child {
    box-shadow: inset 3px 0 0 var(--bp-warning), inset 0 -1px 0 var(--bp-border-light);
}

/* ── 고친 칸 — 오른쪽 위 모서리 삼각표 ── */
/* 배경 이미지로 그린다: 포커스 칸은 inset box-shadow, 선택 범위는 background-color 를 쓰므로 축이 겹치지 않고,
   고정 열(position: sticky)에도 영향을 주지 않는다(::after + position: relative 는 sticky 를 깬다). */
[b-6demcxseao] .bp-grid-td.bp-cell-dirty {
    background-image: linear-gradient(225deg, var(--bp-warning) 5px, transparent 5px);
    background-repeat: no-repeat;
    background-position: top right;
}

/* ── 체크박스 컬럼 ── */
[b-6demcxseao] .bp-grid-checkbox-col {
    width: 40px;
    min-width: 40px;
    text-align: center;
    padding: 0 8px;
}

/* ── 액션 컬럼 ── */
[b-6demcxseao] .bp-grid-action-col {
    width: 80px;
    min-width: 80px;
    text-align: center;
    padding: 0 4px;
}

[b-6demcxseao] .bp-grid-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* ── 행 추가 버튼 (액션 컬럼 헤더) ── */
[b-6demcxseao] .bp-grid-add-btn {
    margin: 0 auto;
}

[b-6demcxseao] .bp-grid-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-6demcxseao] .bp-grid-delete-all-btn:disabled {
    opacity: 0.65;
}

/* Compact 밀도: 헤더/행 액션 버튼(추가·삭제·편집, 아이콘 단독)을 xs(24px)로 축소.
   32px 버튼 + 셀 상하 패딩(4+4)=40px 로 행이 부푸는 것을 막아 텍스트 행 높이(32px)에 맞춘다. */
[b-6demcxseao] .bp-grid-compact .bp-grid-action-buttons .bp-btn:has(i:first-child:last-child) {
    width: var(--bp-h-xs);
    height: var(--bp-h-xs);
    min-width: var(--bp-h-xs);
    padding: 0;
}

/* ── 편집 입력 필드 ── */
[b-6demcxseao] .bp-grid-cell-edit {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}

[b-6demcxseao] .bp-grid-input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    font-size: inherit;
    color: var(--bp-text-primary);
    background-color: transparent;
    outline: none;
}
[b-6demcxseao] .bp-grid-input::placeholder {
    color: var(--bp-text-tertiary);
    opacity: 1;
}

[b-6demcxseao] .bp-grid-input-error {
    background-color: color-mix(in srgb, var(--bp-error) 12%, transparent);
}

/* number input 스피너 숨김 */
[b-6demcxseao] .bp-grid-input[type="number"]::-webkit-inner-spin-button,
[b-6demcxseao] .bp-grid-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-6demcxseao] .bp-grid-input[type="number"] {
    -moz-appearance: textfield;
}

[b-6demcxseao] .bp-grid-select {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    font-size: inherit;
    color: var(--bp-text-primary);
    background-color: transparent;
    outline: none;
    cursor: pointer;
}

/* native <option> popup — 브라우저 기본 OS 색을 쓰므로 surface 로 강제 */
[b-6demcxseao] .bp-grid-select option {
    background-color: var(--bp-bg-surface);
    color: var(--bp-text-primary);
}

[b-6demcxseao] .bp-grid-cell-edit:has(.bp-grid-checkbox-cell) {
    justify-content: center;
}

[b-6demcxseao] .bp-grid-checkbox-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── 유효성 오류 ── */
[b-6demcxseao] .bp-grid-validation-error {
    font-size: 11px;
    color: var(--bp-error-fg);
    margin-top: 1px;
}

/* ── 삭제 텍스트 ── */
[b-6demcxseao] .bp-grid-text-deleted,
[b-6demcxseao] .bp-grid-cell-deleted {
    text-decoration: line-through;
    color: var(--bp-text-tertiary);
}

/* ── 빈 상태 ── */
[b-6demcxseao] .bp-grid-empty {
    text-align: center;
    padding: 20px 16px;
    color: var(--bp-text-tertiary);
    font-size: var(--bp-size-small);
}

/* ── 툴바 버튼 ── */
[b-6demcxseao] .bp-grid-toolbar-btn {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── CSV 가져오기 label 비활성 상태 (label은 :disabled 미적용이므로 클래스로 처리) ── */
/* for 속성과 InputFile disabled로 클릭 자체는 차단됨. 시각만 동기화 + 툴팁은 유지. */
[b-6demcxseao] .bp-grid-toolbar-btn.bp-grid-import-disabled {
    opacity: 0.5;
}

/* ── 그리드 내 버튼 아이콘 축소 (toolbar + action + add) · 행 대비 과도한 24 → 16 ── */
[b-6demcxseao] .bp-grid-toolbar .bp-btn,
[b-6demcxseao] .bp-grid-action-buttons .bp-btn {
    height: var(--bp-h-sm);
    min-width: var(--bp-h-sm);
    padding: 0 8px;
}
/* 툴바 + 헤더(th) 액션 영역: Ghost 는 테두리로 가시성 확보 (bp-primary 필드형은 white 유지) */
[b-6demcxseao] .bp-grid-toolbar .bp-btn:not(.bp-primary),
[b-6demcxseao] .bp-grid-th .bp-grid-action-buttons .bp-btn:not(.bp-primary) {
    color: var(--bp-text-secondary);
    border: 1px solid var(--bp-border-default);
}
[b-6demcxseao] .bp-grid-toolbar .bp-btn:not(.bp-primary):hover,
[b-6demcxseao] .bp-grid-th .bp-grid-action-buttons .bp-btn:not(.bp-primary):hover {
    color: var(--bp-text-primary);
    background-color: var(--bp-bg-muted);
    border-color: var(--bp-border-strong);
}
/* 행(td) 내부 액션 버튼: 테두리 없이 tertiary(비활성 톤), 호버 시 활성화 */
[b-6demcxseao] .bp-grid-td .bp-grid-action-buttons .bp-btn:not(.bp-primary) {
    color: var(--bp-text-tertiary);
}
[b-6demcxseao] .bp-grid-td .bp-grid-action-buttons .bp-btn:not(.bp-primary):hover {
    color: var(--bp-text-primary);
    background-color: var(--bp-bg-muted);
}
[b-6demcxseao] .bp-grid-toolbar .bp-btn:has(i:first-child:last-child),
[b-6demcxseao] .bp-grid-action-buttons .bp-btn:has(i:first-child:last-child) {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
}
[b-6demcxseao] .bp-grid-toolbar .bp-btn i,
[b-6demcxseao] .bp-grid-action-buttons .bp-btn i,
[b-6demcxseao] .bp-grid-add-btn i,
[b-6demcxseao] .bp-grid-delete-all-btn i {
    font-size: var(--bp-control-icon-sm);
}
/* Delete 아이콘 전용 색 (헤더): 파괴 동작 암시 */
[b-6demcxseao] .bp-grid-th .bp-grid-action-buttons .bp-error-ghost,
[b-6demcxseao] .bp-grid-th .bp-grid-action-buttons .bp-btn.bp-error-ghost {
    color: var(--bp-error-fg);
}
[b-6demcxseao] .bp-grid-th .bp-grid-action-buttons .bp-btn.bp-error-ghost:hover {
    color: var(--bp-error-fg);
    background-color: color-mix(in srgb, var(--bp-error) 10%, transparent);
}
/* 행(td) 내 Delete: 비활성 톤 기본, 호버 시에만 빨강 표시 */
[b-6demcxseao] .bp-grid-td .bp-grid-action-buttons .bp-btn.bp-error-ghost:hover {
    color: var(--bp-error-fg);
    background-color: color-mix(in srgb, var(--bp-error) 10%, transparent);
}

/* ── 툴바 구분선 ── */
[b-6demcxseao] .bp-grid-toolbar-divider {
    width: 1px;
    height: 18px;
    background-color: var(--bp-border-default);
    margin: 0 2px;
}

/* ── 필터 행 ── */
[b-6demcxseao] .bp-grid-filter-row {
    background-color: var(--bp-bg-muted);
}

[b-6demcxseao] .bp-grid-filter-cell {
    padding: 4px 8px;
    vertical-align: middle;
    box-shadow: inset 0 -1px 0 var(--bp-border-light);
}

/* 테두리·radius·3-state 는 bp-components.css 의 "Input 3-state 표준" 이 소유. */
[b-6demcxseao] .bp-grid-filter-input {
    width: 100%;
    height: 26px;
    padding: 2px 6px;
    font-size: var(--bp-size-xs);
    color: var(--bp-text-primary);
    background-color: var(--bp-bg-surface);
    outline: none;
}

/* 필터 행 고정 컬럼 (배경색만 — 가로 sticky는 inline에서 처리) */
[b-6demcxseao] .bp-grid-filter-cell.bp-grid-frozen {
    background-color: var(--bp-bg-muted);
}

/* ── 셀 네비게이션 ── */

/* Cell navigation owns the focus indicator at td level. Native/global outlines inside
   the grid are suppressed so transient input focus cannot draw a second ring. */
.bp-grid:focus[b-6demcxseao],
.bp-grid:focus-visible[b-6demcxseao] {
    outline: none;
}

.bp-grid-cellnav[b-6demcxseao]  .bp-grid-input,
.bp-grid-cellnav[b-6demcxseao]  .bp-grid-select {
    border: 0;
    box-shadow: none;
    outline: none;
}

.bp-grid-cellnav[b-6demcxseao]  .bp-grid-input {
    appearance: none;
    -webkit-appearance: none;
}

.bp-grid-cellnav[b-6demcxseao]  .bp-grid-input:focus,
.bp-grid-cellnav[b-6demcxseao]  .bp-grid-input:focus-visible,
.bp-grid-cellnav[b-6demcxseao]  .bp-grid-select:focus,
.bp-grid-cellnav[b-6demcxseao]  .bp-grid-select:focus-visible {
    border: 0;
    box-shadow: none;
    outline: none;
}

/* 포커스 셀 (활성 그리드) */
[b-6demcxseao] .bp-grid-td.bp-cell-focus,
[b-6demcxseao] .bp-grid-td.bp-cell-focus-inactive {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bp-border-brand);
    z-index: 1;
    position: relative;
}

/* 포커스 셀 (편집 중) · 디자인 가이드 Signal Amber */
[b-6demcxseao] .bp-grid-td.bp-cell-focus.bp-cell-editing {
    box-shadow: inset 0 0 0 2px var(--bp-accent-fg);
}

/* 선택 범위 배경 */
[b-6demcxseao] .bp-grid-td.bp-cell-selected {
    background-color: color-mix(in srgb, var(--bp-primary-500) 8%, transparent);
}

/* 셀 포커스 상태: td 외곽선으로 포커스 표시를 통일 */

/* 셀 네비게이션 활성 시 행 hover 억제 */
[b-6demcxseao] .bp-grid-cellnav-active .bp-grid-row:hover {
    background-color: inherit;
}
/* _content/BPack.Components/Grid/BpGridPaginator.razor.rz.scp.css */
/* BpGridPaginator · 디자인 가이드 토큰 */

.bp-grid-paginator[b-8bqz7y60a9] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 좁은 패널(마스터-디테일 좌측 30% ≈260px)에서 한 줄에 안 들어가면
       flex-end 특성상 첫 항목(summary)이 왼쪽 경계 밖으로 밀려 클리핑된다.
       wrap 으로 넘치면 다음 줄로 재배치(요약 숨김 아님). row-gap 8 / col-gap 16. */
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px 16px;
    border-top: 1px solid var(--bp-border-light);
    background-color: var(--bp-bg-surface);
    color: var(--bp-text-primary);
}

.bp-grid-paginator-summary[b-8bqz7y60a9] {
    font-size: var(--bp-size-small);
    color: var(--bp-text-secondary);
    white-space: nowrap;
}

/* 테두리·radius·3-state 는 bp-components.css 의 "Input 3-state 표준" 이 소유. */
.bp-grid-paginator-size select[b-8bqz7y60a9] {
    height: 30px;
    padding: 0 24px 0 8px;
    font-size: var(--bp-size-small);
    color: var(--bp-text-primary);
    background-color: var(--bp-bg-surface);
    cursor: pointer;
    outline: none;
    appearance: auto;
}

.bp-grid-paginator-controls[b-8bqz7y60a9] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.bp-grid-page-btn[b-8bqz7y60a9] {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--bp-text-secondary);
    border-radius: var(--bp-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--bp-size-small);
    transition: background-color var(--bp-duration-fast), color var(--bp-duration-fast);
}

.bp-grid-page-btn:hover:not(:disabled)[b-8bqz7y60a9] {
    background-color: var(--bp-bg-muted);
    color: var(--bp-text-primary);
}

.bp-grid-page-btn.active[b-8bqz7y60a9] {
    background-color: var(--bp-primary-500);
    color: var(--bp-neutral-0);
}

.bp-grid-page-btn.active:hover[b-8bqz7y60a9] {
    background-color: var(--bp-primary-600);
}

.bp-grid-page-btn:disabled[b-8bqz7y60a9] {
    color: var(--bp-text-disabled);
    cursor: not-allowed;
}

.bp-grid-page-btn i[b-8bqz7y60a9] {
    font-size: 14px;
}

/* 다크 테마 · active 반투명 하이라이트 */
[data-theme="dark"] .bp-grid-page-btn:hover:not(:disabled)[b-8bqz7y60a9] {
    background-color: color-mix(in srgb, var(--bp-primary-500) 14%, transparent);
}
[data-theme="dark"] .bp-grid-page-btn.active[b-8bqz7y60a9] {
    background-color: color-mix(in srgb, var(--bp-primary-500) 30%, transparent);
    color: var(--bp-primary-200);
}
[data-theme="dark"] .bp-grid-page-btn.active:hover[b-8bqz7y60a9] {
    background-color: color-mix(in srgb, var(--bp-primary-500) 38%, transparent);
}
/* _content/BPack.Components/Inputs/BpCheckbox.razor.rz.scp.css */
/* BpCheckbox 스코프드 스타일 */
/* _content/BPack.Components/Inputs/BpCheckList.razor.rz.scp.css */
/* BpCheckList 스코프드 스타일 */

/* 루트 요소는 ::deep 없이 사용 */
.bp-checklist[b-vsxd2n2d5q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;
    min-width: 200px;
}

[b-vsxd2n2d5q] .bp-checklist-label {
    font-size: 14px;
    color: var(--bp-text-primary);
}

/* 테두리·radius·3-state 는 bp-components.css 의 "Input 3-state 표준" 이 소유. */
[b-vsxd2n2d5q] .bp-checklist-container {
    max-height: var(--bp-checklist-height, 150px);
    overflow-y: auto;
    background-color: var(--bp-bg-surface);
}

[b-vsxd2n2d5q] .bp-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 0.15s;
}

[b-vsxd2n2d5q] .bp-checklist-item:hover {
    background-color: var(--bp-border-light);
}

[b-vsxd2n2d5q] .bp-checklist-item.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

[b-vsxd2n2d5q] .bp-checklist-item.disabled:hover {
    background-color: transparent;
}

[b-vsxd2n2d5q] .bp-checklist-item-label {
    font-size: 14px;
    color: var(--bp-text-primary);
    user-select: none;
}
/* _content/BPack.Components/Inputs/BpDateInput.razor.rz.scp.css */
/* BpDateInput — 컴팩트 모드 (그리드 셀용) */
.bp-date-input-compact[b-pav4ucf674] {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.bp-date-input-compact input[type="text"][b-pav4ucf674] {
    flex: 1;
    min-width: 0;
    padding-right: 24px;
}

/* BpDateInput — 일반 모드 래퍼.
   테두리·radius·3-state 는 bp-components.css 의 "Input 3-state 표준" 이 소유. */
.bp-date-input-wrapper[b-pav4ucf674] {
    min-width: 0;
    width: fit-content;
    height: var(--bp-input-height);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    margin-right: 4px;
    background-color: var(--bp-bg-surface);
    position: relative;
}

/* 표준 사이즈 (xs/sm/md/lg/xl) — BpButton/BpInput 과 동일 토큰 */
.bp-date-input-wrapper.bp-xs[b-pav4ucf674] { height: var(--bp-h-xs); padding: 0 var(--bp-control-pad-xs); font-size: var(--bp-control-font-xs); }
.bp-date-input-wrapper.bp-sm[b-pav4ucf674] { height: var(--bp-h-sm); padding: 0 var(--bp-control-pad-sm); font-size: var(--bp-control-font-sm); }
.bp-date-input-wrapper.bp-md[b-pav4ucf674] { height: var(--bp-h-md); padding: 0 var(--bp-control-pad-md); font-size: var(--bp-control-font-md); }
.bp-date-input-wrapper.bp-lg[b-pav4ucf674] { height: var(--bp-h-lg); padding: 0 var(--bp-control-pad-lg); font-size: var(--bp-control-font-lg); }
.bp-date-input-wrapper.bp-xl[b-pav4ucf674] { height: var(--bp-h-xl); padding: 0 var(--bp-control-pad-xl); font-size: var(--bp-control-font-xl); }

.bp-date-input-wrapper input[type="text"][b-pav4ucf674] {
    flex: 1;
    min-width: 0;
    color: var(--bp-text-primary);
    background-color: transparent;
}

.bp-date-input-wrapper input[type="text"][b-pav4ucf674]::placeholder {
    color: var(--bp-text-tertiary);
}

/* 숨겨진 네이티브 날짜 입력 */
.bp-date-input-hidden[b-pav4ucf674] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* 달력 아이콘 버튼 */
.bp-date-input-icon[b-pav4ucf674] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--bp-text-secondary);
    font-size: 14px;
    flex-shrink: 0;
}

.bp-date-input-compact .bp-date-input-icon[b-pav4ucf674] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.bp-date-input-icon:hover[b-pav4ucf674] {
    color: var(--bp-primary-fg);
}

.bp-date-input-icon:disabled[b-pav4ucf674] {
    cursor: not-allowed;
    color: var(--bp-text-tertiary);
}

/* 테두리 제거 */
.bp-date-input-wrapper.bp-borderless[b-pav4ucf674] {
    border: none;
}

/* 라벨 위치: top-right */
.bp-label-top-right > span[b-pav4ucf674] {
    justify-content: flex-end;
}

/* 라벨 위치: left */
.bp-label-left[b-pav4ucf674] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-left > span[b-pav4ucf674] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-left > .bp-date-input-wrapper[b-pav4ucf674] {
    flex: 1;
    min-width: 0;
}

/* 라벨 위치: right */
.bp-label-right[b-pav4ucf674] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-right > span[b-pav4ucf674] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-right > .bp-date-input-wrapper[b-pav4ucf674] {
    flex: 1;
    min-width: 0;
}

/* 비활성화 상태 */
.bp-date-input-wrapper:has(input:disabled)[b-pav4ucf674] {
    background-color: var(--bp-border-light);
    border-color: var(--bp-border-light);
    cursor: not-allowed;
}

.bp-date-input-wrapper input:disabled[b-pav4ucf674] {
    color: var(--bp-text-tertiary);
    cursor: not-allowed;
}
/* _content/BPack.Components/Inputs/BpDatePicker.razor.rz.scp.css */
/* BpDatePicker 스코프드 스타일 — 브라우저 네이티브 달력 UI 활성화 */

/* 글로벌 CSS가 숨기는 달력 아이콘 표시 복원 */
[b-r1ufqvauie] .bp-datafield input::-webkit-calendar-picker-indicator {
    display: block;
    -webkit-appearance: auto;
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* 글로벌 :before 오버레이 제거 (클릭 차단 방지) */
[b-r1ufqvauie] .bp-datafield input[type="date"]:before {
    display: none;
}

/* 라벨 위치: top-right */
.bp-label-top-right > span[b-r1ufqvauie] {
    justify-content: flex-end;
}

/* 라벨 위치: left */
.bp-label-left[b-r1ufqvauie] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-left > span[b-r1ufqvauie] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-left > .bp-datafield[b-r1ufqvauie] {
    flex: 1;
    min-width: 0;
}

/* 라벨 위치: right */
.bp-label-right[b-r1ufqvauie] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-right > span[b-r1ufqvauie] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-right > .bp-datafield[b-r1ufqvauie] {
    flex: 1;
    min-width: 0;
}

/* 테두리 제거 */
[b-r1ufqvauie] .bp-borderless {
    border: none;
}
/* _content/BPack.Components/Inputs/BpDateRangePicker.razor.rz.scp.css */
/* BpDateRangePicker — 시작~종료 날짜 선택 */

.bp-daterange[b-7n0t0sg4je] {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bp-daterange-label[b-7n0t0sg4je] {
    font-size: var(--bp-size-xs);
    font-weight: var(--bp-weight-medium);
    color: var(--bp-text-secondary);
}

.bp-daterange-row[b-7n0t0sg4je] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 두 날짜 입력을 균등 분배 */
.bp-daterange-row[b-7n0t0sg4je]  .bp-textfield-box {
    flex: 1 1 0;
    min-width: 0;
}

/* ⛔ BpDateInput 의 **안쪽 래퍼**까지 줄여야 한다(F43).
   그 래퍼는 width: fit-content 라 바깥 상자가 flex 로 줄어도 자기 max-content(312px)를
   지켜 밖으로 넘친다 — Width 를 준 소비처에서 두 칸이 최대 140px 겹쳤다(독립 Review blocker).
   BpDatePicker 때는 안쪽이 fit-content 가 아니라 안 드러났다. */
.bp-daterange-row[b-7n0t0sg4je]  .bp-date-input-wrapper {
    width: auto;
    min-width: 0;
    margin-right: 0;
}

.bp-daterange-sep[b-7n0t0sg4je] {
    flex-shrink: 0;
    color: var(--bp-text-tertiary);
}
/* _content/BPack.Components/Inputs/BpDropdownCheckList.razor.rz.scp.css */
/* BpDropdownCheckList 스코프드 스타일 */

/* 루트 요소는 ::deep 없이 사용 */
.bp-dcl[b-og05xaq7mp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    width: fit-content;
    min-width: 200px;
}

.bp-dcl-disabled[b-og05xaq7mp] {
    pointer-events: none;
    opacity: 0.5;
}

/* 라벨 위치: top-right */
.bp-label-top-right > .bp-dcl-label[b-og05xaq7mp] {
    text-align: right;
}

/* 라벨 위치: left */
.bp-label-left[b-og05xaq7mp] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-left > .bp-dcl-label[b-og05xaq7mp] {
    white-space: nowrap;
}

/* 라벨 위치: right */
.bp-label-right[b-og05xaq7mp] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-right > .bp-dcl-label[b-og05xaq7mp] {
    white-space: nowrap;
}

/* 테두리 제거 */
[b-og05xaq7mp] .bp-borderless {
    border: none;
}

[b-og05xaq7mp] .bp-dcl-label {
    font-size: 14px;
    color: var(--bp-text-primary);
}

/* 테두리·radius·3-state 는 bp-components.css 의 "Input 3-state 표준" 이 소유. */
[b-og05xaq7mp] .bp-dcl-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 160px;
    height: var(--bp-h-md);
    padding: 0 var(--bp-control-pad-md);
    font-size: var(--bp-control-font-md);
    background-color: var(--bp-bg-surface);
    cursor: pointer;
    box-sizing: border-box;
}

/* 5-tier 사이즈 — xs / sm / md(기본) / lg / xl */
.bp-dcl.bp-xs .bp-dcl-trigger[b-og05xaq7mp] {
    min-width: 80px;
    height: var(--bp-h-xs);
    padding: 0 var(--bp-control-pad-xs);
    font-size: var(--bp-control-font-xs);
}
.bp-dcl.bp-sm .bp-dcl-trigger[b-og05xaq7mp] {
    min-width: 116px;
    height: var(--bp-h-sm);
    padding: 0 var(--bp-control-pad-sm);
    font-size: var(--bp-control-font-sm);
}
.bp-dcl.bp-md .bp-dcl-trigger[b-og05xaq7mp] {
    height: var(--bp-h-md);
    padding: 0 var(--bp-control-pad-md);
    font-size: var(--bp-control-font-md);
}
.bp-dcl.bp-lg .bp-dcl-trigger[b-og05xaq7mp] {
    height: var(--bp-h-lg);
    padding: 0 var(--bp-control-pad-lg);
    font-size: var(--bp-control-font-lg);
}
.bp-dcl.bp-xl .bp-dcl-trigger[b-og05xaq7mp] {
    height: var(--bp-h-xl);
    padding: 0 var(--bp-control-pad-xl);
    font-size: var(--bp-control-font-xl);
}

[b-og05xaq7mp] .bp-dcl-display {
    font-size: 14px;
    color: var(--bp-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

[b-og05xaq7mp] .bp-dcl-display.placeholder {
    color: var(--bp-text-tertiary);
}

[b-og05xaq7mp] .bp-dcl-arrow {
    display: flex;
    align-items: center;
    margin-left: 8px;
    color: var(--bp-text-tertiary);
    font-size: 12px;
    flex-shrink: 0;
}

[b-og05xaq7mp] .bp-dcl-dropdown {
    position: fixed;
    z-index: 999;
    overflow-y: auto;
    resize: vertical; /* 우측하단 핸들로 세로 크기 조절 (상한=뷰포트, updatePosition 이 설정) */
    border: 1px solid var(--bp-text-tertiary);
    border-radius: var(--bp-radius-sm);
    background-color: var(--bp-bg-surface);
    box-shadow: var(--bp-shadow-md);
}

[b-og05xaq7mp] .bp-dcl-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 0.15s;
}

[b-og05xaq7mp] .bp-dcl-item:hover {
    background-color: var(--bp-border-light);
}

[b-og05xaq7mp] .bp-dcl-item.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

[b-og05xaq7mp] .bp-dcl-item.disabled:hover {
    background-color: transparent;
}

[b-og05xaq7mp] .bp-dcl-select-all {
    border-bottom: 1px solid var(--bp-border-default);
}

[b-og05xaq7mp] .bp-dcl-item-label {
    font-size: 14px;
    color: var(--bp-text-primary);
    user-select: none;
    white-space: nowrap;
}

/* ── 검색 (Searchable) ── */
[b-og05xaq7mp] .bp-dcl-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px;
    background-color: var(--bp-bg-surface);
    border-bottom: 1px solid var(--bp-border-light);
}

[b-og05xaq7mp] .bp-dcl-search-input {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--bp-border-default);
    border-radius: var(--bp-radius-sm);
    background-color: var(--bp-bg-surface);
    color: var(--bp-text-primary);
    font-size: 13px;
    box-sizing: border-box;
}

[b-og05xaq7mp] .bp-dcl-search-input:focus {
    border-color: var(--bp-primary-500);
    outline: none;
}

[b-og05xaq7mp] .bp-dcl-search-input::placeholder {
    color: var(--bp-text-tertiary);
}

[b-og05xaq7mp] .bp-dcl-empty {
    padding: 12px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--bp-text-tertiary);
}

[b-og05xaq7mp] .bp-dcl-item.highlighted {
    background-color: color-mix(in srgb, var(--bp-primary-500) 8%, transparent);
}
/* _content/BPack.Components/Inputs/BpFileUpload.razor.rz.scp.css */
/* BpFileUpload 스코프드 스타일 */
/* 루트 요소는 ::deep 없이 사용 */
.bp-file-upload[b-8deei1y8ha] {
    display: inline-block;
    cursor: pointer;
}

/* 비활성화 상태 */
.bp-file-upload:has([disabled])[b-8deei1y8ha] {
    cursor: default;
    pointer-events: none;
}
/* _content/BPack.Components/Inputs/BpInput.razor.rz.scp.css */
/* BpInput 스코프드 스타일 */

/* 라벨 위치: top-right — 라벨을 우측 상단에 배치 */
.bp-label-top-right > span[b-y0wwi2enys] {
    justify-content: flex-end;
}

/* 라벨 위치: left — 라벨을 입력 왼쪽에 수평 배치 */
.bp-label-left[b-y0wwi2enys] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-left > span[b-y0wwi2enys] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-left > .bp-textfield[b-y0wwi2enys] {
    flex: 1;
    min-width: 0;
}

/* 라벨 위치: right — 라벨을 입력 오른쪽에 수평 배치 */
.bp-label-right[b-y0wwi2enys] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-right > span[b-y0wwi2enys] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-right > .bp-textfield[b-y0wwi2enys] {
    flex: 1;
    min-width: 0;
}

/* 테두리 제거 */
[b-y0wwi2enys] .bp-borderless {
    border: none;
}

/* ── 비밀번호 보기/숨기기 토글 (F25 · HR-MGT-002) ──
   .bp-textfield 가 flex 라 버튼은 입력 오른쪽에 자리를 잡는다 — 겹치지 않으므로
   absolute 배치도, 입력 오른쪽 여백도 필요 없다. 세로 가운데는 컨테이너의 align-items 가 맡는다. */
/* 모양(테두리·배경·색·hover·disabled)은 전역 .bp-password-toggle 이 소유한다 — 여기서는 배치만 정한다. */
[b-y0wwi2enys] .bp-password-toggle {
    flex: none;
}

/* 아이콘은 사이즈 등급을 따른다(전역 .bp-textfield i 의 고정 20px 대신). */
[b-y0wwi2enys] .bp-textfield.bp-xs .bp-password-toggle i { font-size: var(--bp-control-icon-xs); }
[b-y0wwi2enys] .bp-textfield.bp-sm .bp-password-toggle i { font-size: var(--bp-control-icon-sm); }
[b-y0wwi2enys] .bp-textfield.bp-md .bp-password-toggle i { font-size: var(--bp-control-icon-md); }
[b-y0wwi2enys] .bp-textfield.bp-lg .bp-password-toggle i { font-size: var(--bp-control-icon-lg); }
[b-y0wwi2enys] .bp-textfield.bp-xl .bp-password-toggle i { font-size: var(--bp-control-icon-xl); }

/* 전역 규칙 둘이 `.bp-textfield-box` 안의 `i` 를 「장식 아이콘(IconClass)이 있다」로 읽는다
   (bp-components.css:502 폭 · :517 글자색). 토글 버튼이 품은 <i> 가 그 조건에 걸려,
   장식 아이콘이 없는 입력의 **폭**과 **비활성 글자색**이 함께 어긋난다 — 둘 다 여기서 되돌린다.
   ⚠️ 루트 요소로 시작하는 셀렉터라 ::deep 을 쓰지 않는다(쓰면 조상에 scope 를 요구해 죽는다). */
.bp-textfield-box:has(.bp-password-toggle):not(:has(.bp-textfield > i)) .bp-textfield[b-y0wwi2enys] {
    width: 100%;
}

.bp-textfield-box:has(.bp-password-toggle):not(:has(.bp-textfield > i)) .bp-textfield input:disabled[b-y0wwi2enys] {
    color: var(--bp-text-disabled);
}
/* _content/BPack.Components/Inputs/BpLookup.razor.rz.scp.css */
/* BpLookup 스코프드 스타일 */

.bp-lookup[b-c1s2698eyn] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.bp-lookup-disabled[b-c1s2698eyn] {
    opacity: 0.5;
    pointer-events: none;
}

/* 라벨 위치: top-right */
.bp-label-top-right > .bp-lookup-label[b-c1s2698eyn] {
    text-align: right;
}

/* 라벨 위치: left */
.bp-label-left[b-c1s2698eyn] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-left > .bp-lookup-label[b-c1s2698eyn] {
    white-space: nowrap;
}

/* 라벨 위치: right */
.bp-label-right[b-c1s2698eyn] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-right > .bp-lookup-label[b-c1s2698eyn] {
    white-space: nowrap;
}

/* 테두리 제거 */
[b-c1s2698eyn] .bp-borderless {
    border: none;
}

/* ── 컴팩트 모드 (그리드 셀 내부용) ── */

.bp-lookup-compact[b-c1s2698eyn]  .bp-lookup-input-wrapper {
    height: 30px;
}

.bp-lookup-compact[b-c1s2698eyn]  .bp-lookup-input {
    padding: 0 6px;
    font-size: 13px;
}

.bp-lookup-compact[b-c1s2698eyn]  .bp-lookup-clear,
.bp-lookup-compact[b-c1s2698eyn]  .bp-lookup-toggle {
    padding: 2px 4px;
    font-size: 11px;
}

[b-c1s2698eyn] .bp-lookup-label {
    font-size: 14px;
    color: var(--bp-text-secondary);
    font-weight: 500;
}

/* 테두리·radius·3-state 는 bp-components.css 의 "Input 3-state 표준" 이 소유. */
[b-c1s2698eyn] .bp-lookup-input-wrapper {
    display: flex;
    align-items: center;
    height: var(--bp-h-md);
    background-color: var(--bp-bg-surface);
}

/* 5-tier 사이즈 — xs / sm / md(기본) / lg / xl */
[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-xs { height: var(--bp-h-xs); }
[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-sm { height: var(--bp-h-sm); }
[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-md { height: var(--bp-h-md); }
[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-lg { height: var(--bp-h-lg); }
[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-xl { height: var(--bp-h-xl); }

[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-xs .bp-lookup-input { padding: 0 var(--bp-control-pad-xs); font-size: var(--bp-control-font-xs); }
[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-sm .bp-lookup-input { padding: 0 var(--bp-control-pad-sm); font-size: var(--bp-control-font-sm); }
[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-md .bp-lookup-input { padding: 0 var(--bp-control-pad-md); font-size: var(--bp-control-font-md); }
[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-lg .bp-lookup-input { padding: 0 var(--bp-control-pad-lg); font-size: var(--bp-control-font-lg); }
[b-c1s2698eyn] .bp-lookup-input-wrapper.bp-xl .bp-lookup-input { padding: 0 var(--bp-control-pad-xl); font-size: var(--bp-control-font-xl); }

[b-c1s2698eyn] .bp-lookup-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 8px;
    font-size: 14px;
    background: transparent;
    color: var(--bp-text-primary);
    min-width: 0;
    height: 100%;
}

[b-c1s2698eyn] .bp-lookup-input::placeholder {
    color: var(--bp-text-tertiary);
}

[b-c1s2698eyn] .bp-lookup-clear,
[b-c1s2698eyn] .bp-lookup-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px 6px;
    color: var(--bp-text-tertiary);
    font-size: 12px;
}

[b-c1s2698eyn] .bp-lookup-clear:hover,
[b-c1s2698eyn] .bp-lookup-toggle:hover {
    color: var(--bp-text-primary);
}

[b-c1s2698eyn] .bp-lookup-dropdown {
    position: fixed;
    z-index: 10000;
    background: var(--bp-bg-elevated);
    border: 1px solid var(--bp-text-tertiary);
    border-radius: var(--bp-radius-sm);
    box-shadow: var(--bp-shadow-md);
    overflow: auto;
}

[b-c1s2698eyn] .bp-lookup-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

[b-c1s2698eyn] .bp-lookup-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

[b-c1s2698eyn] .bp-lookup-table th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--bp-text-secondary);
    background: var(--bp-border-light);
    border-bottom: 1px solid var(--bp-border-default);
    white-space: nowrap;
}

[b-c1s2698eyn] .bp-lookup-table td {
    padding: 6px 8px;
    color: var(--bp-text-primary);
    border-bottom: 1px solid var(--bp-border-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-c1s2698eyn] .bp-lookup-row {
    cursor: pointer;
    transition: background 0.1s;
}

[b-c1s2698eyn] .bp-lookup-row:hover,
[b-c1s2698eyn] .bp-lookup-row.highlighted {
    background: color-mix(in srgb, var(--bp-primary-500) 8%, transparent);
}

[b-c1s2698eyn] .bp-lookup-row.selected {
    background: color-mix(in srgb, var(--bp-primary-500) 16%, transparent);
    font-weight: 500;
}

[b-c1s2698eyn] .bp-lookup-row.highlighted.selected {
    background: color-mix(in srgb, var(--bp-primary-500) 20%, transparent);
}

[b-c1s2698eyn] .bp-lookup-empty {
    text-align: center;
    color: var(--bp-text-tertiary);
    padding: 16px 8px !important;
    font-style: italic;
}
/* _content/BPack.Components/Inputs/BpLookupColumn.razor.rz.scp.css */
/* BpLookupColumn 스코프드 스타일 */
/* _content/BPack.Components/Inputs/BpRadio.razor.rz.scp.css */
/* BpRadio 스코프드 스타일 */
/* _content/BPack.Components/Inputs/BpSelect.razor.rz.scp.css */
/* BpSelect 스코프드 스타일 */

/* 라벨 위치: top-right */
.bp-label-top-right > span[b-vouz5vqwlp] {
    justify-content: flex-end;
}

/* 라벨 위치: left */
.bp-label-left[b-vouz5vqwlp] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-left > span[b-vouz5vqwlp] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-left > .bp-select-box[b-vouz5vqwlp] {
    flex: 1;
    min-width: 0;
}

/* 라벨 위치: right */
.bp-label-right[b-vouz5vqwlp] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-right > span[b-vouz5vqwlp] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-right > .bp-select-box[b-vouz5vqwlp] {
    flex: 1;
    min-width: 0;
}

/* 테두리 제거 — select 요소의 border를 제거 */
[b-vouz5vqwlp] .bp-borderless select {
    border: none;
}
/* _content/BPack.Components/Inputs/BpSelectGeneric.razor.rz.scp.css */
/* BpSelectGeneric 스코프드 스타일 */

/* 라벨 위치: top-right */
.bp-label-top-right > span[b-icak4234bh] {
    justify-content: flex-end;
}

/* 라벨 위치: left */
.bp-label-left[b-icak4234bh] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-left > span[b-icak4234bh] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-left > .bp-select-box[b-icak4234bh] {
    flex: 1;
    min-width: 0;
}

/* 라벨 위치: right */
.bp-label-right[b-icak4234bh] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.bp-label-right > span[b-icak4234bh] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.bp-label-right > .bp-select-box[b-icak4234bh] {
    flex: 1;
    min-width: 0;
}

/* 테두리 제거 — select 요소의 border를 제거 */
[b-icak4234bh] .bp-borderless select {
    border: none;
}
/* _content/BPack.Components/Inputs/BpTextArea.razor.rz.scp.css */
/* BpTextArea 스코프드 스타일 */

/* .bp-textfield 래퍼를 textarea에 맞게 오버라이드 */
[b-c48l1xl2sk] .bp-textfield {
    height: auto;
    align-items: stretch;
    padding: 8px 12px;
}

[b-c48l1xl2sk] textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--bp-text-primary);
    resize: vertical;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
}

[b-c48l1xl2sk] textarea::placeholder {
    color: var(--bp-text-tertiary);
}

/* 라벨 위치: top-right */
.bp-label-top-right > span[b-c48l1xl2sk] {
    justify-content: flex-end;
}

/* 라벨 위치: left */
.bp-label-left[b-c48l1xl2sk] {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.bp-label-left > span[b-c48l1xl2sk] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
    margin-top: 8px;
}

.bp-label-left > .bp-textfield[b-c48l1xl2sk] {
    flex: 1;
    min-width: 0;
}

/* 라벨 위치: right */
.bp-label-right[b-c48l1xl2sk] {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.bp-label-right > span[b-c48l1xl2sk] {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
    margin-top: 8px;
}

.bp-label-right > .bp-textfield[b-c48l1xl2sk] {
    flex: 1;
    min-width: 0;
}

/* 테두리 제거 */
[b-c48l1xl2sk] .bp-borderless {
    border: none;
}

/* Fill 모드 — 부모(flex-column)의 남은 세로 공간을 채운다.
   미리사이즈 시엔 textarea rows 기본 높이, 리사이즈로 커진 컨테이너에선 height:100% 로 늘어남.
   모달 우측하단 코너 리사이즈 + .bp-dialog-fill-body 조합에서 사용. */
.bp-textfield-box.bp-fill[b-c48l1xl2sk] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bp-textfield-box.bp-fill[b-c48l1xl2sk]  .bp-textfield {
    flex: 1 1 auto;
    min-height: 0;
}

.bp-textfield-box.bp-fill[b-c48l1xl2sk]  textarea {
    height: 100%;
    resize: none;
}
/* _content/BPack.Components/Inputs/BpToggle.razor.rz.scp.css */
/* BpToggle 스코프드 스타일 */

/* 외부 라벨 기본 스타일 */
[b-kup54ynv8w] .bp-toggle-ext-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--bp-ink-max);
    white-space: nowrap;
    cursor: default;
}
/* _content/BPack.Components/Layout/BpAppShell.razor.rz.scp.css */
/* BpAppShell · 디자인 가이드 shell.css §App root + Shell */

.log-expand-input[b-dbftwuqm2w],
.nav-collapse-input[b-dbftwuqm2w],
.mobile-nav-toggle-input[b-dbftwuqm2w] {
    position: absolute;
    left: -9999px;
}

.bp-app[b-dbftwuqm2w] {
    min-height: 100vh;
    /* 모바일 주소창 높이 변화 흡수 — 미지원 브라우저는 위 100vh 로 남는다.
       F02 계약(feature.md · design/ui.md)이 두 셸 모두에 요구한다. BpLayout(.bp-wrap)만
       갖고 있어 AppShell 이 빠져 있었다(R2 중간). */
    min-height: 100dvh;
    /* 바닥만이 아니라 **천장**도 정한다(T05). `min-height` 뿐이면 내용이 커질 때 `1fr` 행이
       뷰포트를 넘어 자라고, 그때 `.bp-app-main-slot` 의 `overflow: hidden` 은 자를 것이 없다
       — 즉 어떤 화면도 "내 안에서 스크롤" 을 만들 수 없다. 소비처가 실측해서 왔다:
       주소 375행·차트 4개에서 문서 16,632px / 뷰포트 1,231px
       (`RVW-TSK-M03-002-R2` NEW-MAJ-01, BPack.DeviceMonitor). `min-height` 는 dvh 미지원
       브라우저의 바닥으로 남긴다. */
    height: 100dvh;
    display: grid;
    /* header · shell · log-panel(0 → var on expand) · statusbar */
    grid-template-rows: var(--bp-layout-header) 1fr 0 var(--bp-layout-statusbar);
    transition: grid-template-rows var(--bp-duration-base) var(--bp-ease-out);
    background: var(--bp-bg-page);
    color: var(--bp-text-primary);
    font-family: var(--bp-font-ui);
}

body:has(.log-expand-input:checked) .bp-app[b-dbftwuqm2w] {
    grid-template-rows: var(--bp-layout-header) 1fr var(--bp-log-panel-h) var(--bp-layout-statusbar);
}

[b-dbftwuqm2w] .bp-shell {
    display: grid;
    grid-template-columns: var(--bp-layout-sidebar) var(--bp-layout-tree-menu) 1fr;
    min-width: 0;
    min-height: 0;
    transition: grid-template-columns var(--bp-duration-base) var(--bp-ease-out);
}

/* 2-column (TreeMenu 없는 경우) */
[b-dbftwuqm2w] .bp-shell:not(:has(.bp-app-tree-slot)) {
    grid-template-columns: var(--bp-layout-sidebar) 1fr;
}

/*
    NavMenu 슬롯이 없는 경우 — **첫 열을 남기지 않는다.**

    갈래가 tree 유무 둘뿐이면, nav 를 주지 않은 화면에서 `.bp-app-nav-slot` 은 렌더되지
    않는데 `--bp-layout-sidebar` 열은 남아 본문이 그 240px 열에 들어가고 `1fr` 열이 빈다.
    `.bp-app-main-slot` 의 `overflow: hidden` 이 그때 자를 것을 가져 **가로 스크롤도 없이
    조용히 잘린다** — 소비처가 실측해서 왔다(`BPack.DeviceMonitor` `TSK-F03-009` §16:
    1600 폭에서 main 240px · grid-template-columns `240px 1360px`).

    `:not(:has(.bp-app-nav-slot))` 로 걸어 **nav 를 주는 화면에는 매칭되지 않는다.**
    그 조건을 떼면 20여 소비처의 좌측 열이 재빌드만으로 사라진다 —
    `BpShellViewportContractTests` 가 그 회귀를 막는다.
*/
[b-dbftwuqm2w] .bp-shell:not(:has(.bp-app-nav-slot)):not(:has(.bp-app-tree-slot)) {
    grid-template-columns: 1fr;
}
[b-dbftwuqm2w] .bp-shell:not(:has(.bp-app-nav-slot)):has(.bp-app-tree-slot) {
    grid-template-columns: var(--bp-layout-tree-menu) 1fr;
}

/* Collapsed NavMenu */
body:has(.nav-collapse-input:checked)[b-dbftwuqm2w]  .bp-shell {
    grid-template-columns: var(--bp-layout-sidebar-sm) var(--bp-layout-tree-menu) 1fr;
}
body:has(.nav-collapse-input:checked)[b-dbftwuqm2w]  .bp-shell:not(:has(.bp-app-tree-slot)) {
    grid-template-columns: var(--bp-layout-sidebar-sm) 1fr;
}

[b-dbftwuqm2w] .bp-app-nav-slot,
[b-dbftwuqm2w] .bp-app-tree-slot,
[b-dbftwuqm2w] .bp-app-main-slot {
    min-width: 0;
    min-height: 0;
}

[b-dbftwuqm2w] .bp-app-main-slot {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--bp-bg-page);
    overflow: hidden;
}

/* Mobile overlay (≤lg) */
.bp-mobile-overlay[b-dbftwuqm2w] {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bp-scrim-bg);
    z-index: calc(var(--bp-z-modal) - 10);
    cursor: pointer;
}

/* Responsive (≤ --bp-break-lg · 1024px) */
@media (max-width: 1024px) {
    /* 헤더 행을 auto 로 — ≤lg 에서 헤더가 2줄이 되면 고정 56px 행을 넘쳐
       바로 아래 .bp-shell 을 덮는다. 데스크톱을 건드리지 않으려고 미디어쿼리 안에서만 바꾼다.
       ⚠️ 특이도: 아래 로그확장 규칙은 body:has(…) .bp-app → (0,4,1)[스코프 속성 포함] 이라
       .bp-app (0,2,0) 하나로는 못 이긴다. **같은 모양으로 한 번 더** 되받아야 한다
       (error-prevention #26 — @media 는 특이도를 올려주지 않는다). */
    .bp-app[b-dbftwuqm2w] {
        grid-template-rows: auto 1fr 0 var(--bp-layout-statusbar);
    }
    body:has(.log-expand-input:checked) .bp-app[b-dbftwuqm2w] {
        grid-template-rows: auto 1fr var(--bp-log-panel-h) var(--bp-layout-statusbar);
    }

    /* ⚠️ base 의 열 규칙을 **같은 모양으로** 되받는다. :not(:has(.bp-app-tree-slot)) 는 (0,3,0) 이라
       .bp-shell (0,2,0) 하나로는 못 이긴다 (error-prevention #26 — @media 는 특이도를 올려주지
       않는다). 그것을 빠뜨려 TreeMenu 를 쓰지 않는 호스트의 좁은 폭 본문이 240px 사이드바를
       계속 지고 갔다 — v0.1.37~0.1.39 의 결함이다(F02 T03).

       접힌 nav 두 줄(43·46행)은 **여기서 되받지 않는다.** 그 규칙들은
       `body:has(…)[스코프] .bp-shell` 로 컴파일돼 애초에 매칭되지 않으므로 이길 상대가 없다
       — 117행 주석이 경고하는 그 부류다. 그 결함 자체는 F02 T04 가 다룬다.
       규칙을 더 추가할 때 여기도 같이 늘린다 — BpShellViewportContractTests 가 base 를 열거해
       대조하고, 죽은 규칙은 별도 tripwire 가 수를 잠근다. */
    [b-dbftwuqm2w] .bp-shell,
    [b-dbftwuqm2w] .bp-shell:not(:has(.bp-app-tree-slot)),
    [b-dbftwuqm2w] .bp-shell:not(:has(.bp-app-nav-slot)):not(:has(.bp-app-tree-slot)),
    [b-dbftwuqm2w] .bp-shell:not(:has(.bp-app-nav-slot)):has(.bp-app-tree-slot) {
        grid-template-columns: 1fr;
    }
    [b-dbftwuqm2w] .bp-app-tree-slot {
        display: none;
    }
    [b-dbftwuqm2w] .bp-app-nav-slot {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--bp-drawer-w);
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;      /* 주소창이 접힐 때 드로어 하단이 viewport 와 어긋나지 않게 */
        transform: translateX(-100%);
        transition: transform var(--bp-duration-base) var(--bp-ease-out);
        z-index: var(--bp-z-modal);
        box-shadow: var(--bp-shadow-lg);
    }

    /* ⚠️ 예전 규칙은 `body:has(…) ::deep .bp-app-nav-slot` 이었고
       `body:has(…)[b-xxx] .bp-app-nav-slot` 으로 컴파일돼 **영원히 매칭되지 않았다**
       (스코프 속성이 body 에 붙는다 — css-standards 의 "조상 셀렉터 + ::deep 금지").

       이제 루트 상태 클래스가 단일 근거다. `::deep` 을 빼면 스코프가 **대상 요소**에 붙어
       `.bp-app.bp-drawer-open .bp-app-nav-slot[b-xxx]` 로 정상 매칭된다.
       스크림도 `.bp-app` **안**으로 옮겨(형제였다) 같은 규칙에 걸린다. */
    .bp-app.bp-drawer-open .bp-app-nav-slot[b-dbftwuqm2w] {
        transform: translateX(0);
    }
    .bp-app.bp-drawer-open .bp-mobile-overlay[b-dbftwuqm2w] {
        display: block;
    }

    /* 하위호환 — 호스트가 MobileNavId 로 자기 <label for> 를 달아 체크박스를 직접 켜는 경로.
       ⚠️ 위 상태 클래스 규칙과 **같은 selector list 에 묶지 않는다.** Selectors L4 는
       목록 중 하나만 invalid 해도 전체를 invalid 로 규정하므로, :has() 미지원 엔진에서
       드로어 본체 규칙까지 함께 죽는다. @supports 로 감싸 그 엔진이 이 블록만 건너뛰게 한다. */
    @supports selector(:has(*)) {
        body:has(.mobile-nav-toggle-input:checked) .bp-app-nav-slot[b-dbftwuqm2w] {
            transform: translateX(0);
        }
        body:has(.mobile-nav-toggle-input:checked) .bp-mobile-overlay[b-dbftwuqm2w] {
            display: block;
        }
    }
}
/* _content/BPack.Components/Layout/BpBreadcrumb.razor.rz.scp.css */
/* BpBreadcrumb 스코프드 스타일 */

/* 링크형 breadcrumb 항목 기본 스타일 리셋 */
a.bp-gnb-page[b-zqfrmdplw7] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
/* _content/BPack.Components/Layout/BpContentLayout.razor.rz.scp.css */
/* BpContentLayout 스코프드 스타일 — 페이지 컨텐츠 영역 표준 레이아웃 */

/* 루트: 부모 flex 컨테이너를 세로로 가득 채움 (bp-page-full-height 와 동일 동작) */
.bp-content-layout[b-abtqpy7rws] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* 외곽 테두리 (기본 on) */
.bp-content-layout.bp-outline[b-abtqpy7rws] {
    border: 1px solid var(--bp-border-light);
    border-radius: var(--bp-radius-md);
    overflow: hidden;
}

/* 헤더: 조회조건·버튼 툴바 (하단 border 한 줄) */
[b-abtqpy7rws] .bp-content-layout-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    flex-wrap: wrap;
    padding: var(--bp-space-2) var(--bp-space-3);
    background: var(--bp-bg-surface);
    border-bottom: 1px solid var(--bp-border-light);
}

/* 본문: 헤더·푸터를 제외한 남은 높이를 채움.
   기본(fill) 모드 — 그리드/트리가 Height="100%" 로 채우고 내부 스크롤 담당, 본문 자체는 스크롤 없음. */
[b-abtqpy7rws] .bp-content-layout-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--bp-space-2) var(--bp-space-3);
    background: var(--bp-bg-surface);
}

/* 스크롤 모드(Scrollable=true) — 정적/폼 콘텐츠나 "고정 그리드 + 아래로 긴 콘텐츠"처럼
   본문이 넘칠 때 본문 전체가 세로 스크롤(헤더·푸터는 고정). 직계 자식을 flex-shrink:0 으로 두어
   flex column 에서 줄어들지 않고 넘쳐서 스크롤되게 한다. 이 규칙은 .bp-scroll 에만 붙어 fill(기본) 모드 무영향. */
[b-abtqpy7rws] .bp-content-layout-body.bp-scroll {
    overflow-y: auto;
}

[b-abtqpy7rws] .bp-content-layout-body.bp-scroll > * {
    flex-shrink: 0;
}

/* 푸터: 액션·상태 (상단 border) */
[b-abtqpy7rws] .bp-content-layout-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    padding: var(--bp-space-2) var(--bp-space-3);
    border-top: 1px solid var(--bp-border-light);
}

/* ── 헤더 내부 정렬 헬퍼 (호스트 app.css 의 bp-page-toolbar-* 를 라이브러리로 내재화) ── */

/* 구분자 (예: 날짜 범위의 "~") */
[b-abtqpy7rws] .bp-content-layout-sep {
    color: var(--bp-text-tertiary);
    align-self: center;
}

/* 남는 공간을 밀어내는 스페이서 (우측 정렬용) */
[b-abtqpy7rws] .bp-content-layout-spacer {
    flex: 1 1 auto;
}

/* 보조 정보 텍스트 (예: "조회 결과 N 건") */
[b-abtqpy7rws] .bp-content-layout-info {
    font-size: var(--bp-size-small);
    color: var(--bp-text-secondary);
    white-space: nowrap;
}
/* _content/BPack.Components/Layout/BpHeader.razor.rz.scp.css */
/* BpHeader 스코프드 스타일 */

/* 다크모드 토글 영역 */
[b-h5jk46hut6] .bp-header-theme-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
}

[b-h5jk46hut6] .bp-header-theme-toggle > i {
    font-size: 16px;
    color: var(--bp-text-secondary);
}

[b-h5jk46hut6] .bp-header-theme-toggle .toggle-con {
    gap: 0;
}
/* _content/BPack.Components/Layout/BpHeaderMenu.razor.rz.scp.css */
/* BpHeaderMenu 스코프드 스타일 — 헤더 상위 가로 메뉴 */

/* 루트: BpHeader 의 가운데 칸(1fr)에 놓인다. 화살표 두 개와 스크롤러를 담는 가로 묶음.
   min-width:0 필수 — grid item 의 자동 최소 크기가 min-content 로 남으면
   항목이 많을 때 헤더 자체를 밀어낸다. */
.bp-header-menu[b-fefcek3w8q] {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* 실제로 스크롤되는 줄.
   소비처마다 로고·타이틀 폭이 달라 가용 폭을 라이브러리가 보장할 수 없다.
   overflow: hidden 이면 넘치는 항목이 **조용히 사라진다** — 상위 내비에서는 치명적이다.
   가로 스크롤로 두어 **화살표 JS 가 실패해도 접근은 항상 가능**하게 한다. */
[b-fefcek3w8q] .bp-header-menu-scroller {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--bp-space-1);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* 구 Edge */
    scroll-behavior: smooth;
}

/* WebKit 스크롤바 숨김 — 헤더에 스크롤바가 보이면 레이아웃이 지저분해진다. */
[b-fefcek3w8q] .bp-header-menu-scroller::-webkit-scrollbar {
    display: none;
}

/* 넘칠 때만 오른쪽 끝을 흐리게 해 '잘렸다'를 알린다. 넘치지 않으면 걸지 않는다 —
   mask 를 항상 켜면 마지막 항목이 이유 없이 흐려진다. */
.bp-header-menu.bp-overflowing .bp-header-menu-scroller[b-fefcek3w8q] {
    mask-image: linear-gradient(to right,
        var(--bp-mask-opaque) calc(100% - var(--bp-space-6)), transparent 100%);
}

/* 좌우 이동 화살표 — 넘칠 때만 렌더된다(안 넘치면 DOM 에도 없어 폭을 먹지 않는다).
   끝에 닿은 쪽은 visibility 로만 감춘다 — display:none 이면 폭이 사라져 메뉴가 튄다. */
[b-fefcek3w8q] .bp-header-menu-arrow {
    flex-shrink: 0;
    width: var(--bp-h-xs);
    height: var(--bp-h-xs);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--bp-radius-sm);
    background: transparent;
    color: var(--bp-text-secondary);
    cursor: pointer;
    font-size: var(--bp-control-icon-sm);
    line-height: 1;
    transition: background-color var(--bp-duration-fast), color var(--bp-duration-fast);
}

[b-fefcek3w8q] .bp-header-menu-arrow:hover {
    background-color: var(--bp-bg-muted);
    color: var(--bp-text-primary);
}

[b-fefcek3w8q] .bp-header-menu-arrow.bp-hidden {
    visibility: hidden;
}

[b-fefcek3w8q] .bp-header-menu-item {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    /* 5-tier 정식 값만 쓴다 — 36px 는 어느 등급에도 없다(TERM-CMP-SIZE-TIER).
       56px 헤더 안이라 sm(32) 을 택했다: 위아래 12px 여유가 남고, F01 이 SNB 버튼을
       40→32 로 낮춘 밀도와 같은 단계다. */
    height: var(--bp-h-sm);
    padding: 0 var(--bp-space-3);
    border: none;
    background: none;
    border-radius: var(--bp-radius-sm);
    font-size: var(--bp-size-small);
    font-weight: var(--bp-weight-medium);
    color: var(--bp-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--bp-duration-fast), color var(--bp-duration-fast);
}

[b-fefcek3w8q] .bp-header-menu-item i {
    font-size: var(--bp-control-icon-sm);
    flex-shrink: 0;
}

[b-fefcek3w8q] .bp-header-menu-item:hover:not(.bp-active):not(:disabled) {
    background-color: var(--bp-bg-muted);
    color: var(--bp-text-primary);
}

[b-fefcek3w8q] .bp-header-menu-item.bp-active {
    background-color: var(--bp-active-bg);
    color: var(--bp-active-text);
    font-weight: var(--bp-weight-semibold);
}

[b-fefcek3w8q] .bp-header-menu-item:disabled {
    color: var(--bp-text-disabled);
    cursor: not-allowed;
}

/* 포커스 — <button>·<a> 는 bp-reset 의 input 전용 outline 해제에 걸리지 않는다.
   보더가 없는 컨트롤이라 링만으로 표시하고 전역 2px 아웃라인은 끈다
   (안 끄면 링 + 바깥 아웃라인이 겹쳐 이중으로 보인다 — error-prevention #22). */
[b-fefcek3w8q] .bp-header-menu-item:focus-visible {
    outline: none;
    box-shadow: var(--bp-focus-ring);
}
/* _content/BPack.Components/Layout/BpKbd.razor.rz.scp.css */
/* BpKbd · 키보드 단축키 키 표시 */
.bp-kbd[b-66alf15o2z] {
    display: inline-block;
    font-family: var(--bp-font-mono);
    font-size: 10px;
    font-weight: var(--bp-weight-bold);
    padding: 2px 6px;
    border-radius: var(--bp-radius-sm);
    background: var(--bp-bg-surface);
    border: 1px solid var(--bp-border-default);
    color: var(--bp-text-secondary);
    line-height: 1;
    box-shadow: 0 1px 0 var(--bp-border-default);
    white-space: nowrap;
}
/* _content/BPack.Components/Layout/BpKpiCard.razor.rz.scp.css */
/* BpKpiCard · 디자인 가이드 shell.css §KPI */
.bp-kpi-card[b-njcy0yyrhw] {
    padding: var(--bp-space-4);
    border: 1px solid var(--bp-border-light);
    border-radius: var(--bp-radius-lg);
    background: var(--bp-bg-surface);
    min-width: 0;
    overflow: hidden;
}

[b-njcy0yyrhw] .label {
    font-size: var(--bp-size-xs);
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-tertiary);
    letter-spacing: var(--bp-tracking-wide);
    text-transform: uppercase;
}

[b-njcy0yyrhw] .value {
    font-size: 28px;
    font-weight: var(--bp-weight-bold);
    color: var(--bp-primary-fg);
    line-height: 1.1;
    margin-top: 4px;
    letter-spacing: var(--bp-tracking-tight);
}

[b-njcy0yyrhw] .value small {
    font-size: 14px;
    color: var(--bp-text-tertiary);
    font-weight: var(--bp-weight-medium);
    margin-left: 4px;
}

[b-njcy0yyrhw] .trend {
    font-size: var(--bp-size-xs);
    color: var(--bp-success-fg);
    font-weight: var(--bp-weight-semibold);
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

[b-njcy0yyrhw] .trend.is-down {
    color: var(--bp-error-fg);
}
/* _content/BPack.Components/Layout/BpLayout.razor.rz.scp.css */
/* BpLayout 스코프드 스타일 */
/* _content/BPack.Components/Layout/BpLogPanel.razor.rz.scp.css */
/* BpLogPanel · 디자인 가이드 shell.css §Log panel */
.bp-log-panel[b-tc201er1jf] {
    height: 100%;
    min-height: 0;
    background: var(--bp-neutral-950);
    color: var(--bp-neutral-300);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid var(--bp-neutral-800);
    font-family: var(--bp-font-mono);
    font-size: var(--bp-log-font);

    /* 5-tier Size. 기본(md)은 종전 하드코딩 값과 같아 기존 화면이 안 바뀐다.
       색이 아니라 단순 값이라 자손이 그대로 물려받는다. */
    --bp-log-font:      12px;   /* 본문 */
    --bp-log-font-ctl:  11px;   /* 탭·검색·필터 */
    --bp-log-font-mini: 10px;   /* 탭 카운트 배지 */
    --bp-log-ctl-h:     26px;
    --bp-log-pad-y:      6px;
}

.bp-log-panel.bp-xs[b-tc201er1jf] { --bp-log-font: 10px; --bp-log-font-ctl:  9px; --bp-log-font-mini:  8px; --bp-log-ctl-h: 20px; --bp-log-pad-y:  3px; }
.bp-log-panel.bp-sm[b-tc201er1jf] { --bp-log-font: 11px; --bp-log-font-ctl: 10px; --bp-log-font-mini:  9px; --bp-log-ctl-h: 23px; --bp-log-pad-y:  4px; }
.bp-log-panel.bp-lg[b-tc201er1jf] { --bp-log-font: 13px; --bp-log-font-ctl: 12px; --bp-log-font-mini: 11px; --bp-log-ctl-h: 30px; --bp-log-pad-y:  8px; }
.bp-log-panel.bp-xl[b-tc201er1jf] { --bp-log-font: 14px; --bp-log-font-ctl: 13px; --bp-log-font-mini: 12px; --bp-log-ctl-h: 34px; --bp-log-pad-y: 10px; }

[b-tc201er1jf] .bp-log-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--bp-space-3);
    padding: var(--bp-log-pad-y) 12px;
    background: var(--bp-neutral-900);
    border-bottom: 1px solid var(--bp-neutral-800);
    flex-shrink: 0;
}

[b-tc201er1jf] .bp-log-tabs {
    display: flex;
    gap: 4px;
}

[b-tc201er1jf] .bp-log-tab {
    padding: calc(var(--bp-log-pad-y) - 2px) 10px;
    border-radius: var(--bp-radius-sm);
    background: transparent;
    border: 0;
    color: var(--bp-neutral-400);
    font-family: inherit;
    font-size: var(--bp-log-font-ctl);
    font-weight: var(--bp-weight-semibold);
    cursor: pointer;
    letter-spacing: var(--bp-tracking-wide);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[b-tc201er1jf] .bp-log-tab:hover {
    background: var(--bp-neutral-800);
    color: var(--bp-neutral-200);
}

[b-tc201er1jf] .bp-log-tab.is-active {
    background: var(--bp-primary-700);
    color: var(--bp-neutral-0);
}

[b-tc201er1jf] .bp-log-tab .count {
    background: var(--bp-neutral-700);
    color: var(--bp-neutral-200);
    padding: 1px 6px;
    border-radius: var(--bp-radius-pill);
    font-size: var(--bp-log-font-mini);
    text-transform: none;
    font-weight: var(--bp-weight-bold);
    letter-spacing: 0;
}

[b-tc201er1jf] .bp-log-tab .count.is-warn {
    background: var(--bp-warning);
    color: var(--bp-neutral-950);
}

[b-tc201er1jf] .bp-log-tab .count.is-err {
    background: var(--bp-error);
    color: var(--bp-neutral-0);
}

[b-tc201er1jf] .bp-log-tab.is-active .count {
    background: var(--bp-primary-500);
    color: var(--bp-neutral-0);
}

[b-tc201er1jf] .bp-log-controls {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 6px;
}

[b-tc201er1jf] .bp-log-search {
    width: 220px;
    height: var(--bp-log-ctl-h);
    padding: 0 10px;
    background: var(--bp-neutral-800);
    border: 1px solid var(--bp-neutral-700);
    border-radius: var(--bp-radius-sm);
    color: var(--bp-neutral-200);
    font-family: inherit;
    font-size: var(--bp-log-font-ctl);
}

[b-tc201er1jf] .bp-log-search::placeholder {
    color: var(--bp-neutral-500);
}

[b-tc201er1jf] .bp-log-search:focus-visible {
    outline: none;
    border-color: var(--bp-primary-500);
}

[b-tc201er1jf] .bp-log-level {
    height: var(--bp-log-ctl-h);
    padding: 0 8px;
    background: var(--bp-neutral-800);
    border: 1px solid var(--bp-neutral-700);
    border-radius: var(--bp-radius-sm);
    color: var(--bp-neutral-200);
    font-family: inherit;
    font-size: var(--bp-log-font-ctl);
}

[b-tc201er1jf] .bp-log-body {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 6px 12px;
    background: var(--bp-neutral-950);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-tc201er1jf] .bp-log-row {
    display: grid;
    grid-template-columns: 100px 52px 1fr;
    gap: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    line-height: 1.5;
    min-width: 0;
}

[b-tc201er1jf] .bp-log-row time { color: var(--bp-neutral-500); }
[b-tc201er1jf] .bp-log-row .level {
    font-weight: var(--bp-weight-bold);
    letter-spacing: var(--bp-tracking-wide);
}
[b-tc201er1jf] .bp-log-row .msg {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bp-neutral-300);
}

[b-tc201er1jf] .bp-log-row.is-info .level  { color: var(--bp-info); }
[b-tc201er1jf] .bp-log-row.is-warn .level  { color: var(--bp-warning); }
[b-tc201er1jf] .bp-log-row.is-warn         { background: color-mix(in srgb, var(--bp-warning) 8%, transparent); }
[b-tc201er1jf] .bp-log-row.is-error .level { color: var(--bp-error); }
[b-tc201er1jf] .bp-log-row.is-error        { background: color-mix(in srgb, var(--bp-error) 12%, transparent); }

/* ── 테마 연동 변형(opt-in, ThemeAware=true) ──
   고정 콘솔 다크(--bp-neutral-*) 대신 라이트/다크 시맨틱 토큰을 사용한다.
   판정 레벨색(info/warn/error)은 두 테마 모두에서 동작하므로 그대로 둔다. */
.bp-log-panel.theme-aware[b-tc201er1jf] {
    background: var(--bp-bg-surface);
    color: var(--bp-text-secondary);
    border-top-color: var(--bp-border-light);
}
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-header {
    background: var(--bp-bg-elevated);
    border-bottom-color: var(--bp-border-light);
}
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-tab { color: var(--bp-text-tertiary); }
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-tab:hover {
    background: var(--bp-bg-muted);
    color: var(--bp-text-primary);
}
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-tab .count {
    background: var(--bp-bg-muted);
    color: var(--bp-text-secondary);
}
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-search,
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-level {
    background: var(--bp-bg-surface);
    border-color: var(--bp-border-default);
    color: var(--bp-text-primary);
}
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-search::placeholder { color: var(--bp-text-tertiary); }
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-body { background: var(--bp-bg-surface); }
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-row time { color: var(--bp-text-tertiary); }
.bp-log-panel.theme-aware[b-tc201er1jf]  .bp-log-row .msg { color: var(--bp-text-primary); }
/* _content/BPack.Components/Layout/BpNavMenu.razor.rz.scp.css */
/* BpNavMenu 스코프드 스타일 */
/* _content/BPack.Components/Layout/BpPageBar.razor.rz.scp.css */
/* 바 본체(.bp-page-bar)는 bp-layout.css 가 소유한다 — .bp-page 의 패딩 상쇄 값이
   그쪽 레이아웃과 한 세트라 여기서 나누면 어긋난다.
   이 파일은 이 컴포넌트가 추가로 렌더하는 요소만 담당한다. */

/* 내용 묶음 — 접힘 때 이것만 숨기고 버튼은 남긴다. */
.bp-page-bar-body[b-2svqg3g4wy] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--bp-space-3);
}

/* 접기 버튼 — 바 오른쪽 끝. 접혀도 같은 자리에 남는 복구 지점이다. */
.bp-page-bar-toggle[b-2svqg3g4wy] {
    flex-shrink: 0;
    margin-left: auto;
    width: var(--bp-h-xs);
    height: var(--bp-h-xs);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--bp-radius-sm);
    background: transparent;
    color: var(--bp-text-tertiary);
    cursor: pointer;
    font-size: var(--bp-control-icon-sm);
    line-height: 1;
    transition: background-color var(--bp-duration-fast), color var(--bp-duration-fast);
}

.bp-page-bar-toggle:hover[b-2svqg3g4wy] {
    background: var(--bp-bg-muted);
    color: var(--bp-text-primary);
}

/* outline 을 끄고 링으로 표시한다 — <button> 은 전역 :focus-visible 아웃라인 대상이라
   그냥 두면 링과 아웃라인이 겹쳐 이중으로 보인다. */
.bp-page-bar-toggle:focus-visible[b-2svqg3g4wy] {
    outline: none;
    box-shadow: var(--bp-focus-ring);
}

/* 접힘 — 바가 통째로 사라지고(높이 0 · 배경/보더 없음) 복구 탭만 헤더 밑변에 남는다.
   bp-layout.css 의 min-height·padding 보다 셀렉터가 구체적이라 여기가 이긴다.
   sticky top 은 그대로 물려받는다 — 그래야 스크롤해도 헤더에 붙어 있다.

   두 번째 셀렉터는 **첫 페인트용**이다 — bp-navigation.js 가 Blazor 시작 전에 세운
   html[data-pagebar-collapsed] 로, C# 이 상태를 알기 전에도 접힌 모습으로 그린다.
   (조상 셀렉터 + ::deep 은 스코프가 조상에 붙어 깨지므로 ::deep 을 쓰지 않는다.)

   ⚠️ 그 속성은 **문서 전역**이라 .bp-persist[data-pagebar-scope="default"] 로 **반드시**
   좁힌다. 안 좁히면 Persist 를 쓰지 않는 바까지 접히고, Collapsible=false 인 바는
   복구 버튼도 없어 **영구히 사라진다**(Codex 리뷰 높음-5). marker 는 BpPageBar 가
   Persist && Collapsible 일 때만 렌더한다. */
.bp-page-bar.bp-collapsed[b-2svqg3g4wy],
html[data-pagebar-collapsed="true"] .bp-page-bar.bp-persist[data-pagebar-scope="default"][b-2svqg3g4wy] {
    min-height: 0;
    height: 0;
    /* 펼침과 **같은 마진**을 유지한다 — 위 -8px 상쇄로 박스 상단이 헤더 밑변(56)에 서고,
       그래야 복구 탭이 헤더에 붙어 매달린 모양이 된다. 마진을 0 으로 두면 박스가 64 에서
       시작해 탭이 헤더에서 8px 떠, 아래 모서리만 둥근 탭이 매달릴 데 없이 뜬다.
       높이가 0 이므로 아래 8px 만 남아 콘텐츠는 64 에서 시작한다(펼침 104 대비 40px 회수). */
    margin: calc(var(--bp-space-2) * -1) 0 var(--bp-space-2);
    padding: 0;
    background: transparent;
    border-bottom: 0;
    overflow: visible;
}

.bp-page-bar.bp-collapsed .bp-page-bar-body[b-2svqg3g4wy],
html[data-pagebar-collapsed="true"] .bp-page-bar.bp-persist[data-pagebar-scope="default"] .bp-page-bar-body[b-2svqg3g4wy] {
    display: none;
}

/* 복구 버튼 — 헤더에서 내려온 작은 탭. 아래 모서리만 둥글다.
   바가 높이 0 이라 이 버튼은 **콘텐츠 우상단에 겹친다**(그리드면 마지막 컬럼 헤더 위).
   24×16 으로 최소화하고, 어떤 콘텐츠 위에서도 읽히도록 surface 배경과 보더를 준다. */
.bp-page-bar.bp-collapsed .bp-page-bar-toggle[b-2svqg3g4wy],
html[data-pagebar-collapsed="true"] .bp-page-bar.bp-persist[data-pagebar-scope="default"] .bp-page-bar-toggle[b-2svqg3g4wy] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: var(--bp-space-6);
    height: var(--bp-space-4);
    border: 1px solid var(--bp-border-light);
    border-top: 0;
    border-radius: 0 0 var(--bp-radius-sm) var(--bp-radius-sm);
    background: var(--bp-bg-surface);
    font-size: var(--bp-control-icon-xs);
}

.bp-page-bar.bp-collapsed .bp-page-bar-toggle:hover[b-2svqg3g4wy],
html[data-pagebar-collapsed="true"] .bp-page-bar.bp-persist[data-pagebar-scope="default"] .bp-page-bar-toggle:hover[b-2svqg3g4wy] {
    background: var(--bp-bg-muted);
}
/* _content/BPack.Components/Layout/BpPageStatusbar.razor.rz.scp.css */
/* BpPageStatusbar · 디자인 가이드 shell.css §Status bar */
.bp-statusbar[b-v6f0nnbvav] {
    height: var(--bp-layout-statusbar);
    background: var(--bp-neutral-900);
    color: var(--bp-neutral-400);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--bp-space-3);
    padding: 0 var(--bp-space-3);
    font-size: 11px;
    font-family: var(--bp-font-mono);
    flex-shrink: 0;
}

[b-v6f0nnbvav] .statusbar-left,
[b-v6f0nnbvav] .statusbar-center,
[b-v6f0nnbvav] .statusbar-right {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    min-width: 0;
}

[b-v6f0nnbvav] .statusbar-center {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-v6f0nnbvav] .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bp-success);
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 8px var(--bp-success);
}

[b-v6f0nnbvav] .status-ok { color: var(--bp-success); }

/* Log expand toggle (statusbar) */
.bp-log-toggle[b-v6f0nnbvav] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--bp-radius-sm);
    color: var(--bp-neutral-300);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--bp-weight-semibold);
    transition: background-color var(--bp-duration-fast), color var(--bp-duration-fast);
    user-select: none;
}

.bp-log-toggle:hover[b-v6f0nnbvav] {
    background: var(--bp-neutral-800);
    color: var(--bp-neutral-0);
}

[b-v6f0nnbvav] .bp-log-toggle .arrow {
    font-size: 9px;
    transition: transform var(--bp-duration-fast);
    display: inline-block;
}

body:has(.log-expand-input:checked) .bp-log-toggle .arrow[b-v6f0nnbvav] {
    transform: rotate(180deg);
}

[b-v6f0nnbvav] .bp-log-toggle .new-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bp-accent-500);
    box-shadow: 0 0 8px var(--bp-accent-500);
    animation: bp-statusbar-pulse-b-v6f0nnbvav 1.6s ease-in-out infinite;
}

@keyframes bp-statusbar-pulse-b-v6f0nnbvav {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
/* _content/BPack.Components/Layout/BpPageToolbar.razor.rz.scp.css */
/* BpPageToolbar · 디자인 가이드 shell.css §Toolbar */
.bp-toolbar[b-tn82mr5zpt] {
    height: var(--bp-layout-toolbar);
    background: var(--bp-bg-surface);
    border-bottom: 1px solid var(--bp-border-light);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 var(--bp-space-3);
    gap: var(--bp-space-2);
    min-width: 0;
    flex-shrink: 0;
}

[b-tn82mr5zpt] .bp-toolbar-title {
    display: flex;
    align-items: center;
    gap: var(--bp-space-3);
    min-width: 0;
}

[b-tn82mr5zpt] .bp-toolbar-title h1 {
    margin: 0;
    font-size: var(--bp-size-h3);
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-tn82mr5zpt] .bp-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
}
/* _content/BPack.Components/Layout/BpSiteSwitcher.razor.rz.scp.css */
/* BpSiteSwitcher · 디자인 가이드 shell.css §Site switcher */
.bp-site-switcher[b-gw4fr28c8t] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--bp-space-2);
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--bp-border-light);
    border-radius: var(--bp-radius-md);
    background: var(--bp-bg-muted);
    color: var(--bp-text-primary);
    /* 정적 표시의 기본 커서. 빼면 `auto` 가 되어 **글자 위에서 I-beam** 이 뜬다 —
       고를 수 있는 텍스트처럼 보여 또 다른 가짜 신호가 된다(HR-MGT-003 요청대로 default). */
    cursor: default;
    font-family: inherit;
    text-align: left;
    transition: background-color var(--bp-duration-fast) var(--bp-ease-out),
                border-color var(--bp-duration-fast) var(--bp-ease-out);
    min-width: 0;
}

/* 클릭을 받을 때만 버튼처럼 군다 — chevron 칸·커서·hover 셋이 한 세트다(HR-MGT-003).
   정적 표시는 chevron 을 안 그리므로 3열이 아니라 2열이다. */
.bp-site-switcher.interactive[b-gw4fr28c8t] {
    grid-template-columns: 28px 1fr 14px;
    cursor: pointer;
}

.bp-site-switcher.interactive:hover:not(:disabled)[b-gw4fr28c8t] {
    background: var(--bp-bg-surface);
    border-color: var(--bp-border-default);
}

.bp-site-switcher:disabled[b-gw4fr28c8t] {
    cursor: not-allowed;
    opacity: 0.55;
}

[b-gw4fr28c8t] .icon {
    width: 28px;
    height: 28px;
    border-radius: var(--bp-radius-sm);
    background: var(--bp-primary-500);
    color: var(--bp-neutral-0);
    display: grid;
    place-items: center;
    font-size: 14px;      /* 이니셜 한 글자 기준 — 아이콘은 아래에서 따로 키운다 */
    font-weight: var(--bp-weight-bold);
}

/* 제품 아이콘은 28px 칸에 맞춰 키운다(HR-MGT-003). 이니셜 14px 은 그대로 둔다.
   `.bp-icon` 은 mask 라 `width/height: 1em` 으로 font-size 를 따라오고,
   Bootstrap `bi` 는 글리프라 font-size 가 곧 크기다 — 두 세트 모두 이 한 줄로 커진다.
   ⚠️ 색은 둘 다 `color`(여기선 흰색)를 따른다 — mask 는 `currentColor` 로 칠하고
      글리프 폰트도 글자색이라, **원색이 있는 제품 아이콘이라도 primary 배경 위에서
      흰 실루엣으로 나온다.** 색이 충돌할 여지가 없다. */
[b-gw4fr28c8t] .icon > i {
    font-size: 20px;
}

[b-gw4fr28c8t] .meta {
    min-width: 0;
    overflow: hidden;
}

[b-gw4fr28c8t] .name {
    font-size: var(--bp-size-small);
    font-weight: var(--bp-weight-bold);
    line-height: 1.2;
    color: var(--bp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-gw4fr28c8t] .desc {
    font-size: 11px;
    color: var(--bp-text-tertiary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-gw4fr28c8t] .chevron {
    color: var(--bp-text-tertiary);
    font-size: 10px;
}
/* _content/BPack.Components/Layout/BpSplitPanel.razor.rz.scp.css */
/* BpSplitPanel 스코프드 스타일 */

/* overflow 는 hidden 이 아니라 clip — 패널 경계에 붙은 입력의 포커스 링(3px box-shadow)이
   잘려 비대칭 후광으로 보이던 문제. clip + overflow-clip-margin 은 스크롤 컨테이너를
   만들지 않으면서 링 두께만 바깥으로 통과시킨다. 여백 값은 --bp-focus-ring-spread 공유.

   ⚠️ 그래서 min-width/min-height: 0 이 필수다. hidden 은 스크롤 컨테이너라 flex item 의
   자동 최소 크기(min-*: auto)가 0 으로 풀리지만, clip 은 스크롤 컨테이너가 아니어서
   min-content 로 남는다 → 넓은 내용(컬럼 많은 그리드 등)이 패널 폭을 밀어내 두 패널이
   flex 비율대로 함께 팽창한다. 아래 3요소 모두 두 축을 명시한다. */
.bp-split-panel[b-1ld0ukgwfs] {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: clip;
    overflow-clip-margin: var(--bp-focus-ring-spread);
}

.bp-split-panel.horizontal[b-1ld0ukgwfs] {
    flex-direction: row;
}

.bp-split-panel.vertical[b-1ld0ukgwfs] {
    flex-direction: column;
}

/* 크기는 루트의 --bp-split-size 에서 온다(F45). 축은 방향 클래스가 고른다 —
   인라인 style 로 박으면 미디어쿼리가 이길 수 없어 쌓임 전환이 불가능해진다. */
.bp-split-panel.horizontal > .bp-split-first[b-1ld0ukgwfs] { width: var(--bp-split-size); }
.bp-split-panel.vertical   > .bp-split-first[b-1ld0ukgwfs] { height: var(--bp-split-size); }

.bp-split-first[b-1ld0ukgwfs] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: clip;
    overflow-clip-margin: var(--bp-focus-ring-spread);
}

.bp-split-second[b-1ld0ukgwfs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: clip;
    overflow-clip-margin: var(--bp-focus-ring-spread);
}

/* 스플릿 바 — 여백처럼 보이되 가운데 그립 표시 */
.bp-split-bar[b-1ld0ukgwfs] {
    flex-shrink: 0;
    position: relative;
    background-color: transparent;
}

/* 히트 영역 확장 */
.bp-split-bar[b-1ld0ukgwfs]::before {
    content: '';
    position: absolute;
}

/* 가운데 그립 (두 줄) */
.bp-split-bar[b-1ld0ukgwfs]::after {
    content: '';
    position: absolute;
    border-radius: 1px;
    transition: background-color 0.15s, box-shadow 0.15s;
}

/* ── 수평 (좌우 분할) ── */
.bp-split-panel.horizontal > .bp-split-bar[b-1ld0ukgwfs] {
    width: 8px;
    cursor: col-resize;
}

.bp-split-panel.horizontal > .bp-split-bar[b-1ld0ukgwfs]::before {
    top: 0;
    bottom: 0;
    left: -2px;
    right: -2px;
}

/* 세로 두 줄 그립 — 정중앙 배치 */
.bp-split-panel.horizontal > .bp-split-bar[b-1ld0ukgwfs]::after {
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 2px), -50%);
    width: 2px;
    height: 24px;
    background-color: var(--bp-border-default);
    box-shadow: -4px 0 0 0 var(--bp-border-default);
}

/* ── 수직 (상하 분할) ── */
.bp-split-panel.vertical > .bp-split-bar[b-1ld0ukgwfs] {
    height: 8px;
    cursor: row-resize;
}

.bp-split-panel.vertical > .bp-split-bar[b-1ld0ukgwfs]::before {
    left: 0;
    right: 0;
    top: -2px;
    bottom: -2px;
}

/* 가로 두 줄 그립 — 정중앙 배치 */
.bp-split-panel.vertical > .bp-split-bar[b-1ld0ukgwfs]::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 2px));
    width: 24px;
    height: 2px;
    background-color: var(--bp-border-default);
    box-shadow: 0 -4px 0 0 var(--bp-border-default);
}

/* 호버 시 그립 강조 */
.bp-split-panel.horizontal > .bp-split-bar:hover[b-1ld0ukgwfs]::after,
.bp-split-panel.horizontal > .bp-split-bar.dragging[b-1ld0ukgwfs]::after {
    background-color: var(--bp-primary-400);
    box-shadow: -4px 0 0 0 var(--bp-primary-400);
}

.bp-split-panel.vertical > .bp-split-bar:hover[b-1ld0ukgwfs]::after,
.bp-split-panel.vertical > .bp-split-bar.dragging[b-1ld0ukgwfs]::after {
    background-color: var(--bp-primary-400);
    box-shadow: 0 -4px 0 0 var(--bp-primary-400);
}

/* ── 한쪽 접기 (HR-AST-004) ─────────────────────────────────────────────
   호스트가 이 스타일을 자기 CSS 로 흉내 내던 것을 라이브러리가 가져왔다. 그쪽은 내부
   클래스 이름과 인라인 width 규칙에 기대야 해서 우리가 마크업을 바꾸면 조용히 깨졌다.

   ⚠️ **자식은 지우지 않고 감춘다.** 제거하면 자식 컴포넌트가 다시 만들어져 그 안의
   상태(편집기 되돌리기 기록 등)가 사라진다.

   ⚠️ **저장한 폭을 건드리지 않는다.** bp-split-panel.js 가 localStorage 값을
   루트의 --bp-split-size 로 입히는데(F45 전에는 .bp-split-first 의 인라인 width 였다),
   그것을 지우면 펴도 원래 폭이 안 돌아온다.
   그래서 접힌 동안만 남은 pane 이 flex-grow 로 채우게 두고 --bp-split-size 는 그대로 둔다
   — 펴면 flex-shrink:0 + width: var(--bp-split-size) 로 돌아가 자동 복원된다. */
.bp-split-panel.bp-split-first-collapsed > .bp-split-first[b-1ld0ukgwfs],
.bp-split-panel.bp-split-first-collapsed > .bp-split-bar[b-1ld0ukgwfs],
.bp-split-panel.bp-split-second-collapsed > .bp-split-second[b-1ld0ukgwfs],
.bp-split-panel.bp-split-second-collapsed > .bp-split-bar[b-1ld0ukgwfs] {
    display: none;
}

/* 남은 pane 이 전체를 쓴다. .bp-split-second 는 이미 flex:1 이라 first 가 숨으면 그대로
   채우지만, .bp-split-first 는 flex-shrink:0 + width: var(--bp-split-size) 라 grow 를 켜 줘야 한다.
   flex-basis 는 auto 로 둔다 — width 를 기준으로 삼아 거기서 늘어난다. */
.bp-split-panel.bp-split-second-collapsed > .bp-split-first[b-1ld0ukgwfs] {
    flex: 1 1 auto;
}


/* ── 좁은 화면 쌓임 (F45) ───────────────────────────────────────────────
   좌우 분할은 좁은 화면에서 못 쓴다 — 두 패널이 각각 절반 폭이 되어 그리드도 상세도
   못 읽는다. 지정 폭 미만에서 세로로 쌓고 분할 막대를 숨긴다.

   ⚠️ 숫자는 --bp-break-* 와 **손으로** 맞춘다 — @media 는 var() 를 읽지 못한다
      (bp-variables.css 의 Breakpoints 절 · bp-layout.css 가 같은 주석을 달고 있다).
      토큰이 바뀌면 아래 넷을 함께 바꾼다.

   ⚠️ 쌓였을 때 높이는 --bp-split-stack-size 다. 저장된 폭(--bp-split-size)을 쓰지 않는다 —
      "300px" 처럼 폭으로 맞춘 값이 높이가 되면 뜻이 달라진다. 저장값은 건드리지 않으므로
      가로로 돌아오면 그대로 복원된다.

   ⚠️ @media 는 특이도를 올려주지 않는다(error-prevention #26) — 아래가 이기는 것은
      **클래스가 하나 더 있어서**다. scoped 컴파일 뒤 실측:
          기본   .bp-split-panel.horizontal > .bp-split-first[b-x]                 (0,4,0)
          아래   .bp-split-panel.horizontal.bp-split-stack-md > .bp-split-first[b-x] (0,5,0)
      (scope 속성은 **맨 오른쪽 compound** 에 붙는다 — 실측 `[b-1ld0ukgwfs]`)
      순서가 아니라 특이도로 이긴다. 기본 규칙에 클래스를 더하면 이 관계가 뒤집힌다. */
@media (max-width: 639.98px) {   /* --bp-break-sm 640px */
    .bp-split-panel.horizontal.bp-split-stack-sm[b-1ld0ukgwfs] { flex-direction: column; }
    .bp-split-panel.horizontal.bp-split-stack-sm > .bp-split-first[b-1ld0ukgwfs] {
        width: auto;
        /* height 를 고정하지 않는다 — 아래 최소 높이 갈래가 바닥·내용으로 정한다.
           고정하면 중첩 분할이 pane 밖으로 그려져 다음 pane 을 덮는다(독립 Review R2). */
    }
    .bp-split-panel.horizontal.bp-split-stack-sm > .bp-split-bar[b-1ld0ukgwfs] { display: none; }

    /* 쌓인 상태라 주축이 세로다 — 여기서만 shrink 0 이 안전하다(위 공통 갈래 주석 참조). */
    .bp-split-panel.horizontal.bp-split-stack-sm > .bp-split-second[b-1ld0ukgwfs] {
        flex: 1 0 auto;
    }
}

@media (max-width: 767.98px) {   /* --bp-break-md 768px — 기본값 */
    .bp-split-panel.horizontal.bp-split-stack-md[b-1ld0ukgwfs] { flex-direction: column; }
    .bp-split-panel.horizontal.bp-split-stack-md > .bp-split-first[b-1ld0ukgwfs] {
        width: auto;
        /* height 를 고정하지 않는다 — 아래 최소 높이 갈래가 바닥·내용으로 정한다.
           고정하면 중첩 분할이 pane 밖으로 그려져 다음 pane 을 덮는다(독립 Review R2). */
    }
    .bp-split-panel.horizontal.bp-split-stack-md > .bp-split-bar[b-1ld0ukgwfs] { display: none; }

    /* 쌓인 상태라 주축이 세로다 — 여기서만 shrink 0 이 안전하다(위 공통 갈래 주석 참조). */
    .bp-split-panel.horizontal.bp-split-stack-md > .bp-split-second[b-1ld0ukgwfs] {
        flex: 1 0 auto;
    }
}

@media (max-width: 1023.98px) {  /* --bp-break-lg 1024px */
    .bp-split-panel.horizontal.bp-split-stack-lg[b-1ld0ukgwfs] { flex-direction: column; }
    .bp-split-panel.horizontal.bp-split-stack-lg > .bp-split-first[b-1ld0ukgwfs] {
        width: auto;
        /* height 를 고정하지 않는다 — 아래 최소 높이 갈래가 바닥·내용으로 정한다.
           고정하면 중첩 분할이 pane 밖으로 그려져 다음 pane 을 덮는다(독립 Review R2). */
    }
    .bp-split-panel.horizontal.bp-split-stack-lg > .bp-split-bar[b-1ld0ukgwfs] { display: none; }

    /* 쌓인 상태라 주축이 세로다 — 여기서만 shrink 0 이 안전하다(위 공통 갈래 주석 참조). */
    .bp-split-panel.horizontal.bp-split-stack-lg > .bp-split-second[b-1ld0ukgwfs] {
        flex: 1 0 auto;
    }
}

@media (max-width: 1279.98px) {  /* --bp-break-xl 1280px */
    .bp-split-panel.horizontal.bp-split-stack-xl[b-1ld0ukgwfs] { flex-direction: column; }
    .bp-split-panel.horizontal.bp-split-stack-xl > .bp-split-first[b-1ld0ukgwfs] {
        width: auto;
        /* height 를 고정하지 않는다 — 아래 최소 높이 갈래가 바닥·내용으로 정한다.
           고정하면 중첩 분할이 pane 밖으로 그려져 다음 pane 을 덮는다(독립 Review R2). */
    }
    .bp-split-panel.horizontal.bp-split-stack-xl > .bp-split-bar[b-1ld0ukgwfs] { display: none; }

    /* 쌓인 상태라 주축이 세로다 — 여기서만 shrink 0 이 안전하다(위 공통 갈래 주석 참조). */
    .bp-split-panel.horizontal.bp-split-stack-xl > .bp-split-second[b-1ld0ukgwfs] {
        flex: 1 0 auto;
    }
}

/* ── 좁거나 낮은 창에서 pane 최소 높이 (F45 · TSK-F45-003) ──────────────
   이 부품은 flex:1 이라 분할 트리가 페이지 높이에 **정확히** 맞춰진다. 그래서 쌓이면
   그 고정 높이를 N 등분할 뿐이라 그리드가 머리글만 남는다
   (실측 497×792 · 마스터-다중 디테일: 그리드 셋이 49·43·35px · 보이는 데이터 행 0).

   pane 에 최소 높이를 주고, **넘치면 이 패널이 스크롤한다.**

   ⚠️ **조상에 기대지 않는다.** 처음에는 조상(.bp-tpl-split · BpContentLayout)의 세로 고정을
      풀어 .bp-page 가 스크롤하게 했는데, 독립 Review 가 두 경로에서 **내용이 사라지는 것**을
      잡았다 — ① BpContentLayout 의 기본값 ShowOutline="true" 는 overflow:hidden 이라
      flex item 의 자동 최소가 0 으로 풀려 min-height:auto 가 무효다(실측: 레이아웃 607 에
      묶이고 분할만 1185 로 자라 최대 scrollTop 0) ② 고정 높이 래퍼에서는 교차축 stretch 라
      패널이 못 자라고 pane 만 커져 잘린다(실측: 240px 래퍼에서 둘째 pane 이 통째로 바깥).
      둘 다 **직전 판에서는 작게나마 보이던 것**이라 회귀였다.

      overflow-y: auto 는 그 둘을 모두 닫는다 — 패널이 못 자라면 그냥 스크롤한다.

   ⚠️ **스크롤바는 바깥 하나만 둔다.** 중첩 분할까지 스크롤하면 스크롤바가 겹친다.
      안쪽은 visible 로 두어 자라게 하고 바깥이 전부를 받는다.
   ⚠️ **푸는 것은 세로뿐이다.** overflow-x 는 clip 그대로 — 컬럼 많은 그리드가 레이아웃을
      밀어내면 안 된다(error-prevention #23).
   ⚠️ 숫자는 --bp-break-md(768px) 와 손으로 맞춘다 — @media 는 var() 를 못 읽는다. */
@media (max-width: 767.98px), (max-height: 700px) {
    /* 바깥 분할이 스크롤을 받는다.
       ⚠️ overflow-y: auto 와 짝지으면 **overflow-x: clip 이 hidden 으로 계산된다**
          (CSS Overflow 3 — 한쪽이 visible/clip 이고 다른 쪽이 아니면 clip 은 hidden 이 된다).
          그래서 이 상태에서는 overflow-clip-margin 이 무효가 되어 **패널 경계에 붙은 입력의
          포커스 링 3px 여백이 사라진다**(실측: 1400×900 에서 90px 그려지던 것이 1400×500 에서 0).
          가로가 잘리는 동작 자체는 같고(레이아웃을 밀어내지 않는다) 잃는 것은 링 여백뿐이라
          좁거나 낮은 창에 한해 받아들인다 — 스크롤이 없으면 내용 자체에 닿지 못한다. */
    .bp-split-panel[b-1ld0ukgwfs] {
        overflow-x: clip;
        overflow-y: auto;
    }

    /* 분할 바를 숨긴다 — **주축이 세로일 때만**이다.
       ⚠️ 이 상태에서 pane 높이는 **바닥·내용**이 정하므로 --bp-split-size 를 쓰지 않는다.
          그래서 바를 끌면 화면은 그대로인데 **저장값만 조용히 틀어진다**(독립 Review R2 실측:
          움직이지 않고 놓기만 해도 40% → 76.8% · 보통 창 복귀 시 첫 pane 100px → 192px).
          StorageKey 를 쓰는 소비처에 그 값이 저장된다. 끌 수 없게 하는 것이 유일한 수습이다.

       ⛔ **방향을 한정하지 않으면 좌우가 유지되는 낮은 창에서 쓸 수 있는 바를 뺏는다.**
          이 갈래는 `width` 를 건드리지 않으므로 row 가 유지되면 첫 pane 의 폭은 여전히
          base 의 `--bp-split-size` 가 정한다 — 드래그가 정상 동작하는데 바만 없어진다.
          0.6.0 이 그렇게 나가 **1366×768 노트북 최대화**(뷰포트 높이 657)에서 좌우 분할을
          조절할 수 없었다(TSK-F45-004 실측: 그 창에서 30%→60% 가 폭 318→636 으로 따라온다).
          쌓인 horizontal 은 **쌓임 갈래가 따로 숨기므로** 여기서 덮을 필요가 없다. */
    .bp-split-panel.vertical > .bp-split-bar[b-1ld0ukgwfs] {
        display: none;
    }

    /* 중첩된 안쪽은 자라게 두고 바깥에 맡긴다 — 스크롤바를 겹치지 않는다. */
    .bp-split-panel .bp-split-panel[b-1ld0ukgwfs] {
        min-height: auto;
        overflow-y: visible;
    }

    /* pane 은 **내용에 맞춰 자란다** — 그래야 중첩 분할이 자란 만큼이 바깥 스크롤 영역에
       닿고, 동시에 base 의 overflow: clip 이 아무것도 자르지 않는다.

       ⚠️ 세로를 visible 로 풀지 않는다. 한 판에서 그렇게 했다가 독립 Review 가 잡았다 —
          첫 pane 은 height 가 고정(stack-size)이라 내용이 **다음 pane 위에 그려져**
          2×2 중첩 데모에서 「설비」 위에 「작업자」가 포개져 읽을 수 없었다(실측 300px 겹침).
          박스 좌표로는 안 보이고 그림으로만 갈린다(error-prevention #27).

       ⚠️ 그래서 height 고정을 푼다. --bp-split-stack-size 는 이 상태에서 **정확한 높이가
          아니라 바닥**이 된다 — 내용이 그보다 크면 pane 이 자란다. */
    /* ⚠️ 특이도를 base 와 **같은 모양**으로 맞춘다. `.bp-split-panel > .bp-split-first` (0,3,0)
       로 쓰면 base 의 `.bp-split-panel.vertical > .bp-split-first` (0,4,0) 에 **진다** —
       한 판에서 그렇게 썼다가 pane 이 280px 에 머물러 겹침이 그대로였다(error-prevention #26).
       @media 는 특이도를 올려주지 않는다. */
    .bp-split-panel.horizontal > .bp-split-first[b-1ld0ukgwfs],
    .bp-split-panel.vertical > .bp-split-first[b-1ld0ukgwfs] {
        height: auto;
        flex: 0 0 auto;
        min-height: max(var(--bp-split-stack-size, 50%), var(--bp-split-stack-min, 280px));
    }

    .bp-split-panel.horizontal > .bp-split-second[b-1ld0ukgwfs],
    .bp-split-panel.vertical > .bp-split-second[b-1ld0ukgwfs] {
        min-height: var(--bp-split-stack-min, 280px);
    }

    /* ⚠️ shrink 를 0 으로 두는 것은 **주축이 세로일 때만**이다.
       1 이면 둘째 pane 이 내용보다 작게 줄어 base 의 overflow: clip 이 다시 자르고,
       그 만큼이 바깥 스크롤 영역에 닿지 못한다(실측: 바깥 패널 스크롤 649 → 110).

       ⛔ 방향을 한정하지 않으면 **좌우 모드에서 가로를 깬다** — 주축이 가로라
          shrink 0 이 폭에 걸려 둘째 pane 이 내용 폭(1044px)으로 부풀어 패널 밖으로
          밀린다. 패널의 overflow-x 는 hidden 이라 스크롤바가 없어 **도달 불가**다
          (독립 Review R3 실측: 1366×657 +392px · 1400×500 +372px · 1920×700 +60px ·
          오른쪽 칸의 툴바·컬럼·페이지네이터가 사라졌다).
          ⚠️ AC-F45-09 로는 안 잡힌다 — 밀리는 것은 패널이 아니라 pane 이다.
       ⛔ **클래스로 방향을 가를 수 없다.** bp-split-stack-* 는 뷰포트와 무관하게 **항상**
          붙어 있고 방향은 미디어쿼리가 정한다. 그래서 horizontal 쪽은 이 공통 갈래가 아니라
          **쌓임 갈래(max-width 만 보는 블록)** 안에 둔다. vertical 은 언제나 column 이라 안전하다. */
    .bp-split-panel.vertical > .bp-split-second[b-1ld0ukgwfs] {
        flex: 1 0 auto;
    }
}

/* ── 좌우가 유지되는 경우(넓고 낮은 창) — pane 이 자기 내용을 스크롤한다 ─────────
   위 갈래는 **쌓인 상태**를 전제한다. pane 이 세로로 줄지어 있으므로 자라게 두고 바깥
   패널 하나가 스크롤을 받으면 된다.

   폭이 넉넉해 좌우가 유지되면 pane 은 **교차축**으로 나란하다. 그때는 min-height 로
   자라게 할 수 없고(교차축은 stretch 다) 내용이 넘쳐 잘린다 — 실측 1400×500 에서
   바깥 패널 스크롤이 3px 뿐이고 그리드 넷 중 일부가 도달 불가였다.

   그래서 그 폭에서는 **각 pane 이 자기 내용을 스크롤한다.** 좌우로 나뉜 두 칸이 각각
   스크롤하는 것은 보통의 모양이고, 바깥 하나로는 두 칸을 함께 못 민다. */
@media (min-width: 768px) and (max-height: 700px) {
    .bp-split-panel.horizontal > .bp-split-first[b-1ld0ukgwfs],
    .bp-split-panel.horizontal > .bp-split-second[b-1ld0ukgwfs] {
        overflow-y: auto;
    }
}
/* _content/BPack.Components/Layout/BpTreeMenu.razor.rz.scp.css */
/* BpTreeMenu · 디자인 가이드 shell.css §Tree menu */

.bp-tree-menu[b-9n1e1e1ve8] {
    background: var(--bp-bg-surface);
    border-right: 1px solid var(--bp-border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

/* 옵션 Title 섹션 (ShowHeader && (Title|HeaderActions) 인 경우만 렌더) — 검색 헤더 아래 */
[b-9n1e1e1ve8] .bp-tree-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--bp-space-2) var(--bp-space-4);
    border-bottom: 1px solid var(--bp-border-light);
    flex-shrink: 0;
}

[b-9n1e1e1ve8] .bp-tree-title {
    font-size: var(--bp-size-xs);
    font-weight: var(--bp-weight-bold);
    letter-spacing: var(--bp-tracking-wide);
    text-transform: uppercase;
    color: var(--bp-text-secondary);
}

[b-9n1e1e1ve8] .bp-tree-header-actions {
    display: inline-flex;
    gap: 4px;
}

[b-9n1e1e1ve8] .bp-tree-body {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--bp-space-2) 0;
    /* 메뉴 폭이 좁아 기본 스크롤바가 내용을 밀어낸다. 본문·그리드는 건드리지 않는다.
       ⚠️ webkit 의사요소를 병기하지 않는다 — 비-auto 표준 속성이 있으면 Chromium 이 무시한다. */
    scrollbar-width: thin;
    scrollbar-color: var(--bp-text-tertiary) transparent;
}

[b-9n1e1e1ve8] .bp-tree-body:hover {
    scrollbar-color: var(--bp-text-secondary) transparent;
}

[b-9n1e1e1ve8] .bp-tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 검색 결과 비어있음 */
[b-9n1e1e1ve8] .bp-tree-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bp-space-2);
    padding: var(--bp-space-6) var(--bp-space-3);
    color: var(--bp-text-tertiary);
    font-size: var(--bp-size-xs);
    text-align: center;
}
[b-9n1e1e1ve8] .bp-tree-empty i {
    font-size: var(--bp-icon-lg);
    opacity: 0.6;
}
/* _content/BPack.Components/Layout/BpTreeMenuNode.razor.rz.scp.css */
/* BpTreeMenuNode · shell.css §Tree row */

.bp-tree-node[b-qf21b41vvt] {
    position: relative;
}

[b-qf21b41vvt] .bp-tree-row {
    display: grid;
    /* chevron 14px(글리프 10px) · icon 20px(글리프 14px) · 라벨.
       빈 열은 아예 만들지 않는다 — 아래 변형 클래스 참조(T03). */
    /* chevron 은 --bp-control-icon-xs(14px · 글리프 10px),
       아이콘 슬롯은 --bp-control-icon-md(20px · 글리프 14px + 여유). */
    grid-template-columns: var(--bp-control-icon-xs) var(--bp-control-icon-md) 1fr;
    gap: var(--bp-space-1);
    align-items: center;
    height: var(--bp-row-compact);
    padding: 0 var(--bp-space-3);
    /* 좌측 들여쓰기는 .bp-tree-level-N 클래스가 결정.
       BpTreeMenu 루트의 인라인 --bp-tree-base / --bp-tree-step 을 base/step 으로 사용. */
    padding-left: var(--bp-tree-base, 12px);
    font-size: var(--bp-size-xs);
    color: var(--bp-text-secondary);
    cursor: pointer;
    transition: background-color var(--bp-duration-fast), color var(--bp-duration-fast);
    min-width: 0;
    user-select: none;
    position: relative;   /* is-active 좌측 앰버 바(::before) 기준 */
}

/* 레벨별 들여쓰기 — 클래스 기반이라 collapsed CSS 룰이 specificity 로 override 가능 */
[b-qf21b41vvt] .bp-tree-level-0 { padding-left: var(--bp-tree-base, 12px); }
[b-qf21b41vvt] .bp-tree-level-1 { padding-left: calc(var(--bp-tree-base, 12px) + 1 * var(--bp-tree-step, 12px)); }
[b-qf21b41vvt] .bp-tree-level-2 { padding-left: calc(var(--bp-tree-base, 12px) + 2 * var(--bp-tree-step, 12px)); }
[b-qf21b41vvt] .bp-tree-level-3 { padding-left: calc(var(--bp-tree-base, 12px) + 3 * var(--bp-tree-step, 12px)); }
[b-qf21b41vvt] .bp-tree-level-4 { padding-left: calc(var(--bp-tree-base, 12px) + 4 * var(--bp-tree-step, 12px)); }
[b-qf21b41vvt] .bp-tree-level-5 { padding-left: calc(var(--bp-tree-base, 12px) + 5 * var(--bp-tree-step, 12px)); }
[b-qf21b41vvt] .bp-tree-level-6 { padding-left: calc(var(--bp-tree-base, 12px) + 6 * var(--bp-tree-step, 12px)); }
[b-qf21b41vvt] .bp-tree-level-7 { padding-left: calc(var(--bp-tree-base, 12px) + 7 * var(--bp-tree-step, 12px)); }
[b-qf21b41vvt] .bp-tree-level-8 { padding-left: calc(var(--bp-tree-base, 12px) + 8 * var(--bp-tree-step, 12px)); }
[b-qf21b41vvt] .bp-tree-level-9 { padding-left: calc(var(--bp-tree-base, 12px) + 9 * var(--bp-tree-step, 12px)); }

[b-qf21b41vvt] .bp-tree-row:hover {
    background: var(--bp-bg-muted);
    color: var(--bp-text-primary);
}

/* Active · BpGrid·BpTree 행과 동일한 시맨틱 토큰 (--bp-row-active-*) 사용.
   이 토큰은 라이트/다크 양쪽 블록에 정의되어 있어 자동 테마 전환된다 — 별도 다크 룰 불필요. */
[b-qf21b41vvt] .bp-tree-row.is-active {
    background: var(--bp-row-active-bg);
    color: var(--bp-row-active-text);
    font-weight: var(--bp-weight-semibold);
}
/* 좌측 앰버 바 — BpNavMenu(.bp-snb-base.bp-active::before) 와 동일한 형태.
   행 높이(--bp-row-compact 32px)에 맞춰 상하 6px 인셋. */
[b-qf21b41vvt] .bp-tree-row.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--bp-row-active-accent);
    border-radius: 0 var(--bp-radius-sm) var(--bp-radius-sm) 0;
}

/* 키보드 방향키 커서 — 마우스 hover(중립 배경)보다 뚜렷한 focus 표시.
   시맨틱 active 토큰(브랜드 틴트)으로 채워 라이트/다크 모두 명확히 보이고,
   중립 hover·앰버 선택과 구분된다. 테두리 없이 배경만 사용.
   검색 input 에서 ↑/↓ 이동 시 bp-navigation.js 가 .bp-kbd-active 를 토글. */
[b-qf21b41vvt] .bp-tree-row.bp-kbd-active {
    background: var(--bp-active-bg);
    color: var(--bp-active-text);
}

/* 다크 모드 hover — --bp-bg-muted 가 surface 와 거의 같아 안 보이므로 반투명 primary 사용.
   선택(.is-active 앰버)은 덮지 않게 :not 으로 보호. (BpNavMenu 와 동일)
   ⚠️ 여기서는 ::deep 을 쓰지 않는다 — `[data-theme] ::deep .x` 는 스코프 속성이
   [data-theme] 에 concat 되어([data-theme][b-xxx]) html 과 매칭 실패한다.
   ::deep 없이 쓰면 스코프가 .bp-tree-row 에 직접 붙어(.bp-tree-row[b-xxx]) 정상 동작. */
[data-theme="dark"] .bp-tree-row:hover:not(.is-active)[b-qf21b41vvt] {
    background: var(--bp-active-bg-soft);
    color: var(--bp-text-primary);
}

[b-qf21b41vvt] .bp-tree-row .chevron {
    display: grid;
    place-items: center;
    color: var(--bp-text-tertiary);
    font-size: 10px;
    transition: transform var(--bp-duration-fast) var(--bp-ease-out);
}

/* 확장 상태에서 chevron 회전 — 부모 노드의 is-expanded 에 반응 */
.bp-tree-node.is-expanded > .bp-tree-row .chevron[b-qf21b41vvt] {
    transform: rotate(90deg);
}

[b-qf21b41vvt] .bp-tree-row .chevron-placeholder {
    display: inline-block;
    width: var(--bp-control-icon-xs);
    height: var(--bp-control-icon-md);
}

/* ── 열 구성 변형 (T03) ──────────────────────────────────────
   라벨 앞 고정 오버헤드를 실제로 필요한 만큼만 쓴다.
     기본(chevron+icon) 14 + 4 + 20 + 4 = 42px
     아이콘 없는 트리          14 + 4          = 18px
     leaf 전용 그룹                 20 + 4     = 24px
     둘 다 없음                                =  0px
   판정은 C# 이 한다 — 아이콘은 트리 단위, chevron 은 형제 그룹 단위. */
[b-qf21b41vvt] .bp-tree-row-no-icon {
    grid-template-columns: var(--bp-control-icon-xs) 1fr;
}
[b-qf21b41vvt] .bp-tree-row-no-chevron {
    grid-template-columns: var(--bp-control-icon-md) 1fr;
}
[b-qf21b41vvt] .bp-tree-row-label-only {
    grid-template-columns: 1fr;
}

[b-qf21b41vvt] .bp-tree-row .icon {
    display: grid;
    place-items: center;
    font-size: var(--bp-control-icon-xs);
    color: inherit;
}

[b-qf21b41vvt] .bp-tree-row .label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-qf21b41vvt] .bp-tree-children {
    list-style: none;
    padding: 0;
    margin: 0 0 0 16px;
    border-left: 1px solid var(--bp-tree-connector);
}

.bp-tree-node.is-collapsed > .bp-tree-children[b-qf21b41vvt] {
    display: none;
}

/* ── 접힘 대체 이니셜 (F03) ──────────────────────────────────
   아이콘이 없는 노드의 라벨 첫 글자. **기본은 숨김** — 펼침에서는 라벨이 이미 보이고,
   여기서 보이게 하면 기존 소비처의 펼침 화면이 바뀐다.
   보이는 것은 bp-layout.css 의 접힘 규칙이 정한다.

   색은 아이콘(--bp-text-tertiary)보다 한 단계 진한 --bp-text-secondary 를 쓴다 —
   글자는 글리프보다 얇아 같은 톤이면 더 흐리게 읽힌다. */
[b-qf21b41vvt] .bp-tree-initial {
    display: none;
    font-size: var(--bp-size-xs);
    font-weight: var(--bp-weight-semibold);
    line-height: 1;
    color: var(--bp-text-secondary);
}

/* 아이콘 열이 없는 트리라도 슬롯은 **렌더된다** — 접힘에서 이니셜을 보여야 하기 때문이다(T01).
   펼침에서는 여기서 display:none 으로 그리드 흐름에서 빼 열 수를 맞춘다.

   ⚠️ **이 블록은 반드시 `.bp-tree-row .icon { display: grid }` 뒤에 와야 한다.**
   둘 다 특이도 (0,3,0) 동률이라 순서로 결정된다 — 앞에 두면 조용히 지고,
   슬롯이 살아남아 라벨이 다음 그리드 행으로 밀린다(실측: 라벨 폭 255 → 14px).

   접힘에서는 bp-layout.css 의 규칙(0,3,1)이 이겨 다시 보인다. */
[b-qf21b41vvt] .bp-tree-row-no-icon > .icon,
[b-qf21b41vvt] .bp-tree-row-label-only > .icon {
    display: none;
}
/* _content/BPack.Components/Navigation/BpAccordion.razor.rz.scp.css */
/* BpAccordion 스코프드 스타일 */
/* 루트 요소는 ::deep 없이 사용 */
.bp-accordion[b-jnxtswevgw] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bp-border-light);
    border-radius: 8px;
    overflow: hidden;
}
/* _content/BPack.Components/Navigation/BpAccordionItem.razor.rz.scp.css */
/* BpAccordionItem 스코프드 스타일 */
/* 루트 요소는 ::deep 없이 사용 */
.bp-accordion-item[b-emdyvuitg3] {
    border-bottom: 1px solid var(--bp-border-light);
}

.bp-accordion-item:last-child[b-emdyvuitg3] {
    border-bottom: none;
}

[b-emdyvuitg3] .bp-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: var(--bp-text-primary);
    transition: background-color 0.2s;
}

[b-emdyvuitg3] .bp-accordion-header:hover {
    background-color: var(--bp-overlay-hover);
}

[b-emdyvuitg3] .bp-accordion-header i {
    font-size: 14px;
    color: var(--bp-text-tertiary);
    transition: transform 0.2s;
}

[b-emdyvuitg3] .bp-accordion-content {
    padding: 0 16px 12px;
    font-size: 14px;
    color: var(--bp-text-secondary);
}
/* _content/BPack.Components/Navigation/BpDropdown.razor.rz.scp.css */
/* BpDropdown 스코프드 스타일 */

/* 루트 요소 — ::deep 사용 불가 (루트 자신은 [b-xxx]의 자손이 아님) */
.bp-dropdown[b-ywwavncrb7] {
    position: relative;
    display: inline-flex;
}

/* 트리거 래퍼 — display는 컨텐츠 그대로 유지 */
[b-ywwavncrb7] .bp-dropdown-trigger {
    display: inline-flex;
    cursor: pointer;
}

/*
 * 메뉴 — position: fixed 로 viewport 기준 배치하여 ancestor 의
 * overflow:hidden/auto 에 클리핑되지 않도록 한다.
 * 좌표는 bp-navigation.js 의 bpDropdown.updatePosition 이 인라인 스타일로 설정한다.
 * 첫 렌더 시 깜빡임 방지를 위해 visibility:hidden 으로 시작하고
 * JS 가 좌표 계산 후 visible 로 전환한다.
 */
/*
 * 떠 있는 메뉴는 배경 위에 확실히 떠 보여야 한다.
 * 다크에서 --bp-bg-surface(#1A1D23) 와 --bp-border-light(#222831) 는 거의 같은 색이어서
 * 테두리가 보이지 않았고, box-shadow 도 정의되지 않은 legacy --shadow-md 를 참조해
 * fallback(검정 7%)으로 떨어져 다크에서 사라졌다.
 * → 배경은 떠 있는 면(elevated), 테두리는 strong, 그림자는 --bp-shadow-lg 토큰을 쓴다.
 */
[b-ywwavncrb7] .bp-dropdown-menu {
    position: fixed;
    z-index: 10000;
    visibility: hidden;
    min-width: 160px;
    background-color: var(--bp-bg-elevated);
    color: var(--bp-text-primary);
    border: 1px solid var(--bp-border-strong);
    border-radius: var(--bp-radius-md);
    padding: var(--bp-space-1);
    box-shadow: var(--bp-shadow-lg);
}
/* _content/BPack.Components/Navigation/BpPagination.razor.rz.scp.css */
/* BpPagination 스코프드 스타일 */
/* _content/BPack.Components/Navigation/BpTab.razor.rz.scp.css */
/* BpTab 스코프드 스타일 */

.bp-tab-container[b-lcpv8n9r4h] {
    width: 100%;
}

[b-lcpv8n9r4h] .bp-tab-content {
    margin-top: var(--bp-space-3);
}

/* ── Fill 모드: 부모 flex 영역을 세로로 채우고 콘텐츠(활성 패널)가 남은 높이 차지 ── */
.bp-tab-container.bp-tab-fill[b-lcpv8n9r4h] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.bp-tab-container.bp-tab-fill[b-lcpv8n9r4h]  .bp-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0; /* 그리드가 탭바 바로 밑에서 시작 → 좌측 그리드 헤더행과 라인 정렬 */
}

/* ── Bar 모드 · pill 캡슐 형태 (compact 변형) ─────────────── */
[b-lcpv8n9r4h] .bp-tab-bar {
    width: 100%;
    background-color: var(--bp-bg-muted);
    border: 1px solid var(--bp-border-light);
    border-radius: var(--bp-radius-md);
    padding: 3px;
}

/* Bar 내부의 tab-menu 는 언더라인 제거 + gap 축소 */
[b-lcpv8n9r4h] .bp-tab-bar .bp-tab-menu {
    border-bottom: 0;
    gap: 2px;
    padding: 0;
    background: transparent;
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

/* Bar 내부 탭 : 둥근 직사각형 (radius sm) · 선택 시 surface 로 들뜸 */
[b-lcpv8n9r4h] .bp-tab-bar .bp-tab-menu > span {
    height: calc(var(--bp-h-md) - 6px);
    border-radius: var(--bp-radius-sm);
    margin-bottom: 0;
}

[b-lcpv8n9r4h] .bp-tab-bar .bp-tab-menu > span:hover {
    background: color-mix(in srgb, var(--bp-primary-500) 8%, transparent);
}

[b-lcpv8n9r4h] .bp-tab-bar .bp-tab-menu input[type="radio"]:checked + span {
    background: var(--bp-bg-elevated);
    color: var(--bp-active-text);
    box-shadow: var(--bp-shadow-sm);
    font-weight: var(--bp-weight-semibold);
}
[b-lcpv8n9r4h] .bp-tab-bar .bp-tab-menu input[type="radio"]:checked + span::after {
    display: none;  /* Bar 모드는 underline 대신 pill 배경으로 강조 */
}

/* Bar + TabWidth="auto" — 같은 폭 grid 대신 제목 폭. 넘치면 탭 행 안에서 가로 스크롤(HR-MGT-004).
   위의 grid 규칙이 전역 .bp-tab-width-auto(inline-flex)를 이겨 auto 가 무시되던 결함이다. */
[b-lcpv8n9r4h] .bp-tab-bar .bp-tab-menu.bp-tab-width-auto {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
}
[b-lcpv8n9r4h] .bp-tab-bar .bp-tab-menu.bp-tab-width-auto > span {
    flex: 0 0 auto;
}

/* TrailingContent — 마지막 탭 바로 오른쪽. 탭(span)이 아니라 탭 규칙을 받지 않는다. */
[b-lcpv8n9r4h] .bp-tab-trailing {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
/* 같은 폭 grid(Bar 기본 · FullWidth)에서는 TrailingContent 도 한 칸(1fr)을 차지하므로, 있을 때만
   flex 로 바꿔 탭은 같은 폭으로 나누고 TrailingContent 는 제 폭만 쓰게 한다. */
[b-lcpv8n9r4h] .bp-tab-bar .bp-tab-menu:has(> .bp-tab-trailing):not(.bp-tab-width-auto),
[b-lcpv8n9r4h] .bp-tab-menu.bp-full-width:has(> .bp-tab-trailing) {
    display: flex;
}
[b-lcpv8n9r4h] .bp-tab-bar .bp-tab-menu:has(> .bp-tab-trailing):not(.bp-tab-width-auto) > span,
[b-lcpv8n9r4h] .bp-tab-menu.bp-full-width:has(> .bp-tab-trailing) > span {
    flex: 1 1 0;
}

/* Bar 모드 사이즈별 내부 탭 높이 = outer - padding*2 */
[b-lcpv8n9r4h] .bp-tab-bar.bp-xs .bp-tab-menu > span { height: calc(var(--bp-h-xs) - 6px); }
[b-lcpv8n9r4h] .bp-tab-bar.bp-sm .bp-tab-menu > span { height: calc(var(--bp-h-sm) - 6px); }
[b-lcpv8n9r4h] .bp-tab-bar.bp-lg .bp-tab-menu > span { height: calc(var(--bp-h-lg) - 6px); }
[b-lcpv8n9r4h] .bp-tab-bar.bp-xl .bp-tab-menu > span { height: calc(var(--bp-h-xl) - 6px); }
/* _content/BPack.Components/Navigation/BpTabPanel.razor.rz.scp.css */
/* BpTabPanel 스코프드 스타일 */

/* Fill 모드(부모 BpTab Fill="true")에서 활성 패널이 콘텐츠 영역을 세로로 채운다 →
   안의 그리드/트리 Height="100%" 가 해석되어 채워지고 스크롤된다. */
.bp-tab-panel-fill[b-bpnzflm4w9] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* _content/BPack.Components/Tree/BpCardTree.razor.rz.scp.css */
/* BpCardTree 스코프드 스타일 */

/* ── 래퍼: 부모 flex 컨테이너를 채우도록 ── */
.bp-card-tree[b-frdnnvwr24] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* ── 트리 테두리/둥근모서리 제거 (카드가 컨테이너 역할) ── */
[b-frdnnvwr24] .bp-tree.bp-tree {
    border: none;
    border-radius: 0;
}

/* ── 트리 툴바를 카드 헤더 영역으로 절대 위치 이동 ── */
[b-frdnnvwr24] .bp-card-content .bp-tree-toolbar {
    position: absolute;
    top: -34px;
    right: 8px;   /* 컴팩트(34px 헤더): 버튼 우측 여백을 헤더 상/하 여백(≈8px)에 맞춤 */
    height: 34px;
    border-bottom: none;
    padding: 0;
    z-index: 1;
    background: transparent;
}

/* ── 비컴팩트 모드 (52px 헤더) ── */
.bp-card-tree:not(.bp-compact)[b-frdnnvwr24]  .bp-card-content .bp-tree-toolbar {
    top: -52px;
    height: 52px;
    right: 16px;   /* 비컴팩트(52px 헤더): 상/하 여백(≈16px)에 맞춤 */
}

/* ── HeaderActions: BpTree 툴바 내부에 CascadingValue로 렌더링됨 ── */
/* 별도 위치 조정 불필요 — 툴바 flex 레이아웃에 자연스럽게 참여 */
/* _content/BPack.Components/Tree/BpTree.razor.rz.scp.css */
/* BpTree 스코프드 스타일 */

/* ── 컨테이너 (루트 요소는 ::deep 없이 사용) ── */
.bp-tree[b-5oa0hdwn85] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;              /* Containment (Phase 3) */
    min-height: 0;
    border: 1px solid var(--bp-border-light);
    border-radius: var(--bp-radius-lg);
    background-color: var(--bp-bg-surface);
    overflow: hidden;
    outline: none;
}

/* ── 툴바 ── */
[b-5oa0hdwn85] .bp-tree-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 8px;
    border-bottom: 1px solid var(--bp-border-light);
    gap: 4px;
}

[b-5oa0hdwn85] .bp-tree-toolbar-left {
    justify-content: flex-start;
}

[b-5oa0hdwn85] .bp-tree-toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-5oa0hdwn85] .bp-tree-toolbar-btn {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[b-5oa0hdwn85] .bp-tree-toolbar-divider {
    width: 1px;
    height: 18px;
    background-color: var(--bp-border-default);
    margin: 0 2px;
}

/* ── 테이블 래퍼 ── */
[b-5oa0hdwn85] .bp-tree-table-wrapper {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ── 스크롤 모드 (고정 높이) ── */
[b-5oa0hdwn85] .bp-tree-scroll {
    overflow: auto;
}

/* ── 테이블 ── */
[b-5oa0hdwn85] .bp-tree-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

[b-5oa0hdwn85] .bp-tree-table-fixed {
    table-layout: fixed;
}

[b-5oa0hdwn85] .bp-tree-table-fit-content {
    width: auto;
}

/* FitContent 모드: 셀 텍스트 줄바꿈 방지하여 컬럼 축소 차단 */
[b-5oa0hdwn85] .bp-tree-table-fit-content .bp-tree-td {
    white-space: nowrap;
}

/* ── 고정 헤더 ── */
[b-5oa0hdwn85] .bp-tree-thead-sticky th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* 그룹 헤더 모드: 1행(그룹)은 z-index 높게 */
[b-5oa0hdwn85] .bp-tree-group-header-row th {
    z-index: 3;
}

/* 그룹 헤더 모드: 서브 헤더 행의 sticky top (그룹 헤더 높이와 일치) */
[b-5oa0hdwn85] .bp-tree-sub-header-row th {
    top: 28px;
}

[b-5oa0hdwn85] .bp-tree-compact .bp-tree-sub-header-row th {
    top: 32px;
}

/* ── 헤더 ── */
[b-5oa0hdwn85] .bp-tree-th {
    height: var(--bp-row-default);
    padding: var(--bp-row-pad-default);
    text-align: left;
    font-size: var(--bp-size-xs);
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-secondary);
    background-color: var(--bp-bg-muted);
    border-bottom: 1px solid var(--bp-border-light);
    white-space: nowrap;
    user-select: none;
}

[b-5oa0hdwn85] .bp-tree-th-resizable {
    position: relative;
    overflow: hidden;
}

/* ── 리사이즈 핸들 ── */
[b-5oa0hdwn85] .bp-tree-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
}

[b-5oa0hdwn85] .bp-tree-resize-handle::after {
    content: '';
    position: absolute;
    top: 25%;
    right: 0;
    width: 2px;
    height: 50%;
    background-color: transparent;
    border-radius: 1px;
    transition: background-color 0.15s;
}

[b-5oa0hdwn85] .bp-tree-resize-handle:hover::after {
    background-color: var(--bp-primary-500);
}

/* ── 정렬 ── */
[b-5oa0hdwn85] .bp-tree-sortable {
    cursor: pointer;
}

[b-5oa0hdwn85] .bp-tree-sortable:hover {
    background-color: var(--bp-bg-muted);
}

[b-5oa0hdwn85] .bp-tree-sort-icon {
    display: inline-flex;
    margin-left: 4px;
    vertical-align: middle;
}

[b-5oa0hdwn85] .bp-tree-sort-icon i {
    font-size: 10px;
    color: var(--bp-text-secondary);
}

[b-5oa0hdwn85] .bp-tree-sort-inactive {
    color: var(--bp-text-disabled) !important;
}

/* ── 세로 컬럼 구분선 (ShowColumnBorders) ── */
[b-5oa0hdwn85] .bp-tree-col-borders .bp-tree-th,
[b-5oa0hdwn85] .bp-tree-col-borders .bp-tree-td {
    border-right: 1px solid var(--bp-border-light);
}

[b-5oa0hdwn85] .bp-tree-col-borders .bp-tree-th {
    text-align: center !important;
}

/* ── 그룹 헤더 모드 (HeaderGroup 사용 시) ── */
[b-5oa0hdwn85] .bp-tree-group-th {
    height: 28px;
    padding: 2px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--bp-primary-fg);
    background-color: var(--bp-bg-muted);
    border-bottom: 1px solid var(--bp-border-light);
    white-space: nowrap;
    user-select: none;
}

[b-5oa0hdwn85] .bp-tree-group-label {
    display: inline-block;
}

[b-5oa0hdwn85] .bp-tree-has-groups .bp-tree-th,
[b-5oa0hdwn85] .bp-tree-has-groups .bp-tree-td {
    border-right: 1px solid var(--bp-border-light);
}

[b-5oa0hdwn85] .bp-tree-has-groups .bp-tree-th {
    text-align: center;
}

[b-5oa0hdwn85] .bp-tree-has-groups .bp-tree-row:last-child .bp-tree-td {
    border-bottom: 1px solid var(--bp-border-light);
}

[b-5oa0hdwn85] .bp-tree-compact .bp-tree-group-th {
    height: 24px;
    padding: 2px 6px;
    font-size: 11px;
}

/* ── 행 ── */
[b-5oa0hdwn85] .bp-tree-row {
    transition: background-color 0.15s;
}

[b-5oa0hdwn85] .bp-tree-row:hover {
    background-color: var(--bp-bg-muted);
}

/* ── 셀 ── */
[b-5oa0hdwn85] .bp-tree-td {
    padding: var(--bp-row-pad-default);
    border-bottom: 1px solid var(--bp-border-light);
    font-size: var(--bp-row-font-default);
    color: var(--bp-text-primary);
    vertical-align: middle;
}

/* ── 밀도: Compact (가이드 기본: 트리는 Compact 권장 · 32px) ── */
[b-5oa0hdwn85] .bp-tree-compact .bp-tree-th {
    height: var(--bp-row-compact);
    padding: var(--bp-row-pad-compact);
    font-size: var(--bp-row-font-compact);
}

[b-5oa0hdwn85] .bp-tree-compact .bp-tree-td {
    padding: var(--bp-row-pad-compact);
    font-size: var(--bp-row-font-compact);
}

[b-5oa0hdwn85] .bp-tree-compact .bp-tree-row {
    height: var(--bp-row-compact);
}

/* ── 밀도: Comfortable ── */
[b-5oa0hdwn85] .bp-tree-comfortable .bp-tree-th {
    height: var(--bp-row-comfortable);
    padding: var(--bp-row-pad-comfortable);
}

[b-5oa0hdwn85] .bp-tree-comfortable .bp-tree-td {
    padding: var(--bp-row-pad-comfortable);
    font-size: var(--bp-row-font-comfortable);
}

[b-5oa0hdwn85] .bp-tree-comfortable .bp-tree-row {
    height: var(--bp-row-comfortable);
}

/* ── 행 활성 (Accent/Amber 배경 + 좌측 accent 바 · Grid 와 동일) ── */
/* `:hover` (spec 0,2,0) 보다 우선되도록 `.bp-tree-row.bp-tree-row-active` 더블 클래스 사용. */
[b-5oa0hdwn85] .bp-tree-row.bp-tree-row-active,
[b-5oa0hdwn85] .bp-tree-row.bp-tree-row-active:hover {
    background-color: var(--bp-row-active-bg);
    color: var(--bp-row-active-text);
}
[b-5oa0hdwn85] .bp-tree-row.bp-tree-row-active td:first-child {
    box-shadow: inset 3px 0 0 var(--bp-row-active-accent);
}

[b-5oa0hdwn85] .bp-tree-row-clickable {
    cursor: pointer;
}

[b-5oa0hdwn85] .bp-tree-row-selected {
    background-color: color-mix(in srgb, var(--bp-primary-500) 8%, transparent) !important;
}

/* ── 편집 상태 — td padding 유지로 컬럼 폭 안정 ── */

/* readonly 셀 */
[b-5oa0hdwn85] .bp-tree-row-editing .bp-tree-td:not(:has(.bp-tree-cell-edit)) {
    background-color: var(--bp-bg-muted);
}

/* editable 셀 */
[b-5oa0hdwn85] .bp-tree-row-editing .bp-tree-td:has(.bp-tree-cell-edit) {
    background-color: var(--bp-bg-surface);
}

/* 행 왼쪽 띠는 **셀**에 그린다 — 표가 border-collapse: separate 라 tr 의 border 는 렌더되지 않는다
   (CSS 표 모델에서 border 를 그리는 것은 셀이다 · HR-DVM-010). 활성 행 띠(위)가 더 구체적이라 그쪽이 이긴다. */
[b-5oa0hdwn85] .bp-tree-row-new {
    background-color: color-mix(in srgb, var(--bp-success) 10%, transparent);
}

[b-5oa0hdwn85] .bp-tree-row-new td:first-child {
    box-shadow: inset 3px 0 0 var(--bp-success);
}

[b-5oa0hdwn85] .bp-tree-row-deleted {
    background-color: color-mix(in srgb, var(--bp-error) 10%, transparent);
    opacity: 0.6;
}

[b-5oa0hdwn85] .bp-tree-row-dirty td:first-child {
    box-shadow: inset 3px 0 0 var(--bp-warning);
}

/* ── 고친 칸 — 오른쪽 위 모서리 삼각표 ── */
/* 배경 이미지로 그린다: 포커스 칸은 inset box-shadow, 선택 범위는 background-color 를 쓰므로 축이 겹치지 않고,
   고정 열(position: sticky)에도 영향을 주지 않는다(::after + position: relative 는 sticky 를 깬다). */
[b-5oa0hdwn85] .bp-tree-td.bp-cell-dirty {
    background-image: linear-gradient(225deg, var(--bp-warning) 5px, transparent 5px);
    background-repeat: no-repeat;
    background-position: top right;
}

/* ── 체크박스 컬럼 ── */
[b-5oa0hdwn85] .bp-tree-checkbox-col {
    width: 40px;
    min-width: 40px;
    text-align: center;
    padding: 0 8px;
}

/* ── 액션 컬럼 ── */
[b-5oa0hdwn85] .bp-tree-action-col {
    width: 80px;
    min-width: 80px;
    text-align: center;
    padding: 0 4px;
    white-space: nowrap;
}

[b-5oa0hdwn85] .bp-tree-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

[b-5oa0hdwn85] .bp-tree-add-btn {
    margin: 0 auto;
}

[b-5oa0hdwn85] .bp-tree-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Tree 내 버튼 아이콘 · 사이즈 + 색 통일 (디자인 가이드 control icon sm) ── */
[b-5oa0hdwn85] .bp-tree-toolbar .bp-btn,
[b-5oa0hdwn85] .bp-tree-action-buttons .bp-btn {
    height: var(--bp-h-sm);
    min-width: var(--bp-h-sm);
    padding: 0 8px;
}
/* 툴바 + 헤더(th) 액션 영역: Ghost 는 테두리로 가시성 확보 (bp-primary 필드형은 white 유지) */
[b-5oa0hdwn85] .bp-tree-toolbar .bp-btn:not(.bp-primary),
[b-5oa0hdwn85] .bp-tree-th .bp-tree-action-buttons .bp-btn:not(.bp-primary) {
    color: var(--bp-text-secondary);
    border: 1px solid var(--bp-border-default);
}
[b-5oa0hdwn85] .bp-tree-toolbar .bp-btn:not(.bp-primary):hover,
[b-5oa0hdwn85] .bp-tree-th .bp-tree-action-buttons .bp-btn:not(.bp-primary):hover {
    color: var(--bp-text-primary);
    background-color: var(--bp-bg-muted);
    border-color: var(--bp-border-strong);
}
/* 행(td) 내부 액션 버튼: 테두리 없이 tertiary(비활성 톤), 호버 시 활성화 */
[b-5oa0hdwn85] .bp-tree-td .bp-tree-action-buttons .bp-btn:not(.bp-primary) {
    color: var(--bp-text-tertiary);
}
[b-5oa0hdwn85] .bp-tree-td .bp-tree-action-buttons .bp-btn:not(.bp-primary):hover {
    color: var(--bp-text-primary);
    background-color: var(--bp-bg-muted);
}
[b-5oa0hdwn85] .bp-tree-toolbar .bp-btn:has(i:first-child:last-child),
[b-5oa0hdwn85] .bp-tree-action-buttons .bp-btn:has(i:first-child:last-child) {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
}
/* Compact 밀도: 헤더/행 액션 버튼(루트추가·편집/삭제/하위추가, 아이콘 단독)을 xs(24px)로 축소.
   행 높이(32px)를 넘겨 행이 부푸는 것을 막아 BpGrid 와 동일하게 맞춘다. 툴바 버튼은 제외. */
[b-5oa0hdwn85] .bp-tree-compact .bp-tree-add-btn:has(i:first-child:last-child),
[b-5oa0hdwn85] .bp-tree-compact .bp-tree-action-buttons .bp-btn:has(i:first-child:last-child) {
    width: var(--bp-h-xs);
    height: var(--bp-h-xs);
    min-width: var(--bp-h-xs);
    padding: 0;
}
[b-5oa0hdwn85] .bp-tree-toolbar .bp-btn i,
[b-5oa0hdwn85] .bp-tree-action-buttons .bp-btn i,
[b-5oa0hdwn85] .bp-tree-add-btn i,
[b-5oa0hdwn85] .bp-tree-delete-all-btn i {
    font-size: var(--bp-control-icon-sm);
}
/* Delete 아이콘 전용 색 (헤더): 파괴 동작 암시 */
[b-5oa0hdwn85] .bp-tree-th .bp-tree-action-buttons .bp-error-ghost,
[b-5oa0hdwn85] .bp-tree-th .bp-tree-action-buttons .bp-btn.bp-error-ghost {
    color: var(--bp-error-fg);
}
[b-5oa0hdwn85] .bp-tree-th .bp-tree-action-buttons .bp-btn.bp-error-ghost:hover {
    color: var(--bp-error-fg);
    background-color: color-mix(in srgb, var(--bp-error) 10%, transparent);
}
/* 행(td) 내 Delete: 비활성 톤 기본, 호버 시에만 빨강 표시 */
[b-5oa0hdwn85] .bp-tree-td .bp-tree-action-buttons .bp-btn.bp-error-ghost:hover {
    color: var(--bp-error-fg);
    background-color: color-mix(in srgb, var(--bp-error) 10%, transparent);
}

/* ── 트리 노드 셀 ── */
[b-5oa0hdwn85] .bp-tree-node-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

[b-5oa0hdwn85] .bp-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    color: var(--bp-text-tertiary);
    border-radius: var(--bp-radius-xs);
    transition: transform var(--bp-duration-fast) var(--bp-ease-out),
                background-color var(--bp-duration-fast) var(--bp-ease-out),
                color var(--bp-duration-fast) var(--bp-ease-out);
}

/* Chevron rotate : 확장 시 90° (가이드 motion 토큰 사용) */
[b-5oa0hdwn85] .bp-tree-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
    transition: transform var(--bp-duration-fast) var(--bp-ease-out);
}
[b-5oa0hdwn85] .bp-tree-toggle i {
    transition: transform var(--bp-duration-fast) var(--bp-ease-out);
}

[b-5oa0hdwn85] .bp-tree-toggle:hover {
    background-color: var(--bp-border-light);
    color: var(--bp-text-secondary);
}

[b-5oa0hdwn85] .bp-tree-toggle i {
    font-size: 12px;
}

[b-5oa0hdwn85] .bp-tree-toggle-placeholder {
    display: inline-block;
    width: 20px;
    min-width: 20px;
    height: 20px;
}

/* ── 편집 입력 필드 ── */
[b-5oa0hdwn85] .bp-tree-cell-edit {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    width: 100%;
}

[b-5oa0hdwn85] .bp-tree-input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    font-size: inherit;
    color: var(--bp-text-primary);
    background-color: transparent;
    outline: none;
}

[b-5oa0hdwn85] .bp-tree-input-error {
    background-color: color-mix(in srgb, var(--bp-error) 10%, transparent);
}

/* number input 스피너 숨김 */
[b-5oa0hdwn85] .bp-tree-input[type="number"]::-webkit-inner-spin-button,
[b-5oa0hdwn85] .bp-tree-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-5oa0hdwn85] .bp-tree-input[type="number"] {
    -moz-appearance: textfield;
}

[b-5oa0hdwn85] .bp-tree-select {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    font-size: inherit;
    color: var(--bp-text-primary);
    background-color: var(--bp-bg-surface);
    outline: none;
    cursor: pointer;
}

[b-5oa0hdwn85] .bp-tree-cell-edit:has(.bp-tree-checkbox-cell) {
    justify-content: center;
}

[b-5oa0hdwn85] .bp-tree-checkbox-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── 유효성 오류 ── */
[b-5oa0hdwn85] .bp-tree-validation-error {
    font-size: 11px;
    color: var(--bp-error-fg);
    margin-top: 1px;
}

/* ── 삭제 텍스트 ── */
[b-5oa0hdwn85] .bp-tree-text-deleted {
    text-decoration: line-through;
    color: var(--bp-text-tertiary);
}

[b-5oa0hdwn85] .bp-tree-cell-deleted {
    text-decoration: line-through;
    color: var(--bp-text-tertiary);
}

/* ── 빈 상태 ── */
[b-5oa0hdwn85] .bp-tree-empty {
    text-align: center;
    padding: 20px 16px;
    color: var(--bp-text-tertiary);
    font-size: 14px;
}

/* ── 필터 행 ── */
[b-5oa0hdwn85] .bp-tree-filter-row {
    background-color: var(--bp-bg-muted);
    border-bottom: 1px solid var(--bp-border-light);
}

[b-5oa0hdwn85] .bp-tree-filter-cell {
    padding: 4px 8px;
    vertical-align: middle;
}

/* 테두리·radius·3-state 는 bp-components.css 의 "Input 3-state 표준" 이 소유.
   (BpGrid 필터와 같은 역할인데 자체 보더·2px 링·hover 없음으로 남아 있었다.) */
[b-5oa0hdwn85] .bp-tree-filter-input {
    width: 100%;
    height: 26px;
    padding: 2px 6px;
    font-size: 12px;
    color: var(--bp-text-primary);
    background-color: var(--bp-bg-surface);
    outline: none;
}

/* 고정 높이 모드: 필터 행 sticky */
[b-5oa0hdwn85] .bp-tree-thead-sticky .bp-tree-filter-row td {
    position: sticky;
    top: 40px;
    z-index: 2;
    background-color: var(--bp-bg-muted);
}

[b-5oa0hdwn85] .bp-tree-compact .bp-tree-thead-sticky .bp-tree-filter-row td {
    top: 32px;
}

[b-5oa0hdwn85] .bp-tree-comfortable .bp-tree-thead-sticky .bp-tree-filter-row td {
    top: 52px;
}

/* 그룹 헤더 모드: 필터 행 offset = 그룹 헤더 높이 + 서브 헤더 높이 */
[b-5oa0hdwn85] .bp-tree-has-groups .bp-tree-thead-sticky .bp-tree-filter-row td {
    top: 68px;
}

[b-5oa0hdwn85] .bp-tree-has-groups.bp-tree-compact .bp-tree-thead-sticky .bp-tree-filter-row td {
    top: 64px;
}

[b-5oa0hdwn85] .bp-tree-has-groups.bp-tree-comfortable .bp-tree-thead-sticky .bp-tree-filter-row td {
    top: 80px;
}

/* Cell navigation owns the focus indicator at td level. Native/global outlines inside
   the tree are suppressed so transient input focus cannot draw a second ring. */
.bp-tree:focus[b-5oa0hdwn85],
.bp-tree:focus-visible[b-5oa0hdwn85] {
    outline: none;
}

.bp-tree-cellnav[b-5oa0hdwn85]  .bp-tree-input,
.bp-tree-cellnav[b-5oa0hdwn85]  .bp-tree-select {
    border: 0;
    box-shadow: none;
    outline: none;
}

.bp-tree-cellnav[b-5oa0hdwn85]  .bp-tree-input {
    appearance: none;
    -webkit-appearance: none;
}

.bp-tree-cellnav[b-5oa0hdwn85]  .bp-tree-input:focus,
.bp-tree-cellnav[b-5oa0hdwn85]  .bp-tree-input:focus-visible,
.bp-tree-cellnav[b-5oa0hdwn85]  .bp-tree-select:focus,
.bp-tree-cellnav[b-5oa0hdwn85]  .bp-tree-select:focus-visible {
    border: 0;
    box-shadow: none;
    outline: none;
}

/* ── CellNavigation 블록 선택 ── */
[b-5oa0hdwn85] .bp-cell-selected {
    background-color: color-mix(in srgb, var(--bp-primary-500) 8%, transparent);
}

/* ── CellNavigation 포커스 ── */
[b-5oa0hdwn85] .bp-cell-focus,
[b-5oa0hdwn85] .bp-cell-focus-inactive {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bp-border-brand);
    position: relative;
    z-index: 1;
}

/* 포커스 셀 (편집 중) · 디자인 가이드 Signal Amber */
[b-5oa0hdwn85] .bp-cell-focus.bp-cell-editing {
    box-shadow: inset 0 0 0 2px var(--bp-accent-fg);
}

/* 셀 포커스 상태: 내부 input의 포커스 스타일 억제 (td 외곽선으로 통일) */
[b-5oa0hdwn85] .bp-cell-focus .bp-tree-input:focus,
[b-5oa0hdwn85] .bp-cell-focus .bp-tree-select:focus {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

[b-5oa0hdwn85] .bp-tree-cellnav .bp-tree-row:has(.bp-cell-focus) {
    background-color: var(--bp-primary-50);
}

/* ── 컬럼 재정렬 (드래그앤드롭) ── */
[b-5oa0hdwn85] .bp-tree-dragging {
    opacity: 0.5;
}

[b-5oa0hdwn85] .bp-tree-drop-before {
    box-shadow: inset 3px 0 0 0 var(--bp-primary-500);
}

[b-5oa0hdwn85] .bp-tree-drop-after {
    box-shadow: inset -3px 0 0 0 var(--bp-primary-500);
}

[b-5oa0hdwn85] th[draggable="true"] {
    cursor: grab;
}

[b-5oa0hdwn85] th[draggable="true"]:active {
    cursor: grabbing;
}