/**
 * Boochi Siken Core - Shared Quiz UI
 * Version: 1.24.0
 *
 * 対応する過去問道場で共通利用する bsc-* 名前空間の共通スタイル。
 * 各試験は従来の prefix class もDOMに残しつつ、bsc-* aliasを併記するため、
 * 外部カスタマイズとの互換性を維持したまま1本のCSSを共有できる。
 */

/* =========================================================
   Design tokens
   ========================================================= */
:root {
    /* Base: #46757e on white */
    --bsc-brand: #46757e;
    --bsc-brand-hover: #375f67;
    --bsc-brand-deep: #2f5158;
    --bsc-primary: #1b2426;
    --bsc-primary-hover: #2a3639;
    --bsc-accent: #46757e;
    --bsc-accent-hover: #375f67;
    --bsc-accent-soft: #eef4f5;
    --bsc-bg: #ffffff;
    --bsc-surface: #ffffff;
    --bsc-surface-muted: #f7f9fa;
    --bsc-text: #1b2426;
    --bsc-text-soft: #4a565a;
    --bsc-text-muted: #6d7a7e;
    --bsc-border: #e4eaeb;
    --bsc-border-strong: #cbd5d7;
    --bsc-success: #2f7d6a;
    --bsc-success-soft: #eef6f3;
    --bsc-warning: #9a6b1f;
    --bsc-warning-soft: #fbf6ec;
    --bsc-partial: #8a641d;
    --bsc-partial-soft: #fff8e8;
    --bsc-danger: #b04a44;
    --bsc-danger-soft: #faf1f0;
    --bsc-radius-sm: 8px;
    --bsc-radius: 10px;
    --bsc-radius-lg: 12px;
    --bsc-shadow-sm: none;
    --bsc-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --bsc-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --bsc-container: 890px;
    --bsc-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 見出し階層を保ったまま、視覚上は既存レイアウトを維持する。 */
.bsc-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Backward-compatible variable aliases */
:root {
    --primary: var(--bsc-primary);
    --primary-light: var(--bsc-primary-hover);
    --accent: var(--bsc-accent);
    --accent-soft: var(--bsc-accent-soft);
    --bg-body: var(--bsc-bg);
    --bg-card: var(--bsc-surface);
    --text-main: var(--bsc-text);
    --text-muted: var(--bsc-text-muted);
    --success: var(--bsc-success);
    --success-soft: var(--bsc-success-soft);
    --warning: var(--bsc-warning);
    --warning-soft: var(--bsc-warning-soft);
    --error: var(--bsc-danger);
    --error-soft: var(--bsc-danger-soft);
    --border: var(--bsc-border);
    --radius: var(--bsc-radius);
}

/* =========================================================
   Base
   ========================================================= */
.bsc-quiz-app,
.bsc-quiz-app *,
.bsc-quiz-app *::before,
.bsc-quiz-app *::after,
.bsc-seo-shell,
.bsc-seo-shell *,
.bsc-seo-shell *::before,
.bsc-seo-shell *::after {
    box-sizing: border-box;
}

.bsc-quiz-app {
    width: min(100%, var(--bsc-container));
    min-height: 540px;
    margin: 36px auto;
    color: var(--bsc-text);
    font-family: var(--bsc-font);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bsc-quiz-app button,
.bsc-quiz-app select,
.bsc-quiz-app textarea,
.bsc-quiz-app input {
    font: inherit;
}

.bsc-quiz-app button,
.bsc-quiz-app select,
.bsc-quiz-app input[type="checkbox"],
.bsc-quiz-app input[type="radio"] {
    touch-action: manipulation;
}

.bsc-card {
    overflow: hidden;
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius-lg);
    background: var(--bsc-surface);
    box-shadow: var(--bsc-shadow);
    animation: bsc-enter 0.25s ease-out;
}

@keyframes bsc-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Headings and start screen
   ========================================================= */
.start-header {
    max-width: 620px;
    margin: 0 auto 28px;
    text-align: center;
}

.start-header h1,
.start-header h2,
.finish-card h2 {
    margin: 0 0 8px;
    color: var(--bsc-primary);
    font-size: clamp(1.5rem, 3.6vw, 2rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.start-header p {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.94rem;
}

.compact-header {
    margin-bottom: 22px;
}

.resume-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid #cfdee1;
    border-radius: var(--bsc-radius);
    background: var(--bsc-accent-soft);
}

.resume-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: var(--bsc-surface);
    font-size: 1.25rem;
    box-shadow: var(--bsc-shadow-sm);
}

.resume-content h2 {
    margin: 0 0 4px;
    color: #26454b;
    font-size: 1rem;
    font-weight: 800;
}

.resume-content p {
    margin: 0;
    color: #4a565a;
    font-size: 0.8rem;
}

/* =========================================================
   Dashboard and settings
   ========================================================= */
.learning-dashboard,
.history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.dashboard-stat {
    min-width: 0;
    min-height: 82px;
    padding: 14px 8px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius-sm);
    background: var(--bsc-surface-muted);
    color: var(--bsc-primary);
    text-align: center;
}

.dashboard-stat strong {
    display: block;
    overflow: hidden;
    color: var(--bsc-primary);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.dashboard-stat span {
    display: block;
    margin-top: 3px;
    color: var(--bsc-text-muted);
    font-size: 0.69rem;
    white-space: nowrap;
}

.dashboard-stat-button {
    cursor: pointer;
    appearance: none;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.dashboard-stat-button:hover {
    border-color: #b3cbd0;
    background: var(--bsc-accent-soft);
    transform: translateY(-1px);
}

.dashboard-stat-button:focus-visible,
.history-link-button:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.history-link-button {
    display: block;
    margin: 0 auto 26px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--bsc-accent);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.history-link-button:hover {
    background: var(--bsc-accent-soft);
}

.learning-settings {
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface-muted);
}

.filter-group {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-label,
.filter-label-row .filter-label {
    display: block;
    margin: 0 0 7px;
    color: var(--bsc-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.025em;
}

.filter-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.available-count {
    color: var(--bsc-accent);
    font-size: 0.76rem;
    font-weight: 700;
}

.range-item,
.report-textarea {
    width: 100%;
    border: 1px solid var(--bsc-border-strong);
    border-radius: var(--bsc-radius-sm);
    background: var(--bsc-surface);
    color: var(--bsc-text);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.range-item {
    min-height: 48px;
    padding: 10px 40px 10px 13px;
    font-size: 0.94rem;
    cursor: pointer;
}

.range-item:hover {
    border-color: #97a3a6;
}

.range-item:focus-visible,
.report-textarea:focus-visible {
    border-color: var(--bsc-accent);
    outline: none;
    box-shadow: var(--bsc-focus);
}

.range-item option:disabled {
    color: #97a3a6;
}

.check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.check-item,
.toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.check-item {
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--bsc-border);
    border-radius: 999px;
    background: var(--bsc-surface);
    color: var(--bsc-text-soft);
    font-size: 0.84rem;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.check-item:hover {
    border-color: #b3cbd0;
}

.check-item:has(input:checked) {
    border-color: #b3cbd0;
    background: var(--bsc-accent-soft);
    color: #2f5158;
    font-weight: 700;
}

.check-item input,
.toggle-item input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--bsc-accent);
}

.toggle-list {
    display: grid;
    gap: 11px;
    margin-top: 4px;
}

.toggle-item {
    color: var(--bsc-text-soft);
    font-size: 0.88rem;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn-primary,
.btn-secondary,
.btn-danger-outline,
.btn-exam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 13px 18px;
    border-radius: var(--bsc-radius-sm);
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.btn-primary,
.btn-exam {
    margin-top: 22px;
    border: 1px solid var(--bsc-primary);
    background: var(--bsc-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-exam:hover {
    background: var(--bsc-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(27, 36, 38, 0.14);
}

.btn-primary:focus-visible,
.btn-exam:focus-visible,
.btn-secondary:focus-visible,
.btn-danger-outline:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.btn-primary:disabled,
.btn-exam:disabled,
.btn-secondary:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    border: 1px solid var(--bsc-border-strong);
    background: var(--bsc-surface);
    color: var(--bsc-primary);
}

.btn-secondary:hover {
    border-color: #97a3a6;
    background: var(--bsc-surface-muted);
}

.btn-danger-outline {
    border: 1px solid #ecd0ce;
    background: var(--bsc-surface);
    color: #9e433d;
}

.btn-danger-outline:hover {
    border-color: var(--bsc-danger);
    background: var(--bsc-danger-soft);
}

.btn-compact {
    width: auto;
    min-height: 38px;
    margin-top: 0;
    padding: 8px 12px;
    font-size: 0.8rem;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

.stack-actions {
    display: grid;
    gap: 10px;
    margin-top: 28px;
}

.stack-actions .btn-primary,
.stack-actions .btn-secondary,
.stack-actions .btn-danger-outline,
.stack-actions .btn-exam {
    margin-top: 0;
}

.start-disclaimer {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--bsc-border);
}

.start-disclaimer p {
    margin: 0 0 6px;
    color: var(--bsc-text-muted);
    font-size: 0.7rem;
    line-height: 1.7;
}

/* =========================================================
   Question screen
   ========================================================= */
.bsc-card.question-card {
    scroll-margin-top: 24px;
}

.progress-container {
    width: 100%;
    height: 6px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4eaeb;
}

.progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--bsc-accent);
    transition: width 0.25s ease;
}

.question-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.live-stats {
    color: var(--bsc-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.favorite-button,
.exam-flag-button,
.report-button,
.history-detail-button {
    border: 1px solid var(--bsc-border);
    background: var(--bsc-surface);
    color: var(--bsc-text-muted);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.favorite-button {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.favorite-button:hover,
.favorite-button:focus-visible,
.favorite-button.is-favorite {
    border-color: #c69a3a;
    outline: none;
    background: var(--bsc-warning-soft);
    color: #7a5518;
}

.quiz-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.015em;
}

.badge-blue {
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-hover);
}

.badge-gray {
    background: #f1f4f5;
    color: #4a565a;
}

.question-category,
.category-label {
    margin-bottom: 7px;
    color: var(--bsc-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.question-text {
    margin: 0 0 26px;
    color: var(--bsc-primary);
    font-size: clamp(1.08rem, 2.5vw, 1.28rem);
    font-weight: 760;
    line-height: 1.72;
    letter-spacing: -0.012em;
    white-space: pre-wrap;
}

.options-list {
    display: grid;
    gap: 10px;
}

.option-btn {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: 58px;
    padding: 15px 17px;
    border: 1px solid var(--bsc-border);
    border-radius: 13px;
    background: var(--bsc-surface);
    color: var(--bsc-text);
    font-size: 0.94rem;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--bsc-shadow-sm);
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.option-btn:hover:not(:disabled) {
    border-color: #b3cbd0;
    background: #f8fbfb;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(27, 36, 38, 0.06);
}

.option-btn:focus-visible:not(:disabled) {
    border-color: var(--bsc-accent);
    outline: none;
    box-shadow: var(--bsc-focus);
}

.option-btn:disabled {
    cursor: default;
    opacity: 1;
}

.opt-num {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: 0 11px 0 0;
    place-items: center;
    border-radius: 8px;
    background: #f1f4f5;
    color: var(--bsc-text-soft);
    font-size: 0.8rem;
    font-weight: 900;
}

.option-btn.correct {
    border-color: #a6cfc3 !important;
    background: var(--bsc-success-soft) !important;
    color: #2b6a5b !important;
    box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.08);
}

.option-btn.correct .opt-num {
    background: #e6f2ee;
    color: #2f7d6a;
}

.option-btn.wrong {
    border-color: #dcaeab !important;
    background: var(--bsc-danger-soft) !important;
    color: #8b3a35 !important;
}

.option-btn.wrong .opt-num {
    background: #f6e3e2;
    color: #9e433d;
}

.feedback-area {
    display: none;
}

.feedback-area.is-visible {
    display: block;
}

.feedback-box {
    margin-top: 22px;
    padding: 21px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface-muted);
    animation: bsc-enter 0.22s ease-out;
}

.feedback-box h3 {
    margin: 0 0 9px;
    color: var(--bsc-primary);
    font-size: 1rem;
    font-weight: 800;
}

.correct-answer {
    margin-bottom: 12px;
    color: var(--bsc-primary);
    font-size: 0.96rem;
    font-weight: 800;
}

.explanation-text {
    color: var(--bsc-text-soft);
    font-size: 0.9rem;
    line-height: 1.82;
    white-space: pre-wrap;
}

.self-rating {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--bsc-border);
    border-radius: 12px;
    background: var(--bsc-surface);
}

.self-rating p {
    margin: 0 0 10px;
    color: var(--bsc-primary);
    font-size: 0.84rem;
    font-weight: 800;
}

.rating-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.rating-button {
    min-height: 42px;
    padding: 8px;
    border: 1px solid var(--bsc-border);
    border-radius: 9px;
    background: var(--bsc-surface);
    color: var(--bsc-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.rating-button:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.rating-good:hover:not(:disabled),
.rating-good.is-selected {
    border-color: #a6cfc3;
    background: var(--bsc-success-soft);
    color: #2b6a5b;
}

.rating-mid:hover:not(:disabled),
.rating-mid.is-selected {
    border-color: #d9b264;
    background: var(--bsc-warning-soft);
    color: #7a5518;
}

.rating-bad:hover:not(:disabled),
.rating-bad.is-selected {
    border-color: #dcaeab;
    background: var(--bsc-danger-soft);
    color: #8b3a35;
}

.rating-button:disabled {
    cursor: default;
}

/* =========================================================
   Results and history
   ========================================================= */
.finish-card {
    text-align: center;
}

.finish-icon {
    margin-bottom: 8px;
    font-size: 2.6rem;
    line-height: 1;
}

.score-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.stat-card {
    min-width: 0;
    padding: 16px 10px;
    border: 1px solid var(--bsc-border);
    border-radius: 13px;
    background: var(--bsc-surface-muted);
    text-align: center;
}

.stat-value {
    display: block;
    overflow-wrap: anywhere;
    color: var(--bsc-primary);
    font-size: 1.35rem;
    font-weight: 850;
}

.stat-label {
    display: block;
    color: var(--bsc-text-muted);
    font-size: 0.7rem;
}

.result-analysis,
.history-section {
    margin-top: 25px;
    text-align: left;
}

.result-analysis h3,
.history-section h2 {
    margin: 0 0 11px;
    color: var(--bsc-primary);
    font-size: 1rem;
    font-weight: 800;
}

.analysis-row,
.history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bsc-border);
    font-size: 0.84rem;
}

.analysis-row span,
.history-row span {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--bsc-text-soft);
}

.analysis-row strong,
.history-row strong {
    flex: 0 0 auto;
    color: var(--bsc-primary);
    font-size: 0.82rem;
}

.history-list {
    border-top: 1px solid var(--bsc-border);
}

.recent-session-list {
    display: grid;
    gap: 10px;
}

.recent-session {
    padding: 14px;
    border: 1px solid var(--bsc-border);
    border-radius: 12px;
    background: var(--bsc-surface-muted);
}

.recent-session-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.recent-session-title strong {
    color: var(--bsc-primary);
    font-size: 0.86rem;
}

.recent-session-title time {
    color: var(--bsc-text-muted);
    font-size: 0.68rem;
}

.recent-session p,
.empty-message {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.76rem;
}

.history-note {
    margin: 24px 0 0;
    padding: 12px;
    border: 1px solid #cfdee1;
    border-radius: 10px;
    background: var(--bsc-accent-soft);
    color: #2f5158;
    font-size: 0.76rem;
    text-align: center;
}

.history-detail-button {
    margin-top: 8px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 0.69rem;
    font-weight: 800;
}

.history-detail-button:hover,
.history-detail-button:focus-visible {
    border-color: #b3cbd0;
    outline: none;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-hover);
}

/* =========================================================
   Exam mode
   ========================================================= */
.exam-start-panel {
    margin: 0 0 28px;
    padding: 22px;
    border: 1px solid #cfdee1;
    border-radius: var(--bsc-radius);
    background: var(--bsc-accent-soft);
}

.exam-start-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.exam-start-icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    background: var(--bsc-surface);
    font-size: 1.35rem;
}

.exam-start-copy h2 {
    margin: 0 0 5px;
    color: #26454b;
    font-size: 1.08rem;
    font-weight: 800;
}

.exam-start-copy p {
    margin: 0;
    color: #4a565a;
    font-size: 0.82rem;
}

.exam-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    margin: 17px 0;
    color: #2f5158;
    font-size: 0.76rem;
    font-weight: 700;
}

.btn-exam {
    margin-top: 0;
    border-color: var(--bsc-accent);
    background: var(--bsc-accent);
}

.btn-exam:hover {
    background: var(--bsc-accent-hover);
}

