:root{
  --bg: #EFEDE5;
  --surface: #FAF9F4;
  --ink: #232620;
  --ink-soft: #5B5B4F;
  --ink-faint: #8B8A7B;
  --border: #DEDACB;
  --border-strong: #C9C4AF;
  --accent: #3B4A8C;
  --accent-soft: #E7E9F3;
  --accent-ink: #2C3768;
  --good: #2F7D5C;
  --good-bg: #E4F0E9;
  --warn: #A5720A;
  --warn-bg: #F5EBD6;
  --bad: #AE4A3D;
  --bad-bg: #F5E4E1;
  --shadow: 0 1px 2px rgba(35,38,32,0.06), 0 8px 24px -12px rgba(35,38,32,0.18);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #191A16;
    --surface: #212319;
    --ink: #EBE8DC;
    --ink-soft: #B4B0A0;
    --ink-faint: #837F70;
    --border: #35362B;
    --border-strong: #46473A;
    --accent: #8D97D6;
    --accent-soft: #2A2E4A;
    --accent-ink: #C3CAEF;
    --good: #6FBE97;
    --good-bg: #1E332A;
    --warn: #D9A94C;
    --warn-bg: #382E19;
    --bad: #E2897C;
    --bad-bg: #3A2420;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  line-height:1.6;
  display:flex;
  justify-content:center;
  padding: 40px 16px 80px;
}

.app{ width:100%; max-width:600px; }

.app-head{ margin-bottom:22px; position:relative; }
.logout-link{
  position:absolute; top:0; right:0;
  font-family:inherit; font-size:12.5px; color:var(--ink-faint);
  background:none; border:1px solid var(--border); border-radius:999px;
  padding:5px 12px; cursor:pointer;
}
.logout-link:hover{ color:var(--ink); border-color:var(--border-strong); }
.app-head .kicker{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:600; margin:0 0 6px;
}
.app-head h1{ font-size:21px; margin:0; }

.crumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.crumb{
  font-size:12.5px; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:5px 12px;
}
.crumb b{ color:var(--ink); font-weight:600; }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:26px 24px; box-shadow:var(--shadow);
}

.q-title{ font-size:19px; font-weight:700; margin:0 0 10px; line-height:1.45; }
.q-note{ font-size:13px; color:var(--ink-faint); background:var(--bg); border:1px dashed var(--border-strong); border-radius:8px; padding:10px 12px; margin: 0 0 18px; }

.options{ display:flex; flex-direction:column; gap:10px; }
.opt-btn{
  text-align:left; width:100%;
  font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--border-strong); border-radius:10px;
  padding:13px 16px; cursor:pointer;
  transition: border-color .12s ease, background .12s ease, transform .06s ease;
}
.opt-btn:hover{ border-color:var(--accent); background:var(--accent-soft); }
.opt-btn:active{ transform: scale(0.99); }
.opt-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.result .badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; padding:5px 13px; border-radius:999px; margin-bottom:14px;
}
.badge.good{ background:var(--good-bg); color:var(--good); }
.badge.warn{ background:var(--warn-bg); color:var(--warn); }
.badge.bad{ background:var(--bad-bg); color:var(--bad); }

.result h2{ font-size:20px; margin:0 0 10px; }
.result p{ font-size:15px; color:var(--ink); margin:0 0 22px; }

.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.actions button{
  font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  border-radius:8px; padding:10px 16px; border:1px solid var(--border-strong);
  background:var(--bg); color:var(--ink);
}
.actions button.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.actions button:hover{ opacity:0.88; }

.draft-tag{
  font-size:11.5px; color:var(--ink-faint); margin-top:26px; text-align:center;
}

.card.state{ text-align:center; color:var(--ink-soft); }
.card.state.error{ text-align:left; border-color:var(--bad); }
.card.state.error b{ color:var(--bad); }
.card.state .detail{ font-size:13px; color:var(--ink-faint); margin-bottom:12px; }

@media (prefers-reduced-motion: reduce){
  .opt-btn{ transition:none; }
}