:root {
  --bg: #efe9dd;
  --card: #fffdf7;
  --ink: #2c2a26;
  --muted: #6b675f;
  --accent: #7d6b4f;
  --danger: #a33;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.5;
}

/* ---------- Board header ---------- */
.board-header { text-align: center; padding: 3rem 1rem 1rem; }
.board-header .portrait {
  width: 160px; height: 160px; object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--card);
  box-shadow: 0 4px 14px rgba(60,50,30,.25);
  margin-bottom: 1.2rem;
}
.board-header h1 { font-weight: normal; font-size: 2.2rem; margin: 0 0 .3rem; letter-spacing: .5px; }
.board-header .subtitle { font-size: 1.4rem; font-style: italic; margin: 0 0 .2rem; }
.board-header .dates { color: var(--muted); margin: 0 0 .8rem; }
.board-header .welcome { max-width: 34rem; margin: 0 auto; color: var(--muted); }

/* ---------- Compose form ---------- */
.compose { max-width: 34rem; margin: 1.5rem auto 2.5rem; padding: 0 1rem; }
.compose form {
  background: var(--card);
  padding: 1.2rem;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(60,50,30,.12);
  display: flex; flex-direction: column; gap: .7rem;
}
.compose input[type=text], .compose textarea {
  font: inherit; padding: .6rem .7rem;
  border: 1px solid #d8d1c2; border-radius: 4px; background: #fffefb;
  width: 100%;
}
.compose textarea { resize: vertical; }
.compose .hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.compose-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.photo-label { color: var(--accent); cursor: pointer; text-decoration: underline; }
.photo-label input { display: none; }
.photo-preview {
  display: flex; align-items: center; gap: .8rem;
}
.photo-preview[hidden] { display: none; }
.photo-preview img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 4px; border: 1px solid #d8d1c2;
}
.remove-photo {
  background: none; border: none; color: var(--danger);
  text-decoration: underline; padding: 0; font-size: .9rem;
}
button {
  font: inherit; cursor: pointer;
  background: var(--accent); color: #fff;
  border: none; border-radius: 4px; padding: .55rem 1.1rem;
}
button:disabled { opacity: .6; cursor: wait; }
.form-error { color: var(--danger); margin: 0; }
.posting-closed {
  background: var(--card);
  padding: 1.2rem;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(60,50,30,.12);
  text-align: center;
  color: var(--muted);
  margin: 0;
}

/* ---------- Admin posting toggle ---------- */
.posting-toggle {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--card);
  padding: .8rem 1.2rem;
  border-radius: 6px;
  margin-top: 1.2rem;
  box-shadow: 0 2px 8px rgba(60,50,30,.1);
}
.posting-state.on::before  { content: '● '; color: #4a7c40; }
.posting-state.off::before { content: '● '; color: var(--danger); }
.posting-toggle form { margin: 0; }
.bar-divider { flex: 1; }
.active-users { font-size: .9rem; color: var(--muted); }
.active-users::before { content: '👁 '; }
.server-load { font-size: .9rem; color: var(--muted); }
.server-load.load-ok::before   { content: '● '; color: #4a7c40; }
.server-load.load-warm::before { content: '● '; color: #c28e0e; }
.server-load.load-hot::before  { content: '● '; color: var(--danger); }
.interval-form { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--muted); }
.interval-form select { font: inherit; padding: .3rem .4rem; border: 1px solid #d8d1c2; border-radius: 4px; background: #fffefb; }
.interval-form button { padding: .3rem .7rem; font-size: .85rem; }

/* ---------- Cards / notice board ---------- */
.board {
  columns: 4 240px;
  column-gap: 1.2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.2rem 3rem;
}
.card {
  position: relative;
  break-inside: avoid;
  background: var(--card);
  margin: 0 0 1.2rem;
  padding: 1rem 1rem .8rem;
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(60,50,30,.18);
  transform: rotate(var(--tilt, 0deg));
}
.pin {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9b98a, #8f6f3f);
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
}
.card-photo { width: 100%; border-radius: 2px; margin-bottom: .6rem; }
.card-message { margin: 0 0 .6rem; white-space: pre-wrap; overflow-wrap: break-word; }
.card-footer { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--muted); }
.card-author { font-style: italic; }

.loading, .end-note { text-align: center; color: var(--muted); padding: 1rem 0 3rem; }

/* ---------- Lightbox ---------- */
.card-photo { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 17, 12, .92);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 96vw; max-height: 96vh;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.lightbox-close {
  position: absolute; top: .8rem; right: 1rem;
  background: none; border: none; color: #fff;
  font-size: 2.4rem; line-height: 1; padding: .2rem .5rem;
  cursor: pointer; z-index: 101;
}

/* ---------- Login ---------- */
.login-box { max-width: 20rem; margin: 15vh auto; background: var(--card); padding: 2rem; border-radius: 6px; box-shadow: 0 2px 10px rgba(60,50,30,.12); }
.login-box h1 { font-size: 1.3rem; font-weight: normal; margin-top: 0; }
.login-box form { display: flex; flex-direction: column; gap: .7rem; }
.login-box input { font: inherit; padding: .6rem .7rem; border: 1px solid #d8d1c2; border-radius: 4px; }

/* ---------- Admin ---------- */
.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.admin-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.admin-header h1 { font-weight: normal; margin: 0; }
.admin-header nav { display: flex; gap: 1.2rem; align-items: center; }
.admin-header a { color: var(--accent); }
.btn-book { background: var(--accent); color: #fff !important; padding: .5rem .9rem; border-radius: 4px; text-decoration: none; }
.settings-panel { background: var(--card); border-radius: 6px; padding: 1rem 1.2rem; margin: 1.2rem 0; box-shadow: 0 2px 8px rgba(60,50,30,.1); }
.settings-panel summary { cursor: pointer; color: var(--accent); }
.settings-panel form { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; max-width: 34rem; }
.settings-panel label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
.settings-panel input, .settings-panel textarea { font: inherit; padding: .5rem .6rem; border: 1px solid #d8d1c2; border-radius: 4px; }
.settings-panel button { align-self: flex-start; }
.settings-portrait-preview {
  width: 90px; height: 90px; object-fit: cover; border-radius: 50%;
  border: 2px solid #d8d1c2;
}
.admin-count { color: var(--muted); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(60,50,30,.1); }
.admin-table th, .admin-table td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid #eee7d8; vertical-align: top; }
.admin-table th { background: #f5efe3; font-weight: normal; color: var(--muted); }
.row-hidden { opacity: .45; }
.row-new { animation: rownew 3s ease-out; }
@keyframes rownew {
  from { background: #f3e9c8; }
  to   { background: transparent; }
}
.msg-cell { max-width: 28rem; }
.nowrap { white-space: nowrap; }
.admin-thumb { width: 70px; height: 70px; object-fit: cover; border-radius: 3px; }
.actions { white-space: nowrap; }
.actions form { display: inline-block; margin-right: .3rem; }
.actions button { padding: .3rem .7rem; font-size: .85rem; }
.actions .danger { background: var(--danger); }

/* ---------- Flash ---------- */
.flash-wrap { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 10; }
.flash { background: var(--ink); color: #fff; padding: .6rem 1.2rem; border-radius: 4px; margin-bottom: .5rem; box-shadow: 0 3px 10px rgba(0,0,0,.25); }

@media (max-width: 600px) {
  .board { columns: 2 150px; column-gap: .8rem; padding: 0 .8rem 2rem; }
  .board-header h1 { font-size: 1.7rem; }
}