/* 게시판 모달 — 제보·개선 요청 창구. 계획: docs/plans/GAME_BOARD_PLAN.md
 *
 * 설정 모달(.gs-*)과 같은 뼈대를 쓰되 폭만 넓다(목록·본문·댓글이 한 창에 들어간다).
 * 색·테두리·그림자는 style.css 의 변수와 픽셀아트 규약을 그대로 따른다.
 *
 * 🔴 `hidden` **속성은 author 의 display 선언에 진다**(UA 스타일시트라 특정도 0).
 *    그래서 display 를 주는 클래스는 [hidden] 을 하나하나 다시 막아야 한다 —
 *    style.css 의 `.gs-modal[hidden]` 목록과 같은 이유다(2026-08-27 제보).
 *    이 파일에서 display 를 주면서 hidden 을 쓰는 것들은 아래 한 줄에 모아 둔다.
 */

/* 🔴 **반응형 자**(2026-09-07) — 좁은 화면일수록 여백을 줄여 내용에 자리를 내준다.
 *    글자 크기는 **여기서 줄이지 않는다.** 이 게임의 글꼴(Galmuri)은 비트맵 픽셀 글꼴이라
 *    설계 크기(9·11px) 사이의 어중간한 값에서 획이 뭉갠다. 좁은 화면에서 벌 수 있는 자리는
 *    글자가 아니라 **여백·간격**에 있다 — 아래 네 값이 그 전부다.
 *      --board-inset    : 모달 바깥 여백 (창 높이 계산이 이 값에 묶여 있다)
 *      --board-pad      : 머리·본문·도구줄·쪽번호의 좌우 안여백
 *      --board-gap      : 도구줄 칩 사이 간격
 *      --board-chip-pad : 칩 좌우 안여백
 *    320px 기기에서 도구줄 한 줄이 ~56px 짧아진다(칩 6개 + 글쓰기 기준). */
.board-modal{--board-inset:clamp(6px,2.5vw,12px);
  position:fixed;inset:0;z-index:360;display:flex;align-items:center;justify-content:center;
  padding:var(--board-inset);background:rgba(10,7,4,.78)}

/* ⚠️ display 를 주는 클래스 + hidden 을 쓰는 것들 — 여기 한 줄에 모은다. 새로 만들면 추가할 것. */
.board-modal[hidden],.board-view[hidden],.board-empty[hidden],.board-pager[hidden],
.board-pinned[hidden],.board-images[hidden],.board-comment-form[hidden],
.board-report[hidden],.board-compose-images[hidden],.board-badge[hidden],
.board-notice-flag[hidden],.board-admin-note[hidden],.board-confirm[hidden]{display:none}

.board-dialog{--board-pad:clamp(8px,3vw,12px);--board-gap:clamp(4px,1.2vw,6px);
  --board-chip-pad:clamp(6px,2vw,9px);
  width:100%;max-width:560px;
  /* 높이는 바깥 여백에 묶여 있다 — 둘 중 하나만 고치면 창이 화면을 넘거나 뜬다. */
  height:calc(100dvh - var(--board-inset) * 2);max-height:calc(100dvh - var(--board-inset) * 2);
  display:flex;flex-direction:column;background:var(--panel);border:3px solid var(--line);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06),6px 6px 0 rgba(0,0,0,.5)}
.board-dialog:focus{outline:none}

/* 🔴 **높이 사슬** — board.js 가 그리는 껍데기다. 여기서 flex 를 끊으면 안쪽 `.board-body` 의
 *    `flex:1;overflow-y:auto` 가 죽고(부모가 flex 컨테이너가 아니면 무효), 내용이 자라는 대로
 *    창을 밀어내 **모달이 화면을 벗어난다**(2026-09-03 제보). min-height:0 도 같이 있어야 한다 —
 *    flex 항목의 자동 최소 높이는 내용 높이라서, 없으면 줄어들지 못해 똑같이 넘친다. */
.board-dialog>[data-board-content]{flex:1;min-height:0;display:flex;flex-direction:column}

.board-head{flex:none;display:flex;align-items:center;gap:8px;padding:10px var(--board-pad);
  border-bottom:2px solid var(--line)}
