/* 자유 게시판 — 스타일 (커뮤니티 게시판 표 형태 · 딸깍 개발실 다크 톤) */
:root {
  /* shared/theme.css 가 --bg,--panel,--panel2,--border,--accent,--accent2,--success,--warn,--text2,--text3 공급(라이트/다크) */
  --text1: var(--text); --err: var(--danger); --toolbar: var(--bg2);
  --r:8px; --tph:40px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; min-height:100%; }
body { background:var(--bg); color:var(--text1); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }

/* topbar */
.topbar { position:fixed; top:0; left:0; right:0; height:var(--tph); background:var(--toolbar); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 12px; z-index:100; gap:8px; }
.tb-left,.tb-right { display:flex; align-items:center; gap:6px; }
.home-link { display:flex; align-items:center; gap:5px; padding:5px 9px; border-radius:6px; color:var(--text2); text-decoration:none; font-size:11px; font-weight:600; background:rgba(74,158,255,0.06); border:1px solid rgba(74,158,255,0.18); transition:all .15s; white-space:nowrap; }
.home-link:hover { background:rgba(74,158,255,0.14); border-color:var(--accent); color:var(--accent2); }
.sep { width:1px; height:18px; background:var(--border); margin:0 2px; }
.logo { display:flex; align-items:center; gap:6px; color:var(--accent); font-weight:700; font-size:13px; white-space:nowrap; }
.tbtn { background:none; border:1px solid var(--border); cursor:pointer; color:var(--text2); padding:5px 10px; border-radius:6px; font-size:12px; font-family:inherit; transition:all .12s; white-space:nowrap; }
.tbtn:hover { background:var(--bg2); color:var(--text1); border-color:var(--accent); }
.admin-badge { font-size:11px; font-weight:700; color:var(--warn); background:rgba(255,184,74,0.12); border:1px solid rgba(255,184,74,0.3); padding:4px 9px; border-radius:999px; }

.wrap { max-width:880px; margin:0 auto; padding:calc(var(--tph) + 18px) 16px 60px; }

/* list bar */
.list-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.board-title { font-size:18px; font-weight:700; margin:0; }
.board-count { font-size:13px; color:var(--text3); font-weight:400; margin-left:6px; }
.list-actions { display:flex; gap:8px; align-items:center; }
.sel { background:var(--bg); border:1px solid var(--border); color:var(--text1); border-radius:6px; padding:7px 9px; font-size:13px; font-family:inherit; cursor:pointer; }
.sel:focus { outline:none; border-color:var(--accent); }

/* board table */
.board-table { width:100%; border-collapse:collapse; border-top:2px solid var(--accent); }
.board-table thead th { font-size:12px; color:var(--text2); font-weight:600; padding:10px 8px; border-bottom:1px solid var(--border); background:var(--panel); text-align:center; }
.board-table th.c-title { text-align:left; padding-left:14px; }
.board-table td { padding:11px 8px; border-bottom:1px solid var(--border); font-size:13.5px; text-align:center; color:var(--text2); }
.c-num { width:64px; color:var(--text3); font-size:12.5px; }
.c-title { text-align:left !important; padding-left:14px !important; }
.c-author { width:110px; }
.c-date { width:96px; color:var(--text3); font-size:12px; }
.brow { cursor:pointer; transition:background .1s; }
.brow:hover { background:var(--panel2); }
.brow:hover .bt-subject { color:var(--accent2); }
.bt-subject { color:var(--text1); font-weight:500; }
.bt-cmt { color:var(--accent2); font-weight:700; font-size:12.5px; margin-left:6px; }
.bt-edited { color:var(--text3); font-size:10.5px; border:1px solid var(--border); border-radius:3px; padding:0 4px; margin-left:6px; vertical-align:middle; }
.empty { text-align:center; color:var(--text3); padding:50px 16px; font-size:14px; border-bottom:1px solid var(--border); }

