/* 반응형 CSS — 브레이크포인트별 오버라이드 */
/* 모바일 퍼스트: xs(360) → md(768) → lg(1024) → xl(1280) */

/* ══════════════════════════════════════════
   xs (모바일 우선, 768px 미만) — 가독성 보강
   - 폰트 베이스 16px 유지, 본문/타이틀 키워서 읽기 쉽게
   - 헤더 로고 크기 보정, GNB 패딩 축소
══════════════════════════════════════════ */
@media (max-width: 767px) {
  :root {
    --header-height: 60px;
    --container-padding: 1rem;
  }

  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  /* 헤더 로고 — 모바일에서 가독성 향상 */
  .site-logo__brand {
    font-size: 0.6875rem;   /* 11px */
    letter-spacing: 0.06em;
  }
  .site-logo__name {
    font-size: 0.95rem;     /* 약 15px */
    letter-spacing: -0.01em;
  }

  /* 헤더 우측 액션: 데스크탑 CTA 버튼 숨김, 햄버거만 노출 */
  #header-cta {
    display: none;
  }

  /* 모바일 메뉴 폰트 키움 */
  .mobile-menu__nav a {
    font-size: 1.0625rem;   /* 17px — 터치 타겟 + 가독성 */
    padding: 0.875rem 0.25rem;
  }
  .mobile-menu__phone {
    font-size: 1.25rem;
  }

  /* 본문 컨테이너 타이틀 */
  #container_title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0 1rem;
  }

  /* 본문 일반 텍스트 가독성 */
  p, li, td, th, dd, dt {
    font-size: 1rem;
    line-height: 1.65;
  }

  /* 폼 요소 — iOS 줌인 방지(16px 이상 유지) */
  input, select, textarea, button {
    font-size: 16px;
  }

  /* 그누보드 팝업레이어 — 모바일 화면 폭 맞춤 */
  .hd_pops {
    left: 50% !important;
    top: 70px !important;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
  }
  .hd_pops_con {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 60vh;
    overflow: auto;
  }
  .hd_pops_con img {
    max-width: 100%;
    height: auto;
  }
}

/* xs 작은 폭 (360px 미만) — 매우 작은 단말 */
@media (max-width: 359px) {
  .site-logo__brand {
    display: none;
  }
  .site-logo__name {
    font-size: 0.875rem;
  }
  .header-actions {
    gap: 0.25rem;
  }
}

/* ══════════════════════════════════════════
   md (768px 이상) — 태블릿
══════════════════════════════════════════ */
@media (min-width: 768px) {
  /* 타이포그래피 스케일 업 */
  :root {
    --text-xl:  1.5rem;    /* 24px */
    --text-2xl: 2rem;      /* 32px */
    --text-3xl: 2.75rem;   /* 44px */
    --text-4xl: 3.5rem;    /* 56px */
  }

  /* 히어로 */
  .hero {
    min-height: 600px;
  }

  .hero-content {
    max-width: 700px;
    padding-bottom: var(--space-20);
  }

  .hero-title {
    font-size: var(--text-3xl);
  }

  .hero-subtitle {
    font-size: var(--text-lg);
  }

  .hero-actions {
    flex-direction: row;
  }

  /* 섹션 */
  .section {
    padding-block: var(--space-20);
  }

  .section-title {
    font-size: var(--text-3xl);
  }

  /* 통계 그리드 */
  .stat-number {
    font-size: var(--text-4xl);
  }

  /* 정보 테이블 */
  .info-table th {
    width: 25%;
  }

  /* 폼 레이아웃 */
  .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  /* 연락처 페이지 레이아웃 */
  .contact-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-10);
    align-items: start;
  }
}

/* ══════════════════════════════════════════
   lg (1024px 이상) — 데스크탑
══════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* 타이포그래피 */
  :root {
    --text-xl:  1.5rem;   /* 24px */
    --text-2xl: 2.25rem;  /* 36px */
    --text-3xl: 3rem;     /* 48px */
    --text-4xl: 4rem;     /* 64px */
  }

  /* 히어로 */
  .hero {
    min-height: 100vh;
  }

  .hero-content {
    max-width: 760px;
    padding-bottom: var(--space-24);
  }

  .hero-title {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
  }

  /* 섹션 */
  .section {
    padding-block: var(--space-24);
  }

  /* 2단 레이아웃 */
  .split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
  }

  .split-layout--reverse .split-layout__content:last-child {
    order: -1;
  }

  /* 통계 */
  .stat-number {
    font-size: clamp(2.5rem, 3.5vw, 3.5rem);
  }
}

/* ══════════════════════════════════════════
   xl (1280px 이상) — 대형 데스크탑
══════════════════════════════════════════ */
@media (min-width: 1280px) {
  :root {
    --container-padding: 2rem;
  }

  .hero-title {
    font-size: clamp(3rem, 4vw, 4.5rem);
  }
}

/* ══════════════════════════════════════════
   인쇄 미디어
══════════════════════════════════════════ */
@media print {
  .site-header,
  .mobile-cta-bar,
  .hero-dots,
  .hamburger,
  .mobile-menu,
  .gallery-filters,
  .lightbox {
    display: none !important;
  }

  body {
    padding-top: 0;
    padding-bottom: 0;
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  .section {
    padding-block: 1.5rem;
    page-break-inside: avoid;
  }

  .container {
    max-width: 100%;
    padding-inline: 0;
  }

  .info-table th,
  .info-table td {
    border-color: #ccc;
  }

  .info-table th {
    background: #f5f5f5;
  }

  .site-footer {
    background: #f5f5f5;
    color: #333;
    border-top: 1px solid #ccc;
  }
}

/* ══════════════════════════════════════════
   고대비 모드 지원
══════════════════════════════════════════ */
@media (forced-colors: active) {
  .btn--primary {
    border: 2px solid ButtonText;
  }

  .hero-overlay {
    display: none;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}