/* ── 시험지 팔레트 ─────────────────────────────── */
:root{
  --paper:#fbfaf6;
  --paper-edge:#efece2;
  --ink:#1a1a1a;
  --ink-soft:#4a4a46;
  --ink-faint:#8a8a82;
  --rule:#2a2a28;
  --rule-light:#d6d2c6;
  --accent:#8c1d1d;
  --accent-soft:#f3e7e5;
  --ok:#1f6b3a;
  --no:#a52121;
  --serif:"Nanum Myeongjo",'Batang','바탕',serif;
  --sans:"Noto Sans KR",'Malgun Gothic','맑은 고딕',sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#e6e3da;
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.75;
  -webkit-text-size-adjust:100%;
}
button{font-family:var(--sans);cursor:pointer;}

.screen{display:none;}
.screen.active{display:block;}

/* ── 버튼 ─────────────────────────────────────── */
.btn-primary{
  background:var(--rule);color:#fbfaf6;border:none;
  padding:.85rem 2.2rem;font-size:1rem;font-weight:700;letter-spacing:.05em;
  border-radius:2px;transition:background .15s;
}
.btn-primary:hover{background:var(--accent);}
.btn-ghost{
  background:transparent;color:var(--ink-soft);border:1px solid var(--rule-light);
  padding:.85rem 1.6rem;font-size:.95rem;border-radius:2px;transition:.15s;
}
.btn-ghost:hover{border-color:var(--rule);color:var(--ink);}
.btn-block{display:block;width:100%;padding:.8rem 0;}

/* ── 표지 ─────────────────────────────────────── */
#cover{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2.5rem 1rem;}
.cover-sheet{
  width:min(680px,100%);background:var(--paper);
  border:1px solid var(--paper-edge);
  box-shadow:0 2px 0 rgba(0,0,0,.05),0 18px 46px rgba(0,0,0,.14);
  padding:3rem clamp(1.4rem,5vw,3.4rem) 2.6rem;
}
.cover-top{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--ink-soft);}
.cover-form{border:1.5px solid var(--rule);padding:.1rem .7rem;font-weight:700;color:var(--ink);letter-spacing:.25em;}
.cover-title{
  font-size:clamp(1.5rem,4.6vw,2.1rem);font-weight:800;text-align:center;
  margin:1.6rem 0 1.4rem;letter-spacing:-.01em;
}
.cover-subject{
  display:flex;align-items:baseline;justify-content:center;gap:1.1rem;
  border-top:2.5px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.9rem 0;
}
.period{font-size:.95rem;color:var(--ink-soft);}
.subject-name{font-size:clamp(1.5rem,5vw,2rem);font-weight:800;letter-spacing:.12em;}
.cover-rule{height:2.5px;background:var(--rule);margin-top:3px;}

.cover-fields{display:flex;gap:1.4rem;margin:2rem 0 1.8rem;flex-wrap:wrap;}
.field{flex:1 1 200px;display:flex;align-items:center;gap:.7rem;}
.field span{font-size:.95rem;color:var(--ink-soft);white-space:nowrap;letter-spacing:.1em;}
.field input{
  flex:1;min-width:0;border:none;border-bottom:1.5px solid var(--rule);
  background:transparent;font-family:var(--serif);font-size:1.05rem;
  padding:.35rem .2rem;color:var(--ink);
}
.field input:focus{outline:none;border-bottom-color:var(--accent);}

.cover-notice{margin:0;padding-left:1.3rem;font-size:.94rem;color:var(--ink-soft);line-height:1.9;}
.cover-notice li{margin-bottom:.15rem;}
.cover-notice b{color:var(--ink);}
.cover-warn{
  margin-top:1.6rem;padding-top:1rem;border-top:1px dashed var(--rule-light);
  font-size:.8rem;color:var(--ink-faint);text-align:center;
}
.cover-actions{display:flex;gap:.8rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap;}

