/* ==========================================================================
   招待コード掲示板（新フォーマット）
   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);
}

/* ==========================================================================
   追加機能（shortcodes/invite_code_board.php 後半）
   ========================================================================== */

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

/* 注意書き・まとめ掲示板への案内 */
.oic-board .oic-board__note {
  margin: 0 0 10px !important;
  font-size: 12px;
  line-height: 1.5;
  color: #aaa;
}

.oic-board .oic-board__hub {
  margin: 0 0 12px !important;
  font-size: 13px;
  line-height: 1.5;
  color: #ccc;
}

.oic-board__hub a {
  color: #4fc3f7;
}

/* --------------------------------------------------------------------------
   上部の2つのボタン（コードを探す / コードを投稿する）
   -------------------------------------------------------------------------- */
.oic-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
}

.oic-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid #0394df;
  border-radius: 8px;
  color: #fff !important;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
}

.oic-cta__btn--find {
  background: rgba(3, 148, 223, 0.15);
}

.oic-cta__btn--post {
  border-color: transparent;
  background: linear-gradient(135deg, #007bff, #0056b3);
}

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

/* --------------------------------------------------------------------------
   投稿パネル
   -------------------------------------------------------------------------- */
.oic-post {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(3, 148, 223, 0.6);
  border-radius: 8px;
  background: rgba(3, 148, 223, 0.08);
  scroll-margin-top: 80px;
}

.article .oic-post__title,
.oic-board .oic-post__title {
  margin: 0 0 8px !important;
  padding: 0 0 0 10px !important;
  border: 0 !important;
  border-left: 4px solid #0394df !important;
  background: none !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: #fff;
}

.oic-board .oic-post__lead {
  margin: 0 0 10px !important;
  font-size: 13px;
  line-height: 1.5;
  color: #ccc;
}

.oic-post .oic-form-wrap {
  margin: 0;
}

.oic-post__picker {
  display: flex;
  gap: 6px;
}

.oic-post__select,
.oic-form select {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 16px !important;
}

.oic-post__go {
  flex: 0 0 auto;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.oic-post__list {
  margin: 10px 0 0;
  font-size: 13px;
  color: #ccc;
}

.oic-post__list summary {
  cursor: pointer;
  color: #a7eaff;
}

.oic-board .oic-post__list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

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

.oic-board .oic-post__list li::before {
  content: none !important;
}

.oic-post__list a {
  color: #4fc3f7;
}

/* JavaScript が無いときは最初から開いている（ボタンはページ内リンクとして動く） */

/* --------------------------------------------------------------------------
   フォームの入力欄（投稿先・コード・補足）
   -------------------------------------------------------------------------- */
.oic-form .oic-form__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oic-form .oic-form__target {
  display: block;
  font-size: 13px;
  color: #ccc;
}

.oic-form .oic-form__target strong {
  color: #fff;
}

.oic-form__hint {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #aaa;
}

.oic-form__req {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 3px;
  background: #d9534f;
  color: #fff;
  font-size: 11px;
}

.oic-form .oic-form__code input[type="text"] {
  font-family: Menlo, Consolas, "Courier New", monospace;
}

.oic-form .oic-form__comment label {
  display: block;
  margin-bottom: 4px;
}

.oic-form select.is-invalid {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.35);
}

/* --------------------------------------------------------------------------
   サービスで絞り込む（ボタンは一覧の絞り込み。移動はリンクで区別）
   -------------------------------------------------------------------------- */
.oic-filter {
  margin: 0 0 10px;
}

.oic-board .oic-filter__label {
  margin: 0 0 6px !important;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.oic-filter__note {
  font-size: 12px;
  font-weight: normal;
  color: #aaa;
}

.oic-filter__chips,
.oic-filter__rest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.oic-filter__rest:not([hidden]) {
  display: contents;
}

.oic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}

.oic-chip:hover {
  background: rgba(3, 148, 223, 0.3);
}

.oic-chip.is-active {
  border-color: #0394df;
  background: #0394df;
  font-weight: bold;
}

.oic-chip__n {
  min-width: 1.6em;
  padding: 0 5px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 11px;
  text-align: center;
}

.oic-filter__toggle {
  margin: 8px 0 0;
  padding: 6px 0;
  border: 0;
  background: none;
  color: #4fc3f7;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.oic-filter__current {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 4px solid #0394df;
  border-radius: 4px;
  background: rgba(3, 148, 223, 0.12);
}

.oic-board .oic-filter__summary {
  margin: 0 0 6px !important;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.oic-filter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 13px;
}

.oic-filter__reset,
.oic-search__reset {
  min-height: 36px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.oic-filter__link,
.oic-search__post {
  color: #4fc3f7;
  font-size: 13px;
}

.oic-filter__link::after,
.oic-search__post::after {
  content: " →";
}

.oic-search__empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 8px 0 0;
}

.oic-search {
  scroll-margin-top: 80px;
}

.oic-find {
  scroll-margin-top: 80px;
}

/* --------------------------------------------------------------------------
   投稿: コード欄・コピー・続きを読む・通報
   -------------------------------------------------------------------------- */
.oic-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 10px 12px 0;
  padding: 8px 10px;
  border: 1px dashed rgba(3, 148, 223, 0.8);
  border-radius: 6px;
  background: rgba(3, 148, 223, 0.1);
}

