/* ═══════════════════════════════════════════════════
   FARO Responsive Styles v2.0 — mobile.css
   브레이크포인트 체계:
     모바일    :   0 – 767px
     태블릿    : 768 – 1023px
     데스크톱  : 1024px+
     와이드     : 1280px+
   ═══════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   모바일 공통 보조 (0 – 767px)
   ───────────────────────────────────────────────── */

/* 탭/지역 스크롤바 숨김 */
.tabs::-webkit-scrollbar,
.region-tabs::-webkit-scrollbar { display: none; }

/* 터치 타겟 보장 */
.btn { min-height: 48px; }
.tab, .region-tabs button { min-width: 56px; }

/* 소형 폰 대응 (≤390px) */
@media (max-width: 390px) {
  .menu-main { font-size: 24px; }
  .ba-panel { min-height: 240px; }
  .sticky { bottom: 12px; height: 48px; }
}

/* iPhone SE / 375px */
@media (max-width: 375px) {
  :root { --font-hero: 30px; --font-h1: 26px; }
  section.block, .section { padding: 52px 18px; }
}


/* ─────────────────────────────────────────────────
   태블릿 (768px – 1023px)
   ───────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* 앱 셸 — 여전히 전체폭 (폰 프레임 제거됨) */
  .app { overflow: visible; }

  /* 섹션 여백 확대 */
  :root {
    --section-px: 36px;
    --section-py: 80px;
  }

  /* h1/h2/h3 폰트는 tokens.css의 clamp() 값이 전 구간에서 유체적으로 처리 — 구간별 고정값 재정의 제거 */

  /* 헤더 로고 크기 (태블릿 768~1023 — 1200px+ 목표 32px과 동일 우선 시도) */
  .header-logo img { height: 32px; }

  /* 카드 2열 그리드 */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* 제품 그리드 2열 */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* B&A 패널 더 높게 */
  .ba-panel { min-height: 360px; }

  /* 매장 카드 2열 */
  #storeList { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* 스티키 CTA 위치 유지 */
  .sticky { width: min(480px, calc(100vw - 40px)); }

  /* ─── 푸터 태블릿: 브랜드(상단)→링크(2×2)는 모바일과 동일하게 세로 스택, 여백만 확대.
     하단만 Copyright 왼쪽 / SNS 아이콘 오른쪽 가로 배치로 전환(DOM 순서 copy→social 그대로 매핑).
     이 구간은 상한이 없는 min-width:768px 블록이지만, 아래 각 속성은 1024px+ 블록에서
     전부 다시 명시적으로 선언되어 있어 PC로 새어들어가지 않음 ─── */
  .footer { padding: 40px 28px 28px; }
  .foot-links { gap: 14px 40px; margin-top: 24px; }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
  }
  .footer-social { justify-content: flex-end; }
}


