/* ============================================================
   brimq 공통 인터랙션 레이어 (2026-05-25)
   - 전 화면 버튼/카드/링크에 hover 색변화·떠오름, active 눌림, focus 외곽선
   - 학생 화면 강화는 .bq-* 유틸 + 대시보드 클래스 보강(하단)
   - prefers-reduced-motion 존중
   ============================================================ */
:root {
    --bq-ix: 0.14s;
    --bq-focus: rgba(47, 128, 237, 0.40); /* brimq blue */

    /* === 의미색 토큰 = 브림큐 팔레트 ===
       학습/기본 = 파랑, 완료/통과 = 초록, 주의 = 빨강, 보상 = 노랑 */
    --bq-learn: #2F80ED;        --bq-learn-bg: #EAF3FF;
    --bq-pass: #27AE60;         --bq-pass-bg: #E6F8F1;
    --bq-warn: #FF6B6B;         --bq-warn-bg: #FFECEC;
    --bq-reward: #FFC83D;       --bq-reward-bg: #FFF1E8;
}

/* 의미색 유틸 — 상태/배지/강조에 일관 적용 */
.bq-learn { color: var(--bq-learn) !important; }
.bq-pass { color: var(--bq-pass) !important; }
.bq-warn { color: var(--bq-warn) !important; }
.bq-reward { color: var(--bq-reward) !important; }
.bq-badge-learn { background: var(--bq-learn-bg); color: var(--bq-learn); border: 1px solid var(--bq-learn); }
.bq-badge-pass { background: var(--bq-pass-bg); color: var(--bq-pass); border: 1px solid var(--bq-pass); }
.bq-badge-warn { background: var(--bq-warn-bg); color: var(--bq-warn); border: 1px solid var(--bq-warn); }
.bq-badge-reward { background: var(--bq-reward-bg); color: var(--bq-reward); border: 1px solid var(--bq-reward); }