.oic-code__label {
  font-size: 11px;
  font-weight: bold;
  color: #a7eaff;
}

.oic-code__value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #fff !important;
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 16px !important;
  font-weight: bold;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

.oic-code__value--url {
  font-size: 13px !important;
  font-weight: normal;
  letter-spacing: 0;
  color: #4fc3f7 !important;
  user-select: text;
  -webkit-user-select: text;
}

.oic-code__copy {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 36px;
  margin: 0;
  padding: 4px 12px;
  border: 0;
  border-radius: 4px;
  background: #0394df;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.oic-board.oic-js .oic-code__copy[hidden] {
  display: inline-block !important;
}

.oic-code__msg {
  flex: 1 0 100%;
  font-size: 12px;
  color: #7bdcb5;
}

.oic-code__msg:empty {
  display: none;
}

.oic-code__msg.is-error {
  color: #ffb3b3;
}

/* 長文は JavaScript が動くときだけ折りたたむ（HTML には全文が入っている） */
.oic-board.oic-js .oic-item__body.is-collapsible:not(.is-open) {
  position: relative;
  max-height: 9.6em;
  overflow: hidden;
}

.oic-board.oic-js .oic-item__body.is-collapsible:not(.is-open)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3em;
  background: linear-gradient(rgba(34, 34, 34, 0), #222);
  pointer-events: none;
}

.oic-item__foot {
  display: none;
}

.oic-board.oic-js .oic-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 8px;
}

.oic-item__more {
  min-height: 32px;
  margin: 0;
  padding: 2px 12px;
  border: 1px solid rgba(3, 148, 223, 0.8);
  border-radius: 4px;
  background: transparent;
  color: #a7eaff;
  font-size: 13px;
  cursor: pointer;
}

.oic-item__report {
  margin: 0 0 0 auto;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: #888;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.oic-report {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 12px 10px;
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.oic-report__reason {
  flex: 1 1 200px;
  height: 36px;
  margin: 0 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
}

.oic-report__send,
.oic-report__cancel {
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.oic-report__send {
  border-color: #d9534f;
  background: #d9534f;
}

.oic-board .oic-report__msg {
  flex: 1 0 100%;
  margin: 0 !important;
  font-size: 12px;
  color: #ccc;
}

@media (max-width: 767px) {
  .oic-cta__btn {
    min-height: 52px;
    font-size: 15px;
  }

  .oic-chip {
    min-height: 40px;
    font-size: 14px;
  }

  .oic-post__picker {
    flex-direction: column;
  }

  .oic-post__go {
    width: 100%;
  }

  .oic-code__copy {
    min-height: 40px;
  }
}
/* --------------------------------------------------------------------------
   提携サイトの当サイト限定コード（投稿一覧の先頭。利用者の投稿と区別する）
   -------------------------------------------------------------------------- */
.oic-partner {
  margin: 0 0 14px;
}

.oic-board .oic-partner__title {
  margin: 0 0 8px !important;
  padding: 0 0 0 10px;
  border-left: 4px solid #f5b400;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  color: #fff;
}

.oic-board .oic-list .oic-item.oic-item--partner {
  border: 2px solid #f5b400;
  background: rgba(245, 180, 0, 0.08);
}

.oic-item--partner .oic-item__head {
  background: rgba(245, 180, 0, 0.18);
}

.oic-item__badge {
  padding: 0 8px;
  border-radius: 3px;
  background: #f5b400;
  color: #222;
  font-weight: bold;
}

.oic-item--partner .oic-item__author {
  color: #ffe08a;
}

.oic-item--partner .oic-code {
  border-color: rgba(245, 180, 0, 0.8);
  background: rgba(245, 180, 0, 0.1);
}

.oic-item--partner .oic-code__label {
  color: #ffe08a;
}

.oic-code__note {
  font-size: 12px;
  color: #ffe08a;
}

.oic-partner__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #ccc;
}

.oic-partner__note a {
  color: #4fc3f7;
}

.oic-partner__cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #ff4d4d, #d9230f);
  color: #fff !important;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none !important;
}

.oic-partner__cta:hover {
  filter: brightness(1.1);
}

.oic-chip--partner {
  border-color: #f5b400;
}

.oic-chip__badge {
  padding: 0 5px;
  border-radius: 3px;
  background: #f5b400;
  color: #222;
  font-size: 10px;
  font-weight: bold;
}

.oic-chip--partner.is-active .oic-chip__badge {
  background: #fff;
}

@media (max-width: 767px) {
  .oic-partner__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .oic-partner__cta {
    width: 100%;
    min-height: 44px;
  }
}
/* 0件の案内（結果の下。限定コードがあるときはその下に文言を出す） */
.oic-search .oic-search__empty {
  margin-top: 10px;
}

