/* 掲示板の共通の見た目。色・大きさはすべて theme.css の CSS 変数（設計書 9.1）から取る。
   ページと組み込み（Shadow DOM）の両方で使うため、.bbs の中だけに効かせる。 */
:root, :host {
  --bbs-bg: #ffffff; --bbs-text: #222222; --bbs-link: #0645ad; --bbs-accent: #e8590c;
  --bbs-post-bg: #f8f9fa; --bbs-border: #dee2e6; --bbs-name: #228b22; --bbs-overlay-rgb: 255,255,255;
  --bbs-font: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --bbs-size: 15px; --bbs-max: 960px; --bbs-radius: 6px; --bbs-gap: 8px;
  --bbs-wall: none; --bbs-overlay: 0; --bbs-wall-size: auto; --bbs-wall-repeat: repeat; --bbs-wall-attach: scroll;
}
body.bbs-page { margin: 0; background: var(--bbs-bg); }
.bbs {
  color: var(--bbs-text); font-family: var(--bbs-font); font-size: var(--bbs-size); line-height: 1.6;
  background-color: var(--bbs-bg);
  background-image: linear-gradient(rgba(var(--bbs-overlay-rgb), var(--bbs-overlay)), rgba(var(--bbs-overlay-rgb), var(--bbs-overlay))), var(--bbs-wall);
  background-size: auto, var(--bbs-wall-size); background-repeat: repeat, var(--bbs-wall-repeat); background-attachment: scroll, var(--bbs-wall-attach);
  min-height: 100vh; box-sizing: border-box; overflow-wrap: anywhere; position: relative;
}
.bbs.bbs-embed { min-height: 0; }
.bbs *, .bbs *::before, .bbs *::after { box-sizing: border-box; }
.bbs a { color: var(--bbs-link); }
.bbs-wrap { max-width: var(--bbs-max); margin: 0 auto; padding: 12px 16px 24px; }
.bbs-head { margin-bottom: 12px; }
.bbs-crumbs { font-size: .85em; opacity: .85; }
.bbs-crumbs a { text-decoration: none; }
.bbs-header-img { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--bbs-radius); margin: 8px 0; }
.bbs-titlebar { display: flex; align-items: center; gap: 12px; }
.bbs-logo { max-height: 56px; max-width: 200px; }
.bbs-title { font-size: 1.5em; margin: .3em 0; line-height: 1.3; }
.bbs-blocks { display: grid; gap: var(--bbs-gap); margin-bottom: 12px; }
.bbs-block { background: var(--bbs-post-bg); border: 1px solid var(--bbs-border); border-radius: var(--bbs-radius); padding: 10px 14px; }
.bbs-block h2, .bbs-block h3, .bbs-block h4, .bbs-block h5 { margin: .3em 0; font-size: 1.1em; }
.bbs-block p { margin: .4em 0; }
.bbs-block-banner { padding: 0; overflow: hidden; text-align: center; background: transparent; border: 0; }
.bbs-block-banner img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: var(--bbs-radius); }
/* 広告の枠はテーマで隠せない（FR-THM-007）。 */
.bbs-block-ad { display: block !important; visibility: visible !important; min-height: 60px; position: relative; overflow: hidden; }
.bbs-ad-label { display: block !important; font-size: 11px !important; opacity: .7; }
.bbs-block[hidden] { display: none !important; }