/* Bootstrap 의미색을 토큰으로 통일 (완료=success / 주의=danger / 보상=warning) */
.text-success { color: var(--bq-pass) !important; }
.text-danger { color: var(--bq-warn) !important; }
.badge.text-bg-success, .bg-success { background-color: var(--bq-pass) !important; }
.badge.text-bg-danger, .bg-danger { background-color: var(--bq-warn) !important; }
.badge.text-bg-warning, .bg-warning { background-color: var(--bq-reward) !important; color: #5c3d00 !important; }

/* ============================================================
   전 화면 색감 (배경 + 카드) — 관리자/운영자/학생/게스트 공통
   순백 단조로움 해소: 옅은 배경 + 카드 둥근모서리·그림자·상단 브랜드 액센트
   ============================================================ */
/* 절제 원칙: 보라 그라데이션 종료 → 조용한 단색 배경(--brimq-bg) */
body { background: var(--brimq-bg) !important; }
.text-primary, .btn-link { color: var(--brimq-blue) !important; }
.bg-primary { background-color: var(--brimq-blue) !important; }
/* 콘텐츠 영역(흰 배경)을 투명화 → body 옅은 배경이 보이도록 (관리자/운영자) */
.op-content, .admin-content { background: transparent !important; }
/* 카드: 깔끔한 흰 카드(색 띠 없음) */
.card {
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

/* ============================================================
   관리자/운영자 대시보드 카드 다채 색감 (.bq-dash 한정)
   - 학생 듀오링고 톤과 통일: 그룹 섹션을 투명 패널로 → 카드가 라벤더 배경 위로 떠 보임
   - 카드 = 풀보더 제거 + 둥근모서리 + 부드러운 그림자 + 상단 컬러 액센트(블루/퍼플/앰버/그린 번갈아)
   - .bq-dash 로 대시보드에만 한정 (다른 운영/관리 페이지에는 영향 없음)
   ============================================================ */
/* 그룹 섹션(학습 및 회원 관리 / Content Library / 고객지원) 투명화 (Bootstrap !important 유틸 덮어쓰기) */
.bq-dash section.border.rounded:not(.dashboard-banner) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* 섹션 제목(학습 및 회원 관리 / Content Library) — 가독성·통일 (2026-06-07) */
.bq-dash section > h3.h5 {
    margin-bottom: 0.85rem !important;
    color: #1f2a44 !important;
    font-weight: 800 !important;
    font-size: 1.22rem !important;
    letter-spacing: -0.01em;
}
.bq-dash section > h3.h5 .bi { color: #6a5cff; }

/* AI Speaking & Writing 버튼 — 반짝이(광택 스윕 + 별 트윙클). 2026-06-08 */
.btn-ai-glow { position: relative; overflow: hidden; }
.btn-ai-glow::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 26%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.26), transparent);
    transform: skewX(-20deg); pointer-events: none;
    animation: bqAiSweep 5s ease-in-out infinite;
}
@keyframes bqAiSweep { 0% { left: -60%; } 30%, 100% { left: 130%; } }
.btn-ai-glow .bi-stars,
.aiw-open-btn .bi-stars,
.aiw-top-btn .bi-stars { display: inline-block; animation: bqAiTwinkle 1.8s ease-in-out infinite; }
@keyframes bqAiTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .85; transform: scale(1.22); } }
/* 어디서나 쓰는 AI 반짝이 유틸 (별 아이콘에 부착) — 진한 보라 + 외곽 그림자로 또렷하게 */
.ai-twinkle { display: inline-block; animation: bqAiTwinkle 1.6s ease-in-out infinite;
    color: #7c3aed !important; filter: drop-shadow(0 1px 1.5px rgba(60, 30, 120, .45)); }
@media (prefers-reduced-motion: reduce) { .ai-twinkle { animation: none; } }
/* AI 배지 — 'AI' 글자 + 별. 일반 사용자도 AI 기능임을 바로 인지 */
.ai-tag { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
    background: linear-gradient(135deg, #7c3aed, #9a6cf2); color: #fff !important;
    font-size: .6rem; font-weight: 800; letter-spacing: .03em; line-height: 1;
    padding: 3px 7px; border-radius: 999px; margin-left: 5px;
    box-shadow: 0 1px 3px rgba(124, 58, 237, .4); }
.ai-tag .bi-stars { color: #fff !important; font-size: .85em; display: inline-block;
    filter: none !important; animation: bqAiTwinkle 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ai-tag .bi-stars { animation: none; } }
@media (prefers-reduced-motion: reduce) {
    .btn-ai-glow::after, .btn-ai-glow .bi-stars,
    .aiw-open-btn .bi-stars, .aiw-top-btn .bi-stars { animation: none; }
}
/* 상단 배너 = 밝은 주황 그라데이션 (왼쪽 글자 진하게, 오른쪽 밝게 — 2026-06-17 한 톤 밝게) */
.bq-dash .dashboard-banner {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(249, 115, 22, 0.30) !important;
    background:
        radial-gradient(120% 160% at 0% 50%, rgba(234, 88, 12, 0.30), transparent 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(255, 255, 255, 0.22), transparent 46%),
        linear-gradient(118deg, #F97316 0%, #FB923C 35%, #FDBA74 70%, #FED7AA 100%) !important;
}
/* 배너 인사말 영역 텍스트 = 흰색 + 그림자(그라데이션 위 가독성 강화 2026-06-17) */
.bq-dash .dashboard-banner .flex-grow-1,
.bq-dash .dashboard-banner .flex-grow-1 h3,
.bq-dash .dashboard-banner .flex-grow-1 .small {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30) !important;
}
.bq-dash .dashboard-banner .flex-grow-1 .text-muted {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}
/* 배너 안 통계 타일(출석률/완독률 등) = 흰 카드(둥근 모서리 + 입체 그림자) — 2026-06-17 컴팩트화 */
.bq-dash .dashboard-banner .border.rounded {
    background: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    box-shadow: 0 4px 10px rgba(43, 30, 110, 0.15);
    transition: transform .12s ease, box-shadow .12s ease;
}
.bq-dash .dashboard-banner .border.rounded .h4,
.bq-dash .dashboard-banner .border.rounded h4 { font-size: 1.15rem !important; }
.bq-dash .dashboard-banner .border.rounded .small,
.bq-dash .dashboard-banner .border.rounded small { font-size: 11px !important; }
.bq-dash .dashboard-banner .border.rounded .progress { height: 5px !important; }
.bq-dash .dashboard-banner a.border.rounded:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(43, 30, 110, 0.22);
}
/* 절제 원칙: 다채 무지개 띠 제거 → 깔끔한 흰 카드(중립 테두리 + 부드러운 그림자). 그룹 구분은 섹션 제목으로. */
.bq-dash .card {
    border: 1px solid var(--brimq-border);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(43, 47, 66, 0.06);
}

/* ---------- 버튼 공통 ---------- */
.btn {
    transition: transform var(--bq-ix) ease, box-shadow var(--bq-ix) ease,
        filter var(--bq-ix) ease, background-color var(--bq-ix) ease, border-color var(--bq-ix) ease, color var(--bq-ix) ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.btn:focus-visible { outline: 3px solid var(--bq-focus); outline-offset: 2px; }

/* ---------- 클릭 가능한 카드 (a.card / button.card) ---------- */
a.card, button.card {
    transition: transform var(--bq-ix) ease, box-shadow var(--bq-ix) ease, border-color var(--bq-ix) ease;
    cursor: pointer;
}
a.card:hover, button.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
    border-color: #c7d2fe;
}
a.card:focus-visible, button.card:focus-visible { outline: 3px solid var(--bq-focus); outline-offset: 2px; }

/* ---------- 대시보드 내부 클릭 타일/링크 (border + rounded, a/button 한정) ---------- */
a.border.rounded, button.border.rounded {
    transition: transform var(--bq-ix) ease, box-shadow var(--bq-ix) ease, border-color var(--bq-ix) ease, background-color var(--bq-ix) ease, color var(--bq-ix) ease;
    cursor: pointer;
}
a.border.rounded:hover, button.border.rounded:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
    border-color: var(--bq-learn) !important;
}
a.border.rounded:active, button.border.rounded:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
a.border.rounded:focus-visible, button.border.rounded:focus-visible { outline: 3px solid var(--bq-focus); outline-offset: 2px; }