.section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: var(--bsc-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-divider::before,
.section-divider::after {
    height: 1px;
    flex: 1;
    background: var(--bsc-border);
    content: "";
}

.exam-card {
    overflow: visible;
}

.exam-sticky-header {
    position: sticky;
    z-index: 20;
    top: 8px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: -16px -16px 22px;
    padding: 11px 14px;
    border: 1px solid var(--bsc-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(27, 36, 38, 0.08);
    backdrop-filter: blur(12px);
}

.exam-timer-box {
    display: flex;
    flex-direction: column;
    min-width: 102px;
}

.exam-timer-box span {
    color: var(--bsc-text-muted);
    font-size: 0.64rem;
    font-weight: 700;
}

.exam-timer-box strong,
.exam-review-timer {
    color: var(--bsc-accent);
    font-variant-numeric: tabular-nums;
    font-size: 1.12rem;
    font-weight: 850;
    letter-spacing: 0.04em;
}

[data-exam-timer].is-warning {
    color: var(--bsc-warning);
}

[data-exam-timer].is-danger {
    color: var(--bsc-danger);
    animation: bsc-timer 1s infinite;
}

@keyframes bsc-timer {
    50% { opacity: 0.55; }
}

.exam-live-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    color: var(--bsc-text-soft);
    font-size: 0.76rem;
    font-weight: 800;
}

.exam-flag-button {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.exam-flag-button:hover,
.exam-flag-button:focus-visible,
.exam-flag-button.is-flagged {
    border-color: #c69a3a;
    outline: none;
    background: var(--bsc-warning-soft);
    color: #7a5518;
}

.exam-options .option-btn.is-selected {
    border-color: #7ea6ad;
    background: var(--bsc-accent-soft);
    box-shadow: 0 0 0 2px rgba(70, 117, 126, 0.10);
}

.exam-options .option-btn.is-selected .opt-num {
    background: #dfeaec;
    color: var(--bsc-brand-hover);
}

.exam-navigation {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 10px;
    margin-top: 28px;
}

.exam-navigation .btn-primary,
.exam-navigation .btn-secondary {
    margin-top: 0;
}

.exam-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.exam-review-header .start-header {
    flex: 1;
    margin-left: 0;
    text-align: left;
}

.exam-review-timer {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid #cfdee1;
    border-radius: 10px;
    background: var(--bsc-accent-soft);
}

.exam-review-stats,
.exam-result-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exam-grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 15px 0 10px;
    color: var(--bsc-text-muted);
    font-size: 0.7rem;
}

.legend-item::before {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border: 1px solid var(--bsc-border);
    border-radius: 3px;
    content: "";
    vertical-align: -1px;
}

.legend-1::before { border-color: #7ea6ad; background: var(--bsc-accent-soft); }
.legend-2::before { background: var(--bsc-surface); }
.legend-3::before { border-color: #c69a3a; background: var(--bsc-warning-soft); }

.exam-question-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 22px;
}

.exam-number-button {
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid var(--bsc-border);
    border-radius: 8px;
    background: var(--bsc-surface);
    color: var(--bsc-primary);
    font-size: 0.71rem;
    font-weight: 800;
    cursor: pointer;
}

.exam-number-button:hover,
.exam-number-button:focus-visible {
    border-color: var(--bsc-accent);
    outline: none;
    box-shadow: var(--bsc-focus);
}

.exam-number-button.is-answered {
    border-color: #7ea6ad;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-hover);
}

.exam-number-button.is-flagged {
    box-shadow: inset 0 -3px 0 #b3862f;
}

.exam-submit-warning {
    margin: 0 0 15px;
    padding: 12px;
    border: 1px solid #cbe4dc;
    border-radius: 10px;
    background: var(--bsc-success-soft);
    color: #2f7d6a;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.exam-submit-warning.has-unanswered {
    border-color: #ead9b4;
    background: var(--bsc-warning-soft);
    color: #7a5518;
}

.exam-score-display {
    margin: 8px auto 18px;
}

.exam-score-display strong {
    display: block;
    color: var(--bsc-accent);
    font-size: clamp(3rem, 12vw, 5.2rem);
    font-weight: 900;
    line-height: 1;
}

.exam-score-display span {
    display: block;
    margin-top: 8px;
    color: var(--bsc-text-muted);
    font-weight: 800;
}

.exam-result-note {
    margin: 22px 0 0;
    padding: 11px;
    border: 1px solid var(--bsc-border);
    border-radius: 9px;
    background: var(--bsc-surface-muted);
    color: var(--bsc-text-muted);
    font-size: 0.72rem;
}

.exam-answer-review-list {
    display: grid;
    gap: 16px;
    margin: 22px 0;
}

.exam-answer-review-item {
    padding: 20px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface-muted);
    text-align: left;
}

.exam-answer-review-item h2 {
    margin: 5px 0 14px;
    color: var(--bsc-primary);
    font-size: 1rem;
    line-height: 1.65;
}

.review-item-number {
    color: var(--bsc-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.review-selected-answer,
.review-correct-answer {
    margin: 7px 0;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
}

.review-selected-answer {
    background: var(--bsc-danger-soft);
    color: #8b3a35;
}

.review-correct-answer {
    background: var(--bsc-success-soft);
    color: #2b6a5b;
}

.review-explanation {
    margin: 14px 0 2px;
    padding: 13px;
    border: 1px solid var(--bsc-border);
    border-radius: 10px;
    background: var(--bsc-surface);
}

/* =========================================================
   Report modal
   ========================================================= */
.report-button {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 0.7rem;
}

.report-button:hover,
.report-button:focus-visible {
    border-color: #b3cbd0;
    outline: none;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-hover);
}

.report-modal-backdrop {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(27, 36, 38, 0.58);
    backdrop-filter: blur(3px);
}

.report-modal {
    position: relative;
    width: min(540px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 25px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius-lg);
    background: var(--bsc-surface);
    box-shadow: 0 28px 80px rgba(27, 36, 38, 0.25);
}

.report-modal h2 {
    margin: 0 40px 10px 0;
    color: var(--bsc-primary);
    font-size: 1.2rem;
}

.report-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f1f4f5;
    color: var(--bsc-primary);
    font-size: 1.25rem;
    cursor: pointer;
}

.report-modal-close:hover,
.report-modal-close:focus-visible {
    outline: none;
    background: #e4eaeb;
    box-shadow: var(--bsc-focus);
}

.report-question-preview {
    margin: 0 0 18px;
    padding: 11px;
    border: 1px solid var(--bsc-border);
    border-radius: 9px;
    background: var(--bsc-surface-muted);
    color: var(--bsc-text-soft);
    font-size: 0.78rem;
}

.report-textarea {
    min-height: 125px;
    margin-bottom: 4px;
    padding: 11px;
    resize: vertical;
}

.report-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.report-status {
    min-height: 1.5em;
    margin: 8px 0;
    color: var(--bsc-accent);
    font-size: 0.78rem;
}

/* =========================================================
   Page shell (server-rendered layout)
   ========================================================= */
body.bsc-quiz-page {
    background: var(--bsc-bg);
}

.bsc-quiz-page .entry-title:empty,
.bsc-quiz-page .page-title:empty,
.bsc-quiz-page .wp-block-post-title:empty {
    display: none;
}

.bsc-seo-shell {
    width: min(100%, var(--bsc-container));
    margin: 24px auto 64px;
    padding: 0 16px;
    color: var(--bsc-text);
    font-family: var(--bsc-font);
    line-height: 1.8;
}

/* ---- Hero: sits directly on the page background, no card ---- */
.bsc-seo-hero {
    padding: 12px 0 0;
}

.bsc-seo-eyebrow {
    margin: 0 0 6px;
    color: var(--bsc-brand);
    font-size: 0.8rem;
    font-weight: 700;
}

.bsc-seo-hero h1 {
    margin: 0;
    text-align: center;
    color: var(--bsc-text);
    font-size: clamp(1.6rem, 4.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.bsc-seo-lead {
    max-width: 640px;
    margin: 12px auto 0;
    text-align: center;
    color: var(--bsc-text-soft);
    font-size: 0.94rem;
    line-height: 1.85;
}

.bsc-hero-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 22px auto 0;
    padding: 13px 20px;
    border-radius: var(--bsc-radius-sm);
    background: var(--bsc-brand);
    color: #fff;
    font-size: 0.93rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.16s ease;
}

.bsc-hero-cta:hover,
.bsc-hero-cta:focus {
    background: var(--bsc-brand-hover);
    color: #fff;
}

.bsc-hero-cta:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-hero-cta svg {
    width: 15px;
    height: 15px;
}

.bsc-seo-note {
    margin: 14px 0 0;
    text-align: center;
    color: var(--bsc-text-muted);
    font-size: 0.78rem;
}

/* ---- Mode cards ---- */
.bsc-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.bsc-mode-card {
    display: block;
    padding: 20px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

a.bsc-mode-card:hover {
    border-color: var(--bsc-brand);
    transform: translateY(-1px);
}

a.bsc-mode-card:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-mode-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 9px;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand);
}

.bsc-mode-icon svg {
    width: 19px;
    height: 19px;
}

.bsc-mode-card h3 {
    margin: 0 0 6px;
    color: var(--bsc-text);
    font-size: 1rem;
    font-weight: 700;
}

.bsc-mode-card p {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.83rem;
    line-height: 1.7;
}

/* ---- Stat row ---- */
.bsc-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.bsc-stat {
    padding: 18px 14px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
    text-align: center;
}

.bsc-stat span {
    display: block;
    color: var(--bsc-text-muted);
    font-size: 0.79rem;
}

.bsc-stat strong {
    display: block;
    margin-top: 2px;
    color: var(--bsc-text);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.bsc-stat strong small {
    margin-left: 3px;
    font-size: 0.84rem;
    font-weight: 700;
}

.bsc-stat strong.is-text {
    font-size: 1.02rem;
    letter-spacing: 0;
}

/* ---- The quiz app sits in the same rhythm as the cards ---- */
.bsc-seo-shell .bsc-quiz-app {
    width: 100%;
    min-height: 540px;
    margin: 16px 0 0;
}

/* ---- Long-form sections ---- */
.bsc-seo-content {
    width: 100%;
    margin: 44px auto 0;
}

.bsc-seo-section {
    padding: 34px 0 0;
    border-bottom: 0;
}

.bsc-seo-section h2,
.bsc-section-title {
    margin: 0 0 14px;
    color: var(--bsc-text);
    font-size: clamp(1.18rem, 2.6vw, 1.32rem);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.bsc-seo-section h3 {
    margin: 0 0 7px;
    color: var(--bsc-text);
    font-size: 0.98rem;
    font-weight: 700;
}

.bsc-seo-section p,
.bsc-seo-section li {
    color: var(--bsc-text-soft);
    font-size: 0.9rem;
    line-height: 1.85;
}

.bsc-seo-section a,
.bsc-faq a {
    color: var(--bsc-brand);
    font-weight: 700;
    text-underline-offset: 3px;
}

.bsc-seo-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.bsc-seo-feature-grid article {
    padding: 20px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
}

.bsc-seo-feature-grid p {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.83rem;
}

.bsc-seo-mode-list,
.bsc-seo-section ul {
    margin: 0;
    padding-left: 1.35em;
}

.bsc-seo-mode-list li + li,
.bsc-seo-section ul li + li {
    margin-top: 8px;
}

.bsc-seo-mode-list strong,
.bsc-seo-steps strong {
    color: var(--bsc-text);
}

.bsc-seo-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bsc-seo-steps li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 18px 20px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
}

.bsc-seo-steps li > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand);
    font-size: 0.85rem;
    font-weight: 800;
}

.bsc-seo-steps p {
    margin: 3px 0 0;
    color: var(--bsc-text-muted);
    font-size: 0.83rem;
}

/* ---- Spec table ---- */
.bsc-spec-table {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bsc-surface);
    font-size: 0.89rem;
}

.bsc-spec-table th,
.bsc-spec-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--bsc-border);
    text-align: left;
    vertical-align: top;
    line-height: 1.75;
}

.bsc-spec-table tr:last-child th,
.bsc-spec-table tr:last-child td {
    border-bottom: 0;
}

.bsc-spec-table th {
    width: 30%;
    border-right: 1px solid var(--bsc-border);
    background: var(--bsc-surface-muted);
    color: var(--bsc-text);
    font-weight: 700;
    white-space: nowrap;
}

.bsc-spec-table td {
    color: var(--bsc-text-soft);
}

.bsc-spec-note {
    margin: 12px 0 0;
    color: var(--bsc-text-muted);
    font-size: 0.77rem;
}

/* ---- FAQ ---- */
.bsc-faq {
    padding: 4px 24px 26px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
}

.bsc-faq-item {
    padding-top: 26px;
}

.bsc-faq-item h3 {
    margin: 0 0 8px;
    color: var(--bsc-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.6;
}

.bsc-faq-item p {
    margin: 0;
    color: var(--bsc-text-soft);
    font-size: 0.88rem;
    line-height: 1.85;
}

.bsc-faq-link {
    display: inline-block;
    margin-top: 26px;
    font-size: 0.88rem;
}

/* ---- Notes and disclaimer ---- */
.bsc-seo-updated {
    color: var(--bsc-text-muted);
    font-size: 0.8rem;
}

.bsc-seo-disclaimer {
    margin-top: 26px;
    padding: 22px 24px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
}

.bsc-seo-disclaimer h2 {
    font-size: 1rem;
}

.bsc-seo-disclaimer p {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.83rem;
}

.bsc-site-note {
    margin: 34px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--bsc-border);
    color: var(--bsc-text-muted);
    font-size: 0.76rem;
    line-height: 1.8;
}

@media (max-width: 860px) {
    .bsc-mode-grid,
    .bsc-seo-feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .bsc-seo-shell {
        padding: 0 12px;
    }

    .bsc-stat-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bsc-hero-cta {
        width: 100%;
        justify-content: center;
    }

    .bsc-spec-table th,
    .bsc-spec-table td {
        display: block;
        width: auto;
        border-right: 0;
        white-space: normal;
    }

    .bsc-spec-table th {
        border-bottom: 0;
        padding-bottom: 4px;
    }

    .bsc-faq,
    .bsc-seo-disclaimer {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 782px) {
    .bsc-card.question-card {
        scroll-margin-top: 56px;
    }
}

@media (max-width: 720px) {
    .bsc-seo-shell {
        margin-top: 16px;
    }

    .bsc-seo-hero {
        border-radius: var(--bsc-radius);
    }

    .bsc-seo-feature-grid {
        grid-template-columns: 1fr;
    }

    .bsc-seo-content {
        margin-top: 34px;
    }

    .bsc-seo-section {
        padding: 24px 4px;
    }

    .bsc-seo-shell .bsc-quiz-app {
        min-height: 460px;
        margin-top: 24px;
        margin-bottom: 24px;
    }
}

@media (max-width: 640px) {
    .bsc-quiz-app {
        width: auto;
        margin: 18px 10px;
    }

    .bsc-card {
        padding: 22px 16px;
        border-radius: var(--bsc-radius);
    }

    .learning-dashboard,
    .history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .learning-settings {
        padding: 17px;
    }

    .question-top-row {
        align-items: flex-start;
    }

    .option-btn {
        padding: 14px;
        font-size: 0.9rem;
    }

    .rating-buttons {
        grid-template-columns: 1fr;
    }

    .score-stats {
        grid-template-columns: 1fr 1fr;
    }

    .recent-session-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .exam-feature-grid {
        grid-template-columns: 1fr;
    }

    .exam-sticky-header {
        top: 4px;
        grid-template-columns: 1fr auto;
        margin: -10px -8px 18px;
        padding: 10px;
    }

    .exam-live-summary {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .exam-question-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .exam-review-header {
        align-items: stretch;
        flex-direction: column;
    }

    .exam-review-timer {
        align-self: flex-start;
    }

    .exam-navigation {
        grid-template-columns: 1fr;
    }

    .exam-review-stats,
    .exam-result-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   Multiple-answer questions and structured exam scoring
   ========================================================= */
.bsc-quiz-app .multi-answer-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 4px;
}

.bsc-quiz-app .multi-answer-hint {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.bsc-quiz-app .options-list.is-multi .multi-answer-hint {
    grid-column: 1 / -1;
    margin-bottom: 4px;
}

.bsc-quiz-app .multi-answer-submit {
    align-self: flex-start;
}

.bsc-quiz-app .multi-answer-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bsc-quiz-app .options-list.is-multi .option-btn.is-selected:not(.correct):not(.wrong) {
    border-color: var(--bsc-accent);
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
    font-weight: 700;
}

.bsc-quiz-app .options-list.is-multi .option-btn.is-selected .opt-num {
    background: var(--bsc-accent);
    color: #fff;
}

.bsc-quiz-app .feedback-area.is-partial .feedback-box {
    border-color: var(--bsc-partial);
    background: var(--bsc-partial-soft);
}

.bsc-quiz-app .feedback-area.is-partial h3 {
    color: var(--bsc-partial);
}

.bsc-quiz-app .exam-verdict {
    margin: 16px 0 4px;
    padding: 16px 18px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius-lg);
    text-align: center;
}

.bsc-quiz-app .exam-verdict.is-passed {
    border-color: var(--bsc-success);
    background: var(--bsc-success-soft);
}

.bsc-quiz-app .exam-verdict.is-failed {
    border-color: var(--bsc-border-strong);
    background: var(--bsc-surface-muted);
}

.bsc-quiz-app .exam-verdict-label {
    display: block;
    margin-bottom: 4px;
    color: var(--bsc-text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.bsc-quiz-app .exam-verdict strong {
    display: block;
    color: var(--bsc-text);
    font-size: 1.25rem;
    line-height: 1.4;
}

.bsc-quiz-app .exam-verdict.is-passed strong {
    color: var(--bsc-success);
}

.bsc-quiz-app .exam-verdict-note {
    margin: 10px 0 0;
    color: var(--bsc-text-soft);
    font-size: 0.84rem;
    line-height: 1.7;
    text-align: left;
}

.bsc-quiz-app .exam-level-breakdown .analysis-row strong {
    font-variant-numeric: tabular-nums;
}

.bsc-quiz-app .exam-field-check .analysis-row.is-below {
    border-radius: var(--bsc-radius-sm);
    background: var(--bsc-danger-soft);
}

.bsc-quiz-app .exam-field-check .analysis-row.is-below strong {
    color: var(--bsc-danger);
}

@media (max-width: 600px) {
    .bsc-quiz-app .multi-answer-submit {
        align-self: stretch;
    }

    .bsc-quiz-app .exam-verdict strong {
        font-size: 1.1rem;
    }
}

/* =========================================================
   Learning completion screen (1.22.0)
   結果を圧縮し、弱点から次の復習へつなげる。
   ========================================================= */
.bsc-quiz-app .finish-card-v2 {
    padding: clamp(22px, 3vw, 32px);
    text-align: left;
}

.bsc-quiz-app .finish-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    text-align: left;
}

.bsc-quiz-app .finish-header .finish-icon-complete {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    margin: 0;
    border-radius: 50%;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand);
    font-size: 1.35rem;
    font-weight: 900;
}

.bsc-quiz-app .finish-header-copy {
    min-width: 0;
}

.bsc-quiz-app .finish-header-copy h2 {
    margin: 0;
    color: var(--bsc-text);
    line-height: 1.3;
}

.bsc-quiz-app .finish-context {
    margin: 3px 0 0;
    color: var(--bsc-text-muted);
    font-size: 0.72rem;
    line-height: 1.55;
}

.bsc-quiz-app .finish-summary {
    padding: 18px 20px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius-lg);
    background: var(--bsc-surface-muted);
}

.bsc-quiz-app .finish-summary-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.bsc-quiz-app .finish-summary-label {
    color: var(--bsc-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
}

.bsc-quiz-app .finish-summary-value {
    color: var(--bsc-text);
    font-family: var(--bsc-mono, ui-monospace, monospace);
    font-size: clamp(1.75rem, 4.5vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.bsc-quiz-app .finish-status,
.bsc-quiz-app .finish-analysis-status {
    display: inline-flex;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

.bsc-quiz-app .finish-status {
    margin-left: auto;
    padding: 5px 9px;
}

.bsc-quiz-app .finish-status.is-success,
.bsc-quiz-app .finish-analysis-status.is-success {
    color: var(--bsc-success);
}

.bsc-quiz-app .finish-status.is-warning,
.bsc-quiz-app .finish-analysis-status.is-warning {
    color: var(--bsc-warning);
}

.bsc-quiz-app .finish-status.is-danger,
.bsc-quiz-app .finish-analysis-status.is-danger {
    color: var(--bsc-danger);
}

.bsc-quiz-app .finish-summary-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 10px;
    color: var(--bsc-text-soft);
    font-size: 0.74rem;
}

.bsc-quiz-app .finish-summary-details span + span {
    position: relative;
}

.bsc-quiz-app .finish-summary-details span + span::before {
    position: absolute;
    top: 50%;
    left: -10px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--bsc-text-muted);
    content: "";
}

.bsc-quiz-app .finish-summary-progress,
.bsc-quiz-app .finish-analysis-progress {
    overflow: hidden;
    border-radius: 999px;
    background: #e4eaec;
}

.bsc-quiz-app .finish-summary-progress {
    height: 8px;
    margin-top: 14px;
}

.bsc-quiz-app .finish-summary-progress > span,
.bsc-quiz-app .finish-analysis-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--bsc-brand);
}

.bsc-quiz-app .finish-summary-progress.is-success > span {
    background: var(--bsc-success);
}

.bsc-quiz-app .finish-summary-progress.is-warning > span {
    background: var(--bsc-warning);
}

.bsc-quiz-app .finish-summary-progress.is-danger > span {
    background: var(--bsc-danger);
}

.bsc-quiz-app .finish-card-v2 .result-analysis {
    margin-top: 22px;
    text-align: left;
}

.bsc-quiz-app .finish-analysis-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.bsc-quiz-app .finish-analysis-heading h3 {
    margin: 0;
    color: var(--bsc-text);
    font-size: 1rem;
}

.bsc-quiz-app .finish-analysis-heading p {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.66rem;
}

.bsc-quiz-app .finish-analysis-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--bsc-border);
}

.bsc-quiz-app .finish-analysis-row-top,
.bsc-quiz-app .finish-analysis-row-bottom {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.bsc-quiz-app .finish-analysis-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
}

.bsc-quiz-app .finish-analysis-name {
    overflow-wrap: anywhere;
    color: var(--bsc-text-soft);
    font-size: 0.8rem;
    line-height: 1.5;
}

.bsc-quiz-app .finish-analysis-count {
    color: var(--bsc-text-muted);
    font-size: 0.64rem;
}

.bsc-quiz-app .finish-analysis-score {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

.bsc-quiz-app .finish-analysis-score > strong {
    min-width: 38px;
    color: var(--bsc-text);
    font-family: var(--bsc-mono, ui-monospace, monospace);
    font-size: 0.82rem;
    text-align: right;
}

.bsc-quiz-app .finish-analysis-status {
    min-width: 58px;
    justify-content: center;
    padding: 3px 7px;
}

.bsc-quiz-app .finish-analysis-row-bottom {
    margin-top: 8px;
}

.bsc-quiz-app .finish-analysis-progress {
    height: 6px;
    flex: 1 1 auto;
}

.bsc-quiz-app .finish-analysis-row.is-success .finish-analysis-progress > span {
    background: var(--bsc-success);
}

.bsc-quiz-app .finish-analysis-row.is-warning .finish-analysis-progress > span {
    background: var(--bsc-warning);
}

.bsc-quiz-app .finish-analysis-row.is-danger .finish-analysis-progress > span {
    background: var(--bsc-danger);
}

.bsc-quiz-app .finish-category-review {
    width: auto;
    min-height: 30px;
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 9px;
    border: 1px solid var(--bsc-border-strong);
    border-radius: 6px;
    background: var(--bsc-surface);
    color: var(--bsc-brand-deep);
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.3;
    cursor: pointer;
}

.bsc-quiz-app .finish-category-review:hover {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
}

.bsc-quiz-app .finish-category-review:focus-visible,
.bsc-quiz-app .finish-link-button:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-quiz-app .finish-actions {
    display: grid;
    gap: 9px;
    margin-top: 20px;
}

.bsc-quiz-app .finish-actions > .btn-primary,
.bsc-quiz-app .finish-actions > .btn-secondary {
    width: 100%;
    margin-top: 0;
}

.bsc-quiz-app .finish-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 3px;
}

