/**
 * mobile-unified.css - 통합 모바일 최적화 스타일시트
 * 모든 페이지에서 일관된 모바일 경험 제공
 */

/* 통일된 브레이크포인트 정의 */
:root {
  --mobile-breakpoint: 768px;
  --tablet-breakpoint: 1024px;
  --small-mobile-breakpoint: 480px;
  --tiny-mobile-breakpoint: 360px;
}

/* 기본 모바일 설정 */
@media (max-width: 768px) {
  html {
    font-size: 14px;
    height: 100%;
    overflow-x: hidden;
    /* 수직 스크롤 허용 */
    overflow-y: auto;
  }

  body {
    overflow-x: hidden;
    /* 수직 스크롤 허용 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    /* 하단 네비게이션 공간 확보 */
    padding-bottom: 80px !important;
  }

  /* 모바일에서 상단 네비게이션 숨기기 */
  .navbar,
  .nav-menu,
  .header-nav,
  .top-navigation,
  .desktop-nav,
  header nav:not(.mobile-nav),
  .main-nav,
  nav.main-nav,
  .main-nav.bottom-nav,
  nav.bottom-nav,
  .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }

  /* 페이지 로딩 오버레이가 스크롤을 막지 않도록 */
  .page-loading.hidden,
  .page-loading:not(.active) {
    display: none !important;
    pointer-events: none !important;
  }

  /* 로딩 오버레이가 활성화되어도 스크롤 차단 방지 */
  .loading-overlay {
    pointer-events: none !important;
  }

  /* 메인 섹션 스크롤 허용 */
  .main-section,
  #dictationSection,
  .dictation-section {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    position: relative !important;
  }

  /* 받아쓰기 페이지 전체 스크롤 가능하도록 */
  .dictation-setup {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* 모바일에서 상단 헤더 완전 숨기기 */
  .header,
  header {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }

  /* 일관된 텍스트 크기 적용 */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }
  h4 { font-size: 1rem !important; }
  p, span, div, li, a, button, input, select, textarea {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }

  /* 모든 컨테이너 요소 모바일 최적화 */
  .container, .content-container, .main-container {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    /* 스크롤 허용 */
    overflow-y: visible !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* 불필요한 여백 제거 */
  .section {
    padding: 16px !important;
    margin: 8px 0 !important;
  }

  /* 카드형 요소들 모바일 최적화 */
  .card, .quiz-card, .dictation-card, .profile-card {
    margin: 8px 0 !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* 버튼 터치 최적화 */
  button, .btn, .button {
    min-height: 44px !important;
    padding: 12px 16px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* 입력 필드 최적화 */
  input, select, textarea {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* iOS 줌 방지 */
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 그리드 레이아웃 모바일 대응 */
  .grid, .grid-container {
    display: block !important;
  }

  .grid > *, .grid-container > * {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
}

/* 작은 모바일 화면 */
@media (max-width: 480px) {
  html {
    font-size: 13px;
  }

  h1 { font-size: 1.3rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 1rem !important; }
  p, span, div, li, a, button, input, select, textarea {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  /* 컨테이너 패딩 더 줄이기 */
  .container, .content-container, .main-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 섹션 패딩 줄이기 */
  .section {
    padding: 12px !important;
    margin: 6px 0 !important;
  }

  /* 카드 패딩 줄이기 */
  .card, .quiz-card, .dictation-card, .profile-card {
    padding: 12px !important;
    margin: 6px 0 !important;
  }

  /* 버튼 크기 조정 */
  button, .btn, .button {
    padding: 10px 12px !important;
    font-size: 0.8rem !important;
  }
}

/* 매우 작은 화면 */
@media (max-width: 360px) {
  html {
    font-size: 12px;
  }

  /* 최소 패딩으로 화면 공간 최대 활용 */
  .container, .content-container, .main-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .section {
    padding: 8px !important;
    margin: 4px 0 !important;
  }

  .card, .quiz-card, .dictation-card, .profile-card {
    padding: 8px !important;
    margin: 4px 0 !important;
  }

  /* 텍스트 크기 더 작게 */
  h1 { font-size: 1.2rem !important; }
  h2 { font-size: 1rem !important; }
  h3 { font-size: 0.9rem !important; }
  p, span, div, li, a, button, input, select, textarea {
    font-size: 0.75rem !important;
  }
}

/* 통합 헤더 스타일 */
/* 갤럭시탭 S4 포함하도록 1200px로 확장 */
@media (max-width: 1200px) {
  /* 태블릿 및 모바일에서 상단 헤더 완전 숨기기 */
  .header,
  header {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }

  /* 헤더 관련 설정 제거 - 모바일에서는 헤더를 완전히 숨김 */
  /* .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    background: white !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
  }
  
  .header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    padding: 0 16px !important;
    gap: 16px !important;
  }
  
  /* 브랜드 영역 */
  .header-title {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
  }
  
  .header-title a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--primary-color) !important;
    text-decoration: none !important;
  }
  
  .logo-icon {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
  }
  
  .site-title .full-title {
    font-weight: 700 !important;
    color: var(--text-color) !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
    font-size: 1.1rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
  }
  
  /* 데스크톱 네비게이션 숨김 */
  .desktop-nav-container,
  .mobile-nav-container {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* 사용자 인증 컨트롤 */
  .header-right-section {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    margin-left: auto !important;
  }
  
  .mobile-auth-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    height: 100% !important;
  }
  
  .mobile-auth-controls .auth-btn {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    min-height: 44px !important;
    border-radius: 20px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
  }
  
  .mobile-auth-controls .user-profile-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    min-height: 44px !important;
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
  }
  
  .mobile-auth-controls .profile-pic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  /* 데스크톱 인증 컨트롤 숨김 */
  .user-auth-controls {
    display: none;
  }
  
  /* 메인 컨텐츠 상단 마진 */
  main,
  .main-section,
  body > .container,
  .page-hero {
    margin-top: 60px;
    padding-top: 20px;
  }
}

/* 하단 탭바 스타일 */
/* 갤럭시탭 S4 포함하도록 1200px로 확장 */
@media (max-width: 1200px) {
  /* 모바일에서 body와 컨텐츠 영역에 하단 탭바 공간 확보 */
  body {
    padding-bottom: 70px !important; /* 탭바 높이만 */
    position: relative !important;
  }
  
  /* 메인 컨텐츠 영역에도 여유 공간 추가 - 기본 설정 */
  .main-section,
  .main-wrapper,
  .container,
  .community-container,
  .quiz-container,
  .profile-container {
    margin-bottom: 0 !important; /* 푸터와 탭바 사이 공간 제거 */
    padding-bottom: 0 !important; /* 모든 패딩 제거 */
  }

  /* main 태그와 main-section 클래스 - unified-layout.css에서 관리 */
  /* main.main-section, .main-section의 여백은 unified-layout.css에서 통일 관리됨 */
  .mobile-bottom-tabs {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    background: white !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999 !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 !important;
    transform: none !important;
    margin: 0 !important;
    /* 강제로 위치 고정 */
    top: auto !important;
    position: fixed !important;
  }
  
  .mobile-bottom-tabs .tab-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    text-decoration: none !important;
    color: #6b7280 !important;
    transition: all 0.2s ease !important;
    padding: 8px 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }
  
  .mobile-bottom-tabs .tab-item:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    color: var(--primary-color) !important;
  }
  
  .mobile-bottom-tabs .tab-item.active {
    color: var(--primary-color) !important;
    background: rgba(102, 126, 234, 0.1) !important;
  }
  
  .mobile-bottom-tabs .tab-item i {
    font-size: 20px !important;
    margin-bottom: 4px !important;
    display: block !important;
  }
  
  .mobile-bottom-tabs .tab-item span {
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  
  /* 푸터를 하단 탭바 위에 위치 - 통일된 간격 적용 */
  .footer,
  #common-footer,
  footer,
  footer.footer,
  footer#common-footer {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    margin-bottom: 15px !important; /* 탭바와 적절한 간격 */
    padding: 10px 0 !important; /* 푸터 자체 패딩 */
    margin-top: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
    min-height: auto !important;
    flex-shrink: 0 !important;
    border-bottom: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    color: #6b7280 !important;
  }
  
  /* 푸터 내부 컨텐츠 간격 조정 */
  .footer *,
  .footer .footer-content,
  .footer .footer-content * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important; /* 적절한 라인 높이 */
  }
  
  /* 푸터 텍스트 스타일 개선 */
  .footer span,
  .footer div,
  #common-footer span,
  #common-footer div {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    text-align: center !important;
  }
  
  /* 메인 컨텐츠 하단 여백 - 푸터와 탭바 간격 제거 */
  .hero-section,
  .features-section,
  main,
  .main-section,
  main.main-section {
    margin-bottom: 0 !important; /* 하단 마진 제거 */
    padding-bottom: 0 !important; /* 하단 패딩 제거 */
  }
  
  /* 페이지 전체 높이 조정 - 하단 탭바 공간 유지 */
  body {
    padding-bottom: 70px !important; /* 하단 탭바 공간 확보 - 최소화 */
    margin-bottom: 0 !important;
  }
  
  /* 스크롤 가능하도록 수정 */
  .page-container,
  .main-container {
    /* max-height 제거 - 자유로운 스크롤 허용 */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* 태블릿 전용 스타일 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1200px) {
  /* 태블릿 범위 - 갤럭시탭 S4 포함 */
  /* 헤더 높이 설정 제거 - 모바일에서 헤더 숨김 */
  /* .header {
    height: 70px !important;
  } */

  /* 태블릿에서 main.main-section 패딩 조정 */
  main.main-section,
  main.main-section.quiz-content-section,
  main.main-section:has(.learning-content-section),
  main.main-section:has(.community-content-section),
  main.main-section:has(#dictationSection),
  main#quizSection.main-section,
  main#learningMainSection.main-section,
  main#dictationSection.main-section,
  main#communitySection.main-section {
    padding-top: 90px !important; /* 헤더(70px) + 여유(20px) */
  }

  /* main-wrapper 사용 페이지 (correction.html 등) */
  .main-wrapper {
    padding-top: 90px !important;
  }

  /* 기존 margin-top 규칙들 */
  body > .container,
  .page-hero {
    margin-top: 80px !important;
  }
  
  .mobile-bottom-tabs {
    height: 80px !important;
  }
  
  .mobile-bottom-tabs .tab-item {
    font-size: 13px !important;
  }
  
  .mobile-bottom-tabs .tab-item i {
    font-size: 24px !important;
  }
  
  .mobile-bottom-tabs .tab-item span {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  
  .footer,
  #common-footer,
  footer,
  footer.footer,
  footer#common-footer {
    margin-bottom: 20px !important; /* 태블릿 탭바와 통일된 간격 */
    padding: 12px 0 !important; /* 태블릿 적절한 패딩 */
    margin-top: 0 !important;
    min-height: auto !important;
    display: block !important;
    visibility: visible !important;
    border-bottom: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    color: #6b7280 !important;
  }
}

