/* Blog list(blogHome.jsp) / post(blogPost.jsp) — FlameAI 새 디자인. tokens.css, common.css 를 전제로 한다.
   hero 구조는 legal.css(약관/개인정보)와 같은 톤으로 맞췄다. */

.fa-blog-page { background: #fff; color: var(--ink); font-family: var(--font-body); }

/* 목록 상단 헤더는 공통 .fa-page-header(common.css) 사용 */

/* ── 게시판 필터(pill) + 관리자 글쓰기 버튼 ── */
.fa-blog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-8) 0 var(--space-6); }
.fa-blog-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fa-blog-filter { display: inline-flex; align-items: center; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--border-soft); color: var(--muted); font-size: .875rem; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, background .15s; white-space: nowrap; }
.fa-blog-filter:hover { border-color: var(--ink); color: var(--ink); }
.fa-blog-filter[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── 카드 그리드 ── */
.fa-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-bottom: var(--space-12); }
@media (max-width: 62rem) { .fa-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .fa-blog-grid { grid-template-columns: 1fr; } }

.fa-blog-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
.fa-blog-card:hover { transform: translateY(-.125rem); border-color: var(--border-soft); }
.fa-blog-card:focus-visible { outline: .1875rem solid var(--brand); outline-offset: .1875rem; }
.fa-blog-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--surface); }
.fa-blog-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .875rem; font-weight: 600; letter-spacing: -.01em; }
.fa-blog-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-6); gap: var(--space-2); }
.fa-blog-card-title { font-size: 1.125rem; font-weight: 700; line-height: 1.45; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.fa-blog-card-summary { font-size: .9375rem; line-height: 1.7; color: var(--muted); margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fa-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: .8125rem; color: var(--muted); }
.fa-blog-meta-sep { width: .1875rem; height: .1875rem; border-radius: 50%; background: var(--border-soft); }
.fa-blog-card .fa-blog-meta { margin-top: var(--space-3); }
.fa-blog-notice { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .75rem; font-weight: 700; }

/* ── 빈 상태 / 페이지 이동 ── */
.fa-blog-empty { text-align: center; padding: 5rem var(--space-4); color: var(--muted); }
.fa-blog-empty strong { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: var(--space-2); }
.fa-blog-empty .fa-btn { margin-top: var(--space-6); }
.fa-blog-pager { display: flex; justify-content: center; gap: var(--space-3); padding-bottom: 6rem; }

/* ── 글 보기 ── */
.fa-post-hero { padding: 7rem 0 4rem; border-bottom: 1px solid var(--line); text-align: center; }
.fa-post-narrow { max-width: 55rem; margin: 0 auto; }
.fa-post-hero h1 { font-size: 4rem; font-weight: 800; letter-spacing: -.045em; line-height: 1.25; margin: 0 0 var(--space-6); word-break: keep-all; }
.fa-post-meta-row { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
.fa-post-meta-row .fa-blog-meta { justify-content: center; font-size: .875rem; }
.fa-post-meta-row .fa-blog-meta a { color: var(--ink); font-weight: 600; text-decoration: none; }
.fa-post-meta-row .fa-blog-meta a:hover { text-decoration: underline; text-underline-offset: .25rem; }
.fa-post-admin { display: flex; gap: var(--space-2); }
.fa-post-admin .fa-btn { padding: .4rem 1rem; font-size: .8125rem; }
.fa-btn-danger-text { color: #b42318; }

.fa-post-body { padding: 4rem 0 2rem; }
.fa-post-content { font-size: 1.0625rem; line-height: 1.9; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.fa-post-content h1, .fa-post-content h2, .fa-post-content h3 { font-weight: 750; letter-spacing: -.025em; line-height: 1.4; margin: 2.5rem 0 1rem; }
.fa-post-content h1 { font-size: 1.75rem; }
.fa-post-content h2 { font-size: 1.5rem; }
.fa-post-content h3 { font-size: 1.25rem; }
.fa-post-content p { margin: 0 0 1.25rem; }
.fa-post-content ul, .fa-post-content ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.fa-post-content li { margin-bottom: .5rem; }
.fa-post-content li::marker { color: var(--brand); }
.fa-post-content a { color: var(--ink); text-decoration: underline; text-underline-offset: .25rem; }
.fa-post-content pre { background: var(--fa-dark-surface); color: var(--fa-dark-text); border-radius: var(--radius); padding: 1.25rem 1.5rem; overflow-x: auto; font-family: var(--font-mono); font-size: .875rem; line-height: 1.7; margin: 0 0 1.5rem; }
.fa-post-content code { font-family: var(--font-mono); background: var(--surface); border: 1px solid var(--line); border-radius: .375rem; padding: .1rem .375rem; font-size: .875em; }
.fa-post-content pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; }
.fa-post-content blockquote { border-left: .25rem solid var(--brand); background: var(--surface); margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; color: var(--muted); }
.fa-post-content hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.fa-post-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1rem 0; }
.fa-post-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9375rem; }
.fa-post-content th, .fa-post-content td { border: 1px solid var(--line); padding: .625rem .875rem; text-align: left; }
.fa-post-content th { background: var(--surface); }

.fa-post-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4); padding: var(--space-6) 0 10rem; border-top: 1px solid var(--line); margin-top: var(--space-12); }

