/* =====================================================
   SPI ミニクイズ（記事埋め込み用）
   見た目とインタラクションは spi-exam（模試）と同じ
   デザイントークンに揃え、外側のページヘッダーは無し
   ===================================================== */

.spi-mini.spi-mini-accent-orange {
    --m-green: #F5821F;       /* メイン（オレンジ） */
    --m-green-dark: #D96D0A;
    --m-green-light: #FFF2E3; /* 背景 */
}

.spi-mini {
    scroll-margin-top: 80px;
    /* ブランドカラー（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;
    /* 独立ページ（全幅テンプレ）では横に伸びすぎるので最大幅を設定して中央寄せ。
       記事内埋め込みはテーマのコンテンツ幅で既に制約されるため影響なし。 */
    max-width: 760px;
    margin: 1.8em auto;
    line-height: 1.75;
    /* ページ送り時のオートスクロール着地に余白を確保（固定ヘッダーの下に潜らない）。 */
    scroll-margin-top: 80px;
}
.spi-mini * { box-sizing: border-box; }
.spi-mini-screen[hidden] { display: none !important; }

/* ===== 結果ローディング（「結果を出しています」くるくる）=====
   解き終わり→ゲートの間に一拍おいて集計中の信頼感を出す演出。色はクイズのテーマ色に追従。 */
.spi-mini-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 240px;
    padding: 48px 20px;
    text-align: center;
}
.spi-mini-loader[hidden] { display: none; }
.spi-mini-loader-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid var(--m-green-light, #DFFAF6);
    border-top-color: var(--m-green, #2AA59A);
    animation: spi-mini-spin .8s linear infinite;
}
.spi-mini-loader-text {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--m-green-dark, #1f8a80);
    letter-spacing: .04em;
}
@keyframes spi-mini-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spi-mini-loader-spinner { animation-duration: 1.8s; }
}

/* ===== タイトル（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-lead {
    margin: -.4em 0 1.3em !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: .95em;
    line-height: 1.75;
    color: var(--m-text);
}
.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;
}
/* マトリクス／yesnoページ送りは全幅1列（問題文＝上・カード群＝下）。2列レイアウトを解除。 */
.spi-mini-body--matrix { grid-template-columns: 1fr; }

/* 表組みなど横幅の要る問題は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; }
.spi-mini-q-text th:first-child,
.spi-mini-q-text td:first-child { white-space: normal; }

@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;
}
/* 確認画面（表紙）：独立ページの確認画面と同じ情報設計に揃える。 */
.spi-mini .spi-mini-cover {
    padding: 8px 0 16px;
}
.spi-mini .spi-mini-cover-card {
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    text-align: center;
}
.spi-mini .spi-mini-cover-step {
    font-size: 14px;
    font-weight: 500;
    color: #1f2328;
    letter-spacing: .03em;
    line-height: 1.4;
    margin: 0 0 4px;
}
.spi-mini .spi-mini-cover-title {
    font-size: 28px;
    font-weight: 800;
    color: #252525;
    line-height: 1.35;
    margin: 0 0 18px;
    letter-spacing: .03em;
}
.spi-mini .spi-mini-cover-subtitle {
    font-size: 14px;
    color: #5A6360;
    line-height: 1.7;
    margin: 0 0 24px;
}
.spi-mini .spi-mini-cover-table {
    width: 100%;
    max-width: 632px;
    border-collapse: collapse;
    margin: 0 auto 28px;
    font-size: 14px;
    background: #fff;
    text-align: left;
    border: 1px solid #E4ECEB;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    overflow: hidden;
    display: table;
}
.spi-mini .spi-mini-cover-table th,
.spi-mini .spi-mini-cover-table td {
    border: 0;
    border-bottom: 1px solid #E4ECEB;
    padding: 18px 28px;
    text-align: left;
    line-height: 1.65;
    vertical-align: top;
}
.spi-mini .spi-mini-cover-table tr:last-child th,
.spi-mini .spi-mini-cover-table tr:last-child td {
    border-bottom: 0;
}
.spi-mini .spi-mini-cover-table th {
    background: #fff;
    color: #5A6360;
    font-weight: 500;
    white-space: nowrap;
    width: 132px;
    letter-spacing: .03em;
}
.spi-mini .spi-mini-cover-table td {
    color: #252525;
    font-weight: 700;
}
.spi-mini .spi-mini-cover-notes {
    max-width: 632px;
    margin: 0 auto;
    padding: 14px 20px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    text-align: left;
}
.spi-mini .spi-mini-cover-notes-title {
    font-size: 13px;
    font-weight: 700;
    color: #92400E;
    margin: 0 0 8px;
    letter-spacing: .03em;
}
.spi-mini .spi-mini-cover-notes-title::before {
    content: "\26A0";
    margin-right: .4em;
}
.spi-mini .spi-mini-cover-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}
.spi-mini .spi-mini-cover-notes-list li {
    position: relative;
    padding-left: 1.1em;
    font-size: 13px;
    color: #92400E;
    line-height: 1.8;
}
.spi-mini .spi-mini-cover-notes-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #B45309;
}
.spi-mini .spi-mini-cover-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(480px, 100%);
    background: #ff7a00;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 20px 32px;
    margin-top: 28px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255,122,0,.24), 0 1px 3px rgba(255,122,0,.18);
    transition: background .15s, transform .12s, box-shadow .15s;
}
.spi-mini .spi-mini-cover-start:hover {
    background: #E86A00;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,122,0,.30);
}
@media (max-width: 540px) {
    .spi-mini .spi-mini-cover {
        padding: 0 0 8px;
    }
    .spi-mini .spi-mini-cover-step {
        font-size: 13px;
    }
    .spi-mini .spi-mini-cover-title {
        font-size: 24px;
        margin-bottom: 12px;
    }
    .spi-mini .spi-mini-cover-subtitle {
        font-size: 13px;
        margin-bottom: 18px;
    }
    .spi-mini .spi-mini-cover-table {
        margin-bottom: 20px;
        font-size: 13px;
    }
    .spi-mini .spi-mini-cover-table th,
    .spi-mini .spi-mini-cover-table td {
        padding: 12px 14px;
        line-height: 1.55;
    }
    .spi-mini .spi-mini-cover-table th {
        width: 76px;
        font-size: 12px;
    }
    .spi-mini .spi-mini-cover-table td {
        font-weight: 600;
    }
    .spi-mini .spi-mini-cover-notes {
        padding: 12px 14px;
    }
    .spi-mini .spi-mini-cover-notes-list li {
        font-size: 12.5px;
        line-height: 1.65;
    }
    .spi-mini .spi-mini-cover-start {
        font-size: 16px;
        padding: 16px 24px;
        margin-top: 20px;
    }
}

