/* quiz-02.html ~ quiz-07.html이 공유하는 스타일시트.
   quiz-01.html은 이미지 페이저라 별도 스타일을 쓴다. */

:root{
  --ink:#1B2430; --ink-soft:#57616F; --line:#E2E6EB; --paper:#F6F7F9; --card:#FFFFFF;
  --navy:#213863; --navy-deep:#152540; --teal:#0F8A82; --teal-soft:#E3F4F1;
  --amber:#C8791C; --amber-soft:#FBF0DF; --rose:#B8465A; --rose-soft:#FBEAEC;
  --violet:#6E56A6; --violet-soft:#EEEAF7; --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;padding-bottom:60px;}
header{background:linear-gradient(155deg,var(--navy-deep) 0%,var(--navy) 62%,#2B4C7E 100%);color:#fff;padding:34px 24px 40px;text-align:center;}
header .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9FB3D6;font-weight:700;margin-bottom:8px;text-decoration:none;display:inline-block;transition:color .15s;}
header .eyebrow:hover{color:#fff;text-decoration:underline;}
header h1{margin:0 0 8px;font-size:clamp(20px,4vw,27px);font-weight:900;letter-spacing:-.01em;}
header p{margin:0;color:#C7D4E8;font-size:13.5px;}
.wrap{max-width:760px;margin:0 auto;padding:28px 16px 0;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px;box-shadow:0 1px 2px rgba(21,37,64,.04);}
.panel h2{font-size:16px;font-weight:800;margin:0 0 6px;}
.panel .sub{font-size:13px;color:var(--ink-soft);margin:0 0 18px;}
.start-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:5px;}
.field input{width:100%;padding:11px 12px;border:1px solid #C7CEDA;border-radius:9px;font-size:14.5px;font-family:inherit;}
.field input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.err-msg{color:var(--rose);font-size:12.5px;margin-bottom:10px;min-height:1em;}
.google-signin-btn-wrap{display:flex;justify-content:center;padding:8px 0 4px;}
.gstatus-ok{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  text-align:center;font-size:12.5px;font-weight:700;color:var(--teal);
  background:var(--teal-soft);border-radius:9px;padding:10px 12px;margin-bottom:16px;
}
.gstatus-reset{
  appearance:none;border:none;background:none;cursor:pointer;font-family:inherit;
  color:var(--ink-soft);font-size:11.5px;font-weight:700;padding:0;
  text-decoration:underline;text-underline-offset:2px;
}
.gstatus-reset:hover{color:var(--rose);}
.checking-box{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 0;color:var(--ink-soft);font-size:13.5px;}
.spinner{width:32px;height:32px;border:3px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.gate-err{
  margin-top:14px;padding:12px 14px;background:var(--rose-soft);border:1px solid #E6B7C0;
  border-radius:9px;color:#7A2334;font-size:13px;line-height:1.6;text-align:center;font-weight:600;
}
.btn{appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:14.5px;color:#fff;background:var(--navy);padding:13px 18px;border-radius:10px;width:100%;}
.btn:hover{background:var(--navy-deep);}
.btn.teal{background:var(--teal);}
.btn.teal:hover{background:#0C7069;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
@media(max-width:520px){.start-row{grid-template-columns:1fr;}}

.quiz-progress-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;position:sticky;top:0;background:var(--card);padding:6px 0;z-index:5;}
.quiz-progress-track{flex:1;height:8px;background:var(--line);border-radius:99px;overflow:hidden;}
.quiz-progress-fill{height:100%;background:var(--teal);width:0%;transition:width .2s;}
.quiz-progress-text{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap;}
.print-btn{margin-bottom:14px;}

.solution-upload-box{border:1.5px dashed #C7CEDA;border-radius:12px;padding:16px 18px;margin:20px 0;background:#FAFBFC;}
.solution-upload-box label{display:block;font-size:13.5px;font-weight:700;margin-bottom:5px;}
.solution-upload-hint{font-size:12px;color:var(--ink-soft);margin-bottom:10px;line-height:1.6;}
.solution-upload-box input[type=file]{font-size:13px;font-family:inherit;}
.solution-file-name{margin-top:8px;font-size:12.5px;color:var(--teal);font-weight:700;}

.result-q-explain{
  margin-top:8px;padding:10px 12px;background:var(--violet-soft);border-radius:8px;
  font-family:'Noto Serif KR',serif;font-size:13px;line-height:1.65;color:var(--ink);
  overflow-x:auto;
}
.rq-explain-label{font-family:'Noto Sans KR',sans-serif;font-weight:700;color:var(--violet);margin-bottom:8px;}
.result-q-explain-img{text-align:center;margin-top:8px;}
.result-q-explain-img img{max-width:100%;height:auto;border-radius:6px;}
/* MathJax의 디스플레이 수식(mjx-container[display="true"])은 길면 컨테이너 폭을
   넘어 그대로 삐져나가 화면 밖으로 잘려 보일 수 있다. 잘라내는 대신 그 수식만
   가로로 스크롤해서 볼 수 있게 한다. */
mjx-container[display="true"]{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}

/* ---------- 문제 PDF 인쇄용 스타일은 printPageCss()에 별도로 있다(아래 참고) ----------
   이 CSS는 메인 퀴즈 화면이 아니라, PDF 버튼으로 여는 새 인쇄 창에 주입된다. */

.quiz-q{border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;margin-bottom:16px;background:#fff;}
.quiz-q-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--teal-soft);color:var(--teal);font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;margin-bottom:10px;}
.quiz-q-stem{font-family:'Noto Serif KR',serif;font-size:15px;line-height:1.7;text-align:justify;word-break:keep-all;}
.quiz-q-stem2{margin-top:8px;}
.quiz-q-img{text-align:center;margin:12px 0;}
.quiz-q-img img{max-width:100%;height:auto;border-radius:6px;}
.quiz-bogi-box{border:1px solid var(--ink);padding:20px 16px 8px;margin:12px 0 4px;position:relative;font-family:'Noto Serif KR',serif;font-size:14px;line-height:1.65;}
.quiz-bogi-box::before{content:"<보 기>";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#fff;padding:0 12px;font-size:13px;color:var(--navy);font-family:'Noto Serif KR',serif;}
.quiz-bogi-item{text-indent:-1.4em;padding-left:1.4em;margin-bottom:4px;}
.quiz-choices{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.quiz-choice-btn{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  padding:11px 14px;border:1.5px solid #C7CEDA;border-radius:10px;background:#fff;
  font-family:'Noto Serif KR',serif;font-size:14px;line-height:1.55;color:var(--ink);cursor:pointer;
  transition:border-color .12s, background .12s;
}
@media (hover: hover) {
  .quiz-choice-btn:hover{border-color:var(--teal);background:var(--teal-soft);}
}
.quiz-choice-btn.selected{border-color:var(--navy);background:#EDF0F7;font-weight:700;}
.quiz-choice-btn .cc-mark{font-family:'JetBrains Mono',monospace;font-weight:800;color:var(--teal);flex:0 0 auto;}
.quiz-choice-btn.disabled{cursor:default;}
.quiz-choice-btn.correct{border-color:var(--teal);background:var(--teal-soft);}
.quiz-choice-btn.wrong{border-color:var(--rose);background:var(--rose-soft);}

.result-score-box{text-align:center;padding:18px 0 22px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.result-score-num{font-family:'JetBrains Mono',monospace;font-weight:900;font-size:44px;color:var(--navy);}
.result-send-status{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-bottom:18px;}
.result-send-status.ok{color:var(--teal);font-weight:700;}
.result-send-status.fail{color:var(--rose);font-weight:700;}
.result-q{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;}
.result-q-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12.5px;font-weight:700;}
.result-q-head .rq-badge{font-family:'JetBrains Mono',monospace;color:var(--ink-soft);}
.result-q-head .rq-status{padding:2px 9px;border-radius:99px;font-size:11.5px;}
.result-q-head .rq-status.ok{background:var(--teal-soft);color:var(--teal);}
.result-q-head .rq-status.no{background:var(--rose-soft);color:var(--rose);}
.result-q-detail{font-size:13px;color:var(--ink-soft);font-family:'Noto Serif KR',serif;}
.result-q-detail b{color:var(--ink);}
.rq-correct-mark{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12.5px;
  color:#fff;background:var(--violet);padding:2px 10px;border-radius:99px;
}
.copyright{text-align:center;color:#9AA2B1;font-size:11.5px;padding:20px 0;}
.copyright .copyright-link{color:#9AA2B1;text-decoration:underline;text-underline-offset:2px;}
.copyright .copyright-link:hover{color:var(--teal);}