.bbs-intro { min-height: 250px; }
.bbs-notice, .bbs-composer, .bbs-threads { padding: 34px 52px; border-bottom: 1px solid var(--line); }
.bbs-notice { background: #f0e5d9; }
.bbs-notice h2, .bbs-composer h2 { margin: 5px 0 12px; font: 500 23px/1.5 "Yu Mincho", serif; }
.bbs-notice p:last-child { max-width: 680px; margin: 0; color: #65625e; font: 13px/1.9 "Yu Mincho", serif; }
.bbs-composer { background: #e9efea; }
.bbs-composer form { display: grid; grid-template-columns: minmax(160px, 230px) 1fr; gap: 14px 20px; }
.bbs-composer label { display: grid; gap: 7px; color: #5f625e; font-size: 12px; }
.bbs-composer label:nth-of-type(2) { grid-column: 1 / -1; }
.bbs-composer input, .bbs-composer textarea, .bbs-reply-form input, .bbs-reply-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #92978f; border-radius: 9px;
  color: var(--ink); background: #fffdf7; font: 13px/1.8 "Yu Mincho", serif;
}
.bbs-composer textarea, .bbs-reply-form textarea { resize: vertical; }
.bbs-submit { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.bbs-submit small { color: #696c66; font-size: 11px; }
.bbs-submit button, .bbs-reply-form button {
  padding: 9px 18px; border: 1px solid #496251; border-radius: 999px;
  color: white; background: #587360; cursor: pointer;
}
.bbs-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bbs-threads { display: grid; gap: 22px; background: #f8f5ed; }
.bbs-thread { padding: 24px 27px; border: 1px solid #aaa69d; border-radius: 5px; background: #fffdf7; box-shadow: 4px 5px 0 rgba(80, 77, 69, .08); }
.bbs-thread > header, .bbs-reply header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.bbs-thread header strong { font: 600 13px "Yu Gothic", sans-serif; }
.bbs-thread header time, .bbs-thread header a { color: #807c75; font: 10px "Courier New", monospace; }
.bbs-thread header a { margin-left: auto; }
.bbs-body { margin-top: 15px; font: 14px/1.9 "Yu Mincho", serif; overflow-wrap: anywhere; }
.bbs-reply { margin: 20px 0 0 34px; padding: 17px 19px; border-left: 2px solid #a8aea7; background: #f1efe8; }
.bbs-reply.is-owner { border-left-color: #587360; background: #e8efe8; }
.bbs-reply.is-owner strong::after { margin-left: 8px; color: #587360; content: "owner"; font: 9px "Courier New", monospace; }
.bbs-reply-form { margin-top: 20px; color: var(--blue); font-size: 11px; }
.bbs-reply-form summary { cursor: pointer; }
.bbs-reply-form form { display: grid; gap: 10px; margin-top: 10px; }
.bbs-reply-form label { display: grid; gap: 6px; color: #5f625e; }
.bbs-reply-form button { justify-self: end; }
.bbs-reply-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bbs-reply-actions small { color: #77736d; }

@media (max-width: 580px) {
  .bbs-notice, .bbs-composer, .bbs-threads { padding: 28px 21px; }
  .bbs-composer form { grid-template-columns: 1fr; }
  .bbs-composer label:nth-of-type(2), .bbs-submit { grid-column: auto; }
  .bbs-submit { align-items: flex-start; flex-direction: column; }
  .bbs-submit button { align-self: flex-end; }
  .bbs-thread { padding: 20px 18px; }
  .bbs-reply { margin-left: 13px; padding: 15px; }
  .bbs-reply-actions { align-items: flex-start; flex-direction: column; }
  .bbs-reply-actions button { align-self: flex-end; }
}

.bbs-notice { background: var(--pink); }
.bbs-composer { background: var(--mint); }
.bbs-composer input, .bbs-composer textarea, .bbs-reply-form input, .bbs-reply-form textarea { border-color: var(--line); background: var(--paper); }
.bbs-submit button, .bbs-reply-form button { border-color: var(--orange-dark); background: var(--orange); }
.bbs-submit button:hover, .bbs-submit button:focus-visible, .bbs-reply-form button:hover, .bbs-reply-form button:focus-visible { background: var(--orange-dark); }
.bbs-threads { background: var(--paper); }
.bbs-thread { border-color: var(--line); background: #fffdf7; box-shadow: 4px 5px 0 rgb(42 159 155 / 10%); }
.bbs-reply { border-left-color: var(--blue); background: var(--mint); }
.bbs-reply.is-owner { border-left-color: var(--orange-dark); background: var(--pink); }
.bbs-reply.is-owner strong::after { color: var(--orange-dark); }