.board-title{flex:1;min-width:0;font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;color:var(--gold);text-shadow:2px 2px 0 var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-back,.board-close{flex:none;min-width:30px;min-height:26px;padding:0 7px;border:2px solid var(--line);
  background:#34291f;color:#d9d4c9;font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;cursor:pointer}
.board-back:hover,.board-close:hover{background:#453528;color:var(--gold)}
.board-back:focus-visible,.board-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.board-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:10px var(--board-pad) calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px}
.board-view{display:flex;flex-direction:column;gap:10px;min-height:0}

/* ── 목록 ─────────────────────────────────────────────────────────────────── */
/* 🔴 **글쓰기 버튼은 가로 스크롤 밖에 있어야 한다**(2026-09-07 제보).
 *    예전에는 칩과 버튼이 한 flex 줄에 있고 버튼만 `margin-left:auto` 로 오른쪽에 붙었다.
 *    그런데 그 줄이 `overflow-x:auto` 였다 — **넘치는 순간 남는 자리가 0 이 되어 auto 마진이
 *    접히고**, 버튼은 칩 뒤에 그대로 이어 붙어 화면 밖으로 밀려 나간다. 칩 6개가 도구줄보다
 *    넓어지는 400px 아래 기기에서 글쓰기 버튼이 통째로 잘려 보이지 않았다.
 *
 *    그래서 칸 둘짜리 grid 로 나눈다: 왼쪽(`minmax(0,1fr)`)만 스크롤하고 오른쪽 버튼은
 *    `auto` 칸이라 **자기 내용만큼 자리를 먼저 확보한다**. 칩 이름은 서버(`/api/board/meta`)가
 *    주므로 나중에 길어져도 이 배치는 깨지지 않는다.
 *    ⚠️ 스크롤을 `.board-filters` 로 옮겼으므로, 도구줄 자체에 overflow 를 다시 주지 말 것 —
 *       주는 순간 버튼이 다시 스크롤 안으로 들어간다. */
.board-toolbar{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:var(--board-gap);padding:8px var(--board-pad);
  border-bottom:2px solid var(--line);background:var(--panel2)}
.board-filters{display:flex;align-items:center;gap:var(--board-gap);
  min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.board-filters::-webkit-scrollbar{display:none}
/* 🔴 꼬리 자리 — 칩이 넘칠 때 **마지막 칩('내 글')의 오른쪽 테두리가 잘려 보이던 것**을
 *    막는다(2026-09-07 제보). 스크롤 컨테이너는 자기 오른쪽 끝에서 내용을 자르는데,
 *    칩 테두리가 딱 그 자리에 걸리면 2px 이 통째로 사라져 '글쓰기 밑에 깔린 것'처럼 보인다.
 *    ⚠️ `padding-right` 로는 안 된다 — flex 스크롤 컨테이너의 끝쪽 padding 은 스크롤
 *       끝에서 무시하는 엔진이 있다. 자리를 차지하는 **빈 항목**이라야 어디서나 남는다. */
.board-filters::after{content:'';flex:none;width:2px}
.board-chip{flex:none;padding:5px var(--board-chip-pad);border:2px solid var(--line);background:#34291f;
  color:var(--muted);font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;cursor:pointer;white-space:nowrap}
.board-chip:hover{background:#453528;color:var(--ink)}
.board-chip[aria-pressed="true"]{background:var(--dirt);color:var(--ink);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.08)}
.board-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* grid 의 `auto` 칸이 오른쪽 끝을 잡아 주므로 `margin-left:auto` 는 필요 없다(있으면 안 된다). */
.board-write{padding:6px clamp(7px,2.6vw,10px);border:2px solid var(--line);
  background:#3c6b4a;color:#eaf7ee;font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;cursor:pointer;white-space:nowrap;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.08)}
.board-write:hover{background:#48805a}
.board-write:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.board-pinned{display:flex;flex-direction:column;gap:6px;padding-bottom:8px;border-bottom:2px dashed var(--dirt-lo)}
.board-list{display:flex;flex-direction:column;gap:6px}

.board-item{width:100%;display:flex;flex-direction:column;gap:5px;padding:9px 10px;border:2px solid var(--line);
  background:var(--panel2);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),inset 2px 2px 0 rgba(255,255,255,.04)}
.board-item:hover{background:#453522}
.board-item:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.board-item.is-notice{background:#3b3220;border-color:var(--gold-lo)}
.board-item.is-hidden{opacity:.55}

.board-item-top{display:flex;align-items:center;gap:5px;min-width:0}
.board-item-title{flex:1;min-width:0;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.4;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.board-item.is-notice .board-item-title{color:var(--gold)}
.board-item-meta{display:flex;align-items:center;gap:6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);flex-wrap:wrap}
.board-item-meta b{color:var(--ink);font-weight:400}

/* 작은 라벨들 — 카테고리·상태·비공개·공지. 색만 다르고 모양은 하나다. */
.board-tag{flex:none;padding:2px 5px;border:2px solid var(--line);background:#241c12;
  font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;color:var(--muted)}
.board-tag.k-bug{color:#ff9c8a;border-color:#5c2d24}
.board-tag.k-report{color:#8fd0ff;border-color:#22405c}
.board-tag.k-idea{color:#9ee6a8;border-color:#255c34}
.board-tag.k-notice{color:#241c12;background:var(--gold);border-color:var(--gold-lo)}
.board-tag.is-private{color:var(--gold);border-color:var(--gold-lo)}
.board-tag.s-answered{color:#9ee6a8}
.board-tag.s-resolved{color:#8fd0ff}
.board-tag.s-wontfix{color:var(--muted)}

/* 안 읽은 댓글 점 — 목록에서 "내 글에 답이 달렸다"를 한눈에. */
.board-dot{flex:none;width:7px;height:7px;background:#d8452f;border:2px solid #241c15}

.board-count{flex:none;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.board-count.has-new{color:#ffb4a6}

.board-empty{padding:22px 12px;text-align:center;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.8;color:var(--muted)}

/* 쪽 번호 줄 — 목록(10건)과 댓글(10건)이 같은 모양을 쓴다. */
.board-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;
  align-self:center;margin-top:4px}
.board-page{min-width:26px;min-height:26px;padding:0 6px;border:2px solid var(--line);
  background:#34291f;color:var(--muted);font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;cursor:pointer}
.board-page:hover:not(:disabled){background:#453528;color:var(--gold)}
.board-page[aria-current="page"]{background:var(--dirt);color:var(--ink);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.08)}
.board-page:disabled{opacity:.4;cursor:default}
.board-page:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.board-page-gap{padding:0 2px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
/* 목록 쪽 번호는 **창 바닥에 붙인다**(스크롤 영역 밖) — 한 쪽이 화면을 꽉 채우므로
 * 끝까지 내려야 버튼이 보이면 다음 쪽이 있는지조차 모른다. 댓글 쪽 번호는 댓글 줄
 * 바로 아래(스크롤 안)에 그대로 둔다. */
.board-pager.is-foot{flex:none;align-self:stretch;margin:0;padding:8px var(--board-pad);
  border-top:2px solid var(--line);background:var(--panel2)}

/* ── 상세 ─────────────────────────────────────────────────────────────────── */
.board-detail-head{display:flex;flex-direction:column;gap:6px;padding-bottom:9px;border-bottom:2px solid var(--line)}
.board-detail-title{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;line-height:1.5;color:var(--gold);word-break:break-word}
.board-detail-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.board-detail-body{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.9;white-space:pre-wrap;word-break:break-word;color:var(--ink)}

.board-images{display:flex;flex-wrap:wrap;gap:6px}
.board-images a{display:block;border:2px solid var(--line);background:#241c12;line-height:0}
.board-images img{display:block;max-width:150px;max-height:150px;width:auto;height:auto;
  /* 사진은 픽셀아트가 아니다 — 전역 image-rendering:pixelated 를 여기서만 되돌린다. */
  image-rendering:auto}

.board-actions{display:flex;flex-wrap:wrap;gap:6px}
.board-act{padding:6px 9px;border:2px solid var(--line);background:#34291f;color:var(--muted);
  font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;cursor:pointer}
.board-act:hover{background:#453528;color:var(--ink)}
.board-act:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.board-act.is-danger{color:#ff9c8a}

/* ── 댓글 ─────────────────────────────────────────────────────────────────── */
.board-comments{display:flex;flex-direction:column;gap:6px;padding-top:9px;border-top:2px solid var(--line)}
.board-comments-title{display:flex;align-items:center;gap:6px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
.board-comments-page{margin-left:auto;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);font-variant-numeric:tabular-nums}
.board-comment{display:flex;flex-direction:column;gap:4px;padding:8px 9px;border:2px solid var(--line);
  background:var(--panel2)}
.board-comment.is-staff{background:#3b3220;border-color:var(--gold-lo)}
.board-comment.is-hidden{opacity:.5}
.board-comment-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.board-comment-who{color:var(--ink)}
.board-comment.is-staff .board-comment-who{color:var(--gold)}
.board-comment-body{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.8;white-space:pre-wrap;word-break:break-word}

.board-comment-form{display:flex;flex-direction:column;gap:6px}
.board-comment-locked{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7;color:var(--muted)}

/* ── 입력 공통 ────────────────────────────────────────────────────────────── */
.board-field{display:flex;flex-direction:column;gap:5px}
.board-label{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted)}
.board-input,.board-textarea{width:100%;padding:8px;border:2px solid var(--line);background:#241c12;
  color:var(--ink);font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1.7}
.board-input:focus,.board-textarea:focus{outline:2px solid var(--gold);outline-offset:-2px}
.board-textarea{resize:vertical;min-height:96px}
.board-counter{align-self:flex-end;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);font-variant-numeric:tabular-nums}
.board-counter.is-over{color:#ff9c8a}

.board-seg{display:flex;gap:5px;flex-wrap:wrap}
.board-seg button{flex:1;min-width:64px;padding:8px 6px;border:2px solid var(--line);background:#34291f;
  color:var(--muted);font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5;cursor:pointer}
.board-seg button[aria-pressed="true"]{background:var(--dirt);color:var(--ink);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.08)}
.board-seg button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.board-seg small{display:block;margin-top:3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;opacity:.8}

.board-submit{padding:11px;border:2px solid var(--line);background:#3c6b4a;color:#eaf7ee;
  font:inherit;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1;cursor:pointer;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.08)}
.board-submit:hover{background:#48805a}
.board-submit:disabled{background:#3a3227;color:var(--muted);cursor:default}
.board-submit:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* 개인정보 경고 — 공개글은 그대로 남의 눈에 보인다. 이 한 줄이 사고를 크게 줄인다. */
.board-warn{padding:8px 9px;border:2px solid var(--gold-lo);background:#3b3220;
  font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7;color:var(--ink)}
.board-warn b{color:var(--gold)}

/* ── 이미지 첨부 ──────────────────────────────────────────────────────────── */
.board-compose-images{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.board-thumb{position:relative;border:2px solid var(--line);background:#241c12;line-height:0}
.board-thumb img{display:block;width:64px;height:64px;object-fit:cover;image-rendering:auto}
.board-thumb-x{position:absolute;top:-7px;right:-7px;width:18px;height:18px;padding:0;
  display:flex;align-items:center;justify-content:center;border:2px solid #241c15;background:#d8452f;
  color:#fff;font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1;cursor:pointer}
.board-attach{width:64px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;border:2px dashed var(--dirt);background:#241c12;color:var(--muted);font:inherit;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;
  line-height:1.3;cursor:pointer;text-align:center}
.board-attach:hover{border-color:var(--gold-lo);color:var(--ink)}
.board-attach:disabled{opacity:.45;cursor:default}
.board-attach:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── 신고 ─────────────────────────────────────────────────────────────────── */
.board-report{display:flex;flex-direction:column;gap:8px;padding:10px;border:2px solid var(--line);
  background:var(--panel2)}
.board-report-title{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold)}

.board-admin-note{padding:7px 9px;border:2px solid var(--gold-lo);background:#3b3220;
  font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6;color:var(--muted)}

.board-loading{padding:22px 12px;text-align:center;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--muted)}

/* 삭제 확인 — 게시판 모달 위에 한 겹 더 덮는다. 글·댓글 삭제는 되돌릴 수 없어서
   즉시 지우지 않고 한 번 더 묻는다. 부모 `.board-modal` 이 position:fixed 라
   inset:0 만으로 대화 전체를 덮는다(대화 안에 넣으면 스크롤에 잘린다). */
.board-confirm{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(10,7,4,.72)}
.board-confirm-box{width:100%;max-width:300px;display:flex;flex-direction:column;gap:10px;padding:14px;
  background:var(--panel);border:3px solid var(--line);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06),6px 6px 0 rgba(0,0,0,.5)}
.board-confirm-title{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--gold)}
.board-confirm-desc{margin:0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.7;color:var(--muted);word-break:break-word}
.board-confirm-actions{display:flex;gap:8px;justify-content:flex-end}

@media(max-width:420px){
  .board-dialog{max-width:none}
  .board-images img{max-width:110px;max-height:110px}
}