/* ---------- 드롭다운/네비 링크 hover ---------- */
.dropdown-item { transition: background-color var(--bq-ix) ease, color var(--bq-ix) ease; }
.nav-link { transition: color var(--bq-ix) ease, background-color var(--bq-ix) ease, box-shadow var(--bq-ix) ease; }

/* ---------- admin/operator 사이드바 메뉴 hover 피드백 강화 ---------- */
.admin-sidebar .nav-section, .admin-sidebar .nav-link {
    transition: background-color var(--bq-ix) ease, color var(--bq-ix) ease, box-shadow var(--bq-ix) ease;
}
.admin-sidebar .nav-section:hover, .admin-sidebar .nav-link:hover {
    background-color: #eef2ff;
    box-shadow: inset 3px 0 0 var(--bq-learn);
}
.operator-sidebar .sidebar-menu-link:hover, .app-sidebar .sidebar-item:hover { box-shadow: inset 3px 0 0 currentColor; }

/* ---------- 사이드바 메뉴 굵게(시원) — admin/operator. 글자 잘림 방지 위해 말줄임 미적용(자연 줄바꿈) ---------- */
.admin-sidebar .nav-section-label, .admin-sidebar .nav-link,
.operator-sidebar .sidebar-label, .operator-sidebar .sidebar-menu-link { font-weight: 700; }

/* ---------- 카드 제목 굵게 (전 화면 — 시원) ---------- */
.card-title { font-weight: 700; }

/* ============================================================
   학생 화면 강화 (sd-* / today-cta 는 학생 전용 클래스 — 관리자/운영자 무영향)
   기존 테두리/배경 hover 위에 "살짝 떠오름 + 누름" 촉각 효과 추가 (듀오링고풍)
   ============================================================ */
.sd-stat-card-link, .sd-attendance-link, .sd-track-link, .sd-tool-link,
.sd-report-item, .sd-support-card, .sd-card-btn, .sd-card-btn-small {
    transition: transform var(--bq-ix) ease, box-shadow var(--bq-ix) ease,
        border-color var(--bq-ix) ease, background-color var(--bq-ix) ease, color var(--bq-ix) ease;
}
.sd-stat-card-link:hover, .sd-attendance-link:hover, .sd-track-link:hover,
.sd-tool-link:hover, .sd-report-item:hover, .sd-support-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.sd-stat-card-link:active, .sd-attendance-link:active, .sd-track-link:active,
.sd-tool-link:active, .sd-report-item:active, .sd-support-card:active { transform: translateY(0); }
.sd-card-btn:hover, .sd-card-btn-small:hover { transform: translateY(-1px); }

/* 1순위 CTA "오늘의 책" — 누르는 맛(press) */
.today-cta { transition: transform var(--bq-ix) ease, box-shadow var(--bq-ix) ease, filter var(--bq-ix) ease; }
.today-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(76, 99, 224, 0.30); }
.today-cta:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(76, 99, 224, 0.25); }

/* ---------- 모션 최소화 선호 ---------- */
@media (prefers-reduced-motion: reduce) {
    .btn, a.card, button.card, a.border.rounded, button.border.rounded,
    .sd-stat-card-link, .sd-attendance-link, .sd-track-link, .sd-tool-link,
    .sd-report-item, .sd-support-card, .sd-card-btn, .sd-card-btn-small, .today-cta { transition: none !important; }
    .btn:hover, a.card:hover, button.card:hover, a.border.rounded:hover, button.border.rounded:hover,
    .sd-stat-card-link:hover, .sd-attendance-link:hover, .sd-track-link:hover,
    .sd-tool-link:hover, .sd-report-item:hover, .sd-support-card:hover, .today-cta:hover { transform: none !important; }
}

