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

/* ---- 글자 크기 단계 ----
   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;
}

/* ---- 설정 > 보안 정책 ---- */
/* 묶음: 카드 안에 있으므로 상자 대신 위쪽 구분선으로 나눈다 */
.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);
}

.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;
}

@media (max-width: 480px) {
    .user-menu-name,
    .user-menu-caret {
        display: none;
    }

    .user-menu-btn {
        padding: 0 4px;
    }
}