/* =========================================================
   BBS (Custom) - Shared styles for /bbs/ and thread view
   ========================================================= */

:root{
  --bbs-bg:#000;
  --bbs-text:#fff;
  --bbs-border:#9377d1;

  /* change: #b8a24a -> #9377d1 */
  --bbs-accent:#9377d1;

  /* accent tint */
  --bbs-accent-2: rgba(147,119,209,0.18);

  --bbs-muted: rgba(255,255,255,0.72);

  /* change: rgba(184,162,74,0.85) -> #765cb1 */
  --bbs-bar-2:#765cb1;
}

.page-bbs {
  color: var(--bbs-text);
  padding: 0 30px; 
}

/* Hero */
.page-bbs .bbs-hero{ padding: 52px 0 18px; }
.page-bbs .bbs-hero__inner{
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
}
.page-bbs .bbs-hero__subtitle{ margin:10px 0 0; opacity:.85; }
.page-bbs .bbs-threadnav{ margin-top: 10px; }
.page-bbs .bbs-threadnav__link{ color: rgba(147,119,209,0.95); text-decoration: none; }
.page-bbs .bbs-threadnav__link:hover{ opacity: .8; }

/* Wrap */
.page-bbs .bbs-wrap{
  padding: 18px 0 80px;
}
.page-bbs .bbs-inner{
 /* width: min(900px, calc(100% - 40px));*/
  margin: 0 auto 120px;
}

/* Toast */
.page-bbs .bbs-toast{
  border: 0;
  background: rgba(0,0,0,0.65);
  padding: 20px 12px;
  border-radius: 10px;
  margin: 0 0 15px;
  text-align: center;
}
.page-bbs .bbs-toast__ok{ color: #c9ffb7; margin-right: 10px; }
.page-bbs .bbs-toast__msg{ color: #ffb7d8; }

/* Actions */
.page-bbs .bbs-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}

/* Search (screenshot-like) */
.page-bbs .bbs-search{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 10px;
  align-items: center;
}
.page-bbs .bbs-search__btn{
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--bbs-border);
  background: rgba(0,0,0,0.25);
  color: #fff;
  cursor: pointer;
}
.page-bbs .bbs-search__btn:hover{ opacity: .85; }

.page-bbs .bbs-search__input{
  width: 100%;
  background: rgba(0,0,0,0.55);
  color: #fff;                 /* change: typing text #fff */
  caret-color: #fff;           /* caret also */
  border: 1px solid var(--bbs-border);
  border-radius: 10px;
  height: 46px;
  padding: 0 12px;
  box-sizing: border-box;
}
.page-bbs .bbs-search__input::placeholder{
  color: rgba(255,255,255,0.55);
}
.page-bbs .bbs-search__input:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(147,119,209,0.25);
}

/* Buttons */
.page-bbs .bbs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--bbs-border);
  background: rgba(0,0,0,0.25);
  color: var(--bbs-text);
  border-radius: 99px;
  height: 46px;
  padding: 0 14px;
  cursor:pointer;
  text-decoration:none;
  box-sizing: border-box;
}
.page-bbs .bbs-btn--accent{
  background: var(--bbs-accent);
  border-color: var(--bbs-accent);
  color:#fff;
  font-weight: 600;
}
.page-bbs .bbs-btn--wide{
  width: 220px;
  margin: 30px auto 0;
}
  
.page-bbs .bbs-btn--small{
  height: 38px;
  border-radius: 10px;
  padding: 1px 14px 0;
  background: var(--bbs-accent-2);
  border-color: rgba(147,119,209,0.7);
  font-size: 12px;
}
.page-bbs .bbs-btn:hover{ opacity: .85; }

