/**
 * 반응형 디자인 미디어 쿼리
 * 
 * 브레이크포인트 순서:
 * 1. 매우 작은 화면 (320px ~ 480px)
 * 2. 모바일 (640px 이하)
 * 3. 태블릿 (641px ~ 1023px)
 * 4. 데스크톱 (768px 이상)
 * 5. 큰 화면 (1024px 이상)
 * 6. 초대형 화면 (1920px 이상)
 * 7. 가로 모드 (landscape)
 * 8. 반응형 유틸리티 클래스
 * 9. 접근성 (터치 영역 보장)
 */

/* ============================================
   1. 매우 작은 화면 최적화 (320px ~ 480px)
   ============================================ */
@media (max-width: 480px) {
  /* ==========================================
     업로드 영역
     ========================================== */
  .upload-zone {
    padding: 1.5rem 0.75rem !important;
  }

  .upload-zone .text-5xl,
  .upload-zone .text-6xl {
    font-size: 2.5rem !important;
  }

  /* ==========================================
     카드 컴포넌트
     ========================================== */
  .feature-card {
    padding: 1rem !important;
  }

  .feature-card .text-4xl {
    font-size: 2rem !important;
  }

  .step-card {
    padding: 1rem !important;
  }

  .step-card .w-16 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    font-size: 1.25rem !important;
  }

  .step-card .text-3xl {
    font-size: 2rem !important;
  }

  .step-card h4 {
    font-size: 0.875rem !important;
  }

  .step-card p {
    font-size: 0.75rem !important;
  }

  .bg-white.rounded-2xl,
  .bg-white.rounded-3xl {
    padding: 1rem !important;
  }

  /* ==========================================
     문장 아이템
     ========================================== */
  .sentence-item {
    padding: 0.75rem !important;
  }

  .sentence-item p {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  /* ==========================================
     헤더
     ========================================== */
  header {
    padding-top: 0.75rem;
    margin-bottom: 1rem;
  }

  header h1 {
    font-size: 1.5rem;
  }

  header h2 {
    font-size: 1rem;
  }

  header p {
    font-size: 0.75rem;
    padding: 0 0.25rem;
  }

  /* ==========================================
     버튼
     ========================================== */
  .camera-button,
  .file-button,
  .load-button {
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    min-height: 48px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .flex.flex-col.sm\:flex-row {
    gap: 0.75rem;
    width: 100%;
  }

  /* ==========================================
     레이아웃
     ========================================== */
  .bg-gradient-to-r.from-indigo-50.to-purple-50 {
    padding: 1rem !important;
  }

  /* ==========================================
     모달
     ========================================== */
  .full-text-modal-content {
    padding: 1rem !important;
    margin: 0.5rem !important;
  }

  /* ==========================================
     결과 뷰 헤더
     ========================================== */
  .flex.justify-between.items-center {
    gap: 0.5rem !important;
  }
}

/* ============================================
   2. 모바일 (기본) - 640px 이하
   ============================================ */
@media (max-width: 640px) {
  /* ==========================================
     타이포그래피
     ========================================== */
  .text-4xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .text-lg {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  /* ==========================================
     레이아웃 - 패딩
     ========================================== */
  .p-8 {
    padding: 1.5rem;
  }

  .p-12 {
    padding: 2rem;
  }

  .p-6 {
    padding: 1rem;
  }

  .p-5 {
    padding: 1rem;
  }

  /* ==========================================
     레이아웃 - 마진
     ========================================== */
  .mb-6 {
    margin-bottom: 1rem !important;
  }

  .mb-4 {
    margin-bottom: 0.75rem !important;
  }

  .upload-zone.mb-6 {
    margin-bottom: 1rem !important;
  }

  .grid.mb-6 {
    margin-bottom: 1rem !important;
  }

  /* ==========================================
     레이아웃 - 그리드
     ========================================== */
  .grid.gap-4 {
    gap: 0.75rem !important;
  }

  .grid.gap-6 {
    gap: 1rem !important;
  }

  /* ==========================================
     업로드 영역
     ========================================== */
  .upload-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  .upload-zone {
    padding: 2rem 1rem !important;
  }

  .upload-zone .text-5xl,
  .upload-zone .text-6xl {
    font-size: 3rem !important;
  }

  .camera-button,
  .file-button {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
  }

  .load-button {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
  }

  .camera-button .icon-wrapper,
  .file-button .icon-wrapper {
    font-size: 1.5rem !important;
  }

  .load-button .icon-wrapper {
    font-size: 1.25rem !important;
  }

  /* ==========================================
     헤더
     ========================================== */
  header {
    padding-top: 1rem;
    margin-bottom: 1.5rem;
  }

  header .float-animation {
    margin-bottom: 0.75rem;
  }

  header .text-5xl,
  header .text-6xl {
    font-size: 3.5rem !important;
  }

  header h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
  }

  header h2 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }

  header p {
    font-size: 0.8125rem;
    padding: 0 0.5rem;
    line-height: 1.5;
  }

  /* ==========================================
     카드 컴포넌트
     ========================================== */
  .bg-white.rounded-2xl {
    border-radius: 1rem;
  }

  .bg-white.rounded-3xl {
    padding: 1rem !important;
  }

  .feature-card {
    padding: 0.75rem !important;
  }

  .feature-card .text-3xl {
    font-size: 1.75rem !important;
  }

  .feature-card .text-4xl {
    font-size: 2rem !important;
  }

  .feature-card h3 {
    font-size: 0.8125rem !important;
    line-height: 1.3;
  }

  .feature-card p {
    font-size: 0.6875rem !important;
    line-height: 1.4;
  }

  .mode-card {
    padding: 0.75rem !important;
  }

  .mode-card .text-4xl {
    font-size: 2rem !important;
  }

  .mode-card h4 {
    font-size: 0.875rem !important;
  }

  .mode-card p {
    font-size: 0.75rem !important;
  }

  .mode-card .text-sm {
    font-size: 0.6875rem !important;
  }

  .mode-card ul {
    gap: 0.25rem !important;
  }

  .trust-card {
    padding: 1.25rem !important;
  }

  .trust-card .text-5xl {
    font-size: 3rem !important;
  }

  .journey-step {
    padding: 1rem !important;
  }

  .journey-step .w-20 {
    width: 4rem !important;
    height: 4rem !important;
    font-size: 1.5rem !important;
  }

  .persona-card {
    padding: 1.25rem !important;
  }

  .persona-card .text-5xl {
    font-size: 3.5rem !important;
  }

  /* ==========================================
     문장 아이템
     ========================================== */
  .sentence-item {
    padding: 1rem;
  }

  .sentence-item p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* ==========================================
     버튼
     ========================================== */
  .speak-button,
  .translate-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    flex: 1;
    min-width: 0;
  }

  .speak-button span,
  .translate-button span {
    font-size: 0.75rem;
  }

  .scenario-tab-button {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  .hero-cta-button {
    width: 100%;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.9375rem !important;
    min-height: 48px; /* 터치 영역 확보 */
  }

  .value-badge {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  .flex.gap-3 {
    flex-direction: column;
    gap: 0.75rem;
  }

  .flex.gap-3 button {
    width: 100%;
  }

  /* ==========================================
     결과 뷰 헤더
     ========================================== */
  .flex.justify-between.items-center {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .flex.justify-between.items-center h2 {
    font-size: 1.125rem;
  }

  /* ==========================================
     모달
     ========================================== */
  .full-text-modal {
    padding: 0.5rem;
  }

  .full-text-modal-content {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 0.75rem;
  }

  .full-text-modal-header {
    padding: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .full-text-modal-title {
    font-size: 1.125rem;
    flex: 1;
    min-width: 0;
  }

  .full-text-modal-close {
    font-size: 1.25rem;
    padding: 0.25rem;
  }

  .full-text-modal-body {
    padding: 1rem;
  }

  .full-text-content {
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .full-text-modal-footer {
    padding: 1rem;
  }

  .full-text-copy-button {
    width: 100%;
    justify-content: center;
  }

  /* ==========================================
     이미지
     ========================================== */
  img.w-full {
    max-height: 200px;
  }

  /* ==========================================
     레이아웃 - 섹션
     ========================================== */
  .bg-gradient-to-r.from-indigo-50.to-purple-50 {
    padding: 1.25rem !important;
  }

  .tutorial-step {
    gap: 0.75rem !important;
  }

  .tutorial-step .w-8 {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.875rem !important;
  }

  .tutorial-step p {
    font-size: 0.875rem !important;
    line-height: 1.5;
  }

  /* ==========================================
     설치 배너
     ========================================== */
  .install-banner {
    padding: 0.875rem 1rem !important;
  }

  .install-banner > div {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .install-banner .flex.items-center.gap-3 {
    flex: 1;
    min-width: 0;
  }

  .install-banner .flex.items-center.gap-3 .text-2xl {
    font-size: 1.5rem !important;
    flex-shrink: 0;
  }

  .install-banner .flex.items-center.gap-3 > div {
    min-width: 0;
    flex: 1;
  }

  .install-banner .flex.items-center.gap-3 p {
    font-size: 0.8125rem !important;
    line-height: 1.4;
  }

  .install-banner .flex.items-center.gap-3 p.font-semibold {
    font-size: 0.875rem !important;
    margin-bottom: 0.125rem;
  }

  .install-banner .flex.gap-2 {
    flex-shrink: 0;
    gap: 0.5rem;
  }

  #install-banner-button {
    min-height: 44px !important;
    min-width: 72px !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap;
  }

  #install-banner-close {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.625rem !important;
    font-size: 1.125rem !important;
  }

  /* ==========================================
     푸터
     ========================================== */
  footer {
    margin-top: 1.5rem;
    padding: 0 1rem;
    font-size: 0.75rem;
  }
}

/* ============================================
   3. 태블릿 - 641px ~ 1023px
   ============================================ */
@media (min-width: 641px) and (max-width: 1023px) {
  /* ==========================================
     타이포그래피
     ========================================== */
  .text-4xl {
    font-size: 2.25rem;
  }

  .text-xl {
    font-size: 1.375rem;
  }

  .text-lg {
    font-size: 1.125rem;
  }

  .text-base {
    font-size: 1rem;
  }

  /* ==========================================
     레이아웃 - 패딩
     ========================================== */
  .p-8 {
    padding: 2rem;
  }

  .p-12 {
    padding: 3rem;
  }

  /* ==========================================
     레이아웃 - 그리드
     ========================================== */
  .grid.gap-4 {
    gap: 1rem !important;
  }

  .space-y-6 > * + * {
    margin-top: 1.5rem;
  }

  /* ==========================================
     업로드 영역
     ========================================== */
  .upload-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .upload-zone {
    padding: 2.5rem 2rem !important;
  }

  .camera-button,
  .file-button {
    min-width: 200px !important;
    max-width: 280px !important;
    width: auto !important;
    padding: 1rem 1.5rem !important;
  }

  .load-button {
    width: 100%;
    padding: 1rem 1.5rem !important;
  }

  /* ==========================================
     헤더
     ========================================== */
  header {
    padding-top: 1.5rem;
    margin-bottom: 2rem;
  }

  header h1 {
    font-size: 2rem;
  }

  header h2 {
    font-size: 1.375rem;
  }

  /* ==========================================
     카드 컴포넌트
     ========================================== */
  .feature-card {
    padding: 1.25rem !important;
  }

  .feature-card .text-3xl {
    font-size: 2.25rem !important;
  }

  .feature-card h3 {
    font-size: 0.9375rem !important;
  }

  .feature-card p {
    font-size: 0.75rem !important;
  }

  .mode-card {
    padding: 1.5rem !important;
  }

  .scenario-step {
    padding: 0.5rem;
  }

  .trust-card {
    padding: 1.5rem !important;
  }

  .journey-step {
    padding: 1.5rem !important;
  }

  .persona-card {
    padding: 1.5rem !important;
  }

  /* ==========================================
     문장 아이템
     ========================================== */
  .sentence-item {
    padding: 1.125rem;
  }

  .sentence-item p {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  /* ==========================================
     버튼
     ========================================== */
  .flex.gap-2,
  .flex.gap-3 {
    gap: 0.875rem;
  }

  /* ==========================================
     결과 뷰 헤더
     ========================================== */
  .flex.justify-between.items-center {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .flex.justify-between.items-center {
    gap: 1rem;
  }

  /* ==========================================
     모달
     ========================================== */
  .full-text-modal-content {
    max-width: 90%;
  }

  .full-text-modal-content {
    max-width: 85%;
    padding: 2rem;
  }

  /* ==========================================
     이미지
     ========================================== */
  img {
    max-height: 400px;
  }

  /* ==========================================
     레이아웃 - 섹션
     ========================================== */
  .bg-gradient-to-r.from-indigo-50.to-purple-50 {
    padding: 1.75rem !important;
  }
}

/* ============================================
   4. 데스크톱 - 768px 이상
   ============================================ */
@media (min-width: 768px) {
  /* ==========================================
     레이아웃 - 플렉스박스
     ========================================== */
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  /* ==========================================
     업로드 영역
     ========================================== */
  .upload-buttons {
    flex-direction: row;
  }

  .camera-button,
  .file-button {
    min-width: 220px;
    max-width: 300px;
  }
}

/* ============================================
   5. 큰 화면 - 1024px 이상
   ============================================ */
@media (min-width: 1024px) {
  /* ==========================================
     문장 아이템
     ========================================== */
  .sentence-item {
    padding: 1.25rem;
  }

  .sentence-item p {
    font-size: 1.125rem;
  }

  /* ==========================================
     카드 컴포넌트
     ========================================== */
  .feature-card {
    padding: 2rem !important;
  }

  .feature-card .text-4xl {
    font-size: 3rem !important;
  }

  .mode-card {
    padding: 2rem !important;
  }

  .scenario-step {
    padding: 1rem;
  }

  .trust-card {
    padding: 2rem !important;
  }

  .journey-step {
    padding: 2rem !important;
  }

  .persona-card {
    padding: 2rem !important;
  }

  /* ==========================================
     업로드 영역
     ========================================== */
  .upload-zone {
    padding: 3.5rem 2.5rem !important;
  }

  /* ==========================================
     레이아웃 - 섹션
     ========================================== */
  .bg-gradient-to-r.from-indigo-50.to-purple-50 {
    padding: 2.5rem !important;
  }
}

/* ============================================
   6. 초대형 화면 - 1920px 이상
   ============================================ */
@media (min-width: 1920px) {
  /* ==========================================
     레이아웃 - 컨테이너
     ========================================== */
  .max-w-4xl {
    max-width: 1400px;
  }

  /* ==========================================
     문장 아이템
     ========================================== */
  .sentence-item {
    padding: 1.5rem;
  }

  .sentence-item p {
    font-size: 1.25rem;
    line-height: 1.75;
  }

  /* ==========================================
     카드 컴포넌트
     ========================================== */
  .feature-card {
    padding: 2.5rem !important;
  }

  .feature-card .text-4xl {
    font-size: 3.5rem !important;
  }

  /* ==========================================
     업로드 영역
     ========================================== */
  .upload-zone {
    padding: 4rem 3rem !important;
  }

  /* ==========================================
     헤더
     ========================================== */
  header {
    padding-top: 2rem;
    margin-bottom: 3rem;
  }

  header h1 {
    font-size: 2.5rem;
  }

  header h2 {
    font-size: 2rem;
  }
}

/* ============================================
   7. 가로 모드(landscape) 최적화
   ============================================ */
@media (max-width: 896px) and (orientation: landscape) {
  /* ==========================================
     헤더
     ========================================== */
  header {
    padding-top: 0.5rem;
    margin-bottom: 1rem;
  }

  header .float-animation {
    margin-bottom: 0.5rem;
  }

  header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
  }

  header h2 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
  }

  header p {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }

  /* ==========================================
     업로드 영역
     ========================================== */
  .upload-zone {
    padding: 1.5rem !important;
  }

  .upload-zone .text-5xl,
  .upload-zone .text-6xl {
    font-size: 2.5rem !important;
    margin-bottom: 0.75rem;
  }

  .upload-buttons {
    gap: 0.5rem;
  }

  .camera-button,
  .file-button,
  .load-button {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* ==========================================
     카드 컴포넌트
     ========================================== */
  .feature-card {
    padding: 1rem !important;
  }

  .feature-card .text-4xl {
    font-size: 2rem !important;
    margin-bottom: 0.5rem;
  }

  /* ==========================================
     문장 아이템
     ========================================== */
  .sentence-item {
    padding: 0.875rem !important;
  }

  /* ==========================================
     이미지
     ========================================== */
  img {
    max-height: 200px;
  }

  /* ==========================================
     모달
     ========================================== */
  .full-text-modal-content {
    max-height: 80vh;
    overflow-y: auto;
  }

  /* ==========================================
     레이아웃 - 섹션
     ========================================== */
  .bg-gradient-to-r.from-indigo-50.to-purple-50 {
    padding: 1rem !important;
  }

  .space-y-6 > * + * {
    margin-top: 1rem;
  }
}

/* ============================================
   8. 반응형 유틸리티 클래스
   ============================================ */

/* sm: (640px 이상) */
@media (min-width: 640px) {
  /* ==========================================
     레이아웃 - 디스플레이
     ========================================== */
  .sm\:inline {
    display: inline;
  }

  .sm\:hidden {
    display: none;
  }

  /* ==========================================
     레이아웃 - 플렉스박스
     ========================================== */
  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:items-center {
    align-items: center;
  }

  /* ==========================================
     레이아웃 - 크기
     ========================================== */
  .sm\:w-auto {
    width: auto;
  }

  .sm\:max-h-64 {
    max-height: 16rem;
  }

  .sm\:max-h-none {
    max-height: none;
  }

  /* ==========================================
     타이포그래피
     ========================================== */
  .sm\:text-base {
    font-size: 1rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
  }

  /* ==========================================
     레이아웃 - 패딩
     ========================================== */
  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* ==========================================
     레이아웃 - 마진
     ========================================== */
  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:mt-4 {
    margin-top: 1rem;
  }

  .sm\:ml-9 {
    margin-left: 2.25rem;
  }

  /* ==========================================
     레이아웃 - 간격
     ========================================== */
  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }
}

/* md: (768px 이상) */
@media (min-width: 768px) {
  /* ==========================================
     레이아웃 - 패딩
     ========================================== */
  .md\:p-8 {
    padding: 2rem;
  }

  .md\:pt-6 {
    padding-top: 1.5rem;
  }

  .md\:pt-8 {
    padding-top: 2rem;
  }

  /* ==========================================
     레이아웃 - 그리드
     ========================================== */
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================
   텍스트 줄바꿈 유틸리티
   ========================================== */
.break-words {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================
   9. 접근성 - 터치 영역 최소 크기 보장
   ============================================ */
/* 모든 인터랙티브 요소의 최소 터치 영역 보장 (44px × 44px) */
button,
a.button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="file"]::file-selector-button {
  min-height: 44px;
  min-width: 44px;
}

/* 작은 아이콘 버튼도 터치 영역 보장 */
.settings-icon-button,
.modal-close-button,
.change-image-button,
.reset-button {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem;
}

/* 문장 아이템 내 버튼 */
.speak-button,
.translate-button,
.speak-all-button,
.show-full-text-button {
  min-height: 44px;
}

/* 저장 상태 버튼 */
.manual-save-button {
  min-height: 44px;
  min-width: 44px;
}

/* 모바일에서도 터치 영역 유지 */
@media (max-width: 640px) {
  button,
  a.button,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* 작은 텍스트 버튼도 터치 영역 보장 */
  .text-xs button,
  button.text-xs {
    padding: 0.75rem 1rem;
    min-height: 44px;
  }
}