/* English Exam - Custom Styles */

/* 기본 스타일은 나중에 디자인 템플릿에서 가져올 예정 */

.semi-small {
    font-size: 0.9rem !important;
}
body {
    font-family: 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}
html[lang="ja"] {
    --bs-root-font-size: 15.2px; /* 16px 기준 5% 축소 */
}

/* 회원관리 테이블 헤더 스타일 */
.table thead th {
    font-size: inherit;
    background-color: #f8f8f8;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid #d9dee3 !important;
}

/* ========================================
   컴팩트 테이블 스타일 (학원 상세 등)
   ======================================== */

/**
 * 컴팩트 테이블 - 간격 축소 및 텍스트 크기 조정
 * - 탭 문자열과 동일한 크기 (0.875rem = 14px)
 * - 패딩 축소로 더 조밀한 레이아웃
 */
.table-compact {
    font-size: 0.875rem;
}

.table-compact th,
.table-compact td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    font-size: 0.875rem;
    line-height: 1.5;
}

.table-compact thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    color: #495057;
}

.table-compact tbody tr {
    transition: background-color 0.15s ease-in-out;
}

.table-compact tbody tr:hover {
    background-color: #f8f9fa;
}

/* No 컬럼 중앙 정렬 */
.table-compact th:first-child,
.table-compact td:first-child {
    text-align: center;
}

/* 빈 데이터 메시지 */
.table-compact .text-center {
    color: #6c757d;
}

/* 뱃지 크기 조정 */
.table-compact .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
.badge-xs {
    font-size: 0.7rem;
}
.text-xs {
    font-size: 0.7rem;
}

/* 날짜 표시 */
.table-compact .text-muted {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* ========================================
   팝업 공통 스타일 (iframe 내부 전체 화면)
   ======================================== */

/**
 * 전체 화면 컨테이너 (flexbox sticky footer 패턴)
 * - 상단: 스크롤 가능한 콘텐츠
 * - 하단: 고정된 버튼 영역
 */
.popup-view-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
}

/**
 * 스크롤 가능한 콘텐츠 영역
 * - flex: 1로 남은 공간 전체 차지
 * - overflow-y: auto로 세로 스크롤 허용
 */
.popup-view-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px !important;
}

/**
 * 하단 고정 버튼 영역 (sticky footer)
 * - flex-shrink: 0으로 크기 고정
 * - 항상 화면 하단에 고정
 */
