/* 중학교 국어 · 대단원 평가 공용 스타일
   25개 대단원 평가가 이 한 파일을 공유한다. 소단원(차시) 페이지의 색·서체를 그대로 따른다.

   ⚠️ 판정 클래스 이름 규칙 (학습 기록 어댑터 wonedu-progress.js 와의 계약)
      선택(제출 전)  .sel            ← correct/right/wrong/ok 계열 금지. 제출 전에 오판이 전송된다.
      학생이 고른 것  .picked-right / .picked-wrong
      공개된 정답     .show-right
   ⚠️ 선택 표시 배경에 초록·빨강을 쓰지 않는다. '선택함'이 '정답'처럼 보인다. */

:root{
  --peach:#f4a0a0; --peach-light:#fce4ec; --peach-pale:#fff5f7;
  --blossom:#e91e63; --blossom-soft:#f06292;
  --leaf:#66bb6a; --leaf-dark:#2e7d32;
  --bark:#5d4037; --bark-light:#8d6e63;
  --gold:#f9a825; --err:#d32f2f;
  --text:#3e2723; --text-light:#6d4c41;
  --line:#f0dfe3; --white:#fffbfc;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans KR',sans-serif;background:var(--peach-pale);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}
.serif{font-family:'Noto Serif KR',serif}

/* ── 머리말 ─────────────────────────────────────────── */
.ev-hero{background:linear-gradient(135deg,#f8bbd0 0%,#f4a0a0 55%,#e57373 100%);color:#fff;padding:52px 24px 62px;text-align:center;position:relative;overflow:hidden}
.ev-hero .crumb{position:absolute;top:18px;left:24px;font-size:.82rem}
.ev-hero .crumb a{color:rgba(255,255,255,.92);text-decoration:none}
.ev-hero .crumb a:hover{text-decoration:underline}
.ev-hero .tag{display:inline-block;font-size:.74rem;letter-spacing:.28em;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);padding:5px 14px;border-radius:100px;margin-bottom:14px}
.ev-hero h1{font-family:'Noto Serif KR',serif;font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:900;line-height:1.25}
.ev-hero h1 .unit{display:block;font-size:.44em;font-weight:400;color:#fff3f5;letter-spacing:.06em;margin-bottom:8px}
.ev-hero .lead{margin:14px auto 0;max-width:620px;font-size:.98rem;color:#fff4f6;line-height:1.8}

/* ── 안내 ───────────────────────────────────────────── */
.ev-guide{max-width:860px;margin:-26px auto 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 26px;box-shadow:0 10px 30px rgba(233,30,99,.08);position:relative;z-index:3}
.ev-guide h2{font-family:'Noto Serif KR',serif;font-size:1.05rem;color:var(--blossom);margin-bottom:10px}
.ev-guide ul{list-style:none;display:grid;gap:7px}
.ev-guide li{font-size:.92rem;color:var(--text-light);padding-left:20px;position:relative}
.ev-guide li::before{content:'·';position:absolute;left:6px;color:var(--peach);font-weight:900}
.ev-stds{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ev-stds .std{font-size:.74rem;background:var(--peach-light);color:var(--blossom);border:1px solid #f8bbd0;border-radius:100px;padding:4px 12px;font-weight:700}

/* ── 진행률 ─────────────────────────────────────────── */
.ev-bar{position:sticky;top:0;z-index:20;background:rgba(255,245,247,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-top:26px}
.ev-bar-in{max-width:860px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:14px}
.ev-bar .lbl{font-size:.78rem;font-weight:700;color:var(--blossom);white-space:nowrap}
.ev-bar .track{flex:1;height:7px;background:var(--peach-light);border-radius:100px;overflow:hidden}
.ev-bar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--blossom-soft),var(--blossom));border-radius:100px;transition:width .4s ease}
.ev-bar .cnt{font-size:.8rem;font-weight:700;color:var(--text-light);white-space:nowrap}

/* ── 문항 ───────────────────────────────────────────── */
main{max-width:860px;margin:0 auto;padding:30px 24px 60px}
.ev-part{display:flex;align-items:center;gap:12px;margin:34px 0 16px}
.ev-part .no{width:34px;height:34px;border-radius:10px;background:var(--blossom);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;flex-shrink:0}
.ev-part h2{font-family:'Noto Serif KR',serif;font-size:1.2rem;font-weight:900}
.ev-part span{font-size:.82rem;color:var(--bark-light);font-weight:400}

.ev-q{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin-bottom:16px;transition:border-color .25s}
.ev-q.graded{border-color:#e8cdd4}
.ev-q-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ev-q-num{font-family:'Noto Serif KR',serif;font-weight:900;font-size:.86rem;color:var(--blossom);background:var(--peach-light);border-radius:6px;padding:3px 10px}
.ev-q-std{font-size:.7rem;color:var(--bark-light);letter-spacing:.06em;border:1px solid var(--line);border-radius:100px;padding:2px 9px}
.ev-q-type{font-size:.7rem;color:var(--gold);font-weight:700;letter-spacing:.08em}
.ev-q-text{font-family:'Noto Serif KR',serif;font-size:1.02rem;font-weight:700;line-height:1.75;margin-bottom:14px}
.ev-q-text em{font-style:normal;color:var(--blossom)}
.ev-quote{background:var(--peach-pale);border-left:3px solid var(--peach);border-radius:0 8px 8px 0;padding:12px 16px;margin:0 0 14px;font-family:'Noto Serif KR',serif;font-size:.95rem;line-height:1.9;color:var(--text-light);white-space:pre-line}

/* 보기 */
.ev-opts{display:grid;gap:8px}
.ev-opts.two{grid-template-columns:1fr 1fr}
.ev-opt{width:100%;text-align:left;background:#fff;border:1.6px solid var(--line);border-radius:10px;padding:12px 16px;font-family:inherit;font-size:.94rem;color:var(--text);cursor:pointer;transition:all .18s;line-height:1.6}
.ev-opt:hover:not(:disabled){border-color:var(--peach);background:var(--peach-pale)}
/* 선택(제출 전) — 중립색 + 왼쪽 막대. 초록·빨강을 쓰지 않는다 */
.ev-opt.sel{border-color:var(--bark-light);background:#f7f2f0;font-weight:700;box-shadow:inset 4px 0 0 var(--bark)}
/* 채점 후 */
.ev-opt.picked-right,.ev-opt.show-right{border-color:var(--leaf);background:#eef8ee;color:var(--leaf-dark);font-weight:700}
.ev-opt.picked-wrong{border-color:var(--err);background:#fdeeee;color:var(--err)}
.ev-opt.show-right::after{content:' ✓ 정답';font-size:.8em;font-weight:900;color:var(--leaf-dark)}
.ev-q.graded .ev-opt{pointer-events:none}

/* 분류 문항 */
.ev-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;padding:12px;background:var(--peach-pale);border:1px dashed var(--line);border-radius:10px;min-height:56px}
.ev-chip{background:#fff;border:1.6px solid var(--line);border-radius:100px;padding:7px 14px;font-size:.88rem;font-family:inherit;color:var(--text);cursor:pointer;transition:all .18s}
.ev-chip:hover{border-color:var(--peach)}
.ev-chip.sel{border-color:var(--bark);background:#f7f2f0;font-weight:700;transform:translateY(-2px)}
.ev-chip.chip-right{border-color:var(--leaf);background:#eef8ee;color:var(--leaf-dark);font-weight:700}
.ev-chip.chip-wrong{border-color:var(--err);background:#fdeeee;color:var(--err)}
.ev-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ev-bin{border:1.6px dashed var(--line);border-radius:10px;padding:10px;background:#fff;transition:all .18s}
.ev-bin.ready{border-style:solid;border-color:var(--peach);background:var(--peach-pale);cursor:pointer}
.ev-bin .bin-name{font-size:.82rem;font-weight:700;color:var(--blossom);text-align:center;margin-bottom:8px}
.ev-bin .bin-items{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:38px}
.ev-q.graded .ev-chip,.ev-q.graded .ev-bin{pointer-events:none}

/* 해설 — 제출 전에는 보이지 않는다 */
.ev-exp{display:none;margin-top:14px;padding:14px 16px;background:#fffdf5;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.8;color:var(--text-light)}
.ev-exp.on{display:block}
.ev-exp b{color:var(--bark)}
.ev-exp .verdict{font-weight:900;margin-right:6px}
.ev-exp.good .verdict{color:var(--leaf-dark)}
.ev-exp.bad .verdict{color:var(--err)}

/* ── 제출 ───────────────────────────────────────────── */
.ev-submit{text-align:center;margin-top:34px}
.ev-btn{font-family:'Noto Serif KR',serif;font-weight:900;font-size:1.02rem;letter-spacing:.04em;color:#fff;background:var(--blossom);border:2px solid var(--blossom);border-radius:12px;padding:15px 40px;cursor:pointer;transition:all .2s;box-shadow:0 8px 22px rgba(233,30,99,.22)}
.ev-btn:hover{background:var(--blossom-soft);border-color:var(--blossom-soft)}
.ev-btn.ghost{background:#fff;color:var(--blossom);box-shadow:none;margin-left:8px}
.ev-note{margin-top:11px;font-size:.85rem;color:var(--bark-light)}

/* ── 결과 ───────────────────────────────────────────── */
.ev-result{display:none;margin-top:36px}
.ev-result.on{display:block}
.ev-score{background:linear-gradient(135deg,#f8bbd0,#e57373);color:#fff;border-radius:16px;padding:34px 26px;text-align:center;box-shadow:0 12px 30px rgba(233,30,99,.2)}
.ev-score .emoji{font-size:3rem;line-height:1}
.ev-score h3{font-family:'Noto Serif KR',serif;font-size:1.5rem;font-weight:900;margin:8px 0 4px}
.ev-score .num{font-size:1.7rem;font-weight:900;margin-bottom:8px}
.ev-score .grade{display:inline-block;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.4);border-radius:100px;padding:4px 16px;font-size:.86rem;font-weight:700}
.ev-score .msg{margin-top:12px;font-size:.94rem;color:#fff4f6;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.8}
.ev-std-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 26px;margin-top:16px}
.ev-std-box h4{font-family:'Noto Serif KR',serif;font-size:1.02rem;margin-bottom:14px}
.ev-std-row{margin-bottom:14px}
.ev-std-row:last-child{margin-bottom:0}
.ev-std-row .top{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;margin-bottom:6px}
.ev-std-row .nm{font-weight:700}
.ev-std-row .cnt{font-weight:900;color:var(--blossom)}
.ev-std-row .track{height:9px;background:var(--peach-light);border-radius:100px;overflow:hidden}
.ev-std-row .fill{height:100%;background:var(--blossom-soft);border-radius:100px;transition:width .9s ease}
.ev-std-row.weak .fill{background:var(--err)}
.ev-std-row.weak .cnt{color:var(--err)}
.ev-review{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 26px}
.ev-review h4{font-family:'Noto Serif KR',serif;font-size:1rem;margin-bottom:10px}
.ev-review a{display:inline-flex;align-items:center;gap:6px;background:var(--peach-light);color:var(--blossom);border:1px solid #f8bbd0;border-radius:100px;padding:7px 16px;font-size:.86rem;font-weight:700;text-decoration:none;margin:4px 6px 0 0}
.ev-review a:hover{background:var(--peach);color:#fff}
.ev-review .allgood{font-size:.92rem;color:var(--leaf-dark);font-weight:700}

/* ── 아래 이동 ──────────────────────────────────────── */
.ev-nav{max-width:860px;margin:0 auto;padding:0 24px 60px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ev-nav a{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 20px;text-decoration:none;color:var(--text);font-size:.9rem;font-weight:700;transition:all .2s}
.ev-nav a:hover{border-color:var(--peach);color:var(--blossom)}
footer{text-align:center;padding:30px 24px 50px;color:var(--bark-light);font-size:.84rem;border-top:1px solid var(--line)}
footer .brand{font-family:'Noto Serif KR',serif;font-weight:900;color:var(--text);letter-spacing:.3em;margin-bottom:6px}

@media (max-width:640px){
  .ev-opts.two{grid-template-columns:1fr}
  .ev-hero{padding:60px 20px 62px}
  .ev-guide{margin-left:16px;margin-right:16px}
}