/* 휴대폰 기준 단일 컬럼 레이아웃 */
* { box-sizing: border-box; }
/* 바탕은 html에 둔다. body를 비워 두어야 퀴즈 배경 캔버스(z-index -1)가 body 바탕에 가리지 않는다 */
html { background: var(--page); }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
}
.site-header, .site-footer { max-width: 480px; margin: 0 auto; padding: 16px; }
.site-name { font-weight: 700; color: inherit; text-decoration: none; }
.site-footer { font-size: 0.85rem; color: #666; }
.site-footer a { color: inherit; }
.container { max-width: 480px; margin: 0 auto; padding: 0 16px 32px; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; margin-top: 1.6em; }

/* 헤더 */
.site-header { display: flex; align-items: center; justify-content: space-between; }
.site-nav { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; }
.site-nav a { color: #555; text-decoration: none; }
.site-streak { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* 성향 아이콘: 도트 그림이라 확대해도 선명하게 둔다 */
.avatar { flex: none; display: block; image-rendering: pixelated; }
.avatar-sm { width: 24px; height: 24px; }
.avatar-lg { width: 40px; height: 40px; }
.site-nav form { margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: #555; cursor: pointer; }

/* 안내 */
.messages { list-style: none; margin: 0 0 16px; padding: 10px 14px; background: #eef6ff; border: 1px solid #c9defa; border-radius: 10px; font-size: 0.95rem; }
.lead { color: #555; margin-top: -8px; }
.notice { font-size: 0.9rem; color: #666; }
.notice a { color: inherit; }
.error { color: #b3261e; font-size: 0.95rem; }

/* 버튼과 선택 항목 */
.btn { display: block; width: 100%; padding: 14px; border: 0; border-radius: 12px; background: #2563eb; color: #fff; font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.btn[disabled] { background: #c8ccd4; cursor: not-allowed; }
.btn-sub { background: #fff; color: #2563eb; border: 1.5px solid #2563eb; margin-top: 10px; }
.choices { border: 0; margin: 0 0 16px; padding: 0; }
.choice { display: flex; align-items: center; gap: 10px; padding: 14px; margin-bottom: 8px; border: 1.5px solid #d9dce3; border-radius: 12px; background: var(--surface); cursor: pointer; }
.choice input { width: 18px; height: 18px; flex: none; }
.choice-text { display: flex; flex-direction: column; gap: 2px; }
.choice-desc { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.choice:has(input:checked) { border-color: #2563eb; background: #eef4ff; font-weight: 600; }

/* ---------- 퀴즈 화면 ---------- */
:root {
  color-scheme: light dark;
  --ink: #1d2433;
  --muted: #5a647c;
  --line: #dde1ea;
  --wash: #eef1f7;
  --accent: #2563eb;
  --accent-wash: #eaf1ff;
  --ok: #276b4d;
  --ok-wash: #e9f5ee;
  --no: #b3392b;
  --no-wash: #fbeae7;
  /* 바탕과 칸, 패널. 어두운 화면에서 값만 바뀐다 */
  --page: #fafafa;
  --surface: #fff;
  /* 내가 고른 다른 답의 표시: 옅은 장미(사용자 선택 2026-11-06). 붉은 X가 눈을 끌지 않게 채도를 낮췄다. --no, --no-wash는 토큰으로 남는다(어두운 화면의 오류 안내가 --no를 쓴다) */
  --mine-bg: #fcf4f2; --mine-line: #e6c3bd; --mine-icon-bg: #f0d6d1; --mine-x: #a9584d; --mine-label: #a0554b;
}
h1, h2, p, .recap-topic, .option-text, .answer-text, .explain, .link-row a { word-break: keep-all; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn:focus-visible, .option:focus-visible, .link-row a:focus-visible { outline: 3px solid #93b4f8; outline-offset: 2px; }
a.btn { display: block; }

/* 홈: 연속 기록과 최근 7일 */
.streak { padding-top: 8px; }
.streak-persona { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.85rem; color: var(--muted); }
.streak-title { margin: 4px 0 0; font-size: 1.9rem; line-height: 1.25; letter-spacing: -0.02em; }
.streak-hint { margin: 2px 0 0; color: var(--muted); }
.streak-protections { margin: 0; font-size: 0.85rem; color: var(--muted); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; list-style: none; margin: 18px 0 8px; padding: 0; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.week-dot { width: 100%; max-width: 40px; aspect-ratio: 1; border-radius: 50%; background: var(--wash); border: 2px solid transparent; }
.week-label { font-size: 0.8rem; color: var(--muted); }
.is-attended .week-dot { background: var(--accent); }
.is-protected .week-dot { background: transparent; border: 2px dashed var(--accent); }
.is-today .week-dot { box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--accent); }
.is-today .week-label { color: var(--ink); font-weight: 700; }

/* 홈: 오늘의 카드 */
.panel { margin-top: 22px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.panel-title { margin: 0; font-size: 1.15rem; }
.panel-sub { margin: 4px 0 16px; color: var(--muted); }

/* 진행 표시 */
.progress { display: flex; align-items: center; gap: 12px; margin: 4px 0 22px; }
.progress-steps { flex: 1; display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.progress-steps li { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.progress-steps .done { background: var(--ok); }
.progress-steps .current { background: var(--accent); }
.progress-count { margin: 0; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 문제 */
.kind-tag { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-size: 0.8rem; font-weight: 700; }
.question-text { margin: 0 0 22px; font-size: 1.3rem; line-height: 1.55; letter-spacing: -0.01em; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--option-bg, var(--surface)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.08s ease; }
.option:active { border-color: var(--accent); background: var(--accent-wash); }
@media (hover: hover) { .option:hover { border-color: var(--accent); background: var(--accent-wash); } }
.option-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--option-mark-bg, var(--wash)); color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.option-text { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }

/* 결과: 맞은 답은 초록 체크, 내가 고른 다른 답은 붉은 X. 색만으로 구분하지 않고 아이콘과 라벨을 함께 쓴다 */
.soft { margin: 0 0 6px; font-size: 1.5rem; letter-spacing: -0.02em; }
.verdict { display: flex; align-items: center; gap: 10px; }
.verdict-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.verdict.is-ok .verdict-icon { background: var(--ok); }
.verdict.is-no .verdict-icon { background: var(--mine-icon-bg); color: var(--mine-x); }
/* 문제 문장(.recap)은 문제 화면의 .question-text와 같은 본문 색이다. 문제, 정답, 설명은 잘 보여야 한다(사용자, 2026-11-06) */
.recap { margin: 0 0 18px; font-size: 0.95rem; }
.answer-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; padding: 12px 14px; border: 2px solid transparent; border-radius: 12px; }
.answer-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 6px; color: #fff; }
.answer-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.answer-who { font-size: 0.8rem; font-weight: 700; }
.answer-text { line-height: 1.5; }
.answer-row.ok { background: var(--ok-row-bg, var(--ok-wash)); border-color: var(--ok); }
.answer-row.ok .answer-icon { background: var(--ok); }
.answer-row.ok .answer-who { color: var(--ok); }
.answer-row.mine { background: var(--mine-bg); border-color: var(--mine-line); }
.answer-row.mine .answer-icon { background: var(--mine-icon-bg); color: var(--mine-x); }
.answer-row.mine .answer-who { color: var(--mine-label); }
/* 내가 고른 답 글씨는 정답보다 흐리게 둔다. 바탕과의 대비 5.08 */
.answer-row.mine .answer-text { color: var(--muted); }
.explain { margin: 16px 0 14px; padding: 14px; background: var(--explain-bg, var(--surface)); border: 1px solid var(--line); border-radius: 12px; line-height: 1.7; }
.link-row { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 8px; padding: 0; }
.link-row a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; padding: 10px 0; color: var(--accent); font-weight: 600; text-decoration: none; }
.link-row a:hover { text-decoration: underline; }
/* 아래 버튼 막대: 평소에는 비워 배경이 이어지게 하고, 내용이 막대 밑으로 지나갈 때만 반투명 막을 깐다(bottom-bar.js가 is-stuck을 붙인다) */
.bottom-bar { position: sticky; bottom: 0; margin: 20px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: none; transition: background-color 0.2s; }
.bottom-bar.is-stuck { background: rgba(250, 250, 250, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--line); }

/* 완료 */
.done-title { margin: 12px 0 6px; font-size: 1.75rem; line-height: 1.35; letter-spacing: -0.02em; }
.done-sub { margin: 0 0 20px; color: var(--muted); }
.recap-list { list-style: none; margin: 0 0 24px; padding: 0; }
.recap-item { padding: 12px 0 4px; border-top: 1px solid var(--line); }
.recap-topic { margin: 0; font-weight: 700; line-height: 1.5; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.actions form { margin: 0; }
.actions .btn-sub { margin-top: 0; }

/* 나중에 다시 보기 */
.save-form { margin: 0; }
.save-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.save-btn:hover { border-color: var(--accent); color: var(--accent); }
.save-btn.is-saved { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.save-btn.is-saved svg { fill: currentColor; }
.save-btn:focus-visible { outline: 3px solid #93b4f8; outline-offset: 2px; }
.saved-answer { margin: 2px 0 6px; color: var(--muted); font-size: 0.95rem; word-break: keep-all; overflow-wrap: anywhere; }
.saved-answer-label { font-weight: 700; color: var(--ok); }
.saved-link { margin: 14px 0 0; text-align: center; }
.saved-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }

/* 세부 내용 */
.detail-title { margin: 0 0 8px; font-size: 1.4rem; line-height: 1.45; letter-spacing: -0.01em; }
.detail-body p { margin: 0 0 0.8em; line-height: 1.75; }

/* 답을 보내는 동안의 표시 (quiz-fx.js) */
.option.picked { transform: scale(0.98); border-color: var(--accent); background: var(--accent-wash); }
.option:disabled { cursor: default; }
.option:disabled:not(.picked) { opacity: 0.55; }

/* 시그널 락 (static/fx/). 움직임과 시간의 근거는 docs/mockups/fx3d-preview/ */
/* 캔버스: 페이지 위에 투명하게 얹힌다. 이벤트를 받지 않는다 */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; display: none; }
/* 받은 화면을 지금 화면 위에 보이지 않게 겹쳐 위치를 잰다. 지금 화면의 자리는 변하지 않는다 */
main.fx-under { position: absolute; left: 0; right: 0; visibility: hidden; }
/* 정답 카드와 고른 카드가 빛을 받을 때. 테두리 두께는 그대로라 자리가 변하지 않는다. .option.picked보다 뒤에 둔다 */
:root { --way: #b4690e; --way-wash: #fdf3e2; }
.option.fx-lit-right-wash { background: var(--ok-wash); }
.option.fx-lit-way-wash { background: var(--way-wash); }
.option.fx-lit-right { border-color: var(--ok); }
.option.fx-lit-way { border-color: var(--way); }
/* 마무리의 눈금 링 자리. JS가 재생할 때만 만든다 */
.fx-stage { position: relative; height: 268px; }
.fx-residue { position: absolute; pointer-events: none; }

/* "맞았어요" 연출 1 잠금 (static/fx/win-lock.js). 움직임, 시간, 색의 근거는 docs/mockups/result-fx-preview/ (preview.css 연출 절)
   색은 이펙트 팔레트(static/fx/core.js PALETTE.right의 line, tint, halo)를 옮긴 값이다. 어두운 화면 값은 아래 어두운 화면 절에 있다.
   덧그림은 모두 absolute, pointer-events: none, aria-hidden이라 자리를 차지하지 않는다.
   기본 농도 0: 애니메이션(fill: backwards)이 끝나면 저절로 보이지 않고, 곧바로 지워진다.
   아이콘의 position: relative는 연출이 없을 때도 둔다. 끝 모습이 연출이 없을 때와 같아야 하기 때문이다 */
:root { --fx-line: rgb(3 102 84); --fx-tint: rgb(10 148 122); --fx-halo: rgb(41 194 161); --fx-glow: rgb(41 194 161); }
.verdict-icon { position: relative; }
.win-hex, .win-ticks { position: absolute; left: 50%; top: 50%; overflow: visible; opacity: 0; pointer-events: none; }
.win-hex polygon { fill: none; stroke: var(--fx-line); stroke-linejoin: round; }
.win-hex.is-inner polygon { stroke: var(--fx-tint); }
.win-ticks line { stroke: var(--fx-line); stroke-width: 0.9; stroke-linecap: round; }
.win-rim { position: absolute; left: -31px; top: -31px; width: 96px; height: 96px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, transparent 0 16px, color-mix(in srgb, var(--fx-glow) 55%, transparent) 18.5px, transparent 38px); }
/* color-mix()가 없는 브라우저(iOS Safari 16.2 미만): var()가 든 값은 계산할 때 버려져 빛이 빠진다.
   같은 색(--fx-glow를 55% 알파로)을 직접 적는다. 투명과 섞는 color-mix는 알파만 줄이므로 값이 같다 */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .win-rim { background: radial-gradient(circle, transparent 0 16px, rgb(41 194 161 / 0.55) 18.5px, transparent 38px); }
}

/* 퀴즈 배경 (static/fx/background.js). 문제와 결과 화면 뒤에서 아주 연하게 움직인다. 근거는 docs/mockups/quiz-background-preview/ */
/* 캔버스: 글자 뒤에 고정되고 이벤트를 받지 않는다. 레이아웃에 영향이 없다. 완료 화면으로 넘어가면 흐려지며 사라진다 */
#quiz-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; transition: opacity 0.6s; }
#quiz-bg.is-off { opacity: 0; }
/* WebGL2가 없거나 문맥을 잃으면 움직이지 않는 옅은 그라데이션으로 대신한다 */
#quiz-bg.is-flat { background-image: radial-gradient(120% 70% at 20% 10%, rgba(120, 150, 240, 0.14), transparent), radial-gradient(120% 70% at 85% 80%, rgba(80, 190, 180, 0.12), transparent); }
/* 배경이 보이는 화면에서만 칸에 배경이 아주 조금 비친다. 변수로만 바꿔 .option.picked와 빛 받은 칸보다 앞서지 않게 한다 */
main[data-quiz-bg] { --option-bg: rgba(255, 255, 255, 0.78); --option-mark-bg: rgba(238, 240, 246, 0.9); }

h1[tabindex="-1"]:focus { outline: none; }
.sound-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.sound-toggle input { width: 18px; height: 18px; flex: none; }

@media (prefers-reduced-motion: reduce) { .option, .option.picked { transition: none; } }

/* ---------- 어두운 화면: 휴대폰 설정을 따른다 ----------
   색만 바꾸고 레이아웃은 그대로 둔다. 바탕, --accent, 반투명 칸은 docs/mockups/quiz-background-preview/,
   그 밖의 토큰과 버튼, 머리글, 바닥글은 docs/mockups/fx3d-preview/preview.css의 값이다.
   관리 화면(/admin/)은 이 파일을 쓰지 않는다. 성향 아이콘은 자기 바탕이 있는 그림이라 그대로 둔다 */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ebf1; --muted: #9aa3b4; --line: #2a303b; --wash: #1e232c;
    --accent: #7ea2ff; --accent-wash: #1a2740;
    --ok: #57c49c; --ok-wash: #10261e;
    --no: #e68272; --no-wash: #2a1815;
    --way: #e6a64c; --way-wash: #2a1f0e;
    --page: #0b0d13; --surface: #15181f;
    --mine-bg: rgba(38, 27, 26, 0.82); --mine-line: #6b4a45; --mine-icon-bg: #4b3330; --mine-x: #e0aaa1; --mine-label: #d9a39a;
  }
  body { color: var(--ink); }
  .site-nav a, .link-button { color: #a8afbd; }
  .site-footer { color: #7f8797; }
  .btn { background: #2f6be6; }
  .btn-sub { background: transparent; color: #9dbcf8; border-color: #3f66b6; }
  .verdict-icon, .answer-icon { color: #0d0f14; }
  main[data-quiz-bg] {
    --option-bg: rgba(22, 26, 35, 0.72); --option-mark-bg: rgba(38, 43, 55, 0.9);
    --explain-bg: rgba(22, 26, 35, 0.72);
    --ok-row-bg: rgba(16, 38, 30, 0.82);
  }
  .bottom-bar.is-stuck { background: rgba(11, 13, 19, 0.72); }
  /* "맞았어요" 연출: 이펙트의 어두운 화면 값(PALETTE.dark.right)과 빛. 값은 result-fx-preview의 preview.css와 같다 */
  :root { --fx-line: rgb(133 245 209); --fx-tint: rgb(56 219 179); --fx-halo: rgb(20 158 128); --fx-glow: rgb(56 219 179); }
  .win-hex, .win-ticks { filter: drop-shadow(0 0 2px var(--fx-halo)); }
  .win-rim { mix-blend-mode: screen; }
  @supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .win-rim { background: radial-gradient(circle, transparent 0 16px, rgb(56 219 179 / 0.55) 18.5px, transparent 38px); }
  }
  /* 두 시안에 없던 값: 새 색을 만들지 않고 같은 토큰으로 맞춘다 */
  .lead, .notice { color: var(--muted); }
  .error { color: var(--no); }
  .messages { background: var(--accent-wash); border-color: var(--line); }
  .choice { border-color: var(--line); }
  .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
  .btn[disabled] { background: var(--line); color: var(--muted); }
}