/*!
 * kouikuken-core: AFFINGER st-slidebox 互換スタイル
 *
 * 対象マークアップ（DB 格納済み・書き換え不可。東京都庁=PDF型 / 大阪府庁=テキスト型で実測）:
 *   div.st-slidebox-c.is-collapsed[data-st-slidebox]  ← inline style="background-color:#fafafa|#ffffff" あり
 *     p.st-btn-open[data-st-slidebox-toggle]          ← 大阪型は inline style="color:#bb271a" あり
 *       i.st-fa[data-st-slidebox-icon]                ← 空要素（chevron-down / angle-down 型の両方あり）
 *       span.st-slidebox-btn-text[data-st-slidebox-text]
 *     div.st-slidebox[data-st-slidebox-content]       ← 本文
 *
 * 見た目の正: モック article.html の details.year-row / .year-group
 *   （枠 1px --line-strong・行高 48px・hover/open 時 --bg-stripe 地・
 *     シェブロンは右端 --ink-3 で開時 180 度回転・中身 padding 16px 20px）
 * トークンはテーマ style.css の CSS 変数を参照（テーマ未読込時用のフォールバック併記）。
 * AFFINGER の is-st-toggle-* 等の補助クラスには依存しない（AFFINGER 停止でその CSS は消えるため）。
 */

/* ---------- 枠（.year-group 相当） ---------- */
.st-slidebox-c[data-st-slidebox] {
  border: 1px solid var(--line-strong, #9AA3B0);
  /* DB 内の inline style（#fafafa / #ffffff）を無効化して白地に統一 */
  background-color: #fff !important;
  margin: 16px 0 32px;
  padding: 0;
}

/* ---------- 開閉ヘッダ（.year-row > summary 相当） ---------- */
.st-slidebox-c[data-st-slidebox] > .st-btn-open {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 16px;
  margin: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  /* 大阪型の inline style="color:#bb271a" を無効化 */
  color: var(--ink, #1F2530) !important;
}
.st-slidebox-c[data-st-slidebox] > .st-btn-open:hover {
  background: var(--bg-stripe, #F6F7F9);
}
.st-slidebox-c[data-st-slidebox]:not(.is-collapsed) > .st-btn-open {
  background: var(--bg-stripe, #F6F7F9);
  border-bottom: 1px solid var(--line, #D8DCE3);
}
.st-slidebox-c[data-st-slidebox] > .st-btn-open:focus-visible {
  outline: 2px solid var(--gold-500, #B99B54);
  outline-offset: -2px;
}

/* ラベル（マークアップでは <i> が先頭だが、モック同様シェブロンを右端へ送る） */
.st-slidebox-c[data-st-slidebox] > .st-btn-open .st-slidebox-btn-text {
  order: 1;
}

/* ---------- シェブロン（.year-row .chevron 相当・CSS 描画） ----------
   AFFINGER のアイコンクラス（st-svg-chevron-down / st-svg-angle-down /
   st-svg-minus-thin）はフォント・SVG 実体が無いため見た目には使わず、
   .is-collapsed の有無だけで向きを決める（JS のクラス切替とは独立に成立）。 */
.st-slidebox-c[data-st-slidebox] > .st-btn-open [data-st-slidebox-icon] {
  order: 2;
  margin-left: auto;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-right: 2px solid var(--ink-3, #6B7280);
  border-bottom: 2px solid var(--ink-3, #6B7280);
  transform: translateY(-2px) rotate(45deg); /* 下向き */
  transition: transform .15s;
}
.st-slidebox-c[data-st-slidebox]:not(.is-collapsed) > .st-btn-open [data-st-slidebox-icon] {
  transform: translateY(2px) rotate(225deg); /* 上向き */
}
@media (prefers-reduced-motion: reduce) {
  .st-slidebox-c[data-st-slidebox] > .st-btn-open [data-st-slidebox-icon] {
    transition: none;
  }
}

/* ---------- 中身（.year-body 相当） ---------- */
.st-slidebox-c[data-st-slidebox] > .st-slidebox {
  padding: 16px 20px;
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
.st-slidebox-c[data-st-slidebox].is-collapsed > .st-slidebox {
  display: none;
}

/* ============================================================
   2026-07-22 オーナー指示分
   ============================================================ */
/* 「過去問を表示」のトグル文言は赤（差し色）。属性一致で対象を限定 */
.st-btn-open [data-st-slidebox-text][data-st-slidebox-text-collapsed="過去問を表示"] {
  color: var(--red, #BB271A);
  font-weight: 700;
}
/* アコーディオン下端の「閉じる」ボタン（JSが中身の末尾に挿入。閉時は中身ごと非表示） */
.kk-slidebox-close {
  display: flex;
  justify-content: center;
  padding: 4px 0 16px;
}
.kk-slidebox-close button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 18px;
  background: #fff;
  border: 1px solid var(--navy-700, #17153F);
  border-radius: 4px;
  color: var(--navy-700, #17153F);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.kk-slidebox-close button:hover { background: var(--bg-stripe, #F6F7F9); }