/* =====================================================
   SPI ミニクイズ（記事埋め込み用）
   見た目とインタラクションは spi-exam（模試）と同じ
   デザイントークンに揃え、外側のページヘッダーは無し
   ===================================================== */
.spi-mini {
    /* ブランドカラー（reashu.com 公式） */
    --m-green: #2AA59A;       /* メイン */
    --m-green-dark: #1f8a80;
    --m-green-light: #DFFAF6; /* 背景 */
    --m-orange: #FF9300;      /* アクセント */
    --m-orange-light: #FFB45C;
    --m-blue: #4a7fd0;
    --m-blue-dark: #3a6cbb;
    --m-red: #e04e4e;
    --m-red-light: #fdecec;
    --m-yellow: #f1c40f;
    --m-text: #1f2328;
    --m-muted: #6a737d;
    --m-border: #e1e4e8;
    --m-surface: #f6f8fa;
    --m-line: #06C755;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    color: var(--m-text);
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: 10px;
    padding: 1.6em 1.6em 1.4em;
    margin: 1.8em 0;
    line-height: 1.75;
}
.spi-mini * { box-sizing: border-box; }
.spi-mini-screen[hidden] { display: none !important; }

/* ===== タイトル（SANGO等テーマの entry-content h3 デフォルトを打ち消し） ===== */
.spi-mini .spi-mini-title {
    margin: 0 0 .6em !important;
    padding: 0 0 0 .7em !important;
    border: 0 !important;
    border-left: 4px solid var(--m-green) !important;
    background: none !important;
    font-size: 1.25em;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.4;
}
.spi-mini .spi-mini-title::before,
.spi-mini .spi-mini-title::after { content: none !important; display: none !important; }

.spi-mini-lead {
    margin: 0 0 1em;
    font-size: .95em;
    color: var(--m-muted);
}

/* ===== ボタン ===== */
.spi-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    padding: .75em 1.6em;
    border-radius: 6px;
    border: 1.5px solid transparent;
    font: inherit;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .05s, box-shadow .15s;
}
.spi-mini-btn:active:not(:disabled) { transform: translateY(1px); }
.spi-mini-btn-primary {
    background: var(--m-green);
    color: #fff;
    border-color: var(--m-green);
}
.spi-mini-btn-primary:hover { background: var(--m-green-dark); border-color: var(--m-green-dark); }
.spi-mini-btn-next {
    background: var(--m-blue);
    color: #fff;
    border-color: var(--m-blue);
    padding: .8em 1.8em;
}
.spi-mini-btn-next:hover:not(:disabled) { background: var(--m-blue-dark); border-color: var(--m-blue-dark); }
.spi-mini-btn-next:disabled {
    background: #b0bec5;
    border-color: #b0bec5;
    cursor: not-allowed;
    opacity: .7;
}
.spi-mini-btn-ghost {
    background: #fff;
    color: var(--m-green-dark);
    border-color: var(--m-green);
}
.spi-mini-btn-ghost:hover { background: var(--m-green); color: #fff; }

/* 開始画面の派手CTAボタン（オレンジ） */
.spi-mini-btn-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: 1em 2em;
    background: linear-gradient(180deg, var(--m-orange-light) 0%, var(--m-orange) 100%);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    font-size: 1.05em;
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow:
        0 6px 14px rgba(255, 147, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.spi-mini-btn-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        0 10px 22px rgba(255, 147, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}
.spi-mini-btn-cta:active { transform: translateY(0); }
.spi-mini-btn-cta-icon { flex: none; }
.spi-mini-btn-cta-arrow {
    flex: none;
    transition: transform .25s ease;
}
.spi-mini-btn-cta:hover .spi-mini-btn-cta-arrow { transform: translateX(4px); }

/* フッターのキャッチコピー */
.spi-mini-intro-footnote {
    position: relative;
    z-index: 1;
    margin: 1.1em auto 0;
    font-size: .85em;
    color: var(--m-muted);
    font-style: italic;
    letter-spacing: .02em;
}

/* ===== 開始画面（ワクワク版） ===== */
.spi-mini-intro {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 2.4em 9em 2em;
    margin: -1.6em -1.6em -1.4em;
    border-radius: 10px;
    background:
        radial-gradient(circle at 12% 18%, rgba(42, 165, 154, .08) 0, transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(42, 165, 154, .10) 0, transparent 32%),
        linear-gradient(180deg, var(--m-green-light) 0%, #FFFFFF 90%);
}
.spi-mini-intro > * { position: relative; z-index: 1; }
.spi-mini-intro-illust { z-index: 0; }

/* 背景の抽象ブロブ */
.spi-mini-intro-blob {
    position: absolute;
    border-radius: 50%;
    background: var(--m-green-light);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}
.spi-mini-intro-blob-1 { width: 120px; height: 120px; top: -30px;  left: -40px;  background: #D8F1EE; opacity: .7; }
.spi-mini-intro-blob-2 { width: 80px;  height: 80px;  top: 30%;    right: -30px; background: #B6E9E4; opacity: .5; }
.spi-mini-intro-blob-3 { width: 60px;  height: 60px;  bottom: -20px; left: 20%;  background: #FCE952; opacity: .35; }

/* イラスト */
.spi-mini-intro-illust {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    object-fit: contain;
    opacity: .95;
}
.spi-mini-intro-illust-left {
    left: -10px;
    top: 38%;
    transform: translateY(-50%);
    width: 130px;
    height: auto;
}
.spi-mini-intro-illust-right {
    right: -10px;
    top: 42%;
    transform: translateY(-50%);
    width: 145px;
    height: auto;
}
.spi-mini-intro-illust-bar {
    right: 12px;
    bottom: 12px;
    width: 60px;
    height: auto;
    opacity: .7;
}

/* タグライン */
.spi-mini-intro-tagline {
    position: relative;
    z-index: 1;
    margin: 0 0 .6em;
    font-size: .92em;
    font-weight: 600;
    color: var(--m-green-dark);
    display: inline-flex;
    align-items: center;
    gap: .5em;
}
.spi-mini-intro-tagline-mark {
    color: var(--m-green);
    font-weight: 700;
    font-size: 1.1em;
}

/* メインタイトル（SANGO等テーマの entry-content h3 デフォルトを打ち消し） */
.spi-mini .spi-mini-intro-h1 {
    position: relative;
    z-index: 1;
    margin: 0 auto .35em !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    background: none !important;
    font-size: 1.55em;
    font-weight: 800;
    color: var(--m-text);
    letter-spacing: .03em;
    line-height: 1.35;
    text-align: center;
}
.spi-mini .spi-mini-intro-h1::before,
.spi-mini .spi-mini-intro-h1::after { content: none !important; display: none !important; }

/* リード */
.spi-mini-intro-lead {
    position: relative;
    z-index: 1;
    margin: 0 auto 1.1em;
    max-width: 32em;
    font-size: .95em;
    color: var(--m-muted);
    line-height: 1.7;
}

/* バッジ群 */
.spi-mini-intro-meta {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: .55em;
    flex-wrap: wrap;
    margin-bottom: 1.4em;
}
.spi-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .45em 1em;
    background: #fff;
    color: var(--m-green-dark);
    border: 1.5px solid #B6E9E4;
    border-radius: 999px;
    font-size: .9em;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(38, 166, 154, .08);
}
.spi-mini-badge-icon { flex: none; color: var(--m-green); }
.spi-mini-badge-line {
    background: rgba(6, 199, 85, .12);
    color: #04863a;
    border-color: rgba(6, 199, 85, .25);
}

/* ===== 出題画面：ヘッダー（タイトル + 解答状況） ===== */
.spi-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1.3em;
}
.spi-mini .spi-mini-header-title {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    background: none !important;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}
.spi-mini .spi-mini-header-title::before,
.spi-mini .spi-mini-header-title::after { content: none !important; display: none !important; }

.spi-mini-status {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    flex: none;
    font-size: .9em;
    color: var(--m-muted);
    background: var(--m-surface);
    padding: .35em .8em;
    border-radius: 999px;
}
.spi-mini-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m-yellow);
    flex: none;
}
.spi-mini-status-label { font-weight: 500; }
.spi-mini-status-count {
    font-weight: 700;
    color: var(--m-text);
    font-size: 1em;
}
.spi-mini-status-count [data-role="answered"] {
    color: var(--m-green-dark);
    font-size: 1.1em;
}
.spi-mini-status-slash { color: var(--m-muted); margin: 0 .15em; font-weight: 500; }


/* ===== 本体：左=問題 / 右=選択肢（模試と同じ2列レイアウト） ===== */
.spi-mini-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.6em;
    margin-bottom: 1.2em;
}
/* 通常時（passage なし）: .spi-mini-questions が spi-mini-body 全幅を占める */
/* display: contents により子要素が grid の直接セルとして振る舞う */
.spi-mini-questions {
    display: contents;
}

/* 表組みなど横幅の要る問題は2列だと表が見切れるため専用レイアウトに切り替える。
   JS の renderQuestion が問題文に <table> を検出した時だけ .spi-mini-body--stack を
   付与し、同時に「次へ」ボタン(.spi-mini-actions)を body 内へ移動する。
   配置：問題＋表＝上・全幅／選択肢＝下の左／次へボタン＝下の右。
   minmax(0,*) と min-width:0 でグリッドセルが内容幅で膨らむのを防ぎ、
   表は .spi-mini-table-wrap の overflow-x でセル内スクロール（スマホはみ出し防止）。 */
.spi-mini-body--stack {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "q q"
        "choices actions";
    gap: 1em 1.4em;
    align-items: start;
}
.spi-mini-body--stack .spi-mini-q       { grid-area: q;       min-width: 0; }
.spi-mini-body--stack .spi-mini-choices { grid-area: choices; min-width: 0; }
.spi-mini-body--stack .spi-mini-actions {
    grid-area: actions;
    margin: 0;
    align-self: center;
    justify-content: flex-end;
}
@media (max-width: 720px) {
    .spi-mini-body--stack {
        grid-template-columns: 1fr;
        grid-template-areas:
            "q"
            "choices"
            "actions";
    }
    .spi-mini-body--stack .spi-mini-actions { align-self: stretch; }
}

/* 図表読み取り問題の図（SVG等）：問題文の先頭に置き、上に大きく表示する。
   このクラスがあると JS が .spi-mini-body--stack（図表＝上・選択肢＝下）に切替える。 */
.spi-mini-figure {
    width: 100%;
    margin: 0 0 .6em;
    text-align: center;
}
.spi-mini-figure svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 4px auto 0;
}

