/* ============================================================================ 경쟁률 조회 시스템 - 테마 (Bootstrap 5.3 오버라이드) 적용: base.html + 이 파일을 bootstrap.min.css 다음에 링크 원칙: Bootstrap 클래스/마크업은 그대로 두고 변수와 색만 바꾼다. 숫자는 전부 모노스페이스, 우리대학은 화면에서 유일한 유채색(테마별 강조색). 테마 두 가지: data-theme="dark" (기본) : 기존 다크 테마. 강조색 호박색. data-theme="sky" : 하늘색 + 네이비 라이트 테마(신뢰감 있는 느낌). 상단바(navbar)는 두 테마 모두 어두운 바탕(다크: 거의 검정, 하늘색: 네이비)을 유지한다 - 그래서 navbar 전용 글자색(--rw-navbar-ink/--rw-navbar-muted)은 테마와 무관하게 항상 밝은 색으로 고정한다. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); :root { color-scheme: dark; /* 다크 테마(기본값) ------------------------------------------------------ */ --rw-bg: #0a0c0e; /* 페이지 배경 */ --rw-panel: #12161a; /* 카드 배경 */ --rw-panel-2: #0e1113; /* 입력/내부 패널 */ --rw-line: #23282d; /* 구분선 */ --rw-line-soft: #1a1e22; /* 표 행 구분선 */ --rw-ink: #e8eaec; /* 본문 */ --rw-ink-2: #c9ced2; /* 보조 본문 */ --rw-muted: #8b9298; /* 라벨 */ --rw-muted-2: #6f767c; /* 설명문 */ --rw-own: #e0a63c; /* 우리대학 / 주요 액션 */ --rw-own-rgb: 224, 166, 60; --rw-own-soft: rgba(224, 166, 60, .08); --rw-up: #4caf7d; /* 증가 */ --rw-up-rgb: 76, 175, 125; --rw-down: #d4564f; /* 감소 */ --rw-down-rgb: 212, 86, 79; --rw-bar: #4a6b8a; /* 타 대학 막대 */ --rw-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --rw-border-2: #2b3238; /* 입력/버튼 테두리 */ --rw-border-3: #3a4147; /* 위 테두리의 hover */ --rw-placeholder: #5f666c; --rw-table-striped-bg: rgba(255, 255, 255, .018); --rw-table-hover-bg: rgba(255, 255, 255, .04); --rw-badge-secondary-bg: #1e242a; --rw-alert-success-border: #27412f; --rw-alert-danger-border: #46292a; --rw-alert-neutral-bg: #15191d; --rw-bar-track: #1f2429; --rw-quota-band-bg: #262d34; --rw-quota-band-line: #343c44; --rw-subtotal-bg: rgba(255, 255, 255, .06); --rw-danger-border: #3a2b2c; --rw-danger-ink: #a9666a; --rw-danger-hover-bg: #2a1d1e; --rw-danger-hover-border: #55393b; --rw-danger-hover-ink: #c98b8e; --rw-scrollbar-track: #13171a; /* 상단바는 항상 어두운 바탕이므로 테마와 무관하게 고정 */ --rw-navbar-ink: #e8eaec; --rw-navbar-muted: #8b9298; --rw-navbar-bg: var(--rw-panel-2); --rw-navbar-border: var(--rw-line); } /* 하늘색 + 네이비 라이트 테마 ------------------------------------------------ */ [data-theme="sky"] { color-scheme: light; --rw-bg: #eef4fb; --rw-panel: #ffffff; --rw-panel-2: #f4f8fc; --rw-line: #d7e3f0; --rw-line-soft: #e6edf6; --rw-ink: #14273f; --rw-ink-2: #33475f; --rw-muted: #5b6f85; --rw-muted-2: #8093a6; --rw-own: #2f7dd1; --rw-own-rgb: 47, 125, 209; --rw-own-soft: rgba(47, 125, 209, .08); --rw-up: #1f9d6b; --rw-up-rgb: 31, 157, 107; --rw-down: #c43c32; --rw-down-rgb: 196, 60, 50; --rw-bar: #6f93b8; --rw-border-2: #c9d9ea; --rw-border-3: #a9c2da; --rw-placeholder: #93a6b9; --rw-table-striped-bg: rgba(20, 39, 63, .03); --rw-table-hover-bg: rgba(20, 39, 63, .05); --rw-badge-secondary-bg: #e7eef6; --rw-alert-success-border: #bfe3d2; --rw-alert-danger-border: #f3c8c4; --rw-alert-neutral-bg: #eef4fb; --rw-bar-track: #dfe8f2; --rw-quota-band-bg: #e4edf7; --rw-quota-band-line: #c9d9ea; --rw-subtotal-bg: rgba(20, 39, 63, .045); --rw-danger-border: #f0c9c5; --rw-danger-ink: #b3413a; --rw-danger-hover-bg: #fdeceb; --rw-danger-hover-border: #e3a29b; --rw-danger-hover-ink: #96271f; --rw-scrollbar-track: #e9f0f8; /* 신뢰감을 위해 상단바는 네이비로 고정(본문만 밝아짐) */ --rw-navbar-bg: #0f2a4a; --rw-navbar-border: #0c2038; } [data-bs-theme="dark"], [data-bs-theme="light"] { --bs-body-bg: var(--rw-bg); --bs-body-color: var(--rw-ink); --bs-border-color: var(--rw-line); --bs-border-color-translucent: var(--rw-line); --bs-secondary-color: var(--rw-muted); --bs-emphasis-color: var(--rw-ink); --bs-link-color: var(--rw-own); --bs-link-hover-color: var(--rw-own); --bs-primary: var(--rw-own); --bs-primary-rgb: var(--rw-own-rgb); --bs-font-sans-serif: "IBM Plex Sans KR", system-ui, -apple-system, sans-serif; } body { background: var(--rw-bg); font-family: "IBM Plex Sans KR", system-ui, sans-serif; font-size: .925rem; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ── 상단 내비 ─────────────────────────────────────────────────────────── */ .navbar.bg-dark { background: var(--rw-navbar-bg) !important; border-bottom: 1px solid var(--rw-navbar-border); margin-bottom: 1.25rem !important; min-height: 52px; padding-top: 0; padding-bottom: 0; } .navbar-brand { font-size: .9rem !important; font-weight: 600; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: .5rem; color: var(--rw-navbar-ink) !important; } .navbar-brand::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--rw-own); } .navbar-dark .navbar-nav .nav-link { color: var(--rw-navbar-muted); font-size: .82rem; padding: .45rem .7rem; border-radius: 4px; } .navbar-dark .navbar-nav .nav-link:hover { color: var(--rw-navbar-ink); background: rgba(255, 255, 255, .08); } .navbar-dark .navbar-nav .nav-link.active { color: var(--rw-navbar-ink); background: rgba(255, 255, 255, .08); font-weight: 600; } .navbar-text { font-family: var(--rw-mono); font-size: .78rem; color: var(--rw-navbar-muted) !important; } .navbar .btn-outline-light { border-color: rgba(255, 255, 255, .16); color: var(--rw-navbar-muted); font-size: .78rem; } .navbar .btn-outline-light:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); color: var(--rw-navbar-ink); } .navbar .btn-outline-light.active { background: var(--rw-own) !important; border-color: var(--rw-own) !important; color: #14181a !important; font-weight: 600; } /* ── 카드 ─────────────────────────────────────────────────────────────── */ .card { background: var(--rw-panel); border: 1px solid var(--rw-line); border-radius: 6px; } .card.shadow-sm { box-shadow: none !important; } .card-title { font-size: .82rem !important; font-weight: 600; color: var(--rw-ink); letter-spacing: -.005em; } h5.card-title { font-size: 1rem !important; } .form-text { color: var(--rw-muted-2) !important; font-size: .72rem; line-height: 1.6; } hr { border-color: var(--rw-line); opacity: 1; } .vr { background: var(--rw-line); opacity: 1; } /* ── 폼 컨트롤 ─────────────────────────────────────────────────────────── */ .form-label { font-size: .72rem; color: var(--rw-muted); margin-bottom: .3rem; } .form-control, .form-select { background: var(--rw-panel-2); border-color: var(--rw-border-2); color: var(--rw-ink); font-size: .8rem; border-radius: 4px; } .form-control:focus, .form-select:focus { background: var(--rw-panel-2); border-color: var(--rw-own); box-shadow: 0 0 0 2px rgba(var(--rw-own-rgb), .16); color: var(--rw-ink); } .form-control::placeholder { color: var(--rw-placeholder); } .form-check-input { background-color: var(--rw-panel-2); border-color: var(--rw-border-3); } .form-check-input:checked { background-color: var(--rw-own); border-color: var(--rw-own); } .form-check-input:focus { box-shadow: 0 0 0 2px rgba(var(--rw-own-rgb), .16); border-color: var(--rw-own); } .form-check-label { font-size: .8rem; color: var(--rw-ink-2); } .form-switch .form-check-input:checked { background-color: var(--rw-own); } /* ── 버튼 ─────────────────────────────────────────────────────────────── */ .btn { border-radius: 4px; font-size: .78rem; font-weight: 500; } .btn-primary, .btn-success, .btn-warning { background: var(--rw-own); border-color: var(--rw-own); color: #14181a; font-weight: 600; } .btn-primary:hover, .btn-success:hover, .btn-warning:hover { background: var(--rw-own); border-color: var(--rw-own); color: #14181a; opacity: .88; } .btn-outline-primary, .btn-outline-secondary { border-color: var(--rw-border-2); color: var(--rw-ink-2); } .btn-outline-primary:hover, .btn-outline-secondary:hover { background: var(--rw-panel-2); border-color: var(--rw-border-3); color: var(--rw-ink); } .btn-outline-danger { border-color: var(--rw-danger-border); color: var(--rw-danger-ink); } .btn-outline-danger:hover { background: var(--rw-danger-hover-bg); border-color: var(--rw-danger-hover-border); color: var(--rw-danger-hover-ink); } .btn:disabled, .btn.disabled { opacity: .38; } .btn-link { color: var(--rw-own); } /* ── 표 ───────────────────────────────────────────────────────────────── */ .table { --bs-table-bg: transparent; --bs-table-color: var(--rw-ink); --bs-table-border-color: var(--rw-line-soft); --bs-table-striped-bg: var(--rw-table-striped-bg); --bs-table-striped-color: var(--rw-ink); --bs-table-hover-bg: var(--rw-table-hover-bg); --bs-table-hover-color: var(--rw-ink); font-size: .8rem; margin-bottom: 0; } .table > thead th { font-family: var(--rw-mono); font-size: .7rem; font-weight: 400; color: var(--rw-muted-2); border-bottom: 1px solid var(--rw-line) !important; white-space: nowrap; padding-bottom: .5rem; } .table > tbody td { border-color: var(--rw-line-soft); vertical-align: middle; } /* 숫자 정렬 칸은 모노스페이스 - 자리수가 맞아 비교가 쉬워진다 */ .table td.text-end, .table th.text-end { font-family: var(--rw-mono); font-variant-numeric: tabular-nums; } table.dataTable-like { font-size: .78rem; } .univ-group-start td { border-top: 1px solid var(--rw-line) !important; } .table-responsive { -webkit-overflow-scrolling: touch; } /* 우리대학 행: 화면에서 유일한 유채색 */ .own-row, .mon-own-row, tr.own-row > td, tr.mon-own-row > td { background: var(--rw-own-soft) !important; color: var(--rw-own) !important; font-weight: 600; } /* ── 배지 ─────────────────────────────────────────────────────────────── */ .badge { font-weight: 500; font-size: .68rem; border-radius: 3px; padding: .3em .55em; } .badge.bg-primary, .badge.bg-info { background: rgba(var(--rw-own-rgb), .14) !important; color: var(--rw-own) !important; } .badge.bg-success { background: rgba(var(--rw-up-rgb), .14) !important; color: var(--rw-up) !important; } .badge.bg-secondary { background: var(--rw-badge-secondary-bg) !important; color: var(--rw-muted) !important; } .kpi-filter-badge { cursor: pointer; line-height: 1.4; } .kpi-filter-badge:hover { filter: brightness(1.15); } /* ── 알림 ─────────────────────────────────────────────────────────────── */ .alert { border-radius: 5px; font-size: .82rem; border-width: 1px; } .alert-success { background: rgba(var(--rw-up-rgb), .1); border-color: var(--rw-alert-success-border); color: var(--rw-up); } .alert-danger { background: rgba(var(--rw-down-rgb), .1); border-color: var(--rw-alert-danger-border); color: var(--rw-down); } .alert-warning, .alert-info, .alert-secondary { background: var(--rw-alert-neutral-bg); border-color: var(--rw-line); color: var(--rw-ink-2); } /* ── 모니터링 화면 ─────────────────────────────────────────────────────── */ .mon-kpi { font-family: var(--rw-mono); font-size: 2.35rem !important; font-weight: 600; line-height: 1; letter-spacing: -.02em; margin-top: .35rem; } /* 첫 KPI(우리대학 경쟁률)만 강조색 */ .row > [class*="col-"]:first-child .mon-kpi { color: var(--rw-own); } .mon-kpi-sub { font-size: .72rem !important; color: var(--rw-muted) !important; } .mon-kpi-sub + .mon-kpi + .mon-kpi-sub { font-family: var(--rw-mono); margin-top: .5rem; } .mon-delta-up { color: var(--rw-up) !important; } /* 상승 = 초록 */ .mon-delta-down { color: var(--rw-down) !important; } /* 하락 = 붉음 */ .mon-bar-track { background: var(--rw-bar-track); border-radius: 3px; height: 5px !important; } .mon-bar-fill { background: var(--rw-bar); border-radius: 3px; height: 100%; } .mon-own-row .mon-bar-fill { background: var(--rw-own); } .mon-asof, .mon-spike-item { font-family: var(--rw-mono); } .mon-spike-item { font-size: .78rem; border-bottom: 1px solid var(--rw-line-soft); padding: .35rem .1rem; } .mon-spike-item:last-child { border-bottom: 0; } .sort-tab { color: var(--rw-muted); font-size: .76rem; text-decoration: none !important; padding-bottom: 2px; border-bottom: 1px solid transparent; } .sort-tab:hover { color: var(--rw-ink-2); } .sort-tab.active { color: var(--rw-ink) !important; font-weight: 500; border-bottom-color: var(--rw-own); } .chart-wrap { height: 250px; } .btn-check + .btn-outline-secondary { border-color: var(--rw-border-2); color: var(--rw-muted); } .btn-check:checked + .btn-outline-secondary { background: var(--rw-border-2); border-color: var(--rw-border-2); color: var(--rw-ink); } /* ── 대시보드 전체 리스트 표: 정렬 헤더 / Cross Filter 칩 (2026-09-17) ──── */ .th-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .th-sortable:hover { color: var(--rw-ink); } .th-sortable .sort-arrow { font-size: .7rem; color: var(--rw-muted); } .th-sortable.sort-active { color: var(--rw-ink); font-weight: 600; } .th-sortable.sort-active .sort-arrow { color: var(--rw-own); } .quick-filter-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(var(--rw-own-rgb), .12); color: var(--rw-own); border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; white-space: nowrap; } .quick-filter-chip .qf-remove { cursor: pointer; font-weight: 700; } .quick-filter-chip .qf-remove:hover { color: var(--rw-down); } /* ── 우리대학 접수현황 ─────────────────────────────────────────────────── */ .nav-pills .nav-link { color: var(--rw-ink-2); font-size: .78rem; border: 1px solid var(--rw-border-2); border-radius: 14px; padding: .3rem .7rem; margin: 0 .3rem .3rem 0; background: transparent; } .nav-pills .nav-link:hover { border-color: var(--rw-border-3); } .nav-pills .nav-link.active { background: rgba(var(--rw-own-rgb), .12) !important; border-color: var(--rw-own); color: var(--rw-own) !important; font-weight: 600; } .quota-band td { background: var(--rw-quota-band-bg) !important; color: var(--rw-muted) !important; font-weight: 700; font-size: .74rem; letter-spacing: .08em; border-top: 1px solid var(--rw-quota-band-line) !important; border-bottom: 1px solid var(--rw-quota-band-line) !important; } .subtotal-row td { background: var(--rw-subtotal-bg) !important; color: var(--rw-ink) !important; font-weight: 700; border-top: 1px solid var(--rw-line) !important; } .grandtotal-row td { background: rgba(var(--rw-own-rgb), .16) !important; color: var(--rw-own) !important; font-weight: 700; border-top: 2px solid var(--rw-own) !important; } .quota-gap td { background: transparent !important; border: 0 !important; padding: .4rem 0 !important; } .dept-tab-btn, .type-tab-btn { border: 0; background: none; cursor: pointer; } /* ── 테마 선택 버튼(상단바) ───────────────────────────────────────────── */ .rw-theme-switch .rw-theme-btn { font-size: .72rem; padding: .28rem .55rem; } /* ── 로그인 ───────────────────────────────────────────────────────────── */ .card .card-title.text-center { font-size: 1rem !important; } /* ── 스크롤바 ─────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--rw-border-2); border-radius: 5px; } ::-webkit-scrollbar-track { background: var(--rw-scrollbar-track); } /* ── 모바일 ───────────────────────────────────────────────────────────── */ @media (max-width: 576px) { body { font-size: .88rem; } .container-fluid { padding-left: .6rem; padding-right: .6rem; } .card-body { padding: .8rem; } .mon-kpi { font-size: 1.6rem !important; } .mon-kpi-sub { font-size: .68rem !important; } .chart-wrap { height: 220px; } table.dataTable-like { font-size: .72rem; } .table { font-size: .74rem; } .form-select-sm, .form-control-sm, .btn-sm { font-size: .74rem; } h5.card-title, h6.card-title { font-size: .9rem !important; } select[style*="width"], input[style*="width"] { max-width: 100%; } }