/* 작은 모바일 화면 특별 처리 */
@media (max-width: 480px) {
  /* 헤더 스타일 제거 - 모바일에서 헤더 숨김 */
  /* .header {
    height: 50px !important;
  } */

  /* .header-content {
    padding: 0 6px !important;
    gap: 3px !important;
  }
  
  main, .main-section, body > .container {
    margin-top: 50px !important;
    padding-top: 15px !important;
  }
  
  .hero-section {
    margin-top: 0 !important;
    min-height: calc(100vh - 50px) !important;
  }
  
  .header-title {
    font-size: 0.9rem !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .logo-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .site-title {
    font-size: 0.9rem !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .site-title .full-title {
    font-size: 0.9rem !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: keep-all !important;
    line-height: 1.1 !important;
    max-width: none !important;
  }
  
  .mobile-auth-controls .auth-btn {
    font-size: 0.7rem !important;
    padding: 4px 6px !important;
    height: 32px !important;
  }
  
  .mobile-auth-controls .user-profile-btn {
    font-size: 0.7rem !important;
    padding: 4px 6px !important;
    height: 32px !important;
    max-width: 100px !important;
  }
  
  .mobile-auth-controls .profile-pic {
    width: 16px !important;
    height: 16px !important;
  }
}

/* 데스크톱에서는 모바일 탭바 완전 숨김 */
/* 1201px 이상을 데스크톱으로 취급 (갤럭시탭 S4는 태블릿) */
@media (min-width: 1201px) {
  .mobile-bottom-tabs {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
}

/* 터치 친화적인 인터랙션 */
@media (max-width: 768px) {
  button,
  .btn,
  a,
  input,
  select {
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    touch-action: manipulation;
  }
  
  /* 활성화 효과 */
  button:active,
  .btn:active,
  a:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* 폼 요소 모바일 최적화 */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px; /* iOS 줌 방지 */
    padding: 0.75rem;
    border-radius: 8px;
  }
  
  .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }
}

