/* ─────────────────────────────────────────────────────────────
   대화 궁합 테스트 「넌 무슨 얘기에 불붙어?」
   토큰은 기존 번아웃 테스트(styles.css :root)와 동일 세트.
   프로토타입(Talk Match Test v2)의 시각을 그대로 재현한다.
   ───────────────────────────────────────────────────────────── */
:root {
  --accent: #1ED760; --accent-press: #1DB954; --accent-deep: #0F7A34; --accent-soft: #E7F8EE;
  --bg: #FFFFFF; --bg-soft: #F5F5F5; --bg-soft-2: #EBEBEB; --card: #FFFFFF;
  --line: #E8E8E8; --line-strong: #D9D9D9;
  --text: #121212; --text-soft: #6A6A6A; --text-light: #949494;
  --dark: #121212; --dark-mid: #282828; --on-dark: #FFFFFF; --on-dark-soft: #B3B3B3;
  --kakao: #FEE500;
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-pill: 500px;
  --shadow: 0 4px 4px rgba(0,0,0,0.06); --shadow-strong: 0 4px 16px rgba(0,0,0,0.14);
  --font-core: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  /* 발화점 6주제 커버 — 같은 깊이(L≈32%)로 한 세트 */
  --t-M: linear-gradient(160deg, #56742F 0%, #31480F 100%);
  --t-L: linear-gradient(160deg, #B33F35 0%, #772019 100%);
  --t-V: linear-gradient(160deg, #2C5A8C 0%, #15365B 100%);
  --t-T: linear-gradient(160deg, #7A3E96 0%, #4C2463 100%);
  --t-H: linear-gradient(160deg, #33707F 0%, #17404B 100%);
  --t-J: linear-gradient(160deg, #C1861E 0%, #7A500F 100%);
}

html, body { margin: 0; padding: 0; background: var(--bg-soft-2); color: var(--text); font-family: var(--font-core); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-deep); text-decoration: none; }
button { font-family: var(--font-core); cursor: pointer; color: inherit; }
.container { max-width: 480px; margin: 0 auto; background: var(--bg); min-height: 100vh; position: relative; overflow-x: clip; box-shadow: 0 0 40px rgba(0,0,0,0.08); }

/* 이중 탭 차단 — 선택 직후 문항 선택지 포인터를 죽인다 */
.q-locked { pointer-events: none; }

/* 커버(캐릭터 카드) 공통 */
.char-illustration { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.char-illustration img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 문항 선택지 */
.tk-opt { display: block; width: 100%; min-height: 84px; text-align: left; padding: 14px 18px 15px; box-sizing: border-box; border-radius: 14px; transition: transform 160ms var(--ease-out-strong); border: 1.5px solid var(--line-strong); background: var(--card); }
.tk-opt:active { transform: scale(0.98); }
.tk-opt.selected { border-color: var(--accent-deep); background: var(--accent-soft); }
.tk-opt-tag { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--text-light); }
.tk-opt.selected .tk-opt-tag { color: var(--accent-deep); }
.tk-opt-main { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; }
.tk-opt-sub { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--text-soft); }

/* 즉시 반응 토스트 (선택지 위) */
.tk-reaction { position: absolute; top: -44px; left: 0; background: var(--dark); color: var(--on-dark); font-size: 13px; font-weight: 700; letter-spacing: -0.02em; padding: 9px 14px; border-radius: 10px; animation: tkToast 120ms ease-out both; z-index: 2; }

/* 하단 토스트 */
.tk-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: calc(100% - 48px); max-width: 432px; background: var(--dark-mid); color: var(--on-dark); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.5; padding: 13px 18px; border-radius: 12px; box-shadow: var(--shadow-strong); animation: tkToast 160ms ease-out both; z-index: 50; box-sizing: border-box; }

/* 버튼 공통 */
.tk-btn { border: none; border-radius: var(--r-pill); font-weight: 800; letter-spacing: -0.02em; transition: transform 160ms var(--ease-out-strong); }
.tk-btn:active { transform: scale(0.97); }
.tk-btn-accent { background: var(--accent); color: var(--text); }
.tk-btn-dark { background: var(--dark); color: var(--on-dark); }
.tk-btn-kakao { background: var(--kakao); color: #191600; border-radius: var(--r-3); }
.tk-btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-3); font-weight: 700; }

/* 스티키 CTA */
.tk-sticky { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.96) 34%); box-sizing: border-box; animation: tkStickyUp 240ms var(--ease-out-strong) both; z-index: 40; }

/* 이름 시트 */
.tk-sheet-dim { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 60; }
.tk-sheet { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: var(--card); border-radius: 20px 20px 0 0; padding: 26px 20px calc(22px + env(safe-area-inset-bottom)); box-sizing: border-box; z-index: 61; animation: tkStickyUp 240ms var(--ease-out-strong) both; }
.tk-sheet input { margin-top: 14px; width: 100%; height: 52px; box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: var(--r-3); padding: 0 16px; font-size: 15px; font-weight: 600; font-family: var(--font-core); outline: none; background: var(--card); color: var(--text); }
.tk-sheet input:focus { border-color: var(--accent-deep); }
.tk-guess-chip { border-radius: var(--r-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--text); }
.tk-guess-chip.on { border-color: var(--accent-deep); background: var(--accent-soft); color: var(--accent-deep); }

/* 랜딩 마퀴 */
.tk-marquee { display: flex; width: max-content; animation: tkMarquee 28s linear infinite; }

/* 캡처 카드 (화면 밖 고정) */
#tk-capture-root { position: fixed; left: -9999px; top: 0; }

@keyframes tkIn0 { from { opacity: 0; transform: translateX(42px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tkIn1 { from { opacity: 0; transform: translateX(42px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tkUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tkToast { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tkStickyUp { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tkMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tkPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes tkGrow { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}