/*
Theme Name: 커뮤니티
Description: 커뮤니티·게시판 템플릿의 기본 테마. 화면 골격과 기본 스타일만 담고, 기능과 문구는 템플릿 플러그인이 다룹니다.
Version: 0.1.2
Requires PHP: 7.4
Text Domain: community-board
*/

/* ===================
   1. CSS Variables
   =================== */
:root {
	/* 대표 색은 사이트 설정에서 고객이 바꾼다 — 토대가 --fh-brand* 변수를 내보내고, 없으면 아래 폴백. */
	--cb-brand: var(--fh-brand, #2f5d50);
	--cb-brand-deep: var(--fh-brand-deep, #1f4036);
	--cb-brand-soft: var(--fh-brand-soft, #e8f0ed);
	--cb-brand-contrast: var(--fh-brand-contrast, #ffffff);

	--cb-bg: #ffffff;
	--cb-surface: #f6f7f7;
	--cb-line: #e3e6e5;
	--cb-ink: #1c2321;
	--cb-ink-2: #4a5451;
	--cb-ink-3: #5d6764; /* 라이트 배경(#fff·#f6f7f7) 위에서 4.5:1 이상 */

	--cb-radius: 8px;
	--cb-max: 1080px;
	--cb-gutter: 16px;

	--cb-font: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * 다크 모드는 지원하지 않는다(독립 검수 1회차). 이 테마가 바탕만 어둡게 하면 게시판·회원 플러그인의 카드·표(밝은 면)가
 * 그대로 남아 반쪽 화면이 되고, 링크·hover 대비도 대표 색에 따라 깨진다. 플러그인 화면이 다크를 지원할 때 함께 추가한다.
 * 그때까지 브라우저·OS 가 다크여도 이 사이트는 밝게 그리도록 명시한다.
 */
:root { color-scheme: light; }

/* ===================
   2. Reset & Base
   =================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--cb-bg);
	color: var(--cb-ink);
	font-family: var(--cb-font);
	font-size: 16px;
	line-height: 1.7;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
img, video, iframe, table { max-width: 100%; }
img { height: auto; }
a { color: var(--cb-brand-deep); text-underline-offset: 2px; }
a:hover { color: var(--cb-brand); }
:focus-visible { outline: 2px solid var(--cb-brand); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 12px; }
.skip-link { position: absolute; left: -9999px; top: 0; padding: 12px 16px; background: var(--cb-bg); z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===================
   3. Layout
   =================== */
.cb-wrap { width: 100%; max-width: var(--cb-max); margin: 0 auto; padding: 0 var(--cb-gutter); }
.cb-main { padding: 32px 0 64px; min-height: 60vh; }

/* ===================
   4. Components
   =================== */
.cb-header { border-bottom: 1px solid var(--cb-line); background: var(--cb-bg); position: sticky; top: 0; z-index: 50; }
.cb-header__bar { display: flex; align-items: center; gap: 8px; min-height: 56px; flex-wrap: wrap; }
.cb-brand { font-weight: 700; font-size: 18px; color: var(--cb-ink); text-decoration: none; margin-right: auto; padding: 8px 0; }

.cb-toggle {
	min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius);
	background: var(--cb-bg); color: var(--cb-ink); font: inherit; cursor: pointer;
}
.cb-toggle:hover { background: var(--cb-surface); }

.cb-nav { display: none; width: 100%; order: 3; padding-bottom: 8px; }
.cb-nav.is-open { display: block; }
.cb-nav ul { list-style: none; margin: 0; padding: 0; }
.cb-nav a { display: block; padding: 12px 8px; min-height: 44px; color: var(--cb-ink); text-decoration: none; border-radius: var(--cb-radius); }
.cb-nav a:hover, .cb-nav .current-menu-item > a { background: var(--cb-brand-soft); color: var(--cb-brand-deep); }

.cb-tools { display: flex; align-items: center; gap: 4px; }
.cb-tools a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 14px;
	color: var(--cb-ink-2); text-decoration: none; border-radius: var(--cb-radius);
}
.cb-tools a:hover { background: var(--cb-surface); color: var(--cb-ink); }
.cb-tools .cb-btn { background: var(--cb-brand); color: var(--cb-brand-contrast); font-weight: 500; }
.cb-tools .cb-btn:hover { background: var(--cb-brand-deep); color: var(--cb-brand-contrast); }

.cb-page-title { font-size: 24px; font-weight: 700; }
.cb-content > * + * { margin-top: 16px; }
.cb-content h2 { font-size: 20px; margin-top: 32px; padding-bottom: 8px; border-bottom: 1px solid var(--cb-line); }

.cb-footer { border-top: 1px solid var(--cb-line); background: var(--cb-surface); color: var(--cb-ink-3); font-size: 14px; padding: 32px 0; }
.cb-footer .fhc-company-block { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cb-footer .fhc-company-block__label { color: var(--cb-ink-2); }

/* ===================
   5. Sections
   =================== */
.cb-notfound { text-align: center; padding: 64px 0; }
.cb-action {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 20px;
	border-radius: var(--cb-radius); background: var(--cb-brand); color: var(--cb-brand-contrast); font-weight: 500; text-decoration: none;
}
.cb-action:hover { background: var(--cb-brand-deep); color: var(--cb-brand-contrast); }

/* ===================
   6. Responsive
   =================== */
@media (min-width: 768px) {
	.cb-main { padding: 48px 0 80px; }
	.cb-toggle { display: none; }
	/* 순서: 이름 · 메뉴(남는 폭) · 로그인/내 정보 — 로그인 버튼이 우측 끝에 온다. */
	.cb-brand { margin-right: 0; }
	.cb-nav { display: block; width: auto; order: 1; padding-bottom: 0; flex: 1; }
	.cb-tools { order: 2; }
	.cb-nav ul { display: flex; gap: 4px; }
	.cb-page-title { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}