/* ==========================================================================
   招待コード掲示板（新フォーマット）
   shortcodes/invite_code_board.php から、掲示板を出力するページだけで読み込まれる

   テーマ側に「.article .article_box p { margin-bottom:1.4em }」「.article .article_box ol li { list-style:decimal inside }」
   「textarea { padding:11px; font-size:inherit }」「.comment-form .submit { margin:1em 0 }」など強い汎用ルールがあるため、
   掲示板内のサイズ・余白・リストマーカーは !important で固定している。
   ========================================================================== */

.oic-board {
  margin: 1em 0 0;
  scroll-margin-top: 80px;
}

/* 見出し（.article h2 の余白だけ詰める。線などの装飾はそのまま） */
.article .oic-board__title,
.oic-board .oic-board__title {
  margin: 0 0 12px !important;
}

/* テーマ側の段落余白を掲示板内では無効化 */
.oic-board p {
  margin: 0 !important;
}

.oic-board__lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #ccc;
}

.oic-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   各サイト掲示板へのリンク（横並び・横スクロール・1行）
   -------------------------------------------------------------------------- */
.oic-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.oic-links__label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: bold;
  color: #a7eaff;
  white-space: nowrap;
}

.oic-links__scroller {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 6px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(3, 148, 223, 0.55) rgba(255, 255, 255, 0.12);
}

.oic-links__scroller::-webkit-scrollbar {
  height: 6px;
}

.oic-links__scroller::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}

.oic-links__scroller::-webkit-scrollbar-thumb {
  background: rgba(3, 148, 223, 0.55);
  border-radius: 9999px;
}

.oic-links__scroller:focus-visible {
  outline: 2px solid rgba(3, 148, 223, 0.9);
  outline-offset: 2px;
}

