/* 로그인 뒤 화면(메인 레이아웃)을 로그인 화면과 같은 톤으로 맞추는 덮어쓰기. 색 토큰은 auth.css 의 --auth-* 를 쓴다.
   Bootstrap Yeti 의 청록(#008cba)이 Ant Design 파랑(#1890ff)과 섞여 보이던 것을 브랜드 파랑 하나로 통일한다.
   AppShell.razor 에서 다른 스타일보다 나중에 읽어야 한다 */

/* ---- 글자 크기 단계 ----
   12(보조) / 13(표·입력·메뉴) / 14(본문) / 16(페이지 제목) / 20(로그인 제목)만 쓴다.
   예전에는 9.2·11.2·11.55·11.6px 같은 값이 섞여 화면마다 달라 보이고 안내 문구는 읽기 어려울 정도로 작았다 (12px 아래로 내려가지 않게 한다) */
:root {
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
}

/* 보조 설명·안내 문구 */
small,
.small,
.form-text {
    font-size: var(--fs-xs);
}

/* 라벨: 부모 글자 크기를 따르되 12px 아래로는 내려가지 않게 (표 안에서 11.55px 로 줄어드는 것을 막는다) */
label {
    font-size: max(12px, 1em);
}

.policy-check {
    font-size: var(--fs-sm);
}

code {
    font-size: 12px;
}

/* 버튼: 입력칸보다 약해 보이지 않게 굵기를 올린다 (Yeti 기본은 300) */
.btn,
.btn-sm,
.btn-group-sm > .btn {
    font-size: 12.5px;
    font-weight: 500;
}

.btn-lg {
    font-size: var(--fs-base);
}

/* 입력칸 */
.form-control,
.form-control-sm,
.custom-select,
.custom-select-sm {
    font-size: var(--fs-sm);
}

/* 데이터 표: 어느 화면이든 13px */
.table,
.table td,
.table th,
.ant-table,
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td,
.e-grid .e-rowcell,
.e-grid .e-headercell,
.e-grid .e-headercell .e-headertext,
.e-grid .e-detailcell {
    font-size: var(--fs-sm);
}

/* ---- 표 행 높이: 글자 13px + 줄 높이 20px + 위아래 3~4px = 26~28px ---- */
.e-grid .e-rowcell {
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 20px;
}

.ant-table tfoot > tr > td,
.ant-table tfoot > tr > th,
.ant-table-tbody > tr > td,
.ant-table-thead > tr > th {
    padding: 4px 6px;
    line-height: 20px;
}

/* 접속기록 같은 작은 표(Bootstrap table-sm)도 같은 높이로 */
.table-sm td,
.table-sm th {
    padding: 3px 4px;
}

/* ---- 색: 링크와 Bootstrap 버튼을 브랜드 파랑으로 ---- */
a {
    color: var(--auth-primary);
}

a:hover {
    color: var(--auth-primary-hover);
}

.btn {
    border-radius: 6px;
}

.btn-primary {
    background-color: var(--auth-primary);
    border-color: var(--auth-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--auth-primary-hover);
    border-color: var(--auth-primary-hover);
    color: #fff;
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(24, 144, 255, .25);
}

.btn-outline-primary {
    border-color: var(--auth-primary);
    background-color: #fff;
    color: var(--auth-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--auth-primary);
    border-color: var(--auth-primary);
    color: #fff;
}

/* ---- 바탕·글꼴·카드 ---- */
body {
    font-family: var(--auth-font);
}

/* 바탕은 흰 카드가 떠 보일 만큼 진하게 (#f5f7fa 는 흰색과 거의 구분되지 않았다) */
.ant-layout,
.ant-pro-basicLayout .ant-layout-content {
    background: #eef1f5;
}

/* 본문은 흰 카드 한 겹에 담는다. 카드 안에 다시 테두리 상자를 두지 않는다 (묶음은 구분선으로) */
.ant-card,
.ant-pro-page-container .card {
    border-color: #e3e7ee;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

/* 표 머리는 회색 바탕으로 내용 줄과 구분하고, 표 바깥에 테두리를 둔다 */
.ant-card .e-grid {
    border: 1px solid #e3e7ee;
    border-radius: 8px;
    overflow: hidden;
}

.e-grid .e-gridheader,
.e-grid .e-gridheader tr,
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    background: #f6f8fa;
}

