/* ==========================================================================
   KNOU-CBT 디자인 시스템 — 모던 SaaS 스타일
   Bootstrap 5.3.3 위에 얹는 커스터마이징 레이어. 포인트 컬러 하나(인디고),
   나머지는 중성 회색 톤 + 카드/그림자 위주.
   ========================================================================== */

:root {
    --kcbt-accent: #4f46e5;       /* 포인트 컬러 (인디고) */
    --kcbt-accent-dark: #4338ca;
    --kcbt-accent-soft: #eef2ff;  /* 포인트 컬러의 아주 옅은 배경톤 */

    --kcbt-accent2: #312e81;      /* 보조 포인트 컬러 (인디고 계열의 짙은 남색) — 부차적 CTA 구분용 */
    --kcbt-accent2-dark: #232066;

    --kcbt-ink: #1e2230;
    --kcbt-muted: #6b7280;
    --kcbt-bg: #f7f7fb;           /* 페이지 배경 (중성 회색, 파란기 없음) */
    --kcbt-surface: #ffffff;
    --kcbt-border: #e5e7eb;

    --kcbt-radius: 0.875rem;
    --kcbt-radius-sm: 0.5rem;
    --kcbt-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06);
    --kcbt-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 24px rgba(16, 24, 40, 0.10);

    --bs-font-sans-serif: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
        'Malgun Gothic', Roboto, Helvetica, Arial, sans-serif;
}

body {
    font-family: var(--bs-font-sans-serif);
    color: var(--kcbt-ink);
    background-color: var(--kcbt-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bs-font-sans-serif);
    letter-spacing: -0.01em;
}

/* ==========================================================================
   네비게이션 — 어두운 남색 대신 잉크 톤 하나로 통일
   ========================================================================== */
.navbar.bg-dark {
    background-color: var(--kcbt-ink) !important;
}
.navbar-brand {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}
.navbar {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.navbar .text-info {
    color: #a5b4fc !important; /* 포인트 컬러의 밝은 변형 (다크 네비 위에서 보이도록) */
}
.navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #c7c9de;
    font-weight: 500;
    transition: color 0.15s ease;
}
.navbar-nav .nav-link:hover {
    color: #a5b4fc;
}
.navbar-nav .nav-link.nav-link-admin {
    color: #a5b4fc;
    font-weight: 700;
}
.navbar-nav .nav-link.nav-link-admin:hover {
    color: #ffffff;
}
.nav-logout-btn {
    background-color: rgba(255, 255, 255, 0.08);
    border: none;
    color: #dfe0ee;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-logout-btn:hover {
    background-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}
.admin-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: rgba(165, 180, 252, 0.14);
    color: #a5b4fc;
    border: 1px solid rgba(165, 180, 252, 0.3);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
}

/* ==========================================================================
   푸터 — 네비와 같은 잉크 톤으로 통일
   ========================================================================== */
.site-footer {
    background-color: var(--kcbt-ink);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-brand {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    color: #fff;
}
.footer-brand .footer-dot {
    color: #a5b4fc;
}
.footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-links a {
    color: #a8abc0;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s ease;
}
.footer-links a:hover {
    color: #a5b4fc;
}
.footer-note {
    font-size: 0.8rem;
    color: #6b6f8a;
}

/* ==========================================================================
   버튼 — 포인트 컬러 하나로 통일
   ========================================================================== */
.btn-primary {
    background-color: var(--kcbt-accent);
    border-color: var(--kcbt-accent);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--kcbt-accent-dark);
    border-color: var(--kcbt-accent-dark);
}
.btn-outline-primary {
    color: var(--kcbt-accent);
    border-color: var(--kcbt-accent);
}
.btn-outline-primary:hover {
    background-color: var(--kcbt-accent);
    border-color: var(--kcbt-accent);
}
.btn {
    border-radius: var(--kcbt-radius-sm);
    font-weight: 500;
}

/* ==========================================================================
   카드 — 은은한 그림자, 호버 시 살짝 떠오름
   ========================================================================== */
.card {
    border: 1px solid var(--kcbt-border);
    border-radius: var(--kcbt-radius);
    box-shadow: var(--kcbt-shadow);
    background-color: var(--kcbt-surface);
}

/* ==========================================================================
   테이블
   ========================================================================== */
.table {
    background-color: var(--kcbt-surface);
}
.table thead.table-light th {
    background-color: var(--kcbt-bg);
    color: var(--kcbt-muted);
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom-width: 1px;
}
/* 문제 등록 화면은 상단/하단 헤더 디자인을 통일 (하단 헤더 = 기본 table-light 스타일 기준) */
.question-table thead.table-light th {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    font-weight: bold;
    font-size: 1rem;
    border-bottom-width: var(--bs-border-width);
}

/* ==========================================================================
   폼 컨트롤
   ========================================================================== */
.form-control, .form-select {
    border-radius: var(--kcbt-radius-sm);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--kcbt-accent);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

