:root { --ink:#23332f; --muted:#74817d; --paper:#fffef9; --cream:#f3f1e8; --green:#315d52; --green2:#47786b; --line:#dedfd7; --red:#b9574c; --shadow:0 14px 38px rgba(34,53,47,.11); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--cream); }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 5% 12%,#e5eee8 0,transparent 25%),radial-gradient(circle at 95% 70%,#efe4cf 0,transparent 24%),var(--cream); font-family:"Yu Gothic UI","Hiragino Sans",Meiryo,sans-serif; }
button,input,textarea { font:inherit; }
button { color:inherit; }
.board-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1180px)/2)); border-bottom:1px solid rgba(222,223,215,.8); background:rgba(255,254,249,.9); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:12px 12px 12px 3px; color:white; background:var(--green); font:700 25px Georgia,serif; }
.brand strong { display:block; font:700 22px Georgia,"Yu Mincho",serif; }
.brand small { display:block; margin-top:2px; color:var(--muted); font-size:10px; letter-spacing:.12em; }
.back-link { display:flex; align-items:center; gap:7px; padding:10px 15px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:var(--paper); text-decoration:none; font-size:12px; font-weight:700; }
.back-link:hover { background:#eef2ed; }
main { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:64px 0 80px; }
.board-intro { max-width:720px; margin-bottom:42px; }
.eyebrow { display:block; margin-bottom:10px; color:var(--green2); font-size:10px; font-weight:800; letter-spacing:.18em; }
.board-intro h1 { margin:0; font:700 clamp(38px,6vw,68px)/1.13 Georgia,"Yu Mincho",serif; letter-spacing:.02em; }
.board-intro > p { max-width:650px; margin:20px 0; color:#53635e; font-size:14px; line-height:1.9; }
.local-note { display:inline-flex; align-items:center; gap:10px; padding:11px 15px; border:1px solid #cadbd3; border-radius:12px; color:#385e53; background:#edf5f0; }
.local-note > span:first-child { font-size:20px; }
.local-note strong,.local-note small { display:block; }
.local-note strong { font-size:11px; }
.local-note small { margin-top:2px; color:#658078; font-size:9px; }
.board-layout { display:grid; grid-template-columns:370px 1fr; align-items:start; gap:34px; }
.composer-card { position:sticky; top:24px; padding:25px; border:1px solid rgba(222,223,215,.85); border-radius:20px; background:rgba(255,254,249,.96); box-shadow:var(--shadow); }
.card-heading { display:flex; align-items:center; gap:11px; margin-bottom:23px; }
.card-heading > span { display:grid; place-items:center; width:39px; height:39px; border-radius:11px; color:white; background:var(--green); }
.card-heading h2,.card-heading p { margin:0; }
.card-heading h2 { font:700 19px Georgia,"Yu Mincho",serif; }
.card-heading p { margin-top:2px; color:var(--muted); font-size:9px; }
form > label { display:block; margin:17px 0 8px; font-size:11px; font-weight:800; }
form > label em { color:var(--red); font-size:9px; font-style:normal; }
form > label small { color:var(--muted); font-weight:400; }
.category-picker { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.category-picker input { position:absolute; opacity:0; }
.category-picker span { display:block; padding:9px 7px; border:1px solid var(--line); border-radius:9px; background:#faf9f4; cursor:pointer; font-size:10px; text-align:center; transition:.18s; }
.category-picker input:checked + span { border-color:var(--green); color:var(--green); background:#eaf1ed; font-weight:800; box-shadow:inset 0 0 0 1px var(--green); }
textarea,input[type="text"] { width:100%; border:1px solid var(--line); border-radius:11px; outline:0; color:var(--ink); background:#fbfaf5; }
textarea:focus,input[type="text"]:focus { border-color:var(--green2); box-shadow:0 0 0 3px rgba(71,120,107,.12); }
textarea { min-height:145px; padding:13px; resize:vertical; line-height:1.7; font-size:12px; }
input[type="text"] { height:43px; padding:0 12px; font-size:12px; }
.field-meta { display:flex; justify-content:flex-end; margin-top:4px; color:var(--muted); font-size:9px; }
.submit-button { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:20px; padding:13px 15px; border:0; border-radius:11px; color:white; background:var(--green); cursor:pointer; font-size:12px; font-weight:800; }
.submit-button:hover { background:var(--green2); }
.form-message { min-height:15px; margin:7px 0 0; color:var(--green); font-size:9px; text-align:center; }
.posts-section { min-width:0; }
.posts-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:16px; }
.posts-heading h2 { margin:0; font:700 25px Georgia,"Yu Mincho",serif; }
.posts-heading h2 b { display:inline-grid; place-items:center; min-width:25px; height:25px; padding:0 6px; border-radius:99px; color:white; background:var(--green); font:700 10px sans-serif; vertical-align:3px; }
.filter-buttons { display:flex; gap:4px; padding:3px; border:1px solid var(--line); border-radius:10px; background:rgba(255,254,249,.75); }
.filter-buttons button { padding:7px 9px; border:0; border-radius:7px; background:transparent; cursor:pointer; color:var(--muted); font-size:9px; }
.filter-buttons button.active { color:white; background:var(--green); }
.posts-list { display:grid; gap:11px; }
.post-card { padding:20px; border:1px solid rgba(222,223,215,.9); border-radius:15px; background:rgba(255,254,249,.94); box-shadow:0 5px 18px rgba(34,53,47,.05); }
.post-top { display:flex; align-items:center; justify-content:space-between; }
.post-category { padding:5px 9px; border-radius:99px; font-size:9px; font-weight:800; }
.post-category.idea { color:#866020; background:#fbebc7; }
.post-category.bug { color:#934b43; background:#f5dfdb; }
.post-category.request { color:#315d52; background:#dfece6; }
.post-category.other { color:#586460; background:#e9ebe7; }
.delete-button { width:27px; height:27px; border:0; border-radius:50%; color:#9ba39f; background:transparent; cursor:pointer; font-size:17px; }
.delete-button:hover { color:var(--red); background:#f7e8e5; }
.post-body { margin:14px 0 17px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.8; }
.post-card footer { display:flex; justify-content:space-between; padding-top:11px; border-top:1px solid #ecece5; color:var(--muted); font-size:9px; }
.empty-state { padding:60px 20px; border:1px dashed #cdd2cb; border-radius:16px; color:var(--muted); background:rgba(255,254,249,.45); text-align:center; }
.empty-state span { display:block; margin-bottom:9px; font-size:28px; }
.empty-state strong { display:block; color:#52615d; font:700 16px Georgia,"Yu Mincho",serif; }
.empty-state p { margin:7px 0 0; font-size:10px; }
@media (max-width:820px) {
  .board-header { height:64px; padding:0 14px; }
  .brand-mark { width:35px; height:35px; font-size:20px; }
  .brand strong { font-size:18px; }
  .back-link { padding:9px 11px; font-size:10px; }
  main { width:min(100% - 24px,620px); padding:40px 0 60px; }
  .board-intro { margin-bottom:28px; }
  .board-intro h1 { font-size:40px; }
  .local-note { width:100%; }
  .board-layout { grid-template-columns:1fr; gap:34px; }
  .composer-card { position:static; padding:20px; }
  .posts-heading { align-items:flex-start; flex-direction:column; }
  .filter-buttons { width:100%; }
  .filter-buttons button { flex:1; }
}