/* 모달 모바일 최적화 */
@media (max-width: 768px) {
  .modal,
  .auth-modal,
  .quiz-feedback-modal {
    padding: 1rem;
  }
  
  .modal-content,
  .auth-modal-content,
  .quiz-feedback-content {
    width: 95%;
    max-width: none;
    border-radius: 12px;
  }
  
  .modal-header {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .modal-footer {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
  }
}

/* 스크롤바 최적화 */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }
}

/* 다크모드 모바일 최적화 */
body.dark-mode {
  /* 갤럭시탭 S4 포함하도록 1200px로 확장 */
  @media (max-width: 1200px) {
    /* 다크 모드 헤더 스타일 제거 - 모바일에서 헤더 숨김 */
    /* .header {
      background: #1f2937 !important;
      border-bottom-color: #374151 !important;
    } */
    
    .mobile-bottom-tabs {
      background: #1f2937 !important;
      border-top-color: #374151 !important;
    }
    
    .mobile-auth-controls .auth-btn {
      background: var(--primary-color) !important;
    }
    
    .mobile-auth-controls .user-profile-btn {
      background: #374151 !important;
      border-color: #4b5563 !important;
      color: #f9fafb !important;
    }
  }
}

/* 접근성 개선 */
@media (max-width: 768px) {
  *:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
  }
  
  /* 고대비 모드 지원 */
  @media (prefers-contrast: high) {
    button, .btn {
      border: 2px solid currentColor;
    }
  }
  
  /* 움직임 감소 모드 지원 */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* iOS Safari 스크롤 문제 해결 */