.e-grid .e-gridheader {
    border-bottom-color: #e3e7ee;
}

.e-grid .e-headercell .e-headertext {
    color: #475467;
    font-weight: 600;
}

/* Ant 표·Bootstrap 표의 머리도 Syncfusion 표와 같게: 회색 바탕, 왼쪽 정렬, 굵게 */
.ant-table-thead > tr > th,
.table thead th {
    background: #f6f8fa;
    border-bottom: 1px solid #e3e7ee;
    color: #475467;
    font-weight: 600;
    text-align: left;
}

/* 표 안의 강조 줄은 옅은 바탕 + 진한 글자 (행 전체를 진한 색으로 칠하면 다른 화면의 상태 표시보다 지나치게 튄다) */
.table-danger,
.table-danger > td {
    background: #fff1f0 !important;
    color: #cf1322;
}

.table-warning,
.table-warning > td {
    background: #fffbe6 !important;
    color: #ad6800;
}

/* 되돌리기 버튼(뒤로·이전·취소): 흰 바탕 + 회색 테두리. 주 동작은 파랑, 보조 동작은 파란 테두리, 위험은 빨강 */
.btn-secondary {
    background-color: #fff;
    border-color: #d0d5dd;
    color: #344054;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #f6f8fa;
    border-color: #98a2b3;
    color: #1d2939;
}

.ant-btn {
    border-radius: 6px;
}

/* ---- 위쪽 바 ---- */
.ant-pro-global-header {
    box-shadow: 0 1px 0 var(--auth-border-soft);
}

.header-nav-cat {
    color: var(--auth-text);
}

.header-nav-tab {
    color: var(--auth-text-sub);
}

.header-nav-tab:hover,
.header-nav-tab.is-active {
    color: var(--auth-primary);
}

