.codebox {
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
  color: #cbd5e1;
}
.prose-cf { color: #cbd5e1; font-size: 14px; line-height: 1.7; }
.prose-cf h1 { font-size: 1.25rem; font-weight: 700; color: #f1f5f9; margin: .6em 0 .4em; }
.prose-cf h2 { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; margin: .8em 0 .3em; }
.prose-cf h3 { font-size: .95rem; font-weight: 600; color: #e2e8f0; margin: .7em 0 .3em; }
.prose-cf p { margin: .5em 0; }
.prose-cf ul, .prose-cf ol { margin: .5em 0 .5em 1.2em; list-style: disc; }
.prose-cf ol { list-style: decimal; }
.prose-cf li { margin: .2em 0; }
.prose-cf code { background: #1e293b; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; font-family: ui-monospace, monospace; }
.prose-cf pre { background: #0b1220; border: 1px solid #1e293b; border-radius: 6px; padding: 10px; overflow-x: auto; margin: .6em 0; }
.prose-cf pre code { background: none; padding: 0; font-size: 12.5px; }
.prose-cf strong { color: #f1f5f9; }
.prose-cf table { border-collapse: collapse; margin: .5em 0; }
.prose-cf th, .prose-cf td { border: 1px solid #1e293b; padding: 4px 8px; font-size: 13px; }

/* ── 폴리시: 폰트·네비·모션 ── */
body {
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', system-ui, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.nav-link { color: #cbd5e1; transition: color .15s; white-space: nowrap; }
.nav-link:hover { color: #fff; }
.nav-m { padding: 6px 10px; border-radius: 6px; color: #cbd5e1; white-space: nowrap; }
.nav-m:hover { background: #1e293b; color: #fff; }

.card { transition: transform .14s ease, border-color .14s, box-shadow .14s; }
.card:hover { transform: translateY(-2px); border-color: #0284c7;
  box-shadow: 0 8px 24px -10px rgba(2,132,199,.35); }

button, a { transition: background-color .14s, color .14s, opacity .14s; }

/* 채점 중 스피너 */
.spinner { display:inline-block; width:13px; height:13px; border:2px solid #475569;
  border-top-color:#38bdf8; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 정답 축하 */
@keyframes pop { 0%{transform:scale(.96);opacity:.4} 60%{transform:scale(1.02)} 100%{transform:scale(1);opacity:1} }
.celebrate { animation: pop .35s ease; box-shadow: 0 0 0 2px rgba(16,185,129,.5), 0 0 30px -5px rgba(16,185,129,.4); }
@keyframes floatup { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-90px) rotate(20deg);opacity:0} }
.confetti { position:fixed; font-size:26px; pointer-events:none; animation:floatup 1.1s ease-out forwards; z-index:50; }

/* 등장 페이드 */
@keyframes fadein { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
.fadein { animation: fadein .25s ease both; }