@charset "UTF-8";

/* ==========================================================================
   반응형 UI (모바일 퍼스트)
   ========================================================================== */

/* 1. 다크모드 대응 (기존 유지) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1A1A2E;
    --color-bg-card: #16213E;
    --color-bg-header: #0F3460;
    --color-text: #E8E8E8;
    --color-text-secondary: #A0A0B0;
    --color-text-muted: #6B6B80;
    --color-border: #2A2A4A;
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-hover: rgba(0, 0, 0, 0.4);
    --color-overlay: rgba(0, 0, 0, 0.7);
  }
}

/* 2. 모션 축소 설정 (기존 유지) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   모바일 최적화 (기본 Base - 768px 미만)
   ========================================================================== */
/* 모바일 폰트 및 여백 미세 조정 */
:root {
  /* 기본 style.css 값을 유지하되, 모바일에서 너무 큰 요소만 제어 */
}

/* 모바일 검색바: 텍스트 입력창 축소 */
.search-bar {
  max-width: 100%;
}
#searchInput {
  padding-left: 36px;
  padding-right: 12px;
}

/* 모달: 모바일 화면 꽉 차게 */
.modal-content {
  width: 95%;
  max-height: 85vh;
}

/* 퀴즈 스코어 축소 */
.quiz-score {
  font-size: 60px;
}

/* 영수증/시간표 등 축소 */
.allowance-total {
  font-size: var(--font-size-lg);
}


/* ==========================================================================
   태블릿 해상도 (768px 이상)
   ========================================================================== */
@media (min-width: 768px) {
  /* 태블릿 이상부터 폰트 크기 및 여백 스케일업 (유체 타이포그래피 느낌 적용) */
  :root {
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --space-4: 20px;
    --space-5: 32px;
  }

  /* 그리드 레이아웃: 2열 변경 */
  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
  .quiz-options {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 스크롤 영역 아이템 너비 축소 */
  .horizontal-scroll > * {
    flex: 0 0 calc(40% - var(--space-4));
  }

  /* 검색바 너비 고정 */
  .search-bar {
    max-width: 500px;
  }

  /* 퀴즈 스코어 복구 */
  .quiz-score {
    font-size: 80px;
  }
}

/* ==========================================================================
   데스크톱 해상도 (1024px 이상)
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    --font-size-xl: 26px;
    --font-size-2xl: 36px;
    --font-size-3xl: 48px;
    --space-4: 24px;
    --space-5: 40px;
  }

  /* 데스크톱 전용 네비게이션 전환 (바텀 네비 숨김, 사이드바 노출) */
  .sidebar {
    display: block;
  }
  .bottom-nav {
    display: none;
  }
  .main-content {
    margin-left: var(--sidebar-width);
    padding-bottom: var(--space-5); /* 하단 모바일 바 높이 제거 */
  }
  .header-inner {
    padding-left: var(--sidebar-width);
  }

  /* 모바일 광고 영역 숨김 */
  .ad-mobile-bottom {
    display: none;
  }

  /* 그리드 레이아웃: 3열 변경 */
  .tool-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 스크롤 영역 아이템 너비 축소 */
  .horizontal-scroll > * {
    flex: 0 0 calc(25% - var(--space-4));
  }

  /* PWA 프롬프트 우측 하단 고정 */
  .pwa-install-prompt {
    bottom: var(--space-5);
    left: auto;
    right: var(--space-5);
    transform: none;
    width: auto;
  }
}

/* ==========================================================================
   대형 모니터 해상도 (1280px 이상)
   ========================================================================== */
@media (min-width: 1280px) {
  /* 그리드 레이아웃: 4열 변경 */
  .tool-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}