/* yesno ページ送り（10問ずつ）：1問＝1カード。問ラベル＋4文のYES/NO表を内包。 */
.spi-mini-yn-item {
    list-style: none;
    border: 1px solid var(--m-border);
    border-radius: 10px;
    padding: .9em 1em 1em;
    margin: 0 0 .9em;
    background: #fff;
}
.spi-mini-yn-item.is-answered { border-color: var(--m-green); background: #fbfffe; }
.spi-mini-yn-item .spi-mini-yn-q {
    font-size: .92em;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 .7em;
    color: var(--m-text);
}
.spi-mini-yn-item .spi-mini-stack-qno {
    display: inline-block;
    background: var(--m-green);
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    border-radius: 5px;
    padding: 1px 8px;
    margin-right: .5em;
}
/* SPI風 報告書シート（summary.report_sheet の結果）。SPI seikaku30 の ss-sheet/ss-sec/ss-axis に準拠（多色）。 */
.spi-mini .spi-mini-report { border: 1px solid #d9e6e4; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.08); margin: 0 0 1.2em; background: #fff; }
.spi-mini .spi-mini-report-head { background: linear-gradient(135deg, #1f8a80, #4a7fd0); color: #fff; padding: 18px 20px; }
.spi-mini .spi-mini-report-kicker { font-size: 10px; letter-spacing: .12em; opacity: .9; display: block; }
.spi-mini .spi-mini-report-title { font-size: 1.15em; font-weight: 800; color: #fff; margin: 2px 0 0; }
.spi-mini .spi-mini-rep-sec { border: 1px solid #e0e9e8; border-radius: 6px; margin: 14px; overflow: hidden; }
.spi-mini .spi-mini-rep-sec-head {
    background: #eafaf8; color: #1f8a80; font-weight: 800; font-size: .92em;
    padding: .55em .9em; border-left: 5px solid #26A69A; display: flex; align-items: center; gap: 8px;
}
.spi-mini .spi-mini-rep-tag {
    font-size: .68em; font-weight: 700; color: #fff; background: #4a7fd0;
    border-radius: 3px; padding: 1px 7px;
}
.spi-mini .spi-mini-rep-sec-body { padding: .9em; }
/* 性格特徴バー（ティール→青グラデ） */
.spi-mini .spi-mini-rep-axis { margin: 0 0 1em; }
.spi-mini .spi-mini-rep-axis:last-child { margin-bottom: 0; }
.spi-mini .spi-mini-rep-axis-top { display: flex; justify-content: space-between; align-items: baseline; }
.spi-mini .spi-mini-rep-axis-name { font-weight: 700; font-size: .92em; }
.spi-mini .spi-mini-rep-axis-score { font-weight: 800; color: #1f8a80; font-size: .98em; }
.spi-mini .spi-mini-rep-poles { display: flex; justify-content: space-between; font-size: .72em; color: var(--m-muted); margin: .2em 0; }
.spi-mini .spi-mini-rep-track { height: 11px; border-radius: 999px; background: #e8f5f4; overflow: hidden; }
.spi-mini .spi-mini-rep-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #26A69A, #4a7fd0); }
.spi-mini .spi-mini-rep-axis-desc { font-size: .82em; color: var(--m-text); margin-top: .35em; line-height: 1.6; }
/* 企業からどう見えるか */
.spi-mini .spi-mini-rep-cv-list { display: flex; flex-direction: column; gap: 10px; }
.spi-mini .spi-mini-rep-cv { background: #E4F8F6; border-left: 4px solid #26A69A; border-radius: 0 8px 8px 0; padding: .7em .9em; }
.spi-mini .spi-mini-rep-cv-ax { font-weight: 700; color: #1f8a80; font-size: .84em; margin-bottom: .25em; }
.spi-mini .spi-mini-rep-cv-imp { font-size: .88em; line-height: 1.65; }
.spi-mini .spi-mini-rep-cv-fit { font-size: .83em; color: #555; line-height: 1.65; margin-top: .3em; }
.spi-mini .spi-mini-rep-cv-lbl { display: inline-block; background: #26A69A; color: #fff; font-size: .78em; font-weight: 700; border-radius: 4px; padding: 1px 7px; margin-right: .4em; }
.spi-mini .spi-mini-rep-persona { font-size: .9em; line-height: 1.85; margin: 0; }
/* 職務適応性／組織適応性（★オレンジ） */
.spi-mini .spi-mini-rep-fit-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.spi-mini .spi-mini-rep-fit { flex: 1; min-width: 150px; border: 1px solid #e0e9e8; border-radius: 5px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.spi-mini .spi-mini-rep-fit-n { font-size: .84em; font-weight: 600; }
.spi-mini .spi-mini-rep-stars { font-size: .9em; letter-spacing: 1px; white-space: nowrap; }
.spi-mini .spi-mini-rep-star-on { color: #f5a623; }
.spi-mini .spi-mini-rep-star-off { color: #ddd; }
.spi-mini .spi-mini-rep-note { font-size: .76em; color: var(--m-muted); margin: .7em 0 0; }

/* yesno ページ送り：section 見出し（第1部 性格／第2部 意欲）をページ先頭に1回だけ。 */
.spi-mini-yn-parthead { list-style: none; margin: 0 0 .2em; }

.spi-mini-yn-table { width: 100%; border-collapse: collapse; font-size: .88em; }
.spi-mini-yn-table th,
.spi-mini-yn-table td { border: 1px solid var(--m-border); padding: .55em .5em; vertical-align: middle; }
.spi-mini-yn-hrow th {
    background: #f2faf9;
    font-size: .8em;
    font-weight: 700;
    color: var(--m-muted);
    text-align: center;
    line-height: 1.35;
}
.spi-mini-yn-hrow th:nth-child(3) { color: #1f8a80; }
.spi-mini-yn-hrow th:nth-child(4) { color: #c0392b; }
.spi-mini-yn-lbl { width: 2.2em; text-align: center; font-weight: 800; color: var(--m-green-dark); }
.spi-mini-yn-stmt { text-align: left; line-height: 1.5; }
.spi-mini-yn-cell { width: 100px; text-align: center; }
.spi-mini-yn-radio { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.spi-mini-yn-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.spi-mini-yn-dot {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #c2ccd0; background: #fff;
    display: inline-block; transition: border-color .12s, background .12s;
}
.spi-mini-yn-radio:hover .spi-mini-yn-dot { border-color: var(--m-green); }
.spi-mini-yn-radio-no:hover .spi-mini-yn-dot { border-color: #c0392b; }
.spi-mini-yn-radio input:checked + .spi-mini-yn-dot {
    border-color: var(--m-green); background: var(--m-green); box-shadow: inset 0 0 0 3px #fff;
}
.spi-mini-yn-radio-no input:checked + .spi-mini-yn-dot {
    border-color: #c0392b; background: #c0392b; box-shadow: inset 0 0 0 3px #fff;
}
.spi-mini-yn-trow.is-yes { background: #f0faf8; }
.spi-mini-yn-trow.is-no  { background: #fdf2f1; }
@media (max-width: 560px) {
    .spi-mini-yn-table { font-size: .8em; }
    .spi-mini-yn-table th, .spi-mini-yn-table td { padding: .5em .3em; }
    .spi-mini-yn-cell { width: 62px; }
    .spi-mini-yn-dot { width: 20px; height: 20px; }
}

/* 2部構成の章ラベル（第1部 性格／第2部 意欲）。q.section がある設問のみ表示。 */
.spi-mini-q-text .spi-mini-part-row { display: block; margin: 0 0 8px; }
.spi-mini-q-text .spi-mini-part {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 700;
    color: var(--m-green-dark);
    background: var(--m-green-light);
    border-radius: 999px;
    padding: 3px 12px;
    letter-spacing: .04em;
    line-height: 1.4;
}
/* 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-yes {
    border-color: #cfe3e0;
    background: #fbfffe;
    color: #1f8a80;
}
.spi-mini-yn-no {
    border-color: #ead1d1;
    background: #fffafa;
    color: #b94a48;
}
.spi-mini-yn-yes:hover {
    border-color: #2AA59A;
    background: #f0faf8;
}
.spi-mini-yn-no:hover {
    border-color: #c0392b;
    background: #fff5f5;
}
.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 .spi-mini-summary-eval-lead {
    margin: 0 0 .55em !important;
    padding: 0 !important;
    font-size: .88em;
    line-height: 1.7;
    color: var(--m-text);
}
.spi-mini .spi-mini-summary-eval-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.spi-mini .spi-mini-summary-eval-item {
    margin: 0 !important;
    padding: .55em .7em;
    list-style: none !important;
    background: #fff;
    border: 1px solid #d9e4f5;
    border-radius: 8px;
}
.spi-mini .spi-mini-summary-eval-item::before { content: none !important; }
.spi-mini-summary-eval-imp {
    display: block;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.6;
    color: var(--m-blue-dark, #3a6cbb);
}
.spi-mini-summary-eval-fit {
    display: block;
    margin-top: .15em;
    font-size: .84em;
    line-height: 1.65;
    color: var(--m-text);
}
.spi-mini .spi-mini-summary-eval-note {
    margin: .6em 0 0 !important;
    padding: 0 !important;
    font-size: .82em;
    line-height: 1.7;
    color: var(--m-text-sub, #5a6b7b);
}

/* 矛盾した回答の明示（一貫性が分かれたペアの具体提示） */
.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;
}

/* 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);
}

.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: .35em; }
    .spi-mini-stack-opt { padding: .55em .15em; }
    .spi-mini-stack-optlabel { font-size: .78em; white-space: nowrap; }
}
/* ○スケール（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; }

.spi-mini-actions-result .spi-mini-btn[hidden] { display: none; }
.spi-mini-mypage-cta { text-decoration: none; }
.spi-mini-mypage-cta:hover { text-decoration: none; }
.spi-mini-restore-back { text-decoration: none; }
.spi-mini-restore-back:hover { text-decoration: none; }

/* ===== 結果画面：ゲート（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;
    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 プレフィックスで詳細度を上げ、模試ページの spi-reset(.spi-exam-page p{margin:0}=0,1,1) に勝つ。
   これが無いと eyebrow の下余白が潰れ、記事内ミニと見た目がズレる。 */
.spi-mini .spi-mini-gate-eyebrow {
    margin: 0 0 1.5em;
    font-size: 20px;
    font-weight: 700;
    color: #18afa3;
    letter-spacing: .02em;
}

.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; box-sizing: border-box; padding-left: 44px; padding-right: 44px; color: #fff !important; font-weight: 700; font-size: 15px; text-align: center; line-height: 1.5; }
/* PC(561px以上)ではボタン幅340pxに余裕があるので文字を大きく。左右44pxのpaddingでバッジと被らない（reference_line_cta_center_via_absolute_icon_arrow） */
@media (min-width: 561px) {
    .spi-mini .spi-mini-gate-line-label { font-size: 16px; }
}
.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; }

/* スコアカード：正答数／正答率 2カラム＋緑プログレスバー（緑デザイン統一） */
.spi-mini-score-card {
    background: #fff;
    border: 1px solid #e6ebea;
    border-radius: 18px;
    padding: 1.25em 1.4em;
    margin-bottom: .9em;
    box-shadow: 0 10px 24px -18px rgba(31,138,128,.5);
}
.spi-mini-score-grid { display: flex; align-items: flex-end; justify-content: space-around; gap: 1em; }
.spi-mini-score-cell { flex: 1; min-width: 0; text-align: center; }
.spi-mini-score-cell-label { font-size: .8em; color: var(--m-muted); font-weight: 700; margin-bottom: .1em; }
.spi-mini-score-cell-val { line-height: 1.1; }
.spi-mini-score-num { font-size: 2.2em; font-weight: 800; color: var(--m-green-dark); line-height: 1; }
.spi-mini-score-pct { font-size: 2.2em; font-weight: 800; color: var(--m-green-dark); line-height: 1; }
.spi-mini-score-total { font-size: 1.2em; font-weight: 700; color: var(--m-muted); }
.spi-mini-score-sep { width: 1px; align-self: stretch; background: #e6ebea; flex: none; }
.spi-mini-score-bar { margin-top: 1em; height: 9px; border-radius: 99px; background: #eaf1f0; overflow: hidden; }
.spi-mini-score-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #33b5a8, #26A69A); transition: width .6s cubic-bezier(0.23,1,0.32,1); }

/* スコア帯別カード（会員登録者限定特典CTA を内包）— 中央寄せ・本＆キラキラ */
.spi-mini-tier-card {
    text-align: center;
    padding: 1.6em 1.3em 1.3em;
    background: #fff;
    border: 1px solid #e6ebea;
    border-radius: 20px;
    margin-bottom: 1.4em;
    box-shadow: 0 12px 28px -18px rgba(31,138,128,.55);
}
.spi-mini-tier-card[hidden] { display: none; }
.spi-mini-tier-icon { display: block; margin: 0 auto .2em; }
.spi-mini-tier-icon svg { display: block; margin: 0 auto; }

.spi-mini .spi-mini-tier-label {
    margin: .1em 0 .5em !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 1.2em;
    font-weight: 800;
    color: var(--m-green-dark);
    line-height: 1.4;
}

.spi-mini .spi-mini-tier-msg {
    margin: 0 0 1.1em !important;
    padding: 0 !important;
    font-size: .92em;
    color: #556;
    line-height: 1.7;
}

.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; }

/* 会員登録者限定特典CTA（present_url／reashu.com内部・解除後の主導線）
   押せる立体ボタン＋遊び心（ギフトのゆらぎ・光沢スイープ・ホバー浮き上がり・押下反応）。
   結果画面は1クイズ1回しか見ないので装飾アニメを載せてよい（emil: rare→can add delight）。 */
.spi-mini-present-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    width: 100%;
    padding: .95em 1.2em;
    font-size: 1.03em;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff !important;
    text-decoration: none;
    border-radius: 14px;
    /* クリーン・ブランド緑（B案：ツヤ弱・影すっきり・くすみ除去） */
    background: linear-gradient(180deg, #2CB4A6 0%, #22A093 100%);
    /* 押せる感：下辺の濃い"厚み"＋やわらかい落ち影 */
    box-shadow: 0 4px 0 #1a8074, 0 8px 16px rgba(34,160,147,.30);
    overflow: hidden;
    transition: transform 140ms cubic-bezier(0.23,1,0.32,1), box-shadow 140ms ease-out;
}
/* 光沢スイープ（数秒ごとに一度だけ横切る） */
.spi-mini-present-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    animation: spi-present-sheen 3.4s ease-in-out .8s infinite;
    pointer-events: none;
}
@keyframes spi-present-sheen {
    0%   { left: -60%; }
    22%  { left: 130%; }
    100% { left: 130%; }
}
@media (hover: hover) and (pointer: fine) {
    .spi-mini-present-cta:hover {
        transform: translateY(-2px);
        background: linear-gradient(180deg, #33bdae 0%, #279e90 100%);
        box-shadow: 0 6px 0 #1a8074, 0 12px 22px rgba(34,160,147,.4);
        color: #fff !important;
    }
    .spi-mini-present-cta:hover .spi-mini-present-cta-arrow { transform: translateX(4px); }
}
/* 押下：厚みが沈んで実際に"押した"感 */
.spi-mini-present-cta:active {
    transform: translateY(2px);
    background: linear-gradient(180deg, #2CB4A6 0%, #22A093 100%);
    box-shadow: 0 2px 0 #1a8074, 0 4px 10px rgba(34,160,147,.28);
}
.spi-mini-present-cta-icon {
    display: inline-flex;
    flex: none;
    transform-origin: 50% 60%;
    animation: spi-present-wiggle 3.4s ease-in-out infinite;
}
.spi-mini-present-cta-icon svg { display: block; }
@keyframes spi-present-wiggle {
    0%, 86%, 100% { transform: rotate(0); }
    89% { transform: rotate(-10deg); }
    92% { transform: rotate(9deg); }
    95% { transform: rotate(-6deg); }
    98% { transform: rotate(3deg); }
}
.spi-mini-present-cta-label { position: relative; }
.spi-mini-present-cta-arrow {
    flex: none;
    font-weight: 800;
    transition: transform 160ms cubic-bezier(0.23,1,0.32,1);
}
@media (prefers-reduced-motion: reduce) {
    .spi-mini-present-cta::before,
    .spi-mini-present-cta-icon { animation: none; }
    .spi-mini-present-cta,
    .spi-mini-present-cta-arrow { transition: none; }
}

.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); }

.spi-mini-review-peer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5em;
}
.spi-mini-review-peer-pct {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--m-green-dark);
}
.spi-mini-review-item.is-wrong .spi-mini-review-peer-pct { color: var(--m-red); }
.spi-mini-review-peer-n {
    color: var(--m-muted);
    font-size: .85em;
}

/* ===== 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%;
    }
}

/* ===== YG本格版40問：タイプカード＋6特性バーグラフ ===== */
.spi-mini-yg-type-card {
    border: 2px solid;
    border-radius: 16px;
    padding: 1.4em 1.5em 1.6em;
    margin: 0 0 1.2em;
    text-align: center;
}
.spi-mini-yg-type-tag {
    display: inline-block;
    padding: .28em 1em;
    border-radius: 999px;
    color: #fff;
    font-size: .78em;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: .65em;
}
.spi-mini .spi-mini-yg-type-label {
    margin: 0 0 .6em !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 1.45em;
    font-weight: 800;
    line-height: 1.3;
}
.spi-mini .spi-mini-yg-type-label::before,
.spi-mini .spi-mini-yg-type-label::after { content: none !important; display: none !important; }
.spi-mini .spi-mini-yg-type-desc {
    margin: 0 !important;
    padding: 0 !important;
    font-size: .91em;
    line-height: 1.75;
    color: #4a5158;
    text-align: left;
}
/* 6特性バーグラフ */
.spi-mini-yg-bars {
    margin: 0 0 1.2em;
    padding: 1.1em 1.2em 1.2em;
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: 12px;
}
.spi-mini .spi-mini-yg-bars-title {
    margin: 0 0 .85em !important;
    padding: 0 0 0 .6em !important;
    border: 0 !important;
    border-left: 4px solid var(--m-green) !important;
    background: none !important;
    font-size: .95em;
    font-weight: 800;
    color: var(--m-text);
    line-height: 1.4;
}
.spi-mini .spi-mini-yg-bars-title::before,
.spi-mini .spi-mini-yg-bars-title::after { content: none !important; display: none !important; }
.spi-mini-yg-bar-row {
    display: flex;
    flex-direction: column;
    gap: .4em;
    margin-bottom: .9em;
    padding-bottom: .9em;
    border-bottom: 1px solid var(--m-border);
}
.spi-mini-yg-bar-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
/* バー上段：ラベル + バートラック + % + 高/中/低バッジ */
.spi-mini-yg-bar-top {
    display: flex;
    align-items: center;
    gap: .6em;
}
.spi-mini-yg-bar-label {
    flex: 0 0 6.8em;
    font-size: .88em;
    font-weight: 700;
    color: var(--m-text);
    white-space: nowrap;
}
.spi-mini-yg-bar-track {
    flex: 1;
    height: 13px;
    background: #e4efed;
    border-radius: 999px;
    overflow: hidden;
}
.spi-mini-yg-bar-fill {
    height: 100%;
    border-radius: 999px;
}
.spi-mini-yg-bar-pct {
    flex: none;
    font-size: .88em;
    font-weight: 800;
    min-width: 2.8em;
    text-align: right;
}
.spi-mini-yg-bar-level {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    color: #fff;
    font-size: .72em;
    font-weight: 800;
    line-height: 1;
}
/* コメント行 */
.spi-mini .spi-mini-yg-bar-comment {
    margin: 0 !important;
    padding: .55em .7em !important;
    background: var(--m-surface);
    border-radius: 8px;
    font-size: .86em;
    line-height: 1.72;
    color: #4a5158;
}
@media (max-width: 480px) {
    .spi-mini-yg-type-card { padding: 1.1em 1.1em 1.3em; }
    .spi-mini .spi-mini-yg-type-label { font-size: 1.25em; }
    .spi-mini-yg-bars { padding: .9em 1em 1em; }
    .spi-mini-yg-bar-label { flex: 0 0 5.2em; font-size: .82em; }
    .spi-mini-yg-bar-pct { font-size: .82em; }
    .spi-mini .spi-mini-yg-bar-comment { font-size: .82em; padding: .5em .6em !important; }
}

/* ===== エラー ===== */
.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-num { font-size: 1.9em; }
    .spi-mini-score-pct { font-size: 1.9em; }
    .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%; }
    .spi-mini-gate-blur-card { max-width: 100%; }
    /* ぼかしピルが長いので少し縮小 */
    .spi-mini-gate-blur-pill { font-size: 11px; padding: 7px 11px; }
}

.spi-mini-accent-orange .spi-mini-report { border-color: #f2dcc2; }
.spi-mini-accent-orange .spi-mini-report-head { background: linear-gradient(135deg, #D96D0A, #4a7fd0); }
.spi-mini-accent-orange .spi-mini-rep-sec { border-color: #f2e2d0; }
.spi-mini-accent-orange .spi-mini-rep-sec-head { background: #FFF2E3; color: #D96D0A; border-left-color: #F5821F; }
.spi-mini-accent-orange .spi-mini-rep-axis-score { color: #D96D0A; }
.spi-mini-accent-orange .spi-mini-rep-track { background: #fbeada; }
.spi-mini-accent-orange .spi-mini-rep-fill { background: linear-gradient(90deg, #F5821F, #4a7fd0); }
.spi-mini-accent-orange .spi-mini-rep-cv { background: #FFF2E3; border-left-color: #F5821F; }
.spi-mini-accent-orange .spi-mini-rep-cv-ax { color: #D96D0A; }
.spi-mini-accent-orange .spi-mini-rep-cv-lbl { background: #F5821F; }
.spi-mini-accent-orange .spi-mini-gate-go:hover { background: #D96D0A; }
.spi-mini-accent-orange .spi-mini-score-bar-fill { background: linear-gradient(90deg, #FF9F3D, #F5821F); }
/* yesno回答表：ヘッダー行の薄背景はオレンジ薄色に（中立） */
.spi-mini-accent-orange .spi-mini-yn-hrow th { background: #FEF5EB; }
.spi-mini-accent-orange .spi-mini-yn-hrow th:nth-child(3) { color: #1f8a80; }
.spi-mini-accent-orange .spi-mini-yn-hrow th:nth-child(4) { color: #c0392b; }
/* --- YES（最も当てはまる／近い）は緑のまま。ブランドはオレンジでも、
   ポジティブ選択の視認性を優先し YES=緑・NO=赤 の意味付けは保持する。
   --m-green が accent スコープでオレンジになっているので、YES系だけ緑を明示で戻す。 --- */
/* 回答表（YESNO_PAGED）：YES選択ドット・行背景 */
.spi-mini-accent-orange .spi-mini-yn-radio:hover .spi-mini-yn-dot { border-color: #2AA59A; }
.spi-mini-accent-orange .spi-mini-yn-radio-no:hover .spi-mini-yn-dot { border-color: #c0392b; }
.spi-mini-accent-orange .spi-mini-yn-radio input:checked + .spi-mini-yn-dot { border-color: #2AA59A; background: #2AA59A; }
.spi-mini-accent-orange .spi-mini-yn-radio-no input:checked + .spi-mini-yn-dot { border-color: #c0392b; background: #c0392b; }
.spi-mini-accent-orange .spi-mini-yn-trow.is-yes { background: #f0faf8; }
/* 単一カード型（is-yesno）：見出し・YES行・YESボタン */
.spi-mini-accent-orange .spi-mini-yn-h-yes { color: #1f8a80; }
.spi-mini-accent-orange .spi-mini-choices.is-yesno .spi-mini-yn-row.is-yes { border-color: #2AA59A; background: #f0fdfb; }
.spi-mini-accent-orange .spi-mini-yn-yes:has(input:checked) { background: #2AA59A; border-color: #2AA59A; }
/* 結果カード：YES（近い）の見え方カード */
.spi-mini-accent-orange .spi-mini-interp-pick.is-yes { border-left-color: #2AA59A; }
.spi-mini-accent-orange .spi-mini-interp-pick.is-yes .spi-mini-yn-tag { background: #E4F8F6; color: #1f8a80; }
/* 問題カード・確認欄の薄緑背景をオレンジ薄色に */
.spi-mini-accent-orange .spi-mini-q { background: #FEF9F3; }
.spi-mini-accent-orange .spi-mini-yn-item.is-answered { background: #FEF9F3; }
/* イントロ装飾の緑の丸（blob）をオレンジ系に */
.spi-mini-accent-orange .spi-mini-intro-blob-1 { background: #FCE3C4; }
.spi-mini-accent-orange .spi-mini-intro-blob-2 { background: #FBD3A6; }

/* =====================================================
   C-GAB 解き放題ロック導線（/c-gab/）
   ===================================================== */
.cgab-app {
    --cgab-teal: #26A69A;
    --cgab-teal-dark: #1f8a80;
    --cgab-bg: #eef7f6;
    --cgab-line: #06C755;
    --cgab-text: #1f2328;
    --cgab-muted: #667078;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    color: var(--cgab-text);
    margin: 1.4em auto 2.2em;
    max-width: 820px;
}
.cgab-app * { box-sizing: border-box; }
.cgab-app-shell {
    border: 1px solid #d9ece9;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98)),
        var(--cgab-bg);
    box-shadow: 0 18px 48px rgba(20, 79, 73, .12);
    overflow: hidden;
}
.cgab-app-hero {
    display: grid;
    grid-template-columns: 1fr 132px;
    gap: 18px;
    align-items: center;
    padding: 30px 30px 24px;
    background: linear-gradient(135deg, #e8faf7 0%, #ffffff 72%);
}
.cgab-app-kicker,
.cgab-app .cgab-app-kicker {
    margin: 0 0 8px !important;
    color: var(--cgab-teal-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}
.cgab-app h2,
.cgab-app h3 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--cgab-text);
    letter-spacing: 0;
}
.cgab-app h2 {
    max-width: 560px;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 800;
}
.cgab-app h3 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 800;
}
.cgab-app-hero p:not(.cgab-app-kicker) {
    margin: 12px 0 0 !important;
    color: var(--cgab-muted);
    font-size: 14px;
    line-height: 1.8;
}
.cgab-app-phone {
    width: 112px;
    height: 156px;
    justify-self: end;
    border: 7px solid #1f3331;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(31, 51, 49, .18);
    padding: 24px 14px;
}
.cgab-app-phone span {
    display: block;
    height: 16px;
    border-radius: 999px;
    background: #dff4f1;
    margin-bottom: 13px;
}
.cgab-app-phone span:nth-child(2) { width: 72%; background: #26A69A; }
.cgab-app-phone span:nth-child(3) { width: 86%; }
.cgab-app-trial {
    padding: 0 24px 24px;
}
.cgab-app-trial-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}
.cgab-app-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #E4F8F6;
    color: var(--cgab-teal-dark);
    font-size: 12px;
    font-weight: 800;
}
.cgab-app-pill-lock {
    background: #fff4e6;
    color: #d96d0a;
}
.cgab-app-trial > .spi-mini {
    margin: 0 auto !important;
    border-color: #dcefed;
    box-shadow: none;
}
.cgab-app-unlimited {
    margin: 0 24px 28px;
    padding: 18px;
    border: 1px solid #dcefed;
    border-radius: 18px;
    background: #ffffff;
}
.cgab-app-unlimited-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.cgab-app-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f5f5;
    color: #7a8584;
    font-size: 12px;
    font-weight: 800;
}
.cgab-app.is-unlocked .cgab-app-status {
    background: #E4F8F6;
    color: var(--cgab-teal-dark);
}
.cgab-app-modules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.cgab-app-module {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 78px;
    padding: 13px 14px;
    border: 1px solid #e0e8e7;
    border-radius: 14px;
    background: #f8fbfb;
    color: var(--cgab-text);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cgab-app-module:hover {
    transform: translateY(-1px);
    border-color: #b9ded9;
    box-shadow: 0 10px 20px rgba(31, 138, 128, .1);
}
.cgab-app-module-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.cgab-app-module-copy strong {
    font-size: 14px;
    line-height: 1.4;
}
.cgab-app-module-copy small {
    color: var(--cgab-muted);
    font-size: 12px;
    line-height: 1.4;
}
.cgab-app-lock {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #edf1f1;
}
.cgab-app-lock::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 14px;
    height: 12px;
    border: 2px solid #9aa7a6;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}
.cgab-app-lock::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 14px;
    width: 16px;
    height: 12px;
    border-radius: 4px;
    background: #9aa7a6;
}
.cgab-app.is-unlocked .cgab-app-module {
    background: #f4fbfa;
    border-color: #b9ded9;
}
.cgab-app.is-unlocked .cgab-app-lock {
    background: #E4F8F6;
}
.cgab-app.is-unlocked .cgab-app-lock::before { border-color: var(--cgab-teal); }
.cgab-app.is-unlocked .cgab-app-lock::after { background: var(--cgab-teal); }
.cgab-app-module-arrow {
    color: #9aa7a6;
    font-weight: 800;
}
.cgab-app.is-unlocked .cgab-app-module-arrow {
    color: var(--cgab-teal-dark);
}
.cgab-app-gate {
    margin-top: 16px;
    padding: 16px;
    border-radius: 16px;
    background: #f7fbfb;
}
.cgab-app.is-unlocked .cgab-app-gate { display: none; }
.cgab-app-line {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    width: 100%;
    border-radius: 12px;
    background: var(--cgab-line);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(6, 199, 85, .22);
}
.cgab-app-form {
    display: grid;
    grid-template-columns: 1fr 84px;
    gap: 8px;
    margin-top: 12px;
}
.cgab-app-form input {
    min-width: 0;
    height: 46px;
    border: 1px solid #d4e4e2;
    border-radius: 10px;
    padding: 0 13px;
    font-size: 14px;
}
.cgab-app-form button {
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: var(--cgab-teal);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.cgab-app-note,
.cgab-app-error {
    margin: 8px 0 0 !important;
    font-size: 12px;
    line-height: 1.6;
}
.cgab-app-note { color: var(--cgab-muted); }
.cgab-app-error { color: #e04e4e; font-weight: 700; }
.cgab-quiz-locked {
    position: relative;
    min-height: 190px;
}
.gab-top-app.cgab-route-locked {
    position: relative;
    min-height: 260px;
}
.gab-top-app.cgab-route-locked > *:not(.cgab-route-lock-overlay) {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}
.cgab-quiz-locked > *:not(.cgab-quiz-lock-overlay) {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}
.cgab-quiz-lock-overlay,
.cgab-route-lock-overlay {
    position: absolute;
    inset: 14px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #dcefed;
    border-radius: 16px;
    background: rgba(255, 255, 255, .86);
    color: var(--cgab-text);
    text-align: center;
    backdrop-filter: blur(6px);
}
.cgab-quiz-lock-overlay strong,
.cgab-route-lock-overlay strong {
    font-size: 16px;
    font-weight: 800;
}
.cgab-quiz-lock-overlay span,
.cgab-route-lock-overlay span {
    color: #667078;
    font-size: 13px;
}
@media (max-width: 640px) {
    .cgab-app {
        margin: 1em -2px 1.8em;
    }
    .cgab-app-shell {
        border-radius: 18px;
    }
    .cgab-app-hero {
        grid-template-columns: 1fr;
        padding: 24px 18px 18px;
    }
    .cgab-app h2 {
        font-size: 23px;
    }
    .cgab-app-phone {
        display: none;
    }
    .cgab-app-trial {
        padding: 0 12px 18px;
    }
    .cgab-app-unlimited {
        margin: 0 12px 18px;
        padding: 14px;
    }
    .cgab-app-modules {
        grid-template-columns: 1fr;
    }
    .cgab-app-form {
        grid-template-columns: 1fr;
    }
    .cgab-app-form button {
        width: 100%;
    }
}

/* =====================================================
   GAB性格検査用ティール accent（.spi-mini-accent-teal）。orange版をティールに。
   青(#4a7fd0)・LINE緑(#06C755)・赤(#c0392b)・YES緑(#2AA59A/#1f8a80)は共通色で不変。
   ===================================================== */
.spi-mini.spi-mini-accent-teal { --m-green:#0891B2; --m-green-dark:#0E7490; --m-green-light:#E0F7FB; }
.spi-mini-accent-teal .spi-mini-report { border-color: #B7E6EF; }
.spi-mini-accent-teal .spi-mini-report-head { background: linear-gradient(135deg, #0E7490, #4a7fd0); }
.spi-mini-accent-teal .spi-mini-rep-sec { border-color: #CFEFF6; }
.spi-mini-accent-teal .spi-mini-rep-sec-head { background: #E0F7FB; color: #0E7490; border-left-color: #0891B2; }
.spi-mini-accent-teal .spi-mini-rep-axis-score { color: #0E7490; }
.spi-mini-accent-teal .spi-mini-rep-track { background: #E0F7FB; }
.spi-mini-accent-teal .spi-mini-rep-fill { background: linear-gradient(90deg, #0891B2, #4a7fd0); }
.spi-mini-accent-teal .spi-mini-rep-cv { background: #E0F7FB; border-left-color: #0891B2; }
.spi-mini-accent-teal .spi-mini-rep-cv-ax { color: #0E7490; }
.spi-mini-accent-teal .spi-mini-rep-cv-lbl { background: #0891B2; }
.spi-mini-accent-teal .spi-mini-gate-go:hover { background: #0E7490; }
.spi-mini-accent-teal .spi-mini-score-bar-fill { background: linear-gradient(90deg, #38BDD6, #0891B2); }
.spi-mini-accent-teal .spi-mini-yn-hrow th { background: #EAF7FB; }
.spi-mini-accent-teal .spi-mini-yn-hrow th:nth-child(3) { color: #1f8a80; }
.spi-mini-accent-teal .spi-mini-yn-hrow th:nth-child(4) { color: #c0392b; }
.spi-mini-accent-teal .spi-mini-yn-radio:hover .spi-mini-yn-dot { border-color: #2AA59A; }
.spi-mini-accent-teal .spi-mini-yn-radio-no:hover .spi-mini-yn-dot { border-color: #c0392b; }
.spi-mini-accent-teal .spi-mini-yn-radio input:checked + .spi-mini-yn-dot { border-color: #2AA59A; background: #2AA59A; }
.spi-mini-accent-teal .spi-mini-yn-radio-no input:checked + .spi-mini-yn-dot { border-color: #c0392b; background: #c0392b; }
.spi-mini-accent-teal .spi-mini-yn-trow.is-yes { background: #f0faf8; }
.spi-mini-accent-teal .spi-mini-yn-h-yes { color: #1f8a80; }
.spi-mini-accent-teal .spi-mini-choices.is-yesno .spi-mini-yn-row.is-yes { border-color: #2AA59A; background: #f0fdfb; }
.spi-mini-accent-teal .spi-mini-yn-yes:has(input:checked) { background: #2AA59A; border-color: #2AA59A; }
.spi-mini-accent-teal .spi-mini-interp-pick.is-yes { border-left-color: #2AA59A; }
.spi-mini-accent-teal .spi-mini-interp-pick.is-yes .spi-mini-yn-tag { background: #E4F8F6; color: #1f8a80; }
.spi-mini-accent-teal .spi-mini-q { background: #F1FCFE; }
.spi-mini-accent-teal .spi-mini-yn-item.is-answered { background: #F1FCFE; }
.spi-mini-accent-teal .spi-mini-intro-blob-1 { background: #C7ECF4; }
.spi-mini-accent-teal .spi-mini-intro-blob-2 { background: #FBD3A6; }

/* ティールaccent時：cover(受験内容の確認)の開始ボタンをティールに（既定は玉手箱オレンジ直値） */
.spi-mini-accent-teal .spi-mini-cover-start { background:#0891B2; box-shadow:0 4px 16px rgba(8,145,178,.24), 0 1px 3px rgba(8,145,178,.18); }
.spi-mini-accent-teal .spi-mini-cover-start:hover { background:#0E7490; }

/* =====================================================
   CAB性格検査用バイオレット accent（.spi-mini-accent-violet）。teal版を紫に。
   CAB模試(cabmoshi_*)のバイオレット#7C3AEDに統一。
   青(#4a7fd0)・LINE緑(#06C755)・赤(#c0392b)・YES緑(#2AA59A/#1f8a80)は共通色で不変。
   ===================================================== */
.spi-mini.spi-mini-accent-violet { --m-green:#7C3AED; --m-green-dark:#6D28D9; --m-green-light:#EDE9FE; }
.spi-mini-accent-violet .spi-mini-report { border-color: #DDD6FE; }
.spi-mini-accent-violet .spi-mini-report-head { background: linear-gradient(135deg, #6D28D9, #4a7fd0); }
.spi-mini-accent-violet .spi-mini-rep-sec { border-color: #E5DEFF; }
.spi-mini-accent-violet .spi-mini-rep-sec-head { background: #EDE9FE; color: #6D28D9; border-left-color: #7C3AED; }
.spi-mini-accent-violet .spi-mini-rep-axis-score { color: #6D28D9; }
.spi-mini-accent-violet .spi-mini-rep-track { background: #EDE9FE; }
.spi-mini-accent-violet .spi-mini-rep-fill { background: linear-gradient(90deg, #7C3AED, #4a7fd0); }
.spi-mini-accent-violet .spi-mini-rep-cv { background: #EDE9FE; border-left-color: #7C3AED; }
.spi-mini-accent-violet .spi-mini-rep-cv-ax { color: #6D28D9; }
.spi-mini-accent-violet .spi-mini-rep-cv-lbl { background: #7C3AED; }
.spi-mini-accent-violet .spi-mini-gate-go:hover { background: #6D28D9; }
.spi-mini-accent-violet .spi-mini-score-bar-fill { background: linear-gradient(90deg, #A78BFA, #7C3AED); }
.spi-mini-accent-violet .spi-mini-yn-hrow th { background: #F3F0FF; }
.spi-mini-accent-violet .spi-mini-yn-hrow th:nth-child(3) { color: #1f8a80; }
.spi-mini-accent-violet .spi-mini-yn-hrow th:nth-child(4) { color: #c0392b; }
.spi-mini-accent-violet .spi-mini-yn-radio:hover .spi-mini-yn-dot { border-color: #2AA59A; }
.spi-mini-accent-violet .spi-mini-yn-radio-no:hover .spi-mini-yn-dot { border-color: #c0392b; }
.spi-mini-accent-violet .spi-mini-yn-radio input:checked + .spi-mini-yn-dot { border-color: #2AA59A; background: #2AA59A; }
.spi-mini-accent-violet .spi-mini-yn-radio-no input:checked + .spi-mini-yn-dot { border-color: #c0392b; background: #c0392b; }
.spi-mini-accent-violet .spi-mini-yn-trow.is-yes { background: #f0faf8; }
.spi-mini-accent-violet .spi-mini-yn-h-yes { color: #1f8a80; }
.spi-mini-accent-violet .spi-mini-choices.is-yesno .spi-mini-yn-row.is-yes { border-color: #2AA59A; background: #f0fdfb; }
.spi-mini-accent-violet .spi-mini-yn-yes:has(input:checked) { background: #2AA59A; border-color: #2AA59A; }
.spi-mini-accent-violet .spi-mini-interp-pick.is-yes { border-left-color: #2AA59A; }
.spi-mini-accent-violet .spi-mini-interp-pick.is-yes .spi-mini-yn-tag { background: #E4F8F6; color: #1f8a80; }
.spi-mini-accent-violet .spi-mini-q { background: #F5F2FF; }
.spi-mini-accent-violet .spi-mini-yn-item.is-answered { background: #F5F2FF; }
.spi-mini-accent-violet .spi-mini-intro-blob-1 { background: #DDD6FE; }
.spi-mini-accent-violet .spi-mini-intro-blob-2 { background: #C4B5FD; }
/* violet accent時：cover(受験内容の確認)の開始ボタンを紫に（既定は玉手箱オレンジ直値） */
.spi-mini-accent-violet .spi-mini-cover-start { background:#7C3AED; box-shadow:0 4px 16px rgba(124,58,237,.24), 0 1px 3px rgba(124,58,237,.18); }
.spi-mini-accent-violet .spi-mini-cover-start:hover { background:#6D28D9; }

/* =====================================================
   TG-WEB性格検査用ブルー accent（.spi-mini-accent-blue）。teal版を青に。
   TG-WEB模試（tgweb_top/confirm/exam）の #2563EB に統一。
   LINE緑(#06C755)・赤(#c0392b)・YES緑(#2AA59A/#1f8a80)は共通色で不変。
   scale（○を並べる4段階）の○は var(--m-green) 参照なのでこの上書きだけで青になる。
   ===================================================== */
.spi-mini.spi-mini-accent-blue { --m-green:#2563EB; --m-green-dark:#1D4ED8; --m-green-light:#EAF2FE; }
.spi-mini-accent-blue .spi-mini-report { border-color: #C3D7FB; }
.spi-mini-accent-blue .spi-mini-report-head { background: linear-gradient(135deg, #1D4ED8, #4a7fd0); }
.spi-mini-accent-blue .spi-mini-rep-sec { border-color: #D7E5FC; }
.spi-mini-accent-blue .spi-mini-rep-sec-head { background: #EAF2FE; color: #1D4ED8; border-left-color: #2563EB; }
.spi-mini-accent-blue .spi-mini-rep-axis-score { color: #1D4ED8; }
.spi-mini-accent-blue .spi-mini-rep-track { background: #EAF2FE; }
.spi-mini-accent-blue .spi-mini-rep-fill { background: linear-gradient(90deg, #2563EB, #5B8DEF); }
.spi-mini-accent-blue .spi-mini-rep-cv { background: #EAF2FE; border-left-color: #2563EB; }
.spi-mini-accent-blue .spi-mini-rep-cv-ax { color: #1D4ED8; }
.spi-mini-accent-blue .spi-mini-rep-cv-lbl { background: #2563EB; }
.spi-mini-accent-blue .spi-mini-gate-go:hover { background: #1D4ED8; }
.spi-mini-accent-blue .spi-mini-score-bar-fill { background: linear-gradient(90deg, #5B8DEF, #2563EB); }
.spi-mini-accent-blue .spi-mini-q { background: #F4F8FF; }
.spi-mini-accent-blue .spi-mini-intro-blob-1 { background: #C3D7FB; }
.spi-mini-accent-blue .spi-mini-intro-blob-2 { background: #AFCBFA; }
/* blue accent時：cover(受験内容の確認)の開始ボタンを青に（既定は玉手箱オレンジ直値） */
.spi-mini-accent-blue .spi-mini-cover-start { background:#2563EB; box-shadow:0 4px 16px rgba(37,99,235,.24), 0 1px 3px rgba(37,99,235,.18); }
.spi-mini-accent-blue .spi-mini-cover-start:hover { background:#1D4ED8; }

/* ===========================================================================
   制限時間つきミニクイズ（[spi_mini time_limit="6:00"]）
   time_limit を指定したクイズにしか出ない要素だけをここに置く。
   既存クイズは data-spi-time-limit を持たない＝この節のセレクタは1つも当たらない。
   =========================================================================== */

/* --- 出題中ヘッダーの残り時間ピル（.spi-mini-status と同じ形にそろえる） --- */
.spi-mini .spi-mini-timer {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    flex: none;
    font-size: .9em;
    color: var(--m-muted);
    background: var(--m-surface);
    padding: .35em .8em;
    border-radius: 999px;
    /* 秒が減るたびに幅が揺れないよう等幅数字にする */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.spi-mini .spi-mini-timer-icon { flex: none; }
.spi-mini .spi-mini-timer-label { font-weight: 500; }
.spi-mini .spi-mini-timer-val {
    font-weight: 700;
    color: var(--m-text);
    font-size: 1.05em;
    letter-spacing: .02em;
}
/* 残り1分を切ったら注意（オレンジ）、超過したら赤。色だけでなく文言も「残り→超過」に変わる
   ＝色覚に依存しない（デザイン.md：状態を色だけで伝えない）。 */
.spi-mini .spi-mini-timer[data-state="warn"] {
    background: #FFF4E5;
    color: #B26A00;
}
.spi-mini .spi-mini-timer[data-state="warn"] .spi-mini-timer-val { color: #B26A00; }
.spi-mini .spi-mini-timer[data-state="over"] {
    background: var(--m-red-light);
    color: var(--m-red);
}
.spi-mini .spi-mini-timer[data-state="over"] .spi-mini-timer-val { color: var(--m-red); }

.spi-mini .spi-mini-timer[data-state="ready"] .spi-mini-timer-val { color: var(--m-muted); }


/* ヘッダーと本体の間の区切り線（模試 .spi-quiz-body の border-top と同じ）。 */
.spi-mini .spi-mini-body {
    padding-top: 1em;
    border-top: 1px solid var(--m-border);
}

/* --- 右上：2重リングメーター（模試 .spi-quiz-meter）--- */
.spi-mini .spi-mini-meter {
    display: flex;
    flex-direction: column;   /* 上＝「● 解答状況 3 / 5」／下＝バー */
    align-items: flex-end;    /* ヘッダー右端に揃える */
    gap: .35em;
    flex: none;
}
.spi-mini .spi-mini-progressbar {
    width: 132px;
    height: 8px;
    border-radius: 999px;
    background: #eef1f3;      /* 旧 .spi-mini-pie-bg と同じ地の色 */
    overflow: hidden;
    flex: none;
}
.spi-mini .spi-mini-progressbar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #E9C61C;      /* 凡例の .dot-progress と同色＝どの数字のバーかが色で分かる */
    transition: width .25s ease;
}
.spi-mini .spi-mini-meter-legend {
    list-style: none; padding: 0 !important; margin: 0 !important;
    font-size: .82em; color: var(--m-muted); line-height: 1.6;
}
.spi-mini .spi-mini-meter-legend li {
    display: flex; align-items: center; gap: .4em;
    margin: 0 !important; padding: 0 !important;
}
.spi-mini .spi-mini-meter-legend li::before,
.spi-mini .spi-mini-meter-legend li::marker { content: none !important; display: none !important; }
.spi-mini .spi-mini-meter-legend em {
    font-style: normal; font-weight: 700; color: var(--m-text);
    font-variant-numeric: tabular-nums; margin-left: .2em;
}
.spi-mini .spi-mini-meter-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.spi-mini .spi-mini-meter-legend .dot-time     { background: var(--m-green); }
.spi-mini .spi-mini-meter-legend .dot-progress { background: #E9C61C; }
/* 残り時間は凡例の「時間」行の値として出す（別チップにしない＝模試と同じ並び）。
   状態は文言でも変わる（制限→残り→超過）ので、色だけに頼らない（デザイン.md）。 */

/* --- フッター：回答時間バー ＋ 次へ（模試 .spi-quiz-footer と同じ横並び）--- */
.spi-mini .spi-mini-actions { display: flex; align-items: center; gap: 1.2em; }
.spi-mini .spi-mini-timebar { display: flex; align-items: center; gap: .8em; flex: 1; min-width: 0; }
.spi-mini .spi-mini-timebar-label { font-size: .85em; color: var(--m-text); font-weight: 700; flex: none; }
.spi-mini .spi-mini-timebar-track { position: relative; flex: 1; display: flex; gap: 3px; height: 22px; min-width: 0; }
.spi-mini .spi-mini-timebar-seg { flex: 1; min-width: 0; border-radius: 2px; }
.spi-mini .spi-mini-timebar-marker {
    position: absolute; top: -10px; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid #1f2328;
    pointer-events: none; will-change: left;
}
.spi-mini .spi-mini-actions .spi-mini-btn-next { flex: none; min-width: 110px; }

/* --- 狭い面（記事内＝ほぼこちら）。模試の 720px ブレークポイントと同じ畳み方にする。
       ヘッダーのメーターは問題カードの右上へ小さく入れ込み、凡例は進捗の数字だけ残す。 --- */
@media (max-width: 720px) {
    .spi-mini .spi-mini-meter { gap: .5em; }
    .spi-mini .spi-mini-progressbar { width: 96px; height: 7px; }
    .spi-mini .spi-mini-meter-legend { font-size: 0; line-height: 1.2; }
    /* 狭い面は凡例のラベルを落として数字だけにする（模試と同じ畳み方）。
       時間行は「残り 2:13」の数字が要るので**隠さず**、ラベルだけ font-size:0 で消して値を戻す。 */
    .spi-mini .spi-mini-meter-legend li { gap: 0; }
    .spi-mini .spi-mini-meter-legend li .dot { display: none; }
    .spi-mini .spi-mini-meter-legend li [data-role="timer-label"] { display: none; }
    .spi-mini .spi-mini-meter-legend li em { font-size: 13px; margin: 0; }
    .spi-mini .spi-mini-meter-legend li:last-child { font-size: 0; gap: 0; }
    .spi-mini .spi-mini-meter-legend li:last-child .dot { display: none; }
    .spi-mini .spi-mini-meter-legend li:last-child em { font-size: 13px; margin: 0; }
    .spi-mini .spi-mini-body { padding-top: 0; border-top: none; }
    .spi-mini .spi-mini-actions { flex-wrap: wrap; gap: .8em; }
    .spi-mini .spi-mini-timebar { flex: 1 1 100%; }
    .spi-mini .spi-mini-actions .spi-mini-btn-next { width: 100%; }
}

.spi-mini .spi-mini-timerstart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;            /* .spi-mini-timebar は flex なので伸縮させない */
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: var(--m-green);
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s ease, border-color .15s ease;
}
.spi-mini .spi-mini-timerstart-btn:hover,
.spi-mini .spi-mini-timerstart-btn:focus-visible {
    background: var(--m-surface);
    border-color: var(--m-green);
}
/* 三角は左に重心が寄るので 1px だけ右へ＝丸の視覚的な中心に合わせる。 */
.spi-mini .spi-mini-timerstart-btn svg { flex: none; margin-left: 1px; }

/* --- 結果画面：ゲートの前に出す所要時間（点数は出さない）--- */
.spi-mini .spi-mini-timeres {
    display: block;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    text-align: center;
}
.spi-mini .spi-mini-timeres-main {
    display: block;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--m-text);
}
.spi-mini .spi-mini-timeres-sub {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--m-muted);
}
.spi-mini .spi-mini-timeres.is-intime {
    border-color: var(--m-green);
    background: var(--m-green-light);
}
.spi-mini .spi-mini-timeres.is-intime .spi-mini-timeres-main { color: var(--m-green-dark); }
.spi-mini .spi-mini-timeres.is-over {
    border-color: var(--m-red);
    background: var(--m-red-light);
}
.spi-mini .spi-mini-timeres.is-over .spi-mini-timeres-main { color: var(--m-red); }

@media (max-width: 720px) {
    .spi-mini .spi-mini-timer { padding: .25em .65em; font-size: .85em; }
    .spi-mini .spi-mini-timeres-main { font-size: 15px; }

}

.spi-mini .spi-mini-tiers {
    background: #fff;
    border: 2px solid #b6e9e4;
    border-radius: 16px;
    padding: 20px 16px 18px;
    margin: 0 0 14px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(38, 166, 154, .10);
}
.spi-mini .spi-mini-tiers-eyebrow {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    line-height: 1.6;
}
.spi-mini .spi-mini-tiers-verdict {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 900;
    color: #12a99d;
}
/* 判定カードと共用のクラス。inline CSS が出ないページでも同じ見た目になるよう再宣言する。 */
.spi-mini .spi-mini-tiers .spi-mini-judge-num {
    margin: 2px 0 0;
    font-weight: 900;
    color: #12a99d;
    line-height: 1;
}
.spi-mini .spi-mini-tiers .spi-mini-judge-num span {
    font-size: 64px;
    letter-spacing: -.02em;
}
.spi-mini .spi-mini-tiers .spi-mini-judge-sub {
    margin: 4px 0 14px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 700;
}

/* 段の一覧。左＝段のラベルと企業名、右＝「あなたはここ」。
   ⚠ 企業名は3〜17文字と幅があるので、行は必ず折り返せるようにしておく
     （固定pxの1行前提にすると長い社名で必ず破綻する）。 */
.spi-mini .spi-mini-tiers-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    text-align: left;
}
.spi-mini .spi-mini-tiers-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    padding: 10px 12px;
    border: 1px solid #e6edf0;
    border-radius: 10px;
    background: #fafcfc;
}
.spi-mini .spi-mini-tiers-row + .spi-mini-tiers-row { margin-top: 6px; }
.spi-mini .spi-mini-tiers-row.is-here {
    border-color: #12a99d;
    background: #E4F8F6;
    box-shadow: 0 0 0 2px rgba(18, 169, 157, .15);
}
.spi-mini .spi-mini-tiers-label {
    font-size: 14px;
    font-weight: 800;
    color: #333;
}
.spi-mini .spi-mini-tiers-row.is-here .spi-mini-tiers-label { color: #0f8d83; }
.spi-mini .spi-mini-tiers-firms {
    flex: 1 1 100%;
    font-size: 12.5px;
    line-height: 1.7;
    color: #6b7280;
}
.spi-mini .spi-mini-tiers-here {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: #12a99d;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}
.spi-mini .spi-mini-tiers-msg {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.8;
    text-align: left;
    color: #333;
}
.spi-mini .spi-mini-tiers-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.7;
    text-align: left;
    color: #8a949c;
}

/* 320〜360px は 64px の数字とバッジが窮屈になるので一段だけ詰める。 */
@media (max-width: 360px) {
    .spi-mini .spi-mini-tiers { padding: 16px 12px 14px; }
    .spi-mini .spi-mini-tiers .spi-mini-judge-num span { font-size: 54px; }
    .spi-mini .spi-mini-tiers-msg { font-size: 13px; }
    .spi-mini .spi-mini-tiers-row { padding: 9px 10px; }
}