/* 플레이어 와글(js/word-board.js): 결말 화면의 입력 칸과 게시판 창 */
/* 와글 로고(assets/wg/logo.svg): 버튼·게시판 제목 앞에 글자 높이에 맞춰 */
.wg-mark { width: 1.35em; height: 1.35em; image-rendering: pixelated; vertical-align: -.3em; margin-right: 4px; }
/* 타이틀 '와글' 버튼: 로고와 글자를 한 줄에, 설명은 아랫줄(.ts-btn은 세로 flex라 그대로면 로고가 한 줄을 차지) */
.ts-btn.word-title { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; column-gap: 5px; }
.ts-btn.word-title small { grid-column: 1 / -1; }
.ts-btn.word-title .wg-mark { grid-column: 2; width: 22px; height: 22px; margin: 0; vertical-align: 0; }
/* 게시판 창 = 게임 속 와글 앱(index.html의 .wg·.wg-post를 그대로 쓰고 탭·공감 버튼만 더한다) */
.wg-board { margin: 0 0 12px; }
.wg-board .wg-tabs { margin-left: auto; }
.wg-board .wg-tabs button { font: inherit; color: inherit; background: none; border: 0; padding: 4px 2px 2px; cursor: pointer; }
.wg-board .wg-tabs button.on { color: var(--wg-ink); box-shadow: inset 0 -3px 0 var(--wg); }
.wg-board .wg-feed { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.wg-board .wg-post p { overflow-wrap: anywhere; }
.wg-board .wg-acts { align-items: center; }
.word-like, .word-more { font: inherit; color: var(--wg-mute); background: none; border: 0; padding: 2px 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.word-like b { color: var(--wg-ink); font-weight: 700; } .word-like.on, .word-like.on b { color: #E0245E; }
.word-more { margin-left: auto; font-weight: 800; letter-spacing: 1px; }
.wg-empty { margin: 0; padding: 26px 18px; text-align: center; color: var(--wg-mute); font-size: 13.5px; }
/* 결말 화면 글쓰기 창 = 게임 속 와글 글쓰기 칸(.wg-compose·.wg-cfoot·.wg-post-btn을 그대로 쓴다) */
.wg-write { margin: 8px 0 10px; }
.wg-write .wg-sub { margin-left: auto; color: var(--wg-mute); font-size: 12px; }
.wg-write .wg-compose { border-bottom: 0; }
.wg-input { width: 100%; min-height: 52px; resize: none; border: 0; outline: 0; padding: 0; background: none; color: var(--wg-ink); font-family: inherit; font-size: 16px; line-height: 1.55; word-break: keep-all; }
.wg-input::placeholder { color: var(--wg-mute); }
.wg-write .wg-compose:focus-within { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wg) 45%, transparent); border-radius: 0 0 22px 22px; }
.wg-write .wg-post.mine { border-bottom: 0; animation: none; }
/* 운영자 고정 글(패치노트): 와글 색으로 살짝 칠하고 로고 프로필, '공식' 배지와 고정 표시 */
.wg-post.wg-pin { background: color-mix(in srgb, var(--wg) 8%, transparent); }
.wg-pin .wg-av.op { background: var(--wg-soft); }
.wg-pin .wg-av.op .wg-mark { width: 26px; height: 26px; margin: 0; vertical-align: 0; }
.wg-pin .wg-badge.op { background: color-mix(in srgb, var(--wg) 78%, #000); color: #fff; }
.wg-pin .wg-pb p + p { margin-top: 4px; }
.wg-pinmark { margin-left: auto; color: var(--wg-mute); font-size: 12px; font-weight: 700; }