/* 決まり字を覚える: Bootstrap で賄えない部分だけ（札の格子・決まり字の強調・進み具合の色）。
   段組みは karuta.css の karuta-body / karuta-scroll（ページ全体は縦に 1 列、中身だけスクロール）。 */

.study-wrap { max-width: 1100px; }
.min-w-0 { min-width: 0; }
.study-tabs .nav-link { white-space: nowrap; color: #f8f9fa; }
.study-tabs .nav-link.active { color: var(--bs-body-color); }
.kimariji { color: #dc3545; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.study-dropped { color: var(--bs-tertiary-color); }

/* ---------- 一覧 ---------- */
.study-entries { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.study-entry { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; min-width: 0; }
.study-entry:hover { background: var(--bs-tertiary-bg); }
.study-entry-tori { width: 40px; aspect-ratio: 200 / 280; flex: 0 0 auto; border-radius: 3px; }
.study-entry-text { flex: 1 1 auto; min-width: 0; }
.study-entry-kana { display: block; font-size: .95rem; line-height: 1.3; }
.study-len-1 { background: #dc3545; }
.study-len-2 { background: #fd7e14; }
.study-len-3 { background: #b58900; }
.study-len-4 { background: #198754; }
.study-len-5 { background: #0d6efd; }
.study-len-6 { background: #6f42c1; }

/* ---------- 詳細 ---------- */
.study-detail-art { height: min(40vh, 240px); aspect-ratio: 250 / 390; border-radius: .4rem; flex: 0 0 auto; }
.study-detail-tori { height: min(30vh, 170px); aspect-ratio: 200 / 280; flex: 0 0 auto; }
.study-detail-kana { font-size: 1.1rem; line-height: 1.5; }
.study-fam-chip { background: var(--bs-secondary-bg); color: var(--bs-body-color); font-size: .85rem; font-weight: 400; }
.study-fam-chip.is-self { outline: 2px solid #dc3545; }

/* ---------- クイズ ---------- */
.study-prompt-text { font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: .05em; font-weight: 700; word-break: break-all; }
.study-hidden { color: var(--bs-tertiary-color); letter-spacing: .15em; }
.study-prompt-tori { height: clamp(110px, 26vh, 190px); aspect-ratio: 200 / 280; }
.study-choices { display: grid; gap: 8px; }
.study-choices-tori { grid-template-columns: repeat(auto-fill, minmax(76px, 112px)); justify-content: center; }
.study-choices-text { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.study-choice { position: relative; }
.study-choices-tori .study-choice { width: 100%; }
.study-choices-text .study-choice { text-align: start; font-weight: 600; }
.study-key { font-size: .7rem; opacity: .6; font-weight: 400; }
.study-choices-tori .study-key { position: absolute; left: 4px; top: 2px; opacity: .8; color: #1e1e1e; }
.study-choice.is-correct { box-shadow: 0 0 0 4px #198754; }
.study-choice.is-wrong { box-shadow: 0 0 0 4px #dc3545; }
.study-choices-text .study-choice.is-correct { background: #d1e7dd; color: #0f5132; opacity: 1; }
.study-choices-text .study-choice.is-wrong { background: #f8d7da; color: #842029; opacity: 1; }
.study-choices-tori .study-choice:disabled { opacity: 1; cursor: default; }
.study-choices-tori .study-choice:disabled:not(.is-correct):not(.is-wrong) { opacity: .45; }
#quizTimerBar { height: 6px; }
.study-fb-tori { width: 54px; aspect-ratio: 200 / 280; flex: 0 0 auto; align-self: flex-start; }
.study-fb-kana { font-size: 1rem; }

/* ---------- 進み具合 ---------- */
.study-heat { display: grid; gap: 3px; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
.study-heat-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.study-cell {
    border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px; padding: 1px 0; line-height: 1.1;
    display: flex; flex-direction: column; align-items: center; min-width: 0; overflow: hidden;
}
.study-cell span { font-weight: 700; font-size: .8rem; }
.study-cell small { font-size: .62rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.study-legend { padding: 0 6px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12); }
.study-box-0 { background: #f1f3f5; color: #6c757d; }
.study-box-1 { background: #dc3545; color: #fff; }
.study-box-2 { background: #fd7e14; color: #fff; }
.study-box-3 { background: #ffe08a; color: #333; }
.study-box-4 { background: #a3d9a5; color: #1b4d2b; }
.study-box-5 { background: #198754; color: #fff; }

/* ---------- 決まり字の変化 ---------- */
.study-dyn-row { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; border-bottom: 1px dashed var(--bs-border-color); }
.study-dyn-label { flex: 0 0 1.6em; font-weight: 700; text-align: center; padding-top: .2rem; }
.study-dyn-row > div { min-width: 0; }
.study-chip { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); padding: 1px 6px; }
.study-chip .kimariji { text-decoration: none; }
.study-chip.is-read { background: var(--bs-secondary-bg); color: var(--bs-tertiary-color); }
.study-chip.is-changed { border-color: #ffc107; background: #fff3cd; box-shadow: 0 0 0 1px #ffc107; }
.study-dyn-change { cursor: pointer; }

/* ---------- 横向きのスマホ（高さが低い） ---------- */
@media (max-height: 500px) {
    .study-tabs .nav-link { padding: .3rem .6rem; }
    .study-prompt-tori { height: 34vh; }
    .study-choices-tori { grid-template-columns: repeat(auto-fill, minmax(64px, 86px)); gap: 6px; }
    .study-detail-art { height: 55vh; }
    .study-detail-tori { height: 38vh; }
}

/* ---------- 縦向きのスマホ ---------- */
@media (max-width: 575.98px) {
    .study-detail { flex-wrap: wrap; }
    .study-detail-art { height: 180px; }
    .study-detail-tori { height: 130px; }
    .study-heat-10 .study-cell small { display: none; }
}