/* Panel */
.page-bbs .bbs-panel{
  border: 0;
  border-radius: 0;
  background: rgba(0,0,0,0.55);
  overflow:hidden;
  margin: 0 0 18px;
}
.page-bbs .bbs-panel__bar{
  background: var(--bbs-accent);
  color:#fff;
  padding: 12px 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Form */
.page-bbs .bbs-form{
  padding: 20px 30px 30px;
}
.page-bbs .bbs-form__row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: start;
  padding: 8px 0;
}
.page-bbs .bbs-form__label{
  color: var(--bbs-muted);
  font-size: 14px;
  padding-top: 10px;
}
.page-bbs .bbs-req{
  display:inline-block;
  margin-left: 8px;
  font-size: 11px;
  line-height: 1rem;
  padding: 2px 6px 0;
  border-radius: 6px;
  background: rgba(255,80,80,0.18);
  border:1px solid rgba(255,80,80,0.5);
  color:#fff;
}
.page-bbs .bbs-input,
.page-bbs .bbs-textarea{
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.55);
  color: #fff;                 /* change: typing text #fff */
  caret-color: #fff;
  border:1px solid var(--bbs-border);
  border-radius: 10px;
  padding: 12px 12px;
}
.page-bbs .bbs-input::placeholder,
.page-bbs .bbs-textarea::placeholder{
  color: rgba(255,255,255,0.55);
}
.page-bbs .bbs-input:focus,
.page-bbs .bbs-textarea:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(147,119,209,0.25);
}
.page-bbs .bbs-input{ height: 46px; }
.page-bbs .bbs-textarea{ resize: vertical; }
.page-bbs .bbs-note{
  margin-top: 8px;
  color: rgba(147,119,209,0.95);
  font-size: 13px;
}

 
/* Radios */
.page-bbs .bbs-radio{
  display:flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 10px;
}
.page-bbs .bbs-radio label{
  display:flex;
  align-items:center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
}
.page-bbs .bbs-radio input{
  width: 18px;
  height: 18px;
  accent-color: var(--bbs-accent);
}

/* Color palette */
.page-bbs .bbs-colors{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
}
.page-bbs .bbs-color{
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.18);
  background: var(--c);
  cursor:pointer;
}
.page-bbs .bbs-color.is-active{
  outline: 2px solid var(--bbs-accent);
  outline-offset: 2px;
}

