/**
 * 플레이스 순위 검색 시스템 - 반응형 스타일
 * 30년차 웹 디자이너 수준의 모바일 퍼스트 반응형 디자인
 * 
 * @version 2.0
 * @author Professional Web Designer
 */

/* =====================================================
   반응형 브레이크포인트 정의
   Mobile First 접근법 사용
   ===================================================== */

/* 
   xs: 0px - 479px (모바일)
   sm: 480px - 767px (모바일 가로)
   md: 768px - 1023px (태블릿)
   lg: 1024px - 1279px (데스크톱)
   xl: 1280px+ (대형 데스크톱)
*/

/* =====================================================
   기본 모바일 스타일 (0-479px)
   ===================================================== */

/* 컨테이너 모바일 최적화 */
.container {
  padding: var(--space-4) var(--space-3);
}

.page-wrapper {
  padding: var(--space-4) var(--space-3);
}

/* 헤더 모바일 조정 */
.header {
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
  text-align: center;
}

.nav-links {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.nav-link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

/* 타이포그래피 모바일 조정 */
.heading-1, h1 {
  font-size: var(--text-2xl);
  text-align: center;
}

.heading-2, h2 {
  font-size: var(--text-xl);
}

.heading-3, h3 {
  font-size: var(--text-lg);
}

/* 검색 폼 모바일 최적화 */
.search-form {
  padding: var(--space-6);
  max-width: 100%;
}

.search-actions {
  flex-direction: column;
  gap: var(--space-2);
}

.search-actions .btn {
  width: 100%;
}

/* 버튼 모바일 조정 */
.btn {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  min-height: 48px; /* 모바일 터치 최적화 */
}

.btn-sm {
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

/* 테이블 모바일 최적화 */
.table-container {
  border-radius: var(--radius-lg);
  margin: 0 -var(--space-3);
}

.table {
  font-size: var(--text-xs);
}

.table th,
.table td {
  padding: var(--space-2) var(--space-3);
}

.table th {
  font-size: 10px;
}

/* 액션 버튼 모바일 최적화 */
.action-buttons {
  flex-direction: column;
  gap: var(--space-1);
}

.action-buttons .btn {
  min-width: 100%;
  font-size: var(--text-xs);
  padding: var(--space-2);
  min-height: 36px;
}

/* 추적 헤더 모바일 조정 */
.tracking-header {
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-4);
}

.tracking-stats {
  flex-direction: column;
  gap: var(--space-2);
}

.stat-item {
  justify-content: center;
}

/* 모달 모바일 최적화 */
.modal {
  margin: var(--space-4);
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
}

.modal-header,
.modal-body,
.modal-footer {
  padding: var(--space-4);
}

.modal-footer {
  flex-direction: column;
}

.history-modal {
  width: auto;
}

.edit-modal {
  width: auto;
}

/* 결과 카드 모바일 조정 */
.result-card {
  margin: var(--space-4) -var(--space-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.result-title {
  font-size: var(--text-base);
  flex-direction: column;
  text-align: center;
  gap: var(--space-1);
}

.result-rank {
  font-size: var(--text-xl);
}

/* =====================================================
   모바일 가로 (480px+)
   ===================================================== */
@media (min-width: 480px) {
  .container {
    padding: var(--space-5) var(--space-4);
  }

  .search-actions {
    flex-direction: row;
    gap: var(--space-3);
  }

  .table-container {
    margin: 0;
    border-radius: var(--radius-xl);
  }

  .table {
    font-size: var(--text-sm);
  }

  .table th,
  .table td {
    padding: var(--space-3) var(--space-4);
  }

  .action-buttons {
    flex-direction: row;
    gap: var(--space-2);
  }

  .tracking-stats {
    flex-direction: row;
    justify-content: center;
  }

  .result-card {
    margin: var(--space-4) 0;
  }
}

/* =====================================================
   태블릿 (768px+)
   ===================================================== */
@media (min-width: 768px) {
  .container {
    padding: var(--space-6) var(--space-5);
  }

  .page-wrapper {
    padding: var(--space-8) var(--space-5);
  }

  /* 헤더 태블릿 조정 */
  .header {
    flex-direction: row;
    align-items: center;
  }

  .nav-links {
    gap: var(--space-3);
  }

  .nav-link {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }

  /* 타이포그래피 태블릿 조정 */
  .heading-1, h1 {
    font-size: var(--text-3xl);
    text-align: left;
  }

  /* 검색 폼 태블릿 조정 */
  .search-form {
    padding: var(--space-8);
    max-width: 600px;
  }

  /* 버튼 태블릿 조정 */
  .btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
  }

  /* 테이블 태블릿 최적화 */
  .table th,
  .table td {
    padding: var(--space-4) var(--space-5);
  }

  /* 추적 헤더 태블릿 조정 */
  .tracking-header {
    flex-direction: row;
    text-align: left;
    padding: var(--space-6);
  }

  .tracking-stats {
    gap: var(--space-4);
  }

  /* 모달 태블릿 조정 */
  .modal-footer {
    flex-direction: row;
  }

  .history-modal {
    width: 700px;
  }

  .edit-modal {
    width: 400px;
  }

  /* 액션 버튼 태블릿 최적화 */
  .action-buttons .btn {
    min-width: 80px;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
  }
}

/* =====================================================
   데스크톱 (1024px+)
   ===================================================== */
@media (min-width: 1024px) {
  .container {
    padding: var(--space-8) var(--space-6);
  }

  /* 검색 폼 데스크톱 조정 */
  .search-form {
    max-width: 500px;
  }

  /* 테이블 데스크톱 최적화 */
  .table th,
  .table td {
    padding: var(--space-4) var(--space-6);
  }

  /* 모달 데스크톱 조정 */
  .history-modal {
    width: 800px;
  }

  /* 호버 효과 활성화 (터치가 아닌 기기에서만) */
  @media (hover: hover) {
    .card:hover {
      transform: translateY(-4px);
    }

    .btn:not(:disabled):hover {
      transform: translateY(-2px);
    }

    .nav-link:hover {
      transform: translateY(-1px);
    }

    .table tbody tr:hover {
      transform: scale(1.01);
    }
  }
}

/* =====================================================
   대형 데스크톱 (1280px+)
   ===================================================== */
@media (min-width: 1280px) {
  .container {
    max-width: 1400px;
    padding: var(--space-10) var(--space-8);
  }
}

/* =====================================================
   특수 케이스 및 접근성
   ===================================================== */

/* 고해상도 디스플레이 최적화 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .loading-spinner {
    border-width: 1px;
  }
}

/* 시각적 모션 선호도 감소 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .result-card {
    animation: none;
  }
}

/* 다크 모드 지원 준비 */
@media (prefers-color-scheme: dark) {
  /* 다크 모드 스타일은 필요시 추가 */
}

/* 인쇄 스타일 */
@media print {
  .header,
  .search-form,
  .action-buttons,
  .modal-overlay,
  .tooltip {
    display: none !important;
  }

  .table-container {
    box-shadow: none;
    border: 1px solid #000;
  }

  .table th,
  .table td {
    border: 1px solid #000;
  }

  body {
    background: white;
    color: black;
  }
}

/* =====================================================
   터치 기기 최적화
   ===================================================== */
@media (pointer: coarse) {
  /* 터치 기기에서 더 큰 터치 타겟 */
  .btn {
    min-height: 48px;
    padding: var(--space-4) var(--space-5);
  }

  .nav-link {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .sort-btn {
    min-height: 44px;
    padding: var(--space-3);
  }

  /* 터치 기기에서 호버 효과 비활성화 */
  .card:hover,
  .btn:hover,
  .nav-link:hover,
  .table tbody tr:hover {
    transform: none;
  }
}

/* =====================================================
   키보드 네비게이션 최적화
   ===================================================== */
@media (pointer: fine) {
  *:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }

  .btn:focus,
  .form-input:focus,
  .nav-link:focus {
    box-shadow: 0 0 0 3px var(--primary-200);
  }
}

/* =====================================================
   스크린 리더 최적화
   ===================================================== */
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}