/* 例文クイズ (study/sentence/) の画面固有スタイル。共通部品は study_app.css */

/* ---------- トップ (レベル選択) ---------- */
.sq-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.sq-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--sa-blue);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sq-hero-icon .material-symbols-outlined { font-size: 42px; }
.sq-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.sq-bands { display: grid; gap: 14px; }
.sq-band {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 2px solid var(--sa-line);
    border-radius: var(--sa-radius);
    background: #fff;
}
.sq-band.is-locked { opacity: .6; }
.sq-band-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.sq-band-icon .material-symbols-outlined { font-size: 30px; }
.sq-band-icon.c-green { background: var(--sa-green); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.sq-band-icon.c-blue { background: var(--sa-blue); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.sq-band-icon.c-orange { background: var(--sa-orange); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.sq-band-icon.c-purple { background: var(--sa-purple); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.sq-band-body { flex: 1; min-width: 0; }
.sq-band-name { font-size: 18px; font-weight: 900; }
.sq-band-desc { font-size: 14px; color: var(--sa-muted); margin-top: 2px; }
.sq-band-count { font-size: 12px; font-weight: 800; color: #afafaf; margin-top: 4px; }

/* ---------- 出題画面 ---------- */
.sq-loading { text-align: center; padding: 80px 0; color: #afafaf; }
.sq-spin { font-size: 48px; animation: sq-spin 1s linear infinite; }
@keyframes sq-spin { to { transform: rotate(360deg); } }
.sq-title { font-size: 24px; font-weight: 900; margin: 8px 0 24px; }
.sq-sentence {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.9;
    margin-bottom: 16px;
}
.sq-blank {
    display: inline-block;
    min-width: 96px;
    border-bottom: 3px solid var(--sa-blue);
    margin: 0 6px;
}
.sq-hint {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--sa-soft);
    color: var(--sa-muted);
    font-size: 15px;
    margin-bottom: 24px;
}
.sq-hint-label {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 900;
    color: var(--sa-blue-dark);
    text-transform: uppercase;
}
.sq-bubble { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.sq-bubble-icon {
    font-size: 40px;
    color: var(--sa-green);
    flex-shrink: 0;
}
.sq-bubble-text {
    position: relative;
    padding: 14px 18px;
    border: 2px solid var(--sa-line);
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}
.sq-bubble-text.is-vi { font-size: 21px; }
.sq-answer-line.is-correct .sa-chip { border-color: #9cc59e; color: var(--sa-green-dark); }
.sq-answer-line.is-wrong .sa-chip { border-color: #efb8b5; color: var(--sa-red-dark); }

/* ---------- 結果 ---------- */
.sq-result { text-align: center; padding-top: 32px; }
.sq-result-badge {
    width: 112px;
    height: 112px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.sq-result-badge .material-symbols-outlined { font-size: 64px; font-variation-settings: 'FILL' 1; }
.sq-result-badge.is-gold { background: var(--sa-yellow); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.sq-result-badge.is-green { background: var(--sa-green); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.sq-result-badge.is-blue { background: var(--sa-blue); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.sq-result-msg { font-size: 17px; color: var(--sa-muted); margin: 0 0 28px; }
.sq-result-stats { display: flex; justify-content: center; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.sq-stat {
    min-width: 150px;
    border: 2px solid var(--sa-yellow);
    border-radius: 16px;
    overflow: hidden;
}
.sq-stat-label { background: var(--sa-yellow); color: #fff; font-size: 13px; font-weight: 900; padding: 6px 0; letter-spacing: .08em; }
.sq-stat-value { font-size: 22px; font-weight: 900; padding: 14px 8px; color: #a3772c; }
.sq-stat.is-blue { border-color: var(--sa-blue); }
.sq-stat.is-blue .sq-stat-label { background: var(--sa-blue); }
.sq-stat.is-blue .sq-stat-value { color: var(--sa-blue-dark); }
.sq-result-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.sq-result-actions .sa-btn { min-width: 180px; }
.sq-message { text-align: center; padding: 60px 0; }
.sq-message p { font-size: 17px; margin-bottom: 20px; }

@media (max-width: 700px) {
    .sq-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sq-hero-icon { width: 56px; height: 56px; }
    .sq-hero-icon .material-symbols-outlined { font-size: 32px; }
    .sq-title { font-size: 20px; }
    .sq-sentence { font-size: 20px; }
    .sq-band { padding: 14px; gap: 12px; }
    .sq-band-icon { width: 46px; height: 46px; }
}

/* 結果カード: 色付きの見出し帯はやめ、落ち着いたカードにする (2026-09-27 デザイン調整) */
.sq-stat, .sq-stat.is-blue { border: 2px solid var(--sa-line); background: #fafbfa; }
.sq-stat .sq-stat-label, .sq-stat.is-blue .sq-stat-label { background: none; color: var(--sa-muted); font-size: 12px; font-weight: 700; letter-spacing: 0; padding: 12px 8px 0; }
.sq-stat .sq-stat-value { color: var(--sa-brand); padding: 4px 8px 14px; }
.sq-stat.is-blue .sq-stat-value { color: var(--sa-blue-dark); }

/* 未ログイン時の結果画面の会員登録案内 */
.sq-guest { max-width: 480px; margin: 32px auto 0; padding: 20px 24px; border-radius: 16px; background: var(--sa-soft); }
.sq-guest p { margin: 0 0 14px; color: #555; font-size: 14px; line-height: 1.8; }