/* 수학문제 출처찾기 — 상용 웹 공통 스타일 (모바일 사진앱 webapp/ 팔레트 계승) */
:root {
  --brand:#4f46e5; --brand2:#7c3aed; --brand-d:#3f37c9;
  --ink:#10142b; --sub:#646b83; --faint:#98a0b6;
  --line:#e7e9f4; --bg:#eef0f8; --card:#fff;
  --ok:#059669; --warn:#d97706; --bad:#b91c1c;
  --radius:16px;
  --shadow:0 1px 2px rgba(16,20,43,.04), 0 10px 30px -8px rgba(43,38,104,.10);
  --shadow-lg:0 1px 2px rgba(16,20,43,.05), 0 22px 48px -12px rgba(43,38,104,.22);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Pretendard Variable',Pretendard,'Malgun Gothic',-apple-system,sans-serif;
  background:radial-gradient(1100px 460px at 50% -180px,#e6e9fb,transparent 70%),var(--bg);
  color:var(--ink); min-height:100vh; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a { color:inherit; text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.narrow { max-width:460px; margin:0 auto; padding:0 20px; }

/* ── 상단 네비 ─────────────────────────── */
nav.top {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
nav.top .wrap { display:flex; align-items:center; gap:18px; height:60px; }
nav.top .logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.02rem; }
nav.top .logo .mk {
  width:30px; height:30px; border-radius:9px; flex:none; display:flex;
  align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(150deg,#5b54f0,#8b5cf6);
  font-family:Georgia,serif; font-style:italic; font-size:16px;
}
nav.top .links { display:flex; align-items:center; gap:4px; margin-left:auto; }
nav.top .links a {
  padding:8px 13px; border-radius:9px; font-size:.9rem; font-weight:600; color:var(--sub);
}
nav.top .links a:hover { background:#f1f2fb; color:var(--ink); }
nav.top .links a.active { color:var(--brand); }
.bal-pill {
  display:inline-flex; align-items:center; gap:6px; font-size:.84rem; font-weight:700;
  color:var(--brand-d); background:#eef0fe; border:1px solid #e0e3fb;
  border-radius:999px; padding:6px 12px;
}
.bal-pill b { font-variant-numeric:tabular-nums; }

/* ── 버튼 ─────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border:none; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:.96rem; font-weight:700; letter-spacing:-.01em;
  transition:transform .12s ease, box-shadow .12s, background .12s;
}
.btn:active { transform:translateY(1px); }
.btn svg { width:17px; height:17px; }
.btn-primary { background:linear-gradient(135deg,#5b54f0,#7c3aed); color:#fff;
  box-shadow:0 8px 20px rgba(91,84,240,.28), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primary:hover { box-shadow:0 10px 26px rgba(91,84,240,.36); }
.btn-primary:disabled { background:#c7cbf5; box-shadow:none; cursor:default; }
.btn-ghost { background:#eef0f7; color:#41485f; }
.btn-ghost:hover { background:#e5e8f4; }
.btn-line { background:#fff; color:var(--brand); border:1px solid #d6d9f6; }
.btn-block { width:100%; }
.btn-lg { padding:15px 26px; font-size:1.02rem; border-radius:13px; }

/* ── 카드 ─────────────────────────────── */
.card {
  background:var(--card); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow); border:1px solid rgba(231,233,244,.9);
}
.section-title { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.section-sub { color:var(--sub); margin-top:8px; font-size:.98rem; word-break:keep-all; }

/* ── 폼 ───────────────────────────────── */
.field { margin-bottom:14px; }
.field label { display:block; font-size:.84rem; font-weight:700; color:#41485f; margin-bottom:7px; }
.field input {
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:11px;
  font-family:inherit; font-size:.98rem; background:#fbfbfe; transition:border .12s, box-shadow .12s;
}
.field input:focus { outline:none; border-color:#b9bff5; box-shadow:0 0 0 3px rgba(99,102,241,.14); background:#fff; }
.form-msg { font-size:.86rem; font-weight:600; margin-top:4px; min-height:1.1em; }
.form-msg.err { color:var(--bad); }
.form-msg.ok { color:var(--ok); }
.auth-alt { text-align:center; font-size:.9rem; color:var(--sub); margin-top:18px; }
.auth-alt a { color:var(--brand); font-weight:700; }

/* ── 요금제 카드 ──────────────────────── */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.plan {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.plan.feat { border:1.5px solid #c3b8fb; box-shadow:var(--shadow-lg); position:relative; }
.plan .tag {
  position:absolute; top:-11px; left:22px; font-size:.72rem; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#5b54f0,#7c3aed); padding:4px 11px; border-radius:999px;
}
.plan h3 { font-size:1.06rem; font-weight:800; }
.plan .price { font-size:1.9rem; font-weight:800; letter-spacing:-.03em; margin:12px 0 2px; }
.plan .price span { font-size:.92rem; font-weight:600; color:var(--faint); }
.plan .per { font-size:.82rem; color:var(--sub); }
.plan ul { list-style:none; margin:16px 0 20px; display:flex; flex-direction:column; gap:9px; }
.plan li { font-size:.9rem; color:#41485f; display:flex; align-items:center; gap:8px; }
.plan li::before { content:''; width:16px; height:16px; flex:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23059669' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.5 3.5L13 5'/%3E%3C/svg%3E"); }
.plan .btn { margin-top:auto; }

/* ── 배지·판정(검색 결과) ────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; font-size:.74rem; font-weight:700; }
.badge-exact{ background:#ecfdf5; color:#047857; }
.badge-variant{ background:#eff6ff; color:#1d4ed8; }
.badge-similar{ background:#fffbeb; color:#b45309; }
.badge-none{ background:#fef2f2; color:var(--bad); }
.sim-bar { height:6px; border-radius:99px; background:#eef0f8; overflow:hidden; flex:1; }
.sim-fill { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#818cf8,#6d5ff2); }

/* ── 유틸 ─────────────────────────────── */
.muted { color:var(--sub); }
.center { text-align:center; }
.stack > * + * { margin-top:14px; }
.spinner { width:22px; height:22px; border:3px solid #dfe2f4; border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast {
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:#10142b; color:#fff; padding:12px 20px; border-radius:12px; font-size:.9rem; font-weight:600;
  box-shadow:0 12px 34px rgba(0,0,0,.28); z-index:100; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }
footer.site { border-top:1px solid var(--line); margin-top:52px; padding:30px 0; color:var(--faint); font-size:.82rem; }
footer.site a { color:var(--sub); margin-right:14px; }
footer.site .biz { margin-top:12px; line-height:1.7; }

@media (max-width:720px) {
  .plans { grid-template-columns:1fr; }
  nav.top .links a.hide-m { display:none; }
  .section-title { font-size:1.28rem; }
}