/* 効果測定 練習問題 */
#app-koukasokutei .ks-card {
    background: var(--bs-tertiary-bg);
    border-radius: .5rem;
}

/* 範囲3つ: スマホは縦積み・PC は3列（btn-group は使わない） */
#app-koukasokutei .ks-modes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
}
@media (min-width: 768px) {
    #app-koukasokutei .ks-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#app-koukasokutei .ks-modes .btn { font-weight: 700; white-space: nowrap; }
#app-koukasokutei .ks-modes small { font-weight: 400; font-size: .75rem; opacity: .85; }

#app-koukasokutei .ks-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}
#app-koukasokutei .ks-counts .btn { white-space: nowrap; font-weight: 700; padding-inline: .25rem; }

/* 出題 */
#app-koukasokutei .ks-timer { font-variant-numeric: tabular-nums; }
#app-koukasokutei .ks-timer-low { color: var(--bs-danger); }
#app-koukasokutei .ks-question {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem);
    line-height: 1.8;
    min-height: 5.4em;
    overflow-wrap: anywhere;
}
#app-koukasokutei .ks-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
#app-koukasokutei .ks-answers .btn { white-space: nowrap; }
#app-koukasokutei .ks-answers .btn:disabled { opacity: 1; }
#app-koukasokutei .ks-answers .btn:disabled:not(.ks-picked) { opacity: .45; }

#app-koukasokutei .ks-feedback {
    background: var(--bs-body-bg);
    border-left: 4px solid var(--bs-border-color);
    border-radius: .25rem;
}
#app-koukasokutei .ks-ok { color: var(--bs-success-text-emphasis); }
#app-koukasokutei .ks-ng { color: var(--bs-danger-text-emphasis); }
#app-koukasokutei .ks-ref blockquote {
    border-left: 3px solid var(--bs-border-color);
    padding-left: .5rem;
    font-size: .8rem;
}

/* 結果 */
#app-koukasokutei .ks-score { font-size: clamp(2.5rem, 12vw, 3.5rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
#app-koukasokutei .ks-cat-row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 5.5rem; /* 「100% 11/11」が入る幅（4.5rem では 4px はみ出した） */
    gap: .5rem;
    align-items: center;
    margin-bottom: .35rem;
    font-size: .875rem;
}
#app-koukasokutei .ks-cat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app-koukasokutei .ks-cat-bar {
    height: .6rem;
    background: var(--bs-secondary-bg);
    border-radius: .3rem;
    overflow: hidden;
}
#app-koukasokutei .ks-cat-bar span { display: block; height: 100%; background: var(--bs-primary); }
#app-koukasokutei .ks-cat-val { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
#app-koukasokutei .ks-wrong-list { padding-left: 1.25rem; }