@media (max-width: 768px) {
  /* iOS Safari 바운스 스크롤 비활성화 */
  html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
  }
  
  /* 불필요한 여백 제거 */
  html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* Safari에서 하단 홈 인디케이터 공간 고려 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  
  /* 콘텐츠 래퍼 높이 설정 - 스크롤 가능하게 수정 */
  .main-section,
  main {
    min-height: calc(100vh - 145px - env(safe-area-inset-bottom, 0px)); /* 최소 높이만 설정 */
    /* max-height 제거 - 스크롤 가능하게 함 */
  }
  
  /* 푸터가 뷰포트를 넘지 않도록 보장 - 여백 최소화 */
  .footer,
  #common-footer,
  footer,
  footer.footer,
  footer#common-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 60px !important; /* 높이 감소 */
    overflow: visible !important; /* 내용이 잘리지 않도록 */
    flex-shrink: 0 !important;
    width: 100% !important;
    margin-bottom: 15px !important; /* 하단 탭바와 통일된 간격 */
    box-sizing: border-box !important;
  }
}

/* 맞춤법 나누기 페이지 (community.html) 모바일 최적화 */
@media (max-width: 768px) {
  /* 섹션 선택 버튼 모바일 최적화 */
  .community-section-selector {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0 1rem !important;
  }
  
  .community-section-btn {
    width: 100% !important;
    padding: 1rem 1.2rem !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    border: 2px solid #e5e7eb !important;
    background: white !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.8rem !important;
    min-height: 48px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  
  .community-section-btn i {
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
  }
  
  .community-section-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: #667eea !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
  }
  
  .community-section-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2) !important;
    border-color: #667eea !important;
  }
  
  /* 컨텐츠 영역 최적화 */
  .community-content-area {
    background: white !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin: 0 1rem 1rem 1rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e5e7eb !important;
  }
  
  /* 퀴즈 모드 탭 최적화 */
  .quiz-mode-tabs {
    display: flex !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    padding: 4px !important;
    margin-bottom: 1.5rem !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  
  .quiz-mode-tab {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.8rem 0.6rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    min-height: 44px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  
  .quiz-mode-tab i {
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
  }
  
  .quiz-mode-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
  }
  
  /* 카드 스타일 최적화 */
  .card {
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  }
  
  .card h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.2rem !important;
    color: #1f2937 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
  }
  
  .card h3 i {
    color: #667eea !important;
    font-size: 1rem !important;
  }
  
  /* 폼 그룹 최적화 */
  .form-group {
    margin-bottom: 1.2rem !important;
  }
  
  .form-group label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #374151 !important;
  }
  
  .form-control {
    width: 100% !important;
    padding: 0.8rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    background: white !important;
    box-sizing: border-box !important;
  }
  
  .form-control:focus {
    outline: none !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
  }
  
  /* 버튼 최적화 */
  .primary-btn,
  .btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    min-height: 44px !important;
  }
  
  .primary-btn:hover,
  .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
  }
  
  .secondary-btn {
    background: white !important;
    color: #667eea !important;
    border: 2px solid #667eea !important;
  }
  
  .secondary-btn:hover {
    background: #667eea !important;
    color: white !important;
  }
  
  /* 액션 버튼 그룹 */
  .form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
    margin-top: 1.5rem !important;
  }
  
  .form-actions .btn {
    width: 100% !important;
  }
  
  /* 옵션 입력 그룹 최적화 */
  .option-input-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .option-number {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background: #667eea !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
  }
  
  .option-input {
    flex: 1 !important;
  }
  
  /* 옵션 컨트롤 */
  .quiz-options-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .option-controls {
    display: flex !important;
    gap: 0.5rem !important;
  }
  
  .btn-sm {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
  }
}