/* 페이지네이션도 포인트 컬러로 */
.page-item.active .page-link {
    background-color: var(--kcbt-accent);
    border-color: var(--kcbt-accent);
}
.page-link {
    color: var(--kcbt-accent);
}

/* badge (공지 등) */
.badge.bg-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}
.notice-pin-badge {
    background-color: var(--kcbt-accent-soft) !important;
    color: var(--kcbt-accent-dark) !important;
    border: 1px solid #e0e7ff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.notice-row-pinned {
    background-color: var(--kcbt-accent-soft);
}

/* ==========================================================================
   홈 화면 (index.html) — 그라데이션 대신 옅은 포인트컬러 배경의 플랫한 카드
   ========================================================================== */

.hero {
    background-color: var(--kcbt-accent-soft);
    color: var(--kcbt-ink);
    padding: 2.25rem 2rem;
    border-radius: var(--kcbt-radius);
    margin-bottom: 1.5rem;
    border: 1px solid #e0e7ff;
}
.hero-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--kcbt-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin: 0 auto 0.75rem;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28);
}
.hero h1 {
    font-weight: 800;
    font-size: 2.4rem;
    letter-spacing: -0.02em;
    color: var(--kcbt-accent-dark);
}
.hero h1 .hero-dot {
    color: var(--kcbt-accent);
}
.hero p {
    color: var(--kcbt-muted);
}
.hero .text-light {
    color: var(--kcbt-muted) !important;
}

.shortcut-btn {
    padding: 1rem;
    font-weight: 600;
    border-radius: var(--kcbt-radius);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.shortcut-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--kcbt-shadow-hover);
}
.shortcut-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 88px;
}
.shortcut-cta-title {
    font-size: 1.15rem;
    font-weight: 700;
}
.shortcut-cta-sub {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.85;
}
.shortcut-cta-notice {
    background-color: var(--kcbt-accent2);
    border-color: var(--kcbt-accent2);
    color: #fff;
}
.shortcut-cta-notice:hover {
    background-color: var(--kcbt-accent2-dark);
    border-color: var(--kcbt-accent2-dark);
    color: #fff;
}

.dept-quicklist {
    background-color: var(--kcbt-surface);
    border: 1px solid var(--kcbt-border);
    border-radius: var(--kcbt-radius);
    box-shadow: var(--kcbt-shadow);
    padding: 1.5rem;
    min-height: 96px;
    display: flex;
    flex-direction: column;
}
.dept-quicklist-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--kcbt-ink);
    margin-bottom: 0.5rem;
}
.dept-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.5rem;
    flex: 1 1 auto;
    overflow-y: auto;
}
.dept-chip {
    background-color: var(--kcbt-accent-soft);
    color: var(--kcbt-accent-dark);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.dept-chip:hover {
    background-color: var(--kcbt-accent);
    color: #fff;
}

.stat-badge {
    background-color: var(--kcbt-surface);
    border: 1px solid #e0e7ff;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    color: var(--kcbt-muted);
}
.stat-badge i {
    color: var(--kcbt-accent);
    margin-right: 0.3rem;
}
.stat-badge strong {
    color: var(--kcbt-ink);
    font-weight: 700;
}

.popular-subject-card {
    background-color: var(--kcbt-surface);
    border: 1px solid var(--kcbt-border);
    border-radius: var(--kcbt-radius);
    box-shadow: var(--kcbt-shadow);
    padding: 1rem;
    color: var(--kcbt-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.popular-subject-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--kcbt-shadow-hover);
}
.popular-subject-count {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--kcbt-accent);
}

.notice-card {
    background-color: var(--kcbt-surface);
    border: 1px solid var(--kcbt-border);
    border-radius: var(--kcbt-radius);
    box-shadow: var(--kcbt-shadow);
}
.notice-card h4 {
    font-weight: 700;
}

/* ==========================================================================
   시험 결과 (result.html) — 점수 원형 링
   ========================================================================== */