.bbs-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.bbs-toolbar input[type=search] { flex: 1; min-width: 160px; }
.bbs button, .bbs input, .bbs textarea, .bbs select { font: inherit; color: var(--bbs-text); }
.bbs input, .bbs textarea, .bbs select {
  background: var(--bbs-bg); border: 1px solid var(--bbs-border); border-radius: var(--bbs-radius); padding: 6px 8px;
}
.bbs button, .bbs .bbs-btn {
  background: var(--bbs-accent); color: #fff; border: 0; border-radius: var(--bbs-radius); padding: 6px 14px; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.bbs button.bbs-plain { background: transparent; color: var(--bbs-link); padding: 0 4px; font-size: .85em; }
.bbs button:disabled { opacity: .5; cursor: default; }

.bbs-threadlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.bbs-threadlist li { padding: 8px 10px; background: var(--bbs-post-bg); border-bottom: 1px solid var(--bbs-border); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.bbs-threadlist li:first-child { border-radius: var(--bbs-radius) var(--bbs-radius) 0 0; }
.bbs-threadlist li:last-child { border-radius: 0 0 var(--bbs-radius) var(--bbs-radius); border-bottom: 0; }
.bbs-threadlist a { flex: 1; min-width: 50%; text-decoration: none; font-weight: 600; }
.bbs-threadlist time, .bbs-count { font-size: .85em; opacity: .75; }
.bbs-threadlist .bbs-closed-mark { font-size: .8em; color: var(--bbs-accent); }
.bbs-new { color: var(--bbs-accent); font-weight: 700; font-size: .8em; }
.bbs-boardlist { padding-left: 1.2em; }
.bbs-empty { opacity: .7; }

.bbs-posts { display: grid; gap: var(--bbs-gap); }
.bbs-post { background: var(--bbs-post-bg); border: 1px solid var(--bbs-border); border-radius: var(--bbs-radius); padding: 8px 12px; }
.bbs-post-head { font-size: .88em; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bbs-no { font-weight: 700; cursor: pointer; }
.bbs-name { color: var(--bbs-name); font-weight: 700; }
.bbs-trip { color: var(--bbs-name); font-size: .9em; }
.bbs-id { cursor: pointer; opacity: .8; }
.bbs-id.bbs-id-many { color: var(--bbs-accent); }
.bbs-post-head time { opacity: .75; }
.bbs-body { margin-top: 4px; white-space: normal; }
.bbs-anchor { text-decoration: none; }
.bbs-post.bbs-mine { border-left: 4px solid var(--bbs-accent); }
.bbs-post.bbs-reply-to-me { box-shadow: inset 0 0 0 2px var(--bbs-accent); }
.bbs-post.bbs-hl { outline: 2px dashed var(--bbs-accent); }
.bbs-post.bbs-gone { opacity: .6; font-size: .9em; }
.bbs-post-tools { margin-left: auto; }
.bbs-unread { text-align: center; color: var(--bbs-accent); font-size: .85em; border-top: 1px dashed var(--bbs-accent); padding-top: 2px; }
.bbs-closed { padding: 10px; border: 1px solid var(--bbs-accent); border-radius: var(--bbs-radius); color: var(--bbs-accent); }

.bbs-form { display: grid; gap: 6px; margin: 16px 0; padding: 12px; background: var(--bbs-post-bg); border: 1px solid var(--bbs-border); border-radius: var(--bbs-radius); }
.bbs-form .bbs-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bbs-form .bbs-row input { flex: 1; min-width: 120px; }
.bbs-form textarea { min-height: 7em; resize: vertical; width: 100%; }
.bbs-form .bbs-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bbs-msg { font-size: .9em; }
.bbs-msg.bbs-err { color: #d6336c; }
.bbs-hint { font-size: .8em; opacity: .75; }

.bbs-pop {
  position: absolute; z-index: 1000; max-width: min(560px, 92vw); max-height: 60vh; overflow: auto;
  background: var(--bbs-bg); color: var(--bbs-text); border: 1px solid var(--bbs-border); border-radius: var(--bbs-radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 6px; display: grid; gap: 6px; font-family: var(--bbs-font); font-size: var(--bbs-size);
}
.bbs-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 16px; }
.bbs-modal { background: var(--bbs-bg); color: var(--bbs-text); border-radius: var(--bbs-radius); padding: 16px; width: min(420px, 100%); display: grid; gap: 8px; font-family: var(--bbs-font); }
.bbs-modal textarea { min-height: 5em; }

.bbs-footer {
  display: flex !important; visibility: visible !important; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
  max-width: var(--bbs-max); margin: 0 auto; padding: 16px; font-size: 13px !important; border-top: 1px solid var(--bbs-border);
  position: static !important; opacity: 1 !important;
}
.bbs-footer a, .bbs-footer span { color: var(--bbs-link); display: inline !important; }
.bbs-footer span { color: var(--bbs-text); }
.bbs-terms h2 { font-size: 1.1em; margin-top: 1.2em; }
.bbs-search-hits { display: grid; gap: 6px; margin: 8px 0; }
.bbs-search-hits .bbs-post { font-size: .92em; }
@media (max-width: 600px) {
  .bbs-wrap { padding: 8px 8px 16px; }
  .bbs-title { font-size: 1.25em; }
}