/**
 * 공통 심리테스트 스타일
 * 테마 색상은 각 테스트 HTML에서 :root 변수로 덮어씁니다.
 *   --c1 / --c2        : 주/보조 강조색 (그라데이션)
 *   --c1-rgb / --c2-rgb: 위 색의 rgb (그림자/투명도용)
 *   --c-soft           : 옅은 강조 배경 (선택지/해시태그/서브라인)
 * 결과 화면 배경 그라데이션(.gradient-*)은 데이터성이라 각 테스트에 인라인으로 둡니다.
 */
:root {
  --c1: #7048e8;
  --c2: #9775fa;
  --c1-rgb: 112, 72, 232;
  --c2-rgb: 151, 117, 250;
  --c-soft: #efeaff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; line-height: 1.5; color: #212529;
  background: #e8e6f1; min-height: 100vh; overflow-x: hidden; max-width: 100vw;
}
/* 가운데 흰 컬럼(폰 모양)을 하나의 고정 띠로 깔아 화면 전환·섹션 사이 이음매 제거 */
body::before { content: ''; position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 500px; background: #ffffff; box-shadow: 0 0 40px rgba(40, 30, 90, 0.08); z-index: -1; }
section { width: 100%; max-width: 500px; min-width: 320px; margin: 0 auto; padding: 0 20px 24px; min-height: 100vh; }
.quiz-brand { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.quiz-brand img { height: 30px; width: auto; display: block; }
#start-screen, #question-screen, #loading-screen, #result-screen { display: none; flex-direction: column; align-items: center; justify-content: center; }
#start-screen.active, #question-screen.active, #loading-screen.active { display: flex; }
#result-screen.active { display: block; padding-top: 24px; }

.progress-bar-container { width: 100%; height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; margin-bottom: 24px; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); border-radius: 3px; transition: width 0.4s ease; }
.question-header { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 8px; }
.back-button { position: absolute; left: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; font-size: 20px; color: #5f6772; cursor: pointer; border-radius: 8px; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.back-button:active { background: #f1f3f5; color: #495057; }
.question-counter { font-size: 14px; color: #5f6772; text-align: center; }
.question-card { width: 100%; text-align: center; margin-bottom: 24px; }
.question-text { font-size: 20px; font-weight: 600; color: #212529; margin-bottom: 32px; line-height: 1.4; word-break: keep-all; }
.choices-container { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.choice-button { width: 100%; min-height: 56px; padding: 14px 20px; font-size: 16px; line-height: 1.4; color: #495057; background: #ffffff; border: 2px solid #dee2e6; border-radius: 12px; cursor: pointer; text-align: left; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.choice-button:active, .choice-button.selected { border-color: var(--c1); background: var(--c-soft); transform: scale(0.98); }
.choice-button.highlight { border-color: var(--c1); background: linear-gradient(135deg, rgba(var(--c1-rgb), 0.13), rgba(var(--c2-rgb), 0.13)); box-shadow: 0 2px 8px rgba(var(--c1-rgb), 0.25); }
.cta-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 16px 32px; font-size: 18px; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, var(--c1), var(--c2)); border: none; border-radius: 16px; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; box-shadow: 0 4px 16px rgba(var(--c1-rgb), 0.3); }
.cta-button:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(var(--c1-rgb), 0.3); }
.start-emoji { font-size: 64px; margin-bottom: 10px; }
.start-img { display: block; width: 100%; max-width: 100%; height: auto; margin: 24px auto 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.start-title { font-size: 24px; font-weight: 700; color: #212529; margin-bottom: 6px; text-align: center; word-break: keep-all; }
.start-description { font-size: 16px; color: #5f6772; text-align: center; margin-bottom: 28px; line-height: 1.7; word-break: keep-all; }
.loading-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.spinner { width: 48px; height: 48px; border: 4px solid #e9ecef; border-top-color: var(--c1); border-radius: 50%; animation: spin 0.8s linear infinite; }
.loading-text { font-size: 16px; color: #495057; text-align: center; animation: fadeInOut 1s ease-in-out; }
.result-card { width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 24px; padding: 40px 28px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06); margin-bottom: 28px; border: 1px solid rgba(255, 255, 255, 0.6); position: relative; overflow: hidden; }
.result-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); pointer-events: none; }
.result-emoji { font-size: 72px; margin-bottom: 16px; animation: bounceIn 0.6s ease; }
.result-type-name { font-size: 26px; font-weight: 800; color: #1a1a2e; margin-bottom: 16px; letter-spacing: -0.5px; word-break: keep-all; }
.result-sub { font-size: 18px; font-weight: 700; color: var(--c2); background: var(--c-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; line-height: 1.5; word-break: keep-all; }
.result-description { font-size: 16px; color: #4a4a6a; line-height: 1.7; margin-bottom: 20px; word-break: keep-all; }
.result-hashtags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hashtag { font-size: 13px; font-weight: 500; color: var(--c1); background: rgba(var(--c1-rgb), 0.08); padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(var(--c1-rgb), 0.15); transition: transform 0.2s ease; }
.hashtag:hover { transform: scale(1.05); }

.share-buttons-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.share-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 14px 8px; font-size: 13px; font-weight: 600; color: #343a40; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 18px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.share-button .share-ico { font-size: 22px; line-height: 1; }
.share-button:active { transform: translateY(1px) scale(0.97); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.share-button.kakao:active { border-color: #FEE500; }
.share-button.copy-link:active { border-color: #adb5bd; }
.share-button.save-image:active { border-color: var(--c1); }
.retry-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 16px 24px; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: #ffffff; background: linear-gradient(135deg, var(--c1), var(--c2)); border: none; border-radius: 16px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; box-shadow: 0 8px 20px rgba(var(--c1-rgb), 0.35); }
.retry-button:active { transform: translateY(1px) scale(0.98); box-shadow: 0 4px 12px rgba(var(--c1-rgb), 0.3); }
.home-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--c2); background: #ffffff; border: 2px solid rgba(var(--c2-rgb), 0.55); border-radius: 16px; text-decoration: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; }
.home-button:active { background: rgba(var(--c2-rgb), 0.08); border-color: var(--c2); transform: translateY(1px) scale(0.98); }
.home-link { display: inline-block; margin-top: 18px; font-size: 14px; color: #6c757d; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.home-link:active { color: var(--c2); }

#toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(33, 37, 41, 0.92); color: #ffffff; font-size: 14px; padding: 12px 24px; border-radius: 24px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; z-index: 9999; pointer-events: none; max-width: calc(100vw - 40px); text-align: center; }
#toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
#confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
@keyframes fadeInOut { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-30px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } }
.fade-in { animation: fadeIn 0.3s ease forwards; }
.fade-out { animation: fadeOut 0.3s ease forwards; }
.slide-in { animation: slideInRight 0.4s ease forwards; }
.slide-out { animation: slideOutLeft 0.3s ease forwards; }
button, [role="button"], a, input, select, textarea { min-height: 44px; min-width: 44px; }
@media screen and (max-width: 430px) { body { overflow-x: hidden; } .site-header { margin-top: 22px; padding: 0 16px; } section { padding: 0 16px 20px; max-width: 100%; } }
@media screen and (min-width: 431px) { section { max-width: 500px; } #start-screen.active { min-height: auto; justify-content: flex-start; padding-top: 8px; padding-bottom: 40px; } .start-img { max-width: 440px; } }

/* === 정적 소개(SEO) 섹션 === */
.about-section { max-width: 500px; min-width: 320px; margin: 0 auto; padding: 40px 24px 56px; color: #495057; }
.about-section h2 { font-size: 20px; font-weight: 800; color: #212529; margin-bottom: 14px; word-break: keep-all; }
.about-section h3 { font-size: 16px; font-weight: 700; color: #343a40; margin: 22px 0 10px; word-break: keep-all; }
.about-section p { font-size: 15px; line-height: 1.75; margin-bottom: 12px; word-break: keep-all; }
.about-section ul { margin: 0 0 12px 18px; }
.about-section li { font-size: 15px; line-height: 1.7; margin-bottom: 6px; word-break: keep-all; }
.about-section .type-details { margin-top: 6px; }
.about-section .type-detail { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #f1f3f5; }
.about-section .type-detail:last-child { border-bottom: 0; }
.about-section .type-detail h4 { font-size: 15px; font-weight: 700; color: #343a40; margin-bottom: 6px; word-break: keep-all; }
.about-section .type-detail p { font-size: 14px; line-height: 1.75; color: #5f6772; margin: 0; word-break: keep-all; }

/* === 데스크톱 hover (마우스 기기에서만) === */
@media (hover: hover) {
  .choice-button:hover { border-color: var(--c1); background: var(--c-soft); }
  .cta-button:hover, .retry-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--c1-rgb), 0.4); }
  .share-button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); }
  .home-button:hover { background: rgba(var(--c2-rgb), 0.08); border-color: var(--c2); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); }
  .back-button:hover { background: #f1f3f5; color: #495057; }
}

/* === 키보드 포커스 표시 === */
.choice-button:focus-visible,
.cta-button:focus-visible,
.retry-button:focus-visible,
.share-button:focus-visible,
.back-button:focus-visible,
.home-button:focus-visible,
.home-link:focus-visible,
.hashtag:focus-visible {
  outline: 3px solid var(--c1);
  outline-offset: 2px;
}

/* === 동작 줄이기(전정장애/멀미 대응) === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #confetti-canvas { display: none !important; }
}

/* === 상단 통합 헤더 (목차 좌 · 로고 중앙 · 언어 우) === */
.site-header { width: 100%; max-width: 500px; min-width: 320px; margin: 28px auto 22px; padding: 0 20px; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.site-header .section-nav { justify-self: start; }
.site-header .brand { justify-self: center; display: flex; align-items: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.brand-logo { height: 30px; width: auto; display: block; }
.site-header-lang { justify-self: end; display: flex; align-items: center; }
.section-nav { position: relative; }
.section-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; border-radius: 13px; color: #495057; background: #f1f0f7; border: 1px solid rgba(0,0,0,0.06); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.18s ease, box-shadow 0.18s ease; }
.section-nav.is-open .section-nav-toggle { background: var(--c-soft); box-shadow: 0 0 0 3px rgba(var(--c1-rgb), 0.14); }
.hamburger { position: relative; display: block; width: 18px; height: 12px; }
.hamburger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.18s ease, top 0.28s cubic-bezier(0.22,1,0.36,1); }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 5px; }
.hamburger span:nth-child(3) { top: 10px; }
.section-nav.is-open .hamburger span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.section-nav.is-open .hamburger span:nth-child(2) { opacity: 0; }
.section-nav.is-open .hamburger span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
.section-nav-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 210px; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 14px 36px rgba(60,40,120,0.16); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top left; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1), visibility 0.2s; }
.section-nav.is-open .section-nav-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.section-nav-link { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 9px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 700; text-decoration: none; color: #495057; background: transparent; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease; }
.section-nav-link .nav-ico { font-size: 17px; line-height: 1; }
.section-nav-link.active { color: var(--c1); background: var(--c-soft); }
@media (hover: hover) {
  .section-nav-toggle:hover { background: #e9e7f5; }
  .section-nav-link:hover { background: #f1f0f7; }
}