/* ===========================
   English Adventure — main.css
   전역 스타일 & CSS 변수
   =========================== */

:root {
  /* 색상 팔레트 */
  --color-primary:    #4A90E2;   /* 파란 메인 */
  --color-secondary:  #F5A623;   /* 노란 포인트 */
  --color-accent:     #FF6B6B;   /* 주황-빨강 강조 */
  --color-success:    #4CAF50;   /* 정답/성공 */
  --color-bg:         #F0F8FF;   /* 배경 */
  --color-surface:    #FFFFFF;   /* 카드 배경 */
  --color-text:       #333333;
  --color-text-light: #888888;

  /* 타이포그래피 */
  --font-base:   'Noto Sans KR', sans-serif;
  --font-size:   18px;           /* 기본 (글씨 크기 설정으로 변경 가능) */
  --font-size-sm: 14px;
  --font-size-lg: 22px;
  --font-size-xl: 28px;

  /* 간격 */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;

  /* 반지름 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* 그림자 */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
}

/* 폰트 크기 접근성 설정 */
[data-font-size="small"]  { --font-size: 15px; }
[data-font-size="medium"] { --font-size: 18px; }
[data-font-size="large"]  { --font-size: 22px; }

/* 리셋 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-base);
  font-size: var(--font-size);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-tap-highlight-color: transparent;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 로딩 화면 */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: var(--gap-md);
}

.loading-screen .logo {
  font-size: 64px;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* 페이지 공통 레이아웃 — 모든 페이지에서 사용 */
.page {
  padding: var(--gap-lg);
  padding-bottom: 80px;          /* nav-bar 높이만큼 여유 */
  min-height: 100vh;
}
.page-narrow {
  max-width: 480px;
  margin: 0 auto;
}
.page-content {                  /* 헤더 없는 단순 화면 */
  padding: var(--gap-lg);
  max-width: 480px;
  margin: 0 auto;
}

/* 유틸리티 */
.hidden   { display: none !important; }
.flex     { display: flex; }
.flex-col { flex-direction: column; }
.center   { align-items: center; justify-content: center; }
.gap-sm   { gap: var(--gap-sm); }
.gap-md   { gap: var(--gap-md); }
.text-center { text-align: center; }