/* =========================
       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="Yellow"] {
  --primary-color: #facc15;
  --secondary-color: #eab308;
  --bg-gradient: linear-gradient(135deg, #fffbeb 0%, #fef08a 55%, #ecfccb 100%);
  --glass-bg: rgba(255, 255, 255, 0.88);
  --text-color: #475569;
}

html[data-page="Gray"]{
  --primary-color: #334155;     /* slate-700 느낌: 버튼/포인트 */
  --secondary-color: #64748b;   /* slate-500 느낌: 보조 포인트 */
  --bg-gradient: linear-gradient(135deg,
                  #f8fafc 0%,
                  #515151 55%,
                  #cbd5e1 100%); /* 밝은 쿨그레이 그라데이션 */
  --glass-bg: rgba(255,255,255,0.80); /* 유리감 유지 */
  --text-color: #0f172a;        /* slate-900 느낌: 본문 가독성 */
}

html[data-page="Blue"]{
  --primary-color: #2563eb;       /* blue-600 */
  --secondary-color: #60a5fa;     /* blue-400 */
  --bg-gradient: linear-gradient(135deg,
                  #cee7ff 0%,
                  #3b90ff 55%,
                  #358cff 100%);  /* 마지막에 아주 옅은 블루 */
  --glass-bg: rgba(255,255,255,0.82);
  --text-color: #0f172a;          /* slate-900 */
}

html[data-page="Red"]{
  --primary-color: #ef4444;       /* red-500: 포인트/버튼 */
  --secondary-color: #fb7185;     /* rose-400: 보조 포인트 */
  --bg-gradient: linear-gradient(135deg,
                  #fff1f2 0%,     /* 아주 옅은 로즈 */
                  #fecdd3 45%,    /* 파스텔 핑크 */
                  #fee2e2 100%);  /* 옅은 레드 톤으로 마무리 */
  --glass-bg: rgba(255,255,255,0.84);
  --text-color: #111827;          /* gray-900: 레드 배경에서도 또렷 */
}
/* =========================
       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-x: hidden;
}

/* =========================
       3) 큰 틀 컨테이너
       - 화면 폭이 넓어도 카드가 너무 커지지 않도록 max-width
    ========================= */
.container {
  width: 100%;
  max-width: 1000px;
  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);
  }
}