/*
 * 기존 공개 화면(게시판·문의·게시판 비밀번호·오류)을 GAME3579 테마로 맞춘다.
 * board.css·app.css 의 마크업은 그대로 두고 색상 변수와 밝은 배경만 의미 토큰으로 덮는다.
 * layouts/main.php 가 board.css 다음에 로드한다.
 */
:root {
  --color-primary: var(--c-accent-text);
  --color-text: var(--c-text);
  --color-text-muted: var(--c-text-muted);
  --color-bg: var(--c-bg);
  --color-border: var(--c-border);
  --container-width: var(--container);
}
body[data-area="game"] { background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); }
.legacy-page { padding-top: 32px; }
.legacy-page .board { margin: 0 auto; padding: 0; }
.legacy-page h1, .legacy-page h2 { color: var(--c-text); }

/* 라이트 전용 화면(마이페이지·주문 등)은 테마 토글을 숨긴다 */
body[data-theme-lock] .theme-toggle { display: none; }

/* ─── 게시판 공통 ─── */
.board-head h1, .board-head h2 { font-size: 28px; font-weight: 800; }
.board-cats .cat, .board-cats a { border-color: var(--c-border); color: var(--c-text-muted); background: var(--c-surface); }
.board-cats .cat.active, .board-cats a.active { background: var(--c-accent-strong); border-color: var(--c-accent-strong); color: var(--c-on-accent); }
.board-search input, .board-search select { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); }
.board-search button, .comment-form-foot button, .board-password-form button, .post-foot .btn-write, .board-head .btn-write {
  background: var(--c-accent-strong); color: var(--c-on-accent); border: 0; border-radius: var(--radius-pill);
}
.board-list { border-color: var(--c-border); }
.board-list li { border-color: var(--c-border); }
.board-list li:hover { background: var(--c-surface); }
.board-list li.notice { background: var(--c-surface); }
.bl-title .badge, .post-view h2 .badge { background: var(--c-accent-strong); color: var(--c-on-accent); }
.board-paging a, .board-paging span, .board-paging strong { border-color: var(--c-border); color: var(--c-text); }
.board-paging a:hover { background: var(--c-surface-2); }
.board-paging .active, .board-paging strong { background: var(--c-accent-strong); border-color: var(--c-accent-strong); color: var(--c-on-accent); }

/* 카드형 스킨(갤러리·웹진) */
.gallery-card, .webzine-item { background: var(--c-surface); border-color: var(--c-border); }
.gallery-card:hover { box-shadow: var(--shadow-card); }
.gallery-card .thumb, .wz-thumb { background: var(--c-surface-2); }
.gallery-card .no-thumb { color: var(--c-text-muted); }

/* 글 보기 */
.post-view, .post-content { color: var(--c-text); }
.post-content a { color: var(--c-accent-text); }
.post-content blockquote { background: var(--c-surface); border-left-color: var(--c-border-strong); color: var(--c-text-muted); }
.post-content pre, .post-content .ql-code-block-container { background: var(--c-surface-2); color: var(--c-text); }
.post-content code { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-accent-text); }
.post-content table, .post-content td, .post-content th { border-color: var(--c-border); }
.post-content tr:first-child td { background: var(--c-surface); }
.post-files { background: var(--c-surface); border-color: var(--c-border); }
.post-files a { color: var(--c-accent-text); }
.btn-list { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
.btn-list:hover { background: var(--c-surface-2); }

/* 댓글 */
.comment, .post-comments { border-color: var(--c-border); }
.comment-form textarea, .comment-form input { background: var(--c-surface); border: 1px solid var(--c-border-strong); color: var(--c-text); border-radius: var(--radius-md); }
.comment-login-guide { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-muted); }
.comment-login-guide a { color: var(--c-accent-text); }

/* 게시판 비밀번호 */
.board-password { max-width: 420px; margin: 40px auto; padding: 28px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.board-password-form input { width: 100%; height: 48px; padding: 0 14px; margin: 12px 0; border-radius: var(--radius-md); border: 1px solid var(--c-border-strong); background: var(--c-bg); color: var(--c-text); }
.board-password-form button { width: 100%; height: 48px; font-weight: 700; }
.board-password-error { color: var(--c-danger); }

/* ─── 문의 (app.css 의 contact 규칙을 토큰으로) ─── */
#contact-form { max-width: 760px; }
.contact-field { display: grid; gap: 6px; margin-bottom: 18px; }
.contact-options { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#contact-form input:not([type="checkbox"]):not([type="radio"]), #contact-form select, #contact-form textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text); font: inherit;
}
#contact-form textarea { min-height: 140px; }
#contact-form button[type="submit"] { height: 52px; padding: 0 28px; border: 0; border-radius: var(--radius-pill); background: var(--c-accent); color: var(--c-on-accent); font-weight: 800; font-size: 18.66px; }
.public-container { max-width: var(--container); margin: 0 auto; }

/* ─── 오류·404 ─── */
.err-404-container, .error-page { padding: 64px 0; text-align: center; }
.err-404-art { max-width: 320px; margin: 0 auto 24px; opacity: .85; }
.err-404-label { display: inline-block; margin-bottom: 8px; font-size: 13px; letter-spacing: .12em; color: var(--c-accent-text); }
.err-404-message, .error-page p { color: var(--c-text-muted); }
.err-404-home, .error-page .btn { display: inline-flex; align-items: center; height: 48px; margin-top: 20px; padding: 0 24px; border-radius: var(--radius-pill);
  background: var(--c-accent-strong); color: var(--c-on-accent); font-weight: 700; }
.err-404-home:hover, .error-page .btn:hover { color: var(--c-on-accent); filter: brightness(.92); }

/* ─── 기본 스킨 글 보기 (board/basic/detail — 클래스가 거의 없는 마크업) ─── */
.legacy-page > article.public-container { max-width: 880px; margin: 0 auto; padding: 32px 36px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.legacy-page > article.public-container > h1 { font-size: 28px; font-weight: 800; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--c-border); }
.public-prose { line-height: 1.8; color: var(--c-text); }
.public-prose p { margin: 0 0 1em; }
.public-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.public-prose a { color: var(--c-accent-text); text-decoration: underline; }
.legacy-page > article.public-container > p a { display: inline-flex; gap: 6px; color: var(--c-accent-text); }
.legacy-page > article.public-container > a[href^="/board/"] { display: inline-flex; align-items: center; height: 40px; margin-top: 24px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--c-border-strong); color: var(--c-text); font-weight: 600; }
.legacy-page #comments:not(.cm-comments) { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-border); }
.legacy-page #comments:not(.cm-comments) h2 { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.legacy-page #comments:not(.cm-comments) article { padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.legacy-page #comments:not(.cm-comments) article strong { display: block; margin-bottom: 4px; font-size: 14px; }
.legacy-page #comments:not(.cm-comments) article p { color: var(--c-text-muted); }
.legacy-page #comments:not(.cm-comments) form { display: grid; gap: 10px; margin-top: 16px; }
.legacy-page #comments:not(.cm-comments) textarea { width: 100%; min-height: 96px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--c-border-strong); background: var(--c-bg); color: var(--c-text); font: inherit; }
.legacy-page #comments:not(.cm-comments) button { justify-self: end; height: 44px; padding: 0 22px; border: 0; border-radius: var(--radius-pill); background: var(--c-accent-strong); color: var(--c-on-accent); font-weight: 700; }
.legacy-page #comments:not(.cm-comments) > a { display: inline-block; margin-top: 12px; color: var(--c-accent-text); font-weight: 600; }
@media (max-width: 640px) { .legacy-page > article.public-container { padding: 22px 18px; } }