/* ---------- 듀오링고풍 학습 버튼 (step/seed 도서 목록 book-card 그리드) 2026-05-27 ---------- */
.learning-buttons-v2 .btn {
    border-radius: 14px; font-weight: 800; border: 0; letter-spacing: .01em;
    transition: transform .07s ease, box-shadow .07s ease, filter .12s ease;
}
.learning-buttons-v2 .btn-primary { box-shadow: 0 2px 0 var(--brimq-blue-dark); }
.learning-buttons-v2 .btn-primary:hover { filter: brightness(1.05); }
.learning-buttons-v2 .btn-primary:active { transform: translateY(2px) !important; box-shadow: 0 0 0 transparent !important; }
/* ── 학습 버튼 색 = 브림큐 표준 팔레트 (리포트 의미색과 일치). 활성 버튼만 ── */
/* 버튼 색 3가지(밝고 가벼운 초록·파랑·보라)로 통일 — 2026-06-10 */
.learning-buttons-v2 > .btn-primary:first-child { background: #5BD18E; box-shadow: 0 2px 0 #3DBA76; }                                  /* Voca Practice — 초록 */
.learning-buttons-v2 > .row:nth-of-type(1) > .col-6:nth-child(1) .btn-primary { background: #67B5F5; box-shadow: 0 2px 0 #4593E0; }   /* e-Library — 파랑 */
.learning-buttons-v2 > .row:nth-of-type(1) > .col-6:nth-child(2) .btn-primary { background: #A78BF0; box-shadow: 0 2px 0 #8A6BE0; }   /* Read Aloud — 보라 */
.learning-buttons-v2 > .row:nth-of-type(2) > .col-6:nth-child(1) .btn-primary { background: #5BD18E; box-shadow: 0 2px 0 #3DBA76; }   /* Voca Quiz — 초록 */
.learning-buttons-v2 > .row:nth-of-type(2) > .col-6:nth-child(2) .btn-primary { background: #67B5F5; box-shadow: 0 2px 0 #4593E0; }   /* Book Quiz — 파랑 */
.learning-buttons-v2 > .row:nth-of-type(3) > .col-6:nth-child(1) .btn-primary { background: #A78BF0; box-shadow: 0 2px 0 #8A6BE0; }   /* AI Speaking & Writing — 보라 */
.learning-buttons-v2 .btn-bq-learn-done { box-shadow: 0 2px 0 #c2c8d0 !important; }
.learning-buttons-v2 .btn-bq-learn-done:active { transform: translateY(2px); box-shadow: 0 0 0 #c2c8d0 !important; }
.learning-buttons-v2 .btn-outline-secondary { border: 2px solid #dfe3ea; box-shadow: 0 2px 0 #eef1f5; }
.learning-buttons-v2 a[style*="5BD18E"] { border-radius: 14px; box-shadow: 0 2px 0 #3DBA76; }
.learning-buttons-v2 a[style*="5BD18E"]:active { transform: translateY(2px); box-shadow: 0 0 0 #3DBA76; }
@media (prefers-reduced-motion: reduce) {
    .learning-buttons-v2 .btn { transition: none !important; }
    .learning-buttons-v2 .btn:active { transform: none !important; }
}


/* ============================================================ */
/* 페이지네이션 — 브랜드 그린 + 간격 보정 (PDF 0701 #4, 2026-07-02) */
/* 기본 Bootstrap 파란 active/촘촘한 간격 → 그린 pill + gap */
/* ============================================================ */
.pagination { gap: 6px; flex-wrap: wrap; }
.pagination .page-item .page-link {
    border-radius: 8px;
    border: 1px solid var(--brimq-border, #dbe3ea);
    color: #2f855a;
    min-width: 38px;
    text-align: center;
    transition: background .12s, color .12s, border-color .12s;
}
.pagination .page-item .page-link:hover {
    background: #E8F8EF;
    border-color: #5BD18E;
    color: #227148;
}
.pagination .page-item.active .page-link {
    background: #5BD18E !important;
    border-color: #5BD18E !important;
    color: #fff !important;
    box-shadow: 0 2px 0 #3DBA76;
}
.pagination .page-item.disabled .page-link {
    color: #b8c2cc;
    background: #fff;
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 209, 142, .35);
    outline: none;
}