/* 작은 모바일 화면 (480px 이하) 추가 최적화 */
@media (max-width: 480px) {
  .community-content-area {
    margin: 0 0.5rem 1rem 0.5rem !important;
    padding: 1rem !important;
  }
  
  .community-section-btn {
    font-size: 0.9rem !important;
    padding: 0.9rem 1rem !important;
  }
  
  .quiz-mode-tab {
    font-size: 0.8rem !important;
    padding: 0.7rem 0.4rem !important;
  }
  
  .card {
    padding: 1rem !important;
  }
  
  .form-control {
    font-size: 0.85rem !important;
  }
  
  .quiz-options-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .option-controls {
    justify-content: center !important;
  }
}

/* 태블릿에서 맞춤법 나누기 페이지 최적화 */
@media (min-width: 769px) and (max-width: 1200px) {
  .community-section-selector {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 1rem !important;
  }
  
  .community-section-btn {
    flex: 1 !important;
    max-width: 300px !important;
  }
  
  .community-content-area {
    margin: 0 2rem 1rem 2rem !important;
    padding: 2rem !important;
  }
}

/* 다크모드에서 맞춤법 나누기 페이지 최적화 */
@media (max-width: 768px) {
  body.dark-mode .community-section-btn {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
  }
  
  body.dark-mode .community-section-btn:hover {
    background: #4b5563 !important;
    border-color: #667eea !important;
  }
  
  body.dark-mode .community-section-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: #667eea !important;
  }
  
  body.dark-mode .community-content-area {
    background: #1f2937 !important;
    border-color: #374151 !important;
  }
  
  body.dark-mode .quiz-mode-tabs {
    background: #374151 !important;
  }
  
  body.dark-mode .quiz-mode-tab {
    color: #d1d5db !important;
  }
  
  body.dark-mode .quiz-mode-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
  }
  
  body.dark-mode .card {
    background: #374151 !important;
    border-color: #4b5563 !important;
  }
  
  body.dark-mode .card h3 {
    color: #f9fafb !important;
  }
  
  body.dark-mode .form-group label {
    color: #e5e7eb !important;
  }
  
  body.dark-mode .form-control {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
  }
  
  body.dark-mode .form-control:focus {
    background: #1f2937 !important;
    border-color: #667eea !important;
    color: #f9fafb !important;
  }
}

/* 성능 최적화 */
@media (max-width: 768px) {
  * {
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  /* GPU 가속 활용 */
  .mobile-bottom-tabs,
  /* 헤더 애니메이션 설정 제거 - 모바일에서 헤더 숨김 */
  /* .header {
    will-change: transform;
    transform: translate3d(0, 0, 0);
  } */
}

/* === 페이지별 모바일 최적화 === */

/* 받아쓰기 페이지 모바일 최적화 */
@media (max-width: 768px) {
  /* 받아쓰기 설정 영역 */
  .dictation-setup {
    padding: 16px !important;
    margin: 16px 8px !important;
    border-radius: 12px !important;
  }

  /* 학년 선택 버튼들 */
  .grade-btn-box {
    padding: 12px 8px !important;
    margin: 4px !important;
    font-size: 0.8rem !important;
    min-height: 44px !important;
  }

  /* 급수 선택 버튼들 */
  .level-btn-box {
    padding: 10px 6px !important;
    margin: 3px !important;
    font-size: 0.75rem !important;
    min-height: 40px !important;
  }

  /* 반복 횟수 선택 */
  .repeat-btn-box {
    padding: 10px 8px !important;
    margin: 4px !important;
    font-size: 0.8rem !important;
    min-height: 44px !important;
  }

  /* 받아쓰기 시작 버튼 */
  .start-dictation-btn {
    width: 100% !important;
    padding: 16px !important;
    font-size: 1rem !important;
    margin: 16px 0 !important;
  }

  /* 문제 카운트 표시 - clamp 사용 제거하고 모바일에서는 고정 크기 */
  .quiz-count {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
  }
}

/* 커뮤니티 페이지 모바일 최적화 */
@media (max-width: 768px) {
  /* 커뮤니티 섹션 타일 */
  .community-section-tile {
    padding: 16px !important;
    margin: 8px 0 !important;
    border-radius: 12px !important;
  }

  .community-section-tile h3 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
  }

  .community-section-tile p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }

  /* 카테고리 선택 카드들 */
  .category-card {
    padding: 16px !important;
    margin: 8px 0 !important;
    border-radius: 12px !important;
  }

  .category-card h4 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }
}

/* 퀴즈 페이지 모바일 최적화 */
@media (max-width: 768px) {
  /* 퀴즈 카테고리 타일 */
  .quiz-type-tile {
    padding: 16px !important;
    margin: 8px 0 !important;
    border-radius: 12px !important;
    min-height: 80px !important;
  }

  .quiz-type-tile h3 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }

  /* 퀴즈 진행 상태 */
  .quiz-progress {
    padding: 12px !important;
    margin: 8px 0 !important;
  }

  .progress-info {
    font-size: 0.8rem !important;
  }
}