/* ─────────────────────────────────────────────────
   데스크톱 (1024px+)
   ───────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* 섹션 여백 데스크톱 확대 — 컨테이너 최대폭 ~1200px */
  :root {
    --section-px: clamp(48px, calc((100vw - 1080px) / 2), 120px);
    --section-py: 100px;
    --header-height: var(--header-height-desktop);
  }

  /* 폰트 스케일: h1/h2/h3/body/hero는 tokens.css clamp()가 처리 — 통계 숫자 전용 --font-display만 유지 */
  :root {
    --font-display: 60px;
  }

  /* 앱 셸 데스크톱 — 전체폭, 프레임 없음 */
  body { background: #f3eadf; }
  .app {
    width: 100%;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  /* 헤더 데스크톱 */
  .header {
    height: var(--header-height-desktop);  /* 72px */
    padding: 0 clamp(36px, calc((100vw - 1200px) / 2 + 24px), 80px);
  }

  /* 헤더 로고 크기 (1024px+ 기본값 — 1200px+ 목표. 1024~1199 붐빔 시 아래 별도 구간에서 축소) */
  .header-logo img { height: 32px; }

  /* 데스크톱 네비 표시 */
  .desktop-nav { display: flex; }

  /* 예약 상담 버튼 표시 */
  .header-cta { display: inline-flex; }

  /* 햄버거 숨김 */
  .hamb { display: none; }

  /* 페이지 최소 높이 */
  .page { min-height: calc(100dvh - var(--header-height-desktop)); }

  /* 탭 sticky top */
  .tabs { top: var(--header-height-desktop); }

  /* ─── 카드 그리드 데스크톱 ─── */
  .grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  /* 제품 그리드 데스크톱 */
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .product .ph { height: 300px; }

  /* 제품 카드 PC — 플랫 */
  .product { border-color: rgba(38, 29, 22, .07); box-shadow: none; }

  /* ─── 매장 카드 3열 ─── */
  #storeList { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  /* ─── B&A 데스크톱 ─── */
  .ba { max-width: 760px; margin: 0 auto; }
  .ba-panel { min-height: 420px; }

  /* ─── 제작과정 카드 4열 (레퍼런스 기준) ─── */
  #craft .grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }


  /* ─── 공지바 ─── */
  .notice { font-size: 14px; letter-spacing: .08em; }

  /* ─── 스티키 CTA (데스크톱에서 숨김 — 헤더 CTA 있음) ─── */
  .sticky { display: none; }

  /* ─── 메뉴 오버레이 (폴백 — 데스크톱에서는 나타나지 않음) ─── */
  .menu { max-width: 400px; }

  /* ─── 푸터 데스크톱: 상단 한 줄(로고+문구 좌 / 링크 4개 우), 하단 한 줄(SNS 좌 / Copyright 우).
     상단↔하단 사이 구분선 하나만. 좌우 여백은 사이트 본문 container와 동일한 clamp 사용
     (footer-inner max-width:1200 + margin:auto와 함께 초광폭에서도 좌측 쏠림 없음) ─── */
  .footer {
    padding: 48px clamp(48px, calc((100vw - 1080px) / 2), 120px) 28px;
  }
  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }
  .footer p { font-size: 16px; }

  /* 링크 4개: 2×2 그리드 대신 한 줄 가로 배열 */
  .foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
    margin-top: 0;
  }
  .foot-links button, .foot-links a {
    padding: 4px 0;
    font-size: 15px;
    letter-spacing: .04em;
    opacity: .8;
  }
  .foot-links button:hover, .foot-links a:hover { opacity: 1; }

  /* 하단: Copyright 왼쪽 / SNS 아이콘 오른쪽. 상단→구분선 28px, 구분선→하단 24px */
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 24px;
  }

  /* ─── 폼 데스크톱 — 이름/연락처, 날짜/시간 2열, 나머지 전체폭 (레퍼런스 기준) ─── */
  #consult .form { grid-template-columns: repeat(2, 1fr); }
  #consult .form .form-field:nth-child(5),
  #consult .form .form-field:nth-child(6),
  #consult .form .consult-agree-row,
  #consult .form .consult-consent-summary,
  #consult .form .consult-form-note,
  #consult .form .btn { grid-column: 1 / -1; }

}



/* ─────────────────────────────────────────────────
   와이드 데스크톱 (1280px+)
   ───────────────────────────────────────────────── */
@media (min-width: 1280px) {
  /* 폰트: tokens.css clamp()가 이미 이 폭에서 상한 근처까지 자연 확대 — 재정의 불필요 */

  /* 제품 그리드 — 최대 4열 */
  .product-grid { grid-template-columns: repeat(4, 1fr); }

  /* 데스크톱 네비 간격 확대 */
  .desktop-nav { gap: 36px; }
}


/* ─────────────────────────────────────────────────
   초광폭 (1440px+)
   ───────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --section-px: 120px;
  }
  .header { padding: 0 120px; }
}