/* マホロバ学校の黒板掲示板。school-bbs.js と対。見た目はDots試作v0.3を引き継ぐ。 */
:root{
  --bb-slate:#173f37;--bb-slate-deep:#10352e;--bb-chalk:#f3f1dc;--bb-chalk-soft:#d0dbcf;--bb-yellow:#f4df9c;--bb-sky:#b6d9df;--bb-mint:#b4dabc;--bb-pink:#e9c3b8;
  --bb-wood:#9d724a;--bb-wood-light:#bf9263;--bb-wood-dark:#5f3a25;--bb-meta:#bdcfc4;
}
.bb-round{font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Hiragino Sans",sans-serif}
.bb-board{position:relative;isolation:isolate;overflow:hidden;color:var(--bb-chalk);border:12px ridge var(--bb-wood-light);outline:2px solid #714c30;border-radius:5px;box-shadow:inset 0 0 0 3px #0005,inset 0 0 25px #0006,0 24px 60px #3c2f2347;background:radial-gradient(ellipse at 19% 13%,#daecd409 0,transparent 42%),repeating-linear-gradient(104deg,transparent 0,#ffffff02 2px,transparent 4px,transparent 18px),var(--bb-slate);padding:clamp(22px,4vw,42px) clamp(18px,4vw,44px) clamp(20px,3vw,30px)}
.bb-ledge{height:12px;margin:0 5%;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#7a5536,#5a3d26);box-shadow:0 6px 10px #0005}
.bb-eyebrow{margin:0;display:flex;align-items:center;gap:12px;color:var(--bb-yellow);font-size:11px;font-weight:800;letter-spacing:.24em}
.bb-eyebrow::before{content:"";width:30px;height:2px;background:var(--bb-yellow)}
.bb-board-title,.bb-title,.bb-thread-title{margin:12px 0 6px;font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Hiragino Sans",sans-serif;font-weight:800;letter-spacing:.06em;line-height:1.45;color:var(--bb-chalk);text-shadow:0 0 9px #f6f4d130;word-break:auto-phrase}
.bb-board-title{font-size:clamp(24px,3.6vw,34px)}
.bb-title{font-size:clamp(28px,5vw,44px)}
.bb-title::after,.bb-board-title::after{content:"";display:block;margin-top:8px;max-width:420px;border-top:3px solid #f5f0da94;border-radius:80% 20% 35% 50%;transform:rotate(-.5deg)}
.bb-thread-title{font-size:clamp(22px,3.6vw,30px)}
.bb-lead{max-width:680px;margin:16px 0 14px;font-size:14px;line-height:2;color:var(--bb-chalk-soft)}
.bb-host{max-width:720px;margin:0 0 20px;padding:12px 15px;border-left:3px solid var(--bb-yellow);background:#f9f0d214;font-size:12.5px;line-height:1.9;color:#d8decf}
.bb-host-name{font-weight:800;color:var(--bb-yellow)}
.bb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.bb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 18px;border:1px solid var(--bb-yellow);border-radius:5px;background:var(--bb-yellow);color:var(--bb-slate-deep);font:inherit;font-size:14px;font-weight:800;letter-spacing:.05em;text-decoration:none;box-shadow:0 3px 0 #11282059;cursor:pointer}
.bb-btn:hover{background:#f9e9b5}
.bb-btn.is-ghost{background:transparent;color:var(--bb-chalk);border-color:#f4f5db6b;box-shadow:none}
.bb-btn.is-ghost:hover{background:#ffffff14}
.bb-btn.is-sm{min-height:44px;padding:8px 14px;font-size:13px}
.bb-btn:focus-visible,.bb-chip:focus-visible,.bb-col-item:focus-visible,.bb-item-title:focus-visible,.bb-back:focus-visible,.bb-lesson-card:focus-visible,.bb-footer a:focus-visible,.bb-form input:focus-visible,.bb-form textarea:focus-visible{outline:3px solid var(--bb-yellow);outline-offset:3px}

/* 入口：3列 */
.bb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,30px);margin-top:20px}
.bb-col{min-width:0;display:grid;align-content:start;gap:8px}
.bb-col-head{margin:0 0 4px;padding-bottom:8px;border-bottom:2px dashed #f3f1dc66;font-size:17px;font-weight:800;letter-spacing:.1em}
.bb-col-head.is-curious{color:var(--bb-chalk)}
.bb-col-head.is-request{color:var(--bb-yellow);border-color:#f4df9c80}
.bb-col-head.is-offer{color:var(--bb-sky);border-color:#b6d9df80}
.bb-col-item{display:grid;gap:4px;padding:10px 0;min-height:44px;border-bottom:1px dashed #ebf1df30;color:var(--bb-chalk);text-decoration:none}
.bb-col-item:hover .bb-col-subject{color:var(--bb-yellow);text-decoration:underline wavy;text-underline-offset:6px}
.bb-col-subject{font-size:15px;font-weight:700;line-height:1.7;overflow-wrap:anywhere}
.bb-col-meta{font-size:11.5px;letter-spacing:.04em;color:var(--bb-meta)}
.bb-col-empty{margin:0;font-size:13px;color:var(--bb-meta)}
.bb-lesson-mark{justify-self:start;display:inline-block;padding:1px 9px;border:1px solid var(--bb-mint);border-radius:999px;color:var(--bb-mint);font-size:11px;font-weight:800;letter-spacing:.08em;transform:rotate(-2deg)}

/* 一覧 */
.bb-desk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:22px calc(-1*clamp(18px,4vw,44px)) 0;padding:14px clamp(18px,4vw,44px);border-top:1px dashed #f0f2e052;border-bottom:1px dashed #f0f2e052;background:#00000017}
.bb-chips{display:flex;flex-wrap:wrap;gap:8px}
.bb-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid #d9e5d154;border-radius:999px;color:#cbd8d1;font-size:13px;font-weight:700;text-decoration:none}
.bb-chip[aria-current="true"]{background:var(--bb-chalk);color:var(--bb-slate-deep);border-color:var(--bb-chalk)}
.bb-count{margin:0;font-size:12px;letter-spacing:.06em;color:var(--bb-mint)}
.bb-list{list-style:none;margin:0;padding:0}
.bb-item{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;padding:20px 0;border-bottom:1px dashed #ebf1df36}
.bb-item-main{flex:1;min-width:0}
.bb-item-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px}
.bb-no{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:12px;letter-spacing:.06em;color:var(--bb-meta)}
.bb-tag{display:inline-block;padding:1px 8px;border:1px solid;border-radius:2px;font-size:11px;font-weight:700;letter-spacing:.06em}
.bb-tag.is-curious{color:var(--bb-chalk);border-color:#f3f1dc73}
.bb-tag.is-request{color:var(--bb-yellow);border-color:#f4df9c80}
.bb-tag.is-offer{color:var(--bb-sky);border-color:#b6d9df80}
.bb-to{font-size:12px;color:var(--bb-sky)}
.bb-item-title{display:inline-block;min-height:44px;padding:4px 0;color:#f7f3d9;font-size:16px;font-weight:800;line-height:1.6;letter-spacing:.02em;text-decoration:none;overflow-wrap:anywhere}
.bb-item-title:hover{color:var(--bb-yellow);text-decoration:underline wavy;text-underline-offset:6px}
.bb-item-desc{margin:2px 0 0;font-size:13px;line-height:1.8;color:#c7d5c9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-item-meta{margin:8px 0 0;font-size:11.5px;letter-spacing:.03em;color:var(--bb-meta)}
.bb-rescount{margin:0;min-width:54px;padding:5px 8px;text-align:center;font-size:10px;color:#c6e0d4;border:1px solid #d3eddc47;border-radius:4px;background:#ffffff09}
.bb-rescount strong{display:block;font-size:19px;line-height:1.4;color:var(--bb-mint);font-variant-numeric:tabular-nums}
.bb-pager{display:flex;align-items:center;gap:12px;padding:16px 0 4px}
.bb-page{font-size:13px;color:var(--bb-chalk-soft)}

/* スレッド */
.bb-back{display:inline-flex;align-items:center;min-height:44px;color:var(--bb-sky);font-size:13px;font-weight:800;text-decoration:none}
.bb-back:hover{text-decoration:underline}
.bb-thread-body{margin:16px 0 22px;font-size:15px;line-height:2;color:#e5ebdb;white-space:pre-wrap;overflow-wrap:anywhere}
.bb-lesson-card{display:grid;gap:6px;margin:0 0 24px;padding:16px 18px;border:1px dashed var(--bb-mint);border-radius:6px;background:#b4dabc12;color:var(--bb-chalk);text-decoration:none}
.bb-lesson-title{font-size:17px;font-weight:800;line-height:1.6}
.bb-lesson-go{font-size:13px;color:var(--bb-mint)}
.bb-reply-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px dashed #e9f0de59}
.bb-reply-head h2{margin:0;font-size:19px;color:var(--bb-chalk)}
.bb-reply{margin-top:12px;padding:14px 16px;border:1px solid #e9f1d93d;border-radius:5px;background:#ffffff0b}
.bb-reply-by{margin:0;font-size:12px;font-weight:700;color:var(--bb-yellow)}
.bb-reply-text{margin:7px 0 0;font-size:14px;line-height:1.9;color:#e1e9df;white-space:pre-wrap;overflow-wrap:anywhere}

/* 書く */
.bb-write-to{margin:0 0 6px;font-size:13px;color:var(--bb-sky)}
.bb-form{margin-top:18px;padding:clamp(16px,3vw,26px);border:1px dashed #eeeecf54;border-radius:5px;background:#02151040}
.bb-field{display:grid;gap:6px;margin-bottom:16px}
.bb-field label,.bb-label{margin:0;font-size:13px;font-weight:800;color:var(--bb-yellow)}
.bb-field input,.bb-field textarea{width:100%;box-sizing:border-box;padding:12px 13px;border:1px solid #acc4b1;border-radius:4px;background:#f5f0df;color:#233e35;font:inherit;font-size:16px;line-height:1.7}
.bb-field textarea{resize:vertical;min-height:140px}
.bb-radios{display:grid;gap:8px}
.bb-radio{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:1px solid #d9e5d154;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer}
.bb-radio input{width:18px;height:18px;accent-color:var(--bb-yellow)}
.bb-radio:has(input:checked){background:#f3f1dc1a;border-color:var(--bb-yellow)}
.bb-hint{margin:0 0 12px;font-size:12px;line-height:1.85;color:#c0d4c4}
.bb-agree{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;font-size:13px;line-height:1.8;cursor:pointer}
.bb-agree input{width:20px;height:20px;margin-top:3px;accent-color:var(--bb-yellow)}
.bb-done{margin-top:20px;padding:24px;border:1px solid var(--bb-yellow);border-radius:6px;text-align:center}
.bb-done-title{margin:0 0 6px;font-size:20px;font-weight:800;color:var(--bb-yellow)}

/* 管理 */
.bb-queue{margin-top:14px;padding:16px;border:1px solid #e9f1d94d;border-radius:6px;background:#ffffff0b}
.bb-queue.is-done{opacity:.6}
.bb-queue-subject{margin:4px 0 0;font-size:16px;font-weight:800}
.bb-status{font-size:13px;font-weight:700;color:var(--bb-mint)}

.bb-footer{display:flex;flex-wrap:wrap;gap:6px 24px;margin:24px calc(-1*clamp(18px,4vw,44px)) calc(-1*clamp(20px,3vw,30px));padding:16px clamp(18px,4vw,44px);border-top:1px solid #f5f5e233;background:#00000024}
.bb-footer a{display:inline-flex;align-items:center;min-height:44px;color:#f0f2dacc;font-size:13px;text-underline-offset:4px}
.bb-empty{padding:30px 0;text-align:center;color:var(--bb-chalk-soft)}

/* 掲示板のページ */
.bb-page-body{background:#eee8dc}
.bb-page-body .b01-header{position:relative;background:var(--bb-slate-deep);text-shadow:none}
.bb-page-body .b01-header a{color:var(--bb-chalk)}
.bb-wrap{max-width:1040px;margin:0 auto;padding:clamp(16px,4vw,40px) max(10px,3vw) clamp(40px,6vw,64px)}
@media (max-width:760px){
  .bb-board{border-width:9px}
  .bb-cols{grid-template-columns:1fr;gap:18px}
  .bb-item-title{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.bb-btn{transition:none}}
.bb-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bb-errors{margin:0 0 14px;padding:12px 14px;border:1px solid #f0b8a8;border-radius:5px;background:#e9c3b81f;color:#ffe3da;font-size:13px;line-height:1.8}
.bb-errors p{margin:0}
/* 承認の部屋 */
.bb-admin-who{margin:6px 0 0;font-size:12px;color:var(--bb-meta)}
.bb-admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.bb-select{min-height:44px;padding:0 10px;border:1px solid #acc4b1;border-radius:4px;background:#f5f0df;color:#233e35;font:inherit;font-size:14px}
.bb-admin-section{margin-top:26px}
.bb-admin-section h2{margin:0 0 6px;font-size:18px;color:var(--bb-chalk)}