/* ── 댓글 ── */
.fa-post-comments { padding: var(--space-8) 0 6rem; }
.fa-post-comments h2 { font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; margin: 0 0 var(--space-6); }
.fa-post-comments h2 span { color: var(--muted); font-weight: 500; font-size: 1rem; margin-left: var(--space-1); }
.fa-comment-form { margin-bottom: var(--space-8); }
.fa-comment-form label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: var(--space-2); }
.fa-comment-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: .875rem 1rem; font: inherit; font-size: .9375rem; line-height: 1.6; resize: vertical; min-height: 6rem; }
.fa-comment-form textarea:focus { outline: none; border-color: var(--ink); }
.fa-comment-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.fa-comment-replying { font-size: .8125rem; color: var(--muted); }
.fa-comment-login { color: var(--muted); font-size: .9375rem; margin: 0 0 var(--space-8); }
.fa-comment-login a { color: var(--ink); font-weight: 600; }
.fa-comment { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.fa-comment:last-child { border-bottom: none; }
.fa-comment-reply { margin-left: var(--space-8); padding-left: var(--space-4); border-left: .125rem solid var(--line); }
.fa-comment-head { display: flex; align-items: baseline; gap: var(--space-2); }
.fa-comment-author { font-weight: 700; font-size: .9375rem; }
.fa-comment-date { font-size: .8125rem; color: var(--muted); }
.fa-comment-text { margin: var(--space-2) 0 0; font-size: .9375rem; line-height: 1.7; white-space: pre-wrap; color: var(--ink); }
.fa-comment-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.fa-comment-actions button { background: none; border: none; padding: 0; font: inherit; font-size: .8125rem; color: var(--muted); cursor: pointer; }
.fa-comment-actions button:hover { color: var(--ink); }

/* ── 글쓰기/편집(blogWrite.jsp / blogEdit.jsp, 관리자 전용) ──
   에디터·이미지 목록·첨부 영역 세부 스타일은 각 JSP 의 인라인 <style> 에 그대로 있고(색만 토큰으로 교체),
   여기서는 페이지 틀·제목·폼 포커스·버튼만 새 디자인으로 맞춘다. */
.fa-write-page .write-wrap { max-width: 54rem; margin: 0 auto; padding: 3.5rem 0 5rem; }
.fa-write-page .write-title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.25; margin: 0 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.fa-write-page .form-label { color: var(--ink); }
.fa-write-page .form-control { border-color: var(--border-soft); border-radius: var(--radius); }
.fa-write-page .form-control:focus { border-color: var(--ink); box-shadow: none; }
.fa-write-page .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.fa-write-page .fa-write-file-btn { margin-left: var(--space-2); padding: .35rem .9rem; font-size: .8125rem; }

/* ── 오류/안내 상태 ── */
.fa-post-state { text-align: center; padding: 6rem var(--space-4); }
.fa-post-state h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 var(--space-3); }
.fa-post-state p { color: var(--muted); margin: 0 0 var(--space-6); }

@media (max-width: 47.5rem) {
  .fa-post-hero { padding: 5rem 0 2.75rem; }
  .fa-post-body { padding-top: 2.75rem; }
  .fa-post-content { font-size: 1rem; }
  .fa-comment-reply { margin-left: var(--space-4); }
}