.header-nav-tab.is-active {
    border-bottom-color: var(--auth-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 12px;
}

.header-ip {
    color: var(--auth-text-faint);
    font-size: 12px;
    white-space: nowrap;
}

/* ---- 좌측 메뉴: 좁은 폭, 둥근 항목, 아이콘과 글자 사이 간격 ----
   폭은 BasicLayout.razor 의 SiderWidth(208). 글자 14px, 항목 높이 34px. 접힌 상태(아이콘만)는 라이브러리 기본값을 그대로 둔다 */
.ant-menu-inline:not(.ant-menu-inline-collapsed) .ant-menu-title-content > span,
.ant-menu-inline:not(.ant-menu-inline-collapsed) .ant-menu-title-content > a > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.ant-menu-inline:not(.ant-menu-inline-collapsed) .ant-menu-title-content > span > span:not(.anticon),
.ant-menu-inline:not(.ant-menu-inline-collapsed) .ant-menu-title-content > a > span > span:not(.anticon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ant-menu-inline:not(.ant-menu-inline-collapsed) .ant-menu-item .anticon,
.ant-menu-inline:not(.ant-menu-inline-collapsed) .ant-menu-submenu-title .anticon {
    flex: none;
    margin-right: 0 !important;
    font-size: 16px;
}

/* 항목 높이 (custom_antdesign.css 의 32px 를 덮는다) */
.ant-menu-item,
.ant-menu-submenu-title {
    height: 34px !important;
    line-height: 34px !important;
}

/* 항목: 양옆에 여백을 둔 둥근 알약 모양 */
.ant-menu-dark.ant-menu-inline:not(.ant-menu-inline-collapsed) > .ant-menu-item,
.ant-menu-dark.ant-menu-inline:not(.ant-menu-inline-collapsed) > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-dark.ant-menu-inline:not(.ant-menu-inline-collapsed) .ant-menu-sub .ant-menu-item {
    width: auto;
    margin: 1px 6px !important;
    border-radius: 6px;
}

/* 묶음 제목: 조금 작고 굵게, 항목과 구분 */
.ant-menu-dark.ant-menu-inline:not(.ant-menu-inline-collapsed) > .ant-menu-submenu > .ant-menu-submenu-title {
    padding-left: 10px !important;
    padding-right: 20px !important;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 600;
}

.ant-menu-dark.ant-menu-inline:not(.ant-menu-inline-collapsed) > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow {
    right: 8px !important;
    opacity: .6;
    transform: scale(.85);
}

.ant-menu-dark.ant-menu-inline:not(.ant-menu-inline-collapsed) > .ant-menu-submenu:not(:first-child) {
    margin-top: 4px;
}

/* 묶음 아래 항목: 배경 상자를 없애고 묶음 제목 아이콘보다 안쪽으로 */
.ant-menu-dark.ant-menu-inline .ant-menu-sub {
    background: transparent;
}

.ant-menu-inline:not(.ant-menu-inline-collapsed) .ant-menu-sub .ant-menu-item {
    padding-left: 22px !important;
    padding-right: 8px !important;
    font-size: 14px;
}

/* 선택·마우스 올림: 왼쪽 막대 대신 둥근 배경 */
.ant-menu-dark .ant-menu-item-selected {
    background: rgba(24, 144, 255, .3) !important;
    box-shadow: none;
    font-weight: 600;
}

.ant-menu-dark .ant-menu-item:hover:not(.ant-menu-item-selected),
.ant-menu-dark .ant-menu-submenu-title:hover {
    background: rgba(255, 255, 255, .08);
}

/* 사용자 정보: 사이드바 폭 전체를 채우는 남색 띠. 로고 줄·메뉴와 색으로 나뉜다.
   높이 64px 는 오른쪽 제목 띠(custom_antdesign.css 의 .ant-pro-page-container-warp)와 같다 */
.ant-pro-sider-extra .sidebar-profile {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 64px;
    margin: 0 0 6px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: #0b2b52;
}

.ant-pro-sider-extra .sidebar-avatar {
    width: 30px;
    height: 30px;
    font-size: 13px;
    background: linear-gradient(135deg, var(--auth-primary), var(--auth-teal));
}

.ant-layout-sider-collapsed .ant-pro-sider-extra .sidebar-profile {
    align-items: center;
    padding: 0;
}

/* ---- 사용자 메뉴 ---- */
.user-menu {
    position: relative;
    line-height: 1.5; /* 위쪽 바의 줄 높이(40px)를 물려받으면 메뉴 항목이 늘어난다 */
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px 0 4px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--auth-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.user-menu-btn:hover,
.user-menu-btn.is-open {
    background: #f2f4f7;
}

.user-menu-btn:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 1px;
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--auth-primary), var(--auth-teal));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.user-menu-name {
    max-width: 120px;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-caret {
    color: var(--auth-text-faint);
}

.user-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    min-width: 220px;
    max-width: min(320px, 92vw);
    padding: 6px;
    border: 1px solid var(--auth-border-soft);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
}

.user-menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
    padding: 8px 10px 10px;
    border-bottom: 1px solid #f0f2f5;
}

.user-menu-head strong {
    font-size: 14px;
}

.user-menu-head span {
    color: var(--auth-text-faint);
    font-size: 12px;
}

.user-menu-label {
    padding: 6px 10px 2px;
    color: var(--auth-text-faint);
    font-size: 11px;
    font-weight: 600;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--auth-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.user-menu-item > i {
    flex: none;
    width: 16px;
    color: var(--auth-text-sub);
    text-align: center;
}

.user-menu-item > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
    background: #f5f7fa;
    outline: none;
}

.user-menu-item.is-danger,
.user-menu-item.is-danger > i {
    color: var(--auth-danger);
}

.user-menu-item.is-danger:hover {
    background: var(--auth-danger-bg);
}

.user-menu-sep {
    height: 1px;
    margin: 6px 0;
    background: #f0f2f5;
}