.score-ring {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.score-ring-inner {
    width: 138px;
    height: 138px;
    border-radius: 50%;
    background: var(--kcbt-surface);
    box-shadow: inset 0 0 0 1px var(--kcbt-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.score-ring-value {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--kcbt-ink);
    line-height: 1;
}
.score-ring-total {
    font-size: 1rem;
    font-weight: 500;
    color: var(--kcbt-muted);
}
.score-ring-label {
    font-size: 0.8rem;
    color: var(--kcbt-muted);
    margin-top: 0.3rem;
}

/* ==========================================================================
   공지 상세 (noticeDetail.html)
   ========================================================================== */

.notice-content {
    background-color: var(--kcbt-surface);
    border-color: var(--kcbt-border) !important;
    border-radius: var(--kcbt-radius-sm);
}
.notice-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   문제 관리 (questionManage.html)
   ========================================================================== */

/* 컬럼이 많아 공간이 부족해서 이 화면만 좌우 여백을 줄임 (네비/푸터 컨테이너는 그대로) */
body:has(#questionForm) > .container {
    max-width: 100%;
}

.question-table td input {
    width: 100%;
    border: none;
    background: transparent;
}
.question-table td input:focus {
    outline: 1px solid var(--kcbt-accent);
    background: var(--kcbt-bg);
}
.question-table .option-file-input {
    display: none;
}
.question-table tr.row-option-image .option-text-input {
    display: none;
}
.question-table tr.row-option-image .option-file-input {
    display: block;
}
/* 5행마다 굵은 구분선을 넣어 문제를 그룹 단위로 훑어보기 쉽게 함 */
.question-table tbody tr:nth-child(5n) td {
    border-bottom: 2px solid var(--kcbt-muted);
}

/* ==========================================================================
   문제 등록 화면 (questionManage.html) — 이미지 미리보기 툴팁 크기
   Bootstrap 툴팁 말풍선(.tooltip-inner) 기본 max-width가 200px이라
   이미지가 그보다 크면 말풍선 밖으로 삐져나가 보임. 세로로 긴 사진도
   과하게 커지지 않도록 max-height도 함께 제한.
   ========================================================================== */
.tooltip-img-preview {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
    border-radius: 4px;
}

/* ==========================================================================
   시험 보기 (examList.html) — 상단 필터 드롭박스/초기화 버튼 반응형
   평소엔 드롭박스 4개가 비율대로 같이 줄어들며 한 줄(초기화 버튼과 붙은 채)을
   유지한다. 그래도 감당 안 되는 폭(480px 이하, 대략 모바일)에서는 우연히
   flex-wrap이 끊는 게 아니라 아래 미디어쿼리로 의도적으로 재배치한다:
   필터 2x2 그리드 + 초기화/등록 버튼을 각각 전체폭 한 줄로.
   ========================================================================== */
.exam-filter-scroll {
    min-width: 0;
}
.exam-filter-select {
    flex: 1 1 130px;
    min-width: 84px;
    max-width: 190px;
}

@media (max-width: 480px) {
    .exam-toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }
    .exam-filter-scroll {
        flex-direction: column;
        align-items: stretch;
    }
    .exam-filter-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .exam-filter-select {
        max-width: none;
        min-width: 0;
        width: 100%;
    }
    .exam-filter-scroll #resetBtn {
        width: 100%;
        margin-top: 0.4rem;
    }
    .exam-register-btn {
        width: 100%;
        margin-top: 0.4rem;
    }
}

/* ==========================================================================
   시험 풀기 (solve.html) — 남은시간 1분 이하 경고 깜빡임
   ========================================================================== */
@keyframes kcbt-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.blink {
    animation: kcbt-blink 1s step-start infinite;
}

/* ==========================================================================
   전역 로딩 오버레이 (fragments/dialogs.html) — 저장/업로드 등 페이지 이동을
   동반하는 폼 제출 중에 잠깐 떠 있다가 다음 페이지 렌더링과 함께 사라짐.
   ========================================================================== */
.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 34, 48, 0.28);
    backdrop-filter: blur(1px);
    opacity: 0;
    animation: kcbt-loading-fade-in 0.15s ease forwards;
}
.app-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.25rem 2.75rem;
    background: var(--kcbt-surface);
    border-radius: var(--kcbt-radius);
    box-shadow: var(--kcbt-shadow-hover);
}
.app-loading-box .spinner-border {
    width: 2.75rem;
    height: 2.75rem;
    border-width: 0.3rem;
    color: var(--kcbt-accent);
}
.app-loading-message {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--kcbt-ink);
}
@keyframes kcbt-loading-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   전역 토스트 알림 (fragments/dialogs.html) — 확인이 필요 없는 짧은 안내용.
   ========================================================================== */
.app-toast-container {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2100;
    pointer-events: none;
}
.app-toast {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 260px;
    max-width: min(90vw, 420px);
    padding: 0.85rem 1rem;
    background: var(--kcbt-surface);
    border: 1px solid var(--kcbt-border);
    border-left: 4px solid var(--kcbt-accent);
    border-radius: var(--kcbt-radius-sm);
    box-shadow: var(--kcbt-shadow-hover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: auto;
}
.app-toast.app-toast-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.app-toast-icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    color: var(--kcbt-accent);
}
.app-toast-warning { border-left-color: #f59e0b; }
.app-toast-warning .app-toast-icon { color: #f59e0b; }
.app-toast-danger { border-left-color: #dc3545; }
.app-toast-danger .app-toast-icon { color: #dc3545; }
.app-toast-success { border-left-color: #198754; }
.app-toast-success .app-toast-icon { color: #198754; }
.app-toast-message {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kcbt-ink);
}
.app-toast-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--kcbt-muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 0.15rem;
}
.app-toast-close:hover {
    color: var(--kcbt-ink);
}