/* 問題文中のテーブル：狭幅では横スクロール（ラッパーで包む／JSが付与）、
   セルは折り返さず罫線付きで読みやすく。テーブル自体は display:table のまま
   （display:block にすると罫線が描画されない）。 */
.spi-mini-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: .7em 0;
}
.spi-mini-q-text table {
    border-collapse: collapse;
    font-size: .92em;
    background: #fff;
}
.spi-mini-q-text th,
.spi-mini-q-text td {
    border: 1px solid var(--m-border);
    padding: .4em .65em;
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
}
.spi-mini-q-text thead th { background: var(--m-green-light); font-weight: 700; }
.spi-mini-q-text thead th:first-child,
.spi-mini-q-text tbody td:first-child { text-align: left; }
/* 先頭ラベル列（「パンフレット売上部数（部）」等の長い見出し）は折り返し可にする。
   nowrap のままだとラベル列が幅を独占し、データ列が潰れて見出し（公演1 等）が
   不自然に折れるため。数値・年号などのデータ列は nowrap を維持して途中改行を防ぐ。 */
.spi-mini-q-text th:first-child,
.spi-mini-q-text td:first-child { white-space: normal; }

/* スマホでは横スクロールに頼らず、表を画面幅に収めて読ませる。
   width:100% + フォント/パディング縮小 + 見出し折り返し可（2016年 等）で
   1画面に収める。数値セルは途中改行しない（24,750 が割れない）。
   それでも収まらない極端な表だけ .spi-mini-table-wrap の横スクロールが残る安全網。 */
@media (max-width: 540px) {
    .spi-mini-q-text table { width: 100%; font-size: .74em; }
    .spi-mini-q-text th,
    .spi-mini-q-text td { padding: .45em .3em; line-height: 1.25; }
}

/* 問題カード（模試の .spi-quiz-question と同等デザイン） */
.spi-mini-q {
    background: #f6fffe;
    border: 1.5px solid var(--m-green);
    border-left: 5px solid var(--m-green);
    border-radius: 8px;
    padding: 1.2em 1.4em;
}
.spi-mini-q-text {
    margin: 0;
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.7;
    color: var(--m-text);
    white-space: pre-wrap;
}
.spi-mini-q-text strong { font-weight: 500; }
.spi-mini-q-text .spi-mini-qnum {
    font-weight: 800;
    color: var(--m-green-dark);
    margin-right: .25em;
    font-size: 1.05em;
}
/* v4.9.1 polish：自動検知ルートで wpautop が生成する <p> 段落の縦マージンを抑制。
   既存ルール（.spi-mini-q-text は white-space: pre-wrap）を一切変更せず追記のみ。 */
.spi-mini-q-text p { margin: 0.4em 0; }
.spi-mini-q-text p:first-child { margin-top: 0; }
.spi-mini-q-text p:last-child  { margin-bottom: 0; }