.oic-board .oic-search__empty-msg {
  flex: 1 0 100%;
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: #ccc;
}

.oic-board .oic-search__empty-msg:empty {
  display: none;
}
/* まとめ掲示板「すべて」の一覧の先頭に出す、限定コードの1行案内 */
.oic-board .oic-partner-hint {
  margin: 0 0 10px !important;
}

.oic-partner-hint__link {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #f5b400;
  border-radius: 6px;
  background: rgba(245, 180, 0, 0.08);
  color: #fff !important;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none !important;
}

.oic-partner-hint__link:hover {
  background: rgba(245, 180, 0, 0.18);
}

.oic-partner-hint__link .oic-item__badge {
  flex: 0 0 auto;
  font-size: 12px;
}

.oic-partner-hint__text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: bold;
}

.oic-partner-hint__arrow {
  flex: 0 0 auto;
  color: #f5b400;
  font-weight: bold;
}
/* 一覧にないサービスの投稿（サービス名に「未掲載」を付ける）と、承認待ちの案内 */
.oic-item__unlisted {
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  color: #ddd;
  font-size: 10px;
  font-weight: normal;
}

.oic-board .oic-board__notice {
  margin: 0 0 12px !important;
  padding: 8px 12px;
  border-left: 4px solid #7bdcb5;
  border-radius: 4px;
  background: rgba(123, 220, 181, 0.12);
  font-size: 14px;
  color: #fff;
}
/* --------------------------------------------------------------------------
   表示の整え（説明文・1行案内・コード欄・スマホの絞り込みボタン）
   -------------------------------------------------------------------------- */
.oic-board .oic-filter__label {
  margin: 0 0 2px !important;
}

.oic-board .oic-filter__note {
  display: block;
  margin: 0 0 8px !important;
  line-height: 1.6;
}

/* 文の切れ目で改行されるように、ひとまとまりずつ折り返す */
.oic-filter__note > span,
.oic-partner-hint__text > span {
  display: inline-block;
}

.oic-filter__note .oic-chip__badge {
  margin: 0 2px;
}

@media (max-width: 767px) {
  /* 絞り込みボタン: 2列で幅をそろえる。「限定」は枠の角に小さく付けてサービス名の幅を確保する */
  .oic-filter__chips,
  .oic-filter__rest:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 8px;
    padding-top: 6px;
  }

  .oic-filter__rest:not([hidden]) {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  /* サービス名を1行で中央に。件数（右上）と「限定」（左上）は枠の角に小さく付ける */
  .oic-chip {
    position: relative;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 8px 8px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.25;
  }

  .oic-chip__label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .oic-chip__n {
    position: absolute;
    top: -8px;
    right: 6px;
    min-width: 1.8em;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: #222;
    font-size: 10px;
    line-height: 1.5;
  }

  .oic-chip.is-active .oic-chip__n {
    border-color: #0394df;
  }

  .oic-chip--partner .oic-chip__badge {
    position: absolute;
    top: -8px;
    left: 6px;
    padding: 0 4px;
    line-height: 1.5;
  }

  /* 1行案内: バッジを上段、文言を下段、矢印を右端に */
  .oic-partner-hint__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "badge arrow" "text arrow";
    gap: 4px 10px;
    align-items: center;
  }

  .oic-partner-hint__link .oic-item__badge {
    grid-area: badge;
    justify-self: start;
  }

  .oic-partner-hint__text {
    grid-area: text;
  }

  .oic-partner-hint__arrow {
    grid-area: arrow;
    font-size: 18px;
  }

  /* コード欄: 「ラベル」→「コード＋コピー」→「特典の注記・メッセージ」の順に段を分ける */
  .oic-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
  }

  .oic-code__label,
  .oic-code__note,
  .oic-code__msg {
    grid-column: 1 / -1;
  }

  .oic-code__note {
    order: 3;
  }

  .oic-code__msg {
    order: 4;
  }
}
/* 幅 640px 以上（タブレット・PC）は絞り込みボタンを4列に。主要サービスは「すべて」と合わせて16個なので2列・4列のどちらでも最後の段まで埋まる */
@media (min-width: 640px) and (max-width: 767px) {
  .oic-filter__chips,
  .oic-filter__rest:not([hidden]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* PC もスマホと同じ格子状にそろえる（件数は右上、「限定」は左上の角） */
@media (min-width: 768px) {
  .oic-filter__chips,
  .oic-filter__rest:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 10px;
    padding-top: 6px;
  }

  .oic-filter__rest:not([hidden]) {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .oic-chip {
    position: relative;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.25;
  }

  .oic-chip__label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .oic-chip__n {
    position: absolute;
    top: -8px;
    right: 8px;
    min-width: 1.8em;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: #222;
    font-size: 11px;
    line-height: 1.5;
  }

  .oic-chip.is-active .oic-chip__n {
    border-color: #0394df;
  }

  .oic-chip--partner .oic-chip__badge {
    position: absolute;
    top: -8px;
    left: 8px;
    padding: 0 5px;
    line-height: 1.5;
  }
}