:root {
  --quiz-accent: #2563eb;
  --quiz-accent-2: #14b8a6;
  --quiz-soft: #eff6ff;
  --quiz-bg: #eef4fb;
  --quiz-card: rgba(255,255,255,.94);
  --quiz-line: #dce6f2;
  --quiz-text: #172033;
  --quiz-muted: #64748b;
  --quiz-shadow: 0 16px 42px rgba(15,23,42,.10);
}

body.theme-dark {
  --quiz-bg: #0f172a;
  --quiz-card: rgba(22,30,51,.94);
  --quiz-line: rgba(148,163,184,.24);
  --quiz-text: #e5edf8;
  --quiz-muted: #a8b4c7;
  --quiz-soft: rgba(255,255,255,.05);
  --quiz-shadow: 0 18px 48px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--quiz-text);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--quiz-accent) 16%, transparent), transparent 34%),
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--quiz-accent-2) 14%, transparent), transparent 30%),
    linear-gradient(180deg, #f8fbff, var(--quiz-bg));
  letter-spacing: 0;
}
body.theme-dark {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--quiz-accent) 22%, transparent), transparent 34%),
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--quiz-accent-2) 18%, transparent), transparent 30%),
    linear-gradient(180deg, #111827, #0f172a);
}
a { color: inherit; }
.page { width: min(1240px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 48px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.titlebar { display:inline-flex; align-items:center; flex-wrap:wrap; gap:9px; min-width:240px; }
.brand {
  display:inline-flex; align-items:center; gap:8px; min-height:34px;
  color:#2563eb; text-decoration:none; font-size:16px; font-weight:850;
  border:1px solid rgba(37,99,235,.18); background:rgba(234,245,255,.86);
  border-radius:999px; padding:4px 9px;
}
body.theme-dark .brand { background:rgba(30,41,59,.82); border-color:rgba(147,197,253,.25); color:#93c5fd; }
.titlebar__sep { color:var(--quiz-muted); font-size:18px; font-weight:900; }
.subtitle { display:inline-flex; align-items:center; gap:8px; margin:0; font-size:clamp(18px,2vw,22px); font-weight:850; line-height:1.1; }
.subtitle span { color:var(--quiz-accent); font-size:.82em; font-weight:950; }
.time-info { color:var(--quiz-muted); font-size:13px; font-weight:700; }
.menu-row { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.site-nav { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; flex:1 1 auto; }
.site-nav a, .theme-toggle {
  min-height:34px; display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--quiz-line); background:var(--quiz-card); border-radius:999px;
  padding:7px 11px; text-decoration:none; color:var(--quiz-text); font-size:13px; font-weight:800;
  box-shadow:0 5px 16px rgba(15,23,42,.05);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.site-nav a:hover, .site-nav a.is-active, .theme-toggle:hover {
  transform:translateY(-1px); border-color:var(--quiz-accent); color:var(--quiz-accent); background:var(--quiz-soft);
}
.theme-toggle { cursor:pointer; color:var(--quiz-muted); }
.quiz-card { background:var(--quiz-card); border:1px solid var(--quiz-line); border-radius:22px; box-shadow:var(--quiz-shadow); }
.hero {
  position:relative; overflow:hidden; display:grid; grid-template-columns:1.25fr .75fr; gap:22px;
  padding:34px; margin-bottom:18px;
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--quiz-accent) 12%, transparent), color-mix(in srgb, var(--quiz-accent-2) 9%, transparent) 52%, transparent),
    var(--quiz-card);
}
.hero::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--quiz-accent),var(--quiz-accent-2)); }
.badge { display:inline-flex; align-items:center; width:max-content; gap:6px; font-size:12px; font-weight:900; color:var(--quiz-accent); background:var(--quiz-soft); padding:6px 12px; border-radius:999px; }
.hero h1 { margin:14px 0 12px; font-size:clamp(32px,5vw,58px); line-height:1.04; font-weight:950; }
.hero h1 span { color:var(--quiz-accent); }
.hero p { margin:0; color:var(--quiz-muted); font-size:clamp(15px,1.55vw,18px); line-height:1.72; max-width:760px; }
.hero-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
.btn {
  min-height:48px; border:1px solid var(--quiz-line); background:var(--quiz-card); color:var(--quiz-text);
  border-radius:14px; padding:0 18px; font-size:14px; font-weight:850; font-family:inherit;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:.18s ease;
}
.btn:hover { transform:translateY(-1px); border-color:var(--quiz-accent); color:var(--quiz-accent); }
.btn:focus-visible, .choice:focus-visible { outline:3px solid color-mix(in srgb, var(--quiz-accent) 26%, transparent); outline-offset:3px; }
.btn--primary { border:0; color:#fff; background:linear-gradient(90deg,var(--quiz-accent),var(--quiz-accent-2)); }
.btn--primary:hover { color:#fff; filter:brightness(1.05); }
.btn:disabled { opacity:.48; cursor:not-allowed; transform:none; }
.hero-panel { display:grid; gap:12px; align-content:center; }
.stat { padding:16px; border:1px solid var(--quiz-line); background:var(--quiz-soft); border-radius:18px; }
.stat strong { display:block; font-size:28px; font-weight:950; color:var(--quiz-accent); }
.stat span { color:var(--quiz-muted); font-size:13px; font-weight:750; }
.layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:18px; align-items:start; }
.quiz { min-height:520px; padding:24px; display:flex; flex-direction:column; gap:18px; }
.progress-wrap { display:flex; align-items:center; gap:12px; }
.progress { flex:1; height:10px; background:var(--quiz-soft); border:1px solid var(--quiz-line); border-radius:999px; overflow:hidden; }
.progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--quiz-accent),var(--quiz-accent-2)); transition:width .25s ease; }
.progress-label { font-size:13px; font-weight:850; color:var(--quiz-muted); white-space:nowrap; }
.q-kicker { margin:0 0 8px; color:var(--quiz-accent); font-size:13px; font-weight:900; }
.q-title { margin:0; font-size:clamp(22px,3vw,34px); line-height:1.26; font-weight:950; }
.q-desc { margin:10px 0 0; color:var(--quiz-muted); font-size:14px; line-height:1.7; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.choice {
  min-height:112px; border:1px solid var(--quiz-line); background:var(--quiz-card); color:var(--quiz-text);
  border-radius:18px; padding:18px; font-family:inherit; text-align:left; cursor:pointer;
  transition:.18s ease;
}
.choice:hover { border-color:var(--quiz-accent); background:var(--quiz-soft); transform:translateY(-1px); }
.choice.is-selected { border-color:var(--quiz-accent); background:linear-gradient(135deg, color-mix(in srgb, var(--quiz-accent) 16%, transparent), color-mix(in srgb, var(--quiz-accent-2) 10%, transparent)); }
.choice small { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; margin-bottom:10px; border-radius:50%; background:var(--quiz-soft); color:var(--quiz-accent); font-weight:950; }
.choice b { display:block; font-size:16px; line-height:1.45; }
.quiz-nav { display:flex; justify-content:space-between; gap:10px; margin-top:auto; }
.side-stack { display:grid; gap:14px; }
.info-card { padding:20px; }
.section-title { position:relative; padding-left:12px; margin:0 0 14px; font-size:16px; font-weight:900; }
.section-title::before { content:""; position:absolute; left:0; top:50%; width:4px; height:16px; border-radius:4px; transform:translateY(-50%); background:linear-gradient(180deg,var(--quiz-accent),var(--quiz-accent-2)); }
.hint-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.hint-list li { display:flex; gap:10px; color:var(--quiz-muted); font-size:14px; line-height:1.62; }
.hint-list span { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:50%; background:var(--quiz-soft); color:var(--quiz-accent); font-weight:950; }
.notice { color:var(--quiz-muted); font-size:12.5px; line-height:1.72; padding:14px; border:1px solid var(--quiz-line); background:var(--quiz-soft); border-radius:16px; }
.result { display:grid; gap:20px; padding:24px; margin-top:18px; }
.result-hero { display:grid; grid-template-columns:150px 1fr; gap:22px; align-items:center; }
.result-badge {
  width:140px; height:140px; border-radius:38px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(135deg,var(--quiz-accent),var(--quiz-accent-2)); box-shadow:0 18px 45px color-mix(in srgb, var(--quiz-accent) 25%, transparent);
}
.result-emoji { font-size:34px; }
.result-type { font-size:36px; font-weight:950; }
.result h2 { margin:10px 0 8px; font-size:clamp(27px,4vw,44px); line-height:1.08; font-weight:950; }
.result p { color:var(--quiz-muted); line-height:1.72; }
.axis-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.axis-card { padding:14px; border:1px solid var(--quiz-line); background:var(--quiz-soft); border-radius:16px; }
.axis-top { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; }
.axis-top b { font-size:16px; }
.axis-top span { color:var(--quiz-muted); font-size:12px; }
.axis-bar { height:8px; background:var(--quiz-card); border:1px solid var(--quiz-line); border-radius:999px; overflow:hidden; }
.axis-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--quiz-accent),var(--quiz-accent-2)); }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.result-box { border:1px solid var(--quiz-line); background:var(--quiz-soft); border-radius:18px; padding:16px; }
.result-box h3 { margin:0 0 8px; font-size:15px; }
.result-box ul { margin:0; padding-left:18px; color:var(--quiz-muted); line-height:1.72; }
.result-actions { display:flex; flex-wrap:wrap; gap:10px; }
.faq, .related { margin-top:18px; padding:22px; }
.faq-grid, .related-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.faq-item, .related-card { border:1px solid var(--quiz-line); background:var(--quiz-soft); border-radius:16px; padding:16px; }
.faq-item h3, .related-card h3 { margin:0 0 8px; font-size:15px; }
.faq-item p, .related-card p { margin:0; color:var(--quiz-muted); font-size:14px; line-height:1.62; }
.related-card { text-decoration:none; transition:.18s ease; }
.related-card:hover { transform:translateY(-1px); border-color:var(--quiz-accent); }
.footer { margin-top:26px; text-align:center; font-size:12px; color:var(--quiz-muted); padding:18px 0; }
[hidden] { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}
@media (max-width: 900px) {
  .hero, .layout, .result-hero { grid-template-columns:1fr; }
  .axis-grid, .result-grid, .faq-grid, .related-grid { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .page { width:min(100% - 18px, 1240px); padding-top:10px; }
  .hero, .quiz, .result, .faq, .related { padding:18px; border-radius:18px; }
  .menu-row { justify-content:flex-start; }
  .site-nav { justify-content:flex-start; }
  .site-nav a, .theme-toggle { font-size:13.5px; min-height:36px; padding:7px 10px; }
  .choices { grid-template-columns:1fr; }
  .choice { min-height:88px; }
  .quiz-nav, .result-actions { flex-direction:column; }
  .btn { width:100%; }
}