/* * Rainbow 커스텀 테마 — Bootstrap 5 CSS 변수 오버라이드 (빌드리스, DESIGN §2·§8) * 색·타이포·컴포넌트를 :root 오버라이드로 조정한다. JS·SASS 불필요. * * 다크모드(§18.6): 속성으로 전환. * "자동" 판정은 layout.php 인라인 스크립트가 prefers-color-scheme을 읽어 * 속성으로 확정하므로 CSS는 [data-bs-theme=dark] 셀렉터 하나만 쓴다. * 이 파일이 bootstrap.min.css 뒤에 로드되므로 :root 오버라이드가 Bootstrap의 * 다크 기본값까지 덮는다 — 테마별로 달라야 하는 값은 반드시 아래 * [data-bs-theme=dark] 블록에도 짝을 정의할 것. */ :root { /* ── 브랜드 색 ── */ --rb-green: #2e7d32; /* 테니스 코트 녹색 계열 */ --rb-green-light: #4caf50; --rb-green-subtle: #e8f5e9; --rb-yellow: #f9a825; /* 테니스 볼 */ --rb-yellow-subtle:#fff8e1; /* 텍스트는 Bootstrap 테마 변수에 위임 — 라이트/다크에서 자동 전환 */ --rb-text: var(--bs-body-color); --rb-text-muted: var(--bs-secondary-color); /* 페이지 배경 — 패널(bg-body·card)과 구분되는 한 단계 낮은 톤 */ --rb-page-bg: #f8f9fa; /* ── Bootstrap primary 오버라이드 ── */ --bs-primary: var(--rb-green); --bs-primary-rgb: 46, 125, 50; --bs-link-color: var(--rb-green); --bs-link-hover-color: var(--rb-green-light); /* ── 폰트 ── */ --bs-font-sans-serif: 'Noto Sans KR', system-ui, -apple-system, sans-serif; --bs-body-font-size: 0.9375rem; /* 15px — 모바일 가독성 */ --bs-body-line-height: 1.6; /* ── 테두리·그림자 ── */ --bs-border-radius: 0.5rem; --bs-border-radius-sm: 0.35rem; --bs-border-radius-lg: 0.75rem; --bs-box-shadow-sm: 0 1px 4px rgba(0,0,0,.08); --bs-box-shadow: 0 2px 8px rgba(0,0,0,.1); } /* ── 다크 팔레트 — 위 :root 중 테마 의존 값의 짝 ── */ [data-bs-theme=dark] { --rb-green-subtle: #1d3321; /* 라이트 subtle의 다크 대응(녹색 틴트 배경) */ --rb-yellow-subtle:#332b12; --rb-page-bg: #16191c; /* 카드(--bs-body-bg #212529)보다 한 단계 어둡게 */ /* 진녹색 링크는 다크 배경에서 대비 부족 — 밝은 녹색으로 */ --bs-link-color: var(--rb-green-light); --bs-link-hover-color: #66bb6a; /* 어두운 배경에선 그림자를 더 진하게 해야 패널 분리가 보인다 */ --bs-box-shadow-sm: 0 1px 4px rgba(0,0,0,.4); --bs-box-shadow: 0 2px 8px rgba(0,0,0,.5); } /* ── 공통 유틸 ── */ body { background-color: var(--rb-page-bg); color: var(--rb-text); } /* 네비게이션 */ .rb-navbar { background-color: var(--rb-green); padding-top: .5rem; padding-bottom: .5rem; } .rb-navbar .navbar-brand { color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: .5px; } .rb-navbar .navbar-brand:hover { color: #e8f5e9; } .rb-navbar .nav-link { color: rgba(255,255,255,.85); font-size: .875rem; } .rb-navbar .nav-link:hover, .rb-navbar .nav-link.active { color: #fff; } .rb-navbar .dropdown-menu { border: none; box-shadow: var(--bs-box-shadow); font-size: .875rem; } /* 공유 페이지 최소 헤더 */ .rb-navbar-public { background-color: var(--rb-green); padding: .5rem 1rem; } .rb-navbar-public .navbar-brand { color: #fff; font-weight: 700; } .rb-navbar-public .nav-link { color: rgba(255,255,255,.85); } .rb-navbar-public .nav-link:hover { color: #fff; } /* 드롭다운 active 항목 — Bootstrap 컴파일 기본(파랑)을 브랜드 녹색으로 */ .dropdown-menu { --bs-dropdown-link-active-bg: var(--rb-green); } /* 화면 모드 드롭다운(§18.6) — 비확장 navbar에선 Bootstrap이 dropdown-menu를 static으로 둬 헤더 높이를 밀어낸다 → 테마 메뉴만 항상 레이어로 띄운다 */ .rb-theme-menu { position: relative; } .rb-theme-menu .dropdown-menu { position: absolute; top: 100%; right: 0; left: auto; } /* 모바일 햄버거 메뉴(§18.6) — Bootstrap collapse 기본은 문서 흐름 안에서 펼쳐져 본문을 밀어낸다 → 헤더 아래 레이어로 겹쳐 내려오게 한다(본문 레이아웃 점프 방지). navbar-expand-md 기준이라 md 미만에서만 적용. */ @media (max-width: 767.98px) { .rb-navbar { position: relative; } .rb-navbar .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; z-index: 1030; /* Bootstrap $zindex-fixed 급 — 본문·카드 위 */ background-color: var(--rb-green); padding: .25rem .75rem .75rem; box-shadow: 0 10px 20px rgba(0, 0, 0, .25); } } /* ── 플래시 메시지 ── */ .rb-flash { font-size: .875rem; } /* ── 버튼 primary ── */ .btn-primary { background-color: var(--rb-green); border-color: var(--rb-green); } .btn-primary:hover, .btn-primary:focus { background-color: #1b5e20; border-color: #1b5e20; } /* ── 카드 ── */ .card { border: none; box-shadow: var(--bs-box-shadow-sm); } .card-header { font-weight: 600; } /* ── 모바일 퍼스트 여백 ── */ .rb-main { padding-top: 1rem; padding-bottom: 3rem; } /* ── 테니스 배지 (스코어·포인트) ── */ .badge-score { display: inline-block; min-width: 2.4rem; /* 0/15/30/40/AD 폭 고정 — 점수 바뀔 때 칸이 안 움찔거리게 */ text-align: center; background-color: var(--rb-green); color: #fff; padding: .25em .55em; border-radius: .35rem; font-weight: 700; } /* ── 공유 페이지: 로그인 안내 배너 ── */ .rb-login-hint { background-color: var(--rb-yellow-subtle); border-left: 4px solid var(--rb-yellow); font-size: .875rem; padding: .6rem 1rem; } /* hidden 속성이 Bootstrap display 유틸리티(.d-flex 등 !important)에 덮이지 않도록 강제 */ [hidden] { display: none !important; } /* 인라인 아이콘(SVG)을 텍스트 baseline에 정렬 */ .rb-ico { vertical-align: -.125em; } /* ── 테이블 헤더 변형을 테마 인지형으로(§18.6 팔레트 규칙) ───────────────── Bootstrap .table-light는 라이트 고정색(--bs-table-bg #f8f9fa)이라 다크모드에서 흰 헤더가 떠 어색하다(백오피스·목록 화면 공통). Bootstrap 5.3의 시맨틱 변수 (--bs-tertiary-bg 등)는 data-bs-theme에 따라 자동 전환되므로 다크 짝 불필요. */ .table-light { --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-tertiary-bg); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-tertiary-bg); --bs-table-striped-color: var(--bs-body-color); --bs-table-active-bg: var(--bs-tertiary-bg); --bs-table-active-color: var(--bs-body-color); --bs-table-hover-bg: var(--bs-tertiary-bg); --bs-table-hover-color: var(--bs-body-color); color: var(--bs-table-color); border-color: var(--bs-table-border-color); }