:root {
  --paper: #f5f5f1;
  --grid: #e9e9e2;
  --card: #ffffff;
  --ink: #161d33;
  --muted: #5d6579;
  --line: #e2e3e0;
  --navy: #1a2352;
  --navy-soft: #eef0f8;
  --accent: #2148d4;
  --pen: #d9441a;
  --pen-soft: #fdf1ec;
  --ok: #1d7a52;
  --ok-soft: #e9f5ef;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { width: min(720px, 100%); margin: 0 auto; padding: 0 16px; }

/* ---------- 상단 ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(245, 245, 241, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 12px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font-weight: 800; font-size: 17px; line-height: 1.15; }
.brand small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--navy); color: #fff; font-size: 19px; font-weight: 700;
}
.account { display: flex; align-items: center; gap: 8px; }
.chip-btn {
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 14px; font-weight: 700;
}
.chip-btn:hover { border-color: #c9cbd4; }
.member {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700;
}
.member .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.text-btn { border: 0; background: none; padding: 8px 4px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 소개 ---------- */
.intro { padding: 36px 0 22px; }
.intro h1 { font-size: clamp(28px, 7vw, 40px); font-weight: 800; line-height: 1.28; letter-spacing: -0.025em; }
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: ""; position: absolute; left: -2px; right: -4px; bottom: 0.02em; height: 0.36em; z-index: -1;
  background: var(--pen); opacity: .22; border-radius: 3px 8px 4px 10px; transform: rotate(-1.2deg);
}
.intro p { margin-top: 12px; color: var(--muted); font-size: 16px; }

.quota {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding: 8px 14px 8px 10px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600;
}
.quota:empty { display: none; }
.quota .pips { display: inline-flex; gap: 4px; }
.quota .pip { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--navy); }
.quota .pip.full { background: var(--navy); }
.quota .inf { font-weight: 800; color: var(--ok); }
.quota.off { border-color: rgba(217, 68, 26, .35); background: var(--pen-soft); color: var(--pen); }
.quota .off-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pen); }
.quota button { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 질문 양식 ---------- */
.sheet {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  box-shadow: 0 1px 0 rgba(22, 29, 51, .03), 0 12px 32px -18px rgba(22, 29, 51, .18);
}
.sheet > * + * { margin-top: 24px; }
.step { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 800; }
.step b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 12px; font-weight: 700;
}
.step-sub { color: var(--muted); font-size: 13px; font-weight: 600; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modes legend { grid-column: 1 / -1; float: left; width: 100%; }
.mode {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 14px; border: 1.5px solid var(--line); border-radius: 14px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--navy-soft); color: var(--navy);
}
.mode-icon svg { width: 22px; height: 22px; }
.mode-icon.pen { background: var(--pen-soft); color: var(--pen); }
.mode-text b { display: block; font-size: 16px; font-weight: 800; line-height: 1.35; }
.mode-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.mode:hover { border-color: #c9cbd4; }
.mode:has(input:checked) { border-color: var(--navy); background: #fafbfe; box-shadow: inset 0 0 0 1px var(--navy); }
.mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--card);
}
.mode:has(input:checked)::after { border-color: var(--navy); background: radial-gradient(circle, var(--navy) 0 4px, var(--card) 5px); }

