/* =========================================================
   학생용 — 여행 가방 · 여권 스탬프 컨셉
   파스텔 + 굵은 검정 테두리 + 둥근 모서리
   ========================================================= */

/* 이 한 줄이 맨 위에 있어야 합니다.
   아래 .btn 같은 클래스 규칙이 브라우저 기본 [hidden] 을 덮어버립니다. */
[hidden] { display: none !important; }

:root {
  --ink:        #1d1b21;
  --line:       #1d1b21;
  --paper:      #fdf7ee;
  --card:       #ffffff;
  --sky:        #a8dadc;
  --sun:        #ffd166;
  --coral:      #ff8fa3;
  --mint:       #9ae6b4;
  --sea:        #4cc9f0;
  --grape:      #cdb4f6;
  --muted:      #6f6a75;
  --good:       #17a673;
  --bad:        #e5484d;
  --confetti-colors: #ffd166, #ff8fa3, #9ae6b4, #4cc9f0, #cdb4f6, #ffa8a8;
  --r:          18px;
  --bw:         3px;
  --shadow:     5px 5px 0 var(--line);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; opacity: .5;
  background-image:
    radial-gradient(circle at 12% 18%, var(--sky) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 12%, var(--sun) 0 6px, transparent 7px),
    radial-gradient(circle at 26% 82%, var(--coral) 0 7px, transparent 8px),
    radial-gradient(circle at 70% 70%, var(--mint) 0 6px, transparent 7px);
  background-size: 340px 340px;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 16px 16px 60px; }

/* ── 머리말 ──────────────────────────────────────────── */
.topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.brand { font-weight: 900; font-size: 20px; letter-spacing: -.4px; }
.brand .plane { font-size: 22px; }
.spacer { flex: 1 1 auto; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: var(--bw) solid var(--line); border-radius: 999px;
  background: var(--card); padding: 5px 12px;
  font-weight: 800; font-size: 14px; white-space: nowrap;
}
#timer { font-variant-numeric: tabular-nums; background: var(--sun); }
#timer.warn { background: var(--coral); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .45; } }

button.chip { cursor: pointer; font-family: inherit; }
button.chip:active { transform: translateY(1px); }

/* ── 카드 ────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}

h1 { font-size: 27px; margin: 0 0 4px; letter-spacing: -.6px; font-weight: 900; }
h2 { font-size: 20px; margin: 0 0 10px; font-weight: 900; }
.sub { color: var(--muted); margin: 0 0 18px; font-weight: 700; }

/* ── 입력 ────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 900; margin-bottom: 6px; font-size: 15px; }
.field .tip { font-weight: 700; color: var(--muted); font-size: 13px; margin-left: 6px; }

select, .shortin, input[type="text"], input[type="password"] {
  width: 100%; padding: 13px 14px;
  border: var(--bw) solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink);
  font-size: 17px; font-weight: 800; font-family: inherit;
  appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
select:focus, input:focus { outline: 4px solid var(--sea); outline-offset: 1px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.err {
  background: #ffe9ea; border: var(--bw) solid var(--bad); color: #a5121a;
  border-radius: 14px; padding: 11px 13px; font-weight: 800; margin-bottom: 12px;
}

.btn {
  display: inline-block; cursor: pointer; font-family: inherit;
  border: var(--bw) solid var(--line); border-radius: 14px;
  padding: 13px 20px; font-size: 17px; font-weight: 900;
  background: var(--card); color: var(--ink);
  box-shadow: 4px 4px 0 var(--line);
  transition: transform .06s, box-shadow .06s;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--line); }
.btn.primary { background: var(--sun); }
.btn.big { width: 100%; padding: 16px; font-size: 19px; }
.btn:disabled { opacity: .5; cursor: default; }

.rules { list-style: none; padding: 0; margin: 14px 0 0; }
.rules li { padding: 5px 0 5px 26px; position: relative; font-weight: 700; font-size: 15px; }
.rules li::before { content: "✓"; position: absolute; left: 4px; color: var(--good); font-weight: 900; }

/* ── 진행 표시 ───────────────────────────────────────── */
.progress {
  height: 14px; border: var(--bw) solid var(--line); border-radius: 999px;
  background: #fff; overflow: hidden; margin: 2px 0 12px;
}
.progress i { display: block; height: 100%; background: var(--sea); width: 0; transition: width .3s; }

#stamps { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.stamp {
  width: 17px; height: 17px; border-radius: 5px;
  border: 2px solid var(--line); background: #fff; display: block;
}
.stamp.ok { background: var(--mint); }
.stamp.no { background: var(--coral); }

/* ── 문제 ────────────────────────────────────────────── */
.qhead { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.pill {
  border: 2px solid var(--line); border-radius: 999px; padding: 2px 11px;
  font-size: 13px; font-weight: 900; background: #fff;
}
.lv-low  { background: var(--mint); }
.lv-mid  { background: var(--sun); }
.lv-high { background: var(--coral); }
.pill.area { background: var(--grape); }
.pill.pt   { background: var(--sky); }
#qnum { font-weight: 900; font-variant-numeric: tabular-nums; }

#qbody { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
#qbody .sent {
  display: block; margin-top: 10px; padding: 13px 15px;
  background: #f4f7ff; border: 2px dashed var(--line); border-radius: 14px;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 18px; line-height: 1.75; font-weight: 600;
}
#qbody u { text-underline-offset: 3px; text-decoration-thickness: 2px; }

