/* ===== 모고 성적분석기 v2 — 쿠키런 + 손그림 디자인 시스템 ===== */

@font-face{
  font-family:'CookieRun';
  src:url('../fonts/CookieRun Bold.ttf') format('truetype');
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:'CookieRun';
  src:url('../fonts/CookieRun Black.ttf') format('truetype');
  font-weight:900; font-display:swap;
}

:root{
  --black:#111111; --blue:#1A6EFF; --yellow:#FFD000; --yellow-dark:#E6BB00;
  --red:#FF4444; --red-light:#FFF0F0; --green:#00B94A; --green-light:#EDFFF5;
  --orange:#FF8C00; --orange-light:#FFF4E6; --purple:#7C3AED; --purple-light:#F3EEFF;
  --bg:#FFFFFF; --gray-bg:#F8F8F8; --border:#DDDDDD; --text:#111111; --muted:#666666;
  --shadow-hard:3px 3px 0 0 #111111;
  --shadow-hard-sm:2px 2px 0 0 #111111;
  --shadow-hard-lg:5px 5px 0 0 #111111;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* 제목·버튼·숫자는 쿠키런 */
h1,h2,h3,h4,
.tab-btn,.score-num,.wrong-num,.wrong-count,.area-name,.rx-concept,
.hero-title,.logo-text,.prob-btn,.start-btn,.analyze-btn,
.section-title,.exam-title,.tab-badge,button{
  font-family:'CookieRun','Apple SD Gothic Neo',sans-serif;
}

.wrap{max-width:760px;margin:0 auto;padding:22px 18px 70px}
.hidden{display:none !important}

/* ---------- 헤더 ---------- */
.site-header{
  padding:13px 20px;border-bottom:2.5px solid var(--black);background:#fff;
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;
}
.site-logo{height:58px;width:auto;display:block}

/* ---------- 공통 컴포넌트 ---------- */
.sketch-card{
  border:2.5px solid var(--black);border-radius:16px;background:#fff;
  box-shadow:var(--shadow-hard);padding:20px;
}
button{
  border:2.5px solid var(--black);border-radius:12px;font-weight:700;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  background:#fff;color:var(--black);
}
button:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-lg)}
button:active{transform:translate(1px,1px);box-shadow:var(--shadow-hard-sm)}
.btn-yellow{background:var(--yellow);box-shadow:var(--shadow-hard)}
.btn-yellow:hover{background:var(--yellow-dark)}

/* ---------- 히어로 (index) ---------- */
.hero{position:relative;padding:30px 6px 8px;text-align:center}
.hero-logo{display:block;margin:0 auto 2px;width:min(300px,72%);height:auto}
.hero-titlewrap{position:relative;display:block;max-width:360px;margin:0 auto;padding:46px 14px 42px;white-space:nowrap}
.hero-title{line-height:1.12;letter-spacing:-1px}
.hero-title .l1{display:inline-block;font-size:clamp(28px,8vw,50px);font-weight:900;color:var(--black)}
.hero-title .l2{
  display:inline-block;margin-top:8px;font-size:clamp(32px,9vw,56px);font-weight:900;color:var(--blue);
  text-decoration:underline wavy var(--blue);text-decoration-thickness:3px;text-underline-offset:9px;
}
.hero-sub{margin:18px auto 26px;color:var(--muted);font-size:18px;font-weight:600;max-width:420px}
.hero-deco{position:absolute;pointer-events:none;user-select:none;line-height:1}
.hero-deco.star{top:4px;left:0;color:var(--blue);font-size:30px;transform:rotate(-12deg)}
.hero-deco.smile{top:0;right:0;font-size:30px;transform:rotate(8deg)}
.hero-deco.wave{bottom:2px;left:2px;color:var(--blue);font-size:24px;font-weight:900;letter-spacing:-3px}
.hero-deco.pencil{bottom:0;right:2px;font-size:28px;transform:rotate(-10deg)}

/* 폼 영역 (히어로 + 입력 공용) */
.field{max-width:440px;margin:0 auto 14px;text-align:left}
.fld-label{display:block;font-weight:900;font-size:22px;margin:0 0 11px 4px;font-family:'CookieRun',sans-serif}
.select-row{display:flex;gap:10px}
.select-row select{flex:1 1 0;min-width:0;width:auto}
.select-row select:disabled{opacity:.5;background-color:#f4f4f4}
/* 과목·학년·연도·월 2×2 그리드 */
.select-row-4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.select-row-4 select{min-width:0}
.select-row-4 select:disabled{opacity:.5;background-color:#f4f4f4}
select{
  width:100%;height:54px;border:2.5px solid var(--black);border-radius:16px;
  box-shadow:var(--shadow-hard);font-size:17px;font-weight:700;color:var(--black);
  padding:0 48px 0 18px;appearance:none;-webkit-appearance:none;background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;cursor:pointer;
  font-family:'Apple SD Gothic Neo',sans-serif;
}
.start-btn{
  width:100%;max-width:440px;height:58px;margin:6px auto 0;display:flex;align-items:center;
  justify-content:center;gap:10px;background:var(--yellow);border:2.5px solid var(--black);
  border-radius:16px;font-size:21px;font-weight:900;box-shadow:var(--shadow-hard);
}
.start-btn:hover{background:var(--yellow-dark)}

/* ---------- 오답 입력 ---------- */
.exam-title{font-size:24px;font-weight:900;margin-bottom:2px}
.input-hint{color:var(--text);font-weight:700;font-size:19px;margin-bottom:18px;line-height:1.45}

.prob-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:16px}
.prob-btn{
  height:50px;border:2.5px solid var(--black);border-radius:10px;background:#fff;
  box-shadow:var(--shadow-hard-sm);display:flex;align-items:center;
  justify-content:center;gap:1px;font-weight:800;
}
.prob-btn .pn{font-size:23px;line-height:1}
.prob-btn .bun{font-size:14px;font-weight:700;color:var(--muted)}
.prob-btn.wrong{background:var(--red);color:#fff;border-color:#CC0000;box-shadow:2px 2px 0 #CC0000}
.prob-btn.wrong .bun{color:rgba(255,255,255,.9)}
.prob-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--black)}
.prob-btn.wrong:hover{box-shadow:4px 4px 0 #CC0000}

.analyze-btn{
  width:100%;height:58px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--yellow);border:2.5px solid var(--black);border-radius:16px;
  font-size:21px;font-weight:900;box-shadow:var(--shadow-hard);
}
.analyze-btn:hover{background:var(--yellow-dark)}

.back-link{
  display:inline-flex;align-items:center;gap:6px;background:#fff;border:2.5px solid var(--black);
  border-radius:12px;box-shadow:var(--shadow-hard-sm);padding:8px 14px;font-size:16px;
  font-weight:800;margin-bottom:16px;white-space:nowrap;
}

/* 살짝 흔들기 (미선택 경고) */
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake{animation:shake .4s}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}