/*
 * 색 선택이 없는 화면을 테마 색으로 — 5색 사이트에서만(docs/archive/history/design-settings.md I6).
 *
 * 게시판 목록·글 보기, 문의 폼, 404, 회원 화면, 모바일 메뉴, 경로 바는 Tailwind 회색 클래스로 칠해져 있다(200곳 넘게).
 * 옅은 색·짙은 색을 정한 사이트(ThemeColor::usesFiveColors)는 레이아웃이 <body> 에 site-themed 를 붙이고 이 파일을
 * 불러온다. 그 아래의 밝은 쪽 회색 클래스를 테마 색으로 바꿔 칠한다 — 5색이 아닌 사이트는 이 파일을 부르지 않아 그대로다.
 *
 * 어두운 바탕에서 쓰는 옅은 회색(text-gray-300·400, border-gray-600·700)은 바꾸지 않는다 — 게시판 섹션의
 * "어둡게"가 쓴다. 선택자가 body.site-themed 로 시작해 Tailwind 클래스보다 우선한다(불러오는 순서와 상관없이).
 * 색 구성을 따르는 섹션(.cs-section 등)은 회색 클래스를 쓰지 않아 영향이 없다.
 */

/* 바탕 */
body.site-themed.bg-white,
body.site-themed .bg-white { background-color: var(--theme-surface); }
body.site-themed .bg-gray-50 { background-color: var(--theme-soft); }
body.site-themed .bg-gray-100,
body.site-themed .bg-gray-200 { background-color: color-mix(in srgb, var(--theme-text) 7%, var(--theme-surface)); }

/* 글자 */
body.site-themed.text-gray-900,
body.site-themed .text-gray-900,
body.site-themed .text-gray-800 { color: var(--theme-text); }
body.site-themed .text-gray-700,
body.site-themed .text-gray-600 { color: var(--theme-muted); }
body.site-themed .text-gray-500 { color: color-mix(in srgb, var(--theme-muted) 80%, var(--theme-surface)); }
body.site-themed .text-blue-600 { color: var(--theme-brand); }

/* 선 */
body.site-themed .border-gray-100,
body.site-themed .border-gray-200 { border-color: color-mix(in srgb, var(--theme-text) 12%, transparent); }
body.site-themed .border-gray-300 { border-color: color-mix(in srgb, var(--theme-text) 22%, transparent); }
body.site-themed .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: color-mix(in srgb, var(--theme-text) 12%, transparent); }

/* 진한 칠(현재 페이지 번호·활성 분류·제출 버튼) — 테마 짙은 색과 그 위 글자색 */
body.site-themed .bg-black,
body.site-themed .bg-gray-900 { background-color: var(--theme-deep); }
body.site-themed .bg-black.text-white,
body.site-themed .bg-gray-900.text-white { color: var(--theme-on-deep); }

/* Quill 본문(게시글 보기·이용약관·개인정보처리방침) — quill-content.css 의 고정 회색(#374151, gray-700) 대신 테마 색.
 * 어두운 색 묶음에서 본문이 바탕에 묻혔다(2026-10-01 kcms02 밤바다). gray-700 을 설명 글자색으로 바꾸는 위 규칙과 같게
 * 본문은 설명 글자색, 제목·굵은 글자·표 머리는 글자색. 본문에 직접 칠한 색(인라인)은 그대로다.
 * 팝업(.kp-text)과 이미지와 글 섹션(.mt-body)은 자기 색 규칙이 있어 뺀다. */
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor { color: var(--theme-muted); }
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor h1,
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor h2,
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor h3,
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor h4,
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor h5,
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor h6,
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor strong,
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor b,
body.site-themed .rich-text-view:not(.kp-text):not(.mt-body) .ql-editor th { color: var(--theme-text); }

/* 입력 칸 — 날짜 칸의 달력 아이콘·선택 목록 화살표처럼 브라우저가 그리는 부속은 color-scheme 을 따른다.
 * 어두운 색 묶음에서 달력 아이콘이 검은색으로 남아 보이지 않았다(2026-10-01). 바탕 밝기는 --theme-color-scheme(ThemeColor). */
body.site-themed input,
body.site-themed select,
body.site-themed textarea { color-scheme: var(--theme-color-scheme, light); }