/*
 * 모바일 전용 보정 (2026-10-01). 데스크톱(≥1024px)에는 아무 영향 없음.
 * 휴대폰(<640px)에서 한 화면에 더 많은 내용이 보이도록 여백·높이·큰 글자를 줄임.
 * Tailwind 유틸리티를 같은 이름으로 덮어씀 (tw-*.css 다음에 로드). sm:/md:/lg: 변형은 640px 이상에서만
 * 적용되므로 이 파일과 겹치지 않음.
 */

/* 한국어: 단어 중간에서 줄이 바뀌지 않게 (휴대폰·태블릿) */
@media (max-width: 1023.98px) {
  body { word-break: keep-all; overflow-wrap: break-word; }
}

@media (max-width: 639.98px) {
  /* ── 헤더: 80px → 64px (본문 상단 여백도 같이) ───────────── */
  #header-placeholder nav > div.h-20 { height: 4rem; }
  body.pt-20 { padding-top: 4rem; }
  /* 햄버거 버튼: 보이는 모양은 그대로, 눌리는 영역만 44px 이상으로 */
  #mobile-menu-btn { position: relative; }
  #mobile-menu-btn::after { content: ""; position: absolute; inset: -8px -10px; }

  /* ── 첫 화면(히어로) 높이 ─────────────────────────────── */
  .h-\[calc\(100vh-5rem\)\] { height: calc(78vh - 4rem); }
  .min-h-\[600px\] { min-height: 30rem; }
  .min-h-\[88vh\], .min-h-\[85vh\] { min-height: 68vh; }
  .min-h-\[60vh\] { min-height: 48vh; }
  .min-h-screen { min-height: 0; }

  /* ── 섹션 위아래 여백 ──────────────────────────────────── */
  .py-32 { padding-top: 4rem; padding-bottom: 4rem; }
  .py-section { padding-top: 4rem; padding-bottom: 4rem; }
  .py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .py-xl { padding-top: 3rem; padding-bottom: 3rem; }
  .pt-24 { padding-top: 3.5rem; }
  .py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .pb-16 { padding-bottom: 2.5rem; }
  .pb-12 { padding-bottom: 2rem; }

  /* 좌우 여백 32px → 20px (한 줄에 더 많은 글자 → 줄 수 감소) */
  .px-8 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .px-md { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* ── 요소 사이 간격 ────────────────────────────────────── */
  .mb-24 { margin-bottom: 3rem; }
  .mb-20, .mb-16 { margin-bottom: 2.5rem; }
  .mb-12 { margin-bottom: 2rem; }
  .mb-10 { margin-bottom: 1.75rem; }
  .mt-24 { margin-top: 3rem; }
  .mt-12 { margin-top: 2rem; }
  .gap-16 { gap: 2.5rem; }
  .gap-12 { gap: 2rem; }
  .gap-10 { gap: 1.75rem; }
  .space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.75rem; }
  .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

  /* ── 사진 박스 고정 높이 ───────────────────────────────── */
  .h-\[28rem\] { height: 18rem; }
  .h-96 { height: 16rem; }
  .min-h-\[24rem\] { min-height: 16rem; }
  .min-h-\[20rem\] { min-height: 14rem; }

  /* ── 큰 글자 (line-height가 따로 지정되지 않은 경우만 행간도 비례 축소) ── */
  .text-8xl { font-size: 3.5rem; }
  .text-7xl { font-size: 3rem; }
  .text-6xl { font-size: 2.5rem; }
  .text-5xl { font-size: 2.25rem; }
  .text-\[40px\] { font-size: 32px; }
  .text-4xl { font-size: 1.75rem; }
  .text-4xl:not([class*="leading-"]) { line-height: 2.125rem; }
  .text-3xl { font-size: 1.5rem; }
  .text-3xl:not([class*="leading-"]) { line-height: 1.875rem; }
  .text-2xl { font-size: 1.3125rem; }
  .text-2xl:not([class*="leading-"]) { line-height: 1.75rem; }

  /* ── 푸터 ─────────────────────────────────────────────── */
  #footer-placeholder footer > div { padding-top: 3rem; padding-bottom: 2rem; }
  #footer-placeholder footer .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
  #footer-placeholder footer .space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
  #footer-placeholder footer .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
  #footer-placeholder footer h4.mb-8, #footer-placeholder footer h4.mb-6 { margin-bottom: 1rem; }
  #footer-placeholder footer .text-lg { font-size: 1rem; line-height: 1.5rem; }
  /* Quick Links 2열 */
  #footer-placeholder footer ul.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; }
  #footer-placeholder footer .mt-24 { margin-top: 2.5rem; }
  #footer-placeholder footer .pt-8 { padding-top: 1.5rem; }
  #footer-placeholder footer .gap-6 { gap: 1rem; }
  #footer-placeholder footer .py-4 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
  /* 푸터 링크: 모양은 그대로, 눌리는 영역만 확대 */
  #footer-placeholder footer a { position: relative; }
  #footer-placeholder footer ul a::after,
  #footer-placeholder footer .gap-10 > a::after { content: ""; position: absolute; inset: -12px -6px; }
}