/* 디자인 시스템 & CSS 변수 */
    :root {
      --color-bg: #050508;
      --color-surface-trans: rgba(10, 10, 16, 0.85);
      --color-surface-card: #0d0d14;
      --color-border: rgba(139, 0, 0, 0.25);
      --color-border-hover: rgba(220, 20, 60, 0.6);
      --color-accent: #8b0000; /* 어두운 적색 */
      --color-accent-bright: #dc143c; /* 밝은 크림슨 */
      --color-text-primary: #f0f0f5;
      --color-text-secondary: #c2c2d6;
      --color-text-muted: #808099;
      --font-sans: 'Noto Sans KR', sans-serif;
      --font-serif: 'Noto Serif KR', serif;
      --font-horror: 'East Sea Dokdo', sans-serif;
      --font-hand: 'Nanum Pen Script', cursive;
    }

    /* 초기화 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background-color: var(--color-bg);
      color: var(--color-text-primary);
      font-family: var(--font-sans);
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 모바일 최적화 컨테이너 */
    #app {
      width: 100%;
      max-width: 480px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 1.25rem;
      padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
      padding-left: calc(1.25rem + env(safe-area-inset-left));
      padding-right: calc(1.25rem + env(safe-area-inset-right));
      position: relative;
      z-index: 10;
    }

    .screen {
      display: none;
      flex-direction: column;
      width: 100%;
      animation: fadeIn 0.4s ease forwards;
    }

    .screen.active {
      display: flex;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 프로그레스 바 상단 인라인 사운드 토글 버튼 */
    .audio-toggle-inline-btn {
      background: rgba(139, 0, 0, 0.12);
      border: 1px solid var(--color-border);
      color: var(--color-text-secondary);
      padding: 4px 10px;
      font-size: 10px;
      border-radius: 99px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: var(--font-sans);
      letter-spacing: 0.05em;
      transition: all 0.2s;
    }
    .audio-toggle-inline-btn:hover, .audio-toggle-inline-btn:active {
      background: var(--color-accent);
      color: white;
      border-color: var(--color-accent-bright);
    }
    .audio-toggle-inline-btn.muted {
      text-decoration: line-through;
      opacity: 0.6;
    }

    /* 공포감 주는 프리미엄 카드 */
    .horror-card {
      background: var(--color-surface-trans);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--color-border);
      border-radius: 16px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(139, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
    }

    .horror-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 2px;
      background: linear-gradient(90deg, transparent, var(--color-accent-bright), transparent);
    }

    /* 이미지 플레이스홀더 / 씬 뷰어 */
    .scene-img-wrap {
      width: 100%;
      aspect-ratio: 16/10;
      background: #08080c;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      margin-bottom: 1.25rem;
      overflow: hidden;
      position: relative;
      animation: question-img-flicker 8s infinite alternate;
    }

    @keyframes question-img-flicker {
      0%, 29%, 31%, 33%, 35%, 74%, 76%, 100% {
        filter: brightness(1) contrast(1);
      }
      30%, 34%, 75% {
        filter: brightness(0.97) contrast(1.02);
      }
      32% {
        filter: brightness(1.02) contrast(0.98);
      }
    }

    /* 이미지에만 스캔라인 및 노이즈 오버레이 적용 */
    .scene-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: 
        linear-gradient(
          rgba(18, 16, 16, 0) 50%, 
          rgba(0, 0, 0, 0.3) 50%
        ),
        linear-gradient(
          90deg,
          rgba(255, 0, 0, 0.02),
          rgba(0, 255, 0, 0.01),
          rgba(0, 0, 255, 0.02)
        ),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
      background-size: 100% 4px, 3px 100%, auto;
      pointer-events: none;
      z-index: 5;
      opacity: 0.95;
    }

    .scene-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* 씬 이미지 깜빡임/지직거리는 공포 연출 필터 */
    .scene-img-wrap.glitch img {
      animation: flash-flicker 0.2s infinite alternate;
    }

    @keyframes flash-flicker {
      0% { opacity: 0.85; filter: contrast(1.1) brightness(0.9); }
      100% { opacity: 0.98; filter: contrast(1.2) brightness(1.05); }
    }

    /* 선택 시 충격 연출 (붉은 섬광 필터) */
    .red-flash-active img {
      animation: red-flash 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    @keyframes red-flash {
      0% { filter: saturate(2) brightness(1.4) contrast(1.3); }
      100% { filter: saturate(1) brightness(1) contrast(1); }
    }

    /* 장면 캡션 (스캔라인 오버레이 위에 올라오도록 z-index 설정) */
    .img-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(transparent, rgba(0,0,0,0.85));
      padding: 8px 12px;
      font-size: 11px;
      color: var(--color-text-muted);
      letter-spacing: 0.05em;
      text-align: right;
      z-index: 6;
    }

    /* 오프닝 타이틀 스타일 */
    .intro-season {
      font-size: 14px;
      letter-spacing: 0.3em;
      color: var(--color-accent-bright);
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 0.5rem;
      text-shadow: 0 0 8px rgba(220, 20, 60, 0.4);
    }

    .intro-title {
      font-family: var(--font-horror);
      font-size: 4rem;
      line-height: 1.0;
      color: var(--color-text-primary);
      margin-bottom: 1rem;
      text-shadow: 3px 3px 0px #000, 0 0 15px rgba(139, 0, 0, 0.8);
      letter-spacing: 0.02em;
    }

    /* 인트로 타이틀 글리치 효과 */
    .intro-title.glitch-active {
      animation: title-glitch 4s infinite;
    }

    @keyframes title-glitch {
      0%, 95%, 98%, 100% {
        text-shadow: 3px 3px 0px #000, 0 0 15px rgba(139, 0, 0, 0.8);
        transform: translate(0, 0) skewX(0deg);
      }
      96% {
        text-shadow: -3px -3px 0px #dc143c, 3px 3px 0px #000, 0 0 15px rgba(139, 0, 0, 0.8);
        transform: translate(-2px, 2px) skewX(5deg);
        opacity: 0.8;
      }
      97% {
        text-shadow: 3px -3px 0px #00ffff, -3px 3px 0px #000, 0 0 15px rgba(139, 0, 0, 0.8);
        transform: translate(2px, -2px) skewX(-5deg);
        opacity: 0.9;
      }
    }

    /* 인트로 카드 미세 깜빡임 */
    .intro-card-glitch {
      animation: card-flicker 5s infinite alternate;
    }

    @keyframes card-flicker {
      0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
        filter: brightness(1);
      }
      20%, 24%, 55% {
        opacity: 0.94;
        filter: brightness(0.85) contrast(1.1);
      }
      22% {
        opacity: 0.90;
        filter: brightness(1.15) contrast(1.2);
      }
    }

    .intro-desc {
      font-size: 14px;
      line-height: 1.7;
      color: var(--color-text-secondary);
      margin-bottom: 1.5rem;
      word-break: keep-all;
    }

    /* 롤플레잉 진행 상황바 */
    .progress-container {
      margin-bottom: 1.25rem;
    }

    .q-counter-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .q-counter {
      font-size: 12px;
      color: var(--color-accent-bright);
      font-weight: 700;
      font-family: var(--font-sans);
    }

    .chapter-label {
      font-size: 11px;
      color: var(--color-text-muted);
      letter-spacing: 0.1em;
    }

    .progress-bar-wrap {
      width: 100%;
      height: 3px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 99px;
      overflow: hidden;
    }

    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
      width: 0%;
      transition: width 0.4s ease;
      border-radius: 99px;
    }

    /* 대화 상자 / 롤플레잉 시나리오 텍스트 */
    .rpg-dialogue-box {
      min-height: 80px;
      margin-bottom: 1.25rem;
      position: relative;
    }

    .story-text {
      font-family: var(--font-serif);
      font-size: 15px;
      line-height: 1.8;
      color: var(--color-text-secondary);
      white-space: pre-line;
      margin-bottom: 0.75rem;
    }

    .question-text {
      font-family: var(--font-sans);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.6;
      color: var(--color-text-primary);
      border-top: 1px dashed rgba(139, 0, 0, 0.2);
      padding-top: 0.75rem;
      margin-top: 0.75rem;
    }

    /* 타이핑 깜빡이는 커서 */
    .cursor {
      display: inline-block;
      width: 6px;
      height: 15px;
      background-color: var(--color-accent-bright);
      margin-left: 2px;
      animation: blink 0.8s infinite;
      vertical-align: middle;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    /* 통계 섹션 스타일 */
    .stats-item {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 8px;
      padding: 10px 12px;
    }
    .stats-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      margin-bottom: 6px;
    }
    .stats-type-info {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .stats-type-code {
      font-weight: 700;
      color: var(--color-text-primary);
    }
    .stats-type-name {
      color: var(--color-text-muted);
    }
    .stats-pct {
      font-weight: 700;
      color: var(--color-accent-bright);
    }
    .stats-bar-track {
      height: 4px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 99px;
      overflow: hidden;
    }
    .stats-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
      border-radius: 99px;
    }

    /* 선택지 버튼 디자인 (모바일 터치 최적화) */
    .choices-container {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-top: 1rem;
    }

    .choice-btn {
      width: 100%;
      background: rgba(20, 20, 30, 0.6);
      border: 1px solid var(--color-border);
      border-radius: 10px;
      padding: 0.95rem 1.2rem;
      text-align: left;
      color: var(--color-text-secondary);
      font-size: 14.5px;
      line-height: 1.5;
      font-family: var(--font-sans);
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      display: flex;
      align-items: flex-start;
      gap: 12px;
      position: relative;
      opacity: 0;
      transform: translateY(8px);
      animation: slideUp 0.3s forwards;
    }

    @keyframes slideUp {
      to { opacity: 1; transform: translateY(0); }
    }

    .choice-btn:hover, .choice-btn:active {
      background: rgba(139, 0, 0, 0.12);
      border-color: var(--color-border-hover);
      color: var(--color-text-primary);
      transform: translateX(4px);
      box-shadow: -4px 0 0 var(--color-accent-bright);
    }

    .choice-marker {
      font-family: var(--font-serif);
      font-weight: 700;
      color: var(--color-accent-bright);
      flex-shrink: 0;
    }

    .choice-text {
      flex: 1;
      word-break: keep-all;
    }

    /* 버튼류 */
    .primary-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 1rem;
      background: var(--color-accent);
      color: white;
      border: 1px solid var(--color-accent-bright);
      border-radius: 10px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--font-sans);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      transition: all 0.2s;
      box-shadow: 0 4px 15px rgba(139, 0, 0, 0.4);
    }

    .primary-btn:hover, .primary-btn:active {
      background: var(--color-accent-bright);
      box-shadow: 0 6px 20px rgba(220, 20, 60, 0.6);
      transform: translateY(-2px);
    }

    .primary-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* 사운드 동의 스크린 */
    .sound-select-box {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1.5rem;
    }

    .sound-card {
      border: 1px solid var(--color-border);
      background: rgba(10, 10, 15, 0.6);
      border-radius: 10px;
      padding: 1.25rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .sound-card:hover, .sound-card:active {
      border-color: var(--color-border-hover);
      background: rgba(139, 0, 0, 0.08);
    }

    .sound-card i {
      font-size: 24px;
      color: var(--color-accent-bright);
    }

    .sound-card-text {
      text-align: left;
    }

    .sound-card-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--color-text-primary);
      margin-bottom: 2px;
    }

    .sound-card-desc {
      font-size: 12px;
      color: var(--color-text-muted);
    }

    /* 엔딩 독백 상자 */
    .ending-quote-box {
      border-left: 2px solid var(--color-accent-bright);
      padding-left: 1rem;
      margin: 1.5rem 0;
      min-height: 80px;
    }

    .ending-text {
      font-family: var(--font-serif);
      font-size: 15px;
      line-height: 1.9;
      color: var(--color-text-primary);
      font-style: italic;
      white-space: pre-line;
    }

    /* 결과 페이지 분석 인포그래픽 */
    .result-label {
      font-size: 12px;
      color: var(--color-accent-bright);
      letter-spacing: 0.2em;
      margin-bottom: 4px;
      font-weight: 700;
    }

    .result-mbti-code {
      font-family: var(--font-serif);
      font-size: 42px;
      font-weight: 900;
      color: var(--color-text-primary);
      letter-spacing: 0.15em;
      text-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
      margin-bottom: 2px;
    }

    .result-title {
      font-family: var(--font-serif);
      font-size: 22px;
      font-weight: 700;
      color: var(--color-text-primary);
      margin-bottom: 1rem;
    }

    .result-desc {
      font-size: 14.5px;
      line-height: 1.75;
      color: var(--color-text-secondary);
      margin-bottom: 1.5rem;
      word-break: keep-all;
    }

    .result-stat-box {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 1.5rem;
    }

    .result-badge {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12.5px;
      color: var(--color-text-secondary);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1 1 45%;
    }

    .result-badge span {
      font-size: 10px;
      color: var(--color-text-muted);
      margin-bottom: 2px;
      text-transform: uppercase;
    }

    .result-badge strong {
      font-size: 15px;
      font-weight: 700;
      color: var(--color-text-primary);
    }
    
    .result-badge strong.survival-pct {
      color: #34d399; /* 생존율은 형광 초록 */
      text-shadow: 0 0 5px rgba(52, 211, 153, 0.3);
    }

    /* 4대 공포 성향 축 데이터 시각화 */
    .axis-graph-container {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .axis-title {
      font-size: 12px;
      color: var(--color-text-muted);
      margin-bottom: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .axis-row {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 0.5rem;
    }

    .axis-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--color-text-muted);
      margin-bottom: 4px;
    }
    
    .axis-labels span.chosen {
      color: var(--color-accent-bright);
      font-weight: 700;
    }

    .axis-bar-track {
      height: 6px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 99px;
      overflow: hidden;
      position: relative;
    }

    .axis-bar-fill {
      height: 100%;
      background: var(--color-accent-bright);
      border-radius: 99px;
      transition: width 1s ease-out;
    }

    .share-row {
      display: flex;
      gap: 0.75rem;
      margin-top: 1.5rem;
    }

    .btn-secondary {
      background: transparent;
      border: 1px solid var(--color-border);
      color: var(--color-text-secondary);
      border-radius: 10px;
      padding: 0.9rem;
      font-size: 14px;
      cursor: pointer;
      flex: 1;
      font-weight: 500;
      transition: all 0.2s;
    }

    .btn-secondary:hover, .btn-secondary:active {
      border-color: var(--color-text-muted);
      color: white;
      background: rgba(255, 255, 255, 0.03);
    }

    /* 토스트 알림 */
    .toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: rgba(13, 13, 20, 0.95);
      border: 1px solid var(--color-accent-bright);
      color: var(--color-text-primary);
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 13.5px;
      z-index: 10000;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* 탭 힌트 애니메이션 및 스타일 */
    .tap-hint {
      display: none;
      font-size: 11px;
      color: var(--color-text-muted);
      text-align: center;
      margin-top: 8px;
      animation: pulse 1.5s infinite alternate;
      font-family: var(--font-sans);
      letter-spacing: 0.05em;
    }
    .tap-hint.show {
      display: block;
    }
    @keyframes pulse {
      from { opacity: 0.3; }
      to { opacity: 0.75; }
    }
    
    /* 플로팅 하트 및 시즌2 투표 박스 스타일 */
    @keyframes floatUp {
      0% {
        transform: translateY(0) scale(1) translateX(0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(-80px) scale(0.6) translateX(var(--tx, 15px)) rotate(var(--rot, 15deg));
        opacity: 0;
      }
    }
    .floating-heart {
      position: absolute;
      color: var(--color-accent-bright);
      font-size: 16px;
      pointer-events: none;
      animation: floatUp 0.7s ease-out forwards;
      z-index: 99;
      user-select: none;
      text-shadow: 0 0 5px rgba(220, 20, 60, 0.6);
    }
    .season2-vote-box button:hover {
      background: rgba(220, 20, 60, 0.18) !important;
      border-color: var(--color-accent-bright) !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(220, 20, 60, 0.15);
    }
    .season2-vote-box button:active {
      transform: translateY(0) scale(0.95);
    }