/* List item */
.page-bbs .bbs-item{
  border:2px solid var(--bbs-border);
  border-radius: 0;
  overflow:hidden;
  background: rgba(0,0,0,0.6);
  margin: 0 0 18px;
}
.page-bbs .bbs-item__bar{
  background: var(--bbs-accent);
  color: var(--right-purple);
  padding: 12px 14px;
}
.page-bbs .bbs-item__barTitle{
  font-weight: 800;
  letter-spacing: .02em;
}
.page-bbs .bbs-item__meta{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px;
  border-top: 1px solid rgba(147,119,209,0.35);
  color: var(--bbs-muted);
  font-size: 13px;
  flex-wrap: wrap;
}
.page-bbs .bbs-item__name{ color:#fff; }
.page-bbs .bbs-item__gender{ color: var(--bbs-muted); }
.page-bbs .bbs-item__no{
  margin-left: 12px;
  color: rgba(147,119,209,0.95);
}
.page-bbs .bbs-item__rc{
  margin-left: 12px;
  color: rgba(147,119,209,0.95);
}

.page-bbs .bbs-item__body{
  padding: 12px 14px 14px;
  color: var(--txt, #fff);
}
/* 文字色：本文内要素へ強制継承 */
.page-bbs .bbs-item__body,
.page-bbs .bbs-item__body *{
  color: var(--txt, #fff);
}
.page-bbs .bbs-item__body a{
  text-decoration: underline;
}

.page-bbs .bbs-item__actions{
  padding: 0 14px 14px;
  display:flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Latest replies preview (A: latest 10) */
.page-bbs .bbs-preview{
  margin: 0 10px 15px;
  border: 2px solid rgba(118,92,177,0.65);
  border-radius: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
}
.page-bbs .bbs-preview__head{
  background: var(--bbs-bar-2); /* change */
  color: var(--right-purple);
  padding: 8px 10px;
  font-weight: 700;
  font-size: 13px;
}
.page-bbs .bbs-preview__row{
  padding: 10px 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.page-bbs .bbs-preview__meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  margin-bottom: 6px;
}
.page-bbs .bbs-preview__date{
  margin-left: auto;
  color: rgba(255,255,255,0.55);
}
.page-bbs .bbs-preview__body{
  color: var(--txt, #fff);
  font-size: 13px;
  line-height: 1.6;
}
.page-bbs .bbs-preview__body,
.page-bbs .bbs-preview__body *{
  color: var(--txt, #fff);
}
.page-bbs .bbs-preview__more{
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: right;
}
.page-bbs .bbs-preview__link{
  color: rgba(147,119,209,0.95);
  text-decoration: none;
}
.page-bbs .bbs-preview__link:hover{ opacity: .85; }

/* Replies */
.page-bbs .bbs-replies{ padding: 0 14px 12px; }
.page-bbs .bbs-replies--thread{ padding: 0; }

.page-bbs .bbs-reply{
  border:1px solid rgba(118,92,177,0.65);
  border-radius: 12px;
  overflow:hidden;
  margin: 14px 0 0;
  background: rgba(0,0,0,0.35);
}
.page-bbs .bbs-reply__bar{
  background: var(--bbs-bar-2); /* change */
  color:#fff;
  padding: 10px 12px;
  font-weight: 700;
}
.page-bbs .bbs-reply__meta{
  padding: 10px 12px 8px;
  color: var(--bbs-muted);
  font-size: 13px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.page-bbs .bbs-reply__date{ margin-left: auto; }
.page-bbs .bbs-reply__body{
  padding: 10px 12px 12px;
  color: var(--txt, #fff);
}
.page-bbs .bbs-reply__body,
.page-bbs .bbs-reply__body *{
  color: var(--txt, #fff);
}
.page-bbs .bbs-reply__body a{ text-decoration: underline; }

/* Reply ops */
.page-bbs .bbs-reply__ops{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 546px) {
  .page-bbs .bbs-reply__ops{
    display: flex;
    flex-wrap: wrap;
  }
}
@media (max-width: 420px) {
  .page-bbs .bbs-reply__ops{
    display: flex;
    flex-wrap: wrap;
  }
}
.page-bbs .bbs-reply__op{
  display: flex;
  gap: 8px;
  align-items: center;
}
.page-bbs .bbs-reply__key{
  width: 160px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  color: #fff; /* change */
  padding: 0 10px;
  box-sizing: border-box;
}
.page-bbs .bbs-reply__btn{
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(147,119,209,0.7);
  background: rgba(147,119,209,0.18);
  color: #fff;
  cursor: pointer;
  padding: 0 12px;
}
.page-bbs .bbs-reply__btn--danger{
  border-color: rgba(255,80,80,0.7);
  background: rgba(255,80,80,0.12);
}

.page-bbs .bbs-replyedit{
  margin: 10px 12px 12px;
  border: 1px solid rgba(118,92,177,0.65);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
}
.page-bbs .bbs-replyedit__bar{
  background: var(--bbs-bar-2); /* change */
  color: #fff;
  padding: 10px 12px;
  font-weight: 700;
}

/* Manage panel (thread) */
.page-bbs .bbs-manage{ padding: 12px 14px; }
.page-bbs .bbs-manage__row{
  display: grid;
  grid-template-columns: 70px 1fr 110px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.page-bbs .bbs-manage__row:last-child{ margin-bottom: 0; }

.page-bbs .bbs-manage__label{ color: var(--bbs-muted); }
.page-bbs .bbs-manage__key{
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  color: #fff; /* change */
  padding: 0 10px;
  box-sizing: border-box;
}
.page-bbs .bbs-manage__btn{
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(147,119,209,0.85);
  background: rgba(147,119,209,0.85);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.page-bbs .bbs-manage__btn--danger{
  border-color: rgba(255,80,80,0.7);
  background: rgba(255,80,80,0.18);
}

/* Manage dropdown */
.page-bbs .bbs-manage-switch{
  padding: 12px 14px 0;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.page-bbs .bbs-manage-switch__label{
  color: var(--bbs-muted);
  font-size: 13px;
}
.page-bbs .bbs-manage-switch__select{
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--bbs-border);
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 0 10px;
}

/* Pagination */
.page-bbs .bbs-pagination{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 2px 0;
  justify-content: center;
}
.page-bbs .bbs-page{
  color:#fff;
  text-decoration:none;
  border-bottom: 2px solid transparent;
  padding: 2px 2px;
}
.page-bbs .bbs-page.is-current{
  color: rgba(147,119,209,0.95);
  border-bottom-color: rgba(147,119,209,0.95);
}

.page-bbs .bbs-empty{ padding: 18px 0 0; color: var(--bbs-muted); }

/* Responsive */
@media (max-width: 860px){
  .page-bbs .bbs-search{ grid-template-columns: 170px 1fr; }
  .page-bbs .bbs-form__row{ grid-template-columns: 1fr; gap: 8px; }
  .page-bbs .bbs-form__label{ padding-top: 0; }
  .page-bbs .bbs-btn--wide{ width: 100%; }
  .page-bbs .bbs-manage__row{ grid-template-columns: 1fr; }
}

/* =========================================================
   Search box (ログ内検索) - screenshot-like
   ========================================================= */

.page-bbs .bbs-searchbox{
  border: 1px solid var(--bbs-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.55);
  margin: 0 0 18px;
}

.page-bbs .bbs-searchbox__title{
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(147,119,209,0.95); /* #9377d1系 */
  text-align: center;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 14px 14px;
}

.page-bbs .bbs-searchbox__desc{
  padding: 14px 18px 8px;
  color: rgba(255,255,255,0.78);
}
.page-bbs .bbs-searchbox__desc ul{
  margin: 0;
  padding-left: 18px;
}
.page-bbs .bbs-searchbox__desc li{
  margin: 6px 0;
  font-size: 14px;
}

.page-bbs .bbs-searchbox__form{
  padding: 8px 18px 18px;
}

.page-bbs .bbs-searchgrid{
  display: grid;
  grid-template-columns: 220px 1fr 220px 1fr;
  gap: 14px 18px;
  align-items: center;
}

.page-bbs .bbs-searchgrid__label{
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px dotted rgba(147,119,209,0.55);
}

.page-bbs .bbs-searchgrid__field{
  padding: 6px 0;
}

.page-bbs .bbs-searchinput{
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  background: rgba(0,0,0,0.55);
  color: #fff;                 /* 入力中文字色 #fff */
  caret-color: #fff;
  border: 1px solid var(--bbs-border);
  border-radius: 10px;
  padding: 0 12px;
}

.page-bbs .bbs-select{
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  border: 1px solid var(--bbs-border);
  border-radius: 10px;
  padding: 0 12px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9377d1 50%),
                    linear-gradient(135deg, #9377d1 50%, transparent 50%),
                    linear-gradient(to right, #9377d1, #9377d1);
  background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px, calc(100% - 44px) 0.5em;
  background-size: 6px 6px, 6px 6px, 1px 2.6em;
  background-repeat: no-repeat;
}

.page-bbs .bbs-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.page-bbs .bbs-check input{
  width: 18px;
  height: 18px;
  accent-color: #9377d1;
}

.page-bbs .bbs-searchbox__actions{
  display: flex;
  gap: 14px;
  justify-content: center;
  padding-top: 14px;
}

.page-bbs .bbs-searchbtn{
  min-width: 180px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #9377d1;
  background: #765cb1; /* 指定：rgba(184,162,74,0.85) → #765cb1 */
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-bbs .bbs-searchbtn--ghost{
  background: rgba(0,0,0,0.25);
  border-color: rgba(147,119,209,0.8);
  color: #fff;
}

.page-bbs .bbs-searchbtn:hover{ opacity: .85; }

/* responsive */
@media (max-width: 900px){
  .page-bbs .bbs-searchgrid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .page-bbs .bbs-searchgrid__label{
    padding: 6px 0 2px;
  }
  .page-bbs .bbs-searchbtn{
    min-width: 0;
    width: 45%;
  }
}

.page-bbs mark.bbs-hl{
  background: rgba(147,119,209,0.28);
  color: #fff;
  padding: 0 2px;
  border-radius: 4px;
}

/* =========================================================
   Requested tweaks
   ========================================================= */

/* #765cb1 -> #62489b */
:root{
  --bbs-bar-2:#62489b;
}

/* 投稿ウインドウ（新規投稿パネル）は角丸なし */
.page-bbs .bbs-panel--post{
  border-radius: 0;
}
.page-bbs .bbs-panel--post .bbs-panel__bar{
  border-radius: 0;
}

/* 送信→投稿：位置中央寄せ（page-bbs.phpでクラス付与済み） */
.page-bbs .bbs-form__actions--center{
  display:flex;
  justify-content:center;
}

/* Accordion (ログ内検索) */
.page-bbs details.bbs-acc{
  border: 1px solid var(--bbs-border);
  background: rgba(0,0,0,0.55);
  margin: 3px 0 20px;
}
.page-bbs details.bbs-acc,
.page-bbs details.bbs-acc *{
  box-sizing: border-box;
}

.page-bbs .bbs-acc__summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
}
.page-bbs .bbs-acc__summary::-webkit-details-marker{ display:none; }

.page-bbs .bbs-acc__label{
  color: rgba(147,119,209,0.95);
  font-weight: 800;
  letter-spacing: .08em;
}

.page-bbs .bbs-acc__icon{
  position:absolute;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(147,119,209,0.95);
  border-bottom: 2px solid rgba(147,119,209,0.95);
  transform: rotate(45deg);
  transition: transform .15s ease, top .15s ease;
}

.page-bbs details[open] .bbs-acc__icon{
  transform: rotate(-135deg);
}

/* Accordion body padding */
.page-bbs .bbs-acc__body{
  padding: 0;
}

/* Searchボタン色もbar色に合わせる */
.page-bbs .bbs-searchbtn{
  background: var(--purple);
  border-color: var(--purple);
  padding: 10px 10px;
}

/* 入力中文字は常に #fff（既存があっても上書き） */
.page-bbs input[type="text"],
.page-bbs input[type="search"],
.page-bbs textarea{
  color:#fff;
  caret-color:#fff;
  font-family: 'Zen Kaku Gothic New' !important;
}

/* =========================================================
   Manage box (single thread) - screenshot-like
   ========================================================= */

.page-bbs .bbs-managebox{
  border: 1px solid var(--bbs-border);
  border-radius: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
  margin: 18px 0 0;
}

.page-bbs .bbs-managebox__bar{
  background: var(--bbs-accent);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 10px 20px;
  font-size: 12px;
}

.page-bbs .bbs-managebox__body{
  display: grid;
  grid-template-columns: 160px 160px 1fr 160px; /* ラベル / select / key / button */
  gap: 18px;
  align-items: center;
  padding: 18px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.page-bbs .bbs-managebox__label{
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  white-space: nowrap;
}

.page-bbs .bbs-managebox__select{
  height: 56px;
  border-radius: 14px;
  border: 2px solid rgba(147,119,209,0.75);
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 0 18px;
  font-size: 20px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 24px,
    calc(100% - 14px) 24px;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
}

.page-bbs .bbs-managebox__form{
  display: contents; /* grid の3列目と4列目をフォームで占有 */
}

.page-bbs .bbs-managebox__key{
  width: 100%;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color: #fff;
  caret-color: #fff;
  padding: 0 18px;
  font-size: 20px;
  box-sizing: border-box;
}

.page-bbs .bbs-managebox__key::placeholder{
  color: rgba(255,255,255,0.35);
}

.page-bbs .bbs-managebox__btn{
  width: 100%;
  height: 56px;
  border-radius: 14px;
  border: 0;
  background: rgba(147,119,209,0.95);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  cursor: pointer;
}

.page-bbs .bbs-managebox__btn:hover{ opacity: .9; }

.page-bbs .bbs-managebox__btn--danger{
  background: rgba(255,80,80,0.55);
}

/* responsive */
@media (max-width: 820px){
  .page-bbs .bbs-managebox__label {
    display: none;
  }
  .page-bbs .bbs-managebox__body {
    grid-template-columns: 30% 45% 20%;
  }
}
@media (max-width: 620px){
  .page-bbs .bbs-managebox__body{
    grid-template-columns: 1fr;
	gap: 15px;
  }
  .page-bbs .bbs-managebox__select,
  .page-bbs .bbs-managebox__key,
  .page-bbs .bbs-managebox__btn{
    height: 50px;
    font-size: 18px;
  }
  .page-bbs .bbs-managebox__bar{
    font-size: 18px;
  }
}

/* =========================================================
   Replies: make them match "投稿" tone (no radius / purple bar / purple border)
   ========================================================= */

/* 返信ボックス（各レス）を角丸なし＋紫枠に */
.page-bbs .bbs-reply{
  border-radius: 0;
  border: 1px solid var(--bbs-border);
  background: rgba(0,0,0,0.35);
}

/* 返信の見出し帯：投稿と同じ紫帯に寄せる（※好みで --bbs-bar-2 のままでもOK） */
.page-bbs .bbs-reply__bar{
  border-radius: 0;
  background: var(--bbs-accent); /* #9377d1 */
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
}

/* 返信本文の可読性（文字色の継承を強める） */
.page-bbs .bbs-reply__body,
.page-bbs .bbs-reply__body *{
  color: var(--txt, #fff);
}

.page-bbs .bbs-reply__key{
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color:#fff;
  caret-color:#fff;
  padding: 0 18px;
  font-size: 18px;
}

.page-bbs .bbs-reply__btn{
  height: 56px;
  border-radius: 14px;
  border: 0;
  background: rgba(147,119,209,0.95);
  color:#fff;
  font-weight: 900;
  font-size: 20px;
  padding: 0 18px;
}

.page-bbs .bbs-reply__btn--danger{
  background: rgba(255,80,80,0.55);
}

/* 返信の編集フォーム（もしある場合）も角丸なし＋紫帯へ */
.page-bbs .bbs-replyedit{
  border-radius: 0;
  border: 1px solid var(--bbs-border);
  background: rgba(0,0,0,0.35);
}

.page-bbs .bbs-replyedit__bar{
  border-radius: 0;
  background: var(--bbs-accent); /* #9377d1 */
  color:#fff;
  font-weight: 800;
}

/* 返信フォーム（#reply）の入力文字が見えにくい対策（強制 #fff） */
.page-bbs #reply input[type="text"],
.page-bbs #reply textarea{
  color:#fff;
  caret-color:#fff;
}

/* モバイル調整 */
@media (max-width: 900px){
  .page-bbs .bbs-reply__key,
  .page-bbs .bbs-reply__btn{
    height: 50px;
    border-radius: 12px;
    font-size: 18px;
  }
}

/* =========================================================
   Reply Thread = Post Thread Unified Design
   ========================================================= */

/* 返信全体の外枠（投稿スレッドと同格） */
.page-bbs .bbs-reply{
  border: 1px solid var(--bbs-border);
  border-radius: 0;
  background: rgba(0,0,0,0.35);
  margin-top: 24px;
}

/* 返信タイトル帯（紫帯） */
.page-bbs .bbs-reply__bar{
  background: var(--bbs-accent); /* #9377d1 */
  color: #bb9dff;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 18px;
  border-radius: 0;
  letter-spacing: .03em;
}

/* 返信メタ（投稿者・日付） */
.page-bbs .bbs-reply__meta{
  padding: 12px 18px 8px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 返信本文 */
.page-bbs .bbs-reply__body{
  padding: 12px 18px 18px;
  color: var(--txt, #fff);
}
.page-bbs .bbs-reply__body,
.page-bbs .bbs-reply__body *{
  color: var(--txt, #fff);
}

/* =========================================================
   Reply Edit / Delete Line (横並び)
   ========================================================= */



/* キー入力 */
.page-bbs .bbs-reply__key{
  height: 52px;
  width: 260px;
  max-width: 50vw;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: #fff;
  caret-color: #fff;
  padding: 0 16px;
  font-size: 16px;
}

/* 編集ボタン */
.page-bbs .bbs-reply__btn{
  height: 52px;
  min-width: 110px;
  border-radius: 14px;
  border: 0;
  background: rgba(147,119,209,0.95);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}

/* 削除ボタン */
.page-bbs .bbs-reply__btn--danger{
  background: rgba(255,80,80,0.55);
}


@media (max-width: 420px){
  .page-bbs .bbs-item__rc {
    display: none;
  }
  .page-bbs .bbs-form__label {
    font-size: 12px;
  }
  .page-bbs .bbs-req {
    margin-left: 5px;
    font-size: 9px;
    line-height: unset;
    padding: 2px 3px 0;
    border-radius: 6px;
  }
  .bbs-item__info {
    display: contents;
	font-size: 12px;
  }
  .page-bbs .bbs-preview__row {
    padding: 10px 10px 20px
  }
}
/* =========================================================
   Reply Form (返信フォーム) = 投稿フォーム準拠
   ========================================================= */

/* 返信フォームの外枠 */
.page-bbs #reply{
  border: 2px solid #432c78;
  border-radius: 0;
  background: rgba(0,0,0,0.55);
  margin-top: 28px;
}

/* 返信フォーム帯 */
.page-bbs #reply .bbs-panel__bar{
  background: var(--bbs-accent);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 0;
}

/* 入力文字を常に白 */
.page-bbs #reply input[type="text"],
.page-bbs #reply textarea{
  color: #fff;
  caret-color: #fff;
}

/* 返信送信ボタン中央寄せ */
.page-bbs #reply .bbs-form__actions{
  display: flex;
  justify-content: center;
}

.bbs-panel.bbs-panel--edit .bbs-form__actions {
  display: flex;
  justify-content: center;
}


/* =========================================================
   BBS: post/reply/button color split + compact key input
   ========================================================= */

/* 以後：.bbs-item / .bbs-preview は border-radius:0 前提（了解） */

:root{
  --bbs-btn: #9377d1;         /* ボタンに当たる部分は #9377d1 */
  --bbs-post-accent:#62489b;  /* 投稿ウインドウ */
  --bbs-reply-accent:#432c78; /* 返信ウインドウ */
  --bbs-hl: rgba(147,119,209,0.28); /* 編集中（薄紫） */
}

/* =========================================================
   見出し・小見出し（EVENTページに寄せる）
   ※EVENTの実数値が不明なので、EVENT側に合わせたい場合は
     下2つだけ数値をEVENTと同じにしてください。
   ========================================================= */

.page-bbs .bbs-hero__subtitle{
  font-size: 16px;    /* ←EVENTと同値に */
  margin-top: 10px;
  opacity: .85;
}
@media (max-width: 900px){
  .page-bbs .bbs-hero__subtitle{ font-size: 14px; } /* ←EVENTと同値に */
}

/* =========================================================
   投稿ウインドウ：#9377d1 → #62489b（ただし投稿ボタンは #9377d1）
   ========================================================= */
.page-bbs .bbs-panel--post{
  border-color: #000;
}
.page-bbs .bbs-panel--post .bbs-panel__bar{
  background: var(--bbs-post-accent);
}

/* 投稿ボタンは #9377d1 に固定 */
.page-bbs .bbs-panel--post .bbs-btn--accent{
  background: var(--bbs-btn);
  border-color: var(--bbs-btn);
}

/* =========================================================
   返信ウインドウ：#62489b → #432c78（ただし送信ボタンは #9377d1）
   ========================================================= */
.page-bbs .bbs-reply{
  border-color: var(--bbs-reply-accent);
}
.page-bbs .bbs-reply__bar{
  background: unset;
}

/* 返信フォームの帯も返信カラーに */
.page-bbs #reply .bbs-panel__bar{
  background: var(--bbs-reply-accent);
}

/* 返信の送信ボタン系は #9377d1 */
.page-bbs #reply .bbs-btn--accent,
.page-bbs .bbs-reply__btn{
  background: var(--bbs-btn);
}

/* =========================================================
   編集中：紫→薄紫ハイライト（focus + “編集モード”）
   ========================================================= */
.page-bbs .bbs-managebox.is-edit .bbs-managebox__select,
.page-bbs .bbs-managebox.is-edit .bbs-managebox__key{
  /*box-shadow: 0 0 0 3px var(--bbs-hl);*/
  border-color: rgba(147,119,209,0.55);
}

.page-bbs .bbs-managebox__key:focus,
.page-bbs .bbs-reply__key:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--bbs-hl);
  border-color: rgba(147,119,209,0.75);
}

/* =========================================================
   削除選択時：ボタンを赤に（managebox に is-delete を付ける）
   ========================================================= */
.page-bbs .bbs-managebox.is-delete .bbs-managebox__btn{
  background: rgba(255,80,80,0.70);
}

/* =========================================================
   編集／削除キー：高さ 30px、文字サイズも縮小（placeholder含む）
   ========================================================= */
.page-bbs .bbs-managebox__key,
.page-bbs .bbs-reply__key{
  height: 30px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 30px;
}

.page-bbs .bbs-managebox__key::placeholder,
.page-bbs .bbs-reply__key::placeholder{
  font-size: 12px;
  line-height: 30px;
}

/* 送信ボタンも“背の低いキー”に合わせて少しだけ下げる（必要なら） */
.page-bbs .bbs-managebox__btn,
.page-bbs .bbs-reply__btn{
  height: 34px; /* キー30pxに対して操作しやすい最低限 */
  border-radius: 12px;
  font-size: 14px;
}

/* セレクトもキーと揃える（処理を選択） */
.page-bbs .bbs-managebox__select{
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
}

/* =========================================================
   Reply ops layout (1 key + edit/delete right aligned)
   ========================================================= */

.page-bbs .bbs-reply__key{
  width: 320px;
  max-width: 55vw;
}

/* ボタンは右側に寄る（キー→編集→削除の順） */
.page-bbs .bbs-reply__btn{
  margin-left: 0;
}

/* =========================================================
   Button sizing (manage + reply)
   ========================================================= */

.page-bbs .bbs-managebox__btn,
.page-bbs .bbs-reply__btn{
  height: 30px;
  border-radius: 10px;
  line-height: 30px;
  font-size: 12px;      /* 高さ30に合わせて縮小 */
  padding: 0 14px;
}

/* =========================================================
   Color mapping:
   - bbs-item + managebox => #62489b
   - bbs-preview => #432c78
   ========================================================= */

:root{
  --bbs-accent-item: #62489b;
  --bbs-accent-preview: #432c78;
}

/* thread card */
.page-bbs .bbs-item{
  border-color: var(--bbs-accent-item);
}
.page-bbs .bbs-item__bar{
  background: unset;
}

/* manage box */
.page-bbs .bbs-managebox{
  border-color: var(--bbs-accent-item);
  border: unset;
}
.page-bbs .bbs-managebox__bar{
  display: none;
  background: var(--bbs-accent-item);
}

/* preview */
.page-bbs .bbs-preview{
  border-color: var(--bbs-accent-preview);
}
.page-bbs .bbs-preview__head{
  background: unset;
}

/* =========================================================
   Backdrop blur for frames
   ========================================================= */

.page-bbs .bbs-searchbox,
.page-bbs .bbs-panel,
.page-bbs .bbs-item,
.page-bbs .bbs-preview,
.page-bbs .bbs-reply,
.page-bbs #reply,
.page-bbs .bbs-managebox{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* =========================================================
   Replies nested inside bbs-item: layout + ops
   ========================================================= */

.page-bbs .bbs-replies{
  padding: 18px 10px 6px;
}

/* 返信ボックスはスレッドの中で少しインデント（スクショ寄せ） */
.page-bbs .bbs-reply{
  margin: 18px 0 0;
  border: 2px solid #432c78;
}

/* visible key input only */
.page-bbs .bbs-reply__key--main{
  height: 30px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 30px;
  width: 320px;
  max-width: 55vw;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
@media (max-width: 420px) {
  .page-bbs .bbs-reply__ops {
    justify-content: center;
  }
  .page-bbs .bbs-reply__key--main {
    max-width: 100%;
  }
}
.page-bbs .bbs-reply__key--main::placeholder{
  font-size: 12px;
  line-height: 30px;
  color: rgba(255,255,255,0.35);
}

/* buttons size (requested) */
.page-bbs .bbs-managebox__btn,
.page-bbs .bbs-reply__btn{
  height: 30px;
  border-radius: 10px;
  line-height: 30px;
  font-size: 12px;
  padding: 0 14px;
}

/* reply edit/delete button colors (requested) */
.page-bbs .bbs-reply__btn--edit{
  background: rgba(147, 119, 209, 0.55);
  border: 0;
  color: #fff;
}
.page-bbs .bbs-reply__btn--danger{
  background: rgba(255, 80, 80, 0.55);
  border: 0;
  color: #fff;
}

/* forms stay inline */
.page-bbs .bbs-reply__form{
  display:inline-flex;
  align-items:center;
}

/* 管理ボックス：処理選択セレクトの矢印位置調整 */
.page-bbs .bbs-managebox__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 既存指定を尊重しつつ中央化 */
  padding-right: 42px;
  background-position: right 16px center;
  background-repeat: no-repeat;

  line-height: 30px;
  height: 30px;
}

/* Safari対策（高さズレ防止） */
.page-bbs .bbs-managebox__select::-ms-expand {
  display: none;
}

/* =========================================================
   Select arrow: remove native + draw centered custom arrow
   ========================================================= */

.page-bbs .bbs-managebox__select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 12px;
  height: 30px;
  line-height: 1.9;

  /* 右側に矢印用の余白 */
  padding-right: 42px;

  /* 自前矢印（白） */
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-size: 7px 7px, 7px 7px;

  /* ★縦中央＆右寄せ固定（ここが本題） */
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 12px) 50%;
  background-repeat: no-repeat;
}

/* IE/Edge(旧) のネイティブ矢印を消す */
.page-bbs .bbs-managebox__select::-ms-expand{ display:none; }


.bbs-list {
  margin-top: 30px;
}

/* single thread: back to list */
.page-bbs-single .bbs-back{
  margin: 0 0 30px;
  display: flex;
  justify-content: center;
}

.page-bbs-single .bbs-back__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  text-decoration: none;
  background: rgba(147, 119, 209, 0.7);
  color: #fff;
  font-size: 14px;
}

.page-bbs-single .bbs-back__link:hover{
  filter: brightness(1.05);
}

.page-bbs-single .bbs-item{
  scroll-margin-top: 240px; /* ヘッダー高さに合わせて調整 */
}
@media (max-width: 420px){
  .page-bbs-single .bbs-item{
    scroll-margin-top: 100px; /* ヘッダー高さに合わせて調整 */
  }
}
}