.popup-view-footer {
    flex-shrink: 0;
    padding: 12px 26px !important;
    background: white;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========================================
   SweetAlert2 커스텀 스타일
   ======================================== */

/**
 * 작은 아이콘 스타일
 * - 기본 80px → 60px로 축소
 * - 여백도 축소 (2.5em → 1.5em)
 */
.swal2-icon-sm {
    width: 60px !important;
    height: 60px !important;
    margin: 1.5em auto 0.5em !important;
}

.swal2-icon-sm.swal2-warning {
    border-color: #facea8 !important;
    font-size: 50px !important;
}

/**
 * SweetAlert2 전역 스타일 오버라이딩
 * - 팝업 전체 가운데 정렬
 * - 타이틀 기본 크기 축소 (1.875em → 1.25em)
 */
.swal2-popup {
    text-align: center !important;
}
.swal2-popup .swal2-title {
    font-size: 1.25em !important;
    text-align: center !important;
}
.swal2-popup .swal2-html-container {
    text-align: center !important;
    font-size: 1rem !important;
}

/**
 * 작은 타이틀 스타일 (레거시 클래스 유지)
 */
.swal2-title-sm {
    font-size: 1.25em !important;
    margin-top: 0.5em !important;
}

/**
 * 상단 위치 모달 여백
 * - position: 'top'인 모달에 상단 여백 추가
 * - toast 알림과 동일한 위치 정렬
 */
.swal2-popup.swal-top-spacing {
    margin-top: 80px !important;
}

/* ========================================
   사이드바 접힘 시 크레딧 박스 및 사용자 유형 버튼
   ======================================== */

/**
 * 크레딧 박스: 절대 위치로 애니메이션 중 메뉴 떨림 방지
 * - credit-full의 공간을 항상 유지하고, credit-collapsed를 그 위에 겹쳐서 표시
 * - 텍스트는 말줄임(...) 처리로 박스 폭 변화 방지
 * - 애니메이션 중 높이 변화 없음
 */
.credit-box {
    position: relative;
    overflow: hidden;
}

.credit-box .credit-full {
    /* 일반 흐름으로 높이 확보 */
    transition: opacity 0.2s, visibility 0.2s;
    overflow: hidden;
}

/* credit-full 내부의 모든 텍스트 요소에 말줄임 처리 */
.credit-box .credit-full > small,
.credit-box .credit-full > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.credit-box .credit-collapsed {
    /* 절대 위치로 credit-full 위에 겹쳐서 표시 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * 사용자 유형 버튼: 기본 상태에서 아이콘 + 텍스트 함께 표시
 */
.menu-mode-selector .mode-icon {
    display: inline-block;
    margin-right: 0.25rem;
    font-size: 1rem;
    vertical-align: middle;
}

/**
 * 사이드바 접힘 시: 크레딧 박스 축약
 * - credit-full을 숨기되 공간은 유지 (visibility: hidden)
 * - credit-collapsed를 절대 위치로 그 위에 표시
 * - hover 상태에서는 원래대로 복원
 */
.layout-menu-collapsed:not(.layout-menu-hover) .credit-box .credit-full {
    visibility: hidden;
    opacity: 0;
}

.layout-menu-collapsed:not(.layout-menu-hover) .credit-box .credit-collapsed {
    visibility: visible;
    opacity: 1;
    font-weight: bold;
    font-size: 0.875rem;
}

/**
 * 사이드바 접힘 시: 사용자 유형 버튼
 * - 비활성 버튼은 완전히 숨김
 * - 활성 버튼만 아이콘으로 표시
 * - hover 상태에서는 모든 버튼 원래대로 복원
 */
.layout-menu-collapsed:not(.layout-menu-hover) .menu-mode-selector .nav-item:not(.mode-active) {
    display: none;
}

.layout-menu-collapsed:not(.layout-menu-hover) .menu-mode-selector .mode-active {
    flex: 0 0 auto !important;
    width: auto;
}

.layout-menu-collapsed:not(.layout-menu-hover) .menu-mode-selector .mode-active .nav-link {
    padding: 0.375rem 0.75rem !important;
    min-height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-menu-collapsed:not(.layout-menu-hover) .menu-mode-selector .mode-icon {
    display: inline-block;
    font-size: 1rem;
}

.layout-menu-collapsed:not(.layout-menu-hover) .menu-mode-selector .mode-text {
    display: none;
}

/**
 * 사이드바 접힘 시: 메뉴 모드 선택 Pills 중앙 정렬
 * - hover 상태에서는 원래 정렬로 복원
 */
.layout-menu-collapsed:not(.layout-menu-hover) .menu-mode-selector {
    text-align: center;
}

.layout-menu-collapsed:not(.layout-menu-hover) .menu-mode-selector .nav-pills {
    justify-content: center;
}

/* ========================================
   btn-xs 오버라이드 (뱃지 크기와 동일하게)
   ======================================== */

.btn-xs, .btn-group-xs > .btn {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.45rem;
    --bs-btn-font-size: 0.8rem;
    --bs-btn-border-radius: 0.375rem;
    line-height: 1.2;
    padding-top: calc(var(--bs-btn-padding-y) + 1px);
}

/* ========================================
   아이콘 유틸리티
   ======================================== */

/**
 * 고정 너비 아이콘 (Font Awesome의 fa-fw와 유사)
 * - 아이콘을 고정 너비로 만들어 수평 정렬
 * - 텍스트와 수직 정렬
 */
.icon-fw {
    width: 1.25rem;
    display: inline-block;
    text-align: center;
    vertical-align: -0.125em;
}

/**
 * bx 아이콘 인라인 정렬 전역 정규화
 * - FA(Font Awesome)는 기본이 font-size:inherit이라 텍스트와 자동 일치하지만
 *   Boxicons는 그렇지 않아 아래 규칙으로 동일하게 동작하도록 맞춤
 * - font-size: 1em → 부모 텍스트 크기를 그대로 따라감 (어디서든 자동 일치)
 * - vertical-align: middle → 텍스트 위쪽 붙음 현상 해결
 * - 의도적으로 크게 쓸 때는 fs-* 클래스나 인라인 style로 override
 */
i[class*="bx"] {
    font-size: 1.2em;
    vertical-align: -0.2em;
}

/* ========================================
   개인 모드 사이드바 - primary 계열 진한 배경 + 흰 텍스트
   ======================================== */

.menu-personal-mode {
    background-color: #4553B8 !important;
    /* 테마 CSS 변수 오버라이드 — 이 방식이 아이콘·텍스트 모두 일괄 적용됨 */
    --bs-menu-color:             rgba(255, 255, 255, 0.82);
    --bs-menu-hover-color:       #fff;
    --bs-menu-active-color:      #fff;
    --bs-menu-hover-bg:          rgba(255, 255, 255, 0.08);
    --bs-menu-active-bg:         rgba(255, 255, 255, 0.15);
    --bs-menu-sub-active-color:  #fff;
    --bs-menu-sub-active-bg:     rgba(255, 255, 255, 0.15);
}

/* 로고 이미지 반전 (랜딩 푸터와 동일: brightness(0) invert(1)) */
.menu-personal-mode .app-brand-logo img,
.menu-personal-mode .app-brand-text img {
    filter: brightness(0) invert(1);
}

/* 활성 메뉴 오른쪽 세로 바 인디케이터 — (0,7,1)로 원본 (0,6,1) 초과 */
.layout-wrapper:not(.layout-horizontal) .menu-personal-mode.menu-vertical .menu-inner > .menu-item.active::before {
    background-color: rgba(255, 255, 255, 0.6);
}

/* 구분선 */
.menu-personal-mode hr {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 크레딧 박스 */
.menu-personal-mode .credit-box {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* 모드 선택 pills */
.menu-personal-mode .menu-mode-selector .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    background-color: transparent !important;
}
.menu-personal-mode .menu-mode-selector .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}
.menu-personal-mode .menu-mode-selector .nav-link.active,
.menu-personal-mode .menu-mode-selector .mode-active .nav-link {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* 메뉴 접힘 shadow */
.menu-personal-mode .menu-inner-shadow {
    background: linear-gradient(#4553B8 41%, rgba(69, 83, 184, 0.11) 95%, transparent) !important;
}

/* 다크 슬레이트 variant */
.menu-personal-mode.menu-personal-slate {
    background-color: #2e3d5c !important;
}
.menu-personal-mode.menu-personal-slate .menu-inner-shadow {
    background: linear-gradient(#2e3d5c 41%, rgba(46, 61, 92, 0.11) 95%, transparent) !important;
}

/* 딥 퍼플 variant */
.menu-personal-mode.menu-personal-purple {
    background-color: #454989 !important;
}
.menu-personal-mode.menu-personal-purple .menu-inner-shadow {
    background: linear-gradient(#454989 41%, rgba(69, 73, 137, 0.11) 95%, transparent) !important;
}

/* ========================================
   알림 드롭다운 반응형
   ======================================== */

.notify-dropdown-menu {
    width: 500px;
}

@media (max-width: 575px) {
    .notify-dropdown-menu {
        width: calc(100vw - 24px);
        /* Popper.js의 right 포지셔닝 대신 left 기준으로 강제 */
        right: 12px !important;
        left: auto !important;
        transform: none !important;
    }
}

/* bx-spin: BoxIcons CSS mask 방식에서 회전 애니메이션 */
.bx-spin {
    animation: bx-spin 1s linear infinite;
}

@keyframes bx-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}