/* 프로필 페이지 모바일 최적화 */
@media (max-width: 768px) {
  /* 프로필 헤더 */
  .profile-header {
    padding: 16px !important;
    text-align: center !important;
  }

  .profile-pic {
    width: 80px !important;
    height: 80px !important;
  }

  /* 프로필 정보 카드 */
  .profile-info-card {
    padding: 16px !important;
    margin: 8px 0 !important;
    border-radius: 12px !important;
  }

  /* 통계 정보 */
  .stats-grid {
    display: block !important;
  }

  .stat-item {
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    text-align: center !important;
  }
}

/* 작은 모바일 화면 추가 최적화 */
@media (max-width: 480px) {
  /* 받아쓰기 페이지 제외하고 버튼 그리드를 세로로 변경 */
  .level-selection, .repeat-selection {
    display: block !important;
  }

  .level-btn-box, .repeat-btn-box {
    width: 100% !important;
    margin: 4px 0 !important;
  }

  /* 받아쓰기 페이지는 사용자 정의 레이아웃 유지 - dictation.css에서 관리 */
  /* .grade-selection, .grade-btn-box 는 dictation.css에서 별도 관리 */

  /* 카드 내 여백 더 줄이기 */
  .community-section-tile, .category-card, .quiz-type-tile {
    padding: 12px !important;
    margin: 6px 0 !important;
  }

  /* 텍스트 요소 더 작게 - clamp 무시하고 고정 크기 적용 */
  .quiz-count, .progress-info, .stat-value {
    font-size: 0.7rem !important;
  }

  /* 아이콘 크기도 작게 조정 */
  .category-card i {
    font-size: 1.8rem !important;
  }

  .quiz-type-tile i {
    font-size: 2rem !important;
  }
}

/* === 맞춤법 학습 페이지 원고지 모바일 최적화 === */

/* 원고지 반응형 칸 수 조정 - 모바일 7칸, 데스크톱 15칸 */
@media (max-width: 768px) {
  /* 모바일에서만 원고지 최적화 적용 */
}

/* 원고지 관련 설정은 learning.css에서 통합 관리 */

/* 원고지 관련 텍스트 설정도 learning.css에서 관리 */

/* 모바일 원고지 최적화 - 화면 크기별 반응형 조정 */
@media (max-width: 480px) {
  /* 모바일에서 원고지 컨테이너 반응형 조정 */
  .writing-practice-container {
    overflow-x: auto !important;
    padding: 8px !important;
  }
}

@media (max-width: 360px) {
  /* 원고지 관련 제한 제거하여 15칸 유지 */
}

/* === 추가 모바일 최적화 - 좁은 화면 대응 === */

