/* =========================================================
   Responsive Master CSS
   - Tablet & Mobile Layout Fix
   - 980 / 768 / 640 / 480 / 420
   ========================================================= */


/* =========================================================
   1️⃣ 980px 이하 (태블릿 가로 / 작은 노트북)
   ========================================================= */
@media (max-width: 980px){

  /* 공통 컨테이너 */
  .layout-inner{
    padding: 0 14px;
  }

  /* 홈 상단 3열 → 1열 */
  .home3-feeds{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* 카드 여백 정리 */
  .card{
    padding: 16px;
  }

  /* 큐레이션 그리드 4 → 3 */
  .gk-cur-grid{
    grid-template-columns: repeat(3, 1fr);
  }

  /* 갤러리 그리드 */
  .gallery-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}


/* =========================================================
   2️⃣ 768px 이하 (태블릿 세로)
   ========================================================= */
@media (max-width: 768px){

  /* 헤더 */
  .main-header-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .nav-main{
    overflow-x: auto;
    white-space: nowrap;
  }

  /* 홈 메인 이미지 */
  .hero-card{
    border-radius: 14px;
  }

  /* 큐레이션 3 → 2 */
  .gk-cur-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  /* 갤러리 3 → 2 */
  .gallery-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  /* 필터 행 줄바꿈 정리 */
  .gallery-filter-row{
    gap: 6px;
  }

  .gallery-filter-label{
    width: 100%;
    margin-bottom: 4px;
  }
}


/* =========================================================
   3️⃣ 640px 이하 (대형 모바일)
   ========================================================= */
@media (max-width: 640px){

  /* 카드 여백 더 축소 */
  .card{
    padding: 14px;
  }

  /* 홈 상단 텍스트 */
  .gallery-title-main{
    font-size: 18px;
  }

  .gallery-title-sub{
    font-size: 13px;
  }

  /* 필터 pill 더 작게 */
  .pill{
    padding: 6px 10px;
    font-size: 12px;
  }

  /* 큐레이션 2열 유지 */
  .gk-cur-grid{
    gap: 10px;
  }

  /* 갤러리 이미지 비율 안정 */
  .gallery-thumb img{
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}


/* =========================================================
   4️⃣ 480px 이하 (일반 모바일)
   ========================================================= */
@media (max-width: 480px){

  /* 헤더 로고 영역 */
  .site-title{
    font-size: 16px;
  }

  /* 홈 카드 간격 */
  .home3-feeds{
    gap: 12px;
  }

  /* 큐레이션 2 → 1 */
  .gk-cur-grid{
    grid-template-columns: 1fr;
  }

  /* 갤러리 2 → 1 */
  .gallery-grid{
    grid-template-columns: 1fr;
  }

  /* 버튼 전체 폭 */
  .gallery-action-link,
  .btn,
  .fab-btn{
    width: 100%;
    justify-content: center;
  }

  /* 드롭다운 (손주 선택) 위로 열리게 */
  .kid-menu{
    bottom: 100%;
    top: auto;
    margin-bottom: 8px;
  }
}


/* =========================================================
   5️⃣ 420px 이하 (소형 모바일)
   ========================================================= */
@media (max-width: 420px){

  /* 전체 폰트 미세 축소 */
  body{
    font-size: 13px;
  }

  /* 카드 라운드 축소 */
  .card{
    border-radius: 14px;
  }

  /* 필터 텍스트 */
  .gallery-filter-label{
    font-size: 12px;
  }

  /* 큐레이션 태그 */
  .gk-cur-tag{
    font-size: 11px;
    padding: 3px 6px;
  }

  /* 푸터 텍스트 정렬 */
  footer{
    text-align: center;
  }
}