/* ---- 표 줄의 관리 ▾ 메뉴 (Components/RowMenu, docs/blazor-screen-rules.md 8절): AntDesign Dropdown 을 위 사용자 메뉴와 같은 모양으로 ---- */
.row-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 10px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    color: var(--auth-text);
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}

.row-menu-btn:hover,
.ant-dropdown-open > .row-menu-btn,
.ant-dropdown-open.row-menu-btn {
    border-color: var(--auth-primary);
    color: var(--auth-primary);
}

.row-menu-btn:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 1px;
}

.row-menu .ant-dropdown-menu {
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--auth-border-soft);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
}

.row-menu .ant-dropdown-menu-item {
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--auth-text);
    font-size: 13px;
}

.row-menu .ant-dropdown-menu-item i {
    width: 16px;
    margin-right: 10px;
    color: var(--auth-text-sub);
    text-align: center;
}

.row-menu .ant-dropdown-menu-item:hover {
    background: #f5f7fa;
}

.row-menu .ant-dropdown-menu-item-danger,
.row-menu .ant-dropdown-menu-item-danger i {
    color: var(--auth-danger);
}

.row-menu .ant-dropdown-menu-item-danger:hover {
    background: var(--auth-danger-bg);
    color: var(--auth-danger);
}

.row-menu .ant-dropdown-menu-item-group-title {
    padding: 6px 10px 2px;
    color: var(--auth-text-faint);
    font-size: 11px;
    font-weight: 600;
}

.row-menu .ant-dropdown-menu-item-group-list {
    margin: 0;
}

.row-menu .ant-dropdown-menu-item-divider {
    margin: 6px 0;
    background: #f0f2f5;
}

/* ---- 설정 > 보안 정책 ---- */
/* 묶음: 카드 안에 있으므로 상자 대신 위쪽 구분선으로 나눈다 */
.policy-section {
    padding: 16px 0;
    border-top: 1px solid #edf0f4;
}

.policy-section:first-child {
    padding-top: 4px;
    border-top: 0;
}

.policy-title {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--auth-text);
}

.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 12px 16px;
}

.policy-field > label {
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: 600;
}

.policy-field input {
    max-width: 360px;
}

.policy-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
    cursor: pointer;
}

.policy-check > input {
    flex: none;
    margin-top: 4px;
    accent-color: var(--auth-primary);
}

/* 설정 화면 아이콘: 구획 제목과 .title-icon 은 파랑, 항목 라벨(.policy-icon)은 옅은 회색 */
.policy-title > .fa,
.title-icon {
    color: var(--auth-primary);
}

.policy-icon {
    color: var(--auth-text-faint);
    font-weight: 400;
}

/* 아래 안내: 글머리 기호 대신 아이콘. 줄이 넘어가도 글은 아이콘 오른쪽에 맞춘다 */
.policy-help {
    padding-left: 0;
    list-style: none;
}

.policy-help > li {
    position: relative;
    padding-left: 20px;
}

.policy-help > li > .fa {
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    color: var(--auth-text-faint);
    font-size: 13px;
    line-height: inherit;
    text-align: center;
}

/* ---- 위쪽 바 화면 탭의 아이콘 (좌측 메뉴와 같은 아이콘) ---- */
.header-nav-cat .anticon,
.header-nav-tab .anticon {
    margin-right: 5px;
    font-size: 13px;
    vertical-align: -1px;
}

.header-nav-tab:not(.is-active) .anticon {
    color: #8c96a3;
}

/* ---- 알림 (PushDialog) ---- */
.push-this-device {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid #e6eaf0;
    border-radius: 6px;
    background: #fafbfc;
}

/* ---- 문자 계정 시험 발송 (SmsTestBox) ---- */
.sms-test {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 10px;
}

.sms-test-label {
    font-size: 13px;
    font-weight: 600;
}

.sms-test-phone {
    width: 160px;
    max-width: 100%;
}

.sms-test-result {
    font-size: 13px;
}

/* ---- 설정 > 시스템 설정 ---- */
/* 값의 출처: 화면에서 저장함(파랑) / 설정 파일(회색) */
.sys-source {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #f5f5f5;
    color: #666;
    font-size: 11px;
    font-weight: 400;
    line-height: 18px;
    vertical-align: 1px;
}