/* 매우 좁은 화면에서 여백 최소화 */
@media (max-width: 360px) {
  /* 전체 컨테이너 패딩 최소화 */
  .container, .content-container, .main-container,
  .dictation-setup, .dictation-container, .dictation-result, .dictation-summary,
  .quiz-container, .community-container, .profile-container {
    padding: 6px !important;
    margin: 6px !important;
    width: calc(100% - 12px) !important;
  }

  /* 카드 요소 패딩 최소화 */
  .card, .quiz-card, .dictation-card, .profile-card,
  .community-section-tile, .quiz-type-tile, .category-card {
    padding: 8px !important;
    margin: 4px 0 !important;
    border-radius: 8px !important;
  }

  /* 헤더 높이 줄이기 */
  /* 헤더 크기 설정 제거 - 모바일에서 헤더 숨김 */
  /* .header {
    height: 45px !important;
  } */

  /* .header-content {
    padding: 0 4px !important;
    gap: 2px !important;
  }

  main, .main-section, body > .container {
    margin-top: 45px !important;
    padding-top: 8px !important;
  }

  /* 하단 탭바 높이 줄이기 */
  .mobile-bottom-tabs {
    height: 45px !important;
    padding: 2px 0 !important;
  }

  .mobile-bottom-tabs .tab-item {
    font-size: 0.5rem !important;
    padding: 2px 1px !important;
  }

  .mobile-bottom-tabs .tab-item i {
    font-size: 0.8rem !important;
    margin-bottom: 1px !important;
  }

  /* 텍스트 크기 통일 */
  h1 { font-size: 1rem !important; }
  h2 { font-size: 0.9rem !important; }
  h3 { font-size: 0.85rem !important; }
  h4 { font-size: 0.8rem !important; }
  p, span, div, li, a, button, input, select, textarea {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  /* 버튼 크기 줄이기 */
  button, .btn, .button {
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
    min-height: 28px !important;
  }

  /* 입력 필드 크기 조정 */
  input, select, textarea {
    padding: 6px 8px !important;
    font-size: 14px !important; /* iOS 줌 방지를 위해 14px 유지 */
    min-height: 32px !important;
  }
}

/* 극도로 좁은 화면 대응 (320px 이하) */
@media (max-width: 320px) {
  .container, .content-container, .main-container {
    padding: 4px !important;
    margin: 4px !important;
    width: calc(100% - 8px) !important;
  }

  .card, .quiz-card, .dictation-card, .profile-card {
    padding: 6px !important;
    margin: 3px 0 !important;
  }

  h1 { font-size: 0.9rem !important; }
  h2 { font-size: 0.8rem !important; }
  h3 { font-size: 0.75rem !important; }
  p, span, div, li, a, button { font-size: 0.65rem !important; }

  button, .btn {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
    min-height: 26px !important;
  }

  .mobile-bottom-tabs {
    height: 40px !important;
  }

  .mobile-bottom-tabs .tab-item {
    font-size: 0.45rem !important;
  }

  .mobile-bottom-tabs .tab-item i {
    font-size: 0.7rem !important;
  }

  /* 320px 이하에서도 원고지 제한 제거하여 15칸 유지 */
}

/* 가로 세로 비율에 따른 최적화 */
@media (max-width: 768px) and (max-aspect-ratio: 1/1) {
  /* 세로가 긴 화면 */
  .main-section {
    padding: 8px 0 !important;
  }

  .hero-section {
    min-height: auto !important;
    padding: 16px 0 !important;
  }
}

/* 텍스트 잘림 방지 */
@media (max-width: 480px) {
  h1, h2, h3, h4, h5, h6 {
    word-break: keep-all !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    overflow-wrap: break-word !important;
  }

  p, span, div {
    word-break: keep-all !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 버튼 텍스트 잘림 방지 */
  button, .btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 긴 제목이나 텍스트 처리 */
  .site-title, .header-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
  }

  .full-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
  }

  /* 히어로 타이틀 모바일 최적화 */
  .hero-title {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
    padding: 0 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
    margin: 0 auto !important;
  }
}

