/* 웹 성향검사 — 퀴즈·결과 전용 스타일 (2026-08-08 신설, 문서 20)
 * 🔴 색·폰트·간격 토큰은 styles.css 의 :root 를 그대로 쓴다(앱 06 디자인 시스템과 동일).
 *    여기서 새 색을 정의하지 않는다 — 정의하면 앱과 갈린다. */

/* 🔴🔴 **iOS 사파리 더블탭 확대 차단.** [실기 2026-08-08] 선택지를 빠르게 연속 탭하면
   다음 문항에서 화면이 살짝 확대됐다 — 버튼을 **하단에 고정**해 둔 탓에 사파리 눈에는
   「같은 좌표를 300ms 안에 두 번 탭」으로 보인다(우리가 잘한 것이 역효과를 낸 자리).
   🚩 `manipulation` 은 **더블탭 확대만** 끈다 — 스크롤·핀치 확대는 그대로다.
   🔴 `user-scalable=no` 는 쓰지 않는다 — 접근성을 해치고 iOS 10+ 는 무시한다. */
.q-wrap, .q-opt, .q-btn, .q-back, .badge, .q-logo { touch-action: manipulation; }

.q-wrap { max-width: 520px; margin: 0 auto; padding: 20px var(--pad) 64px; min-height: 100dvh; display: flex; flex-direction: column; }
/* 🔴 데스크톱에서까지 화면 끝까지 늘리면 질문과 선택지가 너무 멀어진다.
   폭 640px 이상 = 사실상 데스크톱(폰은 그보다 좁다). */
@media (min-width: 640px) { .q-wrap { min-height: min(100dvh, 780px); } }
.q-top { display: flex; align-items: center; min-height: 44px; margin-bottom: 28px; }
/* 🔴 44×44 는 탭 타깃 하한이다. 좌측 음수 마진으로 글자 시작선과 화살표 중심을 맞춘다. */
.q-back { width: 44px; height: 44px; margin-left: -11px; display: inline-flex; align-items: center; justify-content: center;
          background: none; border: 0; font: inherit; font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; }
.q-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; color: var(--ink); text-decoration: none; }
/* 🔴 로고는 <img> 가 아니라 인라인 SVG 여야 한다 — 파일이 fill="currentColor" 라
   <img> 로 부르면 별도 문서로 렌더돼 색 상속이 끊기고 검정으로 나온다(2026-08-08 실측).
   랜딩 헤더와 같은 마크업(.mark + 보라 하드코딩)을 쓴다. */
.q-logo .mark { width: 26px; height: 26px; display: inline-flex; }
.q-logo .mark svg { width: 100%; height: 100%; }

/* ── 진입 ── */
.q-eyebrow { color: var(--brand-ink); font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.q-title { font-size: clamp(28px, 7.5vw, 36px); font-weight: 800; line-height: 1.28; letter-spacing: -.02em; margin: 10px 0 14px; }
.q-sub { color: var(--sub); font-size: 15px; line-height: 1.6; margin: 0 0 26px; }
.q-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.q-chip { padding: 12px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; color: var(--ink); }
.q-chip.is-on { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); }
/* 🔴 흐린 칩 = 「아직 안 밝혀진 유형」. 호기심 장치라 앱 진입 화면에서 그대로 가져왔다. */
.q-chip.is-veil { color: transparent; text-shadow: 0 0 7px rgba(108, 106, 119, .55); border-color: var(--line); background: var(--ground); user-select: none; }
.q-note { color: var(--sub-dim); font-size: 13.5px; margin: 0 0 26px; }

/* ── 진행 ── */
/* 🚩 선택지 하단 고정 — 남는 공간을 질문과 선택지 「사이」가 흡수한다(margin-top:auto).
   그래서 문항 길이가 달라져도 A/B 의 y 좌표가 안 움직인다. */
#quiz { flex: 1; display: flex; flex-direction: column; }
.q-opts { margin-top: auto; padding-top: 32px; }
.q-hint { margin: 14px 0 0; text-align: center; color: var(--sub-dim); font-size: 13.5px; }
.q-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.q-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.q-bar > i { display: block; height: 100%; background: var(--cta-grad); border-radius: 999px; transition: width .28s ease; }
/* 🔴 `min-width` 가 없으면 「1 / 12」→「12 / 12」 로 글자가 넓어지며 **진행바 길이가 튄다**.
   두 자리 수까지 담기는 폭으로 고정하고 우측 정렬한다. */
