/* ===================================================================
   게시판 페이지 상단 표시 (배너 · 타이틀 · 서브타이틀)

   테마 2종
   - 화이트 : 과제 게시판(/assignment/) 톤
              배경 #eee / 텍스트 #333·#666 / 구분선 #e5e5e5 / 포인트 #C9A86A
   - 블랙   : 아파트 올인원 강의(/courses/apt/) 톤
              배경 #161617 / 골드 #C9A86A / 에메랄드 #2FAF72
              ※ 참조 페이지의 제목 색(#333)은 어두운 배경에서 대비가 부족해
                WCAG AA(4.5:1)를 확보할 수 있는 밝은 색으로 올려 사용한다.
   =================================================================== */

/* ===================
   1. CSS Variables
   =================== */

/* 레이아웃(정렬 · 크기 · 여백)은 두 테마가 동일하다.
   테마는 색상만 바꾼다 — 테마를 바꿨다고 화면 구조가 달라지면 안 되기 때문. */
.board-hero {
	--bh-max-width: 1200px;
	--bh-gold: #c9a86a;
	--bh-radius: 16px;
	--bh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	--bh-title-size: 28px;
	--bh-subtitle-size: 15px;
	--bh-align: left;
	--bh-pad-top: 40px;
	--bh-pad-bottom: 0;
}

/* 화이트 테마 — 과제 게시판 톤 */
.board-hero--white {
	--bh-bg: #eee;
	--bh-title-color: #333;
	--bh-subtitle-color: #666;
	--bh-line: #e5e5e5;
}

/* 블랙 테마 — APT 강의 페이지 톤 */
.board-hero--dark {
	--bh-bg: #161617;
	--bh-title-color: #fff;
	--bh-subtitle-color: rgba(255, 255, 255, 0.72);
	--bh-line: rgba(255, 255, 255, 0.14);
}

/* ===================
   2. Layout
   =================== */

.board-hero {
	margin: 0;
	padding: var(--bh-pad-top) 0 var(--bh-pad-bottom);
	background: var(--bh-bg);
	font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
}

.board-hero__inner {
	box-sizing: border-box;
	max-width: var(--bh-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* ===================
   3. Components
   =================== */

/* 배너 */

.board-hero__banner {
	margin-bottom: 32px;
	overflow: hidden;
	border-radius: var(--bh-radius);
	line-height: 0;
}

/* 세로로 긴 이미지가 올라와도 배너가 화면을 다 덮지 않도록 상한을 둔다. */
.board-hero__banner-img {
	display: block;
	width: 100%;
	max-width: 100%;
	max-height: 420px;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* 타이틀 영역 */

.board-hero__text {
	text-align: var(--bh-align);
}

.board-hero__title {
	margin: 0;
	color: var(--bh-title-color);
	font-size: var(--bh-title-size);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.board-hero__subtitle {
	margin: 8px 0 0;
	color: var(--bh-subtitle-color);
	font-size: var(--bh-subtitle-size);
	font-weight: 400;
	line-height: 1.7;
	word-break: keep-all;
}

/* 과제 게시판 헤더와 동일하게 하단 구분선을 둔다 (두 테마 공통, 색만 다름). */
.board-hero__text {
	padding-bottom: 20px;
	border-bottom: 2px solid var(--bh-line);
}

.board-hero--dark .board-hero__banner {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ===================
   4. 페이지 전체 톤
   =================== */

/* KBoard 스킨 CSS 가 `body:has(#kboard-...)` 로 배경을 지정하므로
   테마 지정이 밀리지 않도록 !important 로 확정한다. */
html body.board-theme-white {
	background-color: #eee !important;
}

html body.board-theme-dark {
	background-color: #161617 !important;
}

/* 테마 배경이 본문 영역까지 이어지도록 한다. */
body.has-board-hero .site-main,
body.has-board-hero .page-content {
	background-color: transparent;
}

/* 테마 기본 페이지 제목은 히어로가 대신하므로 숨긴다. */
body.has-board-hero .page-header {
	display: none;
}

/* 본문(게시판) 영역 상단 여백 */
body.has-board-hero .page-content {
	padding-top: 0;
}

/* -------------------------------------------------------------
   블랙 테마 — KBoard 스킨은 밝은 배경을 전제로 만들어져 있으므로
   어두운 배경에서 읽히도록 텍스트와 선 색을 보정한다.
   ------------------------------------------------------------- */

body.board-theme-dark .page-content {
	color: rgba(255, 255, 255, 0.86);
}

/* 글쓰기 화면은 KBoard 가 흰 배경으로 그리므로 밝은 글자색을 물려받지 않도록 되돌린다. */
body.board-theme-dark [id$="-editor"],
body.board-theme-dark [id$="-editor"] label,
body.board-theme-dark [id$="-editor"] p {
	color: #333;
}

body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-list-header,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-total-count,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-sort,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) th,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) td,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-list a,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-default-cut-strings {
	color: rgba(255, 255, 255, 0.86) !important;
}

body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-total-count,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-list-date,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-list-user {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* 선은 배경과 가깝게 — 어두운 배경에서 흰 테두리는 강하게 튄다.
   KBoard 스킨이 border-bottom 등 축약 속성으로 지정하므로 방향별로 덮어쓴다. */
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-list-header,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) table,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) thead,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) tbody,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) tr,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) th,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) td {
	border-top-color: rgba(255, 255, 255, 0.09) !important;
	border-right-color: rgba(255, 255, 255, 0.09) !important;
	border-bottom-color: rgba(255, 255, 255, 0.09) !important;
	border-left-color: rgba(255, 255, 255, 0.09) !important;
}

