/* 초등 저학년용: 큰 글씨, 큰 버튼, 고명도 파스텔 */
:root {
  --bg: #fffaf2;
  --card: #ffffff;
  --ink: #33323d;
  --accent: #ff7a59;
  --accent2: #4aa8ff;
  --good: #2fa463;
  --bad: #e0484f;
  --radius: 18px;
}
* { box-sizing: border-box; }
html { font-size: 22px; }          /* 저학년 눈높이 기본 글씨 */
body {
  margin: 0;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}
.topbar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; justify-content: space-between;
  padding: .8rem 1.2rem;
  background: #ffffffcc;
  border-bottom: 3px solid #ffd9c7;
  position: sticky; top: 0; backdrop-filter: blur(4px);
}
.brand { font-weight: 800; font-size: 1.2rem; }
.topbar .who { font-size: .95rem; }
.topbar nav a { margin-left: 1rem; text-decoration: none; font-weight: 700; color: var(--accent2); }
main { max-width: 760px; margin: 1.5rem auto 4rem; padding: 0 1rem; }
.card {
  background: var(--card);
  border: 3px solid #ffe1d1;
  border-radius: var(--radius);
  padding: 1.4rem;
  margin-bottom: 1.2rem;
}
h1 { font-size: 1.5rem; margin: 0 0 .8rem; }
h2 { font-size: 1.2rem; margin: .4rem 0; }
.bigbtn {
  display: block; width: 100%;
  padding: 1rem 1.4rem; margin: .7rem 0;
  font-size: 1.25rem; font-weight: 800;
  border: 4px solid var(--accent);
  border-radius: var(--radius);
  background: #fff; color: var(--accent);
  cursor: pointer; text-align: center; text-decoration: none;
}
.bigbtn:hover { background: #fff1ea; }
.bigbtn.blue { border-color: var(--accent2); color: var(--accent2); }
.bigbtn.blue:hover { background: #edf6ff; }
.bigbtn.green { border-color: var(--good); color: var(--good); }
.bigbtn.red { border-color: var(--bad); color: var(--bad); }
input, select, textarea {
  width: 100%;
  font-size: 1.15rem;
  padding: .8rem;
  border: 3px solid #e8d9cc;
  border-radius: 12px;
  background: #fff;
}
label { display: block; margin: .8rem 0 .2rem; font-weight: 700; }
.question { font-size: 1.6rem; font-weight: 800; line-height: 1.5; }
.choice .bigbtn { font-size: 1.35rem; border-style: dashed; border-color: #b9cde4; color: var(--ink); }
.choice .bigbtn:hover { background: #f2f8ff; }
.result-ok { color: var(--good); font-size: 1.2rem; font-weight: 800; }
.result-no { color: var(--bad); font-size: 1.2rem; font-weight: 800; }
.explain {
  background: #fdf6df;
  border-radius: 12px;
  padding: .8rem 1rem;
  margin-top: .6rem;
  font-size: 1.05rem;
}
.muted { color: #8a8494; font-size: .9rem; }
.err { color: var(--bad); font-weight: 700; margin: .5rem 0; }
.ok-banner { background: #e7f7ee; color: var(--good); font-weight: 800; padding: .8rem 1rem; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { border-bottom: 2px solid #f0e4da; padding: .55rem .5rem; text-align: left; }
.score-hero { font-size: 3rem; font-weight: 900; color: var(--accent); text-align: center; }
.row { display: flex; gap: .8rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }
.del { font-size: .85rem; padding: .35rem .7rem; border-radius: 10px; }

/* 시험지 + OMR 카드 */
.exam-main { max-width: 1100px; }
.exam-wrap { display: flex; gap: 1.2rem; align-items: flex-start; }
.exam-questions { flex: 1; min-width: 0; }
.qno { font-weight: 900; color: var(--accent2); margin: 0 0 .3rem; }
.omr {
  width: 250px; flex-shrink: 0;
  position: sticky; top: 90px;
  background: var(--card);
  border: 3px solid #b9cde4;
  border-radius: var(--radius);
  padding: 1rem;
}
.omr-clock { font-size: 2.2rem; font-weight: 900; text-align: center; }
.omr-who { text-align: center; font-weight: 700; margin: .4rem 0 .8rem; }
.omr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.omr-cell {
  display: block; border: 2px solid #b9cde4; border-radius: 10px;
  text-align: center; padding: .3rem; text-decoration: none; color: var(--ink);
}
.omr-cell.done { border-color: var(--good); background: #e7f7ee; }
.omr-no { display: block; font-weight: 900; }
.omr-mark { display: block; min-height: 1.4rem; font-weight: 800; color: var(--good); }
.review-ok { border-color: var(--good); }
.review-no { border-color: var(--bad); }

/* PDF식 지문 박스 + 보기 */
.passage {
  background: #eef4fb;
  border: 2px solid #c9daf2;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin: .7rem 0;
  font-size: 1.1rem;
  white-space: pre-line;
}
.opts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }
.opt {
  display: flex; align-items: center; gap: .45rem;
  border: 3px solid #e8d9cc; border-radius: 12px;
  padding: .6rem .9rem; cursor: pointer;
  font-size: 1.15rem; font-weight: 700; background: #fff;
}
.opt input { display: none; }
.opt:has(input:checked) { border-color: var(--good); background: #e7f7ee; }
.opt-no { font-size: 1.3rem; }
@media (max-width: 800px) {
  .exam-wrap { flex-direction: column; }
  .omr { width: 100%; position: static; }
}

/* 진단 분석 리포트 */
.report-body { background: #efe9d9; }
.report-main { max-width: 960px; }
.report-main .card { background: #fffdf7; border-color: #ddd2b8; }
.report-hero {
  background: #1f2d50; color: #fff;
  border-radius: var(--radius);
  padding: 1.6rem; margin-bottom: 1.2rem;
  border-bottom: 4px solid #c9a35c;
}
.report-hero h1 { margin: .3rem 0 .4rem; }
.report-eyebrow { color: #c9a35c; font-weight: 800; font-size: .8rem; letter-spacing: .06rem; margin: 0; }
.report-sub { color: #c9cfe0; margin: 0 0 1rem; }
.report-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; padding-top: 1rem; border-top: 1px solid #ffffff33; }
.report-meta div { margin: 0; }
.report-meta dt { font-size: .8rem; color: #c9cfe0; }
.report-meta dd { margin: 0; font-weight: 800; font-size: 1.1rem; }
.report-score { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.donut-num { font-size: 2rem; font-weight: 900; fill: #1f2d50; }
.donut-den { font-size: 1rem; fill: #8a8494; }
.donut-sub { font-size: .8rem; fill: #8a8494; }
.report-headline { flex: 1; min-width: 240px; }
.report-headline h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
.badge-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
.badge { display: inline-block; padding: .45rem .9rem; border-radius: 10px; font-weight: 800; }
.badge-top { background: #eef2fb; border: 2px solid #b9c4e4; color: #2c3f7a; }
.badge-weak { background: #faf3e3; border: 2px solid #d9c493; color: #8a6a1f; }
.sec-no {
  display: inline-block; width: 1.6rem; height: 1.6rem; line-height: 1.6rem;
  text-align: center; border: 2px solid #c9a35c; border-radius: 50%;
  color: #8a6a1f; font-size: 1rem; margin-right: .4rem;
}
.report-cols { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.radar-wrap { flex: 1; min-width: 250px; text-align: center; }
.area-bars { flex: 1; min-width: 250px; list-style: none; margin: 0; padding: 0; }
.area-bars li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 2px dashed #e3d9c2; }
.area-dot { width: .9rem; height: .9rem; border-radius: 3px; flex-shrink: 0; }
.area-name { width: 5.5rem; font-weight: 800; flex-shrink: 0; }
.blocks { display: flex; gap: .25rem; }
.blk { width: 1.4rem; height: 1.4rem; border-radius: 5px; background: #eee7d2; border: 1px solid #d8cfb8; }
.blk.on[data-area="어휘력"], .area-dot[data-area="어휘력"] { background: #2e7d9a; }
.blk.on[data-area="이해력"], .area-dot[data-area="이해력"] { background: #2c3f7a; }
.blk.on[data-area="사고력"], .area-dot[data-area="사고력"] { background: #7a5aa0; }
.blk.on[data-area="구조 파악"], .area-dot[data-area="구조 파악"] { background: #3d8a6d; }
.blk.on[data-area="어법"], .area-dot[data-area="어법"] { background: #b05c2a; }
table.sheet th { background: #1f2d50; color: #fff; border-bottom: none; padding: .6rem .5rem; }
table.sheet td { text-align: center; }
.mk-ok { color: #2f7d4f; font-weight: 900; font-size: 1.2rem; }
.mk-no { color: #c03a3a; font-weight: 900; font-size: 1.2rem; }
.sheet-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: 1rem; }