/* 스크롤 영역 최적화 */
@media (max-width: 768px) {
  /* 수평 스크롤 방지 */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 모든 요소가 화면을 넘지 않도록 (원고지 제외) */
  *:not(.manuscript-paper):not(#spacingManuscriptPaper):not(#writingManuscriptPaper) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 그리드나 플렉스 컨테이너 최적화 */
  .grid, .flex, .d-flex {
    flex-wrap: wrap !important;
    overflow: hidden !important;
  }

  /* 이미지 반응형 */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* 접촉 대상 크기 최적화 */
@media (max-width: 768px) {
  /* 모든 클릭 가능한 요소 최소 크기 보장 */
  a, button, input, select, textarea, .btn, .tab-item {
    min-height: 36px !important;
    min-width: 36px !important;
    touch-action: manipulation !important;
  }

  /* 체크박스, 라디오 버튼 크기 */
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* 매우 작은 화면에서 접촉 대상 크기 조정 */
@media (max-width: 360px) {
  a, button, .btn {
    min-height: 32px !important;
    min-width: 32px !important;
  }

  .tab-item {
    min-height: 30px !important;
    min-width: 30px !important;
  }
}

/* 랜드스케이프 모드 최적화 */
@media (max-width: 768px) and (orientation: landscape) {
  /* 작은 화면 헤더 설정 제거 - 모바일에서 헤더 숨김 */
  /* .header {
    height: 40px !important;
  } */

  /* .header-content {
    padding: 0 8px !important;
  }

  main, .main-section {
    margin-top: 40px !important;
    padding-top: 8px !important;
  }

  .mobile-bottom-tabs {
    height: 40px !important;
  }

  .mobile-bottom-tabs .tab-item {
    font-size: 0.6rem !important;
  }

  .mobile-bottom-tabs .tab-item i {
    font-size: 0.9rem !important;
  }

  /* 세로 공간 절약 */
  .card, .section {
    padding: 8px !important;
    margin: 4px 0 !important;
  }
}

/* === 문제 페이지들의 강제 여백 제거 === */
@media (max-width: 768px) {
  /* 모든 페이지의 마지막 요소들 여백 제거 */
  .main-section > *:last-child,
  .container > *:last-child,
  main > *:last-child,
  body > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 특정 페이지들의 body 여백 완전 제거 */
  body[data-page="quiz"],
  body[data-page="learning"],
  body[data-page="dictation"],
  body[data-page="community"] {
    padding-bottom: 70px !important; /* 탭바 공간만 */
    margin-bottom: 0 !important;
  }

  /* 모든 섹션과 컴포넌트의 하단 여백 적절히 조정 */
  .quiz-container,
  .learning-container,
  .learning-container-main,
  .dictation-container,
  .community-container,
  .quiz-section,
  .quiz-result-summary,
  .quiz-progress-section,
  .community-hero,
  .community-content,
  .dictation-section,
  .level-selection-section,
  .learning-section,
  .writing-practice-container,
  #learningSection,
  #dictationSection,
  #communitySection {
    margin-bottom: 10px !important; /* 최소한의 여백 유지 */
    padding-bottom: 8px !important; /* 텍스트 겹침 방지 */
  }

  /* CSS에서 지정된 큰 여백들을 적절히 조정 */
  [style*="margin-bottom: 2rem"],
  [style*="margin-bottom: 2.5rem"],
  [style*="margin-bottom: 3rem"] {
    margin-bottom: 12px !important; /* 큰 여백을 적당히 줄임 */
  }

  [style*="margin-bottom: 1.5rem"],
  [style*="margin-bottom: 1rem"] {
    margin-bottom: 8px !important; /* 작은 여백은 최소한 유지 */
  }

  /* main.main-section이 있는 페이지들 특별 처리 - 적절한 여백 유지 */
  main.main-section {
    margin-bottom: 10px !important; /* 최소한의 하단 여백 */
    padding-bottom: 15px !important; /* 푸터와의 간격 */
    padding-top: 80px !important; /* 헤더 높이만큼 상단 패딩 추가 */
    /* layout.css의 padding: var(--spacing-xl) 0 (2rem 0) 완전 오버라이드 */
    padding: 80px 1rem 15px 1rem !important;
  }

  /* 특정 문제 페이지들 직접 타겟팅 */
  body:has(main.main-section) main.main-section,
  main.main-section.quiz-content-section,
  main.main-section:has(.learning-content-section),
  main.main-section:has(.community-content-section),
  main.main-section:has(#dictationSection) {
    padding: 80px 1rem 0 1rem !important;
    margin: 0 !important;
  }

  /* 브라우저 호환성을 위한 대체 선택자 */
  main.main-section[data-page="quiz"],
  main.main-section[data-page="learning"],
  main.main-section[data-page="dictation"],
  main.main-section[data-page="community"] {
    padding: 80px 1rem 0 1rem !important;
    margin: 0 !important;
  }

  /* 페이지별 ID/클래스 기반 타겟팅 */
  main#quizSection.main-section,
  main#learningMainSection.main-section,
  main#dictationSection.main-section,
  main#communitySection.main-section,
  .quiz-content-section,
  .learning-content-section,
  .community-content-section {
    padding: 80px 1rem 0 1rem !important;
    margin: 0 !important;
  }

  /* main-wrapper를 사용하는 페이지들 (correction.html 등) */
  .main-wrapper {
    padding-top: 80px !important;
  }

  /* body의 하단 여백 완전 제거 */
  body {
    margin-bottom: 0 !important;
    padding-bottom: 70px !important; /* 탭바 공간만 유지 */
  }

  /* 페이지 마지막 요소들 강제 제거 */
  body > *:nth-last-child(2) /* 푸터 */,
  body > footer,
  body > .footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* 더 작은 화면에서 더욱 여백 줄이기 */
@media (max-width: 480px) {
  .quiz-result-summary,
  .quiz-progress-section,
  .community-hero,
  .community-content,
  .dictation-section,
  .level-selection-section,
  .learning-section {
    margin-bottom: 0.6rem !important;
  }

  .result-section,
  .summary-section,
  .feedback-section,
  .stats-section {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.3rem !important;
  }

  *[class*="-section"] {
    margin-bottom: 0.6rem !important;
  }

  *[class*="-container"] {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.3rem !important;
  }
}
/* 최종 오버라이드 - 모바일/태블릿에서 네비게이션과 헤더 완전 숨기기 */
/* 갤럭시탭 S4 (1138px) 포함하도록 1200px로 확장 */
@media (max-width: 1200px) {
  /* 헤더와 네비게이션 완전 숨김 */
  .header,
  header,
  .main-nav,
  nav.main-nav,
  .desktop-nav-container,
  .navbar,
  .nav-menu,
  .header-nav,
  .top-navigation,
  .desktop-nav,
  header nav:not(.mobile-nav),
  .main-nav.bottom-nav,
  nav.bottom-nav,
  .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* mobile-bottom-tabs만 표시 */
  .mobile-bottom-tabs {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    pointer-events: auto !important;
  }
}