/* 스킨이 tbody 등에 흰 배경을 주므로 (흰 배경 + 밝은 글자 = 안 보임) 투명으로 되돌린다. */
html body.board-theme-dark :is(#kboard-default-list, [id^="kboard-"]):not([id$="-editor"]) :is(table, thead, tbody, tr, th, td) {
	background-color: transparent !important;
}

html body.board-theme-dark :is(#kboard-default-list, [id^="kboard-"]):not([id$="-editor"]) tbody tr:hover td {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 폼 요소도 어두운 톤으로 맞춘다 (흰 입력창은 다크 배경에서 크게 튄다).

   KBoard 스킨이 `#kboard-default-list ... select { background:#fff !important }`
   처럼 ID 특이성으로 강제하므로, `:is(#kboard-default-list, [id^="kboard-"]):not([id$="-editor"])` 로
   ID 특이성을 확보하면서 모든 스킨 컨테이너를 함께 커버한다. */
html body.board-theme-dark :is(#kboard-default-list, [id^="kboard-"]):not([id$="-editor"]) :is(select, textarea, input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])) {
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 6px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	color: rgba(255, 255, 255, 0.9) !important;
	color-scheme: dark;
}

html body.board-theme-dark :is(#kboard-default-list, [id^="kboard-"]):not([id$="-editor"]) :is(select, textarea, input):focus {
	border-color: var(--bh-gold, #c9a86a) !important;
	outline: none;
}

/* 드롭다운 목록은 OS 위젯이라 배경을 명시해 준다. */
html body.board-theme-dark :is(#kboard-default-list, [id^="kboard-"]):not([id$="-editor"]) select option {
	background: #161617 !important;
	color: rgba(255, 255, 255, 0.9) !important;
}

html body.board-theme-dark :is(#kboard-default-list, [id^="kboard-"]):not([id$="-editor"]) :is(input, textarea)::placeholder {
	color: rgba(255, 255, 255, 0.45) !important;
}

/* -------------------------------------------------------------
   블랙 테마 — academy 스킨 전용 보정
   (스킨은 밝은 톤 기준이므로 카드·필터·버튼을 어둡게 맞춘다)
   ------------------------------------------------------------- */

body.board-theme-dark #kboard-academy-list,
body.board-theme-dark #kboard-academy-document {
	color: rgba(255, 255, 255, 0.86);
}

/* 상단 검색/정렬 카드 */
body.board-theme-dark #kboard-academy-list .kboard-academy-head {
	background: rgba(255, 255, 255, 0.05);
}

body.board-theme-dark #kboard-academy-list .kboard-academy-count {
	color: rgba(255, 255, 255, 0.6);
}

body.board-theme-dark #kboard-academy-list .kboard-academy-count strong {
	color: var(--bh-gold, #c9a86a);
}

/* 검색 버튼 — 어두운 배경에서 #333 은 묻히므로 골드로 */
body.board-theme-dark #kboard-academy-list .kboard-academy-button.is-primary {
	background: var(--bh-gold, #c9a86a);
	color: #1a1a1a;
}