.sys-source-db {
    border-color: #91caff;
    background: #e6f4ff;
    color: #0958d9;
}

.sys-source > .fa {
    font-size: 10px;
}

/* 시스템 설정 > 서비스 표시의 아이콘 칸 (Pages/SetupSection/ServiceIconField.razor): 미리보기 네모(메뉴 머리와 같은 모양을 크게)·올리기·확성기로 */
.service-icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.service-icon-row .brand-logo.service-icon-preview {
    width: 44px;
    height: 44px;
    margin-right: 0;
    border-radius: 12px;
    font-size: 20px;
}

.service-icon-row .service-icon-uploader {
    flex: 1;
    min-width: 200px;
}

/* 비밀 값: 값 대신 저장 상태와 변경·비우기 버튼 */
.sys-secret {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 360px;
}

.sys-secret-state {
    flex: 1;
    min-width: 0;
    padding: 3px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fafafa;
    color: #555;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sys-secret .btn {
    flex: none;
}

.sys-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.sys-error {
    white-space: pre-line;
}

.policy-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.policy-day {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.policy-day > input {
    accent-color: var(--auth-primary);
}

/* ---- 설정 > 정책 비교 ---- */
.policy-table-wrap {
    overflow-x: auto;
}

.policy-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.policy-table th,
.policy-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--auth-border-soft);
    vertical-align: top;
    white-space: nowrap;
}

.policy-table thead th {
    background: #f8fafc;
    color: var(--auth-text-sub);
    font-weight: 600;
}

.policy-table .sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    border-right: 1px solid var(--auth-border-soft);
    font-weight: 600;
}

.policy-table thead .sticky-col {
    background: #f8fafc;
}

.policy-table .policy-baseline th,
.policy-table .policy-baseline td {
    background: #f8fafc;
    color: var(--auth-text-sub);
}

.policy-table td.is-custom,
.policy-custom-sample {
    background: var(--auth-primary-soft);
    color: #0958d9;
    font-weight: 600;
}

.policy-custom-sample {
    padding: 0 6px;
    border-radius: 4px;
}

/* ---- 설정 > 비밀번호 재설정 ---- */
.mode-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 12px;
}

.mode-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    background: #fff;
    color: var(--auth-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.mode-card:hover {
    border-color: var(--auth-primary);
}

.mode-card.is-selected {
    border-color: var(--auth-primary);
    background: var(--auth-primary-soft);
    box-shadow: 0 0 0 1px var(--auth-primary);
}

.mode-card:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 2px;
}

.mode-card-title {
    font-size: 14px;
    font-weight: 700;
}

.mode-card-title > i {
    margin-right: 4px;
    color: var(--auth-primary);
}

.mode-card-desc {
    color: var(--auth-text-sub);
    font-size: 13px;
    line-height: 1.6;
}

.temp-password {
    padding: 6px 12px;
    border: 1px dashed var(--auth-border);
    border-radius: 6px;
    background: #fff;
    color: var(--auth-text);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    user-select: all;
}

/* ---- 설정 홈 카드, 공지 ---- */
.setup-card {
    border-color: var(--auth-border-soft);
    border-radius: 10px;
}

.setup-card:hover {
    border-color: var(--auth-primary);
    box-shadow: 0 4px 14px rgba(24, 144, 255, .14);
}

.setup-card-title {
    color: var(--auth-text);
}

.notice-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--auth-text);
}

.notice-head > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--auth-primary-soft);
    color: var(--auth-primary);
    font-size: 13px;
}

.notice-body {
    color: var(--auth-text);
    line-height: 1.8;
    white-space: pre-line;
}

/* ---- 글자 대비: 흰 바탕에서 4.5:1 이상 (WCAG AA). Bootstrap·Yeti 기본값은 회색 3.5:1, 초록 2.9:1, 주황 2.5:1, 보조 회색 1.2:1 이었다 ---- */
.text-muted {
    color: #6b7280 !important; /* 4.8:1 */
}