/* 選択肢（模試の .spi-quiz-choice と同等デザイン） */
/* SANGO等テーマの entry-content > ul の枠線・背景・li::before / ::marker を完全打ち消し */
.spi-mini ul.spi-mini-choices,
.spi-mini .spi-mini-choices,
.spi-mini .spi-mini-choices li {
    list-style: none !important;
    list-style-type: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
.spi-mini .spi-mini-choices li::before,
.spi-mini .spi-mini-choices li::after,
.spi-mini .spi-mini-choices li::marker {
    content: none !important;
    display: none !important;
    background: none !important;
}
.spi-mini ul.spi-mini-choices,
.spi-mini-choices {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.spi-mini-choices li {
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0;
}

.spi-mini-choice {
    display: flex;
    align-items: center;
    gap: .8em;
    width: 100%;
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: 6px;
    padding: .9em 1.2em;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.spi-mini-choice:hover { border-color: var(--m-green); }
.spi-mini-choice.is-selected {
    border-color: var(--m-green);
    background: var(--m-green-light);
}
.spi-mini-choice input[type="radio"],
.spi-mini-choice input[type="checkbox"] {
    margin: 0;
    accent-color: var(--m-green);
    width: 18px;
    height: 18px;
    flex: none;
    cursor: pointer;
}
.spi-mini-choice input:disabled { cursor: default; }
.spi-mini-choice input:disabled ~ .spi-mini-choice-text { opacity: .55; }

/* 複数選択クイズ（7択から2つ選ぶ等）の選択数ガイド */
.spi-mini-pick-note {
    display: block;
    margin-top: .5em;
    font-size: .82em;
    font-weight: 600;
    color: var(--m-green-dark, #1f8a80);
}

/* =====================================================
   解説モード（interpret）結果：受検フィードバック
   選んだ回答ごとに「企業からの見え方」を上品に提示する
   ===================================================== */
/* 解説モードは設問間をゆったり空ける（review grid の gap を上書き） */
.spi-mini--interpret .spi-mini-review { gap: 1.5em; }
.spi-mini-interp-q { margin: 0; }

/* 設問ヘッダー（Qバッジ＋設問文） */
.spi-mini-interp-qhead {
    display: flex;
    align-items: baseline;
    gap: .6em;
    margin: 0 0 .7em;
}
.spi-mini .spi-mini-interp-qno {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 1.7em;
    padding: 0 .7em;
    border-radius: 999px;
    background: var(--m-green);
    color: #fff;
    font-weight: 800;
    font-size: .72em;
    letter-spacing: .06em;
    transform: translateY(-.1em);
}
.spi-mini .spi-mini-interp-question {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600;
    font-size: 1em;
    line-height: 1.7;
    color: var(--m-text);
}

/* 回答カード群（1枚のカードを薄い区切り線で分割） */
.spi-mini-interp-picks {
    border: 1px solid var(--m-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .04);
    overflow: hidden;
}
.spi-mini-interp-pick {
    padding: .85em 1em .9em;
}
.spi-mini-interp-pick + .spi-mini-interp-pick {
    border-top: 1px solid var(--m-border);
}

/* 選んだ回答（見出し）：緑の丸チェックバッジ付き */
.spi-mini .spi-mini-interp-choice {
    position: relative;
    margin: 0 0 .35em !important;
    padding: 0 0 0 1.85em !important;
    font-weight: 700;
    font-size: .96em;
    line-height: 1.5;
    color: var(--m-text);
}
.spi-mini .spi-mini-interp-choice::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .05em;
    width: 1.35em;
    height: 1.35em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--m-green);
    color: #fff;
    font-size: .78em;
    font-weight: 800;
    line-height: 1;
}

/* 全選択肢表示モード（show_all_feedback：TAL図形配置等）。
   未選択の選択肢は中立マーカー（緑✓を付けない＝全部選んだように見せない）、
   選んだ分だけ緑✓＋淡い緑背景でハイライトし「あなたの選択」バッジを出す。 */
.spi-mini--show-all-fb .spi-mini-interp-choice::before {
    content: "";
    background: #e3eaea;
}
.spi-mini--show-all-fb .spi-mini-interp-pick.is-picked {
    background: var(--m-green-light, #E4F8F6);
}
.spi-mini--show-all-fb .spi-mini-interp-pick.is-picked .spi-mini-interp-choice::before {
    content: "✓";
    background: var(--m-green);
}
.spi-mini-interp-yourpick {
    display: inline-block;
    margin-left: .5em;
    padding: .08em .55em;
    border-radius: 999px;
    background: var(--m-green);
    color: #fff;
    font-size: .68em;
    font-weight: 700;
    vertical-align: middle;
}

/* 「企業からの見え方」ラベル＋本文 */
.spi-mini .spi-mini-interp-view {
    margin: 0 !important;
    padding: 0 0 0 1.85em !important;
    font-size: .9em;
    line-height: 1.7;
    color: #4a5158;
}
.spi-mini .spi-mini-interp-view::before {
    content: "企業からの見え方";
    display: block;
    margin-bottom: .15em;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--m-green-dark);
}

.spi-mini-interp-empty {
    padding: .85em 1em;
    color: var(--m-muted);
    font-size: .92em;
}

/* =====================================================
   yesno モード（玉手箱・性格検査）
   出題：4文 × YES/NO 二系統選択 ／ 結果：近い・遠いの見え方
   ===================================================== */
.spi-mini-choices.is-yesno {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55em;
}
.spi-mini-choices.is-yesno .spi-mini-yn-head {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: 0 .9em;
    margin: 0;
}
.spi-mini-yn-head .spi-mini-yn-text { flex: 1; }
.spi-mini-yn-opts {
    flex: none;
    display: flex;
    gap: .5em;
}
.spi-mini-yn-h {
    width: 62px;
    white-space: nowrap;
    text-align: center;
    font-size: .72em;
    font-weight: 800;
    letter-spacing: .04em;
}
.spi-mini-yn-h-yes { color: var(--m-green-dark, #1f8a80); }
.spi-mini-yn-h-no  { color: #c0392b; }

.spi-mini-choices.is-yesno .spi-mini-yn-row {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .7em .9em;
    border: 1.5px solid var(--m-border, #e3eceb);
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.spi-mini-choices.is-yesno .spi-mini-yn-row.is-yes {
    border-color: var(--m-green, #26A69A);
    background: var(--m-green-light, #f0fdfb);
}
.spi-mini-choices.is-yesno .spi-mini-yn-row.is-no {
    border-color: #e04e4e;
    background: #fff5f5;
}
.spi-mini-yn-row .spi-mini-yn-text {
    flex: 1;
    font-size: .875em;
    font-weight: 600;
    line-height: 1.5;
    color: var(--m-text);
}
.spi-mini-yn-btn {
    position: relative;
    width: 62px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #d7e0df;
    border-radius: 10px;
    background: #fafdfc;
    color: #8a9a98;
    font-weight: 800;
    font-size: .8em;
    letter-spacing: .03em;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}
.spi-mini-yn-btn input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.spi-mini-yn-yes:has(input:checked) {
    background: var(--m-green, #26A69A);
    border-color: var(--m-green, #26A69A);
    color: #fff;
}
.spi-mini-yn-no:has(input:checked) {
    background: #e04e4e;
    border-color: #e04e4e;
    color: #fff;
}

/* 結果：YES/NO それぞれの「見え方」カード。近い＝緑・遠い＝赤のアクセント */
.spi-mini-interp-pick.is-yes { border-left: 3px solid var(--m-green, #26A69A); }
.spi-mini-interp-pick.is-no  { border-left: 3px solid #e04e4e; }
.spi-mini--yesno .spi-mini-interp-choice { padding-left: 0 !important; }
.spi-mini--yesno .spi-mini-interp-choice::before { display: none; }
.spi-mini--yesno .spi-mini-interp-view { padding-left: 0 !important; }
.spi-mini-yn-tag {
    display: inline-block;
    margin-right: .55em;
    padding: .12em .65em;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 800;
    letter-spacing: .03em;
    vertical-align: middle;
}
.spi-mini-interp-pick.is-yes .spi-mini-yn-tag {
    background: var(--m-green-light, #E4F8F6);
    color: var(--m-green-dark, #1f8a80);
}
.spi-mini-interp-pick.is-no .spi-mini-yn-tag {
    background: var(--m-red-light, #fdecec);
    color: #c0392b;
}

@media (max-width: 480px) {
    .spi-mini-yn-h { width: 62px; }
    .spi-mini-yn-btn { width: 62px; height: 40px; }
    .spi-mini-choices.is-yesno .spi-mini-yn-row { padding: .65em .7em; gap: .5em; }
    .spi-mini-yn-row .spi-mini-yn-text { font-size: .82em; }
}

/* =====================================================
   総合診断カード（SPI性格検査の interpret summary）
   読者の不安「この回答でいい?矛盾?印象?」に結果トップで答える
   ===================================================== */
.spi-mini-summary {
    margin: 0 0 1.6em;
    padding: 1.1em 1.2em 1.2em;
    border: 1px solid var(--m-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .04);
}
.spi-mini .spi-mini-summary-title {
    margin: 0 0 .9em !important;
    padding: 0 0 0 .65em !important;
    border: 0 !important;
    border-left: 4px solid var(--m-green) !important;
    background: none !important;
    font-size: 1.1em;
    font-weight: 800;
    color: var(--m-text);
    line-height: 1.4;
}
.spi-mini .spi-mini-summary-title::before,
.spi-mini .spi-mini-summary-title::after { content: none !important; display: none !important; }

.spi-mini-summary-rows {
    display: flex;
    flex-direction: column;
    gap: .7em;
}
.spi-mini-summary-row {
    padding: .75em .85em;
    border-radius: 10px;
    border: 1px solid var(--m-border);
    background: #fff;
    border-left-width: 4px;
}
.spi-mini-summary-row.is-ok   { border-left-color: var(--m-green, #26A69A); }
.spi-mini-summary-row.is-warn { border-left-color: var(--m-orange, #FF9300); }
.spi-mini-summary-head {
    display: flex;
    align-items: center;
    gap: .5em;
    margin-bottom: .35em;
}
.spi-mini-summary-icon {
    flex: none;
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .8em;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.is-ok   .spi-mini-summary-icon { background: var(--m-green, #26A69A); }
.is-warn .spi-mini-summary-icon { background: var(--m-orange, #FF9300); }
.spi-mini-summary-label {
    font-weight: 800;
    font-size: .95em;
    color: var(--m-text);
}
.spi-mini-summary-badge {
    margin-left: auto;
    flex: none;
    padding: .12em .7em;
    border-radius: 999px;
    font-size: .74em;
    font-weight: 800;
    letter-spacing: .02em;
}
.is-ok   .spi-mini-summary-badge { background: var(--m-green-light, #DFFAF6); color: var(--m-green-dark, #1f8a80); }
.is-warn .spi-mini-summary-badge { background: #fff2dd; color: #c97a00; }
.spi-mini .spi-mini-summary-text {
    margin: 0 !important;
    padding: 0 !important;
    font-size: .88em;
    line-height: 1.7;
    color: #4a5158;
}
.spi-mini .spi-mini-summary-verdict {
    margin: 1em 0 0 !important;
    padding: .8em .9em !important;
    border-radius: 10px;
    background: var(--m-green-light, #DFFAF6);
    font-size: .9em;
    line-height: 1.75;
    color: var(--m-text);
}
.spi-mini .spi-mini-summary-verdict strong { color: var(--m-green-dark, #1f8a80); }

/* 企業目線の総合評価（一貫性＋回答の決断度から生成する人物像） */
.spi-mini-summary-eval {
    margin-top: .2em;
    padding: .9em 1em;
    border: 1px solid var(--m-blue, #4a7fd0);
    border-left: 4px solid var(--m-blue, #4a7fd0);
    border-radius: 10px;
    background: #f3f7fd;
}
.spi-mini .spi-mini-summary-eval-head {
    display: flex;
    align-items: center;
    gap: .4em;
    margin: 0 0 .45em !important;
    padding: 0 !important;
    font-size: .9em;
    font-weight: 800;
    color: var(--m-blue-dark, #3a6cbb);
}
.spi-mini-summary-eval-icon { font-size: 1.05em; line-height: 1; }
.spi-mini .spi-mini-summary-eval-text {
    margin: 0 !important;
    padding: 0 !important;
    font-size: .9em;
    line-height: 1.75;
    color: var(--m-text);
}

/* 矛盾した回答の明示（一貫性が分かれたペアの具体提示） */
.spi-mini-summary-conflicts {
    margin-top: -.2em;
    padding: .8em .9em;
    border: 1px dashed #f0c36b;
    border-radius: 10px;
    background: #fffaf0;
}
.spi-mini .spi-mini-summary-conflicts-head {
    margin: 0 0 .6em !important;
    padding: 0 !important;
    font-size: .82em;
    font-weight: 800;
    color: #c97a00;
    letter-spacing: .02em;
}
.spi-mini-summary-conflict {
    padding: .55em 0;
}
.spi-mini-summary-conflict + .spi-mini-summary-conflict {
    border-top: 1px solid #f3e6c6;
}
.spi-mini-summary-conflict-trait {
    display: inline-block;
    margin-bottom: .35em;
    padding: .1em .65em;
    border-radius: 999px;
    background: #fff2dd;
    color: #c97a00;
    font-size: .74em;
    font-weight: 800;
}
.spi-mini .spi-mini-summary-conflict-line {
    margin: .15em 0 !important;
    padding: 0 !important;
    font-size: .86em;
    line-height: 1.6;
    color: var(--m-text);
}
.spi-mini-summary-conflict-lv {
    margin-left: .4em;
    padding: .05em .5em;
    border-radius: 6px;
    background: var(--m-surface, #f0f2f4);
    color: var(--m-muted);
    font-size: .82em;
    font-weight: 700;
    white-space: nowrap;
}
.spi-mini .spi-mini-summary-conflict-note {
    margin: .35em 0 0 !important;
    padding: 0 !important;
    font-size: .8em;
    line-height: 1.6;
    color: #8a6d3b;
}

/* =====================================================
   A/Bマトリクス出題（SPI性格検査・本番準拠）
   AとB、近いほうを4段階で選ぶ。全問1画面。
   ===================================================== */
/* AB は模試と同じ2列グリッド（左=問題/右=選択肢）にせず、全幅1カラムにする。
   そうしないとデスクトップで説明文(.spi-mini-q)が左カラムに大きな箱で居座る。 */
.spi-mini--ab .spi-mini-body,
.spi-mini--scale .spi-mini-body { display: block; }
/* 説明文はteal枠の問題ボックス装飾を外し、マトリクス上の普通の一行にする（左の緑ボックスを出さない） */
.spi-mini--ab .spi-mini-q,
.spi-mini--scale .spi-mini-q {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: .9em;
}
.spi-mini-ab-lead {
    display: block;
    font-size: .92em;
    font-weight: 600;
    color: var(--m-green-dark, #1f8a80);
}
.spi-mini-choices.is-ab {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}
/* ページ（5問ずつ）。非表示ページは display:none */
.spi-mini-ab-page { list-style: none; }
.spi-mini-ab-page[hidden] { display: none; }
.spi-mini-ab-pagelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85em;
}
/* ページ番号インジケータ */
.spi-mini-ab-page-ind {
    font-weight: 700;
    color: var(--m-muted);
    font-size: .92em;
}
/* 戻るボタン（2ページ目で表示） */
.spi-mini-btn-back {
    background: #fff;
    color: var(--m-muted);
    border-color: var(--m-border);
}
.spi-mini-btn-back:hover { background: var(--m-surface, #f6f8fa); }
.spi-mini-btn-back[hidden] { display: none; }
/* AB はアクション行を「戻る（左）／次へ（右）」に */
.spi-mini--ab .spi-mini-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em;
}
.spi-mini--ab .spi-mini-actions .spi-mini-btn-next { margin-left: auto; }
.spi-mini-ab-item {
    border: 1px solid var(--m-border);
    border-radius: 12px;
    background: #fff;
    padding: .95em 1.05em .85em;
    transition: border-color .15s, background .15s;
}
.spi-mini-ab-item.is-answered {
    border-color: var(--m-green, #26A69A);
    background: var(--m-green-light, #f0fdfb);
}
.spi-mini-ab-row {
    display: flex;
    align-items: flex-start;
    gap: 1.1em;
    margin-bottom: .85em;
}
.spi-mini-ab-side {
    flex: 1;
    font-size: .92em;
    font-weight: 600;
    line-height: 1.65;
    color: var(--m-text);
}
/* A・Bは左右に並ぶが、どちらもバッジ頭・左寄せ・上揃えで「並列」に見せる */
.spi-mini-ab-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 6px;
    font-size: .78em;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.spi-mini-ab-a .spi-mini-ab-tag { background: var(--m-green, #26A69A); margin-right: .45em; }
.spi-mini-ab-b .spi-mini-ab-tag { background: var(--m-blue, #4a7fd0); margin-right: .45em; }
.spi-mini-ab-scale {
    display: flex;
    align-items: center;
    gap: .5em;
}
.spi-mini-ab-end {
    flex: none;
    font-size: .68em;
    font-weight: 700;
    color: var(--m-muted);
    white-space: nowrap;
}
.spi-mini-ab-dots {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.spi-mini-ab-dots::before {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    top: 50%;
    height: 2px;
    background: #e3eceb;
    transform: translateY(-50%);
}
.spi-mini-ab-opt {
    position: relative;
    z-index: 1;
    cursor: pointer;
    line-height: 0;
}
.spi-mini-ab-opt input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.spi-mini-ab-dot {
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid #cfdad8;
    background: #fff;
    transition: all .12s;
}
/* 端の選択肢（Aに近い・Bに近い）はやや大きく、本番らしく */
.spi-mini-ab-opt:first-child .spi-mini-ab-dot,
.spi-mini-ab-opt:last-child .spi-mini-ab-dot { width: 20px; height: 20px; }
.spi-mini-ab-opt:has(input:checked) .spi-mini-ab-dot {
    background: var(--m-green, #26A69A);
    border-color: var(--m-green, #26A69A);
    box-shadow: 0 0 0 2px rgba(38, 166, 154, .16);
}
.spi-mini-ab-opt:has(input:focus-visible) .spi-mini-ab-dot {
    box-shadow: 0 0 0 2px rgba(74, 127, 208, .35);
}

/* 結果側：A/Bペアの表示 */
.spi-mini .spi-mini-ab-rquestion { display: flex; flex-direction: column; gap: .25em; }
.spi-mini-ab-rq { display: block; }
.spi-mini-ab-rtag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 5px;
    margin-right: .4em;
    font-size: .8em;
    font-weight: 800;
    color: #fff;
    background: var(--m-green, #26A69A);
    line-height: 1;
}
.spi-mini-ab-rtag.is-b { background: var(--m-blue, #4a7fd0); }

@media (max-width: 480px) {
    .spi-mini-ab-side { font-size: .9em; line-height: 1.6; }
    .spi-mini-ab-row { gap: .9em; }
    .spi-mini-ab-dot { width: 15px; height: 15px; }
    .spi-mini-ab-opt:first-child .spi-mini-ab-dot,
    .spi-mini-ab-opt:last-child .spi-mini-ab-dot { width: 18px; height: 18px; }
    .spi-mini-ab-end { font-size: .64em; }
}

/* =====================================================
   STACK マトリクス（YG性格検査：短い文＋3択を全問縦に並べる）
   ab マトリクスのページ送り基盤を流用。各問はカード＝文＋はい/どちらでもない/いいえ。
   ===================================================== */
/* ab と同じく全幅1カラム化（左カラムに説明文が居座るのを防ぐ） */
.spi-mini--stack .spi-mini-body { display: block; }
.spi-mini--stack .spi-mini-q {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: .9em;
}
/* アクション行は「戻る（左）／次へ（右）」（ab と共通の見た目） */
.spi-mini--stack .spi-mini-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em;
}
.spi-mini--stack .spi-mini-actions .spi-mini-btn-next { margin-left: auto; }
/* 各問カード */
.spi-mini-stack-item {
    border: 1px solid var(--m-border);
    border-radius: 12px;
    background: #fff;
    padding: .95em 1.05em 1em;
    transition: border-color .15s, background .15s;
}
.spi-mini-stack-item.is-answered {
    border-color: var(--m-green, #26A69A);
    background: var(--m-green-light, #f0fdfb);
}
/* 設問文 */
.spi-mini-stack-q {
    margin: 0 0 .7em;
    font-size: .98em;
    font-weight: 600;
    line-height: 1.6;
    color: var(--m-text);
}
.spi-mini-stack-qno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9em;
    height: 1.5em;
    padding: 0 .45em;
    margin-right: .55em;
    border-radius: 6px;
    background: var(--m-green, #26A69A);
    color: #fff;
    font-size: .74em;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}
/* はい / どちらでもない / いいえ の3択（横並び・等幅） */
.spi-mini-stack-opts {
    display: flex;
    gap: .5em;
}
.spi-mini-stack-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .6em .3em;
    border: 1.5px solid var(--m-border);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.spi-mini-stack-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.spi-mini-stack-optlabel {
    font-size: .9em;
    font-weight: 600;
    line-height: 1.35;
    color: var(--m-text);
}
.spi-mini-stack-opt:hover { border-color: var(--m-green, #26A69A); }
.spi-mini-stack-opt.is-on {
    border-color: var(--m-green, #26A69A);
    background: var(--m-green, #26A69A);
}
.spi-mini-stack-opt.is-on .spi-mini-stack-optlabel { color: #fff; }
.spi-mini-stack-opt:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(38,166,154,.3);
}
@media (max-width: 480px) {
    .spi-mini-stack-q { font-size: .94em; }
    .spi-mini-stack-opts { gap: .4em; }
    .spi-mini-stack-opt { padding: .55em .2em; }
    .spi-mini-stack-optlabel { font-size: .82em; }
}
/* ○スケール（SPI性格検査：select:'scale'）：単文＋「あてはまる〜あてはまらない」の○を横一列。
   本番SPIの回答欄を記事埋め込み向けに縦並びへ。各○の下に段階ラベルを小さく添える。 */
.spi-mini-scale-q {
    margin: 0 0 .7em;
    font-size: .98em;
    font-weight: 600;
    line-height: 1.6;
    color: var(--m-text);
}
.spi-mini-scale-opts {
    display: flex;
    gap: .25em;
}
.spi-mini-scale-opt {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45em;
    padding: .2em 0;
    text-align: center;
    cursor: pointer;
}
.spi-mini-scale-opt input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.spi-mini-scale-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #cfdad8;
    background: #fff;
    transition: all .12s;
}
/* 両端（あてはまる／あてはまらない）の○をやや大きく、本番らしく */
.spi-mini-scale-opt:first-child .spi-mini-scale-dot,
.spi-mini-scale-opt:last-child .spi-mini-scale-dot { width: 30px; height: 30px; }
.spi-mini-scale-opt:hover .spi-mini-scale-dot { border-color: var(--m-green, #26A69A); }
.spi-mini-scale-opt:has(input:checked) .spi-mini-scale-dot {
    background: var(--m-green, #26A69A);
    border-color: var(--m-green, #26A69A);
    box-shadow: 0 0 0 3px rgba(38, 166, 154, .16);
}
.spi-mini-scale-opt:has(input:focus-visible) .spi-mini-scale-dot {
    box-shadow: 0 0 0 3px rgba(74, 127, 208, .35);
}
.spi-mini-scale-optlabel {
    font-size: .62em;
    font-weight: 600;
    line-height: 1.25;
    color: var(--m-muted);
}
.spi-mini-scale-opt:has(input:checked) .spi-mini-scale-optlabel { color: var(--m-green, #1f8a80); }
/* 段階ラベルの見出し行。デスクトップのマトリクスでだけページ先頭に1回出す。
   モバイルは見出し行を隠し、各○の真下のラベル（.spi-mini-scale-optlabel）を全問に出す（○とラベルが直結＝対応が分かりやすい）。 */
.spi-mini-scale-head { display: none; }
.spi-mini-scale-head {
    border: 0;
    background: none;
    padding-top: 0;
    padding-bottom: .2em;
}
.spi-mini-scale-head .spi-mini-scale-opt { padding: 0; cursor: default; }
.spi-mini-scale-head .spi-mini-scale-optlabel { color: var(--m-muted); }
.spi-mini-scale-head .spi-mini-scale-q { display: none; }
/* デスクトップ：本番SPIの回答欄のように「問題文＝左／○スケール＝右」の横並び＋見出し行を表示し、各○の下ラベルは隠す。 */
@media (min-width: 561px) {
    .spi-mini-scale-item {
        display: flex;
        align-items: center;
        gap: 1.4em;
    }
    .spi-mini-scale-q { flex: 0 0 42%; margin: 0; }
    .spi-mini-scale-opts { flex: 1; }
    .spi-mini-scale-head { display: flex; }
    .spi-mini-scale-head .spi-mini-scale-q { display: block; }
    .spi-mini-scale-item:not(.spi-mini-scale-head) .spi-mini-scale-optlabel { display: none; }
}
/* モバイル（1問ずつ送りの範囲＝JSの max-width:560 と揃える）：○を小さめ・ラベル小さめ・左右余白を詰めて
   4つの段階ラベルが各○の真下に収まるようにする。 */
@media (max-width: 560px) {
    .spi-mini-scale-q { font-size: .94em; }
    .spi-mini-scale-dot { width: 22px; height: 22px; }
    .spi-mini-scale-opt:first-child .spi-mini-scale-dot,
    .spi-mini-scale-opt:last-child .spi-mini-scale-dot { width: 25px; height: 25px; }
    .spi-mini-scale-optlabel { font-size: .58em; }
    .spi-mini-scale-opts { gap: .15em; }
    /* モバイルは左右の余白を詰めて○スケールを広く使う（このクラスは .spi-mini と同一要素なので scale クイズ限定）。 */
    .spi-mini--scale { padding-left: .7em; padding-right: .7em; }
    .spi-mini--scale .spi-mini-scale-item { padding-left: .35em; padding-right: .35em; }
}
.spi-mini-choice-text {
    flex: 1;
    color: var(--m-text);
    font-weight: 500;
}

/* 多択（6択以上）はコンパクト表示：1行を細く・文字を小さく */
.spi-mini-choices.is-compact { gap: .4em; }
.spi-mini-choices.is-compact .spi-mini-choice {
    padding: .55em .8em;
    gap: .6em;
}
.spi-mini-choices.is-compact .spi-mini-choice-text {
    font-size: .9em;
    font-weight: 500;
    line-height: 1.5;
}
.spi-mini-choices.is-compact .spi-mini-choice input[type="radio"],
.spi-mini-choices.is-compact .spi-mini-choice input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.spi-mini-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .4em;
}
.spi-mini-actions-result { justify-content: center; margin-top: 1.4em; }

/* ===== 結果画面：ゲート（Figma 158:2 新デザイン / 各クイズの gate_title は維持） ===== */
/* ページ表示時、ブラウザのスクロールアンカリングでクイズ位置に飛ばされるのを防ぐ */
[data-spi-mini] { overflow-anchor: none; }

.spi-mini-gate { display: flex; justify-content: center; padding: 1em 0 .5em; }
.spi-mini-gate[hidden] { display: none; }
.spi-mini-gate-card {
    width: 100%;
    max-width: 430px;
    /* 背景：方眼グリッド + ソフトミントの円 + キラキラ（exam完成版と統一）。
       100% auto で横幅基準＋縦横比維持。100% 100% だとモバイルで歪むため使わない */
    background: #fbfffe url('../gate-bg-celebrate.svg?v=4') no-repeat top center;
    background-size: 100% auto;
    border: 1px solid #b6e9e4;
    border-radius: 20px;
    padding: 32px 26px 34px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(38, 166, 154, .12);
    box-sizing: border-box;
    line-height: 1.75;
}

/* ねぎらい */
.spi-mini-gate-eyebrow {
    margin: 0 0 1.5em;
    font-size: 20px;
    font-weight: 700;
    color: #18afa3;
    letter-spacing: .02em;
}

/* 見出し（2段：大ソリッド＋小グレー）。グラデーション廃止（exam完成版と統一） */
.spi-mini .spi-mini-gate-title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
}
.spi-mini .spi-mini-gate-title::before,
.spi-mini .spi-mini-gate-title::after { content: none; display: none; }
.spi-mini-gate-title br { display: inline; }
.spi-mini .spi-mini-gate-title-main {
    display: block;
    color: #12a99d;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: .01em;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .04);
    word-break: break-all;
    overflow-wrap: anywhere;
}
.spi-mini .spi-mini-gate-title-sub {
    display: block;
    margin-top: 16px;
    color: #818181;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .04);
}

/* 無料・登録完了コピー：CTAに近づける（exam完成版と統一） */
.spi-mini .spi-mini-gate-minute { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #12a99d; line-height: 20px; }

/* LINE CTA */
.spi-mini-gate-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    min-height: 52px;
    margin: 0 auto;
    padding: 10px 16px;
    background: #06c755;
    color: #fff !important;
    border-radius: 24px;
    text-decoration: none !important;
    box-shadow: 0 12px 22px rgba(3, 140, 56, .38), 0 5px 0 rgba(3, 102, 41, .55);
    box-sizing: border-box;
    transition: transform .08s ease;
}
.spi-mini-gate-line:hover { color: #fff; }
.spi-mini-gate-line:active { transform: translateY(2px); }
/* プライマリ(上部)CTAは気持ち大きく */
.spi-mini-gate-line-primary { min-height: 60px; }
/* LINEバッジ：透明バッジ（白枠なし）。30px=狭幅ボタンでも中央ラベルとクリアランス確保（旧40pxは被る） */
.spi-mini-gate-badge {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none !important;
    flex-shrink: 0;
    box-shadow: none !important;
}
.spi-mini-gate-badge-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}
.spi-mini-gate-line img.spi-line-mark {
    display: block;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain;
    flex: none;
}
/* ラベルは絶対配置で全幅中央。font 14px（16pxだと狭幅ボタンで左のバッジと被る。reference_line_cta_center_via_absolute_icon_arrow） */
.spi-mini .spi-mini-gate-line-label { position: absolute; left: 0; right: 0; color: #fff !important; font-weight: 700; font-size: 14px; text-align: center; line-height: 1.5; }
.spi-mini .spi-mini-gate-line-free { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #fff !important; }
.spi-mini .spi-mini-gate-line-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #fff !important; font-size: 22px; line-height: 1; }

/* 下向き三角矢印（Figma 401:146） */
.spi-mini-gate-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 13px solid #12a99d;
    margin: 10px auto 0;
}

/* 解説ティーザーカード：ぼかしプレビュー（Figma 401:147） */
.spi-mini-gate-blur-card {
    position: relative;
    background: #fff;
    border: 1.5px solid #b6e9e4;
    border-radius: 14px;
    margin: 20px auto 4px;
    max-width: 330px;
    overflow: hidden;
    text-align: left;
}
.spi-mini-gate-blur-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #12a99c;
    border-radius: 14px 0 0 14px;
    display: block;
}
.spi-mini-gate-blur-body {
    padding: 13px 14px 14px 20px;
    filter: blur(3.5px);
    pointer-events: none;
    user-select: none;
}
.spi-mini-gate-blur-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}
.spi-mini-gate-blur-qno {
    display: inline-block;
    background: #e9f1f1;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #484a4d;
}
.spi-mini-gate-blur-verdict {
    font-size: 12px;
    font-weight: 700;
    color: #12a99c;
}
.spi-mini-gate-blur-text {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.7;
    color: #222831;
}
.spi-mini-gate-blur-sep {
    height: 1px;
    background: #edf3f3;
    margin: 0 0 10px;
}
.spi-mini-gate-blur-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 10px;
    margin: 0;
    font-size: 11px;
}
.spi-mini-gate-blur-dt {
    color: #949aa0;
    font-weight: 700;
}
.spi-mini-gate-blur-dd {
    color: #222831;
}
.spi-mini-gate-blur-dd-ok {
    color: #12a99c;
    font-weight: 700;
}
.spi-mini-gate-blur-overlay {
    position: absolute;
    inset: 10px 8px;
    background: rgba(255, 255, 255, .62);
    border-radius: 10px;
}
.spi-mini-gate-blur-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #12a99c;
    border-radius: 999px;
    padding: 8px 14px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: #12a99c !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(18, 169, 156, .18);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .1s ease;
}
.spi-mini-gate-blur-pill:hover {
    box-shadow: 0 4px 12px rgba(18, 169, 156, .3);
    transform: translate(-50%, -52%);
    color: #12a99c !important;
}
.spi-mini-gate-blur-lock-icon { flex-shrink: 0; display: block; }

/* 注記：フォームの後ろに配置 */
.spi-mini .spi-mini-gate-note {
    display: block !important;
    margin: 10px 0 20px !important;
    font-size: 11px;
    font-weight: 700;
    color: #ff7a00;
}

/* キーワード入力（lock + input + ＞submit）。CTAの立体シャドウとの重なり防止に上余白 */
.spi-mini-gate-form { margin: 18px 0 0; }
.spi-mini-gate-field {
    position: relative;
    width: 100%;
    max-width: 291px;
    height: 60px;
    margin: 0 auto;
    background: #eff5f7;
    border: 2px solid #b6e9e4;
    border-radius: 22px;
    box-sizing: border-box;
}
.spi-mini-gate-field:focus-within { border-color: #12a99c; }
/* JS は input に is-error を付与（既存挙動を維持）。入力文字＋枠を赤に */
.spi-mini-gate-input.is-error { color: #e04e4e; }
.spi-mini-gate-field:has(.spi-mini-gate-input.is-error) { border-color: #e04e4e; }
.spi-mini-gate-lock { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; }
.spi-mini-gate-lock-body { position: absolute; left: 2px; top: 9px; width: 16px; height: 11px; background: #949aa0; border-radius: 2px; }
.spi-mini-gate-lock-shackle { position: absolute; left: 5px; top: 2px; width: 10px; height: 10px; border: 2px solid #949aa0; border-bottom: 0; border-radius: 5px 5px 0 0; }
/* 詳細度を上げてテーマの .entry-content input 等の padding 上書きに勝たせる */
.spi-mini .spi-mini-gate-field .spi-mini-gate-input {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0 46px 0 48px;
    margin: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--m-text);
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
}
.spi-mini-gate-input::placeholder { color: #949aa0; font-weight: 500; }
/* ＞送信ボタン：ティール角丸ボタン化（exam完成版と統一） */
.spi-mini-gate-go {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    background: #12a99d;
    color: #fff;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .08s ease;
}
.spi-mini-gate-go:hover { background: #0e8e84; }
.spi-mini-gate-go:active { transform: translateY(-50%) scale(.94); }
.spi-mini-gate-error { margin: 8px 0 0; color: #e04e4e; font-size: 13px; }
.spi-mini-gate-error[hidden] { display: none; }

/* 社会的証明 */
.spi-mini-gate-proof { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 16px; }
.spi-mini-gate-proof svg { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.spi-mini-gate-proof-num { color: #f56e05; font-weight: 900; font-size: 20px; letter-spacing: .6px; }
.spi-mini-gate-proof-suf { color: #818181; font-weight: 700; font-size: 14px; }

/* セクション見出し（exam完成版と統一） */
.spi-mini .spi-mini-gate-section-title { margin: 24px 0 12px; font-size: 15px; font-weight: 700; color: #16a99d; line-height: 22px; text-align: center; }

/* ベネフィット（タイトルのみ・コンパクト） */
.spi-mini-gate-benefits { display: flex; flex-direction: column; gap: 6px; max-width: 270px; margin: 0 auto; }
.spi-mini-gate-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    background: #fff;
    border: 1px solid #b6e9e4;
    border-radius: 18px;
    padding: 9px 14px;
    box-shadow: 0 10px 24px rgba(20, 153, 141, .10);
    text-align: left;
}
.spi-mini-gate-benefit-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddf4ef;
    border: 1px solid #d9f3ef;
    border-radius: 26px;
}
.spi-mini-gate-benefit-icon svg { width: 27px; height: 27px; display: block; }
.spi-mini .spi-mini-gate-benefit-title { margin: 0; color: #14998d !important; font-weight: 900; font-size: 14px; line-height: 1.3; }

/* 下部CTA（上部より一回り小さい） */
.spi-mini-gate-line-bottom { margin-top: 20px; max-width: 298px; }

/* スクリーンリーダー専用 */
.spi-mini-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 結果画面表示中は外枠（白背景・border・padding）を消してカードが直接見えるようにする */
.spi-mini:has(.spi-mini-result:not([hidden])) {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.spi-mini-gate { padding: 0; }

/* ===== 結果本体 ===== */
.spi-mini-result-body[hidden] { display: none; }
.spi-mini-result-body .spi-mini-title { margin-bottom: 1em; }

.spi-mini-score-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    background: var(--m-surface);
    border-radius: 10px;
    padding: 1.2em 1.4em;
    margin-bottom: .9em;
    border-left: 5px solid var(--m-green);
}
.spi-mini-score-card.is-high { border-left-color: var(--m-green); background: var(--m-green-light); }
.spi-mini-score-card.is-mid  { border-left-color: var(--m-yellow); background: #fffbe6; }
.spi-mini-score-card.is-low  { border-left-color: var(--m-red);    background: var(--m-red-light); }

.spi-mini-score-main { display: flex; align-items: baseline; gap: .15em; }
.spi-mini-score-num {
    font-size: 2.4em;
    font-weight: 800;
    color: var(--m-green-dark);
    line-height: 1;
}
.spi-mini-score-card.is-mid .spi-mini-score-num { color: #b08800; }
.spi-mini-score-card.is-low .spi-mini-score-num { color: var(--m-red); }
.spi-mini-score-slash { font-size: 1.4em; color: var(--m-muted); margin: 0 .1em; }
.spi-mini-score-total { font-size: 1.4em; font-weight: 700; color: var(--m-muted); }
.spi-mini-score-unit { margin-left: .4em; font-size: .95em; color: var(--m-muted); font-weight: 500; }
.spi-mini-score-pct {
    font-size: 1.5em;
    font-weight: 800;
    color: var(--m-text);
}

/* スコア帯別カード（Lognavi CTA を内包） */
.spi-mini-tier-card {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    padding: 1.1em 1.2em;
    background: #FFF7EE;
    border: 1.5px solid #FFD9B2;
    border-radius: 12px;
    margin-bottom: 1.4em;
}
.spi-mini-tier-card[hidden] { display: none; }
.spi-mini-tier-card.is-high { background: #EAF7F5; border-color: #B6E9E4; }
.spi-mini-tier-card.is-mid  { background: #FFFBE6; border-color: #F4E6A1; }
.spi-mini-tier-card.is-low  { background: #FFF1E5; border-color: #FFC79A; }

.spi-mini-tier-emoji {
    flex: none;
    font-size: 2em;
    line-height: 1.1;
    width: 2em;
    height: 2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.spi-mini-tier-body { flex: 1; min-width: 0; }

.spi-mini .spi-mini-tier-label {
    margin: 0 0 .3em !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 1.05em;
    font-weight: 700;
    color: #E07A55;
    line-height: 1.4;
}
.spi-mini-tier-card.is-high .spi-mini-tier-label { color: var(--m-green-dark); }
.spi-mini-tier-card.is-mid  .spi-mini-tier-label { color: #b08800; }

.spi-mini .spi-mini-tier-msg {
    margin: 0 0 .7em !important;
    padding: 0 !important;
    font-size: .9em;
    color: var(--m-text);
    line-height: 1.6;
}

.spi-mini-tier-cta {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .6em 1.1em;
    background: var(--m-orange);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: .92em;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(255, 147, 0, .25);
    transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
}
.spi-mini-tier-cta:hover {
    background: #E07A00;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(255, 147, 0, .35);
    color: #fff !important;
}
.spi-mini-tier-cta img { display: block; flex: none; border-radius: 4px; }

.spi-mini .spi-mini-review-heading {
    margin: 1.4em 0 .7em !important;
    padding: 0 0 .35em !important;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--m-text);
    border-bottom: 2px solid var(--m-green);
}

.spi-mini-review { display: grid; gap: .9em; }
.spi-mini-review-item {
    border: 1px solid var(--m-border);
    border-left: 5px solid var(--m-green);
    border-radius: 8px;
    background: #fff;
    padding: .9em 1.1em;
}
.spi-mini-review-item.is-wrong { border-left-color: var(--m-red); }
/* 解説モード（interpret）は外枠の箱を出さない。中の「見え方」カードだけで十分 */
.spi-mini-review-item.is-interp {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
}

.spi-mini-review-head {
    display: flex;
    align-items: center;
    gap: .6em;
    margin-bottom: .4em;
}
.spi-mini-review-qno {
    display: inline-flex;
    align-items: center;
    padding: .15em .65em;
    background: var(--m-surface);
    color: var(--m-text);
    border-radius: 999px;
    font-weight: 700;
    font-size: .82em;
}
.spi-mini-review-verdict {
    font-weight: 700;
    font-size: .92em;
    color: var(--m-green-dark);
}
.spi-mini-review-item.is-wrong .spi-mini-review-verdict { color: var(--m-red); }

.spi-mini-review-question {
    margin: 0 0 .6em;
    font-weight: 500;
    line-height: 1.7;
}

/* テーマ依存スタイルを打ち消し */
.spi-mini .spi-mini-review-dl,
.spi-mini .spi-mini-review-dl dt,
.spi-mini .spi-mini-review-dl dd {
    background: none !important;
}
.spi-mini .spi-mini-review-dl dt::before,
.spi-mini .spi-mini-review-dl dd::before {
    content: none !important;
    display: none !important;
}
.spi-mini-review-dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35em .9em;
    font-size: .95em;
    line-height: 1.7;
}
.spi-mini-review-dl dt {
    color: var(--m-muted);
    font-weight: 700;
    font-size: .88em;
    padding-top: .1em;
}
.spi-mini-review-dl dd { margin: 0; }
.spi-mini-review-dl dd strong { color: var(--m-green-dark); font-weight: 700; }
.spi-mini-review-item.is-wrong .spi-mini-review-dl dd strong { color: var(--m-red); }

/* ===== Lognavi 誘導カード（もう一度解くの直上） ===== */
.spi-mini-lognavi {
    margin: 1.8em auto .8em;
    max-width: 520px;
}
.spi-mini-lognavi-card {
    padding: 1.8em 1.6em;
    background: #fff;
    border: 1px solid #EAF2F1;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(42, 165, 154, .06);
}
.spi-mini-lognavi-eyebrow {
    display: flex;
    align-items: center;
    gap: .6em;
    margin: 0 0 .9em;
}
.spi-mini-lognavi-tag {
    display: inline-block;
    padding: .2em .7em;
    background: var(--m-green-light);
    color: var(--m-green-dark);
    font-size: .7em;
    font-weight: 600;
    letter-spacing: .12em;
    border-radius: 999px;
}
.spi-mini-lognavi-brandname {
    font-size: .82em;
    font-weight: 600;
    color: var(--m-green-dark);
    letter-spacing: .04em;
}
.spi-mini .spi-mini-lognavi-headline {
    margin: 0 0 .75em !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.55;
    color: #1a1a1a;
    letter-spacing: .02em;
}
.spi-mini .spi-mini-lognavi-headline::before,
.spi-mini .spi-mini-lognavi-headline::after { content: none !important; display: none !important; }
.spi-mini-lognavi-headline .is-accent { color: var(--m-green); font-weight: 600; }
.spi-mini-lognavi-lead {
    margin: 0 0 1.4em;
    font-size: .9em;
    line-height: 1.7;
    color: #5d6f6c;
}
.spi-mini-lognavi-lead strong { color: var(--m-green-dark); font-weight: 600; }

.spi-mini ul.spi-mini-lognavi-feats {
    list-style: none !important;
    margin: 0 0 1.5em !important;
    padding: 1em 1.1em !important;
    background: #F8FCFB;
    border-radius: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: .6em;
}
.spi-mini .spi-mini-lognavi-feats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35em;
    padding: 0 !important;
    margin: 0 !important;
    font-size: .78em;
    color: #5d6f6c;
    text-align: center;
    flex: 1;
    background: none !important;
    list-style: none !important;
}
.spi-mini .spi-mini-lognavi-feats li::before,
.spi-mini .spi-mini-lognavi-feats li::after,
.spi-mini .spi-mini-lognavi-feats li::marker {
    content: none !important;
    display: none !important;
}
.spi-mini-lognavi-feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--m-green-light);
    color: var(--m-green);
    border-radius: 50%;
}
.spi-mini-lognavi-feat-text { font-weight: 500; }
.spi-mini-lognavi-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .95em 1.4em;
    background: var(--m-green);
    color: #fff;
    border-radius: 12px;
    font-weight: 500;
    font-size: .95em;
    letter-spacing: .04em;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(42, 165, 154, .22);
    transition: transform .22s cubic-bezier(.2,.8,.2,1),
                box-shadow .22s cubic-bezier(.2,.8,.2,1),
                background .18s ease;
}
.spi-mini-lognavi-cta:hover {
    transform: translateY(-2px);
    background: var(--m-green-dark);
    box-shadow: 0 12px 24px rgba(42, 165, 154, .32);
    color: #fff;
}
.spi-mini-lognavi-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
}
@media (max-width: 540px) {
    .spi-mini-lognavi { margin: 1.4em 0 .6em; }
    .spi-mini-lognavi-card { padding: 1.4em 1.2em; }
    .spi-mini .spi-mini-lognavi-headline { font-size: 1.1em; }
    .spi-mini-lognavi-lead { font-size: .85em; margin-bottom: 1.1em; }
    .spi-mini ul.spi-mini-lognavi-feats { padding: .9em .6em !important; gap: .4em; }
    .spi-mini .spi-mini-lognavi-feats li { font-size: .72em; }
    .spi-mini-lognavi-feat-icon { width: 30px; height: 30px; }
}

/* ===== passage 2カラムレイアウト（[spi_passage] あり時のみ有効） ===== */
/* passage あり: 上に画像固定、下に問題 の縦積みレイアウト */
.spi-mini--passage .spi-mini-body {
    display: block;
}
.spi-mini-passage {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 1em 1.2em;
    margin-bottom: 1.2em;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.spi-mini-passage[hidden] { display: none; }
.spi-mini-passage p { margin: 0.4em 0; }
.spi-mini-passage p:first-child { margin-top: 0; }
.spi-mini-passage p:last-child  { margin-bottom: 0; }
.spi-mini-passage img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.spi-mini--passage .spi-mini-questions {
    display: flex;
    flex-direction: row;
    gap: 1.4em;
    align-items: flex-start;
}
.spi-mini--passage .spi-mini-q {
    flex: 1;
    min-width: 0;
}
.spi-mini--passage .spi-mini-choices {
    flex: 0 0 44%;
    min-width: 0;
}
@media (max-width: 720px) {
    .spi-mini--passage .spi-mini-questions {
        flex-direction: column;
    }
    .spi-mini--passage .spi-mini-choices {
        flex: none;
        width: 100%;
    }
}

/* ===== エラー ===== */
.spi-mini-error {
    margin: 1.5em 0;
    padding: .8em 1em;
    border: 1px solid var(--m-red);
    background: var(--m-red-light);
    color: var(--m-red);
    border-radius: 6px;
}

/* ===== タブレット〜スマホ：2列→1列にスタック ===== */
@media (max-width: 720px) {
    .spi-mini-body {
        grid-template-columns: 1fr;
        gap: 1em;
    }
    .spi-mini-q { padding: 0.5em 0.8em 0.3em; }
}

/* ===== スマホ ===== */
@media (max-width: 540px) {
    .spi-mini { padding: 1.2em 1em 1.1em; border-radius: 8px; margin: 1.5em 0; }
    .spi-mini .spi-mini-title { font-size: 1.1em; }
    .spi-mini-intro { padding: 1.8em 1em 1.4em; margin: -1.2em -1em -1.1em; border-radius: 8px; }
    .spi-mini-intro-h1 { font-size: 1.3em; }
    .spi-mini-intro-tagline { font-size: .85em; }
    .spi-mini-btn-cta { padding: .9em 1.6em; font-size: 1em; }
    .spi-mini-intro-footnote { font-size: .8em; }
    /* モバイルではイラストは小さく＆位置を控えめに */
    .spi-mini-intro-illust-left  { width: 70px; left: -20px; opacity: .35; }
    .spi-mini-intro-illust-right { width: 75px; right: -25px; opacity: .35; }
    .spi-mini-intro-illust-bar   { display: none; }
    .spi-mini-q-text { font-size: .95em; }
    .spi-mini-choice { padding: .7em .85em; }
    .spi-mini-btn-next { padding: .75em 1.4em; }
    .spi-mini-header { flex-wrap: wrap; gap: .6em; }
    .spi-mini-header-title { font-size: 1em; flex: 1 1 100%; }
    .spi-mini-status { padding: .25em .65em; font-size: .85em; }
    .spi-mini-score-main { gap: .1em; }
    .spi-mini-score-num { font-size: 2em; }
    .spi-mini-score-pct { font-size: 1.3em; }
    .spi-mini-review-dl {
        grid-template-columns: 1fr;
        gap: .15em 0;
    }
    .spi-mini-review-dl dt { padding-top: .5em; }
    /* ゲートは新デザイン（px基準・自己完結）のため、狭幅ではカード余白とタイトルだけ微調整 */
    .spi-mini-gate-card { padding: 28px 18px 26px; }
    /* 長いタイトル（15文字）が折り返さないよう小さく */
    .spi-mini .spi-mini-gate-title-main { font-size: 19px; word-break: keep-all; overflow-wrap: anywhere; }
    /* キーワード入力欄は一回り狭く */
    .spi-mini-gate-field { max-width: 92%; }
    /* ぼかしプレビューカード：狭幅では横幅100%に */
    .spi-mini-gate-blur-card { max-width: 100%; }
    /* ぼかしピルが長いので少し縮小 */
    .spi-mini-gate-blur-pill { font-size: 11px; padding: 7px 11px; }
}