@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';
@import '_content/TradingSystem.BlazorCommon/TradingSystem.BlazorCommon.slq5owku06.bundle.scp.css';
@import '_content/TradingSystem.ClientCore/TradingSystem.ClientCore.1pylxe10u0.bundle.scp.css';

/* /Components/Controls/DxGridCellTooltip.razor.rz.scp.css */
/* 툴팁 host - 흐름 밖(absolute) + 크기 0. 레이아웃 최상위에 두어도 배치에 영향을 주지 않는다.
   툴팁 본체는 fixed 배치(fluent-anchored-region)라 여기 크기와 무관하게 셀 옆에 뜬다. */
.cell-tip-host[b-dlyi3qob54] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
}

/* 툴팁은 포인터를 받지 않는다 - 툴팁이 포인터 밑에 놓이는 순간(셀 위쪽 가장자리 1~5px 에 포인터를 둔 경우 등)
   mouseover 대상이 셀이 아니라 fluent-tooltip 이 되어 JS(grid-cell-tooltip.js)가 "셀 밖" 으로 보고 닫고, 닫히면 다시 셀이
   되어 300ms 뒤 또 뜨는 깜빡임 루프가 생겼다(2026-10-26 실측). ::deep - fluent-tooltip 은 자식 컴포넌트가 렌더한 요소다. */
.cell-tip-host[b-dlyi3qob54]  fluent-tooltip {
    pointer-events: none;
}

/* 말줄임 전체 글자와 보조 정보가 함께 실리면 JS 가 줄바꿈(\n)으로 잇는다 - 두 줄로 보이게 한다. */
.cell-tip-text[b-dlyi3qob54] {
    white-space: pre-line;
}
/* /Components/Layout/CustomerCenterPhone.razor.rz.scp.css */
/* 헤더 제목 글자 크기를 물려받지 않고 본문 기본 크기로 표시한다 */
.customer-center[b-yekmvnuvbq] {
    margin-left: 0.5rem;
    font-size: var(--type-ramp-base-font-size);
    font-weight: normal;
    white-space: nowrap;
    /* 잘리지 않는다 - 다 보이지 않으면 감싼 제목 영역(.header-brand)을 가로로 밀어서 본다. */
    flex-shrink: 0;
}

/* 자리가 모자라는 좁은 화면에서는 번호만 남긴다 */
@media (max-width: 640px) {
    .customer-center-label[b-yekmvnuvbq] {
        display: none;
    }
}

/* 연락처 팝오버를 여는 번호 - 글자 모양은 그대로 둔다(밑줄 없음, 2026-10-25 사용자 지시). 마우스는 올리면, 터치는 누르면 열린다. */
.customer-center-button[b-yekmvnuvbq] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* 연락처 팝오버 - 최상위 레이어(top layer)에 그려진다. 좌표는 JS 가 번호 바로 아래로 잡는다(js/customer-center-popover.js). */
.customer-center-popover[b-yekmvnuvbq] {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-floating);
    color: var(--neutral-foreground-rest);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
    font-size: var(--type-ramp-base-font-size);
    font-weight: normal;
}

.customer-center-popover dl[b-yekmvnuvbq] {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 12px;
    margin: 0;
}

.customer-center-popover dt[b-yekmvnuvbq] {
    color: var(--neutral-foreground-hint);
}

.customer-center-popover dd[b-yekmvnuvbq] {
    margin: 0;
    user-select: text;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-7c1zj6i1sj],
.components-reconnect-repeated-attempt-visible[b-7c1zj6i1sj],
.components-reconnect-failed-visible[b-7c1zj6i1sj],
.components-pause-visible[b-7c1zj6i1sj],
.components-resume-failed-visible[b-7c1zj6i1sj],
.components-rejoining-animation[b-7c1zj6i1sj] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-7c1zj6i1sj],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-7c1zj6i1sj],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-7c1zj6i1sj],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-7c1zj6i1sj],
#components-reconnect-modal.components-reconnect-retrying[b-7c1zj6i1sj],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-7c1zj6i1sj],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-7c1zj6i1sj],
#components-reconnect-modal.components-reconnect-failed[b-7c1zj6i1sj],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-7c1zj6i1sj] {
    display: block;
}


/* 연결 끊김 표면 색 원칙: 회로가 죽은 상태에서도 보여야 하므로 배경/전경은 고정 팔레트,
   다크는 [data-fluent-darkmode] 속성 분기(SSR 렌더 속성이라 토큰/회로 무관 강건).
   버튼/링만 var(토큰, 기존색) 폴백형으로 브랜드 accent 연동 - 토큰은 회로가 끊겨도
   이미 :root 에 주입돼 있어 유효하고, 최초 로드 실패 등 토큰 부재 시엔 기존 파랑으로 폴백. */