.bsc-quiz-app .finish-link-button {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 4px 2px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--bsc-brand-deep);
    font-size: 0.74rem;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bsc-quiz-app .finish-link-button:hover {
    color: var(--bsc-brand-hover);
}

@media (max-width: 640px) {
    .bsc-quiz-app .finish-header {
        justify-content: flex-start;
    }

    .bsc-quiz-app .finish-analysis-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .bsc-quiz-app .finish-analysis-row-top {
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    .bsc-quiz-app .finish-summary-main {
        flex-wrap: wrap;
    }

    .bsc-quiz-app .finish-status {
        margin-left: 0;
    }

    .bsc-quiz-app .finish-analysis-row-top {
        flex-direction: column;
        gap: 5px;
    }

    .bsc-quiz-app .finish-analysis-score {
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================================
   Shared mode-card feedback (1.14.6)
   上部3カードの選択結果と移動先を全試験で視覚的に伝える。
   ========================================================= */
.bsc-mode-card.is-active {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
    box-shadow: inset 0 0 0 1px var(--bsc-brand);
}

.bsc-mode-card.is-active .bsc-mode-icon {
    background: var(--bsc-brand);
    color: #fff;
}

.bsc-seo-shell .mode-target-flash {
    animation: bsc-mode-target-flash 1.1s var(--bsc-ease-out) both;
}

@keyframes bsc-mode-target-flash {
    0%, 100% {
        box-shadow: none;
    }
    35% {
        box-shadow: 0 0 0 4px rgba(70, 117, 126, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsc-seo-shell .mode-target-flash {
        animation: none;
        outline: 3px solid rgba(70, 117, 126, 0.22);
        outline-offset: 3px;
    }
}

/* =========================================================
   LinuC learning-settings layout fix (1.14.4)
   4ステップ用コンテナが旧 .learning-settings の2列指定を
   引き継いで崩れる問題を明示的な配置で解消する。
   ========================================================= */
.linuc-seo-shell .learning-settings-steps,
.linuc-seo-shell .learning-settings.learning-settings-steps {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
}

.linuc-seo-shell .learning-settings-steps > .learning-step,
.linuc-seo-shell .learning-settings-steps > .learning-start-area {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

/* 01〜04を上から順に読み進められるよう、すべて縦1列に固定する。 */
.linuc-seo-shell .learning-settings-steps > .learning-step:nth-child(2) {
    border-top: 1px solid var(--bsc-border);
}

.linuc-seo-shell .learning-step-grid,
.linuc-seo-shell .learning-step-grid > .filter-group,
.linuc-seo-shell .learning-step-body,
.linuc-seo-shell .range-item {
    min-width: 0;
    max-width: 100%;
}

/* セット名と主題名は省略されないよう、それぞれ全幅で表示する。 */
.linuc-seo-shell .learning-settings-steps > .learning-step:nth-child(2) .learning-step-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

@media (max-width: 520px) {
    .linuc-seo-shell .learning-step-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 390px) {
    .score-stats,
    .exam-review-stats,
    .exam-result-stats {
        grid-template-columns: 1fr;
    }

    .question-top-row {
        flex-direction: column;
    }

    .exam-question-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .exam-start-panel,
    .report-modal {
        padding: 18px;
    }
}

/* =========================================================
   Accessibility
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .bsc-card,
    .feedback-box,
    .progress-bar,
    .option-btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger-outline,
    .btn-exam,
    .dashboard-stat-button,
    [data-exam-timer].is-danger {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-color-scheme: dark) {
    /* Keep the learning UI intentionally light for maximum readability. */
}

/* Semantic card variants share the base card design. */
.history-card,
.exam-review-card,
.exam-result-card,
.exam-detail-card {
    position: relative;
}

.count-filter,
.difficulty-filter {
    min-width: 0;
}

.exam-next-button {
    margin-top: 0;
}

/* =========================================================
   v6 Layer: レイアウト / デザイン / モーション リフレッシュ
   ---------------------------------------------------------
   ・配色トークン（--bsc-brand 系）は既存のまま据え置き。
   ・レイアウトの階層、余白のリズム、選択時の遷移のみを刷新。
   ========================================================= */

:root {
    --bsc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bsc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --bsc-dur-fast: 0.16s;
    --bsc-dur: 0.26s;
    --bsc-dur-slow: 0.42s;
    --bsc-space: clamp(18px, 3vw, 26px);
    --bsc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

/* ---------------------------------------------------------
   Keyframes
   --------------------------------------------------------- */
@keyframes bsc-view-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes bsc-option-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes bsc-reveal-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes bsc-mark-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes bsc-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* ---------------------------------------------------------
   App shell
   --------------------------------------------------------- */
.bsc-quiz-app {
    font-family: var(--bsc-font);
    margin: 28px auto 40px;
}

.bsc-quiz-app > * {
    animation: bsc-view-in var(--bsc-dur-slow) var(--bsc-ease-out) both;
}

.bsc-card {
    padding: clamp(20px, 3.4vw, 30px);
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius-lg);
    background: var(--bsc-surface);
    box-shadow: none;
    animation: none;
}

/* ---------------------------------------------------------
   Start screen
   --------------------------------------------------------- */
.start-header {
    max-width: none;
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bsc-border);
    text-align: left;
}

.start-header h1,
.start-header h2,
.finish-card h2 {
    margin: 0 0 6px;
    color: var(--bsc-text);
    font-size: clamp(1.22rem, 3vw, 1.46rem);
    font-weight: 800;
    letter-spacing: -0.015em;
}

.start-header p {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.88rem;
}

/* 再開パネル：ブランド色の細い左罫で「続き」を示す */
.resume-panel {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--bsc-border);
    border-left: 3px solid var(--bsc-brand);
    border-radius: var(--bsc-radius);
    background: var(--bsc-accent-soft);
}

.resume-icon {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1.6;
}

.resume-content h2 {
    margin: 0 0 4px;
    font-size: 0.98rem;
    font-weight: 800;
}

.resume-content p {
    margin: 0 0 12px;
    color: var(--bsc-text-soft);
    font-size: 0.82rem;
    line-height: 1.7;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ダッシュボード：4カラム固定のタイル */
.learning-dashboard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

.dashboard-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
    text-align: left;
    transition: border-color var(--bsc-dur-fast) var(--bsc-ease),
                background var(--bsc-dur-fast) var(--bsc-ease);
}

.dashboard-stat strong {
    font-family: var(--bsc-mono);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--bsc-text);
}

.dashboard-stat span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bsc-text-muted);
}

.dashboard-stat-button {
    cursor: pointer;
}

.dashboard-stat-button:hover,
.dashboard-stat-button:focus-visible {
    border-color: var(--bsc-brand);
    outline: none;
    background: var(--bsc-accent-soft);
}

.dashboard-stat-button:hover strong,
.dashboard-stat-button:focus-visible strong {
    color: var(--bsc-brand-deep);
}

.history-link-button {
    display: inline-flex;
    align-items: center;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bsc-brand);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.history-link-button:hover {
    color: var(--bsc-brand-deep);
}

/* 模擬試験パネル */
.exam-start-panel {
    margin: 0 0 26px;
    padding: 20px;
    border: 1px solid var(--bsc-border-strong);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface-muted);
    box-shadow: none;
}

.exam-start-heading {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.exam-start-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
    font-size: 1rem;
}

.exam-start-copy h2 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
}

.exam-start-copy p {
    margin: 0;
    color: var(--bsc-text-soft);
    font-size: 0.84rem;
    line-height: 1.7;
}

.exam-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    margin-bottom: 16px;
}

.exam-feature-grid span {
    color: var(--bsc-text-muted);
    font-size: 0.79rem;
    font-weight: 600;
}

/* 見出し付きの区切り線 */
.section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--bsc-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.section-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--bsc-border);
}

/* 条件設定：広い画面では2カラムに整列 */
.learning-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 20px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface-muted);
}

.learning-settings > .difficulty-filter,
.learning-settings > .toggle-list {
    grid-column: 1 / -1;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.filter-label {
    color: var(--bsc-text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.filter-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.available-count {
    color: var(--bsc-brand);
    font-family: var(--bsc-mono);
    font-size: 0.76rem;
    font-weight: 700;
}

.range-item {
    width: 100%;
    min-height: 44px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--bsc-border-strong);
    border-radius: var(--bsc-radius-sm);
    background: var(--bsc-surface);
    color: var(--bsc-text);
    font-size: 0.9rem;
    transition: border-color var(--bsc-dur-fast) var(--bsc-ease),
                box-shadow var(--bsc-dur-fast) var(--bsc-ease);
}

.range-item:focus-visible {
    border-color: var(--bsc-brand);
    outline: none;
    box-shadow: var(--bsc-focus);
}

.check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.check-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--bsc-border-strong);
    border-radius: 999px;
    background: var(--bsc-surface);
    color: var(--bsc-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--bsc-dur-fast) var(--bsc-ease),
                background var(--bsc-dur-fast) var(--bsc-ease),
                color var(--bsc-dur-fast) var(--bsc-ease);
}

.check-item:hover {
    border-color: var(--bsc-brand);
    color: var(--bsc-brand-deep);
}

.check-item:has(input:checked) {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
}

.toggle-list {
    display: grid;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--bsc-border);
}

.toggle-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding-top: 8px;
    color: var(--bsc-text-soft);
    font-size: 0.85rem;
    cursor: pointer;
}

.start-disclaimer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--bsc-border);
}

.start-disclaimer p {
    margin: 0 0 6px;
    color: var(--bsc-text-muted);
    font-size: 0.74rem;
    line-height: 1.75;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-danger-outline,
.btn-exam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: var(--bsc-radius-sm);
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: background var(--bsc-dur-fast) var(--bsc-ease),
                border-color var(--bsc-dur-fast) var(--bsc-ease),
                color var(--bsc-dur-fast) var(--bsc-ease);
}

.btn-primary,
.btn-exam {
    width: 100%;
    border: 1px solid var(--bsc-brand);
    background: var(--bsc-brand);
    color: #fff;
}

.btn-primary:hover,
.btn-exam:hover {
    border-color: var(--bsc-brand-hover);
    background: var(--bsc-brand-hover);
    transform: none;
    box-shadow: none;
}

.btn-primary:active,
.btn-exam:active {
    background: var(--bsc-brand-deep);
}

.btn-secondary {
    border: 1px solid var(--bsc-border-strong);
    background: var(--bsc-surface);
    color: var(--bsc-text-soft);
}

.btn-secondary:hover,
.btn-danger-outline:hover {
    border-color: var(--bsc-brand);
    color: var(--bsc-brand-deep);
    transform: none;
    box-shadow: none;
}

.btn-compact {
    width: auto;
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.82rem;
}

/* ---------------------------------------------------------
   Question screen
   --------------------------------------------------------- */
.bsc-card.question-card {
    position: relative;
    padding-top: clamp(26px, 4vw, 34px);
    scroll-margin-top: 20px;
}

/* 進捗バーはカード上端のヘアラインとして全幅に置く */
.question-card > .progress-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    height: 3px;
    margin: 0;
    border-radius: 0;
    background: #eaeef0;
}

.progress-bar {
    background: var(--bsc-brand);
    transition: width var(--bsc-dur-slow) var(--bsc-ease-out);
}

/* ヘッダー行：モードとカウンタ／お気に入りと中断 */
.question-card > .question-top-row {
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bsc-border);
}

.quiz-head-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.quiz-mode-label {
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
}

.quiz-counter {
    font-family: var(--bsc-mono);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bsc-text-soft);
}

.quiz-counter b {
    color: var(--bsc-text);
    font-size: 1.02rem;
}

.quiz-head-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.quiz-quit-button {
    padding: 7px 12px;
    border: 1px solid var(--bsc-border);
    border-radius: 999px;
    background: var(--bsc-surface);
    color: var(--bsc-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--bsc-dur-fast) var(--bsc-ease),
                color var(--bsc-dur-fast) var(--bsc-ease);
}

.quiz-quit-button:hover {
    border-color: var(--bsc-border-strong);
    color: var(--bsc-text-soft);
}

/* タグ行：カテゴリ・難易度・進捗を同じ高さで並べる */
.quiz-meta {
    gap: 6px;
    margin-bottom: 14px;
}

.badge {
    min-height: 24px;
    padding: 3px 11px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.badge-blue {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
}

.badge-gray {
    border-color: var(--bsc-border-strong);
    background: var(--bsc-surface);
    color: var(--bsc-text-muted);
}

.badge-quiet {
    border-color: transparent;
    background: transparent;
    color: var(--bsc-text-muted);
    font-family: var(--bsc-mono);
    font-weight: 600;
}

.question-card .question-category {
    display: none;
}

.question-text {
    margin: 0 0 22px;
    color: var(--bsc-text);
    font-size: clamp(1.04rem, 2.4vw, 1.18rem);
    font-weight: 700;
    line-height: 1.85;
    letter-spacing: -0.005em;
}

/* 選択肢 */
.options-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.option-btn {
    position: relative;
    align-items: center;
    min-height: 56px;
    padding: 14px 16px;
    border: 1px solid var(--bsc-border-strong);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
    box-shadow: none;
    font-size: 0.94rem;
    line-height: 1.7;
    animation: bsc-option-in var(--bsc-dur) var(--bsc-ease-out) both;
    animation-delay: calc(var(--bsc-i, 0) * 55ms);
    transition: border-color var(--bsc-dur-fast) var(--bsc-ease),
                background var(--bsc-dur-fast) var(--bsc-ease),
                opacity var(--bsc-dur) var(--bsc-ease),
                transform var(--bsc-dur-fast) var(--bsc-ease);
}

.option-btn:hover:not(:disabled) {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
    transform: none;
    box-shadow: none;
}

.option-btn:active:not(:disabled) {
    transform: scale(0.988);
}

/* 選択肢テキストは可変幅にして、右端のバッジを押し出す */
.option-btn > span:not(.opt-num) {
    flex: 1 1 auto;
    min-width: 0;
}

.opt-num {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-right: 12px;
    border: 1px solid var(--bsc-border-strong);
    border-radius: 50%;
    background: var(--bsc-surface);
    color: var(--bsc-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    transition: background var(--bsc-dur-fast) var(--bsc-ease),
                border-color var(--bsc-dur-fast) var(--bsc-ease),
                color var(--bsc-dur-fast) var(--bsc-ease);
}

.option-btn:hover:not(:disabled) .opt-num {
    border-color: var(--bsc-brand);
    color: var(--bsc-brand);
}

/* 選択直後の状態（採点前のワンクッション） */
.option-btn.is-picked {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
}

.option-btn.is-picked .opt-num {
    border-color: var(--bsc-brand);
    background: var(--bsc-brand);
    color: #fff;
    animation: bsc-mark-pop var(--bsc-dur) var(--bsc-ease-out);
}

/* 採点後：正解／誤答以外はトーンを落として視線を集める */
.options-list.is-revealed .option-btn:not(.correct):not(.wrong) {
    opacity: 0.5;
}

.option-btn.correct {
    border-color: var(--bsc-success) !important;
    background: var(--bsc-success-soft) !important;
    color: var(--bsc-text) !important;
}

.option-btn.correct .opt-num {
    border-color: var(--bsc-success);
    background: var(--bsc-success);
    color: #fff;
    animation: bsc-mark-pop var(--bsc-dur-slow) var(--bsc-ease-out);
}

.option-btn.wrong {
    border-color: var(--bsc-danger) !important;
    background: var(--bsc-danger-soft) !important;
    color: var(--bsc-text) !important;
    animation: bsc-shake var(--bsc-dur) var(--bsc-ease) both;
}

.option-btn.wrong .opt-num {
    border-color: var(--bsc-danger);
    background: var(--bsc-danger);
    color: #fff;
}

/* あなたの解答バッジ */
.option-btn.is-picked.wrong::after,
.option-btn.is-picked.correct::after {
    content: "あなたの解答";
    flex: 0 0 auto;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(27, 36, 38, 0.08);
    color: var(--bsc-text-soft);
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.option-btn.is-selected {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
}

.option-btn.is-selected .opt-num {
    border-color: var(--bsc-brand);
    background: var(--bsc-brand);
    color: #fff;
}

/* 判定と解説：塗りのボックスではなく破線の区切りで続ける */
.feedback-area.is-visible {
    display: block;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed var(--bsc-border-strong);
    animation: bsc-reveal-in var(--bsc-dur) var(--bsc-ease-out) both;
}

.feedback-box {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: none;
}

.feedback-box h3 {
    display: inline-flex;
    align-items: center;
    margin: 0 0 12px;
    padding: 5px 16px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 800;
    background: var(--bsc-surface-muted);
    color: var(--bsc-text-soft);
    box-shadow: inset 0 0 0 1.5px var(--bsc-border-strong);
}

.feedback-area.is-correct .feedback-box h3 {
    background: var(--bsc-success-soft);
    color: var(--bsc-success);
    box-shadow: inset 0 0 0 1.5px var(--bsc-success);
}

.feedback-area.is-wrong .feedback-box h3 {
    background: var(--bsc-danger-soft);
    color: var(--bsc-danger);
    box-shadow: inset 0 0 0 1.5px var(--bsc-danger);
}

.correct-answer {
    margin-bottom: 12px;
    color: var(--bsc-text);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.75;
}

.explanation-text {
    padding: 15px 17px;
    border-radius: var(--bsc-radius-sm);
    background: var(--bsc-surface-muted);
    color: var(--bsc-text-soft);
    font-size: 0.89rem;
    line-height: 1.85;
}

.report-button {
    margin-top: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.self-rating {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
}

.rating-button {
    min-height: 44px;
    border-radius: var(--bsc-radius-sm);
    transition: border-color var(--bsc-dur-fast) var(--bsc-ease),
                background var(--bsc-dur-fast) var(--bsc-ease),
                color var(--bsc-dur-fast) var(--bsc-ease);
}

#next-btn {
    margin-top: 18px;
}

/* ---------------------------------------------------------
   Exam screen
   --------------------------------------------------------- */
.exam-sticky-header {
    border-radius: var(--bsc-radius);
    box-shadow: none;
}

.exam-card .progress-container {
    height: 3px;
    background: #eaeef0;
}

.exam-card .question-top-row {
    margin-bottom: 12px;
}

.exam-card .category-label {
    margin-bottom: 8px;
    color: var(--bsc-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.exam-options .option-btn {
    animation-delay: calc(var(--bsc-i, 0) * 40ms);
}

.exam-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--bsc-border);
}

.exam-navigation .btn-secondary,
.exam-navigation .btn-primary {
    width: 100%;
    margin-top: 0;
}

/* ---------------------------------------------------------
   Results / history
   --------------------------------------------------------- */
.finish-card,
.history-card,
.exam-result-card,
.exam-review-card,
.exam-detail-card {
    box-shadow: none;
}

.score-stats,
.exam-result-stats {
    gap: 10px;
}

.stat-card {
    padding: 15px 14px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface);
    box-shadow: none;
}

.stat-value {
    font-family: var(--bsc-mono);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.result-analysis,
.history-row,
.recent-session {
    border-radius: var(--bsc-radius);
    box-shadow: none;
}

.stack-actions {
    display: grid;
    gap: 9px;
    margin-top: 20px;
}

.stack-actions .btn-primary,
.stack-actions .btn-secondary,
.stack-actions .btn-danger-outline {
    width: 100%;
    margin-top: 0;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 782px) {
    .bsc-seo-section {
        padding: 28px 0 0;
    }

    .bsc-seo-shell .bsc-quiz-app {
        margin: 16px 0 0;
    }

    .bsc-card.question-card {
        scroll-margin-top: 56px;
    }

    .learning-settings {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .learning-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bsc-quiz-app {
        width: auto;
        margin: 18px 10px;
    }

    .bsc-seo-shell .bsc-quiz-app {
        width: 100%;
        margin: 16px 0 0;
    }

    .bsc-card {
        padding: 18px 15px;
        border-radius: var(--bsc-radius);
    }

    .bsc-card.question-card {
        padding-top: 24px;
    }

    .question-card > .question-top-row {
        flex-wrap: wrap;
    }

    .exam-feature-grid {
        grid-template-columns: 1fr;
    }

    .exam-navigation {
        grid-template-columns: 1fr;
    }

    .option-btn {
        min-height: 52px;
        padding: 13px 14px;
        font-size: 0.9rem;
    }

    .option-btn.is-picked.wrong::after,
    .option-btn.is-picked.correct::after {
        content: none;
    }

    .rating-buttons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .exam-start-panel {
        padding: 18px;
    }

    .quiz-head-main {
        gap: 8px;
    }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bsc-quiz-app *,
    .bsc-quiz-app *::before,
    .bsc-quiz-app *::after,
    .bsc-seo-shell *,
    .bsc-seo-shell *::before,
    .bsc-seo-shell *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   v7.0 Landing / Start UX refinement (5.3.0)
   - PC幅の最適化
   - ヒーロー訴求の強化
   - 学習条件を主役化
   - FAQアコーディオン
   - 長文セクションのリズム改善
   ========================================================= */

:root {
    --bsc-container: 960px;
    --bsc-reading: 800px;
    --bsc-panel: #f5f9f9;
    --bsc-panel-strong: #edf5f6;
    --bsc-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
}

/* ---------------------------------------------------------
   WordPressテーマ側の狭い本文幅を、このページだけ解除
   --------------------------------------------------------- */
body.bsc-quiz-page .entry-content,
body.bsc-quiz-page .wp-block-post-content,
body.bsc-quiz-page .post-content,
body.bsc-quiz-page main article {
    max-width: none;
}

.bsc-seo-shell {
    width: min(94vw, var(--bsc-container));
    max-width: none;
}

.bsc-seo-content {
    max-width: var(--bsc-reading);
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.bsc-seo-hero {
    padding-top: 22px;
}

.bsc-seo-eyebrow {
    text-align: center;
    letter-spacing: 0.08em;
}

.bsc-seo-hero h1 {
    max-width: 820px;
    margin-inline: auto;
    font-size: clamp(1.72rem, 3.2vw, 2.35rem);
}

.bsc-seo-lead {
    max-width: 720px;
    color: #536166;
    font-size: 0.96rem;
}

.bsc-hero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 18px auto 0;
}

.bsc-hero-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid #cddbdd;
    border-radius: 999px;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.bsc-hero-cta {
    min-height: 48px;
    padding-inline: 22px;
    transition: transform var(--bsc-dur-fast) var(--bsc-ease),
                background var(--bsc-dur-fast) var(--bsc-ease),
                box-shadow var(--bsc-dur-fast) var(--bsc-ease);
}

.bsc-hero-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--bsc-shadow-cta);
}

.bsc-hero-cta:active {
    transform: translateY(0) scale(0.99);
}

/* 3つの機能カードはPCで安定した密度に */
.bsc-mode-grid {
    gap: 18px;
    margin-top: 30px;
}

.bsc-mode-card {
    min-height: 164px;
    padding: 22px;
    border-radius: 14px;
}

.bsc-mode-icon {
    margin-bottom: 16px;
}

/* 725問 / 5セット / 更新日を1本のステータスバーに集約 */
.bsc-stat-row {
    display: flex;
    gap: 0;
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid var(--bsc-border);
    border-radius: 12px;
    background: var(--bsc-surface);
}

.bsc-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 18px;
    border: 0;
    border-right: 1px solid var(--bsc-border);
    border-radius: 0;
    background: transparent;
}

.bsc-stat:last-child {
    border-right: 0;
}

.bsc-stat span {
    font-size: 0.72rem;
}

.bsc-stat strong {
    margin-top: 0;
    font-size: 1.18rem;
}

.bsc-stat strong.is-text {
    font-size: 0.88rem;
}

/* ---------------------------------------------------------
   Start screen / learning dashboard
   --------------------------------------------------------- */
.bsc-seo-shell .bsc-quiz-app {
    margin-top: 22px;
}

.bsc-quiz-app > .bsc-card:not(.question-card):not(.finish-card):not(.history-card):not(.exam-card) {
    padding: clamp(24px, 3.2vw, 34px);
}

.start-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
}

.resume-panel {
    align-items: center;
    margin-bottom: 16px;
    padding: 13px 15px;
    border-left-width: 2px;
}

.resume-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #fff;
    font-size: 0.95rem;
}