/* ── 상단 바 ──────────────────────────────────── */
.exam-bar{
  position:sticky;top:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.55rem clamp(.8rem,3vw,1.6rem);
  background:var(--rule);color:#f2efe6;
  font-family:var(--sans);font-size:.88rem;
}
.bar-left{display:flex;align-items:center;gap:.8rem;min-width:0;}
.bar-period{opacity:.65;}
.bar-subject{font-weight:700;letter-spacing:.06em;white-space:nowrap;}
.bar-form{border:1px solid rgba(255,255,255,.4);padding:0 .45rem;font-size:.75rem;opacity:.8;}
.bar-right{display:flex;align-items:center;gap:.85rem;}
.bar-progress{opacity:.7;font-variant-numeric:tabular-nums;}
.bar-timer{
  font-family:var(--sans);font-weight:700;font-size:1.15rem;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.bar-timer.warn{color:#ffb4b4;}
.bar-timer.danger{color:#ff8080;animation:blink 1s steps(2,start) infinite;}
@keyframes blink{50%{opacity:.35;}}
.btn-submit{
  background:transparent;border:1px solid rgba(255,255,255,.5);color:#f2efe6;
  padding:.3rem .9rem;font-size:.85rem;border-radius:2px;
}
.btn-submit:hover{background:rgba(255,255,255,.14);}

/* ── 본문 레이아웃 ────────────────────────────── */
.exam-body{
  display:grid;grid-template-columns:minmax(0,1fr) 190px;
  gap:1.4rem;align-items:start;
  max-width:1180px;margin:0 auto;padding:1.4rem clamp(.6rem,2.5vw,1.4rem) 5rem;
}
.paper{
  background:var(--paper);border:1px solid var(--paper-edge);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  padding:clamp(1.5rem,4.5vw,3.2rem) clamp(1.2rem,4.5vw,3.4rem) 3rem;
}

/* ── 지문 ─────────────────────────────────────── */
.set-head{
  margin:2.6rem 0 .9rem;font-size:1rem;font-weight:700;
}
.set-head:first-child{margin-top:0;}
.set-head .rng{margin-right:.4rem;}
.passage{
  border:1px solid var(--rule);padding:1.2rem 1.4rem;
  background:#fdfcf8;margin-bottom:1.8rem;
}
.passage p{margin:0 0 .95rem;text-align:justify;word-break:keep-all;}
.passage p:last-child{margin-bottom:0;}
.passage u{text-underline-offset:3px;}
.marker{white-space:nowrap;}

/* ── 문항 ─────────────────────────────────────── */
.q{padding:1.5rem 0;border-top:1px solid var(--rule-light);scroll-margin-top:4.5rem;}
.q:first-of-type{border-top:none;}
.q-stem{display:flex;gap:.55rem;align-items:baseline;margin-bottom:.85rem;word-break:keep-all;}
.q-num{
  flex:none;font-weight:800;font-size:1.05rem;min-width:1.9rem;
}
.q-text{flex:1;font-weight:400;}
.q-text b{font-weight:800;}
.q-pt{font-size:.85rem;color:var(--accent);margin-left:.3rem;white-space:nowrap;}

.bogi{
  border:1px solid var(--rule);margin:.9rem 0 1.05rem;
  background:#fdfcf8;
}
.bogi-label{
  text-align:center;font-weight:700;font-size:.92rem;
  border-bottom:1px solid var(--rule);padding:.25rem 0;letter-spacing:.3em;
}
.bogi-body{padding:.9rem 1.1rem;}
.bogi-table{width:100%;border-collapse:collapse;font-size:.97rem;}
.bogi-table td{padding:.28rem .5rem;}
.bogi-table td:first-child{color:var(--ink-soft);white-space:nowrap;}
.bogi-line{margin:0;word-break:keep-all;}
.bogi-list{margin:0;padding-left:1.2rem;}
.bogi-list li{margin:.15rem 0;}

.choices{list-style:none;margin:0;padding:0;}
.choice{
  display:flex;gap:.55rem;align-items:baseline;
  padding:.34rem .5rem;margin:.1rem -0.5rem;border-radius:2px;
  cursor:pointer;transition:background .12s;word-break:keep-all;
}
.choice:hover{background:rgba(0,0,0,.035);}
.choice .cn{flex:none;font-size:1.02rem;color:var(--ink-soft);}
.choice.sel{background:var(--accent-soft);}
.choice.sel .cn{color:var(--accent);font-weight:700;}
.choice.sel .ct{font-weight:700;}

/* ── OMR ──────────────────────────────────────── */
.omr{position:sticky;top:3.4rem;}
.omr-inner{
  background:var(--paper);border:1px solid var(--paper-edge);
  box-shadow:0 10px 26px rgba(0,0,0,.1);padding:.9rem .8rem 1rem;
}
.omr-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid var(--rule);padding-bottom:.35rem;margin-bottom:.5rem;}
.omr-title{font-weight:800;letter-spacing:.25em;font-size:.9rem;}
.omr-sub{font-size:.72rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.omr-toggle{display:none;}
.omr-grid{display:flex;flex-direction:column;gap:1px;margin-bottom:.9rem;}
.omr-row{display:flex;align-items:center;gap:.28rem;padding:.1rem 0;}
.omr-row.active{background:var(--accent-soft);}
.omr-n{
  width:1.4rem;text-align:right;font-size:.78rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;cursor:pointer;
}
.omr-flag{
  width:.9rem;font-size:.68rem;color:var(--rule-light);cursor:pointer;
  text-align:center;user-select:none;
}
.omr-flag.on{color:var(--accent);}
.omr-b{
  width:15px;height:15px;border:1px solid #b9b4a6;border-radius:50%;
  background:transparent;padding:0;font-size:.55rem;color:transparent;
  transition:.12s;
}
.omr-b:hover{border-color:var(--rule);}
.omr-b.on{background:var(--rule);border-color:var(--rule);}
.omr-note{font-size:.7rem;color:var(--ink-faint);margin:.6rem 0 0;text-align:center;line-height:1.5;}

/* ── 성적표 ───────────────────────────────────── */
#result{min-height:100vh;padding:2.5rem 1rem 5rem;}
.report{
  width:min(760px,100%);margin:0 auto;background:var(--paper);
  border:1px solid var(--paper-edge);box-shadow:0 18px 46px rgba(0,0,0,.14);
  padding:clamp(1.5rem,5vw,3rem);
}
.report-head{border-bottom:2.5px solid var(--rule);padding-bottom:.9rem;margin-bottom:1.6rem;}
.report-title{font-size:1.6rem;font-weight:800;letter-spacing:.3em;text-align:center;}
.report-meta{display:flex;justify-content:center;gap:1.5rem;margin-top:.5rem;font-size:.9rem;color:var(--ink-soft);}
.report-score{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--rule);
}
.score-cell{padding:.9rem .5rem;text-align:center;border-right:1px solid var(--rule-light);}
.score-cell:last-child{border-right:none;}
.cell-label{font-size:.8rem;color:var(--ink-soft);letter-spacing:.1em;margin-bottom:.2rem;}
.cell-value{font-size:1.7rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;}
.cell-value small{font-size:.75rem;font-weight:400;color:var(--ink-faint);margin-left:.15rem;}
.grade-cell{background:var(--accent-soft);}
.grade-cell .cell-value{color:var(--accent);}
.report-comment{
  margin:1.2rem 0 1.8rem;padding:.9rem 1.1rem;background:#fdfcf8;
  border-left:3px solid var(--accent);font-size:.98rem;word-break:keep-all;
}
.cuts-title{font-size:.85rem;font-weight:700;letter-spacing:.15em;color:var(--ink-soft);margin-bottom:.5rem;}
.report-cuts{margin-bottom:1.8rem;}
.cuts-row{display:flex;flex-wrap:wrap;gap:.3rem;}
.cut{
  flex:1 1 60px;border:1px solid var(--rule-light);padding:.35rem .2rem;
  text-align:center;font-size:.8rem;background:#fdfcf8;
}
.cut b{display:block;font-size:1rem;}
.cut.me{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}

.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:.35rem;}
.rp-cell{
  border:1px solid var(--rule-light);padding:.35rem .1rem;text-align:center;
  font-size:.72rem;background:#fdfcf8;line-height:1.4;cursor:pointer;
}
.rp-cell .rn{color:var(--ink-faint);}
.rp-cell .rm{font-size:1rem;font-weight:800;}
.rp-cell.o{border-color:#bcd9c6;background:#f2f9f4;}
.rp-cell.o .rm{color:var(--ok);}
.rp-cell.x{border-color:#e6c2c2;background:#fdf3f3;}
.rp-cell.x .rm{color:var(--no);}
.report-actions{display:flex;gap:.6rem;justify-content:center;margin-top:2rem;flex-wrap:wrap;}

.review{margin-top:2.4rem;border-top:2.5px solid var(--rule);padding-top:1.4rem;}
.rev-q{padding:1.2rem 0;border-bottom:1px solid var(--rule-light);scroll-margin-top:1rem;}
.rev-head{display:flex;gap:.5rem;align-items:baseline;margin-bottom:.5rem;}
.rev-badge{
  flex:none;font-family:var(--sans);font-size:.7rem;font-weight:700;
  padding:.1rem .45rem;border-radius:2px;color:#fff;
}
.rev-badge.o{background:var(--ok);}
.rev-badge.x{background:var(--no);}
.rev-stem{flex:1;font-weight:700;word-break:keep-all;}
.rev-ans{font-size:.92rem;color:var(--ink-soft);margin:.2rem 0 .5rem;}
.rev-ans .mine{color:var(--no);font-weight:700;}
.rev-ans .real{color:var(--ok);font-weight:700;}
.rev-ex{
  background:#fdfcf8;border-left:3px solid var(--rule-light);
  padding:.7rem 1rem;font-size:.95rem;word-break:keep-all;
}

/* ── 토스트 ───────────────────────────────────── */
#toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%) translateY(1rem);
  background:var(--rule);color:#f2efe6;font-family:var(--sans);font-size:.88rem;
  padding:.6rem 1.2rem;border-radius:3px;opacity:0;pointer-events:none;
  transition:.25s;z-index:80;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── 반응형 ───────────────────────────────────── */
@media (max-width:900px){
  .exam-bar{padding:.45rem .8rem;}
  .bar-period,.bar-form{display:none;}
  .bar-subject{font-size:.82rem;}
  .bar-right{gap:.6rem;}

  .exam-body{grid-template-columns:1fr;padding-bottom:7.5rem;}
  .omr{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;
    max-height:46vh;overflow-y:auto;background:var(--paper);
    border-top:2px solid var(--rule);box-shadow:0 -8px 24px rgba(0,0,0,.18);
  }
  .omr-inner{box-shadow:none;border:none;padding:.6rem .9rem .9rem;}
  .omr-head{margin-bottom:.55rem;}
  .omr-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
    gap:.1rem .7rem;
  }
  .omr-note{display:none;}
  .omr-toggle{
    display:inline-block;margin-left:auto;background:transparent;
    border:1px solid var(--rule-light);color:var(--ink-soft);
    font-size:.72rem;padding:.15rem .55rem;border-radius:2px;
  }
  .omr.collapsed{max-height:none;}
  .omr.collapsed .omr-grid{display:none;}
}
@media (max-width:520px){
  body{font-size:16px;}
  .report-score{grid-template-columns:repeat(2,1fr);}
  .score-cell{border-bottom:1px solid var(--rule-light);}
  .score-cell:nth-child(2){border-right:none;}
}
@media print{
  .exam-bar,.omr,.report-actions{display:none;}
  body{background:#fff;}
  .paper{box-shadow:none;border:none;}
}

/* ══════════ 사회탐구형 자료 조판 ══════════ */

/* 자료 박스 (<보기> 앞에 오는 표·그래프·대화문 등) */
.data{
  border:1px solid var(--rule);margin:.9rem 0 .8rem;background:#fdfcf8;
}
.data-label{
  text-align:center;font-weight:700;font-size:.9rem;letter-spacing:.3em;
  border-bottom:1px solid var(--rule);padding:.25rem 0;
}
.data-body{padding:.85rem 1rem;}

/* <보기> ㄱㄴㄷㄹ */
.bogi-items{margin:0;padding:0;list-style:none;}
.bogi-items li{display:flex;gap:.45rem;margin:.3rem 0;word-break:keep-all;}
.bogi-items li:first-child{margin-top:0;}
.bogi-items li:last-child{margin-bottom:0;}
.bogi-items .kk{flex:none;font-weight:700;}

/* 대화문 / 수업 장면 */
.dialog{margin:0;}
.dialog .line{display:flex;gap:.6rem;margin:.38rem 0;word-break:keep-all;}
.dialog .line:first-child{margin-top:0;}
.dialog .line:last-child{margin-bottom:0;}
.dialog .who{flex:none;font-weight:700;min-width:2.8rem;}
.dialog .who.t{color:var(--accent);}

/* (가)(나) 비교 */
.pair{display:grid;grid-template-columns:1fr 1fr;}
.pair > div{padding:.15rem .2rem;}
.pair > div + div{border-left:1px solid var(--rule-light);padding-left:.9rem;}
.pair > div:first-child{padding-right:.9rem;}
.pair .lbl{font-weight:700;text-align:center;margin-bottom:.4rem;}
.pair p{margin:.25rem 0;word-break:keep-all;}
.pair ul{margin:.2rem 0;padding-left:1.1rem;}

/* 연표 */
.timeline{margin:0;padding:0;list-style:none;}
.timeline li{display:flex;gap:.9rem;padding:.18rem 0;align-items:baseline;}
.timeline .yr{flex:none;width:4.2rem;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.timeline .ev{flex:1;word-break:keep-all;}
.timeline li.gap{
  border-top:1px dashed var(--rule-light);border-bottom:1px dashed var(--rule-light);
  margin:.3rem 0;padding:.35rem 0;background:var(--accent-soft);
}
.timeline li.gap .ev{font-weight:700;color:var(--accent);text-align:center;}

/* 막대그래프 */
.chart{display:flex;flex-direction:column;gap:.32rem;}
.chart .row{display:flex;align-items:center;gap:.5rem;font-size:.92rem;}
.chart .lb{flex:none;width:6.2rem;text-align:right;color:var(--ink-soft);word-break:keep-all;}
.chart .track{flex:1;min-width:0;}
.chart .bar{height:13px;background:var(--rule);display:block;}
.chart .bar.hi{background:var(--accent);}
.chart .vl{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.85rem;}
.chart-note{margin:.55rem 0 0;font-size:.8rem;color:var(--ink-faint);text-align:right;}

/* 표 (테두리 있는 수능식 표) */
.data-table{width:100%;border-collapse:collapse;font-size:.93rem;}
.data-table th,.data-table td{
  border:1px solid var(--rule-light);padding:.3rem .5rem;text-align:center;
  word-break:keep-all;
}
.data-table th{background:#f2efe6;font-weight:700;}
.data-table td.l{text-align:left;}
.table-wrap{overflow-x:auto;}

/* 사료 · 기사 카드 */
.doc{border:1px dashed #b9b4a6;padding:.75rem .95rem;background:#fff;}
.doc + .doc{margin-top:.6rem;}
.doc .doc-h{font-weight:700;font-size:.9rem;margin-bottom:.4rem;text-align:center;}
.doc p{margin:.3rem 0;word-break:keep-all;}
.doc p:first-of-type{margin-top:0;}
.doc p:last-child{margin-bottom:0;}
.doc .by{text-align:right;font-size:.83rem;color:var(--ink-faint);margin-top:.5rem;}

/* 밑줄 기호 */
.uw{text-decoration:underline;text-underline-offset:3px;}

/* 조합형 선택지는 짧으므로 한 줄에 여유를 준다 */
.choice .ct.combo{letter-spacing:.06em;}

@media (max-width:560px){
  /* (가)(나) 비교는 좁은 화면에서 위아래로 쌓는다 */
  .pair{grid-template-columns:1fr;}
  .pair > div:first-child{padding-right:.2rem;padding-bottom:.7rem;}
  .pair > div + div{
    border-left:none;border-top:1px solid var(--rule-light);
    padding-left:.2rem;padding-top:.7rem;
  }
  .chart .lb{width:4.6rem;font-size:.82rem;}
  .data-table{font-size:.85rem;}
  .data-table th,.data-table td{padding:.25rem .35rem;}
  .timeline .yr{width:3.4rem;}
}