.text-success {
    color: #15803d !important; /* 5.0:1 */
}

.text-warning {
    color: #b45309 !important; /* 5.0:1 */
}

/* 결제 행 "취소" 링크: 전에는 #eee 라 거의 보이지 않았다 */
.text-secondary {
    color: #6b7280 !important;
}

/* Yeti 의 청록(#008cba)이 남아 있던 강조 글자를 브랜드 파랑으로 (위 "색" 절과 같게) */
.text-primary {
    color: var(--auth-primary) !important;
}

/* ---- 알림을 대화상자 위로 ----
   Syncfusion 대화상자(SfDialog)는 z-index 10000(가림막)·10001(본체)로 열리고 AntDesign 알림은 1010 이라,
   대화상자 안에서 낸 저장 실패·검증 오류 알림이 대화상자 머리에 가려 보이지 않았다 (동기·비동기 호출과 무관, 2026-10-24 확인).
   AntDesign 말풍선(Popconfirm)은 스스로 z-index 를 대화상자 위로 잡으므로 건드리지 않는다 */
.ant-message,
.ant-notification {
    z-index: 100000;
}

/* ---- Syncfusion 35판: 묶음(스택) 머리 셀의 위아래 여백 ----
   /css/syncfusion-bootstrap4.css(21판 시절 사본)의 `th[rowspan]` 규칙이 아래 여백 13px 를 준다. 21판은 묶음 머리 셀에 rowspan 속성이 없어
   걸리지 않았는데 35판은 붙여서, 표 머리 첫 줄이 30px → 34.4px 로 커지고 아래 행이 모두 밀렸다 (2026-10-24 21·35판 나란히 비교로 확인) */
.e-grid .e-gridheader table th.e-stackedheadercell[rowspan] {
    padding-bottom: 0;
}

/* Syncfusion 35판: 색 선택 팝업의 팔레트 안쪽 여백. 21판은 10px 이었고 35판 테마는 팔레트 모드에서 0 이라 색 칸이 팝업 가장자리에 붙었다(같은 우선순위로 뒤에서 덮는다) */
.e-container.e-color-palette .e-custom-palette .e-palette {
    padding: 10px;
}

/* Syncfusion 35판: 표 머리글 글자 자리 (21판과 같게)
   35판은 머리글 안에 껍데기(.e-headercell-container)가 하나 더 있어 글자가 쓸 수 있는 너비가 th 안여백 안쪽(좌 5px·우 6px)으로 줄어,
   너비 100px 열의 "목록에서 숨김" 같은 글이 말줄임("목록에서 …")이 된다. 21판은 글자 칸이 th 양옆 5px 를 넘겨 99px 였다.
   껍데기를 양옆 -5px 로 넓히고 안쪽 칸의 -5px 여백은 지워 글자 시작 위치(5.6px)와 자리를 21판과 같게 한다. 묶음 머리 셀은 건드리지 않는다 */
.e-grid .e-headercell .e-headercell-container:not(.e-stacked-header) {
    margin: 0 -5px;
}

.e-grid .e-headercell .e-headercell-container:not(.e-stacked-header) .e-headercelldiv {
    margin: -5px 0; /* 위아래 -5px 는 21판 그대로: 세로로 합친 머리 셀의 글자 높이가 이 값에 달려 있다 */
    flex: 1 1 auto;
}

/* 위의 th[rowspan] 규칙(아래 여백 13px + 아래 정렬)은 세로로 합친 머리 셀(rowspan 2 이상)에만 걸려야 한다.
   21판은 합친 셀에만 rowspan 속성이 있었는데 35판은 모든 머리 셀에 rowspan="1" 을 붙여, 단일 줄·묶음 머리까지 글자가 아래로 내려갔다 */
.e-grid .e-gridheader table th[rowspan="1"] {
    padding-bottom: 0;
    vertical-align: middle;
}

/* 계정 전환 메뉴의 회사 (로고+이름): 줄어들지 않게 두고 계정 글자가 말줄임 */
.user-menu-item > .user-menu-company {
    flex: none;
    max-width: 50%;
    font-weight: 600;
}