/* * 전역 디자인 토큰 * ------------------------------------------------------------------ * 프론트 테마와 관리자 화면이 함께 참조하는 단일 색·타이포 기준이다. * 테마 CSS(public/themes/{테마명}/css/style.css)는 이 파일 뒤에 로드되므로 * 같은 변수를 다시 선언하면 테마 값이 이긴다 — 테마 교체 지점을 깨지 않는다. * * 색 값 옆 비율은 실측한 명도 대비다. KWCAG 2.2 / WCAG 1.4.3 기준 * 본문 텍스트 4.5:1, 큰 텍스트·비텍스트 3:1 을 만족하는 값만 토큰이 된다. */ :root { /* ─── 브랜드 (테마가 재정의하는 지점) ───────────────── */ --primary: #0d6efd; --dark: #1e2a38; --danger: #dc3545; /* ─── 표면 ──────────────────────────────────────────── */ --surface-body: #f1f3f5; --surface-raised: #fff; --border-subtle: #e9ecef; --border-hairline:#f0f0f0; /* ─── 흰 배경 위 텍스트 ─────────────────────────────── */ --text-strong: #212529; /* 16.1:1 */ --text-body: #333; /* 12.6:1 */ --text-muted: #6c757d; /* 4.7:1 — AA 최소선. 이보다 옅게 내리지 않는다 */ /* ─── 어두운 표면(--dark) 위 텍스트 ─────────────────── */ --on-dark-strong: #fff; /* 15.4:1 */ --on-dark-body: #a8b7c7; /* 7.1:1 */ --on-dark-muted: #7e93a6; /* 4.6:1 — 구 #5a7080 은 2.8:1 로 미달이었다 */ --on-dark-raised: #2d3f54; --on-dark-danger: #ff6b6b; /* 5.2:1 — Bootstrap 기본 danger(#dc3545)는 3.2:1 로 미달이었다 */ /* ─── 타이포 ────────────────────────────────────────── */ --font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif; /* ─── 레이아웃 ──────────────────────────────────────── */ --sidebar-w: 240px; /* ─── 초점 표시 ─────────────────────────────────────── */ /* 밝은 표면 기준값. 어두운 표면에서는 그 컨테이너가 재정의한다. */ --focus-ring-color: #0a58ca; /* 흰 배경 대비 6.5:1 */ --focus-ring-width: 3px; /* ─── Bootstrap 유틸리티 연결 ──────────────────────── .bg-dark·.text-danger 같은 Bootstrap 유틸리티는 위 프로젝트 토큰이 아니라 Bootstrap 자체 --bs-* 변수만 읽는다. 재정의하지 않으면 테마가 --primary/--dark/--danger 를 바꿔도 이 클래스들은 Bootstrap 기본색 그대로 남는다. .bg-*/.text-*/.border-* 계열은 rgba(var(--bs-x-rgb), 기회) 형태라 RGB 삼중값이 따로 필요하다 — 위 hex 를 바꾸면 이 줄도 같은 색의 R,G,B 로 함께 바꿔야 한다. */ --bs-primary: var(--primary); --bs-primary-rgb: 13, 110, 253; --bs-dark: var(--dark); --bs-dark-rgb: 30, 42, 56; --bs-danger: var(--danger); --bs-danger-rgb: 220, 53, 69; } /* ─── Bootstrap 버튼 컴포넌트 연결 ───────────────────────── .btn-primary 등 버튼 컴포넌트는 --bs-btn-* 를 클래스 자체에 리터럴 hex 로 구워(bake) 두므로 위 --bs-primary 재정의만으로는 닿지 않는다. hover/active 음영은 테마가 어떤 색을 넣든 그대로 따라가도록 color-mix 로 계산한다. */ .btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: color-mix(in srgb, var(--primary) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 80%, black); --bs-btn-active-bg: color-mix(in srgb, var(--primary) 80%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--primary) 75%, black); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); --bs-btn-focus-shadow-rgb: 13, 110, 253; } .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); --bs-btn-disabled-color: var(--primary); --bs-btn-disabled-border-color: var(--primary); } .btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-active-bg: var(--danger); --bs-btn-active-border-color: var(--danger); --bs-btn-disabled-color: var(--danger); --bs-btn-disabled-border-color: var(--danger); } /* ─── 작은 버튼 터치 여유 ───────────────────────────────── 표에 담긴 조작 버튼이 좁은 화면에서 뭉치지 않도록 최소 터치 여유를 준다. 관리자·프론트가 함께 참조 — 한쪽에만 있으면 다른 쪽 .btn-sm 은 방치된다. */ .btn-sm { min-height: 32px; } @media (max-width: 991.98px) { .btn-sm { min-height: 40px; display: inline-flex; align-items: center; } } /* ─── 좁은 화면에서 목록 표를 행 단위 카드로 쌓는다 ──────── 열이 많은 표를 가로로 긁게 만들면 운영자·방문자가 조작 버튼을 찾지 못한다. 각 칸의 이름은 td 의 data-label 이 들고 있다. 관리자·프론트가 함께 참조. */ @media (max-width: 767.98px) { .table-stack thead { display: none; } .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; } .table-stack tr { border: 1px solid var(--border-subtle); border-radius: .5rem; background: var(--surface-raised); padding: .25rem .75rem; margin-bottom: .75rem; } .table-stack td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0; padding: .45rem 0; /* 긴 이메일·제목이 카드를 밀어내지 않도록 줄바꿈을 허용한다 */ min-width: 0; overflow-wrap: anywhere; text-align: right; } .table-stack td + td { border-top: 1px solid var(--border-hairline); } .table-stack td::before { content: attr(data-label); flex: 0 0 auto; font-size: .75rem; font-weight: 600; color: var(--text-muted); } /* 이름이 없는 칸(배지·조작 버튼)은 레이블 자리를 만들지 않는다 */ .table-stack td[data-label='']::before { content: none; } .table-stack td.cell-actions { justify-content: flex-end; flex-wrap: wrap; gap: .35rem; } } /* ─── 초점 가시성 (KWCAG «초점 이동과 표시») ───────────── 마우스 클릭에는 링을 띄우지 않고 키보드 이동에만 반응한다. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; border-radius: 2px; } /* ─── 터치 기기 입력 크기 ──────────────────────────────── iOS Safari 는 글자 16px 미만인 입력에 초점이 가면 화면을 강제로 확대하고 되돌리지 않는다. 관리자 화면이 쓰는 form-control-sm 은 14px 이라 그대로 두면 운영자가 폼을 채울 때마다 화면이 튄다. 화면 폭이 아니라 포인터 종류로 판정한다 — 터치 노트북도 대상이다. */ @media (pointer: coarse) { .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; } } /* ─── 반복 영역 건너뛰기 (KWCAG «반복 영역 건너뛰기») ───── 평소엔 화면 밖, 탭으로 도달하면 좌상단에 나타난다. display:none 이나 visibility:hidden 은 초점을 받지 못해 쓰지 않는다. */ .skip-link { position: absolute; top: 0; left: -9999px; z-index: 10000; padding: .65rem 1.1rem; background: var(--dark); color: var(--on-dark-strong); font-size: .9rem; font-weight: 600; text-decoration: none; border-radius: 0 0 .375rem 0; } .skip-link:focus { left: 0; } .skip-link:focus-visible { outline-color: var(--on-dark-strong); }