/* 英検2級 スコア詳細（共用）
 * assets/grade2/eiken-grade2-score-detail.js のスタイル。
 * プレイ画面のリザルト（grade2-shortcode.php）と /v2/grade2/speaking/ の履歴モーダル
 * （grade2-list-shortcode.php）の両方でこの1ファイルを読み込む。
 */

/* ── モーダルのオーバーレイ枠（履歴モーダルのみ使用。リザルト画面では未使用） ── */
.g2sm-overlay { display:none; position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,0.5); align-items:flex-start; justify-content:center; padding:24px 12px; overflow-y:auto; }
.g2sm-overlay.open { display:flex; }
.g2sm-box { position:relative; background:#fff; border-radius:14px; width:100%; max-width:720px; box-shadow:0 20px 60px rgba(0,0,0,0.35); padding:22px; }
.g2sm-close { position:absolute; top:10px; right:14px; background:none; border:none; font-size:26px; line-height:1; color:#888; cursor:pointer; }
.g2sm-title { font-size:17px; font-weight:bold; color:#1f2937; padding-right:28px; margin-bottom:4px; }
.g2sm-date { font-size:12px; color:#888; margin-bottom:14px; }

/* ── 概要（音読/Q&A/アティ/合計） ── */
.g2sm-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.g2sm-summary > div { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:8px 4px; text-align:center; }
.g2sm-summary .lbl { font-size:11px; color:#15803d; background:transparent; }
.g2sm-summary .val { font-size:18px; font-weight:bold; color:#15803d; background:transparent; }
.g2sm-summary > .g2sm-sum-total { background:#16a34a; border-color:#15803d; }
.g2sm-summary .g2sm-sum-total .lbl { color:#fff; font-weight:700; }
.g2sm-summary .g2sm-sum-total .val { color:#fff; font-size:21px; }

/* ── フェーズカード（折りたたみ） ── */
.g2sm-phase { border:1px solid #e5e7eb; border-radius:10px; margin-bottom:12px; overflow:hidden; }
.g2sm-phase > h4 { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0; padding:9px 14px; background:#16a34a; color:#fff; font-size:14px; }
.g2sm-phase > h4 .sc { font-weight:bold; }
.g2sm-phase-h4 { cursor:pointer; user-select:none; }
.g2sm-phase-title { display:flex; align-items:center; gap:8px; min-width:0; }
.g2sm-phase-arrow { font-size:10px; flex-shrink:0; transition:transform .15s; }
.g2sm-phase:not(.is-collapsed) .g2sm-phase-arrow { transform:rotate(90deg); }
.g2sm-phase.is-collapsed > .g2sm-phase-body { display:none; }
.g2sm-phase:not(.is-collapsed) > .g2sm-phase-cards { display:none; }
.g2sm-phase-cards { padding:12px 14px; }
.g2sm-phase-cards .g2sm-ra-stats { margin-top:0; }
.g2sm-phase-more { display:block; width:100%; margin-top:12px; padding:8px; background:#fff; border:1px solid #16a34a; border-radius:8px; color:#15803d; font-size:12.5px; font-weight:700; cursor:pointer; }
.g2sm-phase-more:hover { background:#dcfce7; }
.g2sm-h4-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.g2sm-model-btn { background:#fff; color:#16a34a; border:none; border-radius:5px; padding:3px 10px; font-size:11.5px; font-weight:bold; cursor:pointer; white-space:nowrap; }
.g2sm-model-btn:hover { background:#e6f9ee; }
.g2sm-model-btn-sm { display:inline-block; margin-top:8px; background:#16a34a; color:#fff; border:1px solid #15803d; }
.g2sm-model-btn-sm:hover { background:#15803d; }
.g2sm-model-pop { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; margin-top:10px; padding:10px 14px; font-size:12.5px; color:#166534; line-height:1.65; }
.g2sm-model-pop b { color:#0066cc; }
.g2sm-phase-body { padding:12px 14px; font-size:13px; color:#333; line-height:1.6; }
.g2sm-q { background:#fff3f3; border-left:3px solid #ef4444; padding:7px 11px; border-radius:0 6px 6px 0; margin-bottom:8px; font-size:12.5px; text-align:center; white-space:pre-line; }
.g2sm-model { background:#f0f7ff; border-left:3px solid #0066cc; padding:7px 11px; border-radius:0 6px 6px 0; margin-bottom:8px; font-size:12.5px; }
.g2sm-model-opening { font-weight:700; }
.g2sm-metrics { color:#555; font-size:12px; margin:6px 0; }
.g2sm-metrics b { color:#111; }
.g2sm-tr { background:#f9fafb; border-radius:6px; padding:8px 10px; margin:6px 0; font-size:12.5px; color:#374151; }
.g2sm-words { line-height:2; margin:6px 0; }
.g2sm-words span { padding:0 1px; }
.g2sm-w-match { color:#111; }
.g2sm-w-bad { color:#dc3545; font-weight:bold; text-decoration:line-through; }
.g2sm-w-pause-good::after { content:' / '; color:#0066cc; font-weight:bold; }
.g2sm-w-pause-bad::after { content:' / '; color:#dc3545; font-weight:bold; }
.g2sm-comic { display:block; width:100%; max-width:100%; height:auto; border:1px solid #e5e7eb; border-radius:8px; margin:0 0 10px; }
.g2sm-audio { width:100%; height:34px; margin-top:6px; }
.g2sm-sub { margin:8px 0 4px; padding-left:8px; border-left:2px solid #d1d5db; }
.g2sm-sub h5 { margin:0 0 4px; font-size:12.5px; color:#0066cc; }
.g2sm-note { color:#666; font-size:12.5px; }
.g2sm-reason { color:#15803d; font-size:12.5px; font-weight:600; line-height:1.6; margin:6px 0; }
.g2sm-speechbar { font-size:12px; color:#555; background:#f0f8ff; border-left:3px solid #2196F3; border-radius:0 6px 6px 0; padding:6px 10px; margin:6px 0; line-height:1.7; }
.g2sm-box-title { display:block; text-align:center; font-weight:700; font-size:12px; color:#0066cc; margin-bottom:6px; }
.g2sm-box-eyebrow { display:block; text-align:center; font-size:10px; font-weight:700; letter-spacing:.08em; color:#9ca3af; margin-bottom:2px; }
.g2sm-words-wrap { margin:8px 0 0; }
.g2sm-ra-legend { margin-top:4px; font-size:11px; font-weight:700; line-height:1.7; color:#666; }
.g2sm-nar-head { text-align:center; font-size:15px; font-weight:700; color:#166534; margin:2px 0 7px; }
.g2sm-nar-cardrow { margin-bottom:12px; }
.g2sm-nar-cardrow:last-child { margin-bottom:0; }

/* ── スコアカード ── */
.g2sm-ra-stats { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.g2sm-ra-stat { flex:1 1 110px; display:flex; flex-direction:column; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:7px 10px; text-align:center; cursor:pointer; transition:background .12s, border-color .12s; }
.g2sm-ra-stat .g2sm-ra-stat-val { margin-top:auto; }
.g2sm-ra-stat:hover { background:#eff6ff; border-color:#bfdbfe; }
.g2sm-ra-stat-label { font-size:11px; color:#6b7280; font-weight:600; margin-bottom:2px; }
.g2sm-ra-stat-i { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:50%; background:#d1d5db; color:#fff; font-size:9px; font-weight:700; vertical-align:middle; }
.g2sm-ra-stat:hover .g2sm-ra-stat-i { background:#3b82f6; }
.g2sm-ra-stat-val { font-size:14px; font-weight:700; color:#0066cc; }
.g2sm-ra-stat-val > span { font-size:11px; font-weight:600; color:#6b7280; margin-left:2px; white-space:nowrap; }
.g2sm-ra-stat-val .g2sm-ra-num { color:#0066cc; font-weight:700; margin-left:0; }
.g2sm-ra-stat-total { background:#dcfce7; border-color:#bbf7d0; }
.g2sm-ra-stat-perfect { background:#fffdf3; border-color:#eadfb0; }
.g2sm-ra-stat-perfect .g2sm-ra-stat-val { font-size:17px; color:#a87900; font-weight:800; }
.g2sm-gold { color:#a87900; background:linear-gradient(135deg,#a87900,#d4af37 50%,#a87900); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:800; }
.g2sm-perfect-none { color:#9ca3af; }

/* ── 採点ルール／日本語訳の吹き出し ── */
.g2sm-float-tip { position:fixed; z-index:100002; width:230px; max-width:calc(100vw - 24px); background:#fff; color:#1f2937; border:1px solid #d1d5db; border-radius:9px; box-shadow:0 12px 32px rgba(0,0,0,0.2); padding:10px 12px; font-size:11.5px; line-height:1.5; }
.g2sm-float-tip .ttl { font-weight:700; color:#15803d; margin-bottom:5px; font-size:12px; }
.g2sm-float-tip table { width:100%; border-collapse:collapse; }
.g2sm-float-tip td { border:1px solid #e5e7eb; padding:4px 7px; }
.g2sm-float-tip td:first-child { background:#dcfce7; color:#166534; font-weight:700; width:46px; text-align:center; white-space:nowrap; }
.g2sm-float-tip .note { font-size:11.5px; color:#374151; line-height:1.6; }
.g2sm-float-tip.is-wide { width:300px; }
.g2sm-float-tip .ja { white-space:pre-wrap; font-size:12px; color:#1f2937; line-height:1.7; text-align:left; }
.g2sm-ja-i { display:inline-block; padding:1px 6px; border-radius:4px; background:#e5e7eb; color:#374151; font-size:10px; font-weight:700; line-height:1.5; cursor:pointer; vertical-align:middle; white-space:nowrap; }
.g2sm-ja-i:hover { background:#dbeafe; color:#1d4ed8; }

/* ── アティチュード採点表 ── */
.g2sm-mini-table { width:100%; border-collapse:collapse; margin:2px 0 10px; font-size:12.5px; }
.g2sm-mini-table th, .g2sm-mini-table td { border:1px solid #e5e7eb; padding:6px 8px; text-align:center; }
.g2sm-mini-table thead th { background:#dcfce7; color:#166534; font-weight:700; }
.g2sm-mini-table tbody th { background:#f9fafb; color:#374151; font-weight:600; text-align:left; white-space:nowrap; }
.g2sm-mini-table tbody td { color:#1f2937; font-weight:600; }

@media (max-width:560px) {
    .g2sm-box { padding:16px; }
    .g2sm-summary { grid-template-columns:repeat(3,1fr); }
    .g2sm-summary > .g2sm-sum-total { grid-column:1 / -1; order:-1; }
    .g2sm-ra-stats { flex-wrap:nowrap; gap:5px; }
    .g2sm-ra-stat { flex:1 1 0; min-width:0; padding:6px 2px; }
    .g2sm-ra-stat-label { font-size:10px; }
    .g2sm-ra-stat-val { font-size:12px; }
    .g2sm-ra-stat-val > span { display:block; margin-left:0; margin-top:1px; white-space:nowrap; font-size:9px; letter-spacing:-0.02em; }
    .g2sm-ra-stats.is-4 { flex-wrap:nowrap; gap:4px; }
    .g2sm-ra-stats.is-4 .g2sm-ra-stat { flex:1 1 0; min-width:0; padding:6px 1px; }
    .g2sm-ra-stats.is-4 .g2sm-ra-stat-label { font-size:9px; }
    .g2sm-ra-stats.is-4 .g2sm-ra-stat-val { font-size:11px; }
    .g2sm-ra-stats.is-4 .g2sm-ra-stat-val > span { font-size:8px; }
    .g2sm-ra-stats.is-4 .g2sm-ra-stat-i { width:11px; height:11px; font-size:8px; }
}