.choice {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  cursor: pointer; font-family: inherit; font-size: 17px; font-weight: 800;
  background: #fff; color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: 14px;
  padding: 13px 15px; margin-bottom: 10px;
  box-shadow: 3px 3px 0 var(--line);
  transition: transform .06s, box-shadow .06s, background .15s;
}
.choice:hover:not(:disabled) { background: #fffbe9; }
.choice:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.choice:disabled { cursor: default; }
.cno {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--paper);
  display: grid; place-items: center; font-size: 14px; font-weight: 900;
}
.ctx { flex: 1 1 auto; }
.choice.right { background: var(--mint); }
.choice.right .cno { background: var(--good); color: #fff; }
.choice.wrong { background: #ffe0e2; }
.choice.wrong .cno { background: var(--bad); color: #fff; }

.shortwrap { display: flex; gap: 10px; align-items: stretch; }
.shortin { flex: 1 1 auto; font-family: "Georgia", serif; }
.shortwrap .btn { flex: 0 0 auto; }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.qfoot { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
#hintBtn { background: var(--grape); padding: 9px 15px; font-size: 15px; }
#hintBox {
  flex: 1 1 100%; background: #fff8e1; border: 2px dashed var(--line);
  border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 15.5px;
}

#combo {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%);
  background: var(--sun); border: var(--bw) solid var(--line); border-radius: 999px;
  padding: 10px 22px; font-weight: 900; font-size: 19px; z-index: 40;
  box-shadow: var(--shadow); pointer-events: none;
}
#combo.pop { animation: pop .5s ease-out; }
@keyframes pop { 0% { transform: translateX(-50%) scale(.5); opacity: 0 } 55% { transform: translateX(-50%) scale(1.15) } 100% { transform: translateX(-50%) scale(1) } }

/* ── 색종이 ──────────────────────────────────────────── */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.cfti {
  position: absolute; top: -16px; width: 10px; height: 15px; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .15; } }

/* ── 오답 팝업 ───────────────────────────────────────── */
#popup {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(29, 27, 33, .55);
  display: grid; place-items: center; padding: 18px;
}
.pp {
  width: min(520px, 100%); background: var(--card);
  border: var(--bw) solid var(--line); border-radius: 22px;
  box-shadow: 7px 7px 0 var(--line); padding: 22px; max-height: 88vh; overflow: auto;
}
.pp h3 { margin: 0 0 14px; font-size: 22px; font-weight: 900; }
.ppline { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; font-weight: 800; }
.ppline .k { flex: 0 0 52px; font-size: 14px; color: var(--muted); }
.ppline .v { flex: 1 1 auto; font-family: "Georgia", serif; font-size: 17px; }
.ppline .v.bad  { color: var(--bad); }
.ppline .v.good { color: var(--good); }
#ppWhy {
  background: #f4f7ff; border: 2px dashed var(--line); border-radius: 14px;
  padding: 13px 15px; margin: 14px 0 18px; font-weight: 700; font-size: 15.5px;
}

/* ── 결과 ────────────────────────────────────────────── */
.scorebox { text-align: center; padding: 8px 0 4px; }
#medal { font-size: 64px; line-height: 1; }
#medalTxt { font-weight: 900; font-size: 20px; margin: 6px 0 2px; }
.scoreline { font-size: 17px; font-weight: 900; color: var(--muted); }
#scoreNum { font-size: 60px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
#rWho { font-weight: 900; font-size: 18px; margin-top: 10px; }
#rMeta { color: var(--muted); font-weight: 700; font-size: 14.5px; margin-top: 4px; }

.arow { display: grid; grid-template-columns: 54px 1fr 84px 70px; gap: 9px; align-items: center; margin-bottom: 9px; font-weight: 800; font-size: 14.5px; }
.aname { font-weight: 900; }
.abar { height: 14px; border: 2px solid var(--line); border-radius: 999px; background: #fff; overflow: hidden; }
.abar i { display: block; height: 100%; background: var(--sea); }
.ascore, .acnt { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.nitem { border: 2px solid var(--line); border-radius: 14px; padding: 11px 14px; margin-bottom: 10px; background: #fff; }
.nitem summary { cursor: pointer; font-weight: 900; font-size: 16px; }
.ntag { font-weight: 700; color: var(--muted); font-size: 13px; margin-left: 6px; }
.nq { margin: 11px 0; font-weight: 700; }
.nline { display: flex; gap: 10px; margin-bottom: 5px; font-weight: 800; }
.nl { flex: 0 0 44px; font-size: 13px; color: var(--muted); }
.nv { font-family: "Georgia", serif; }
.nv.bad { color: var(--bad); }
.nv.good { color: var(--good); }
.nwhy { background: #f4f7ff; border: 2px dashed var(--line); border-radius: 12px; padding: 11px 13px; margin-top: 9px; font-weight: 700; font-size: 15px; }

.savestate { margin-top: 14px; padding: 11px 14px; border-radius: 14px; border: 2px solid var(--line); font-weight: 800; font-size: 15px; }
.savestate.saving { background: #fff8e1; }
.savestate.ok     { background: #e3f9ef; }
.savestate.fail   { background: #ffe9ea; }

.allright { text-align: center; font-weight: 900; font-size: 18px; padding: 18px; background: #e3f9ef; border: var(--bw) solid var(--line); border-radius: var(--r); }

/* ── 작은 화면 ───────────────────────────────────────── */
@media (max-width: 480px) {
  html, body { font-size: 16px; }
  .wrap { padding: 12px 12px 50px; }
  .card { padding: 16px; border-radius: 15px; }
  h1 { font-size: 23px; }
  .two { grid-template-columns: 1fr; }
  .arow { grid-template-columns: 46px 1fr 76px; }
  .acnt { display: none; }
  #scoreNum { font-size: 50px; }
  .shortwrap { flex-direction: column; }
  .shortwrap .btn { width: 100%; }
}