.drop {
  position: relative; border: 1.5px dashed #c7c9d2; border-radius: 14px;
  background: #fbfbf9; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--navy); background: var(--navy-soft); }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; text-align: center; pointer-events: none; }
.drop-empty svg { width: 28px; height: 28px; color: var(--navy); margin-bottom: 4px; }
.drop-empty b { font-size: 15px; }
.drop-empty small { color: var(--muted); font-size: 13px; }
.drop.has { border-style: solid; border-color: var(--line); background: var(--card); }
.drop.has .drop-empty { display: none; }
.drop.has input { display: none; }
.previews { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; }
.previews:empty { display: none; }
.thumb { position: relative; width: 120px; height: 120px; border-radius: 10px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .n { position: absolute; left: 6px; top: 6px; padding: 0 7px; border-radius: 999px; background: rgba(22, 29, 51, .78); color: #fff; font-size: 12px; font-weight: 700; }
.thumb .x {
  position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(22, 29, 51, .78); color: #fff; font-size: 17px; line-height: 1;
}
.add-more {
  display: grid; place-items: center; width: 120px; height: 120px; border-radius: 10px;
  border: 1.5px dashed #c7c9d2; background: none; color: var(--muted); font-size: 13px; font-weight: 700;
}
.add-more span { display: block; font-size: 24px; line-height: 1; color: var(--navy); }

textarea {
  display: block; width: 100%; padding: 12px 14px; resize: vertical; min-height: 64px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fbfbf9; font-size: 15px;
}
textarea:focus { outline: none; border-color: var(--navy); background: var(--card); }

.submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; border: 0; border-radius: 14px;
  background: var(--navy); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
  transition: filter .15s, transform .05s;
}
.submit:hover { filter: brightness(1.15); }
.submit:active { transform: translateY(1px); }
.submit:disabled { background: #9da2b6; cursor: not-allowed; filter: none; }
.form-msg { min-height: 1.4em; margin-top: 10px !important; color: var(--pen); font-size: 14px; font-weight: 600; text-align: center; }
.form-msg:empty { min-height: 0; margin-top: 0 !important; }

/* ---------- 결과 (답안지) ---------- */
.result {
  position: relative; margin-top: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px 20px 34px;
  box-shadow: 0 12px 32px -18px rgba(22, 29, 51, .22);
  scroll-margin-top: 76px;
}
/* 공책 왼쪽 여백선 */
.result::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 1.5px;
  background: rgba(217, 68, 26, .28);
}
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.result-kind { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: .02em; }
.result-time { color: var(--muted); font-size: 13px; }
.result-problem { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; }
.result-problem img { height: 84px; width: auto; border-radius: 8px; border: 1px solid var(--line); }

.stamp {
  flex: none; display: grid; place-items: center; text-align: center;
  width: 86px; height: 86px; margin: -6px -4px -10px 0; border-radius: 50%;
  border: 3px double currentColor; font-size: 18px; font-weight: 900; line-height: 1.1;
  transform: rotate(-12deg); animation: stamp .35s cubic-bezier(.3, 1.6, .5, 1) both;
}
.stamp small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.stamp.correct { color: var(--ok); }
.stamp.wrong { color: var(--pen); }
.stamp.unclear { color: var(--muted); }
@keyframes stamp { from { transform: rotate(-12deg) scale(1.8); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .92; } }

.progress { display: flex; gap: 6px; margin-top: 18px !important; padding: 0; list-style: none; counter-reset: p; }
.progress li {
  flex: 1; position: relative; padding-top: 12px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center;
}
.progress li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--line); }
.progress li.on { color: var(--navy); }
.progress li.on::before { background: linear-gradient(90deg, var(--navy) 40%, #6b74a8 50%, var(--navy) 60%); background-size: 300% 100%; animation: flow 1.6s linear infinite; }
.progress li.done { color: var(--navy); }
.progress li.done::before { background: var(--navy); }
@keyframes flow { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.waiting { margin-top: 14px; color: var(--muted); font-size: 14px; }
.waiting b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 풀이 본문 */
.answer { margin-top: 8px; font-size: 16px; line-height: 1.85; counter-reset: sec; }
.answer > * + * { margin-top: 10px; }
.answer h2, .answer h3 {
  display: flex; align-items: center; gap: 8px;
  margin-top: 26px; font-size: 16px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em;
}
.answer h2::before {
  counter-increment: sec; content: counter(sec);
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: var(--navy-soft); color: var(--navy); font-size: 13px;
}
.answer h2:first-child { margin-top: 18px; }
.answer ol, .answer ul { padding-left: 1.3em; }
.answer li + li { margin-top: 6px; }
.answer strong { font-weight: 800; }
.answer code { padding: 1px 5px; border-radius: 5px; background: var(--paper); font-size: .92em; }
.answer table { border-collapse: collapse; display: block; overflow-x: auto; }
.answer th, .answer td { border: 1px solid var(--line); padding: 6px 10px; }
.answer .katex-display { margin: 12px 0; padding: 4px 2px; overflow-x: auto; overflow-y: hidden; }
.answer .katex { font-size: 1.06em; }
/* '답' 칸 강조 */
.answer h2.final + p, .answer h2.final + ul, .answer h2.final + ol {
  display: inline-block; padding: 8px 16px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 800;
}
.answer h2.final + p .katex { color: #fff; }
/* 빨간펜: 틀린 지점 인용 */
.answer blockquote {
  position: relative; margin: 12px 0; padding: 12px 14px 12px 16px;
  border-left: 3px solid var(--pen); border-radius: 0 10px 10px 0; background: var(--pen-soft);
}
.answer blockquote::before {
  content: "여기서 틀렸어요"; display: block; margin-bottom: 4px;
  color: var(--pen); font-size: 12px; font-weight: 800;
}
.answer blockquote p { text-decoration: underline wavy rgba(217, 68, 26, .7); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.answer.correct blockquote { border-left-color: var(--ok); background: var(--ok-soft); }
.answer.correct blockquote::before { content: "학생 풀이"; color: var(--ok); }
.answer.correct blockquote p { text-decoration: none; }
.answer .caret::after { content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.answer .err { padding: 14px 16px; border-radius: 12px; background: var(--pen-soft); color: var(--pen); font-weight: 700; }

.result-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--line); }
.result-foot p { flex: 1 1 240px; color: var(--muted); font-size: 13px; }
.ghost { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--navy); border-radius: 12px; background: var(--card); color: var(--navy); font-weight: 800; }
.ghost:hover { background: var(--navy-soft); }

/* ---------- 기록 ---------- */
.history { margin-top: 34px; }
.history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.history h2, .rules h2 { font-size: 17px; font-weight: 800; }
.history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0; list-style: none; }
.history-list button {
  display: block; width: 100%; padding: 0; overflow: hidden; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.history-list button:hover { border-color: #c9cbd4; }
.history-list .h-img { position: relative; height: 92px; background: var(--paper); }
.history-list .h-img img { width: 100%; height: 100%; object-fit: cover; }
.history-list .h-tag {
  position: absolute; left: 8px; bottom: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 11px; font-weight: 700;
}
.history-list .h-tag.wrong { background: var(--pen); }
.history-list .h-tag.correct { background: var(--ok); }
.history-list .h-body { padding: 8px 10px 10px; }
.history-list .h-body b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.history-list .h-body small { color: var(--muted); font-size: 12px; }

/* ---------- 안내 ---------- */
.rules { margin: 34px 0 48px; padding: 20px; border-radius: var(--radius); background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
.rules ul { margin-top: 10px; padding-left: 1.1em; color: var(--muted); font-size: 14px; }
.rules li + li { margin-top: 6px; }
.rules li b { color: var(--ink); }
.rules-link { display: inline-block; margin-top: 14px; color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }

/* ---------- 로그인 창 ---------- */
dialog {
  width: min(400px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 18px;
  background: var(--card); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(22, 29, 51, .45);
}
dialog::backdrop { background: rgba(22, 29, 51, .45); }
dialog form { padding: 22px 20px 20px; }
dialog form > * + * { margin-top: 14px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; }
.dialog-head h2 { font-size: 19px; font-weight: 800; }
.close { width: 40px; height: 40px; margin: -8px -8px -8px 0; border: 0; border-radius: 10px; background: none; font-size: 26px; line-height: 1; color: var(--muted); }
.dialog-sub { margin-top: 4px !important; color: var(--muted); font-size: 14px; }
.field { display: block; }
.field span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.field input {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfbf9; font-size: 16px;
}
.field input:focus { outline: none; border-color: var(--navy); background: var(--card); }
.dialog-note { color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 480px) {
  .intro { padding-top: 26px; }
  .sheet { padding: 18px 14px 16px; }
  .modes { gap: 8px; }
  .mode { padding: 14px 12px; }
  .mode-text b { font-size: 15px; }
  .thumb, .add-more { width: calc((100% - 20px) / 3); height: auto; aspect-ratio: 1; }
  .result { padding: 18px 14px 16px 26px; }
  .result::before { left: 14px; }
  .stamp { width: 74px; height: 74px; font-size: 16px; }
  .brand small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stamp, .progress li.on::before, .answer .caret::after { animation: none; }
}