#components-reconnect-modal[b-7c1zj6i1sj] {
    background-color: white;
    color: #1f2937;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-7c1zj6i1sj 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-7c1zj6i1sj 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-7c1zj6i1sj 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

[data-fluent-darkmode] #components-reconnect-modal[b-7c1zj6i1sj] {
    /* 다크 - 어두운 표면 + 밝은 전경 */
    background-color: #2b2b2b;
    color: #f3f4f6;
}

#components-reconnect-modal[b-7c1zj6i1sj]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-7c1zj6i1sj 0.5s ease-in-out;
    opacity: 1;
}

/* reveal-pending: 모달이 top-layer 로 떠 있어 문서를 inert 로 만들어 상호작용을 차단하지만,
   시각적으로는 완전히 투명하게 유지한다. transient blip 동안 깜빡임 없이 클릭만 차단하기 위한 상태.
   ReconnectModal.razor.js 의 REVEAL_PENDING_CLASS 와 짝. delay 경과 또는 "failed" 시 클래스 제거 ->
   기존 [open] 애니메이션으로 자연스럽게 노출된다. [open] 규칙을 이기도록 id+class+attr 로 specificity 확보. */
#components-reconnect-modal.js-reveal-pending[b-7c1zj6i1sj],
#components-reconnect-modal.js-reveal-pending[open][b-7c1zj6i1sj] {
    opacity: 0;
    animation: none;
}

#components-reconnect-modal.js-reveal-pending[b-7c1zj6i1sj]::backdrop {
    background-color: transparent;
    animation: none;
}

