/* ui.css — 새 설문 화면(목록·수행·관리) 공통 스타일
 *
 * 기존 화면(default.style.css, quiz.css 등)과 섞이지 않도록 클래스 앞에 sv- 를 붙인다.
 * 값은 4px 단위 정수, 색은 아래 변수에서만 고른다. */

:root {
  --sv-bg: #f5f6f8;
  --sv-surface: #ffffff;
  --sv-ink: #1b2130;
  --sv-ink-soft: #5c6675;
  --sv-line: #e3e6ec;
  --sv-brand: #3d5afe;
  --sv-brand-dark: #2f47cc;
  --sv-brand-soft: #eef1ff;
  --sv-brand-bg: #8d80f2;          /* 본사이트 히어로 배경 */
  --sv-ok: #12805c;
  --sv-warn: #b25e09;
  --sv-danger: #c0392b;
  --sv-font-base: Roboto, "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;  /* 영문 → 한글(ui.md §2) */
  --sv-radius: 14px;
  --sv-shadow: 0 2px 8px rgba(27, 33, 48, 0.06);
  --sv-shadow-lift: 0 12px 28px rgba(27, 33, 48, 0.12);
}

* { box-sizing: border-box; }

/* 화면 코드가 hidden 을 붙여 감춘다 — display 를 정한 클래스보다 앞서게 한다 */
[hidden] { display: none !important; }

body.sv-body {
  margin: 0;
  background: var(--sv-bg);
  color: var(--sv-ink);
  font-family: var(--sv-font-base);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.sv-shell {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

/* ─── 머리말 ─────────────────────────────── */
.sv-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sv-line);
}

.sv-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}

.sv-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sv-header__brand i { color: var(--sv-brand); }
.sv-header__brand img { display: block; height: 28px; }
.sv-header__spacer { margin-left: auto; }

.sv-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-header__user {
  font-size: 14px;
  color: var(--sv-ink-soft);
}

/* ─── 버튼 ───────────────────────────────── */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  background: var(--sv-surface);
  color: var(--sv-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sv-btn:hover { background: #f0f2f6; }
.sv-btn:disabled { opacity: 0.5; cursor: default; }

.sv-btn--primary {
  border-color: var(--sv-brand);
  background: var(--sv-brand);
  color: #fff;
}

.sv-btn--primary:hover { background: var(--sv-brand-dark); border-color: var(--sv-brand-dark); }

.sv-btn--ghost { border-color: transparent; background: transparent; color: var(--sv-ink-soft); }
.sv-btn--ghost:hover { background: #eceff4; }

.sv-btn--sm { height: 32px; padding: 0 12px; font-size: 14px; }
.sv-btn--lg { height: 52px; padding: 0 28px; font-size: 17px; }
.sv-btn--block { width: 100%; }
.sv-btn--danger { color: var(--sv-danger); }