.q-count { flex: none; min-width: 46px; text-align: right; color: var(--sub-dim); font-size: 14px; font-weight: 700; }
/* 🚩 현재 번호만 브랜드색 — 앱과 같다(「6/12」에서 6 만 보라). */
.q-count b { color: var(--brand-ink); }
/* 🚩 `margin-top:auto` 가 둘(질문·선택지) 이라 남는 공간을 **위/아래가 나눠 갖는다** —
   질문이 상단에 붙지 않고 위아래로 숨 쉰다(앱과 같은 인상). 선택지는 여전히 하단 고정. */
/* 🚩 카테고리·질문은 가운데 정렬 — 앱과 같다. */
.q-cat { margin: auto 0 10px; text-align: center; color: var(--sub-dim); font-size: 14px; font-weight: 700; }
.q-prompt { margin: 0; text-align: center; font-size: clamp(21px, 5.6vw, 25px); font-weight: 800; line-height: 1.42; letter-spacing: -.02em; }
.q-opts { display: grid; gap: 11px; }
/* `min-height` = 선택지가 2줄이 되면 버튼이 커지고 **위쪽 버튼의 y 좌표가 밀리는** 것을 막는다.
   🟡 **다만 지금은 아무것도 안 막고 있다(예방책)** — [실측 2026-08-08] 회차 5의 선택지는
      **최장 12자**("못 먹는 사람 기준으로")·중앙값 8자라 **컨테이너 312px 에서도 전부 1줄**이고,
      min-height 를 빼도 버튼이 안 튄다. **회차가 바뀌어 긴 선택지가 들어오면 그때 값을 한다.** */
.q-opt { width: 100%; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
         padding: 16px 20px; border-radius: 18px; border: 2px solid; font: inherit; cursor: pointer;
         transition: transform .08s, filter .15s; }
.q-opt:hover { filter: brightness(.985); }
.q-opt:active { transform: scale(.985); }
.q-opt .q-ab { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.q-opt .q-opt-t { font-size: clamp(17px, 4.6vw, 19px); font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.q-opt[data-ab="A"] { background: var(--a-soft); border-color: var(--a); color: var(--a-ink); }
.q-opt[data-ab="B"] { background: var(--b-soft); border-color: var(--b); color: var(--b-ink); }

/* ── 결과 ── */
.q-result-kicker { color: var(--brand-ink); font-weight: 700; font-size: 14px; text-align: center; }
.q-result-name { font-size: clamp(30px, 8vw, 40px); font-weight: 800; letter-spacing: -.025em; text-align: center; margin: 8px 0 12px; }
.q-result-line { color: var(--sub); font-size: 15.5px; line-height: 1.62; text-align: center; margin: 0 0 28px; }
.q-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px; margin-bottom: 16px; }
.q-axis + .q-axis { margin-top: 22px; }
.q-axis-name { color: var(--sub-dim); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.q-axis-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; margin-bottom: 9px; }
.q-axis-row .dim { color: var(--sub-dim); font-weight: 600; }
.q-axis-row .win { font-weight: 800; }
.q-meter { height: 12px; border-radius: 999px; overflow: hidden; display: flex; }
.q-meter > i { display: block; height: 100%; }
.q-meter .fill { border-radius: 999px; }
.q-a .win { color: var(--a-ink); } .q-a .fill { background: var(--a); } .q-a .rest { background: var(--a-soft); }
.q-b .win { color: var(--b-ink); } .q-b .fill { background: var(--b); } .q-b .rest { background: var(--b-soft); }

.q-div { background: var(--b-soft); border-radius: 20px; padding: 20px; margin-bottom: 26px; }
/* 🔴 아이콘은 앱과 같은 path 다(생성기 `ICON_FIRE`). 한쪽만 고치면 갈린다. */
.q-div-kicker { display: flex; align-items: center; gap: 6px; color: var(--b-ink); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.q-div-icon { width: 15px; height: 15px; flex: none; }
.q-div-title { font-size: 17px; font-weight: 800; line-height: 1.45; margin: 0 0 8px; }
.q-div-pct { color: var(--b-ink); font-size: 14.5px; font-weight: 600; margin: 0; }

.q-actions { display: grid; gap: 10px; margin-bottom: 30px; }
/* 🔴 `width:100%` 이 필요하다 — <button>·<a> 는 기본 inline 이라 display:flex 만으로는 폭이 안 늘어난다. */
.q-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 16px; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; border: 0; text-decoration: none; }
.q-btn-primary { background: var(--cta-grad); color: #fff; }
.q-btn-ghost { background: transparent; color: var(--brand-ink); border: 1.5px solid var(--brand-2); }

.q-cta { text-align: center; padding-top: 6px; }
.q-cta p { color: var(--sub); font-size: 15px; font-weight: 600; margin: 0 0 14px; }
.q-cta .badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.q-msg { color: var(--sub); font-size: 15px; text-align: center; padding: 40px 0; }
.q-err { color: var(--b-ink); }
[hidden] { display: none !important; }