.oic-links__item {
  flex: 0 0 auto;
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #0394df;
  border-radius: 9999px;
  background: rgba(3, 148, 223, 0.15);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.oic-links__item:hover {
  background: rgba(3, 148, 223, 0.45);
  color: #fff;
  text-decoration: none;
}

.oic-links__item.is-current {
  background: #0394df;
}

/* --------------------------------------------------------------------------
   投稿フォーム（WordPress 標準 comment_form() の出力 + SiteGuard CAPTCHA）
   -------------------------------------------------------------------------- */
.oic-form-wrap {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.oic-form-wrap .comment-respond {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
}

.oic-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
}

.oic-form p {
  margin: 0 !important;
  padding: 0 !important;
}

/* 入力欄（本文・CAPTCHA・名前欄） */
.oic-form textarea,
.oic-form input[type="text"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.oic-form textarea {
  height: 140px !important;
  min-height: 140px !important;
  max-height: 240px;
  resize: vertical;
}

.oic-form input[type="text"] {
  height: 36px !important;
}

/* CAPTCHA: 画像と入力欄を横並びにし、高さを揃える */
.oic-captcha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.oic-captcha img {
  flex: 0 0 auto;
  display: block;
  width: auto !important;
  height: 36px !important;
  max-width: 45%;
  margin: 0 !important;
  border-radius: 4px;
  background: #fff;
  object-fit: contain;
}

.oic-captcha input[type="text"] {
  flex: 0 1 220px;
  width: 220px !important;
  min-width: 120px;
}

/* SiteGuard の整形に失敗したときのフォールバック */
.oic-form img {
  max-width: 100%;
}

.oic-form label {
  font-size: 12px;
  color: #ccc;
}

/* 送信ボタン（幅いっぱい） */
.oic-form .oic-form__submit-row {
  display: block;
}

.oic-form .oic-form__submit,
.comment-form .oic-form__submit {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, #007bff, #0056b3) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: bold;
  line-height: 1.4 !important;
  text-align: center;
  cursor: pointer;
}

.oic-form .oic-form__submit:hover {
  filter: brightness(1.15);
}

.oic-form-wrap #cancel-comment-reply-link {
  display: none;
}

.oic-form__closed,
.oic-empty {
  font-size: 14px;
  color: #ccc;
}

/* --------------------------------------------------------------------------
   投稿一覧
   -------------------------------------------------------------------------- */
.oic-list-wrap {
  scroll-margin-top: 80px;
}

.oic-board .oic-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* テーマの「ol li { list-style: decimal inside }」を打ち消し、番号は PHP 側で出す */
.oic-board .oic-list .oic-item {
  list-style: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.oic-board .oic-list .oic-item::before,
.oic-board .oic-list .oic-item::marker {
  content: none !important;
  display: none !important;
}

/* ヘッダー行: 番号・名前・投稿日を横並び */
.oic-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1.5;
  color: #999;
}

.oic-item__no {
  font-weight: bold;
  color: #fff;
}

.oic-item__no::after {
  content: ".";
}

.oic-item__author {
  font-weight: bold;
  color: #7bdcb5;
}

.oic-item__date {
  color: #999;
}

.oic-item__site {
  display: inline-block;
  margin-left: auto;
  padding: 0 8px;
  border: 1px solid rgba(3, 148, 223, 0.6);
  border-radius: 9999px;
  background: rgba(3, 148, 223, 0.25);
  color: #a7eaff;
  font-weight: bold;
  text-decoration: none;
}

.oic-item__site:hover {
  background: rgba(3, 148, 223, 0.5);
  color: #fff;
  text-decoration: none;
}

/* このページ自身への投稿（リンクなし） */
.oic-item__site--self {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  font-weight: normal;
}

/* 本文 */
.oic-item__body {
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #eee;
  overflow-wrap: anywhere;
}

.oic-board .oic-item__body p + p {
  margin-top: 0.4em !important;
}

.oic-item__body a {
  color: #4fc3f7;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   ページ送り
   テーマ側の .page-numbers { width:25px; height:25px } と .comment-page-link { display:inline-flex }
   を打ち消す（幅固定だと 2 桁以上のページ番号が折り返す）
   -------------------------------------------------------------------------- */
.oic-board .oic-pager {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 14px 0 0 !important;
  font-size: 14px;
}

.oic-board .oic-pager .page-numbers {
  display: inline-block;
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  min-width: 2.2em;
  margin: 0 !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px;
  background: transparent !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.oic-board .oic-pager .page-numbers.current {
  border-color: #0394df !important;
  background: #0394df !important;
}

.oic-board .oic-pager .page-numbers.dots {
  min-width: 0;
  border-color: transparent !important;
  background: transparent !important;
  color: #aaa !important;
}

.oic-board .oic-pager a.page-numbers:hover {
  background: rgba(3, 148, 223, 0.35) !important;
}

/* --------------------------------------------------------------------------
   モバイル
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 各サイトの掲示板リンク: ラベルの下にリンク行を縦並びにし、ボタンを少し大きく */
  .oic-links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .oic-links__label {
    font-size: 13px;
  }

  .oic-links__scroller {
    width: 100%;
    gap: 8px;
    padding: 2px 0 8px;
  }

  .oic-links__item {
    padding: 6px 14px;
    font-size: 14px;
  }

  .oic-form textarea,
  .oic-form input[type="text"] {
    font-size: 16px !important; /* iOS の自動ズームを防ぐ */
  }

  .oic-form textarea {
    height: 120px !important;
    min-height: 120px !important;
  }

  .oic-form input[type="text"],
  .oic-captcha img {
    height: 40px !important;
  }

  .oic-form .oic-form__submit,
  .comment-form .oic-form__submit {
    padding: 12px 16px !important;
    font-size: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   検索欄（コメント一覧の下。入力に合わせて結果を直下に表示）
   -------------------------------------------------------------------------- */
.oic-search {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

/* 見出し（.article h3 の装飾を軽く上書き） */
.article .oic-search__title,
.oic-board .oic-search__title {
  margin: 0 0 10px !important;
  padding: 0 0 0 10px !important;
  border: 0 !important;
  border-left: 4px solid #0394df !important;
  font-size: 15px !important;
  font-weight: bold;
  line-height: 1.4 !important;
  color: #fff;
}

/* 見出し隣の総件数「（1,000件）」 */
.oic-board .oic-search__count {
  margin-left: 2px;
  font-size: 13px;
  font-weight: normal;
  white-space: nowrap;
}

.oic-search [hidden] {
  display: none !important;
}

.oic-search__form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.oic-search .oic-search__input {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  height: 40px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  -webkit-appearance: none;
  appearance: none;
}

.oic-search .oic-search__clear {
  flex: 0 0 auto;
  height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.oic-search .oic-search__clear:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 件数表示。.oic-board p { margin:0 !important } より優先させるため詳細度を上げる。空のときは領域を取らない */
.oic-board .oic-search__status {
  margin: 8px 0 0 !important;
  font-size: 13px;
  line-height: 1.4;
  color: #ccc;
}

.oic-board .oic-search__status:empty {
  display: none;
}

.oic-board .oic-search__results {
  margin-top: 10px !important;
}

.oic-search .oic-search__more {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid #0394df;
  border-radius: 4px;
  background: rgba(3, 148, 223, 0.15);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.oic-search .oic-search__more:hover {
  background: rgba(3, 148, 223, 0.4);
}

@media (max-width: 767px) {
  .oic-search .oic-search__input {
    height: 44px !important;
    font-size: 16px !important; /* iOS の自動ズームを防ぐ */
  }

  .oic-search .oic-search__clear {
    height: 44px;
  }
}

/* 検索結果のヒット語句（黄色ライン） */
.oic-board mark.oic-hl {
  background: #ffeb3b;
  color: #222;
  padding: 0 2px;
  border-radius: 2px;
  text-decoration: none;
}

.oic-board mark.oic-hl a,
.oic-board a mark.oic-hl {
  color: #0056b3;
}

/* 検索中は既存の一覧とページ送りを隠す */
.oic-board .oic-list-wrap[hidden],
.oic-board.is-searching .oic-list-wrap {
  display: none !important;
}

/* 送信前の入力チェック（フォーム下部のメッセージと未入力欄の強調） */
.oic-form-wrap [hidden] {
  display: none !important;
}

.oic-board .oic-form__error {
  margin: 8px 0 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: #ffb3b3;
}

.oic-form textarea.is-invalid,
.oic-form input[type="text"].is-invalid {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.35);
}