/* =========================
       1) 전역 변수(테마 컬러) 정의
       - :root는 문서 전체에서 사용할 CSS 변수 보관소
       - var(--primary-color) 형태로 어디서든 꺼내 씀
    ========================= */
    :root {
      --primary-color: #6366f1;
      --secondary-color: #a855f7;
      --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      --glass-bg: rgba(255, 255, 255, 0.95);
      --text-color: #1f2937;
      --text-light: #6b7280;
    }

    html[data-page="beginner"] {
      --primary-color: #10b981;
      --secondary-color: #22c55e;
      --bg-gradient: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
      --glass-bg: rgba(255,255,255,0.92);
      --text-color: #0f172a;
    }
    /* =========================
       2) body 기본 레이아웃/배경
       - 화면 전체 중앙 정렬
       - 배경 그라데이션 적용
    ========================= */
    body {
      font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
      margin: 0;
      padding: 0;

      /* 화면 높이를 최소 100vh로 맞춰 중앙정렬이 잘 되게 */
      min-height: 100vh;

      /* 가운데 정렬을 위해 flex 사용 */
      display: flex;
      justify-content: center;
      align-items: center;

      background: var(--bg-gradient);
      color: var(--text-color);

      /* ====== 녹음 중 배경 오버레이를 위해 추가 ======
         pseudo-element(::before)를 깔기 위해 body를 기준 컨테이너로 만듦 */
      position: relative;

      /* ::before가 화면 밖으로 나가도 스크롤바 안 생기게 */
      overflow: hidden;
    }

    /* =========================
       3) 큰 틀 컨테이너
       - 화면 폭이 넓어도 카드가 너무 커지지 않도록 max-width
    ========================= */
    .container {
      width: 100%;
      max-width: 500px;
      padding: 20px;
      /* 아래에서 z-index를 주기 위해 position 지정 */
      position: relative;
      z-index: 1;
    }

    /* =========================
       4) 카드(유리 효과)
       - glassmorphism 스타일
    ========================= */
    .card {
      background: var(--glass-bg);

      /* 뒤 배경을 흐리게(지원 브라우저에서만) */
      backdrop-filter: blur(10px);

      /* 둥근 모서리/그림자 */
      border-radius: 24px;
      padding: 40px 30px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

      text-align: center;

      /* 호버 시 살짝 뜨는 애니메이션 */
      transition: transform 0.3s ease;

      position: relative;
      z-index: 1;
      /* 배경 오버레이보다 카드가 위 */
    }

    .card:hover {
      transform: translateY(-5px);
    }

    /* =========================
       5) 타이틀 스타일
       - 텍스트 그라데이션
    ========================= */
    h1 {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 10px;

      /* 글자 그라데이션 (배경을 글자에 클리핑) */
      background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
      background-clip: text;
      -webkit-background-clip: text;

      /* 글자 색 자체는 투명하게 만들어 배경이 글자 모양으로 보이게 */
      -webkit-text-fill-color: transparent;

      letter-spacing: -0.5px;
    }

    /* 부제목 */
    .subtitle {
      font-size: 16px;
      color: var(--text-light);
      margin-bottom: 40px;
    }

    /* =========================
       6) 문제 문장 박스
    ========================= */
    #sentence {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 40px;
      padding: 20px;

      background: #f3f4f6;
      border-radius: 16px;
      color: #374151;
      line-height: 1.5;

      /* 안쪽 그림자(눌린 느낌) */
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* =========================
       7) 버튼 스타일
    ========================= */
    button {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      border: none;

      margin-bottom: 8px;
      padding: 16px 64px;

      font-size: 18px;
      font-weight: 600;

      border-radius: 50px;
      cursor: pointer;

      transition: all 0.3s ease;
      box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);

      /* 아이콘+텍스트 정렬 */
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn-wrap {
      display: flex;              /* inline-flex 말고 flex 권장 */
      flex-direction: column;     /* ✅ 세로로 쌓기 */
      align-items: center;        /* 가운데 정렬(원하면 flex-start) */
      gap: 8px;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 30px rgba(99, 102, 241, 0.4);
      filter: brightness(1.1);
    }

    button:active {
      transform: translateY(0);
    }

    /* =========================
       8) 결과 표시 영역
       - 정답/오답에 따라 배경/색 변경
    ========================= */
    #result {
      margin-top: 30px;
      min-height: 60px;
      font-size: 16px;
      font-weight: 500;

      /* 줄바꿈(\n)이 화면에 반영되도록 */
      white-space: pre-line;

      padding: 15px;
      border-radius: 12px;

      transition: all 0.3s ease;
    }

    .result-success {
      color: #059669;
      background-color: #d1fae5;
    }

    .result-error {
      color: #dc2626;
      background-color: #fee2e2;
    }

    /* =========================
       9) 글자/결과 페이드 인 애니메이션
       - 클래스 fade-in을 붙이면 0.5초 동안 등장
    ========================= */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

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

    .fade-in {
      animation: fadeIn 0.5s ease forwards;
    }

    /* =========================
       10) 녹음 중 배경 일렁임 효과
       - body::before 라는 가상의 레이어를 만들어 배경 위에 올림
       - 기본은 opacity 0 + animation paused
       - 녹음 시작 시 body에 is-listening 클래스가 붙으면
         opacity 1 + animation running 으로 전환
       - 녹음 종료 시 클래스 제거 -> opacity가 1초에 걸쳐 서서히 0으로
    ========================= */
    body::before {
      content: "";

      /* 화면 전체를 덮는 오버레이 */
      position: fixed;
      inset: -40%;

      /* 클릭/터치 이벤트를 방해하지 않도록 */
      pointer-events: none;

      /* 뒤쪽(카드보다 아래)에 깔리게 */
      z-index: 0;

      /* 일렁이는 빛 번짐(원형 그라데이션 3개 조합)
         - 색/투명도는 원하는 대로 바꿔도 됨 */
      background:
        radial-gradient(circle at 20% 30%, rgba(32, 173, 42, 1), transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(212, 224, 205, 1), transparent 50%),
        radial-gradient(circle at 60% 90%, rgba(7, 231, 78, 1), transparent 55%);

      /* 번짐(blur) 처리 */
      filter: blur(30px);

      /* 기본은 안 보이게 */
      opacity: 0;

      /* opacity 변화가 부드럽게(서서히 사라짐/나타남) */
      transition: opacity 1s ease;

      /* 움직임 애니메이션(일렁임) */
      animation: bgShimmer 6s ease-in-out infinite;

      /* 기본은 정지 상태 */
      animation-play-state: paused;
    }

    /* 녹음 중일 때만 보이고 움직이게 */
    body.is-listening::before {
      opacity: 1;
      animation-play-state: running;
    }

    /* 실제 일렁임: 살짝 이동/확대 반복 */
    @keyframes bgShimmer {
      0% {
        transform: translate(-2%, -1%) scale(1.00);
      }

      50% {
        transform: translate(2%, 1%) scale(1.06);
      }

      100% {
        transform: translate(-2%, -1%) scale(1.00);
      }
    }