/* 게시판(Flask) 화면을 포털과 같은 흰 바탕 + 14px 둥근 흰 패널로. plan §8-5.

   ★ 94KB style.css 를 건드리지 않고 이 한 파일로 덮는다 — 빼면 바로 옛 모습으로 돌아간다.
   ★ 값은 portal-web/light-theme.css 의 패널(흰 바탕·#dfe3e8 테두리·14px·옅은 그림자,
     머리줄 #f6f7f8)과 같다. 강조색은 포털처럼 짙은 먹색(#272a2e).
   ★ 범위는 body.board-page 아래뿐이다(board_base.html 만 이 클래스를 단다). 마이페이지·
     관리자 등 다른 화면은 영향이 없다.
   ★ 레거시 토큰(--key 등)을 이 범위에서만 다시 정한다. 에디터(.ed*)·단추(.btn*)가
     그 토큰을 쓰므로 색만 바뀌고 모양은 그대로다. */
body.board-page{
  --bg:#fff;--surface:#fff;--soft:#f6f7f8;--ink:#272a2e;--sub:#4d5965;--faint:#68727d;
  --key:#272a2e;--key-hover:#111;--key-soft:#f1f3f5;--key-line:#d2d8df;--line:#dfe3e8;
  background:#fff;color:#272a2e;
}
.board-page .shell--portal,.board-page .shell--portal .body{background:#fff}
.board-page .shell--portal .body__in{max-width:1180px;padding:20px 20px 40px}

/* ── 패널 ── */
.board-page main .card{background:#fff;border:1px solid #dfe3e8;border-radius:14px;box-shadow:0 4px 16px #18202a0d;overflow:hidden}
.board-page main .card__hd{background:#f6f7f8;border-bottom:1px solid #dfe3e8;padding:14px 20px;font-size:16px;font-weight:750;color:#272a2e}
.board-page main .card__hd small{color:#68727d;font-weight:500}
.board-page main .card__bd{padding:18px 20px}
.board-page main .card__bd--flush{padding:0}
.board-page .hero:not(.guild-hero){background:#fff;border:1px solid #dfe3e8;border-radius:14px;padding:20px 22px;box-shadow:none}
.board-page .hero__t{font-size:24px;color:#272a2e}
.board-page .hero__s{color:#68727d;font-size:13px}
.board-page .crumb a{color:#4d5965}

/* ── 목록 ── 작성일을 눈에 띄게: 진한 글자 + 고정폭 숫자 */
.board-page .posts__hd{background:#f6f7f8;color:#68727d}
.board-page .posts__row{border-color:#e6e9ed}
.board-page .posts__row:hover{background:#f6f7f8}
.board-page .posts__row:hover .posts__t{color:#111}
.board-page .posts__when{color:#272a2e;font-weight:650;font-size:12.5px}
.board-page .posts__when time{white-space:nowrap}
.posts__type,.post__type{display:inline-flex;align-items:center;margin-right:6px;padding:1px 7px;border:1px solid #d2d8df;border-radius:999px;background:#f6f7f8;color:#4d5965;font-size:11.5px;font-weight:650;line-height:1.6;vertical-align:1px;white-space:nowrap}
.posts__sum{display:block;margin-top:3px;color:#68727d;font-size:12.5px;font-weight:400;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-page .post-filter{display:flex;flex-wrap:wrap;gap:6px}
.board-page .post-filter .btn{border-radius:999px}
.board-page .pager__i{border-radius:8px}
.board-page .pager__i.is-on{background:#272a2e;border-color:#272a2e;color:#fff}
.board-page .post-board-footer .posts__row.is-current{background:#f1f3f5}

/* ── 본문 ── 날짜는 제목 바로 아래 큰 글씨(plan §5) */
.post__date{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:8px 0 0;color:#272a2e;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.board-page .post__date small{margin-left:0;color:#68727d;font-size:12.5px;font-weight:500}
.board-page .editorial-post .post__hd{background:#fff;border-bottom:0;padding:24px 28px 6px;display:block}
.board-page .editorial-post .post__t{font-size:24px}
.board-page .editorial-post .post__meta{margin:0;padding:0 28px 14px;color:#68727d;font-size:12.5px;border-bottom:1px solid #e6e9ed}
.post__who a{color:inherit;text-decoration:none}
.post__who a:hover b{text-decoration:underline}
.post__guide{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0}
.post__subject{color:#4d5965;font-size:13px;font-weight:600}
.post__summary{margin:0 0 18px;padding:12px 16px;border:1px solid #e6e9ed;border-left:3px solid #272a2e;border-radius:10px;background:#f6f7f8;color:#272a2e;font-size:14px;line-height:1.7;white-space:pre-line}
.post__summary b{display:block;margin-bottom:2px;font-size:12px;color:#68727d}
.post__tags{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0;list-style:none}
.post__tags a{display:inline-flex;align-items:center;min-height:30px;padding:2px 10px;border:1px solid #dfe3e8;border-radius:999px;background:#fff;color:#4d5965;font-size:12.5px;text-decoration:none}
.post__tags a:hover{background:#f1f3f5;color:#111}
.post__ownnote{margin:0;color:#68727d;font-size:13px}
.board-page .recommendation-button{border-color:#272a2e;color:#272a2e}
.board-page .recommendation-button:hover,.board-page .recommendation-button.is-voted{background:#272a2e;color:#fff}
.board-page .cmts .cmt{border-color:#e6e9ed}

/* ── 글쓰기 공략 칸 ── */
.gfields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;margin:0 0 4px;padding:14px 16px;border:1px solid #e6e9ed;border-radius:12px;background:#f9fafb}
.gfields .field{margin:0}
.gfields__wide{grid-column:1/-1}
/* editorial-write 의 .field__input 은 제목용 큰 글씨(32px·밑줄)다 — 공략 칸은 보통 입력칸으로 되돌린다 */
.editorial-write .gfields .field{gap:6px}
.editorial-write .gfields .field__input{height:40px;padding:0 11px;border:1px solid #d2d8df;border-radius:8px;background:#fff;color:#272a2e;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:normal}
.editorial-write .gfields .field__input:focus{border-color:#272a2e}
.editorial-write .gfields .field__area{border:1px solid #d2d8df;border-radius:8px;background:#fff;font-size:14px}
.gfields select.field__input{appearance:auto}
.gfields .field__label small{color:#68727d;font-weight:500}
.field__req{color:#c0392b;font-weight:700;margin-left:2px}

/* ── 새 화면(검색·프로필·요청) ── */
.blist{list-style:none;margin:0;padding:0}
.blist__i{display:block;padding:12px 20px;border-bottom:1px solid #e6e9ed;color:#272a2e;text-decoration:none}
.blist__i:last-child{border-bottom:0}
a.blist__i:hover{background:#f6f7f8}
.blist__t{display:block;font-size:14.5px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
.blist__m{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:3px;color:#68727d;font-size:12.5px}
.blist__m time{color:#272a2e;font-weight:650}
.bsearch{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bsearch .field__input{flex:1 1 220px;min-width:0}
.bsearch select.field__input{flex:0 0 auto;width:auto}
.prof{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.prof__ava{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#f1f3f5;color:#272a2e;font-size:26px;font-weight:700;overflow:hidden;flex:none}
.prof__ava img{width:100%;height:100%}
.prof__nick{margin:0;font-size:22px;font-weight:800;color:#272a2e;overflow-wrap:anywhere}
.prof__stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 0;padding:0;list-style:none;color:#68727d;font-size:13px}
.prof__stats b{color:#272a2e;font-size:15px;margin-right:3px}
.prof__slots{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.prof__slot{padding:2px 9px;border:1px dashed #d2d8df;border-radius:999px;color:#9aa3ad;font-size:12px}
.breq__list{list-style:none;margin:0;padding:0}
.breq__i{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;padding:10px 0;border-bottom:1px solid #e6e9ed;font-size:13.5px}
.breq__i:last-child{border-bottom:0}
.breq__game{margin:2px 0 4px;font-size:18px;font-weight:800;color:#272a2e}
.blist__m .link+.link{margin-left:10px}
.breq__st{color:#68727d;font-size:12.5px}

@media(max-width:760px){
  .board-page .shell--portal .body__in{padding:12px 12px 32px}
  .board-page main .card__hd{padding:12px 14px;font-size:15px}
  .board-page main .card__bd{padding:14px}
  .board-page .editorial-post .post__hd{padding:18px 16px 4px}
  .board-page .editorial-post .post__t{font-size:20px}
  .board-page .editorial-post .post__meta{padding:0 16px 12px}
  .gfields{grid-template-columns:minmax(0,1fr);padding:12px}
  .blist__i{padding:11px 14px}
  .posts__sum{white-space:normal}
  /* 좁은 화면: 머리띠는 짧게, 분류 칩 9개는 줄바꿈 대신 가로로 민다 */
  .board-page .hero:not(.guild-hero){padding:14px 16px}
  .board-page .hero__t{font-size:19px}
  .board-page .post-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  .board-page .post-filter::-webkit-scrollbar{display:none}
  .board-page .post-filter .btn{flex:none}
}