@keyframes components-reconnect-modal-slideUp-b-7c1zj6i1sj {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-7c1zj6i1sj {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-7c1zj6i1sj {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-7c1zj6i1sj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-7c1zj6i1sj] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-7c1zj6i1sj] {
    border: 0;
    background-color: var(--accent-fill-rest, #6b9ed2);
    color: var(--foreground-on-accent-rest, white);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-7c1zj6i1sj] {
        background-color: var(--accent-fill-hover, #3b6ea2);
    }

    #components-reconnect-modal button:active[b-7c1zj6i1sj] {
        background-color: var(--accent-fill-active, #6b9ed2);
    }

.components-rejoining-animation[b-7c1zj6i1sj] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-7c1zj6i1sj] {
        position: absolute;
        border: 3px solid var(--accent-fill-rest, #0087ff);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-7c1zj6i1sj 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-7c1zj6i1sj] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-7c1zj6i1sj {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Managers/DepositAccountShareStatus.razor.rz.scp.css */
/* 공개 중 - 숨김을 잊지 않도록 눈에 띄게 */
.share-status[b-nq9axxmo3e] {
    white-space: nowrap;
    padding: 0 6px;
    color: var(--error);
    font-weight: 600;
}
/* /Components/Pages/Managers/DeviceInspections.razor.rz.scp.css */
/* 단말 점검 조회 화면의 '상세' 표와 텍스트 블록. 레거시 InspectionViewer 의 구성을 그대로 두되
   색은 테마 토큰을 따른다(레거시의 하드코딩 회색은 다크 모드에서 글자가 묻힌다).
   목록은 FluentDataGrid 라 hover/선택/표시자 스타일을 여기서 정의하지 않는다 - 전역 tailwind.css 담당.

   토큰은 Fluent 중립/accent 계열만 쓴다 - --quote-* 팔레트는 .quote-palette 스코프(주문 화면) 안에서만
   정의되어 관리자 화면에서는 전부 미해석(투명/기본색)이 된다. */

.ts-di-th[b-ygv0v2ien2] {
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-secondary-rest);
    padding: 4px 8px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.ts-di-td[b-ygv0v2ien2] {
    border: 1px solid var(--neutral-stroke-rest);
    padding: 4px 8px;
    text-align: left;
    white-space: nowrap;
}

/* 장비정보/설치프로그램/실행프로세스 - 줄바꿈 유지하되 가로 스크롤 대신 접어서 보여준다. */
.ts-di-pre[b-ygv0v2ien2] {
    background: var(--neutral-fill-secondary-rest);
    border: 1px solid var(--neutral-stroke-divider-rest);
    padding: 10px;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 12px;
    max-height: 320px;
    overflow-y: auto;
    /* 상단 마진만 여기서 지운다 - 위 간격은 앞선 소제목(h4)의 mb-2! 가 만든다.
       아래쪽은 razor 의 mb-2! 유틸리티가 담당한다(이웃 h4/table 과 같은 방식).
       여기에 margin 축약으로 0 을 두면 안 된다: scoped 선택자(.ts-di-pre[b-xxx])는 비레이어라
       @layer utilities 의 .mb-2 를 무조건 이기고, important 를 붙인 .mb-2! 와도 충돌 소지가 생긴다. */
    margin-top: 0;
}
/* /Components/Pages/Managers/ManagerDepositWithdraws.razor.rz.scp.css */
/* 툴바의 영업일 구간 라벨 - 기간별 회원손익(UserProfitLosses.razor.css)과 같은 규칙. 라벨과 날짜 칸 사이는 띄우고,
   "~" 양옆은 최대한 붙인다(스택 gap 2px). 좁은 폭(480px 이하)에서는 라벨을 숨긴다.
   날짜 칸에는 AriaLabel("영업일 시작/종료")이 있어 접근성 이름은 유지된다. */
.range-label[b-hoqta3lbst] {
    white-space: nowrap;
    margin-right: 6px;
}

@media (max-width: 480px) {
    .range-label[b-hoqta3lbst] {
        display: none;
    }
}

/* DevExpress 툴바가 템플릿 항목에 넣는 기본 padding(바깥 3.5px + 안쪽 3.5px)을 없앤다. */
[b-hoqta3lbst] .range-toolbar-item,
[b-hoqta3lbst] .range-toolbar-item > .dxbl-toolbar-item-tmpl,
[b-hoqta3lbst] .share-status-toolbar-item,
[b-hoqta3lbst] .share-status-toolbar-item > .dxbl-toolbar-item-tmpl {
    padding-left: 0;
    padding-right: 0;
}

/* 공개 상태 글자를 버튼 줄 높이의 가운데에 둔다(템플릿 항목은 기본이 위 정렬). */
[b-hoqta3lbst] .share-status-toolbar-item {
    align-self: stretch;
    display: flex;
    align-items: center;
}

[b-hoqta3lbst] .share-status-toolbar-item > .dxbl-toolbar-item-tmpl {
    display: flex;
    align-items: center;
    height: 100%;
}
/* /Components/Pages/Managers/UserDayProfitLosses.razor.rz.scp.css */
/* 툴바의 영업일 구간 라벨. 라벨과 날짜 칸 사이는 띄우고, "~" 양옆은 최대한 붙인다(스택 gap 2px).
   모바일 최소폭(375px)에서는 날짜 칸 두 개 + 조회 버튼만으로 툴바가 가득 차므로 480px 이하에서 라벨을 숨긴다.
   날짜 칸에는 AriaLabel("영업일 시작/종료")이 있어 접근성 이름은 유지된다. */
.range-label[b-hgaouxpn89] {
    white-space: nowrap;
    margin-right: 6px;
}

@media (max-width: 480px) {
    .range-label[b-hgaouxpn89] {
        display: none;
    }
}

/* DevExpress 툴바가 템플릿 항목에 넣는 기본 padding(바깥 3.5px + 안쪽 3.5px)을 없애 375px 폭에서 조회 버튼 자리를 확보한다. */
[b-hgaouxpn89] .range-toolbar-item,
[b-hgaouxpn89] .range-toolbar-item > .dxbl-toolbar-item-tmpl {
    padding-left: 0;
    padding-right: 0;
}
/* /Components/Pages/Managers/UserProfitLosses.razor.rz.scp.css */
/* 툴바의 영업일 구간 라벨. 라벨과 날짜 칸 사이는 띄우고, "~" 양옆은 최대한 붙인다(스택 gap 2px).
   모바일 최소폭(375px)에서는 날짜 칸 두 개 + 조회 버튼만으로 툴바가 가득 차므로 480px 이하에서 라벨을 숨긴다.
   날짜 칸에는 AriaLabel("영업일 시작/종료")이 있어 접근성 이름은 유지된다. */
.range-label[b-weq6y6xdss] {
    white-space: nowrap;
    margin-right: 6px;
}

@media (max-width: 480px) {
    .range-label[b-weq6y6xdss] {
        display: none;
    }
}

/* DevExpress 툴바가 템플릿 항목에 넣는 기본 padding(바깥 3.5px + 안쪽 3.5px)을 없애 375px 폭에서 조회 버튼 자리를 확보한다. */
[b-weq6y6xdss] .range-toolbar-item,
[b-weq6y6xdss] .range-toolbar-item > .dxbl-toolbar-item-tmpl {
    padding-left: 0;
    padding-right: 0;
}
/* /Components/Pages/ManageUserAccounts/EditOrderLimitInfoDialog.razor.rz.scp.css */
/* 한도 7칸 배치(2026-10-24 사용자 지시) - 국내 / 해외선물 두 구역(FluentLabelDivider), 구역 안은 위에서 아래로:
     국내    : 선물(한 줄) / 옵션 매도 + 옵션 매수(한 행 2칸)
     해외선물: 일반 + 미니 + 마이크로 종목당(한 행 3칸) / 합산(한 줄)
   여러 칸 행(.ol-fit-row)은 칸을 같은 폭으로 나란히 두고, 그 행의 라벨 줄 하나라도 한 줄에 다 들어가지 않으면
   fit-row-stack.js 가 행에 .ts-fit-row-stacked 를 붙여 칸 전체를 세로로 한 칸씩 쌓는다(전부 아니면 전무 - 3칸이 2+1 로 갈라지지 않는다).
   종전의 고정 폭 기준(container query 480px / 720px)은 없앴다 - 라벨 길이(짧은 라벨 / 재정의 체크박스 유무)에 맞춰 판정이 따라간다.
   간격 4px = 기존 FluentGrid Spacing="1". */
.ol-limits[b-5hvqbl5d1v],
.ol-section[b-5hvqbl5d1v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* 칸 수만큼 같은 폭 열 - 칸을 늘리거나 줄여도 CSS 를 고치지 않는다(grid-auto-flow: column). */
.ol-fit-row[b-5hvqbl5d1v] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    /* 한 행의 칸들은 위쪽을 맞춘다 - 오류 문구로 한 칸이 길어져도 옆 칸의 입력칸이 함께 밀리지 않는다
       (입출금 신청/회원가입 폼의 .cq-row 와 같은 방식, 2026-10-16 사용자 지시). 아래 끝 정렬(end)이던 때는
       오류 문구가 붙은 칸의 입력칸만 위로 올라갔다. */
    align-items: start;
}

/* 쌓인 행 - 한 열에 칸을 차례로 둔다. 열 간격(gap)은 그대로 둔다 - 판정이 행의 column-gap 을 읽으므로 두 상태에서 같아야 한다. */
.ol-fit-row.ts-fit-row-stacked[b-5hvqbl5d1v] {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
}

/* 칸 - fluent-input-wrapper(h-full + justify-center)는 쓰지 않는다: 격자 칸 높이로 늘어나 내용이 가운데로 내려간다. */
.ol-cell[b-5hvqbl5d1v] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* /Components/Pages/ManageUserAccounts/OrderLimitAmountQuantityField.razor.rz.scp.css */
/* 주문한도 칸 - 라벨(전체 폭) / 입력 줄 [금액 | 수량 계약] / 메시지 줄(전체 폭). 2026-10-17 사용자 지정 배치.
   금액/수량 입력은 자식 컴포넌트의 루트(fluent-text-field)라 scoped 속성이 붙지 않는다 - ::deep 으로 고른다. */
.olq-field[b-b5f94dwvnf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.olq-row[b-b5f94dwvnf] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

/* 금액 칸(AmountNumberField 루트 div - 자식 컴포넌트라 ::deep)이 남는 폭을 모두 쓴다. 한글 표기 줄은 그 안에서 금액 입력 아래에 그려진다. */
.olq-row[b-b5f94dwvnf] >  :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.olq-qty[b-b5f94dwvnf] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
}

/* 수량 칸 폭 = 보일 글자 수(--olq-qty-chars, 기본 3 - 세 자리) x 1ch + 좌우 안쪽 여백(FluentTextField 기본 약 10px 씩).
   더 긴 수량은 입력은 되지만 잘려 보인다. 합산 칸은 6("00,000")을 넘긴다(QuantityChars 파라미터). */
.olq-field[b-b5f94dwvnf]  .olq-qty-input {
    width: calc(var(--olq-qty-chars, 3) * 1ch + 24px);
    min-width: 0;
    flex: none;
}

.olq-qty-unit[b-b5f94dwvnf] {
    flex: none;
    color: var(--neutral-foreground-hint);
}

/* 메시지 줄(검증 메시지 + 수량 안내)은 전체 폭. 내용이 없으면 높이 0 - 칸 높이는 금액 칸의 한글 표기 줄(항상 한 줄)이 맞춘다. */
.olq-below[b-b5f94dwvnf] {
    min-width: 0;
}

.olq-qty-note[b-b5f94dwvnf] {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.olq-qty-error[b-b5f94dwvnf] {
    color: var(--error);
}

.olq-qty-hint[b-b5f94dwvnf] {
    color: var(--neutral-foreground-hint);
}
/* /Components/Pages/ManageUserAccounts/OrderLimitOverrideLabelRow.razor.rz.scp.css */
/* 라벨 줄 - 라벨 왼쪽, 재정의 체크박스 오른쪽(2026-10-23 사용자 확정). */
.olr-row[b-oelin2jhls] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

/* 라벨과 체크박스는 줄지도 꺾이지도 않는다(2026-10-24) - 칸이 좁아 한 줄에 다 들어가지 않으면 다이얼로그가 그 행의 칸을
   전부 세로로 쌓는다(fit-row-stack.js). 판정이 이 자식들의 폭 합을 자연 폭으로 쓰므로, 줄어들 수 있으면 배치에 따라 측정값이
   달라져 쌓기/풀기가 흔들린다. 자식 컴포넌트의 루트라 scoped 속성이 없어 ::deep 으로 고른다. */
.olr-row[b-oelin2jhls] >  * {
    flex: none;
    white-space: nowrap;
}

.olr-row[b-oelin2jhls]  .olr-override {
    font-size: 0.875rem;
}
/* /Components/Pages/Partners/PartnerUserProfitLosses.razor.rz.scp.css */
/* 툴바의 영업일 구간 라벨. 라벨과 날짜 칸 사이는 띄우고, "~" 양옆은 최대한 붙인다(스택 gap 2px).
   모바일 최소폭(375px)에서는 날짜 칸 두 개 + 조회 버튼만으로 툴바가 가득 차므로 480px 이하에서 라벨을 숨긴다.
   날짜 칸에는 AriaLabel("영업일 시작/종료")이 있어 접근성 이름은 유지된다. */
.range-label[b-n0b4on4nmm] {
    white-space: nowrap;
    margin-right: 6px;
}

@media (max-width: 480px) {
    .range-label[b-n0b4on4nmm] {
        display: none;
    }
}

/* DevExpress 툴바가 템플릿 항목에 넣는 기본 padding(바깥 3.5px + 안쪽 3.5px)을 없애 375px 폭에서 조회 버튼 자리를 확보한다. */
[b-n0b4on4nmm] .range-toolbar-item,
[b-n0b4on4nmm] .range-toolbar-item > .dxbl-toolbar-item-tmpl {
    padding-left: 0;
    padding-right: 0;
}
/* /Components/SharePages/ModifyUserForm.razor.rz.scp.css */
/* 폼 폭 기준 열 배치 - FluentGridItem(sm/md)은 viewport media query 라 대화창/MAUI 창 폭과 어긋난다.
   임계값 480px: Web 대화창 본문(약 520px)은 여러 열, MAUI 기본 창(약 370px)은 한 열이 되지 않도록
   실제 폼 폭으로 판정한다. 간격 4px = 기존 FluentGrid Spacing="1". */
.form-cq[b-tc59tv2jg0] {
    container-type: inline-size;
    container-name: form-cq;
}

.cq-row[b-tc59tv2jg0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    /* 오류 문구로 한 칸이 길어져도 옆 칸은 위쪽 정렬을 유지한다
       (stretch 면 칸이 늘어나고, 안쪽 fluent-input-wrapper 의 justify-center 가 내용을 가운데로 내린다) */
    align-items: start;
}

@container form-cq (min-width: 480px) {
    .cq-row-2[b-tc59tv2jg0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cq-row-3[b-tc59tv2jg0] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cq-row-bank[b-tc59tv2jg0] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
}
/* /Components/SharePages/RegisterUserForm.razor.rz.scp.css */
/* 폼 폭 기준 열 배치 - FluentGridItem(sm/md)은 viewport media query 라 대화창/MAUI 창 폭과 어긋난다.
   임계값 480px: Web 대화창 본문(약 520px)은 여러 열, MAUI 기본 창(약 370px)은 한 열이 되지 않도록
   실제 폼 폭으로 판정한다. 간격 4px = 기존 FluentGrid Spacing="1". */
.form-cq[b-ot3cdyk8on] {
    container-type: inline-size;
    container-name: form-cq;
}

.cq-row[b-ot3cdyk8on] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    /* 오류 문구로 한 칸이 길어져도 옆 칸은 위쪽 정렬을 유지한다
       (stretch 면 칸이 늘어나고, 안쪽 fluent-input-wrapper 의 justify-center 가 내용을 가운데로 내린다) */
    align-items: start;
}

@container form-cq (min-width: 480px) {
    .cq-row-2[b-ot3cdyk8on] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cq-row-3[b-ot3cdyk8on] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cq-row-bank[b-ot3cdyk8on] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
}