.resume-content {
    flex: 1 1 auto;
    min-width: 0;
}

.resume-content p {
    margin-bottom: 8px;
}

.learning-summary-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 10px;
    padding: 10px 13px;
    border: 1px solid var(--bsc-border);
    border-radius: 10px;
    background: #fbfcfc;
    color: var(--bsc-text-muted);
    font-family: var(--bsc-mono);
    font-size: 0.76rem;
}

.learning-summary-strip strong {
    color: var(--bsc-brand-deep);
    font-weight: 850;
}

.learning-dashboard {
    gap: 10px;
}

.dashboard-stat {
    min-height: 72px;
    justify-content: center;
    padding: 11px 13px;
}

.dashboard-stat strong {
    font-size: 1.32rem;
}

.dashboard-stat span {
    white-space: normal;
    line-height: 1.35;
}

/* 学習条件ブロックをページの主役にする */
.study-start-panel {
    margin-top: 2px;
    padding: 20px;
    border: 1px solid #bfd2d5;
    border-radius: 15px;
    background: linear-gradient(180deg, #f5f9fa 0%, #f9fbfb 100%);
    box-shadow: 0 8px 24px rgba(47, 81, 88, 0.06);
}

.study-start-panel .learning-settings {
    padding: 0;
    border: 0;
    background: transparent;
}

.range-item {
    min-height: 48px;
    background-color: #fff;
}

.range-item:hover {
    border-color: #9fb6ba;
}

.check-item {
    min-height: 38px;
    background: #fff;
    transform: translateZ(0);
    transition: transform var(--bsc-dur-fast) var(--bsc-ease),
                border-color var(--bsc-dur-fast) var(--bsc-ease),
                background var(--bsc-dur-fast) var(--bsc-ease),
                color var(--bsc-dur-fast) var(--bsc-ease);
}

.check-item:hover {
    transform: translateY(-1px);
}

.check-item:has(input:checked) {
    box-shadow: inset 0 0 0 1px rgba(70, 117, 126, 0.06);
}

.check-item:has(input:checked):active {
    transform: scale(0.98);
}

.session-preview {
    min-height: 20px;
    margin-top: 2px;
    color: var(--bsc-brand-deep);
    font-size: 0.76rem;
    font-weight: 750;
}

@keyframes bsc-preview-flash {
    from { opacity: 0.35; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
}

.session-preview.is-updating {
    animation: bsc-preview-flash 180ms var(--bsc-ease-out) both;
}

/* CTA：高く・濃く・矢印で行き先を明確に */
#start-btn {
    min-height: 56px;
    margin-top: 18px;
    padding: 0 18px;
    border-radius: 10px;
    box-shadow: var(--bsc-shadow-cta);
    transition: transform var(--bsc-dur-fast) var(--bsc-ease),
                background var(--bsc-dur-fast) var(--bsc-ease),
                box-shadow var(--bsc-dur-fast) var(--bsc-ease);
}

#start-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 13px 30px rgba(47, 81, 88, 0.22);
}

#start-btn:active:not(:disabled) {
    transform: scale(0.99);
    box-shadow: 0 5px 14px rgba(47, 81, 88, 0.18);
}

.start-btn-label {
    margin-left: auto;
}

.start-btn-key {
    margin-left: 8px;
    padding: 2px 7px;
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 6px;
    color: rgba(255,255,255,0.82);
    font-family: var(--bsc-mono);
    font-size: 0.68rem;
    font-weight: 700;
}

.start-btn-arrow {
    margin-left: auto;
    font-size: 1.08rem;
    transition: transform var(--bsc-dur-fast) var(--bsc-ease);
}

#start-btn:hover .start-btn-arrow {
    transform: translateX(3px);
}

/* ---------------------------------------------------------
   Long-form content rhythm
   --------------------------------------------------------- */
.bsc-seo-section {
    padding-top: 38px;
}

.bsc-seo-content > .bsc-seo-section:nth-of-type(even) {
    margin-top: 34px;
    padding: 28px;
    border: 1px solid #edf1f2;
    border-radius: 16px;
    background: #fafcfc;
}

.bsc-seo-feature-grid {
    gap: 14px;
}

.bsc-seo-feature-grid article {
    position: relative;
    min-height: 138px;
    padding: 21px 20px 19px;
    border-radius: 14px;
}

.bsc-feature-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin-bottom: 13px;
    border-radius: 9px;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand);
    font-size: 0.92rem;
    font-weight: 900;
}

/* 使い方はPCで3ステップ横並び */
.bsc-seo-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bsc-seo-steps li {
    grid-template-columns: 1fr;
    align-content: start;
    min-height: 160px;
    padding: 20px;
}

.bsc-seo-steps li > span {
    margin-bottom: 4px;
}

/* 試験概要：項目名の視認性を上げる */
.bsc-spec-table th {
    width: 26%;
    color: #25373b;
    font-size: 0.84rem;
    font-weight: 800;
}

.bsc-spec-table td {
    font-size: 0.88rem;
}

/* ---------------------------------------------------------
   FAQ accordion
   --------------------------------------------------------- */
.bsc-faq {
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
}

.bsc-faq-item {
    padding: 0;
    border-bottom: 1px solid var(--bsc-border);
}

.bsc-faq-item:last-of-type {
    border-bottom: 0;
}

.bsc-faq-question {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 58px;
    padding: 15px 18px;
    border: 0;
    background: #fff;
    color: var(--bsc-text);
    font-family: inherit;
    font-size: 0.91rem;
    font-weight: 800;
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
    transition: background var(--bsc-dur-fast) var(--bsc-ease),
                color var(--bsc-dur-fast) var(--bsc-ease);
}

.bsc-faq-question:hover,
.bsc-faq-question[aria-expanded="true"] {
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
}

.bsc-faq-question:focus-visible {
    position: relative;
    z-index: 1;
    outline: none;
    box-shadow: inset var(--bsc-focus);
}

.bsc-faq-mark {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #cad8da;
    border-radius: 50%;
    background: #fff;
    color: var(--bsc-brand);
    font-size: 1rem;
    font-weight: 500;
}

.bsc-faq-answer {
    margin: 0;
    padding: 0 18px 18px;
    background: var(--bsc-accent-soft);
    color: var(--bsc-text-soft);
    font-size: 0.87rem;
    line-height: 1.9;
    animation: bsc-reveal-in 180ms var(--bsc-ease-out) both;
}

.bsc-faq-link {
    margin: 18px;
}

/* ---------------------------------------------------------
   Related services: 外部プラグインの代表的なラッパーにも余白を合わせる
   --------------------------------------------------------- */
.boochi-related-services,
.related-services,
.brs-related-services {
    width: min(94vw, var(--bsc-container));
    max-width: var(--bsc-container);
    margin-inline: auto;
}

.boochi-related-services a,
.related-services a,
.brs-related-services a {
    border-radius: 14px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 860px) {
    .bsc-seo-content {
        max-width: 100%;
    }

    .bsc-seo-steps {
        grid-template-columns: 1fr;
    }

    .bsc-seo-steps li {
        min-height: 0;
        grid-template-columns: 32px minmax(0, 1fr);
    }
}

@media (max-width: 782px) {
    .bsc-seo-shell {
        width: min(100%, 720px);
    }

    .study-start-panel {
        padding: 16px;
    }

    .learning-summary-strip {
        gap: 6px 12px;
    }

    .bsc-seo-content > .bsc-seo-section:nth-of-type(even) {
        margin-top: 24px;
        padding: 22px 18px;
    }
}

@media (max-width: 640px) {
    .bsc-seo-hero {
        padding-top: 10px;
    }

    .bsc-hero-pills {
        gap: 6px;
    }

    .bsc-hero-pill {
        font-size: 0.72rem;
    }

    .bsc-stat-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bsc-stat {
        padding: 11px 7px;
    }

    .bsc-stat strong {
        font-size: 1rem;
    }

    .learning-summary-strip {
        justify-content: space-between;
    }

    .study-start-panel {
        margin-inline: -1px;
        padding: 15px;
    }

    .start-btn-key {
        display: none;
    }

    .bsc-faq-question {
        padding-inline: 15px;
    }

    .bsc-faq-answer {
        padding-inline: 15px;
    }
}

@media (max-width: 430px) {
    .bsc-stat-row {
        grid-template-columns: 1fr;
    }

    .bsc-stat {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        border-right: 0;
        border-bottom: 1px solid var(--bsc-border);
        text-align: left;
    }

    .bsc-stat:last-child {
        border-bottom: 0;
    }

    .learning-summary-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .session-preview.is-updating,
    .bsc-faq-answer {
        animation: none !important;
    }

    #start-btn,
    .bsc-hero-cta,
    .check-item,
    .start-btn-arrow {
        transition: none !important;
    }
}

/* =========================================================
   数式・コード表示（AWS AIF版）

   問題文・選択肢・解説の中にKaTeXの数式とコードブロックが
   混ざるため、行間と横スクロールだけを最低限整える。
   ここより上のトークンは変更していないので、配色を変える
   ときは :root の --bsc-brand 系だけを差し替えれば足りる。
   ========================================================= */
.bsc-rich {
    white-space: pre-wrap;
}

.bsc-math-inline {
    white-space: normal;
}

.bsc-math-block {
    display: block;
    margin: 12px 0;
    padding: 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: normal;
    text-align: center;
}

/* KaTeXの既定サイズは本文に対して大きいので、周囲の文字に合わせる。 */
.bsc-rich .katex {
    font-size: 1.05em;
    line-height: 1.4;
}

.bsc-math-block .katex-display {
    margin: 0;
}

/* KaTeXが読み込めなかったときのフォールバック表示。 */
.bsc-math-inline.is-fallback,
.bsc-math-block.is-fallback {
    padding: 2px 6px;
    border-radius: var(--bsc-radius-sm);
    background: var(--bsc-surface-muted);
    color: var(--bsc-text-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
    font-size: 0.86em;
}

.bsc-code-block {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius-sm);
    background: var(--bsc-surface-muted);
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}