body.board-theme-dark #kboard-academy-list .kboard-academy-button.is-primary:hover {
	background: #b8955a;
	color: #1a1a1a;
}

body.board-theme-dark #kboard-academy-list .kboard-academy-button.is-ghost {
	border-color: rgba(255, 255, 255, 0.18);
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
}

body.board-theme-dark #kboard-academy-list .kboard-academy-button.is-ghost:hover {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

/* 목록 카드 */
body.board-theme-dark #kboard-academy-list .kboard-academy-list {
	border-top-color: rgba(255, 255, 255, 0.28);
	background: transparent;
}

body.board-theme-dark #kboard-academy-list .kboard-academy-cut-strings {
	color: rgba(255, 255, 255, 0.92);
}

body.board-theme-dark #kboard-academy-list .kboard-academy-empty {
	color: rgba(255, 255, 255, 0.45);
}

body.board-theme-dark #kboard-academy-list .kboard-academy-badge.is-popular {
	background: rgba(201, 168, 106, 0.18);
	color: var(--bh-gold, #c9a86a);
}

/* 글 상세 카드 */
body.board-theme-dark #kboard-academy-document .kboard-title,
body.board-theme-dark #kboard-academy-document .kboard-detail,
body.board-theme-dark #kboard-academy-document .kboard-content,
body.board-theme-dark #kboard-academy-document .kboard-document-wrap {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.86);
}

body.board-theme-dark #kboard-academy-document .kboard-title h1 {
	color: #fff;
}

/* 페이지네이션 — 현재 페이지 강조는 골드로 */
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-pagination a {
	color: rgba(255, 255, 255, 0.86) !important;
}

body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-pagination .active,
body.board-theme-dark [id^="kboard-"]:not([id$="-editor"]) .kboard-pagination strong {
	border-color: var(--bh-gold, #c9a86a) !important;
	color: var(--bh-gold, #c9a86a) !important;
}

/* ===================
   5. 등장 효과 (JS가 준비된 뒤에만 적용)
   =================== */

.board-hero.is-anim-ready .board-hero__title,
.board-hero.is-anim-ready .board-hero__subtitle,
.board-hero.is-anim-ready .board-hero__banner {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s var(--bh-ease),
		transform 0.7s var(--bh-ease);
	will-change: opacity, transform;
}

.board-hero.is-anim-ready.is-visible .board-hero__banner,
.board-hero.is-anim-ready.is-visible .board-hero__title,
.board-hero.is-anim-ready.is-visible .board-hero__subtitle {
	opacity: 1;
	transform: none;
}

.board-hero.is-anim-ready.is-visible .board-hero__title {
	transition-delay: 0.1s;
}

.board-hero.is-anim-ready.is-visible .board-hero__subtitle {
	transition-delay: 0.25s;
}

.board-hero.is-anim-done .board-hero__banner,
.board-hero.is-anim-done .board-hero__title,
.board-hero.is-anim-done .board-hero__subtitle {
	will-change: auto;
}

/* ===================
   6. Responsive
   =================== */

@media (max-width: 1024px) {
	.board-hero {
		--bh-title-size: 26px;
		--bh-pad-top: 32px;
	}

	.board-hero__banner {
		margin-bottom: 28px;
	}

	.board-hero__banner-img {
		max-height: 320px;
	}
}

@media (max-width: 768px) {
	.board-hero {
		--bh-radius: 12px;
	}

	.board-hero {
		--bh-title-size: 24px;
		--bh-subtitle-size: 14px;
		--bh-pad-top: 28px;
	}

	.board-hero__banner {
		margin-bottom: 24px;
	}

	.board-hero__banner-img {
		max-height: 240px;
	}
}

@media (max-width: 480px) {
	.board-hero__inner {
		padding: 0 16px;
	}

	.board-hero {
		--bh-title-size: 22px;
		--bh-pad-top: 26px;
	}

	.board-hero__banner {
		margin-bottom: 20px;
	}

	.board-hero__banner-img {
		max-height: 200px;
	}
}

/* ===================
   7. 접근성 — 동작 줄이기
   =================== */

@media (prefers-reduced-motion: reduce) {
	.board-hero.is-anim-ready .board-hero__banner,
	.board-hero.is-anim-ready .board-hero__title,
	.board-hero.is-anim-ready .board-hero__subtitle {
		opacity: 1;
		transform: none;
		transition: none;
	}
}