/* =========================================================
   Metropy — Responsive, Animations, Print
   Media Queries, Transitions, Accessibility
   ========================================================= */


.section-cta { padding: 60px 24px; }

/* =========================================================
   반응형
   ========================================================= */

/* ───── 태블릿 (1024px 이하) ───── */
@media (max-width: 1024px) {
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .formula-grid, .proof-grid { grid-template-columns: 1fr 1fr; }
  .findings-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quick-access { grid-template-columns: 1fr; gap: 16px; }
  .comparison-results-grid { grid-template-columns: 1fr; }
  .shortcuts-grid { grid-template-columns: 1fr; }
  .result-hero { gap: 24px; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  /* 테마 토글은 nav-links 밖으로 나왔으므로 모바일에서도 보인다.
     크기만 조금 줄여 햄버거와 나란히 앉게 한다. */
  .theme-toggle { width: 40px; height: 40px; font-size: 1.05rem; }

  /* 데스크톱은 히어로를 화면 세로 중앙에 놓는데, 모바일에서는 그 탓에
     제목이 y=322 까지 밀려 첫 화면 위쪽이 텅 빈다. 폰은 화면이 세로로 길어
     중앙 정렬이 곧 아래쪽 배치가 된다. 상단 정렬로 바꾸고 min-height 를 풀어
     내용 높이만큼만 차지하게 한다. */
  .hero {
    padding: 40px 20px;
    min-height: auto;
    align-items: flex-start;
  }
  .compare-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .formula-grid, .proof-grid { grid-template-columns: 1fr 1fr; }
  /* 모바일에서 세로로 스택하면 출발과 도착이 한눈에 안 들어온다.
     좁아도 좌우 반반을 유지해 경로가 한 줄로 읽히게 한다. */
  .input-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
  }

  .swap-btn-wrapper {
    justify-content: center;
  }

  .swap-btn {
    width: 42px;
  }

  .station-search {
    padding: 12px 10px;
    font-size: .9rem;
  }

  .card {
    padding: 20px;
    margin-bottom: 20px;
  }

  .hour-section {
    padding: 16px;
  }
  /* 히어로가 세로로 쌓이면 추천 칸을 보려고 스크롤을 해야 한다.
     추천 숫자와 경로가 한 화면에 같이 있어야 결과가 한눈에 읽힌다. */
  .result-hero {
    flex-direction: column;
    text-align: center;
    padding: 18px 16px;
    gap: 14px;
  }
  .result-best { width: 100%; padding: 14px 16px; }
  .result-meta { grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
  .meta-item { padding: 10px 8px; }
  .car-block { min-width: 52px; padding: 14px 4px 10px; }
  .car-score { font-size: 1.1rem; }
  .cal-grid { grid-template-columns: 1fr 1fr; }
  .findings-grid { grid-template-columns: 1fr; }
  .data-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; }
  .data-row.header { display: none; }
  .app-container { padding: 20px 16px; }
  .card { padding: 20px; }
  .section { padding: 48px 16px; }
  .quick-access { padding: 16px; }
  .hero-desc br { display: none; }
  .result-best { min-width: auto; }
  .contribution-bar-wrapper { grid-template-columns: 70px 1fr 50px; gap: 8px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.8rem; }
  .hero-actions { flex-direction: column; }
  .btn-hero, .btn-hero-secondary, .btn-hero-github { width: 100%; text-align: center; justify-content: center; }
  .contact-grid { grid-template-columns: 1fr; }
  .stat { padding: 12px 4px; }
  .stat-number { font-size: 1.2rem; }
  .formula-grid, .proof-grid { grid-template-columns: 1fr; }
  .formula-main { font-size: .85rem; padding: 12px; }
  /* 항목이 둘뿐이라 1열로 내리면 히어로만 한 화면을 다 먹는다. */
  .result-meta { grid-template-columns: repeat(2, 1fr); }
  .cal-grid { grid-template-columns: 1fr; }
  .train { gap: 2px; padding: 10px; }
  .car-block { min-width: 44px; padding: 10px 2px 8px; }
  .car-score { font-size: .95rem; }
  .car-number { font-size: .6rem; }
  canvas { max-height: 250px !important; }
  .hour-control { gap: 10px; }
  .hour-time { font-size: 1.3rem; }
  .section-title { font-size: 1.3rem; margin-bottom: 32px; }
  .card-title { font-size: 1rem; }
  .card-desc { font-size: .82rem; }
  .compare-card { padding: 20px; }
  .compare-card h3 { font-size: .95rem; }
  .step-card { padding: 24px 16px; }
  .about-article h1 { font-size: 1.5rem; }
  .about-article h2 { font-size: 1rem; }
  .data-management-btns { flex-direction: column; }
  /* 경로 랭킹의 막대를 줄여 역명 칸을 넓힌다.
     390px 폰에서 "홍대입구→강남"이 두 줄로 접혀 행 높이가 88px 과 115px 로
     들쭉날쭉했다. 막대는 옆의 "N회"와 같은 것을 두 번 말하는 장식이라
     폭을 양보할 쪽은 이쪽이다. */
  .route-bar-container { width: 72px; }
  .data-management-btns .btn-secondary { width: 100%; text-align: center; }
  .feedback-options { flex-direction: column; align-items: stretch; }
  .feedback-btn { flex-direction: row; min-width: unset; }
  .quick-explain-btn { font-size: .82rem; padding: 8px 14px; }
  .quick-explain-btn span { font-size: .95rem; }
  .contribution-bar-wrapper { grid-template-columns: 60px 1fr 40px; }
}