.bsc-code-block code {
    display: block;
    color: var(--bsc-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
    font-size: 0.84rem;
    line-height: 1.7;
    white-space: pre;
}

.bsc-code-inline {
    padding: 1px 5px;
    border: 1px solid var(--bsc-border);
    border-radius: 5px;
    background: var(--bsc-surface-muted);
    color: var(--bsc-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
    font-size: 0.86em;
    white-space: normal;
    word-break: break-all;
}

/* 選択肢の中では余白を詰めて、行の高さを揃える。 */
.option-btn .bsc-code-block {
    margin: 8px 0 0;
    padding: 10px 12px;
}

.option-btn .bsc-math-block {
    margin: 6px 0;
    text-align: left;
}

@media (max-width: 600px) {
    .bsc-code-block code {
        font-size: 0.78rem;
    }

    .bsc-rich .katex {
        font-size: 1em;
    }
}

/* 読み込み中の表示。

   共通コアが .bsc-quiz-app の中へ <div class="loading"> を出し、JSが起動すると
   replaceChildren() で差し替える。これまでどのプラグインにもスタイルが
   無く、素のテキストが左端に出ていた。一瞬とはいえ毎回見える箇所なので
   最低限そろえておく。JSが起動しない場合はこの表示のまま残るため、
   異常に気づく手がかりにもなる。 */
.bsc-quiz-app .loading {
    padding: 40px 20px;
    color: var(--bsc-text-soft);
    font-size: 0.92rem;
    text-align: center;
}


/* =========================================================
   Legacy CSS custom-property compatibility
   ========================================================= */
:root {
    /* aif */
    --aif-brand: #46757e;
    --aif-brand-hover: #375f67;
    --aif-brand-deep: #2f5158;
    --aif-primary: #1b2426;
    --aif-primary-hover: #2a3639;
    --aif-accent: #46757e;
    --aif-accent-hover: #375f67;
    --aif-accent-soft: #eef4f5;
    --aif-bg: #ffffff;
    --aif-surface: #ffffff;
    --aif-surface-muted: #f7f9fa;
    --aif-text: #1b2426;
    --aif-text-soft: #4a565a;
    --aif-text-muted: #6d7a7e;
    --aif-border: #e4eaeb;
    --aif-border-strong: #cbd5d7;
    --aif-success: #2f7d6a;
    --aif-success-soft: #eef6f3;
    --aif-warning: #9a6b1f;
    --aif-warning-soft: #fbf6ec;
    --aif-danger: #b04a44;
    --aif-danger-soft: #faf1f0;
    --aif-radius-sm: 8px;
    --aif-radius: 10px;
    --aif-radius-lg: 12px;
    --aif-shadow-sm: none;
    --aif-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --aif-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --aif-container: 960px;
    --aif-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --aif-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --aif-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --aif-dur-fast: 0.16s;
    --aif-dur: 0.26s;
    --aif-dur-slow: 0.42s;
    --aif-space: clamp(18px, 3vw, 26px);
    --aif-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --aif-reading: 800px;
    --aif-panel: #f5f9f9;
    --aif-panel-strong: #edf5f6;
    --aif-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
    /* clf */
    --clf-brand: #46757e;
    --clf-brand-hover: #375f67;
    --clf-brand-deep: #2f5158;
    --clf-primary: #1b2426;
    --clf-primary-hover: #2a3639;
    --clf-accent: #46757e;
    --clf-accent-hover: #375f67;
    --clf-accent-soft: #eef4f5;
    --clf-bg: #ffffff;
    --clf-surface: #ffffff;
    --clf-surface-muted: #f7f9fa;
    --clf-text: #1b2426;
    --clf-text-soft: #4a565a;
    --clf-text-muted: #6d7a7e;
    --clf-border: #e4eaeb;
    --clf-border-strong: #cbd5d7;
    --clf-success: #2f7d6a;
    --clf-success-soft: #eef6f3;
    --clf-warning: #9a6b1f;
    --clf-warning-soft: #fbf6ec;
    --clf-danger: #b04a44;
    --clf-danger-soft: #faf1f0;
    --clf-radius-sm: 8px;
    --clf-radius: 10px;
    --clf-radius-lg: 12px;
    --clf-shadow-sm: none;
    --clf-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --clf-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --clf-container: 960px;
    --clf-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --clf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --clf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --clf-dur-fast: 0.16s;
    --clf-dur: 0.26s;
    --clf-dur-slow: 0.42s;
    --clf-space: clamp(18px, 3vw, 26px);
    --clf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --clf-reading: 800px;
    --clf-panel: #f5f9f9;
    --clf-panel-strong: #edf5f6;
    --clf-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
    /* azai */
    --azai-brand: #46757e;
    --azai-brand-hover: #375f67;
    --azai-brand-deep: #2f5158;
    --azai-primary: #1b2426;
    --azai-primary-hover: #2a3639;
    --azai-accent: #46757e;
    --azai-accent-hover: #375f67;
    --azai-accent-soft: #eef4f5;
    --azai-bg: #ffffff;
    --azai-surface: #ffffff;
    --azai-surface-muted: #f7f9fa;
    --azai-text: #1b2426;
    --azai-text-soft: #4a565a;
    --azai-text-muted: #6d7a7e;
    --azai-border: #e4eaeb;
    --azai-border-strong: #cbd5d7;
    --azai-success: #2f7d6a;
    --azai-success-soft: #eef6f3;
    --azai-warning: #9a6b1f;
    --azai-warning-soft: #fbf6ec;
    --azai-danger: #b04a44;
    --azai-danger-soft: #faf1f0;
    --azai-radius-sm: 8px;
    --azai-radius: 10px;
    --azai-radius-lg: 12px;
    --azai-shadow-sm: none;
    --azai-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --azai-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --azai-container: 960px;
    --azai-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --azai-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --azai-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --azai-dur-fast: 0.16s;
    --azai-dur: 0.26s;
    --azai-dur-slow: 0.42s;
    --azai-space: clamp(18px, 3vw, 26px);
    --azai-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --azai-reading: 800px;
    --azai-panel: #f5f9f9;
    --azai-panel-strong: #edf5f6;
    --azai-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
    /* ccna */
    --ccna-brand: #46757e;
    --ccna-brand-hover: #375f67;
    --ccna-brand-deep: #2f5158;
    --ccna-primary: #1b2426;
    --ccna-primary-hover: #2a3639;
    --ccna-accent: #46757e;
    --ccna-accent-hover: #375f67;
    --ccna-accent-soft: #eef4f5;
    --ccna-bg: #ffffff;
    --ccna-surface: #ffffff;
    --ccna-surface-muted: #f7f9fa;
    --ccna-text: #1b2426;
    --ccna-text-soft: #4a565a;
    --ccna-text-muted: #6d7a7e;
    --ccna-border: #e4eaeb;
    --ccna-border-strong: #cbd5d7;
    --ccna-success: #2f7d6a;
    --ccna-success-soft: #eef6f3;
    --ccna-warning: #9a6b1f;
    --ccna-warning-soft: #fbf6ec;
    --ccna-danger: #b04a44;
    --ccna-danger-soft: #faf1f0;
    --ccna-radius-sm: 8px;
    --ccna-radius: 10px;
    --ccna-radius-lg: 12px;
    --ccna-shadow-sm: none;
    --ccna-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --ccna-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --ccna-container: 960px;
    --ccna-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ccna-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ccna-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ccna-dur-fast: 0.16s;
    --ccna-dur: 0.26s;
    --ccna-dur-slow: 0.42s;
    --ccna-space: clamp(18px, 3vw, 26px);
    --ccna-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --ccna-reading: 800px;
    --ccna-panel: #f5f9f9;
    --ccna-panel-strong: #edf5f6;
    --ccna-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
    /* ds */
    --ds-brand: #46757e;
    --ds-brand-hover: #375f67;
    --ds-brand-deep: #2f5158;
    --ds-primary: #1b2426;
    --ds-primary-hover: #2a3639;
    --ds-accent: #46757e;
    --ds-accent-hover: #375f67;
    --ds-accent-soft: #eef4f5;
    --ds-bg: #ffffff;
    --ds-surface: #ffffff;
    --ds-surface-muted: #f7f9fa;
    --ds-text: #1b2426;
    --ds-text-soft: #4a565a;
    --ds-text-muted: #6d7a7e;
    --ds-border: #e4eaeb;
    --ds-border-strong: #cbd5d7;
    --ds-success: #2f7d6a;
    --ds-success-soft: #eef6f3;
    --ds-warning: #9a6b1f;
    --ds-warning-soft: #fbf6ec;
    --ds-danger: #b04a44;
    --ds-danger-soft: #faf1f0;
    --ds-radius-sm: 8px;
    --ds-radius: 10px;
    --ds-radius-lg: 12px;
    --ds-shadow-sm: none;
    --ds-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --ds-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --ds-container: 960px;
    --ds-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ds-dur-fast: 0.16s;
    --ds-dur: 0.26s;
    --ds-dur-slow: 0.42s;
    --ds-space: clamp(18px, 3vw, 26px);
    --ds-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --ds-reading: 800px;
    --ds-panel: #f5f9f9;
    --ds-panel-strong: #edf5f6;
    --ds-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
    /* dxp */
    --dxp-brand: #46757e;
    --dxp-brand-hover: #375f67;
    --dxp-brand-deep: #2f5158;
    --dxp-primary: #1b2426;
    --dxp-primary-hover: #2a3639;
    --dxp-accent: #46757e;
    --dxp-accent-hover: #375f67;
    --dxp-accent-soft: #eef4f5;
    --dxp-bg: #ffffff;
    --dxp-surface: #ffffff;
    --dxp-surface-muted: #f7f9fa;
    --dxp-text: #1b2426;
    --dxp-text-soft: #4a565a;
    --dxp-text-muted: #6d7a7e;
    --dxp-border: #e4eaeb;
    --dxp-border-strong: #cbd5d7;
    --dxp-success: #2f7d6a;
    --dxp-success-soft: #eef6f3;
    --dxp-warning: #9a6b1f;
    --dxp-warning-soft: #fbf6ec;
    --dxp-danger: #b04a44;
    --dxp-danger-soft: #faf1f0;
    --dxp-radius-sm: 8px;
    --dxp-radius: 10px;
    --dxp-radius-lg: 12px;
    --dxp-shadow-sm: none;
    --dxp-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --dxp-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --dxp-container: 960px;
    --dxp-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --dxp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dxp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dxp-dur-fast: 0.16s;
    --dxp-dur: 0.26s;
    --dxp-dur-slow: 0.42s;
    --dxp-space: clamp(18px, 3vw, 26px);
    --dxp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --dxp-reading: 800px;
    --dxp-panel: #f5f9f9;
    --dxp-panel-strong: #edf5f6;
    --dxp-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
    /* es */
    --es-brand: #46757e;
    --es-brand-hover: #375f67;
    --es-brand-deep: #2f5158;
    --es-primary: #1b2426;
    --es-primary-hover: #2a3639;
    --es-accent: #46757e;
    --es-accent-hover: #375f67;
    --es-accent-soft: #eef4f5;
    --es-bg: #ffffff;
    --es-surface: #ffffff;
    --es-surface-muted: #f7f9fa;
    --es-text: #1b2426;
    --es-text-soft: #4a565a;
    --es-text-muted: #6d7a7e;
    --es-border: #e4eaeb;
    --es-border-strong: #cbd5d7;
    --es-success: #2f7d6a;
    --es-success-soft: #eef6f3;
    --es-warning: #9a6b1f;
    --es-warning-soft: #fbf6ec;
    --es-danger: #b04a44;
    --es-danger-soft: #faf1f0;
    --es-radius-sm: 8px;
    --es-radius: 10px;
    --es-radius-lg: 12px;
    --es-shadow-sm: none;
    --es-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --es-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --es-container: 960px;
    --es-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --es-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --es-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --es-dur-fast: 0.16s;
    --es-dur: 0.26s;
    --es-dur-slow: 0.42s;
    --es-space: clamp(18px, 3vw, 26px);
    --es-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --es-reading: 800px;
    --es-panel: #f5f9f9;
    --es-panel-strong: #edf5f6;
    --es-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
    /* gcdl */
    --gcdl-brand: #46757e;
    --gcdl-brand-hover: #375f67;
    --gcdl-brand-deep: #2f5158;
    --gcdl-primary: #1b2426;
    --gcdl-primary-hover: #2a3639;
    --gcdl-accent: #46757e;
    --gcdl-accent-hover: #375f67;
    --gcdl-accent-soft: #eef4f5;
    --gcdl-bg: #ffffff;
    --gcdl-surface: #ffffff;
    --gcdl-surface-muted: #f7f9fa;
    --gcdl-text: #1b2426;
    --gcdl-text-soft: #4a565a;
    --gcdl-text-muted: #6d7a7e;
    --gcdl-border: #e4eaeb;
    --gcdl-border-strong: #cbd5d7;
    --gcdl-success: #2f7d6a;
    --gcdl-success-soft: #eef6f3;
    --gcdl-warning: #9a6b1f;
    --gcdl-warning-soft: #fbf6ec;
    --gcdl-danger: #b04a44;
    --gcdl-danger-soft: #faf1f0;
    --gcdl-radius-sm: 8px;
    --gcdl-radius: 10px;
    --gcdl-radius-lg: 12px;
    --gcdl-shadow-sm: none;
    --gcdl-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --gcdl-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --gcdl-container: 960px;
    --gcdl-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --gcdl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --gcdl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --gcdl-dur-fast: 0.16s;
    --gcdl-dur: 0.26s;
    --gcdl-dur-slow: 0.42s;
    --gcdl-space: clamp(18px, 3vw, 26px);
    --gcdl-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --gcdl-reading: 800px;
    --gcdl-panel: #f5f9f9;
    --gcdl-panel-strong: #edf5f6;
    --gcdl-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
    /* pyda */
    --pyda-brand: #46757e;
    --pyda-brand-hover: #375f67;
    --pyda-brand-deep: #2f5158;
    --pyda-primary: #1b2426;
    --pyda-primary-hover: #2a3639;
    --pyda-accent: #46757e;
    --pyda-accent-hover: #375f67;
    --pyda-accent-soft: #eef4f5;
    --pyda-bg: #ffffff;
    --pyda-surface: #ffffff;
    --pyda-surface-muted: #f7f9fa;
    --pyda-text: #1b2426;
    --pyda-text-soft: #4a565a;
    --pyda-text-muted: #6d7a7e;
    --pyda-border: #e4eaeb;
    --pyda-border-strong: #cbd5d7;
    --pyda-success: #2f7d6a;
    --pyda-success-soft: #eef6f3;
    --pyda-warning: #9a6b1f;
    --pyda-warning-soft: #fbf6ec;
    --pyda-danger: #b04a44;
    --pyda-danger-soft: #faf1f0;
    --pyda-radius-sm: 8px;
    --pyda-radius: 10px;
    --pyda-radius-lg: 12px;
    --pyda-shadow-sm: none;
    --pyda-shadow: 0 1px 2px rgba(27, 36, 38, 0.04);
    --pyda-focus: 0 0 0 3px rgba(70, 117, 126, 0.2);
    --pyda-container: 960px;
    --pyda-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --pyda-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --pyda-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --pyda-dur-fast: 0.16s;
    --pyda-dur: 0.26s;
    --pyda-dur-slow: 0.42s;
    --pyda-space: clamp(18px, 3vw, 26px);
    --pyda-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --pyda-reading: 800px;
    --pyda-panel: #f5f9f9;
    --pyda-panel-strong: #edf5f6;
    --pyda-shadow-cta: 0 10px 26px rgba(47, 81, 88, 0.18);
}

/* Existing per-exam variables continue to drive the shared bsc-* tokens. */
body.aif-quiz-page,
.aif-seo-shell,
#aws-aif-app {
    --bsc-brand: var(--aif-brand);
    --bsc-brand-hover: var(--aif-brand-hover);
    --bsc-brand-deep: var(--aif-brand-deep);
    --bsc-primary: var(--aif-primary);
    --bsc-primary-hover: var(--aif-primary-hover);
    --bsc-accent: var(--aif-accent);
    --bsc-accent-hover: var(--aif-accent-hover);
    --bsc-accent-soft: var(--aif-accent-soft);
    --bsc-bg: var(--aif-bg);
    --bsc-surface: var(--aif-surface);
    --bsc-surface-muted: var(--aif-surface-muted);
    --bsc-text: var(--aif-text);
    --bsc-text-soft: var(--aif-text-soft);
    --bsc-text-muted: var(--aif-text-muted);
    --bsc-border: var(--aif-border);
    --bsc-border-strong: var(--aif-border-strong);
    --bsc-success: var(--aif-success);
    --bsc-success-soft: var(--aif-success-soft);
    --bsc-warning: var(--aif-warning);
    --bsc-warning-soft: var(--aif-warning-soft);
    --bsc-danger: var(--aif-danger);
    --bsc-danger-soft: var(--aif-danger-soft);
    --bsc-radius-sm: var(--aif-radius-sm);
    --bsc-radius: var(--aif-radius);
    --bsc-radius-lg: var(--aif-radius-lg);
    --bsc-shadow-sm: var(--aif-shadow-sm);
    --bsc-shadow: var(--aif-shadow);
    --bsc-focus: var(--aif-focus);
    --bsc-container: var(--aif-container);
    --bsc-font: var(--aif-font);
    --bsc-ease: var(--aif-ease);
    --bsc-ease-out: var(--aif-ease-out);
    --bsc-dur-fast: var(--aif-dur-fast);
    --bsc-dur: var(--aif-dur);
    --bsc-dur-slow: var(--aif-dur-slow);
    --bsc-space: var(--aif-space);
    --bsc-mono: var(--aif-mono);
    --bsc-reading: var(--aif-reading);
    --bsc-panel: var(--aif-panel);
    --bsc-panel-strong: var(--aif-panel-strong);
    --bsc-shadow-cta: var(--aif-shadow-cta);
}

body.clf-quiz-page,
.clf-seo-shell,
#aws-clf-app {
    --bsc-brand: var(--clf-brand);
    --bsc-brand-hover: var(--clf-brand-hover);
    --bsc-brand-deep: var(--clf-brand-deep);
    --bsc-primary: var(--clf-primary);
    --bsc-primary-hover: var(--clf-primary-hover);
    --bsc-accent: var(--clf-accent);
    --bsc-accent-hover: var(--clf-accent-hover);
    --bsc-accent-soft: var(--clf-accent-soft);
    --bsc-bg: var(--clf-bg);
    --bsc-surface: var(--clf-surface);
    --bsc-surface-muted: var(--clf-surface-muted);
    --bsc-text: var(--clf-text);
    --bsc-text-soft: var(--clf-text-soft);
    --bsc-text-muted: var(--clf-text-muted);
    --bsc-border: var(--clf-border);
    --bsc-border-strong: var(--clf-border-strong);
    --bsc-success: var(--clf-success);
    --bsc-success-soft: var(--clf-success-soft);
    --bsc-warning: var(--clf-warning);
    --bsc-warning-soft: var(--clf-warning-soft);
    --bsc-danger: var(--clf-danger);
    --bsc-danger-soft: var(--clf-danger-soft);
    --bsc-radius-sm: var(--clf-radius-sm);
    --bsc-radius: var(--clf-radius);
    --bsc-radius-lg: var(--clf-radius-lg);
    --bsc-shadow-sm: var(--clf-shadow-sm);
    --bsc-shadow: var(--clf-shadow);
    --bsc-focus: var(--clf-focus);
    --bsc-container: var(--clf-container);
    --bsc-font: var(--clf-font);
    --bsc-ease: var(--clf-ease);
    --bsc-ease-out: var(--clf-ease-out);
    --bsc-dur-fast: var(--clf-dur-fast);
    --bsc-dur: var(--clf-dur);
    --bsc-dur-slow: var(--clf-dur-slow);
    --bsc-space: var(--clf-space);
    --bsc-mono: var(--clf-mono);
    --bsc-reading: var(--clf-reading);
    --bsc-panel: var(--clf-panel);
    --bsc-panel-strong: var(--clf-panel-strong);
    --bsc-shadow-cta: var(--clf-shadow-cta);
}

body.azai-quiz-page,
.azai-seo-shell,
#azure-ai-app {
    --bsc-brand: var(--azai-brand);
    --bsc-brand-hover: var(--azai-brand-hover);
    --bsc-brand-deep: var(--azai-brand-deep);
    --bsc-primary: var(--azai-primary);
    --bsc-primary-hover: var(--azai-primary-hover);
    --bsc-accent: var(--azai-accent);
    --bsc-accent-hover: var(--azai-accent-hover);
    --bsc-accent-soft: var(--azai-accent-soft);
    --bsc-bg: var(--azai-bg);
    --bsc-surface: var(--azai-surface);
    --bsc-surface-muted: var(--azai-surface-muted);
    --bsc-text: var(--azai-text);
    --bsc-text-soft: var(--azai-text-soft);
    --bsc-text-muted: var(--azai-text-muted);
    --bsc-border: var(--azai-border);
    --bsc-border-strong: var(--azai-border-strong);
    --bsc-success: var(--azai-success);
    --bsc-success-soft: var(--azai-success-soft);
    --bsc-warning: var(--azai-warning);
    --bsc-warning-soft: var(--azai-warning-soft);
    --bsc-danger: var(--azai-danger);
    --bsc-danger-soft: var(--azai-danger-soft);
    --bsc-radius-sm: var(--azai-radius-sm);
    --bsc-radius: var(--azai-radius);
    --bsc-radius-lg: var(--azai-radius-lg);
    --bsc-shadow-sm: var(--azai-shadow-sm);
    --bsc-shadow: var(--azai-shadow);
    --bsc-focus: var(--azai-focus);
    --bsc-container: var(--azai-container);
    --bsc-font: var(--azai-font);
    --bsc-ease: var(--azai-ease);
    --bsc-ease-out: var(--azai-ease-out);
    --bsc-dur-fast: var(--azai-dur-fast);
    --bsc-dur: var(--azai-dur);
    --bsc-dur-slow: var(--azai-dur-slow);
    --bsc-space: var(--azai-space);
    --bsc-mono: var(--azai-mono);
    --bsc-reading: var(--azai-reading);
    --bsc-panel: var(--azai-panel);
    --bsc-panel-strong: var(--azai-panel-strong);
    --bsc-shadow-cta: var(--azai-shadow-cta);
}

body.ccna-quiz-page,
.ccna-seo-shell,
#ccna-app {
    --bsc-brand: var(--ccna-brand);
    --bsc-brand-hover: var(--ccna-brand-hover);
    --bsc-brand-deep: var(--ccna-brand-deep);
    --bsc-primary: var(--ccna-primary);
    --bsc-primary-hover: var(--ccna-primary-hover);
    --bsc-accent: var(--ccna-accent);
    --bsc-accent-hover: var(--ccna-accent-hover);
    --bsc-accent-soft: var(--ccna-accent-soft);
    --bsc-bg: var(--ccna-bg);
    --bsc-surface: var(--ccna-surface);
    --bsc-surface-muted: var(--ccna-surface-muted);
    --bsc-text: var(--ccna-text);
    --bsc-text-soft: var(--ccna-text-soft);
    --bsc-text-muted: var(--ccna-text-muted);
    --bsc-border: var(--ccna-border);
    --bsc-border-strong: var(--ccna-border-strong);
    --bsc-success: var(--ccna-success);
    --bsc-success-soft: var(--ccna-success-soft);
    --bsc-warning: var(--ccna-warning);
    --bsc-warning-soft: var(--ccna-warning-soft);
    --bsc-danger: var(--ccna-danger);
    --bsc-danger-soft: var(--ccna-danger-soft);
    --bsc-radius-sm: var(--ccna-radius-sm);
    --bsc-radius: var(--ccna-radius);
    --bsc-radius-lg: var(--ccna-radius-lg);
    --bsc-shadow-sm: var(--ccna-shadow-sm);
    --bsc-shadow: var(--ccna-shadow);
    --bsc-focus: var(--ccna-focus);
    --bsc-container: var(--ccna-container);
    --bsc-font: var(--ccna-font);
    --bsc-ease: var(--ccna-ease);
    --bsc-ease-out: var(--ccna-ease-out);
    --bsc-dur-fast: var(--ccna-dur-fast);
    --bsc-dur: var(--ccna-dur);
    --bsc-dur-slow: var(--ccna-dur-slow);
    --bsc-space: var(--ccna-space);
    --bsc-mono: var(--ccna-mono);
    --bsc-reading: var(--ccna-reading);
    --bsc-panel: var(--ccna-panel);
    --bsc-panel-strong: var(--ccna-panel-strong);
    --bsc-shadow-cta: var(--ccna-shadow-cta);
}

body.ds-quiz-page,
.ds-seo-shell,
#ds-kentei-app {
    --bsc-brand: var(--ds-brand);
    --bsc-brand-hover: var(--ds-brand-hover);
    --bsc-brand-deep: var(--ds-brand-deep);
    --bsc-primary: var(--ds-primary);
    --bsc-primary-hover: var(--ds-primary-hover);
    --bsc-accent: var(--ds-accent);
    --bsc-accent-hover: var(--ds-accent-hover);
    --bsc-accent-soft: var(--ds-accent-soft);
    --bsc-bg: var(--ds-bg);
    --bsc-surface: var(--ds-surface);
    --bsc-surface-muted: var(--ds-surface-muted);
    --bsc-text: var(--ds-text);
    --bsc-text-soft: var(--ds-text-soft);
    --bsc-text-muted: var(--ds-text-muted);
    --bsc-border: var(--ds-border);
    --bsc-border-strong: var(--ds-border-strong);
    --bsc-success: var(--ds-success);
    --bsc-success-soft: var(--ds-success-soft);
    --bsc-warning: var(--ds-warning);
    --bsc-warning-soft: var(--ds-warning-soft);
    --bsc-danger: var(--ds-danger);
    --bsc-danger-soft: var(--ds-danger-soft);
    --bsc-radius-sm: var(--ds-radius-sm);
    --bsc-radius: var(--ds-radius);
    --bsc-radius-lg: var(--ds-radius-lg);
    --bsc-shadow-sm: var(--ds-shadow-sm);
    --bsc-shadow: var(--ds-shadow);
    --bsc-focus: var(--ds-focus);
    --bsc-container: var(--ds-container);
    --bsc-font: var(--ds-font);
    --bsc-ease: var(--ds-ease);
    --bsc-ease-out: var(--ds-ease-out);
    --bsc-dur-fast: var(--ds-dur-fast);
    --bsc-dur: var(--ds-dur);
    --bsc-dur-slow: var(--ds-dur-slow);
    --bsc-space: var(--ds-space);
    --bsc-mono: var(--ds-mono);
    --bsc-reading: var(--ds-reading);
    --bsc-panel: var(--ds-panel);
    --bsc-panel-strong: var(--ds-panel-strong);
    --bsc-shadow-cta: var(--ds-shadow-cta);
}

