/* assets/css/practice.css (SV152)
 * 학습 모드/미니퀴즈/오답노트/연습문제 열람(SEO) 공통 스타일
 * 실전 모의고사(exam.css)의 문제·보기 스타일을 그대로 재사용하고,
 * 여기서는 이 화면들에만 필요한 레이아웃만 추가한다.
 */

.fw-practice { padding-top: 24px; padding-bottom: 40px; max-width: 760px; }

.fw-practice-head { margin-bottom: 20px; }
.fw-practice-head h1 { margin: 0 0 6px; font-size: 22px; }
.fw-practice-head p { margin: 4px 0; color: var(--fw-text-sub); font-size: 14px; }

.fw-practice-card {
    background: #fff; border: 1px solid var(--fw-border-light); border-radius: var(--fw-radius);
    padding: 20px; margin-bottom: 18px;
}

.fw-practice-result-badge { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.fw-practice-result.is-correct { border-color: var(--fw-success); background: #f0fdf4; }
.fw-practice-result.is-wrong { border-color: var(--fw-danger); background: #fef2f2; }

.fw-practice-subject-head { margin: 22px 0 10px; font-size: 16px; }

.fw-practice-question-list { padding-left: 22px; }
.fw-practice-question-list li { margin-bottom: 10px; line-height: 1.5; }
.fw-practice-question-list a { color: var(--fw-text); }
.fw-practice-question-list a:hover { color: var(--fw-blue); }

.fw-practice-choices-plain li { padding: 5px 0; color: var(--fw-text-sub); }

.fw-practice-answer-toggle {
    margin-top: 12px; border-top: 1px dashed var(--fw-border-light); padding-top: 10px;
}
.fw-practice-answer-toggle summary {
    cursor: pointer; font-weight: 600; color: var(--fw-blue); font-size: 14px;
}
.fw-practice-answer-line { margin: 10px 0 4px; }

.fw-practice-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* SV153: 학습모드 허브(exam/study.php) 전용 스타일 */
.fw-study-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 18px 0; }
.fw-study-stat-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 16px 10px; background: #fff; border: 1px solid var(--fw-border-light); border-radius: var(--fw-radius);
    text-align: center;
}
.fw-study-stat-tile-link { color: inherit; }
.fw-study-stat-tile-link:hover { border-color: var(--fw-blue); background: #f8fafc; }
.fw-study-stat-value { font-size: 22px; font-weight: 700; }
.fw-study-stat-label { font-size: 12.5px; color: var(--fw-text-sub); }

.fw-study-subject-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.fw-study-subject-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 0; border-bottom: 1px solid var(--fw-border-light);
}
.fw-study-subject-row:last-child { border-bottom: none; }
.fw-study-subject-name { flex: 1; font-size: 14px; min-width: 90px; }
.fw-study-subject-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.fw-btn-disabled { opacity: .5; cursor: default; pointer-events: none; }