/* pagination */
.pager { display:flex; justify-content:center; gap:4px; margin-top:18px; flex-wrap:wrap; }
.pg { min-width:32px; height:32px; background:var(--bg); border:1px solid var(--border); color:var(--text2); border-radius:6px; cursor:pointer; font-size:13px; font-family:inherit; padding:0 8px; }
.pg:hover:not(:disabled) { border-color:var(--accent); color:var(--accent2); }
.pg.on { background:var(--accent); color:#0a0a0a; border-color:var(--accent); font-weight:700; }
.pg:disabled { opacity:.35; cursor:default; }

/* detail */
.post { border-top:2px solid var(--accent); }
.post-subject { font-size:20px; font-weight:700; margin:0; padding:16px 4px 12px; line-height:1.4; word-break:break-all; border-bottom:1px solid var(--border); }
.post-info { display:flex; gap:14px; align-items:center; padding:11px 4px; border-bottom:1px solid var(--border); font-size:12.5px; background:var(--panel); }
.post-author { color:var(--accent2); font-weight:600; }
.post-date { color:var(--text3); }
.post-cmtn { color:var(--text3); margin-left:auto; }
.post-content { font-size:14.5px; line-height:1.85; color:var(--text1); white-space:pre-wrap; word-break:break-word; padding:22px 4px; min-height:80px; }
.post-tools { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid var(--border); }
.post-tools .tools-right { display:flex; gap:8px; }

/* comments */
.comments { margin-top:24px; }
.cmt-h { font-size:14px; font-weight:700; color:var(--accent2); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.cmt-count { color:var(--text3); font-weight:400; }
.cmt-list { display:flex; flex-direction:column; gap:0; margin-bottom:16px; }
.cmt-item { padding:11px 0; border-bottom:1px solid var(--border); }
.cmt-item.cmt-reply { border-left:2px solid var(--border); padding-left:12px; background:rgba(255,255,255,0.012); }
.cmt-top { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.cmt-author { font-size:12.5px; font-weight:600; color:var(--text2); }
.cmt-reply-mark { color:var(--accent2); font-size:11px; margin-right:2px; }
.cmt-date { font-size:11px; color:var(--text3); }
.cmt-actions { margin-left:auto; display:flex; gap:4px; }
.cmt-reply-btn,.cmt-del { background:none; border:none; cursor:pointer; font-size:11.5px; padding:2px 6px; border-radius:4px; font-family:inherit; }
.cmt-reply-btn { color:var(--text3); }
.cmt-reply-btn:hover { color:var(--accent2); background:var(--panel2); }
.cmt-del { color:var(--text3); }
.cmt-del:hover { color:var(--err); background:rgba(255,107,107,0.1); }
.cmt-content { font-size:13.5px; color:var(--text1); line-height:1.65; white-space:pre-wrap; word-break:break-word; }
.cmt-content.cmt-deleted { color:var(--text3); font-style:italic; }
.post-content a, .cmt-content a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; word-break:break-all; }
.post-content a:hover, .cmt-content a:hover { opacity:.8; }
.cmt-reply-form { margin-top:10px; padding:11px 12px; background:var(--panel); border:1px solid var(--border); border-radius:7px; }
.cmt-form { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; margin-top:6px; }
.cmt-row { display:flex; gap:8px; margin-bottom:8px; }
.cmt-row .inp { flex:1; }
.cmt-submit { text-align:right; margin-top:8px; display:flex; gap:6px; justify-content:flex-end; }

/* editor */
.editor-h { font-size:18px; font-weight:700; margin:0 0 16px; border-bottom:2px solid var(--accent); padding-bottom:12px; }
.editor-form { display:flex; flex-direction:column; gap:14px; }
.fld { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text2); font-weight:600; }
.editor-actions { display:flex; gap:8px; justify-content:flex-end; }

/* inputs */
.inp,.ta { background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text1); padding:9px 11px; font-size:14px; font-family:inherit; width:100%; }
.inp:focus,.ta:focus { outline:none; border-color:var(--accent); }
.ta { resize:vertical; line-height:1.6; }
.hint { color:var(--text3); font-size:11px; font-weight:400; }

/* buttons */
.btn-primary { background:var(--accent); color:#0a0a0a; border:none; border-radius:7px; padding:9px 18px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; }
.btn-primary:hover:not(:disabled) { background:var(--accent2); }
.btn-primary:disabled { opacity:.6; cursor:default; }
.btn-primary.sm { padding:6px 14px; font-size:12.5px; }
.btn-ghost { background:var(--panel2); color:var(--text1); border:1px solid var(--border); border-radius:7px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent2); }
.btn-ghost.sm { padding:6px 12px; font-size:12.5px; }
.btn-danger { background:rgba(255,107,107,0.1); color:var(--err); border:1px solid rgba(255,107,107,0.3); border-radius:7px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-danger:hover { background:rgba(255,107,107,0.18); }

/* status */
.status { margin:14px 0 0; padding:11px 14px; border-radius:8px; font-size:13px; }
.status-info { background:rgba(74,158,255,0.1); border:1px solid rgba(74,158,255,0.3); color:var(--accent2); }
.status-ok { background:rgba(92,215,92,0.1); border:1px solid rgba(92,215,92,0.3); color:var(--success); }
.status-error { background:rgba(255,107,107,0.1); border:1px solid rgba(255,107,107,0.35); color:var(--err); }

.foot { text-align:center; color:var(--text3); font-size:11.5px; padding:24px 16px 40px; }

@media (max-width:560px) {
  .c-num { display:none; }
  .c-author { width:74px; font-size:12px; }
  .c-date { width:64px; }
  .cmt-row { flex-direction:column; }
}

/* 업데이트 안내 전용 추가 (v1.0.0) */
.board-lead { color: var(--text3, #8a93a3); font-size: 13px; margin: 2px 0 14px; }
.bt-pin { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent, #4a9eff); border-radius: 4px; padding: 1px 6px; margin-right: 6px; vertical-align: middle; }
.fld-check { flex-direction: row; align-items: center; gap: 8px; }
.fld-check input { width: auto; }