body.dxp-quiz-page,
.dxp-seo-shell,
#dx-passport-app {
    --bsc-brand: var(--dxp-brand);
    --bsc-brand-hover: var(--dxp-brand-hover);
    --bsc-brand-deep: var(--dxp-brand-deep);
    --bsc-primary: var(--dxp-primary);
    --bsc-primary-hover: var(--dxp-primary-hover);
    --bsc-accent: var(--dxp-accent);
    --bsc-accent-hover: var(--dxp-accent-hover);
    --bsc-accent-soft: var(--dxp-accent-soft);
    --bsc-bg: var(--dxp-bg);
    --bsc-surface: var(--dxp-surface);
    --bsc-surface-muted: var(--dxp-surface-muted);
    --bsc-text: var(--dxp-text);
    --bsc-text-soft: var(--dxp-text-soft);
    --bsc-text-muted: var(--dxp-text-muted);
    --bsc-border: var(--dxp-border);
    --bsc-border-strong: var(--dxp-border-strong);
    --bsc-success: var(--dxp-success);
    --bsc-success-soft: var(--dxp-success-soft);
    --bsc-warning: var(--dxp-warning);
    --bsc-warning-soft: var(--dxp-warning-soft);
    --bsc-danger: var(--dxp-danger);
    --bsc-danger-soft: var(--dxp-danger-soft);
    --bsc-radius-sm: var(--dxp-radius-sm);
    --bsc-radius: var(--dxp-radius);
    --bsc-radius-lg: var(--dxp-radius-lg);
    --bsc-shadow-sm: var(--dxp-shadow-sm);
    --bsc-shadow: var(--dxp-shadow);
    --bsc-focus: var(--dxp-focus);
    --bsc-container: var(--dxp-container);
    --bsc-font: var(--dxp-font);
    --bsc-ease: var(--dxp-ease);
    --bsc-ease-out: var(--dxp-ease-out);
    --bsc-dur-fast: var(--dxp-dur-fast);
    --bsc-dur: var(--dxp-dur);
    --bsc-dur-slow: var(--dxp-dur-slow);
    --bsc-space: var(--dxp-space);
    --bsc-mono: var(--dxp-mono);
    --bsc-reading: var(--dxp-reading);
    --bsc-panel: var(--dxp-panel);
    --bsc-panel-strong: var(--dxp-panel-strong);
    --bsc-shadow-cta: var(--dxp-shadow-cta);
}

body.es-quiz-page,
.es-seo-shell,
#e-shikaku-app {
    --bsc-brand: var(--es-brand);
    --bsc-brand-hover: var(--es-brand-hover);
    --bsc-brand-deep: var(--es-brand-deep);
    --bsc-primary: var(--es-primary);
    --bsc-primary-hover: var(--es-primary-hover);
    --bsc-accent: var(--es-accent);
    --bsc-accent-hover: var(--es-accent-hover);
    --bsc-accent-soft: var(--es-accent-soft);
    --bsc-bg: var(--es-bg);
    --bsc-surface: var(--es-surface);
    --bsc-surface-muted: var(--es-surface-muted);
    --bsc-text: var(--es-text);
    --bsc-text-soft: var(--es-text-soft);
    --bsc-text-muted: var(--es-text-muted);
    --bsc-border: var(--es-border);
    --bsc-border-strong: var(--es-border-strong);
    --bsc-success: var(--es-success);
    --bsc-success-soft: var(--es-success-soft);
    --bsc-warning: var(--es-warning);
    --bsc-warning-soft: var(--es-warning-soft);
    --bsc-danger: var(--es-danger);
    --bsc-danger-soft: var(--es-danger-soft);
    --bsc-radius-sm: var(--es-radius-sm);
    --bsc-radius: var(--es-radius);
    --bsc-radius-lg: var(--es-radius-lg);
    --bsc-shadow-sm: var(--es-shadow-sm);
    --bsc-shadow: var(--es-shadow);
    --bsc-focus: var(--es-focus);
    --bsc-container: var(--es-container);
    --bsc-font: var(--es-font);
    --bsc-ease: var(--es-ease);
    --bsc-ease-out: var(--es-ease-out);
    --bsc-dur-fast: var(--es-dur-fast);
    --bsc-dur: var(--es-dur);
    --bsc-dur-slow: var(--es-dur-slow);
    --bsc-space: var(--es-space);
    --bsc-mono: var(--es-mono);
    --bsc-reading: var(--es-reading);
    --bsc-panel: var(--es-panel);
    --bsc-panel-strong: var(--es-panel-strong);
    --bsc-shadow-cta: var(--es-shadow-cta);
}

body.gcdl-quiz-page,
.gcdl-seo-shell,
#gc-digital-leader-app {
    --bsc-brand: var(--gcdl-brand);
    --bsc-brand-hover: var(--gcdl-brand-hover);
    --bsc-brand-deep: var(--gcdl-brand-deep);
    --bsc-primary: var(--gcdl-primary);
    --bsc-primary-hover: var(--gcdl-primary-hover);
    --bsc-accent: var(--gcdl-accent);
    --bsc-accent-hover: var(--gcdl-accent-hover);
    --bsc-accent-soft: var(--gcdl-accent-soft);
    --bsc-bg: var(--gcdl-bg);
    --bsc-surface: var(--gcdl-surface);
    --bsc-surface-muted: var(--gcdl-surface-muted);
    --bsc-text: var(--gcdl-text);
    --bsc-text-soft: var(--gcdl-text-soft);
    --bsc-text-muted: var(--gcdl-text-muted);
    --bsc-border: var(--gcdl-border);
    --bsc-border-strong: var(--gcdl-border-strong);
    --bsc-success: var(--gcdl-success);
    --bsc-success-soft: var(--gcdl-success-soft);
    --bsc-warning: var(--gcdl-warning);
    --bsc-warning-soft: var(--gcdl-warning-soft);
    --bsc-danger: var(--gcdl-danger);
    --bsc-danger-soft: var(--gcdl-danger-soft);
    --bsc-radius-sm: var(--gcdl-radius-sm);
    --bsc-radius: var(--gcdl-radius);
    --bsc-radius-lg: var(--gcdl-radius-lg);
    --bsc-shadow-sm: var(--gcdl-shadow-sm);
    --bsc-shadow: var(--gcdl-shadow);
    --bsc-focus: var(--gcdl-focus);
    --bsc-container: var(--gcdl-container);
    --bsc-font: var(--gcdl-font);
    --bsc-ease: var(--gcdl-ease);
    --bsc-ease-out: var(--gcdl-ease-out);
    --bsc-dur-fast: var(--gcdl-dur-fast);
    --bsc-dur: var(--gcdl-dur);
    --bsc-dur-slow: var(--gcdl-dur-slow);
    --bsc-space: var(--gcdl-space);
    --bsc-mono: var(--gcdl-mono);
    --bsc-reading: var(--gcdl-reading);
    --bsc-panel: var(--gcdl-panel);
    --bsc-panel-strong: var(--gcdl-panel-strong);
    --bsc-shadow-cta: var(--gcdl-shadow-cta);
}

body.pyda-quiz-page,
.pyda-seo-shell,
#python3-data-app {
    --bsc-brand: var(--pyda-brand);
    --bsc-brand-hover: var(--pyda-brand-hover);
    --bsc-brand-deep: var(--pyda-brand-deep);
    --bsc-primary: var(--pyda-primary);
    --bsc-primary-hover: var(--pyda-primary-hover);
    --bsc-accent: var(--pyda-accent);
    --bsc-accent-hover: var(--pyda-accent-hover);
    --bsc-accent-soft: var(--pyda-accent-soft);
    --bsc-bg: var(--pyda-bg);
    --bsc-surface: var(--pyda-surface);
    --bsc-surface-muted: var(--pyda-surface-muted);
    --bsc-text: var(--pyda-text);
    --bsc-text-soft: var(--pyda-text-soft);
    --bsc-text-muted: var(--pyda-text-muted);
    --bsc-border: var(--pyda-border);
    --bsc-border-strong: var(--pyda-border-strong);
    --bsc-success: var(--pyda-success);
    --bsc-success-soft: var(--pyda-success-soft);
    --bsc-warning: var(--pyda-warning);
    --bsc-warning-soft: var(--pyda-warning-soft);
    --bsc-danger: var(--pyda-danger);
    --bsc-danger-soft: var(--pyda-danger-soft);
    --bsc-radius-sm: var(--pyda-radius-sm);
    --bsc-radius: var(--pyda-radius);
    --bsc-radius-lg: var(--pyda-radius-lg);
    --bsc-shadow-sm: var(--pyda-shadow-sm);
    --bsc-shadow: var(--pyda-shadow);
    --bsc-focus: var(--pyda-focus);
    --bsc-container: var(--pyda-container);
    --bsc-font: var(--pyda-font);
    --bsc-ease: var(--pyda-ease);
    --bsc-ease-out: var(--pyda-ease-out);
    --bsc-dur-fast: var(--pyda-dur-fast);
    --bsc-dur: var(--pyda-dur);
    --bsc-dur-slow: var(--pyda-dur-slow);
    --bsc-space: var(--pyda-space);
    --bsc-mono: var(--pyda-mono);
    --bsc-reading: var(--pyda-reading);
    --bsc-panel: var(--pyda-panel);
    --bsc-panel-strong: var(--pyda-panel-strong);
    --bsc-shadow-cta: var(--pyda-shadow-cta);
}

/* =========================================================
   Linux exam runtime (bsc-linux-quiz.js)
   LPIC / LinuC 系だけが使う部品。標準ランタイムには無い
   「入力式の解答」「4ステップの学習設定」「試験範囲の指定」が対象。
   トークンはすべて共通のものを使い、独自の色や余白は持たない。
   ========================================================= */

/* ---------------------------------------------------------
   FAQアコーディオン
   標準ランタイムは .bsc-faq-mark を使うが、こちらは
   ラベルとアイコンを別要素に分けている。見た目は揃える。
   --------------------------------------------------------- */
.bsc-faq-question-text {
    flex: 1 1 auto;
    min-width: 0;
}

.bsc-faq-toggle-icon {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #cad8da;
    border-radius: 50%;
    background: #fff;
    color: var(--bsc-brand);
    font-size: 1rem;
    font-weight: 500;
    transition: background var(--bsc-dur-fast) var(--bsc-ease),
                border-color var(--bsc-dur-fast) var(--bsc-ease);
}

.bsc-faq-question[aria-expanded="true"] .bsc-faq-toggle-icon {
    border-color: var(--bsc-brand);
    background: var(--bsc-brand);
    color: #fff;
}

/* ---------------------------------------------------------
   模擬試験パネルの追加部品
   --------------------------------------------------------- */
.exam-kicker {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* 試験範囲（試験コード）の指定。パネル内なので余白は控えめに。 */
.exam-scope-group {
    margin: 0 0 16px;
}

.exam-scope-group .filter-label {
    margin-bottom: 6px;
}

/* ---------------------------------------------------------
   4ステップの学習設定
   1画面に設定項目が多いため、番号付きの区切りで手順を示す。
   --------------------------------------------------------- */
.learning-settings-steps {
    display: grid;
    gap: 14px;
    padding: 0;
    border: 0;
    background: none;
}

.learning-step,
.learning-start-area {
    padding: clamp(15px, 2.4vw, 20px);
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    background: var(--bsc-surface-muted);
}

.learning-step-heading,
.learning-start-heading {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.learning-start-heading {
    margin-bottom: 16px;
}

.learning-step-number {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
    font-family: var(--bsc-mono);
    font-size: 0.8rem;
    font-weight: 800;
}

.learning-step-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.learning-step-copy h3 {
    margin: 0 0 3px;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.5;
}

.learning-step-copy p {
    margin: 0;
    color: var(--bsc-text-soft);
    font-size: 0.81rem;
    line-height: 1.7;
}

.learning-step-body {
    display: grid;
    gap: 16px;
}

/* 設定項目は2列。狭い画面では1列へ折り返す。 */
.learning-step-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.learning-step-grid > .filter-group:nth-last-child(-n + 2) {
    margin-bottom: 0;
}

.learning-start-area .btn-primary {
    width: 100%;
}

@media (max-width: 640px) {
    .learning-step-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .learning-step-grid > .filter-group {
        margin-bottom: 18px;
    }

    .learning-step-grid > .filter-group:last-child {
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------
   入力式（コマンドを打たせる穴埋め）
   --------------------------------------------------------- */
.input-answer-area {
    display: grid;
    gap: 10px;
}

.input-answer-field {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--bsc-border-strong);
    border-radius: var(--bsc-radius-sm);
    background: var(--bsc-surface);
    color: var(--bsc-text);
    font-family: var(--bsc-mono);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--bsc-dur-fast) var(--bsc-ease),
                box-shadow var(--bsc-dur-fast) var(--bsc-ease);
}

.input-answer-field::placeholder {
    color: #97a3a6;
    font-family: var(--bsc-font);
}

.input-answer-field:hover {
    border-color: #97a3a6;
}

.input-answer-field:focus-visible {
    border-color: var(--bsc-accent);
    outline: none;
    box-shadow: var(--bsc-focus);
}

.input-answer-field:disabled {
    background: var(--bsc-surface-muted);
    color: var(--bsc-text-muted);
}

.input-answer-submit {
    justify-self: start;
    min-width: 180px;
}

.input-answer-hint {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.78rem;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   学習モードのラベル横に出す試験範囲
   --------------------------------------------------------- */
.quiz-range-label {
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--bsc-surface-muted);
    color: var(--bsc-text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--bsc-border-strong);
}

/* =========================================================
   Optional variable-choice / weighted-score components
   ========================================================= */

.badge-type {
    background: var(--bsc-warning-soft);
    color: var(--bsc-brand-deep);
}

@media (min-width: 640px) {
    .options-list.is-binary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

.exam-pass-judgement {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0 4px;
    padding: 16px 18px;
    border: 1px solid var(--bsc-border);
    border-radius: var(--bsc-radius);
    text-align: left;
}

.exam-pass-judgement strong {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.exam-pass-judgement span {
    color: var(--bsc-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.exam-pass-judgement.is-passed {
    border-color: var(--bsc-success);
    background: var(--bsc-success-soft);
}

.exam-pass-judgement.is-passed strong {
    color: var(--bsc-success);
}

.exam-pass-judgement.is-failed {
    border-color: var(--bsc-warning);
    background: var(--bsc-warning-soft);
}

.exam-pass-judgement.is-failed strong {
    color: var(--bsc-brand-deep);
}

/* ---------------------------------------------------------
   状態クラス
   --------------------------------------------------------- */

/* 学習モードでは正誤を出さないため、判定バッジは中立色のままにする。 */
.feedback-area.is-neutral .feedback-box h3 {
    background: var(--bsc-surface-muted);
    color: var(--bsc-text-soft);
    box-shadow: inset 0 0 0 1.5px var(--bsc-border-strong);
}

/* 未回答は素のボタンと同じ見た目。既定に依存せず明示しておく。 */
.exam-number-button.is-unanswered {
    border-color: var(--bsc-border-strong);
    background: var(--bsc-surface);
    color: var(--bsc-text-soft);
}

/* JSでクリック可能にしたLP内のカード。 */
.is-interactive {
    cursor: pointer;
}

.is-interactive:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-faq-item.is-open {
    background: var(--bsc-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
    .bsc-faq-toggle-icon,
    .input-answer-field {
        transition: none;
    }
}

/* =========================================================
   LinuC landing-page refinement (1.14.1)
   LinuC固有の情報量と学習フローに合わせた上書き。
   クイズの共通UIや他試験ページには影響させない。
   ========================================================= */

/* Hero → モード → 学習条件 → 収録状況の順で見せる。 */
.linuc-seo-shell {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

.linuc-seo-hero {
    order: 1;
    padding-top: 4px;
}

.linuc-mode-grid {
    order: 2;
}

.linuc-seo-shell > #linuc-app {
    order: 3;
}

.linuc-stat-row {
    order: 4;
}

.linuc-seo-content {
    order: 5;
}

.linuc-seo-shell > .boochi-related-services,
.linuc-seo-shell > .related-services,
.linuc-seo-shell > .brs-related-services {
    order: 6;
}

.linuc-seo-lead {
    margin-top: 8px;
    line-height: 1.72;
}

.linuc-hero-cta {
    margin-top: 16px;
}

.linuc-hero-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 16px;
    margin-top: 12px;
    color: var(--bsc-brand-deep);
    font-size: 0.76rem;
    font-weight: 700;
}

.linuc-seo-note {
    margin-top: 8px;
}

.linuc-mode-grid {
    margin-top: 22px;
}

.linuc-mode-card {
    min-height: 146px;
    padding: 19px 20px;
}

.linuc-mode-icon {
    margin-bottom: 12px;
}

/* アプリを先に見せ、補助情報である件数はその直後へ置く。 */
.linuc-seo-shell > #linuc-app {
    margin-top: 18px;
    margin-bottom: 0;
}

.linuc-stat-row {
    margin-top: 14px;
}

/* 外側の学習カードを残し、内側は罫線区切りにして多重カード感を抑える。 */
.linuc-seo-shell .exam-start-panel {
    padding: 18px 0 20px;
    border-width: 0 0 1px;
    border-color: var(--bsc-border);
    border-radius: 0;
    background: #fff;
}

.linuc-seo-shell .study-start-panel {
    margin-top: 0;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.linuc-seo-shell .learning-settings-steps {
    gap: 0;
}

.linuc-seo-shell .learning-step,
.linuc-seo-shell .learning-start-area {
    padding: 18px 0;
    border: 0;
    border-top: 1px solid var(--bsc-border);
    border-radius: 0;
    background: transparent;
}

.linuc-seo-shell .learning-step:first-child {
    border-top: 0;
}

.linuc-seo-shell .learning-start-area {
    padding-bottom: 0;
}

/* 通常学習を主CTA、模擬試験をアウトラインのサブCTAにする。 */
.linuc-seo-shell .exam-start-panel .btn-exam {
    min-height: 48px;
    border-color: var(--bsc-brand);
    background: #fff;
    color: var(--bsc-brand-deep);
    box-shadow: none;
}

.linuc-seo-shell .exam-start-panel .btn-exam:hover,
.linuc-seo-shell .exam-start-panel .btn-exam:focus-visible {
    border-color: var(--bsc-brand-hover);
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
}

.linuc-seo-shell .exam-start-panel .btn-exam:active {
    background: var(--bsc-panel-strong);
}

/* SEO本文は内容を保ちつつ、余白とカード量を抑える。 */
.linuc-seo-content {
    margin-top: 34px;
}

.linuc-seo-section {
    padding-top: 30px;
}

.linuc-seo-content > .linuc-seo-section:nth-of-type(even) {
    margin-top: 22px;
    padding: 22px 24px;
}

.linuc-seo-feature-grid article {
    min-height: 124px;
    padding: 18px;
}

.linuc-seo-mode-list {
    padding-left: 1.15em;
}

/* 3ステップを一本の流れとして強調する。 */
.linuc-seo-steps {
    gap: 22px;
}

.linuc-seo-steps li {
    position: relative;
    min-height: 154px;
    border-top: 3px solid var(--bsc-brand);
    box-shadow: 0 6px 18px rgba(47, 81, 88, 0.06);
}

.linuc-seo-steps li > span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bsc-brand);
    color: #fff;
}

.linuc-seo-steps li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -18px;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--bsc-border-strong);
    border-right: 2px solid var(--bsc-border-strong);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

/* 試験コードごとの行を追いやすくする。 */
.linuc-spec-table {
    border-radius: 14px;
}

.linuc-spec-table tr:nth-child(even) th,
.linuc-spec-table tr:nth-child(even) td {
    background: #f8fbfb;
}

.linuc-spec-table th,
.linuc-spec-table td {
    padding-block: 12px;
}

.linuc-spec-table th {
    width: 22%;
    border-left: 3px solid transparent;
}

.linuc-spec-table tr:hover th {
    border-left-color: var(--bsc-brand);
    color: var(--bsc-brand-deep);
}

.linuc-spec-table tr:hover td {
    color: var(--bsc-text);
}

/* FAQは質問行の全面を44px以上のクリック領域にする。 */
.linuc-seo-shell .bsc-faq-question {
    min-height: 64px;
    padding: 16px 18px;
}

.linuc-seo-shell .bsc-faq-toggle-icon,
.linuc-seo-shell .bsc-faq-mark {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
}

/* 問題集本体の終端と関連サービスを明確に分ける。 */
.linuc-seo-shell > .boochi-related-services,
.linuc-seo-shell > .related-services,
.linuc-seo-shell > .brs-related-services {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--bsc-border-strong);
}

@media (max-width: 860px) {
    .linuc-seo-steps {
        gap: 12px;
    }

    .linuc-seo-steps li {
        min-height: 0;
    }

    .linuc-seo-steps li:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .linuc-seo-shell {
        margin-top: 8px;
    }

    .linuc-seo-hero {
        padding-top: 0;
    }

    .linuc-mode-grid {
        margin-top: 18px;
    }

    .linuc-mode-card {
        min-height: 0;
    }

    .linuc-hero-benefits {
        gap: 4px 10px;
    }

    .linuc-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .linuc-stat {
        border-right: 1px solid var(--bsc-border);
        border-bottom: 1px solid var(--bsc-border);
    }

    .linuc-stat:nth-child(2n) {
        border-right: 0;
    }

    .linuc-stat:last-child,
    .linuc-stat:nth-last-child(2):nth-child(odd) {
        border-bottom: 0;
    }

    .linuc-stat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .linuc-seo-content > .linuc-seo-section:nth-of-type(even) {
        margin-top: 18px;
        padding: 20px 16px;
    }

    .linuc-spec-table th,
    .linuc-spec-table td {
        padding: 10px 14px;
    }

    .linuc-spec-table th {
        border-left-color: var(--bsc-brand);
        background: var(--bsc-accent-soft) !important;
    }

    .linuc-seo-shell > .boochi-related-services,
    .linuc-seo-shell > .related-services,
    .linuc-seo-shell > .brs-related-services {
        margin-top: 44px;
        padding-top: 24px;
    }
}

/* =========================================================
   LinuC related-services placement fix (1.14.2)
   関連サービス側のラッパー名に依存せず、未分類の直下要素を
   問題集本文の直後へ配置する。
   ========================================================= */
.linuc-seo-shell > * {
    order: 6;
}

.linuc-seo-shell > .linuc-seo-hero {
    order: 1;
}

.linuc-seo-shell > .linuc-mode-grid {
    order: 2;
}

.linuc-seo-shell > #linuc-app {
    order: 3;
}

.linuc-seo-shell > .linuc-stat-row {
    order: 4;
}

.linuc-seo-shell > .linuc-seo-content {
    order: 5;
}

.linuc-seo-shell > .boochi-related-services,
.linuc-seo-shell > .related-services,
.linuc-seo-shell > .brs-related-services {
    margin-top: 28px;
    padding-top: 0;
    border-top: 0;
}

/* プラグイン側で別名のラッパーが使われた場合のフォールバック。 */
.linuc-seo-shell > :not(.linuc-seo-hero):not(.linuc-mode-grid):not(#linuc-app):not(.linuc-stat-row):not(.linuc-seo-content):not(script):not(style):not(noscript) {
    margin-top: 28px;
}

@media (max-width: 640px) {
    .linuc-seo-shell > .boochi-related-services,
    .linuc-seo-shell > .related-services,
    .linuc-seo-shell > .brs-related-services,
    .linuc-seo-shell > :not(.linuc-seo-hero):not(.linuc-mode-grid):not(#linuc-app):not(.linuc-stat-row):not(.linuc-seo-content):not(script):not(style):not(noscript) {
        margin-top: 24px;
        padding-top: 0;
    }
}

/* =========================================================
   Shared learning history dashboard (1.14.7)
   4指標・カテゴリ別到達度・直近の学習を一枚に集約する。
   ========================================================= */
.bsc-quiz-app .history-card {
    padding: clamp(22px, 3vw, 30px);
    border-color: #cddade;
    border-radius: 12px;
    background: var(--bsc-surface);
    box-shadow: none;
    color: var(--bsc-text);
}

.bsc-quiz-app .history-heading {
    margin: 0 0 16px;
}

.bsc-quiz-app .history-heading h1 {
    margin: 0;
    color: var(--bsc-primary);
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.bsc-quiz-app .history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
}

.bsc-quiz-app .history-metric {
    display: grid;
    min-width: 0;
    min-height: 76px;
    place-content: center;
    gap: 5px;
    padding: 12px 10px;
    border: 1px solid #cfdbe2;
    border-radius: 6px;
    background: #f5f7fa;
    text-align: center;
}

.bsc-quiz-app .history-metric-label {
    color: #687587;
    font-size: 0.74rem;
    line-height: 1.4;
}

.bsc-quiz-app .history-metric-value {
    overflow-wrap: anywhere;
    color: #122647;
    font-family: var(--bsc-mono);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.25;
}

.bsc-quiz-app .history-section {
    margin-top: 24px;
    text-align: left;
}

.bsc-quiz-app .history-section h2 {
    margin: 0 0 10px;
    color: #263c59;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.55;
}

.bsc-quiz-app .history-progress-list {
    border-top: 0;
}

.bsc-quiz-app .history-progress-row {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(150px, 0.48fr) minmax(82px, auto);
    align-items: center;
    gap: 14px;
    min-height: 42px;
    padding: 9px 0;
    border-bottom: 1px solid #d6e0e5;
}

.bsc-quiz-app .history-progress-label {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #536176;
    font-size: 0.8rem;
    line-height: 1.5;
}

.bsc-quiz-app .history-progress-track {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9eff6;
}

.bsc-quiz-app .history-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1f4f8f;
    transition: width 0.35s ease-out;
}

