/**
* bizcode.css — BizCode 커스텀 디자인 시스템
* Bootstrap 5.3.3 확장 / 5가지 테마 (bright · dark · brown · pink · lime)
* utf8mb4 이모지 지원 / PHP 5.6 & PHP 8.x 호환
*
* 사용법:
* 테마:
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* ================================================================
1. CSS 변수 — 기본값 (bright 테마)
================================================================ */
:root {
/* ════════════════════════════════════════════════════════════
Coastal Sage — 단일 팔레트 (Primitive → Semantic)
Ocean Deep #4E635E · Villa Nova #E2E0C8 · Siren Song #A6B49E · Big River #818C78
════════════════════════════════════════════════════════════ */
/* ── Primitive 램프 ── */
--bz-sand-50: #FAF9F1;
--bz-sand-100: #F4F2E8;
--bz-sand-200: #E2E0C8; /* Villa Nova */
--bz-sand-300: #D2D0B4;
--bz-sage-200: #C3CBBA;
--bz-sage-300: #A6B49E; /* Siren Song */
--bz-sage-400: #8E9C84;
--bz-sage-500: #818C78; /* Big River */
--bz-deep-600: #5E7269;
--bz-deep-700: #4E635E; /* Ocean Deep */
--bz-deep-800: #3E5049;
--bz-deep-900: #2B3A35;
--bz-ink: #232E2A;
/* ── 배경 ── */
--bz-bg: #F4F2E8;
--bz-card-bg: #FCFBF5;
--bz-input-bg: #FFFFFF;
/* ── 텍스트 ── */
--bz-text: #232E2A;
--bz-text-muted: #5A6A60;
--bz-text-light: #8A968B;
/* ── 포인트 컬러 (accent = Ocean Deep) ── */
--bz-accent: #4E635E;
--bz-accent-rgb: 78, 99, 94;
--bz-accent-hover:#3E5049;
/* ── 네비게이션 (글라스) ── */
--bz-nav-bg: rgba(252, 251, 245, 0.72);
--bz-nav-text: #2B3A35;
--bz-nav-hover: #4E635E;
/* ── 푸터 (딥) ── */
--bz-footer-bg: #2B3A35;
--bz-footer-text: #D7DBC9;
/* ── 테두리 / 그림자 ── */
--bz-border: #D8DAC6;
--bz-border-rgb: 216, 218, 198;
--bz-shadow: rgba(43, 58, 53, 0.08);
--bz-shadow-lg: rgba(43, 58, 53, 0.14);
/* ── 구분선 ── */
--bz-divider: #E6E4D3;
/* ── 모듈별 포인트 컬러 (코스탈 조화·길찾기 유지) ── */
--bz-exam: #B5604A; /* 온라인 시험 — 테라코타 */
--bz-exam-rgb: 181, 96, 74;
--bz-exam-hover: #9C4E3B;
--bz-quiz-sb: #C99A3F; /* Spelling Bee — 머스타드 골드 */
--bz-quiz-sb-rgb: 201, 154, 63;
--bz-quiz-sb-hover:#B0852F;
--bz-quiz-vq: #5E8499; /* Vocabulary — 오션 블루 */
--bz-quiz-vq-rgb: 94, 132, 153;
--bz-quiz-vq-hover:#4E7185;
--bz-material: #5E8C6A; /* Materials — 세이지 그린 */
--bz-material-rgb:94, 140, 106;
--bz-material-hover:#4E7659;
--bz-myclass: #6E7A9B; /* My Class — 슬레이트 블루 */
--bz-myclass-rgb: 110, 122, 155;
--bz-school: #4E635E; /* School — Ocean Deep */
--bz-deped: #5E7269; /* DepEd — 딥 세이지 */
--bz-slate: #818C78; /* Staff/기타 — Big River */
/* ── 기능색 (팔레트 조화·muted) ── */
--bz-success: #5E8C6A; --bz-success-rgb: 94, 140, 106;
--bz-warning: #C99A3F; --bz-warning-rgb: 201, 154, 63;
--bz-danger: #B5604A; --bz-danger-rgb: 181, 96, 74;
--bz-info: #5E8499; --bz-info-rgb: 94, 132, 153;
/* ── 상태 / 액션 ── */
--bz-status-active: #5E8C6A;
--bz-status-waiting: #5E8499;
--bz-status-ended: #5A6A60;
--bz-action-approve: #5E8C6A;
--bz-action-revoke: #B5604A;
--bz-action-pending: #C99A3F;
/* ── 성별 ── */
--bz-gender-m: #5E8499;
--bz-gender-f: #B5808F;
/* ── chip (5색 → 코스탈) ── */
--bz-chip-blue: #5E8499;
--bz-chip-amber: #C99A3F;
--bz-chip-gray: #818C78;
--bz-chip-green: #5E8C6A;
--bz-chip-purple: #6E7A9B;
/* ── 그룹 8색 (myclass 필터) ── */
--bz-group-1: #4E635E; --bz-group-1-rgb: 78, 99, 94;
--bz-group-2: #5E8499; --bz-group-2-rgb: 94, 132, 153;
--bz-group-3: #5E8C6A; --bz-group-3-rgb: 94, 140, 106;
--bz-group-4: #C99A3F; --bz-group-4-rgb: 201, 154, 63;
--bz-group-5: #B5604A; --bz-group-5-rgb: 181, 96, 74;
--bz-group-6: #6E7A9B; --bz-group-6-rgb: 110, 122, 155;
--bz-group-7: #8E9C84; --bz-group-7-rgb: 142, 156, 132;
--bz-group-8: #818C78; --bz-group-8-rgb: 129, 140, 120;
/* ── 역할 배지 (navbar) ── */
--bz-role-h: #B5604A; --bz-role-g: #6E7A9B; --bz-role-f: #5E7269; --bz-role-e: #4E635E;
--bz-role-d: #5E8499; --bz-role-c: #5E8C6A; --bz-role-b: #C99A3F; --bz-role-a: #818C78;
/* ── 추가 팔레트 (레거시 호환 — 코스탈로 재매핑) ── */
--bz-bluesky: #4E635E; --bz-bluesky-rgb: 78, 99, 94;
--bz-sky: #5E8499;
--bz-lime: #5E8C6A;
--bz-amber: #C99A3F;
--bz-rose: #B5808F;
--bz-teal: #5E8C6A;
--bz-violet: #6E7A9B;
--bz-indigo: #6E7A9B;
/* ── 진행 바 / 레벨 (세이지→오션 깊이 램프) ── */
--bz-level-1: #A6B49E;
--bz-level-2: #8E9C84;
--bz-level-3: #6E8470;
--bz-level-4: #5E7269;
--bz-level-5: #4E635E;
/* ── 배너 그라데이션 ── */
--bz-banner: linear-gradient(105deg, #2B3A35 0%, #3E5049 35%, #4E635E 70%, #6E8479 100%);
/* ── 폰트 ── */
--bz-font-display:'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--bz-font: 'Inter', 'Pretendard',
-apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, sans-serif;
--bz-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
/* ================================================================
2. 테마 — 단일 Coastal Sage 팔레트
기존 dark/brown/pink/lime 멀티테마는 단일 팔레트 정책으로 제거됨.
모든 색은 위 :root 하나로 통일되며 테마 스위처도 비활성화됨.
(data-bz-theme 속성은 항상 "bright" 로 고정 출력)
================================================================ */
/* ================================================================
5. 전역 기본 스타일
================================================================ */
html {
scroll-behavior: smooth;
overflow-x: hidden; /* 모바일 가로 스크롤 방지 */
}
body {
background-color: var(--bz-bg);
color: var(--bz-text);
font-family: var(--bz-font);
transition: background-color 0.25s ease, color 0.25s ease;
}
/* 카드 */
.card {
background-color: var(--bz-card-bg);
border-color: var(--bz-border);
overflow: hidden; /* 내부 테이블·이미지가 rounded corner를 벗어나지 않도록 */
transition: background-color 0.25s ease;
}
/* 입력 폼 */
.form-control,
.form-select {
background-color: var(--bz-input-bg);
border-color: var(--bz-border);
color: var(--bz-text);
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.form-control:focus,
.form-select:focus {
background-color: var(--bz-input-bg);
color: var(--bz-text);
border-color: var(--bz-accent);
box-shadow: 0 0 0 0.2rem rgba(var(--bz-accent-rgb), 0.25);
}
/* Brown · Pink · Lime 포커스 링 소프트닝 (채도 높은 accent 색상 완화) */
[data-bz-theme="brown"] .form-control:focus,
[data-bz-theme="brown"] .form-select:focus {
border-color: #9a7055;
box-shadow: 0 0 0 0.15rem rgba(154,112,85,.15);
}
[data-bz-theme="pink"] .form-control:focus,
[data-bz-theme="pink"] .form-select:focus {
border-color: #c26b8a;
box-shadow: 0 0 0 0.15rem rgba(194,107,138,.15);
}
[data-bz-theme="lime"] .form-control:focus,
[data-bz-theme="lime"] .form-select:focus {
border-color: #7a9e6a;
box-shadow: 0 0 0 0.15rem rgba(122,158,106,.15);
}
.form-control::placeholder {
color: var(--bz-text-light);
}
/* HR */
hr {
border-color: var(--bz-divider);
opacity: 1;
}
/* 링크 */
a {
color: var(--bz-accent);
text-decoration: none;
}
a:hover {
color: var(--bz-accent-hover);
}
/* ================================================================
6. 유틸리티 클래스
================================================================ */
/* 테마 색상 텍스트 */
.text-theme-muted { color: var(--bz-text-muted) !important; }
.text-theme-light { color: var(--bz-text-light) !important; }
.text-accent { color: var(--bz-accent) !important; }
/* 모듈 컬러 텍스트 */
.text-exam { color: var(--bz-exam) !important; }
.text-quiz-sb { color: var(--bz-quiz-sb) !important; }
.text-quiz-vq { color: var(--bz-quiz-vq) !important; }
.text-material { color: var(--bz-material) !important; }
.text-myclass { color: var(--bz-myclass) !important; }
.text-sky { color: var(--bz-sky) !important; }
.text-lime { color: var(--bz-lime) !important; }
.text-amber { color: var(--bz-amber) !important; }
.text-rose { color: var(--bz-rose) !important; }
.text-teal { color: var(--bz-teal) !important; }
.text-violet { color: var(--bz-violet) !important; }
/* 배경 */
.bg-theme { background-color: var(--bz-bg) !important; }
.bg-card { background-color: var(--bz-card-bg) !important; }
.bg-pink { background-color: #f72585 !important; }
.bg-lime { background-color: #84cc16 !important; }
/* 테두리 */
.border-theme { border-color: var(--bz-border) !important; }
.border-accent { border-color: var(--bz-accent) !important; }
.border-pink { border-color: #f72585 !important; }
.border-lime { border-color: #84cc16 !important; }
/* 픽스드 컬러 텍스트 */
.text-pink { color: #f72585 !important; }
.text-lime-green { color: #84cc16 !important; }
/* 커서 — 클릭 가능 요소 전역 pointer */
a,
a:hover,
button,
button:hover,
[type="button"],
[type="submit"],
[type="reset"],
label[for],
select,
.btn,
.nav-link,
.dropdown-item,
.form-check-input,
.form-check-label,
.badge[data-bs-toggle],
[data-bs-toggle="modal"],
[data-bs-toggle="tab"],
[data-bs-toggle="collapse"],
[data-bs-toggle="dropdown"],
[data-bs-toggle="tooltip"],
[onclick],
.cs_pointer { cursor: pointer !important; }
/* 원형 배지 — SB / VQ 등 */
.circle_w30_w30 {
width: 1.875rem !important; /* 30px */
height: 1.875rem !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: .65rem !important;
line-height: 1 !important;
padding: 0 !important;
}
/* ================================================================
7. 배지 (Badge) — 모듈별
================================================================ */
.badge-exam {
background-color: rgba(var(--bz-exam-rgb), 0.15);
color: var(--bz-exam);
border: 1px solid rgba(var(--bz-exam-rgb), 0.3);
}
.badge-quiz-sb {
background-color: rgba(var(--bz-quiz-sb-rgb), 0.15);
color: var(--bz-quiz-sb);
border: 1px solid rgba(var(--bz-quiz-sb-rgb), 0.3);
}
.badge-quiz-vq {
background-color: rgba(var(--bz-quiz-vq-rgb), 0.15);
color: var(--bz-quiz-vq);
border: 1px solid rgba(var(--bz-quiz-vq-rgb), 0.3);
}
.badge-material {
background-color: rgba(var(--bz-material-rgb), 0.15);
color: var(--bz-material);
border: 1px solid rgba(var(--bz-material-rgb), 0.3);
}
.badge-myclass {
background-color: rgba(var(--bz-myclass-rgb), 0.15);
color: var(--bz-myclass);
border: 1px solid rgba(var(--bz-myclass-rgb), 0.3);
}
/* 레벨 배지 */
.badge-level-1 { background-color: var(--bz-level-1); color: #fff; }
.badge-level-2 { background-color: var(--bz-level-2); color: #fff; }
.badge-level-3 { background-color: var(--bz-level-3); color: #fff; }
/* ══════════════════════════════════════════════════════════════════
Bootstrap 배지 → BizCode 테마 변수 오버라이드
기존 파일의 badge bg-primary/secondary 등 자동 테마 적용
══════════════════════════════════════════════════════════════════ */
[data-bz-theme] .badge.bg-primary,
[data-bz-theme] .badge.text-bg-primary {
background-color: rgba(var(--bz-accent-rgb), .15) !important;
color: var(--bz-accent) !important;
border: 1px solid rgba(var(--bz-accent-rgb), .3);
}
[data-bz-theme] .badge.bg-secondary,
[data-bz-theme] .badge.text-bg-secondary {
background-color: rgba(var(--bz-border-rgb, 150,150,150), .2) !important;
color: var(--bz-text-muted) !important;
border: 1px solid var(--bz-border);
}
[data-bz-theme] .badge.bg-success,
[data-bz-theme] .badge.text-bg-success {
background-color: rgba(var(--bz-material-rgb), .15) !important;
color: var(--bz-material) !important;
border: 1px solid rgba(var(--bz-material-rgb), .3);
}
[data-bz-theme] .badge.bg-danger,
[data-bz-theme] .badge.text-bg-danger {
background-color: rgba(220,53,69,.15) !important;
color: #dc3545 !important;
border: 1px solid rgba(220,53,69,.3);
}
[data-bz-theme] .badge.bg-warning,
[data-bz-theme] .badge.text-bg-warning {
background-color: rgba(255,193,7,.18) !important;
color: #997404 !important;
border: 1px solid rgba(255,193,7,.35);
}
[data-bz-theme="dark"] .badge.bg-warning,
[data-bz-theme="dark"] .badge.text-bg-warning {
color: #ffc107 !important;
}
[data-bz-theme] .badge.bg-info,
[data-bz-theme] .badge.text-bg-info {
background-color: rgba(var(--bz-quiz-vq-rgb), .15) !important;
color: var(--bz-quiz-vq) !important;
border: 1px solid rgba(var(--bz-quiz-vq-rgb), .3);
}
[data-bz-theme] .badge.bg-dark,
[data-bz-theme] .badge.text-bg-dark {
background-color: rgba(0,0,0,.5) !important;
color: #fff !important;
}
[data-bz-theme] .badge.bg-light,
[data-bz-theme] .badge.text-bg-light {
background-color: rgba(var(--bz-accent-rgb), .08) !important;
color: var(--bz-text) !important;
border: 1px solid var(--bz-border);
}
.badge-level-4 { background-color: var(--bz-level-4); color: #fff; }
.badge-level-5 { background-color: var(--bz-level-5); color: #fff; }
/* ================================================================
8. 버튼 (Button) — 모듈별
================================================================ */
/* Exam 버튼 (빨강) */
.btn-exam {
background-color: var(--bz-exam);
border-color: var(--bz-exam);
color: #fff;
}
.btn-exam:hover,
.btn-exam:focus {
background-color: #b02a37;
border-color: #a52834;
color: #fff;
}
.btn-outline-exam {
color: var(--bz-exam);
border-color: var(--bz-exam);
background: transparent;
}
.btn-outline-exam:hover {
background-color: var(--bz-exam);
color: #fff;
}
/* Spelling Bee 버튼 (오렌지) */
.btn-quiz-sb {
background-color: var(--bz-quiz-sb);
border-color: var(--bz-quiz-sb);
color: #fff;
}
.btn-quiz-sb:hover,
.btn-quiz-sb:focus {
background-color: #e96b00;
border-color: #dc6500;
color: #fff;
}
.btn-outline-quiz-sb {
color: var(--bz-quiz-sb);
border-color: var(--bz-quiz-sb);
background: transparent;
}
.btn-outline-quiz-sb:hover {
background-color: var(--bz-quiz-sb);
color: #fff;
}
/* Vocabulary Quiz 버튼 (하늘) */
.btn-quiz-vq {
background-color: var(--bz-quiz-vq);
border-color: var(--bz-quiz-vq);
color: #0a2a33;
}
.btn-quiz-vq:hover,
.btn-quiz-vq:focus {
background-color: #09b2d0;
border-color: #08a9c5;
color: #0a2a33;
}
.btn-outline-quiz-vq {
color: var(--bz-quiz-vq);
border-color: var(--bz-quiz-vq);
background: transparent;
}
.btn-outline-quiz-vq:hover {
background-color: var(--bz-quiz-vq);
color: #0a2a33;
}
/* Material 버튼 (초록) */
.btn-material {
background-color: var(--bz-material);
border-color: var(--bz-material);
color: #fff;
}
.btn-material:hover,
.btn-material:focus {
background-color: #146c43;
border-color: #13643f;
color: #fff;
}
.btn-outline-material {
color: var(--bz-material);
border-color: var(--bz-material);
background: transparent;
}
.btn-outline-material:hover {
background-color: var(--bz-material);
color: #fff;
}
/* Accent 버튼 (테마 포인트 컬러) */
.btn-accent {
background-color: var(--bz-accent);
border-color: var(--bz-accent);
color: #fff;
}
.btn-accent:hover,
.btn-accent:focus {
background-color: var(--bz-accent-hover);
border-color: var(--bz-accent-hover);
color: #fff;
}
/* ── .btn-bz : 전역 accent 버튼 (모든 페이지 공통) ── */
.btn-bz {
color: #fff;
background-color: var(--bz-accent);
border-color: var(--bz-accent);
}
.btn-bz:hover,
.btn-bz:focus-visible,
.btn-bz:active {
color: #fff;
background-color: var(--bz-accent-hover);
border-color: var(--bz-accent-hover);
}
.btn-bz:focus {
box-shadow: 0 0 0 .25rem rgba(var(--bz-accent-rgb), .35);
}
[data-bz-theme="dark"] .btn-bz,
[data-bz-theme="dark"] .btn-bz:hover,
[data-bz-theme="dark"] .btn-bz:active { color: #0f172a; }
/* ── btn-bz-sb / btn-bz-vq : 모듈 별칭 (btn-quiz-sb/vq 와 동일) ── */
.btn-bz-sb {
background-color: var(--bz-quiz-sb);
border-color: var(--bz-quiz-sb);
color: #fff;
}
.btn-bz-sb:hover,
.btn-bz-sb:focus-visible,
.btn-bz-sb:active {
background-color: #e96b00;
border-color: #dc6500;
color: #fff;
}
.btn-bz-vq {
background-color: var(--bz-quiz-vq);
border-color: var(--bz-quiz-vq);
color: #0a2a33;
}
.btn-bz-vq:hover,
.btn-bz-vq:focus-visible,
.btn-bz-vq:active {
background-color: #09b2d0;
border-color: #08a9c5;
color: #0a2a33;
}
.btn-outline-bz-vq {
color: var(--bz-quiz-vq);
border-color: var(--bz-quiz-vq);
background: transparent;
}
.btn-outline-bz-vq:hover {
background-color: var(--bz-quiz-vq);
color: #0a2a33;
}
/* ══════════════════════════════════════════════════════════════════
BizCode 버튼 추가 변형 (테마 자동 적용)
══════════════════════════════════════════════════════════════════ */
/* btn-bz-outline — 아웃라인 accent 버튼 (보조 액션) */
.btn-bz-outline {
color: var(--bz-accent);
border-color: var(--bz-accent);
background: transparent;
}
.btn-bz-outline:hover,
.btn-bz-outline:focus-visible,
.btn-bz-outline:active {
color: #fff;
background-color: var(--bz-accent);
border-color: var(--bz-accent);
}
.btn-bz-outline:focus {
box-shadow: 0 0 0 .25rem rgba(var(--bz-accent-rgb), .25);
}
/* btn-bz-muted — 회색 버튼 (닫기·취소·비활성) */
.btn-bz-muted {
color: var(--bz-text-muted);
border-color: var(--bz-border);
background: var(--bz-card-bg);
}
.btn-bz-muted:hover,
.btn-bz-muted:focus-visible,
.btn-bz-muted:active {
color: var(--bz-text);
border-color: rgba(var(--bz-accent-rgb), .4);
background: rgba(var(--bz-accent-rgb), .06);
}
/* btn-bz-danger — 위험 버튼 (삭제·경고, H 그룹 전용) */
.btn-bz-danger {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
.btn-bz-danger:hover,
.btn-bz-danger:focus-visible,
.btn-bz-danger:active {
color: #fff;
background-color: #bb2d3b;
border-color: #b02a37;
}
.btn-bz-danger:focus {
box-shadow: 0 0 0 .25rem rgba(220,53,69,.35);
}
/* ══════════════════════════════════════════════════════════════════
Bootstrap 버튼 클래스 → BizCode 테마 변수 오버라이드
기존 파일에서 btn-primary/secondary/danger 등 사용 시 자동 테마 적용
══════════════════════════════════════════════════════════════════ */
/* btn-primary → accent 색상으로 덮어쓰기 */
[data-bz-theme] .btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bz-accent);
--bs-btn-border-color: var(--bz-accent);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--bz-accent-hover);
--bs-btn-hover-border-color: var(--bz-accent-hover);
--bs-btn-active-bg: var(--bz-accent-hover);
--bs-btn-active-border-color: var(--bz-accent-hover);
--bs-btn-disabled-bg: var(--bz-accent);
--bs-btn-focus-shadow-rgb: var(--bz-accent-rgb);
}
[data-bz-theme="dark"] .btn-primary { --bs-btn-color: #0f172a; --bs-btn-hover-color: #0f172a; }
/* btn-secondary → 테마 카드 배경 + 테두리 색상 */
[data-bz-theme] .btn-secondary {
--bs-btn-color: var(--bz-text-muted);
--bs-btn-bg: var(--bz-card-bg);
--bs-btn-border-color: var(--bz-border);
--bs-btn-hover-color: var(--bz-text);
--bs-btn-hover-bg: rgba(var(--bz-accent-rgb), .07);
--bs-btn-hover-border-color: rgba(var(--bz-accent-rgb), .35);
--bs-btn-active-bg: rgba(var(--bz-accent-rgb), .12);
--bs-btn-active-border-color: rgba(var(--bz-accent-rgb), .4);
--bs-btn-disabled-bg: var(--bz-card-bg);
--bs-btn-disabled-color: var(--bz-text-muted);
}
/* btn-outline-secondary → 테마 보더 기반 아웃라인 */
[data-bz-theme] .btn-outline-secondary {
--bs-btn-color: var(--bz-text-muted);
--bs-btn-border-color: var(--bz-border);
--bs-btn-hover-color: var(--bz-text);
--bs-btn-hover-bg: rgba(var(--bz-accent-rgb), .07);
--bs-btn-hover-border-color: rgba(var(--bz-accent-rgb), .35);
}
/* btn-danger → 유지 (삭제 의미 명확, 색상 변경 불필요) */
/* btn-info → accent 보조색 */
[data-bz-theme] .btn-info {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bz-quiz-vq);
--bs-btn-border-color: var(--bz-quiz-vq);
--bs-btn-hover-bg: #09b2d0;
--bs-btn-hover-border-color: #08a9c5;
--bs-btn-hover-color: #fff;
}
/* btn-success → material(초록) 색상 */
[data-bz-theme] .btn-success {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bz-material);
--bs-btn-border-color: var(--bz-material);
--bs-btn-hover-color: #fff;
}
/* ── btn-pink : 핫핑크 고정 버튼 ── */
.btn-pink {
background-color: #f72585;
border-color: #f72585;
color: #fff;
}
.btn-pink:hover,
.btn-pink:focus-visible,
.btn-pink:active {
background-color: #d91070;
border-color: #d91070;
color: #fff;
}
.btn-pink:focus {
box-shadow: 0 0 0 .25rem rgba(247,37,133,.35);
}
.btn-outline-pink {
color: #f72585;
border-color: #f72585;
background: transparent;
}
.btn-outline-pink:hover {
background-color: #f72585;
border-color: #f72585;
color: #fff;
}
/* ── btn-lime : 라임 고정 버튼 ── */
.btn-lime {
background-color: #84cc16;
border-color: #84cc16;
color: #1a2f00;
}
.btn-lime:hover,
.btn-lime:focus-visible,
.btn-lime:active {
background-color: #65a30d;
border-color: #65a30d;
color: #fff;
}
.btn-lime:focus {
box-shadow: 0 0 0 .25rem rgba(132,204,22,.35);
}
.btn-outline-lime {
color: #65a30d;
border-color: #65a30d;
background: transparent;
}
.btn-outline-lime:hover {
background-color: #65a30d;
border-color: #65a30d;
color: #fff;
}
/* ================================================================
9. 카드 컴포넌트 (bz-card)
================================================================ */
.bz-card {
background-color: var(--bz-card-bg);
border: 1px solid var(--bz-border);
border-radius: 0.75rem;
box-shadow: 0 2px 12px var(--bz-shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease,
background-color 0.25s ease;
}
.bz-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 24px var(--bz-shadow-lg);
}
.bz-card-header {
background-color: rgba(var(--bz-accent-rgb), 0.06);
border-bottom: 1px solid var(--bz-border);
border-radius: 0.75rem 0.75rem 0 0 !important;
padding: 1rem 1.25rem;
}
/* 모듈별 카드 헤더 색상 */
.bz-card-exam .bz-card-header { background-color: rgba(var(--bz-exam-rgb), 0.08); }
.bz-card-quiz-sb .bz-card-header { background-color: rgba(var(--bz-quiz-sb-rgb), 0.08); }
.bz-card-quiz-vq .bz-card-header { background-color: rgba(var(--bz-quiz-vq-rgb), 0.08); }
.bz-card-material .bz-card-header{ background-color: rgba(var(--bz-material-rgb), 0.08); }
/* ================================================================
10. 히어로 섹션
================================================================ */
.bz-hero {
background: linear-gradient(135deg,
rgba(var(--bz-accent-rgb), 0.08) 0%,
rgba(var(--bz-accent-rgb), 0.02) 100%);
border-bottom: 1px solid var(--bz-border);
padding: 4rem 0 3rem;
}
[data-bz-theme="dark"] .bz-hero {
background: linear-gradient(135deg,
rgba(var(--bz-accent-rgb), 0.12) 0%,
rgba(0, 0, 0, 0) 100%);
}
[data-bz-theme="brown"] .bz-hero {
background: linear-gradient(135deg, #ede0d4 0%, #f8f3ee 100%);
}
[data-bz-theme="pink"] .bz-hero {
background: linear-gradient(135deg, #f0d8df 0%, #fdf2f4 100%);
}
[data-bz-theme="lime"] .bz-hero {
background: linear-gradient(135deg, #d4e8c8 0%, #f2f7ef 100%);
}
.bz-hero-title {
font-size: clamp(1.8rem, 5vw, 3rem);
font-weight: 800;
line-height: 1.2;
color: var(--bz-text);
}
.bz-hero-title .bz-highlight {
color: var(--bz-accent);
}
.bz-hero-sub {
font-size: clamp(1rem, 2.5vw, 1.2rem);
color: var(--bz-text-muted);
margin-top: 0.75rem;
}
/* ================================================================
11. 퀴즈/모듈 바로가기 카드
================================================================ */
.bz-module-card {
border-radius: 1rem;
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.2s ease, box-shadow 0.2s ease,
border-color 0.2s ease;
background-color: var(--bz-card-bg);
box-shadow: 0 2px 10px var(--bz-shadow);
}
.bz-module-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 28px var(--bz-shadow-lg);
}
.bz-module-card .bz-module-icon {
font-size: 2.5rem;
display: block;
margin-bottom: 0.5rem;
}
.bz-module-card .bz-module-title {
font-weight: 700;
font-size: 0.95rem;
color: var(--bz-text);
}
.bz-module-card .bz-module-sub {
font-size: 0.75rem;
color: var(--bz-text-muted);
margin-top: 0.2rem;
}
.bz-module-card.mc-exam { border-color: rgba(var(--bz-exam-rgb), 0.3); }
.bz-module-card.mc-sb { border-color: rgba(var(--bz-quiz-sb-rgb), 0.3); }
.bz-module-card.mc-vq { border-color: rgba(var(--bz-quiz-vq-rgb), 0.3); }
.bz-module-card.mc-material{ border-color: rgba(var(--bz-material-rgb), 0.3); }
.bz-module-card.mc-exam:hover { border-color: var(--bz-exam); }
.bz-module-card.mc-sb:hover { border-color: var(--bz-quiz-sb); }
.bz-module-card.mc-vq:hover { border-color: var(--bz-quiz-vq); }
.bz-module-card.mc-material:hover{ border-color: var(--bz-material); }
/* ================================================================
12. 섹션 타이틀
================================================================ */
.bz-section-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--bz-text);
margin-bottom: 1.25rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--bz-accent);
display: inline-block;
}
/* ================================================================
13. 리스트 아이템 (인기 퀴즈 등)
================================================================ */
.bz-list-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
background-color: var(--bz-card-bg);
border: 1px solid var(--bz-border);
transition: background-color 0.15s ease, transform 0.15s ease;
text-decoration: none;
color: var(--bz-text);
}
.bz-list-item:hover {
background-color: rgba(var(--bz-accent-rgb), 0.05);
transform: translateX(3px);
color: var(--bz-text);
}
.bz-list-item .bz-list-rank {
font-weight: 800;
font-size: 1.1rem;
width: 2rem;
text-align: center;
flex-shrink: 0;
}
.bz-list-item .bz-list-info {
flex: 1;
overflow: hidden;
}
.bz-list-item .bz-list-title {
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bz-list-item .bz-list-meta {
font-size: 0.75rem;
color: var(--bz-text-muted);
margin-top: 0.15rem;
}
.bz-list-item .bz-list-score {
font-size: 0.85rem;
font-weight: 700;
flex-shrink: 0;
color: var(--bz-accent);
}
/* ================================================================
14. 광고 영역 (AdSense 자리 표시자)
================================================================ */
.bz-adsense {
background-color: rgba(var(--bz-accent-rgb), 0.03);
border: 1px dashed var(--bz-border);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--bz-text-light);
font-size: 0.75rem;
letter-spacing: 0.05em;
}
.bz-adsense-horizontal { min-height: 90px; }
.bz-adsense-square { min-height: 250px; }
.bz-adsense-vertical { min-height: 600px; }
/* ================================================================
15. 퀴즈 / 시험 진행 (Focus Mode)
================================================================ */
.bz-focus-body {
background-color: var(--bz-bg);
min-height: 100vh;
}
/* 진행률 바 */
.bz-progress-bar {
height: 6px;
background-color: var(--bz-border);
border-radius: 3px;
overflow: hidden;
}
.bz-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--bz-accent), rgba(var(--bz-accent-rgb), 0.6));
border-radius: 3px;
transition: width 0.4s ease;
}
/* 문제 카드 */
.bz-question-card {
background-color: var(--bz-card-bg);
border: 1px solid var(--bz-border);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 20px var(--bz-shadow);
}
/* 보기 버튼 */
.bz-option-btn {
display: block;
width: 100%;
text-align: left;
padding: 0.85rem 1.25rem;
margin-bottom: 0.6rem;
border-radius: 0.6rem;
border: 2px solid var(--bz-border);
background-color: var(--bz-card-bg);
color: var(--bz-text);
font-size: 0.95rem;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease,
transform 0.1s ease;
}
.bz-option-btn:hover {
border-color: var(--bz-accent);
background-color: rgba(var(--bz-accent-rgb), 0.05);
transform: translateX(3px);
}
.bz-option-btn.selected {
border-color: var(--bz-accent);
background-color: rgba(var(--bz-accent-rgb), 0.1);
color: var(--bz-text);
font-weight: 600;
}
.bz-option-btn.correct {
border-color: var(--bz-material);
background-color: rgba(var(--bz-material-rgb), 0.12);
color: var(--bz-text);
}
.bz-option-btn.wrong {
border-color: var(--bz-exam);
background-color: rgba(var(--bz-exam-rgb), 0.1);
color: var(--bz-text);
}
/* 타이머 */
.bz-timer {
font-size: 1.2rem;
font-weight: 700;
color: var(--bz-accent);
font-variant-numeric: tabular-nums;
}
.bz-timer.warning { color: var(--bz-exam); animation: bz-pulse 1s infinite; }
@keyframes bz-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ================================================================
16. 결과 페이지
================================================================ */
.bz-score-circle {
width: 140px;
height: 140px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 6px solid var(--bz-accent);
margin: 0 auto;
background: rgba(var(--bz-accent-rgb), 0.08);
}
.bz-score-circle .bz-score-num {
font-size: 2.4rem;
font-weight: 800;
line-height: 1;
color: var(--bz-accent);
}
.bz-score-circle .bz-score-label {
font-size: 0.75rem;
color: var(--bz-text-muted);
}
/* ================================================================
17. 알림 메시지 (show_msg용)
================================================================ */
.bz-msg {
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
border: 1px solid transparent;
}
.bz-msg-success {
background-color: rgba(var(--bz-material-rgb), 0.1);
color: var(--bz-material);
border-color: rgba(var(--bz-material-rgb), 0.3);
}
.bz-msg-danger {
background-color: rgba(var(--bz-exam-rgb), 0.1);
color: var(--bz-exam);
border-color: rgba(var(--bz-exam-rgb), 0.3);
}
.bz-msg-warning {
background-color: rgba(var(--bz-quiz-sb-rgb), 0.1);
color: #8a5200;
border-color: rgba(var(--bz-quiz-sb-rgb), 0.3);
}
.bz-msg-info {
background-color: rgba(var(--bz-quiz-vq-rgb), 0.1);
color: #0a5460;
border-color: rgba(var(--bz-quiz-vq-rgb), 0.3);
}
[data-bz-theme="dark"] .bz-msg-warning { color: #f0c060; }
[data-bz-theme="dark"] .bz-msg-info { color: #67e8f9; }
/* ================================================================
18. 푸터
================================================================ */
.bz-footer {
background-color: var(--bz-footer-bg);
border-top: 1px solid var(--bz-border);
margin-top: auto;
transition: background-color 0.25s ease;
}
/* ================================================================
19. 스크롤바 (WebKit)
================================================================ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bz-bg); }
::-webkit-scrollbar-thumb {
background: var(--bz-border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--bz-text-light); }
/* ================================================================
20. 반응형 유틸리티
================================================================ */
@media (max-width: 575.98px) {
.bz-hero { padding: 2.5rem 0 2rem; }
.bz-question-card { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ================================================================
21. 폼 인라인 메시지 (field-msg / field-ok / field-err)
================================================================ */
.field-msg { display: none; }
.field-ok { color: #198754; display: block !important; }
.field-err { color: #dc3545; display: block !important; }
[data-bs-theme="dark"] .field-ok { color: #4ade80; }
[data-bs-theme="dark"] .field-err { color: #f87171; }
/* ── 폼 안내 텍스트 (Bootstrap 기본 어두운 색 → 테마 muted로 오버라이드) ── */
.form-text { color: var(--bz-text-muted) !important; }
/* ================================================================
22. Brown / Violet — Navbar & Footer 그라데이션
CSS 변수는 그라데이션을 지원하지 않으므로 직접 오버라이드
================================================================ */
/* ── Brown : 딥모카 → 웜브라운 → 모카 (은은한 그라데이션) ── */
[data-bz-theme="brown"] #bz-navbar {
background: linear-gradient(
105deg,
#22160e 0%,
#3a2418 28%,
#5a3c2a 52%,
#7a5240 75%,
#9a7055 100%
) !important;
}
[data-bz-theme="brown"] .bz-footer {
background: linear-gradient(
135deg,
#2e1e14 0%,
#4a3428 50%,
#9a7055 100%
) !important;
}
/* ── Pink : 와인 → 더스티 로즈 (은은한 그라데이션) ── */
[data-bz-theme="pink"] #bz-navbar {
background: linear-gradient(
105deg,
#4a2030 0%,
#6e3248 25%,
#8f4a62 52%,
#a85a74 75%,
#c26b8a 100%
) !important;
}
[data-bz-theme="pink"] .bz-footer {
background: linear-gradient(
135deg,
#7a3a50 0%,
#9a5068 50%,
#c26b8a 100%
) !important;
}
/* ================================================================
23. 테이블 — Apple 스타일 둥근 모서리 (Global)
================================================================ */
/* ── .table-responsive 래퍼: 클리핑으로 상하좌우 모서리 처리 ── */
.table-responsive {
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--bz-border);
box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
}
/* ── 카드 안 table-responsive: 카드의 border로 대체 ── */
.card .table-responsive,
.bz-card .table-responsive {
border: none;
box-shadow: none;
border-radius: 0;
overflow: hidden; /* 클리핑은 유지 */
}
/* ── 독립 래퍼 유틸리티 (.table-responsive 미사용 시) ── */
.bz-table-wrap {
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--bz-border);
box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
}
.bz-table-wrap > .table {
margin-bottom: 0;
}
/* ── border-collapse: separate 로 cell 단위 radius 허용 ── */
.table {
border-collapse: separate !important;
border-spacing: 0;
margin-bottom: 0;
}
/* ── thead 첫 행 — 상단 좌우 코너 ── */
.table > thead > tr:first-child > th:first-child,
.table > thead > tr:first-child > td:first-child {
border-top-left-radius: 13px;
}
.table > thead > tr:first-child > th:last-child,
.table > thead > tr:first-child > td:last-child {
border-top-right-radius: 13px;
}
/* ── thead 없을 때: tbody 첫 행 상단 코너 ── */
.table > tbody:first-child > tr:first-child > td:first-child,
.table > tbody:first-child > tr:first-child > th:first-child {
border-top-left-radius: 13px;
}
.table > tbody:first-child > tr:first-child > td:last-child,
.table > tbody:first-child > tr:first-child > th:last-child {
border-top-right-radius: 13px;
}
/* ── tbody 마지막 행 — 하단 좌우 코너 ── */
.table > tbody:last-child > tr:last-child > td:first-child,
.table > tbody:last-child > tr:last-child > th:first-child {
border-bottom-left-radius: 13px;
}
.table > tbody:last-child > tr:last-child > td:last-child,
.table > tbody:last-child > tr:last-child > th:last-child {
border-bottom-right-radius: 13px;
}
/* ── tfoot 코너 ── */
.table > tfoot > tr:last-child > td:first-child,
.table > tfoot > tr:last-child > th:first-child {
border-bottom-left-radius: 13px;
}
.table > tfoot > tr:last-child > td:last-child,
.table > tfoot > tr:last-child > th:last-child {
border-bottom-right-radius: 13px;
}
/* ── .table-responsive 안 table은 wrapper가 클리핑하므로 cell radius 불필요 ── */
.table-responsive > .table > thead > tr:first-child > th,
.table-responsive > .table > thead > tr:first-child > td,
.table-responsive > .table > tbody:first-child > tr:first-child > td,
.table-responsive > .table > tbody:first-child > tr:first-child > th,
.table-responsive > .table > tbody:last-child > tr:last-child > td,
.table-responsive > .table > tbody:last-child > tr:last-child > th,
.table-responsive > .table > tfoot > tr:last-child > td,
.table-responsive > .table > tfoot > tr:last-child > th,
.bz-table-wrap > .table > thead > tr:first-child > th,
.bz-table-wrap > .table > thead > tr:first-child > td,
.bz-table-wrap > .table > tbody:first-child > tr:first-child > td,
.bz-table-wrap > .table > tbody:first-child > tr:first-child > th,
.bz-table-wrap > .table > tbody:last-child > tr:last-child > td,
.bz-table-wrap > .table > tbody:last-child > tr:last-child > th {
border-radius: 0 !important;
}
/* ── 다크 테마 그림자 강화 ── */
[data-bz-theme="dark"] .table-responsive,
[data-bz-theme="dark"] .bz-table-wrap {
box-shadow: 0 1px 4px rgba(0,0,0,.25), 0 6px 20px rgba(0,0,0,.20);
border-color: var(--bz-border);
}
/* ── Lime : 딥포레스트 → 올리브 → 세이지 그린 (은은한 그라데이션) ── */
[data-bz-theme="lime"] #bz-navbar {
background: linear-gradient(
105deg,
#1e2e1c 0%,
#2a3d28 28%,
#3d5c38 52%,
#567a4e 75%,
#7a9e6a 100%
) !important;
}
[data-bz-theme="lime"] .bz-footer {
background: linear-gradient(
135deg,
#2a3d28 0%,
#3d5c38 50%,
#7a9e6a 100%
) !important;
}
/* ═══════════════════════════════════════════════════════════════════
PAGINATION — .pg-btn 공통 페이지네이션 (테마 자동 적용)
사용법: N
N
‹
═══════════════════════════════════════════════════════════════════ */
.pg-btn {
display: inline-block;
padding: .22rem .55rem;
font-size: .75rem;
border-radius: 5px;
border: 1px solid var(--bz-border);
background: var(--bz-card-bg);
color: var(--bz-text-muted);
text-decoration: none;
margin: 0 1px;
line-height: 1.5;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.pg-btn:hover {
background: rgba(var(--bz-accent-rgb), .08);
color: var(--bz-accent);
border-color: rgba(var(--bz-accent-rgb), .3);
text-decoration: none;
}
.pg-btn.active {
background: var(--bz-accent);
color: #fff;
border-color: var(--bz-accent);
font-weight: 700;
pointer-events: none;
}
.pg-btn.disabled {
opacity: .4;
pointer-events: none;
cursor: default;
}
.pg-wrap {
text-align: center;
padding: .75rem .5rem .25rem;
}
/* ═══════════════════════════════════════════════════════════════════
PAGE BANNER — 모든 페이지 상단 타이틀 배너 (.bz-page-banner)
sub_head.php 에서 자동 출력 / $page_banner 변수로 제어
─────────────────────────────────────────────────────────────────
숨김: $page_banner = false;
커스텀: $page_banner = array('icon'=>'🎯','title'=>'...','desc'=>'...');
═══════════════════════════════════════════════════════════════════ */
.bz-page-banner {
padding: 1rem 0 1.2rem;
position: relative;
overflow: hidden;
margin-bottom: 1.25rem;
border-radius: 0 0 20px 20px;
}
@media (min-width: 576px) {
.bz-page-banner { padding: 1.6rem 0 2rem; }
}
.bz-page-banner::after {
content: '';
position: absolute;
right: -40px;
bottom: -40px;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(255,255,255,.05);
pointer-events: none;
}
.bz-page-banner .bz-pb-icon {
width: 48px;
height: 48px;
border-radius: 13px;
background: rgba(255,255,255,.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
flex-shrink: 0;
}
.bz-page-banner .bz-pb-title {
font-size: 1.25rem;
font-weight: 800;
color: #fff;
letter-spacing: -.02em;
}
.bz-page-banner .bz-pb-desc {
font-size: .8rem;
color: rgba(255,255,255,.75);
margin-top: .2rem;
}
.bz-page-banner .bz-pb-extra {
font-size: .8rem;
color: rgba(255,255,255,.65);
white-space: nowrap;
}
/* 테마별 그라데이션 */
[data-bz-theme="bright"] .bz-page-banner { background: linear-gradient(105deg,#1a1a2e 0%,#16213e 35%,#0f3460 65%,#0099ff 100%); }
[data-bz-theme="dark"] .bz-page-banner { background: linear-gradient(105deg,#060a12 0%,#0a101e 35%,#0d1930 65%,#1e3a5f 100%); }
[data-bz-theme="brown"] .bz-page-banner { background: linear-gradient(105deg,#22160e 0%,#4a3428 35%,#7a5240 65%,#9a7055 100%); }
[data-bz-theme="pink"] .bz-page-banner { background: linear-gradient(105deg,#4a1020 0%,#6e2040 35%,#9a3060 65%,#c26b8a 100%); }
[data-bz-theme="lime"] .bz-page-banner { background: linear-gradient(105deg,#1e2e1c 0%,#2a3d28 35%,#3d5c38 65%,#7a9e6a 100%); }
/* ================================================================
Staff 전용 — 버튼 모서리 일괄 둥글게 (body.bz-staff)
· .btn(Bootstrap 포함),