/* ───── 터치 최적화 ───── */
@media (hover: none) and (pointer: coarse) {
  /* 터치 디바이스에서 버튼 크기 확대 */
  .btn-hero, .btn-hero-secondary, .recommend-btn, .btn-primary, .btn-secondary {
    min-height: 48px;
    padding: 14px 24px;
  }

  /* 카드 터치 영역 확대 */
  .car-block {
    padding: 16px 8px 12px;
    min-width: 60px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* 스와이프 가능한 요소 표시 */
  .train {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 16px 8px;
  }

  .car-block {
    scroll-snap-align: start;
  }

  /* 역 선택 드롭다운 크기 확대 */
  .station-select, .station-search {
    min-height: 44px;
    font-size: 16px; /* iOS zoom 방지 */
  }

  /* 슬라이더 터치 영역 확대 */
  input[type="range"] {
    height: 32px;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ───── 가로 모드 최적화 ───── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { padding: 32px 20px; }
  .hero-title { font-size: 1.6rem; }
  .section { padding: 32px 20px; }
}

/* ───── 다크모드 대응 (선택사항) ───── */
@media (prefers-color-scheme: light) {
  /* 라이트 모드는 현재 구현하지 않음 - 다크 테마 유지 */
}

/* ───── 페이지 전환 + 카드 입장 애니메이션 ───── */
.page.active {
  animation: pageEnter .35s ease-out;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.page.active .card,
.page.active .cal-section,
.page.active .compare-card,
.page.active .step-card,
.page.active .stat {
  animation: cardStagger .4s ease-out both;
}

.page.active .card:nth-child(1) { animation-delay: .05s; }
.page.active .card:nth-child(2) { animation-delay: .1s; }
.page.active .card:nth-child(3) { animation-delay: .15s; }
.page.active .card:nth-child(4) { animation-delay: .2s; }
.page.active .card:nth-child(5) { animation-delay: .25s; }

.page.active .step-card:nth-child(1) { animation-delay: .08s; }
.page.active .step-card:nth-child(2) { animation-delay: .16s; }
.page.active .step-card:nth-child(3) { animation-delay: .24s; }

.page.active .stat:nth-child(1) { animation-delay: .05s; }
.page.active .stat:nth-child(2) { animation-delay: .1s; }
.page.active .stat:nth-child(3) { animation-delay: .15s; }
.page.active .stat:nth-child(4) { animation-delay: .2s; }

@keyframes cardStagger {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 결과 섹션 칸 시각화 등장 */
.car-block {
  animation: carPop .3s ease-out both;
}
.car-block:nth-child(1) { animation-delay: .02s; }
.car-block:nth-child(2) { animation-delay: .04s; }
.car-block:nth-child(3) { animation-delay: .06s; }
.car-block:nth-child(4) { animation-delay: .08s; }
.car-block:nth-child(5) { animation-delay: .10s; }
.car-block:nth-child(6) { animation-delay: .12s; }
.car-block:nth-child(7) { animation-delay: .14s; }
.car-block:nth-child(8) { animation-delay: .16s; }
.car-block:nth-child(9) { animation-delay: .18s; }
.car-block:nth-child(10) { animation-delay: .20s; }

@keyframes carPop {
  from { opacity: 0; transform: scale(.85) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ───── Focus Visible (접근성) ───── */
.dow-chip:focus-visible,
.quick-item:focus-visible,
.icon-btn:focus-visible,
.feedback-btn:focus-visible,
.feedback-skip:focus-visible,
.seat-btn-yes:focus-visible,
.seat-btn-no:focus-visible,
.car-block:focus-visible,
.quick-explain-btn:focus-visible,
.comparison-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ───── 가로 모드 최적화 ───── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { padding: 32px 20px; }
  .hero-title { font-size: 1.6rem; }
  .section { padding: 32px 20px; }
}

/* ───── 다크모드 대응 (선택사항) ───── */
@media (prefers-color-scheme: light) {
  /* 라이트 모드는 현재 구현하지 않음 - 다크 테마 유지 */
}

/* ───── 페이지 전환 + 카드 입장 애니메이션 ───── */
.page.active {
  animation: pageEnter .35s ease-out;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.page.active .card,
.page.active .cal-section,
.page.active .compare-card,
.page.active .step-card,
.page.active .stat {
  animation: cardStagger .4s ease-out both;
}

.page.active .card:nth-child(1) { animation-delay: .05s; }
.page.active .card:nth-child(2) { animation-delay: .1s; }
.page.active .card:nth-child(3) { animation-delay: .15s; }
.page.active .card:nth-child(4) { animation-delay: .2s; }
.page.active .card:nth-child(5) { animation-delay: .25s; }

.page.active .step-card:nth-child(1) { animation-delay: .08s; }
.page.active .step-card:nth-child(2) { animation-delay: .16s; }
.page.active .step-card:nth-child(3) { animation-delay: .24s; }

.page.active .stat:nth-child(1) { animation-delay: .05s; }
.page.active .stat:nth-child(2) { animation-delay: .1s; }
.page.active .stat:nth-child(3) { animation-delay: .15s; }
.page.active .stat:nth-child(4) { animation-delay: .2s; }

@keyframes cardStagger {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 결과 섹션 칸 시각화 등장 */
.car-block {
  animation: carPop .3s ease-out both;
}
.car-block:nth-child(1) { animation-delay: .02s; }
.car-block:nth-child(2) { animation-delay: .04s; }
.car-block:nth-child(3) { animation-delay: .06s; }
.car-block:nth-child(4) { animation-delay: .08s; }
.car-block:nth-child(5) { animation-delay: .10s; }
.car-block:nth-child(6) { animation-delay: .12s; }
.car-block:nth-child(7) { animation-delay: .14s; }
.car-block:nth-child(8) { animation-delay: .16s; }
.car-block:nth-child(9) { animation-delay: .18s; }
.car-block:nth-child(10) { animation-delay: .20s; }

@keyframes carPop {
  from { opacity: 0; transform: scale(.85) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 768px) {
  .compare-input-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .comparison-results-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .spinner {
    animation: none;
    border: 4px solid var(--accent);
  }
}

@media (max-width: 768px) {
  .sensitivity-changes {
    flex-direction: column;
  }

  .comparison-chart-container {
    padding: 12px;
  }
}

/* ───── 인쇄 스타일 ───── */
@media print {
  /* 기본 레이아웃 */
  * { color: #000 !important; background: #fff !important; box-shadow: none !important; text-shadow: none !important; }
  body { font-size: 12pt; line-height: 1.5; }

  /* 불필요한 요소 숨기기 */
  .navbar, .nav-hamburger, .nav-mobile, .footer,
  .loading-overlay, .skip-to-content, #aria-live,
  .recommend-btn, .swap-btn, .gps-btn, .theme-toggle,
  .hour-tips, .hero-actions, .btn-hero, .btn-hero-secondary, .btn-hero-github,
  .quick-access, #feedback-widget, .feedback-widget,
  .compare-input-row, #compare-toggle-btn,
  .quick-explain-btn, .icon-btn, .sensitivity-btn,
  .data-management-btns, .btn-row,
  #map-toggle-btn, #map-reset-btn, #metro-map-image,
  .hour-btn, .autocomplete-suggestions, .dow-chips,
  .offline-banner, #compare-section,
  input[type="range"], select { display: none !important; }

  /* 페이지 표시: 추천 결과만 */
  .page { display: none !important; }
  #page-app { display: block !important; }
  .page.active { display: block !important; }

  /* 결과 카드 스타일 */
  .card { border: 1px solid #ccc; page-break-inside: avoid; margin-bottom: 12pt; padding: 12pt; }
  .result-hero { border: 2px solid #000; padding: 12pt; margin-bottom: 12pt; }
  .result-best-car { font-size: 24pt; font-weight: 700; }
  .result-best-score { font-size: 14pt; }
  .meta-item { display: inline-block; margin-right: 16pt; }

  /* 열차 시각화 간소화 */
  .train { flex-wrap: wrap; }
  .car-block { border: 1px solid #666; min-width: 60px; }

  /* 차트 영역 */
  canvas { max-height: 200px !important; }

  /* 링크 URL 표시 */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666 !important; }

  /* 페이지 마진 */
  @page { margin: 1.5cm; }
}