.bsc-quiz-app .history-progress-value {
    color: #32445e;
    font-family: var(--bsc-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.bsc-quiz-app .history-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d8dee5;
    background: #fff;
}

.bsc-quiz-app .history-table {
    width: 100%;
    min-width: 500px;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.bsc-quiz-app .history-table th,
.bsc-quiz-app .history-table td {
    padding: 9px 8px;
    border: 0;
    border-right: 1px solid #e3e7eb;
    border-bottom: 1px solid #e3e7eb;
    color: #36465c;
    font-size: 0.76rem;
    line-height: 1.5;
    text-align: left;
    vertical-align: middle;
}

.bsc-quiz-app .history-table th:last-child,
.bsc-quiz-app .history-table td:last-child {
    border-right: 0;
}

.bsc-quiz-app .history-table tbody tr:last-child td {
    border-bottom: 0;
}

.bsc-quiz-app .history-table th {
    background: #f4f5f7;
    color: #69768a;
    font-weight: 750;
}

.bsc-quiz-app .history-table th:first-child,
.bsc-quiz-app .history-table td:first-child {
    width: 28%;
}

.bsc-quiz-app .history-table th:nth-child(2),
.bsc-quiz-app .history-table td:nth-child(2) {
    width: 42%;
}

.bsc-quiz-app .history-table-empty {
    padding: 18px 10px !important;
    color: var(--bsc-text-muted) !important;
    text-align: center !important;
}

.bsc-quiz-app .history-result-link,
.bsc-quiz-app .history-clear-link,
.bsc-quiz-app .history-back-link {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bsc-quiz-app .history-result-link {
    color: #234f78;
}

.bsc-quiz-app .history-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
}

.bsc-quiz-app .history-clear-link {
    color: #566577;
    font-size: 0.78rem;
}

.bsc-quiz-app .history-back-link {
    color: var(--bsc-brand);
    font-size: 0.78rem;
    font-weight: 750;
}

.bsc-quiz-app .history-result-link:hover,
.bsc-quiz-app .history-clear-link:hover,
.bsc-quiz-app .history-back-link:hover {
    color: var(--bsc-brand-hover);
}

.bsc-quiz-app .history-result-link:focus-visible,
.bsc-quiz-app .history-clear-link:focus-visible,
.bsc-quiz-app .history-back-link:focus-visible {
    outline: 2px solid var(--bsc-brand);
    outline-offset: 4px;
}

@media (max-width: 700px) {
    .bsc-quiz-app .history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bsc-quiz-app .history-progress-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 11px 0;
    }

    .bsc-quiz-app .history-progress-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .bsc-quiz-app .history-progress-value {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 420px) {
    .bsc-quiz-app .history-card {
        padding: 20px 14px;
    }

    .bsc-quiz-app .history-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsc-quiz-app .history-progress-fill {
        transition: none;
    }
}

/* =========================================================
   Learning history dashboard improvements (1.20.0)
   学習済／弱点の絞り込みと、正答率／到達率の分離に対応。
   ========================================================= */
.bsc-quiz-app .history-title-wrap {
    min-width: 0;
}

.bsc-quiz-app .history-title-wrap p {
    margin: 3px 0 0;
    color: var(--bsc-text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.bsc-quiz-app .history-summary {
    margin-bottom: 14px;
}

.bsc-quiz-app .history-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 11px;
    border: 1px solid #d9e3e7;
    border-radius: 8px;
    background: #f8fafb;
}

.bsc-quiz-app .history-quick-button {
    width: auto;
    min-height: 38px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--bsc-brand);
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.3;
    cursor: pointer;
}

.bsc-quiz-app .history-quick-button.is-primary {
    background: var(--bsc-brand);
    color: #fff;
}

.bsc-quiz-app .history-quick-button.is-weakness {
    border-color: #c9787e;
    background: #fff7f7;
    color: #9d343d;
}

.bsc-quiz-app .history-quick-button:hover {
    filter: brightness(0.97);
}

.bsc-quiz-app .history-quick-button:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-quiz-app .history-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.bsc-quiz-app .history-section-heading h2 {
    margin: 0;
}

.bsc-quiz-app .history-section-heading p {
    margin: 0;
    color: var(--bsc-text-muted);
    font-size: 0.67rem;
    line-height: 1.45;
    text-align: right;
}

.bsc-quiz-app .history-category-section {
    padding: 16px;
    border: 1px solid #d8e2e6;
    border-radius: 9px;
    background: #fff;
}

.bsc-quiz-app .history-category-controls {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(165px, 0.72fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid #e0e7ea;
    border-radius: 7px;
    background: #f8fafb;
}

.bsc-quiz-app .history-set-filter,
.bsc-quiz-app .history-category-search {
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #cad7dc;
    border-radius: 5px;
    background-color: #fff;
    color: #30414c;
    font-size: 0.7rem;
}

.bsc-quiz-app .history-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.bsc-quiz-app .history-category-filter {
    width: auto;
    min-height: 32px;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid #d3dde1;
    border-radius: 999px;
    background: #fff;
    color: #52626c;
    font-size: 0.64rem;
    font-weight: 750;
    line-height: 1.2;
    cursor: pointer;
}

.bsc-quiz-app .history-category-filter:hover {
    border-color: var(--bsc-brand);
    color: var(--bsc-brand-deep);
}

.bsc-quiz-app .history-category-filter.is-active {
    border-color: var(--bsc-brand-deep);
    background: var(--bsc-brand-deep);
    color: #fff;
}

.bsc-quiz-app .history-set-filter:focus-visible,
.bsc-quiz-app .history-category-search:focus-visible,
.bsc-quiz-app .history-category-filter:focus-visible,
.bsc-quiz-app .history-category-toggle:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-quiz-app .history-progress-list {
    border-top: 1px solid #dce4e7;
}

.bsc-quiz-app .history-progress-row {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(310px, 0.9fr);
    align-items: center;
    gap: 5px 20px;
    min-height: 66px;
    padding: 10px 0;
}

.bsc-quiz-app .history-progress-heading {
    display: grid;
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
    gap: 3px;
}

.bsc-quiz-app .history-progress-heading .history-progress-label {
    color: #334958;
    font-size: 0.76rem;
    font-weight: 750;
}

.bsc-quiz-app .history-progress-heading > span {
    color: #7b8992;
    font-family: var(--bsc-mono);
    font-size: 0.61rem;
}

.bsc-quiz-app .history-progress-line {
    display: grid;
    grid-column: 2;
    grid-template-columns: 30px minmax(100px, 1fr) 82px;
    align-items: center;
    gap: 7px;
    color: #75838c;
    font-size: 0.61rem;
}

.bsc-quiz-app .history-progress-line > b {
    color: #344957;
    font-family: var(--bsc-mono);
    font-size: 0.61rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.bsc-quiz-app .history-progress-track {
    height: 7px;
}

.bsc-quiz-app .history-progress-track.is-accuracy .history-progress-fill {
    background: #60bd3a;
}

.bsc-quiz-app .history-progress-track.is-coverage .history-progress-fill {
    background: var(--bsc-brand);
}

.bsc-quiz-app .history-progress-fill.is-started {
    min-width: 5px;
}

.bsc-quiz-app .history-category-empty {
    margin: 0;
    padding: 24px 10px;
    color: var(--bsc-text-muted);
    font-size: 0.75rem;
    text-align: center;
}

.bsc-quiz-app .history-category-footer {
    display: flex;
    justify-content: center;
}

.bsc-quiz-app .history-category-toggle {
    width: min(260px, 100%);
    min-height: 34px;
    margin: 10px 0 0;
    padding: 6px 12px;
    border: 1px solid #cedadf;
    border-radius: 5px;
    background: #f7fafb;
    color: var(--bsc-brand-deep);
    font-size: 0.67rem;
    font-weight: 750;
    cursor: pointer;
}

.bsc-quiz-app .history-category-toggle:hover {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
}

.bsc-quiz-app .history-recent-section {
    padding-top: 2px;
}

.bsc-quiz-app .history-table {
    min-width: 720px;
}

.bsc-quiz-app .history-table th:first-child,
.bsc-quiz-app .history-table td:first-child {
    width: 22%;
}

.bsc-quiz-app .history-table th:nth-child(2),
.bsc-quiz-app .history-table td:nth-child(2) {
    width: 20%;
}

.bsc-quiz-app .history-table th:nth-child(3),
.bsc-quiz-app .history-table td:nth-child(3) {
    width: 38%;
}

.bsc-quiz-app .history-table th:nth-child(4),
.bsc-quiz-app .history-table td:nth-child(4) {
    width: 20%;
}

.bsc-quiz-app .history-actions {
    padding-top: 16px;
    border-top: 1px solid #e1e7ea;
}

.bsc-quiz-app .history-clear-link {
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #e1b9bd;
    border-radius: 5px;
    background: #fffafa;
    color: #9a4b52;
    font-size: 0.7rem;
    text-decoration: none;
}

.bsc-quiz-app .history-clear-link:hover {
    border-color: #c77980;
    background: #fff3f4;
    color: #87363e;
}

@media (max-width: 820px) {
    .bsc-quiz-app .history-category-controls {
        grid-template-columns: 1fr 1fr;
    }

    .bsc-quiz-app .history-set-filter {
        grid-column: 1 / -1;
    }

    .bsc-quiz-app .history-progress-row {
        grid-template-columns: minmax(190px, 0.8fr) minmax(270px, 1fr);
    }
}

@media (max-width: 700px) {
    .bsc-quiz-app .history-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .bsc-quiz-app .history-section-heading p {
        text-align: left;
    }

    .bsc-quiz-app .history-category-controls {
        grid-template-columns: 1fr;
    }

    .bsc-quiz-app .history-set-filter {
        grid-column: auto;
    }

    .bsc-quiz-app .history-progress-row {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 12px 0;
    }

    .bsc-quiz-app .history-progress-heading,
    .bsc-quiz-app .history-progress-line {
        grid-column: 1;
        grid-row: auto;
    }

    .bsc-quiz-app .history-table,
    .bsc-quiz-app .history-table tbody,
    .bsc-quiz-app .history-table tr,
    .bsc-quiz-app .history-table td {
        display: block;
        width: 100% !important;
        min-width: 0;
    }

    .bsc-quiz-app .history-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .bsc-quiz-app .history-table tbody {
        padding: 8px;
    }

    .bsc-quiz-app .history-table tr {
        margin-bottom: 8px;
        padding: 5px 9px;
        border: 1px solid #dfe6e9;
        border-radius: 7px;
    }

    .bsc-quiz-app .history-table td {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px;
        padding: 6px 0;
        border-right: 0;
        border-bottom: 1px solid #edf1f2;
    }

    .bsc-quiz-app .history-table td:last-child {
        border-bottom: 0;
    }

    .bsc-quiz-app .history-table td::before {
        content: attr(data-label);
        color: #7b8892;
        font-size: 0.62rem;
        font-weight: 800;
    }

    .bsc-quiz-app .history-table td.history-table-empty {
        display: block;
    }

    .bsc-quiz-app .history-table td.history-table-empty::before {
        content: none;
    }
}

@media (max-width: 480px) {
    .bsc-quiz-app .history-quick-actions,
    .bsc-quiz-app .history-quick-button {
        width: 100%;
    }

    .bsc-quiz-app .history-category-section {
        padding: 12px;
    }

    .bsc-quiz-app .history-progress-line {
        grid-template-columns: 28px minmax(80px, 1fr) 78px;
    }
}

/* =========================================================
   Report exports (1.21.0)
   学習状況／試験別成績をPNGまたはCSVで保存する。
   ========================================================= */
.bsc-quiz-app .history-header-actions,
.bsc-quiz-app .exam-set-report-export-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.bsc-quiz-app .report-export-button {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid #c9d7dc;
    border-radius: 7px;
    background: #f7fafb;
    color: var(--bsc-brand-deep);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
}

.bsc-quiz-app .report-export-button:hover {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
}

.bsc-quiz-app .report-export-button:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-quiz-app .report-export-button.is-toolbar {
    min-height: 34px;
    padding: 6px 9px;
    border-color: rgba(255, 255, 255, 0.55);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.65rem;
}

.bsc-quiz-app .report-export-button.is-toolbar:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 760px) {
    .bsc-quiz-app .history-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .bsc-quiz-app .history-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .bsc-quiz-app .exam-set-report-controls {
        flex-wrap: wrap;
    }

    .bsc-quiz-app .exam-set-report-export-actions {
        order: 3;
    }

    .bsc-quiz-app .exam-set-report-close {
        margin-left: auto;
    }
}

/* =========================================================
   Exam / question-set performance report (1.17.0)
   スクリーンショットの試験回別レポートを、全試験で使える形に共通化。
   ========================================================= */
.bsc-quiz-app .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.bsc-quiz-app .history-link-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin: 0 0 22px;
}

.bsc-quiz-app .history-link-row .history-link-button {
    margin: 0;
}

.bsc-quiz-app .history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bsc-quiz-app .history-report-button {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid var(--bsc-border-strong);
    border-radius: 7px;
    background: var(--bsc-surface);
    color: var(--bsc-brand-deep);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.bsc-quiz-app .history-report-button:hover {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
}

.bsc-quiz-app .history-report-button:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-quiz-app .exam-set-report-card {
    overflow: hidden;
    padding: 0;
    border-color: #cddade;
    border-radius: 12px;
    background: #eef1f3;
    box-shadow: none;
}

.bsc-quiz-app .exam-set-report-toolbar {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 16px 12px 20px;
    background: var(--bsc-brand-deep);
    color: #fff;
}

.bsc-quiz-app .exam-set-report-title {
    min-width: 0;
}

.bsc-quiz-app .exam-set-report-title h1 {
    margin: 0;
    color: #fff;
    font-size: 1.06rem;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.bsc-quiz-app .exam-set-report-title p {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.7rem;
    line-height: 1.4;
}

.bsc-quiz-app .exam-set-report-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.bsc-quiz-app .exam-set-report-select {
    width: min(260px, 38vw);
    min-height: 38px;
    margin: 0;
    padding: 7px 34px 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 4px;
    background-color: #fff;
    color: #26313a;
    font-size: 0.78rem;
    font-weight: 700;
}

.bsc-quiz-app .exam-set-report-select:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.42);
    outline-offset: 2px;
}

.bsc-quiz-app .exam-set-report-close {
    display: inline-grid;
    width: 38px;
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.bsc-quiz-app .exam-set-report-close:hover,
.bsc-quiz-app .exam-set-report-close:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.14);
}

.bsc-quiz-app .exam-set-report-layout {
    display: grid;
    grid-template-columns: minmax(250px, 31%) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
}

.bsc-quiz-app .exam-set-report-sidebar,
.bsc-quiz-app .exam-set-report-detail {
    min-width: 0;
}

.bsc-quiz-app .exam-set-report-sidebar {
    display: grid;
    align-content: start;
    gap: 10px;
}

.bsc-quiz-app .exam-set-report-overall,
.bsc-quiz-app .exam-set-report-group,
.bsc-quiz-app .exam-set-report-detail {
    margin: 0;
    padding: 12px;
    border: 1px solid #e0e5e8;
    background: #fff;
}

.bsc-quiz-app .exam-set-report-detail {
    padding: 0;
}

.bsc-quiz-app .exam-set-report-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.bsc-quiz-app .exam-set-report-section-heading h2,
.bsc-quiz-app .exam-set-report-group h2 {
    margin: 0;
    color: #1f2932;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.4;
}

.bsc-quiz-app .exam-set-report-section-heading > span {
    color: var(--bsc-text-muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.bsc-quiz-app .exam-set-report-detail > .exam-set-report-section-heading {
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #dfe5e8;
}

.bsc-quiz-app .exam-set-report-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 8px;
}

.bsc-quiz-app .exam-set-report-metric {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 3px 7px 7px;
    border-right: 1px solid #e5eaed;
    text-align: center;
}

.bsc-quiz-app .exam-set-report-metric:last-child {
    border-right: 0;
}

.bsc-quiz-app .exam-set-report-metric span {
    color: #7a858d;
    font-size: 0.66rem;
}

.bsc-quiz-app .exam-set-report-metric strong {
    overflow-wrap: anywhere;
    color: #101820;
    font-family: var(--bsc-mono);
    font-size: 1.12rem;
    font-weight: 900;
    line-height: 1.25;
}

.bsc-quiz-app .exam-set-report-overall-track,
.bsc-quiz-app .exam-set-report-track {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background: #f0f2f3;
}

.bsc-quiz-app .exam-set-report-overall-track {
    height: 14px;
    margin-top: 5px;
}

.bsc-quiz-app .exam-set-report-track {
    height: 7px;
}

.bsc-quiz-app .exam-set-report-overall-track > span,
.bsc-quiz-app .exam-set-report-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #70d946;
    transition: width 0.3s ease-out;
}

.bsc-quiz-app .exam-set-report-group h2 {
    margin-bottom: 7px;
}

.bsc-quiz-app .exam-set-report-group-row {
    padding: 7px 0;
    border-top: 1px solid #eef1f2;
}

.bsc-quiz-app .exam-set-report-group-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.bsc-quiz-app .exam-set-report-group-heading strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #29353d;
    font-size: 0.72rem;
    font-weight: 650;
}

.bsc-quiz-app .exam-set-report-group-heading span,
.bsc-quiz-app .exam-set-report-group-heading b {
    color: #81909b;
    font-family: var(--bsc-mono);
    font-size: 0.61rem;
    font-weight: 500;
    white-space: nowrap;
}

.bsc-quiz-app .exam-set-report-group-heading b {
    min-width: 36px;
    color: #314354;
    text-align: right;
}

.bsc-quiz-app .exam-set-report-empty {
    margin: 0;
    padding: 18px 10px;
    color: var(--bsc-text-muted);
    font-size: 0.76rem;
    text-align: center;
}

.bsc-quiz-app .exam-set-report-table-wrap {
    width: 100%;
    max-height: 650px;
    overflow: auto;
    background: #fff;
}

.bsc-quiz-app .exam-set-report-table {
    width: 100%;
    min-width: 680px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.bsc-quiz-app .exam-set-report-table th,
.bsc-quiz-app .exam-set-report-table td {
    padding: 8px 7px;
    border: 0;
    border-bottom: 1px solid #e4e8ea;
    color: #34424b;
    font-size: 0.67rem;
    line-height: 1.45;
    text-align: left;
    vertical-align: top;
}

.bsc-quiz-app .exam-set-report-table th {
    position: sticky;
    z-index: 1;
    top: 0;
    background: #f5f7f8;
    color: #74808a;
    font-weight: 800;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(1),
.bsc-quiz-app .exam-set-report-table td:nth-child(1) {
    width: 8%;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(2),
.bsc-quiz-app .exam-set-report-table td:nth-child(2) {
    width: 18%;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(3),
.bsc-quiz-app .exam-set-report-table td:nth-child(3) {
    width: 38%;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(4),
.bsc-quiz-app .exam-set-report-table td:nth-child(4) {
    width: 23%;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(5),
.bsc-quiz-app .exam-set-report-table td:nth-child(5) {
    width: 13%;
    text-align: right;
}

.bsc-quiz-app .exam-set-report-table tbody tr:hover {
    background: #f9fbfb;
}

.bsc-quiz-app .exam-set-report-question {
    display: -webkit-box;
    overflow: hidden;
    color: #26333c;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.bsc-quiz-app .exam-set-report-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.bsc-quiz-app .exam-set-report-result > span {
    white-space: nowrap;
}

.bsc-quiz-app .exam-set-report-result > b {
    font-family: var(--bsc-mono);
    font-size: 0.9rem;
    font-weight: 900;
}

.bsc-quiz-app .exam-set-report-result > b.is-correct {
    color: #2aa245;
}

.bsc-quiz-app .exam-set-report-result > b.is-wrong {
    color: #ff4a56;
}

.bsc-quiz-app .exam-set-report-result > b.is-mixed {
    color: #c58a22;
}

.bsc-quiz-app .exam-set-report-result > b.is-unanswered {
    color: #9aa3aa;
}

.bsc-quiz-app .exam-set-report-rate {
    display: inline-flex;
    min-width: 42px;
    min-height: 23px;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--bsc-mono);
    font-size: 0.63rem;
    font-weight: 800;
}

.bsc-quiz-app .exam-set-report-rate.is-correct {
    border-color: #a9e390;
    background: #eefbe8;
    color: #54ac2c;
}

.bsc-quiz-app .exam-set-report-rate.is-wrong {
    border-color: #ffc3c8;
    background: #fff2f3;
    color: #ff5a66;
}

.bsc-quiz-app .exam-set-report-rate.is-partial {
    border-color: #ead39e;
    background: #fff8e8;
    color: #9b6a12;
}

.bsc-quiz-app .exam-set-report-rate.is-unanswered {
    color: #8c969d;
}

.bsc-quiz-app .exam-set-report-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 14px 11px;
    color: #748089;
    font-size: 0.63rem;
}

.bsc-quiz-app .exam-set-report-footer .history-back-link {
    flex: 0 0 auto;
}

@media (max-width: 800px) {
    .bsc-quiz-app .exam-set-report-layout {
        grid-template-columns: 1fr;
    }

    .bsc-quiz-app .exam-set-report-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bsc-quiz-app .exam-set-report-overall {
        grid-column: 1 / -1;
    }

    .bsc-quiz-app .exam-set-report-table-wrap {
        max-height: 560px;
    }
}

@media (max-width: 560px) {
    .bsc-quiz-app .history-heading,
    .bsc-quiz-app .exam-set-report-toolbar,
    .bsc-quiz-app .exam-set-report-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .bsc-quiz-app .history-report-button {
        align-self: flex-start;
    }

    .bsc-quiz-app .exam-set-report-controls {
        width: 100%;
    }

    .bsc-quiz-app .exam-set-report-select {
        width: 100%;
        flex: 1 1 auto;
    }

    .bsc-quiz-app .exam-set-report-sidebar {
        grid-template-columns: 1fr;
    }

    .bsc-quiz-app .exam-set-report-overall {
        grid-column: auto;
    }

    .bsc-quiz-app .exam-set-report-footer .history-back-link {
        align-self: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsc-quiz-app .exam-set-report-overall-track > span,
    .bsc-quiz-app .exam-set-report-fill {
        transition: none;
    }
}

/* =========================================================
   Exam report usability improvements (1.19.0)
   画面内スクロール、回答状態フィルター、検索、ページ送りに対応。
   ========================================================= */
.bsc-quiz-app .exam-set-report-layout {
    height: clamp(560px, 72vh, 760px);
    align-items: stretch;
    overflow: hidden;
}

.bsc-quiz-app .exam-set-report-sidebar {
    max-height: 100%;
    padding-right: 3px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.bsc-quiz-app .exam-set-report-detail {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.bsc-quiz-app .exam-set-report-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bsc-quiz-app .exam-set-report-overall-progress {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    color: #6c7b85;
    font-size: 0.61rem;
}

.bsc-quiz-app .exam-set-report-overall-progress > b {
    color: #314354;
    font-family: var(--bsc-mono);
    font-size: 0.62rem;
    text-align: right;
}

.bsc-quiz-app .exam-set-report-overall-progress .exam-set-report-overall-track {
    height: 8px;
    margin: 0;
}

.bsc-quiz-app .exam-set-report-overall-track.is-coverage > span,
.bsc-quiz-app .exam-set-report-track.is-coverage > .exam-set-report-fill {
    background: var(--bsc-brand);
}

.bsc-quiz-app .exam-set-report-group-heading {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bsc-quiz-app .exam-set-report-group-heading span {
    white-space: normal;
    text-align: right;
}

.bsc-quiz-app .exam-set-report-stat-line {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #81909b;
    font-family: var(--bsc-mono);
    font-size: 0.58rem;
}

.bsc-quiz-app .exam-set-report-stat-line > b {
    color: #475965;
    font-size: 0.59rem;
    font-weight: 700;
    text-align: right;
}

.bsc-quiz-app .exam-set-report-group-row[hidden] {
    display: none !important;
}

.bsc-quiz-app .exam-set-report-group-toggle {
    width: 100%;
    min-height: 32px;
    margin: 7px 0 0;
    padding: 5px 8px;
    border: 1px solid #d5e0e4;
    border-radius: 5px;
    background: #f7fafb;
    color: var(--bsc-brand-deep);
    font-size: 0.66rem;
    font-weight: 750;
    cursor: pointer;
}

.bsc-quiz-app .exam-set-report-group-toggle:hover {
    border-color: var(--bsc-brand);
    background: var(--bsc-accent-soft);
}

.bsc-quiz-app .exam-set-report-group-toggle:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-quiz-app .exam-set-report-detail-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e7ea;
    background: #fafcfc;
}

.bsc-quiz-app .exam-set-report-filters {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 5px;
}

.bsc-quiz-app .exam-set-report-filter {
    width: auto;
    min-height: 30px;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #d5dfe3;
    border-radius: 999px;
    background: #fff;
    color: #51616b;
    font-size: 0.62rem;
    font-weight: 750;
    line-height: 1.2;
    cursor: pointer;
}

.bsc-quiz-app .exam-set-report-filter:hover {
    border-color: var(--bsc-brand);
    color: var(--bsc-brand-deep);
}

.bsc-quiz-app .exam-set-report-filter.is-active {
    border-color: var(--bsc-brand-deep);
    background: var(--bsc-brand-deep);
    color: #fff;
}

.bsc-quiz-app .exam-set-report-filter:focus-visible,
.bsc-quiz-app .exam-set-report-search:focus-visible,
.bsc-quiz-app .exam-set-report-pagination button:focus-visible,
.bsc-quiz-app .exam-set-report-review-button:focus-visible {
    outline: none;
    box-shadow: var(--bsc-focus);
}

.bsc-quiz-app .exam-set-report-search {
    width: min(220px, 31%);
    min-height: 32px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #cfdadd;
    border-radius: 5px;
    background: #fff;
    color: #26333c;
    font-size: 0.68rem;
}

.bsc-quiz-app .exam-set-report-table-wrap {
    width: 100%;
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.bsc-quiz-app .exam-set-report-table {
    min-width: 0;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(1),
.bsc-quiz-app .exam-set-report-table td:nth-child(1) {
    width: 10%;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(2),
.bsc-quiz-app .exam-set-report-table td:nth-child(2) {
    width: 20%;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(3),
.bsc-quiz-app .exam-set-report-table td:nth-child(3) {
    width: 36%;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(4),
.bsc-quiz-app .exam-set-report-table td:nth-child(4) {
    width: 24%;
}

.bsc-quiz-app .exam-set-report-table th:nth-child(5),
.bsc-quiz-app .exam-set-report-table td:nth-child(5) {
    width: 10%;
}

.bsc-quiz-app .exam-set-report-result {
    align-items: flex-start;
    flex-wrap: wrap;
}

.bsc-quiz-app .exam-set-report-result > .exam-set-report-result-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: normal;
}

.bsc-quiz-app .exam-set-report-result-main > span {
    white-space: nowrap;
}

.bsc-quiz-app .exam-set-report-result-main > b {
    font-family: var(--bsc-mono);
    font-size: 0.9rem;
    font-weight: 900;
}

.bsc-quiz-app .exam-set-report-result-main > b.is-correct {
    color: #2aa245;
}

.bsc-quiz-app .exam-set-report-result-main > b.is-wrong {
    color: #ff4a56;
}

.bsc-quiz-app .exam-set-report-result-main > b.is-mixed {
    color: #c58a22;
}

.bsc-quiz-app .exam-set-report-result-main > b.is-unanswered {
    color: #9aa3aa;
}

.bsc-quiz-app .exam-set-report-review-button {
    width: auto;
    min-height: 25px;
    margin: 0;
    padding: 3px 7px;
    border: 1px solid #d88c91;
    border-radius: 4px;
    background: #fff7f7;
    color: #a33b43;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

.bsc-quiz-app .exam-set-report-review-button:hover {
    border-color: #b85058;
    background: #fff0f1;
}

.bsc-quiz-app .exam-set-report-pagination {
    display: flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 10px;
    border-top: 1px solid #dfe5e8;
    background: #fafcfc;
}

.bsc-quiz-app .exam-set-report-pagination[hidden] {
    display: none;
}

.bsc-quiz-app .exam-set-report-pagination button {
    width: auto;
    min-width: 58px;
    min-height: 29px;
    margin: 0;
    padding: 4px 9px;
    border: 1px solid #cfdbdf;
    border-radius: 5px;
    background: #fff;
    color: var(--bsc-brand-deep);
    font-size: 0.64rem;
    font-weight: 800;
    cursor: pointer;
}

.bsc-quiz-app .exam-set-report-pagination button:disabled {
    opacity: 0.42;
    cursor: default;
}

.bsc-quiz-app .exam-set-report-pagination span {
    min-width: 78px;
    color: #65747e;
    font-family: var(--bsc-mono);
    font-size: 0.63rem;
    text-align: center;
}

@media (max-width: 800px) {
    .bsc-quiz-app .exam-set-report-layout {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .bsc-quiz-app .exam-set-report-sidebar {
        max-height: min(52vh, 520px);
    }

    .bsc-quiz-app .exam-set-report-detail {
        height: auto;
        min-height: 520px;
    }

    .bsc-quiz-app .exam-set-report-table-wrap {
        max-height: min(70vh, 640px);
    }
}

@media (max-width: 640px) {
    .bsc-quiz-app .exam-set-report-detail-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .bsc-quiz-app .exam-set-report-search {
        width: 100%;
    }

    .bsc-quiz-app .exam-set-report-table,
    .bsc-quiz-app .exam-set-report-table tbody,
    .bsc-quiz-app .exam-set-report-table tr,
    .bsc-quiz-app .exam-set-report-table td {
        display: block;
        width: 100% !important;
    }

    .bsc-quiz-app .exam-set-report-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .bsc-quiz-app .exam-set-report-table tbody {
        padding: 8px;
    }

    .bsc-quiz-app .exam-set-report-table tr {
        margin-bottom: 8px;
        padding: 4px 8px;
        border: 1px solid #dfe6e9;
        border-radius: 7px;
        background: #fff;
    }

    .bsc-quiz-app .exam-set-report-table td {
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px solid #eef1f2;
        text-align: left !important;
    }

    .bsc-quiz-app .exam-set-report-table td:last-child {
        border-bottom: 0;
    }

    .bsc-quiz-app .exam-set-report-table td::before {
        content: attr(data-label);
        color: #7a8790;
        font-size: 0.61rem;
        font-weight: 800;
    }

    .bsc-quiz-app .exam-set-report-table td.exam-set-report-empty {
        display: block;
        padding: 20px 8px;
    }

    .bsc-quiz-app .exam-set-report-table td.exam-set-report-empty::before {
        content: none;
    }

    .bsc-quiz-app .exam-set-report-result {
        justify-content: flex-start;
    }
}

/* =========================================================
   In-quiz display options (1.18.0)
   選択肢シャッフル／解説先行表示だけを共通化する。
   ========================================================= */
.bsc-quiz-app .start-display-options {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid var(--bsc-border);
}

.bsc-quiz-app .start-display-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
}

.bsc-quiz-app .quiz-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bsc-quiz-app .quiz-options-button {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--bsc-border);
    border-radius: 999px;
    background: var(--bsc-surface);
    color: var(--bsc-text-muted);
    box-shadow: none;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
    cursor: pointer;
}

.bsc-quiz-app .quiz-options-button:hover,
.bsc-quiz-app .quiz-options-button:focus-visible,
.bsc-quiz-app .quiz-options-button.is-open {
    border-color: var(--bsc-brand);
    outline: none;
    background: var(--bsc-accent-soft);
    color: var(--bsc-brand-deep);
}

.bsc-quiz-app .quiz-options-button:focus-visible {
    box-shadow: var(--bsc-focus);
}

.bsc-quiz-app .live-quiz-options {
    margin: -3px 0 15px;
    padding: 13px 14px;
    border: 1px solid var(--bsc-border-strong);
    border-radius: 8px;
    background: var(--bsc-surface-muted);
}

.bsc-quiz-app .live-quiz-options[hidden],
.bsc-quiz-app .early-explanation[hidden] {
    display: none !important;
}

.bsc-quiz-app .live-quiz-options-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bsc-border);
}

.bsc-quiz-app .live-quiz-options-heading strong {
    color: var(--bsc-primary);
    font-size: 0.8rem;
    font-weight: 850;
}

.bsc-quiz-app .live-quiz-options-heading span {
    color: var(--bsc-text-muted);
    font-size: 0.66rem;
}

.bsc-quiz-app .live-quiz-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 20px;
}

.bsc-quiz-app .live-quiz-option {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
    color: var(--bsc-text-soft);
    font-size: 0.78rem;
    line-height: 1.55;
    cursor: pointer;
    user-select: none;
}

.bsc-quiz-app .live-quiz-option input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin: 2px 0 0;
    accent-color: var(--bsc-accent);
}

.bsc-quiz-app .live-quiz-option.is-disabled {
    color: var(--bsc-text-muted);
    cursor: not-allowed;
    opacity: 0.62;
}

.bsc-quiz-app .live-quiz-options-note {
    margin: 9px 0 0;
    color: var(--bsc-text-muted);
    font-size: 0.66rem;
    line-height: 1.5;
}

.bsc-quiz-app .early-explanation {
    margin: 18px 0 0;
    padding: 16px 18px;
    border: 1px solid #d7e3e5;
    border-left: 4px solid var(--bsc-brand);
    border-radius: 8px;
    background: #f5f9f9;
}

.bsc-quiz-app .early-explanation h3 {
    margin: 0 0 8px;
    color: var(--bsc-brand-deep);
    font-size: 0.9rem;
    font-weight: 850;
}

.bsc-quiz-app .early-explanation .explanation-text {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

@media (max-width: 640px) {
    .bsc-quiz-app .start-display-options-grid,
    .bsc-quiz-app .live-quiz-options-grid {
        grid-template-columns: 1fr;
    }

    .bsc-quiz-app .live-quiz-options-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .bsc-quiz-app .quiz-head-actions,
    .bsc-quiz-app .exam-question-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}