/* ==========================================================================
   /assets/css/responsive-pages.css  (RECOMMENDED)
   - 페이지별 반응형(1024 / 768 / 620 / 560 / 480)
   - 공통(레이아웃/타이포/간격) + 각 페이지 섹션 오버라이드
   ========================================================================== */


/* =========================
   0) 공통: 레이아웃/간격 토큰
   ========================= */
:root{
  --gap-24: 24px;
  --gap-20: 20px;
  --gap-16: 16px;
  --gap-14: 14px;
  --gap-12: 12px;
  --gap-10: 10px;

  --pad-24: 24px;
  --pad-20: 20px;
  --pad-16: 16px;
  --pad-14: 14px;
  --pad-12: 12px;

  --radius-18: 18px;
  --radius-16: 16px;
  --radius-14: 14px;
  --radius-12: 12px;

  --fz-15: 15px;
  --fz-14: 14px;
  --fz-13: 13px;
  --fz-12: 12px;
}

/* 컨테이너가 너무 붙지 않게 공통 패딩 보강(이미 있으면 무시됨) */
.site-main .layout-inner{
  padding-left: 16px;
  padding-right: 16px;
}

/* ==========================================================================
   1) 1024px 이하 (태블릿 가로/작은 노트북)
   - 2열 중심 / 버튼 줄바꿈 / 카드 여백 축소
   ========================================================================== */
@media (max-width: 1024px){

  /* ---------- 공통 ---------- */
  .card{ border-radius: var(--radius-16); }
  .site-main .layout-inner{ padding-left: 14px; padding-right: 14px; }

  /* =========================================
     홈 (page-home)
     ========================================= */
  .page-home .home-grid,
  .page-home .home-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-16);
  }
  .page-home .hero{
    padding: var(--pad-16);
  }

  /* =========================================
     사진 (page-gallery / page-photo-manage / page-gallery-cover)
     ========================================= */
  .page-gallery .gallery-grid,
  .page-gallery-cover .gc-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-16);
  }
  .page-photo-manage .pm-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-16);
  }

  /* =========================================
     영상 (page-video / page-video-manage / page-video-cover)
     ========================================= */
  .page-video-manage .vm-hero{
    flex-direction: column;               /* 좌/우 → 위/아래 */
    gap: var(--gap-14);
    padding: var(--pad-16);
    margin-top: -18px;
  }
  .page-video-manage .vm-hero-actions{
    justify-content: flex-start;          /* 버튼 왼쪽 정렬 */
    flex-wrap: wrap;
    gap: var(--gap-10);
  }
  .page-video-manage .vm-form--hero{
    width: 100%;
    max-width: 520px;                     /* 태블릿에서 중앙폼 적당한 폭 */
  }
  .page-video-manage .vm-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-16);
  }
  .page-video-manage .vm-media video{
    height: 240px;                        /* 태블릿에서 영상 높이 조금 확보 */
  }

  /* =========================================
     건강관리 (page-health / page-health-archive 등)
     ========================================= */
  .page-health .health-grid,
  .page-health .health-bottom{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-16);
  }

  /* =========================================
     가족소개 (page-family)
     ========================================= */
  .page-family .family-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-16);
  }

  /* =========================================
     공지사항 (page-notice)
     ========================================= */
  .page-notice .notice-list,
  .page-notice .notice-grid{
    grid-template-columns: 1fr;           /* 읽기 편하게 1열 */
    gap: var(--gap-14);
  }

  /* =========================================
     자유게시판 (page-board)
     ========================================= */
  .page-board .board-list,
  .page-board .board-grid{
    grid-template-columns: 1fr;
    gap: var(--gap-14);
  }
}


/* ==========================================================================
   2) 768px 이하 (태블릿 세로)
   - 대부분 1열 전환 / 상단 바(필터/버튼) 스택 / 목록 가독성 최우선
   ========================================================================== */
@media (max-width: 768px){

  /* ---------- 공통 ---------- */
  .site-main .layout-inner{ padding-left: 12px; padding-right: 12px; }
  .card{ border-radius: var(--radius-14); }

  /* =========================================
     홈
     ========================================= */
  .page-home .home-grid,
  .page-home .home-cards{
    grid-template-columns: 1fr;
    gap: var(--gap-14);
  }
  .page-home .hero{
    padding: var(--pad-14);
  }

  /* =========================================
     사진
     ========================================= */
  .page-gallery .gallery-grid,
  .page-gallery-cover .gc-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-14);
  }
  .page-photo-manage .pm-grid{
    grid-template-columns: 1fr;
    gap: var(--gap-14);
  }

  /* =========================================
     영상 (동영상 관리 대시보드 핵심)
     ========================================= */
  .page-video-manage .vm-hero{
    padding: var(--pad-14);
  }
  .page-video-manage .vm-hero-actions{
    width: 100%;
    justify-content: flex-start;
  }
  .page-video-manage .vm-cta{
    flex: 0 0 auto;                       /* 버튼이 찌그러지지 않게 */
  }

  /* ✅ 폼: “카테고리/연도 1열(세로)”이 기본이 되게 */
  .page-video-manage .vm-form--hero{
    max-width: 520px;
    padding: 12px;
  }
  .page-video-manage .vm-field{
    grid-template-columns: 1fr;           /* 라벨 위, 셀렉트 아래 */
    gap: 6px;
    margin-bottom: 10px;
  }
  .page-video-manage .vm-grid{
    grid-template-columns: 1fr;           /* 카드 1열 */
    gap: var(--gap-14);
  }
  .page-video-manage .vm-media video{
    height: 260px;                        /* 세로폭 줄어도 영상 큼직하게 */
  }

  /* =========================================
     건강관리
     ========================================= */
  .page-health .health-grid,
  .page-health .health-bottom{
    grid-template-columns: 1fr;
    gap: var(--gap-14);
  }

  /* =========================================
     가족소개
     ========================================= */
  .page-family .family-grid{
    grid-template-columns: 1fr;
    gap: var(--gap-14);
  }

  /* =========================================
     공지사항 / 게시판
     ========================================= */
  .page-notice .notice-toolbar,
  .page-board  .board-toolbar{
    flex-wrap: wrap;
    gap: var(--gap-10);
  }
}


/* ==========================================================================
   3) 620px 이하 (큰 모바일/작은 태블릿)
   - 상단 액션바: 2줄 허용 / 폰트 조금 축소 / 카드 padding 축소
   ========================================================================== */
@media (max-width: 620px){

  /* ---------- 공통 ---------- */
  .site-main .layout-inner{ padding-left: 10px; padding-right: 10px; }
  .card{ border-radius: var(--radius-12); }
  .card{ padding: var(--pad-14); }

  /* =========================================
     영상 관리
     ========================================= */
  .page-video-manage .vm-title{ font-size: 20px; }
  .page-video-manage .vm-sub{ font-size: var(--fz-13); }
  .page-video-manage .vm-cta{
    height: 36px;
    padding: 0 12px;
    font-size: var(--fz-13);
  }
  .page-video-manage .vm-form--hero{
    padding: 10px;
  }
  .page-video-manage .vm-select{
    height: 36px;
    font-size: var(--fz-14);
  }
  .page-video-manage .vm-media video{
    height: 240px;
  }

  /* =========================================
     사진: 그리드 1열로 가기 직전(2열 유지 가능)
     ========================================= */
  .page-gallery .gallery-grid,
  .page-gallery-cover .gc-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-12);
  }
}


/* ==========================================================================
   4) 560px 이하 (일반 모바일)
   - 사진/카드 1열 전환 / 검색/필터 폭 100% / 버튼 줄바꿈 최적화
   ========================================================================== */
@media (max-width: 560px){

  /* ---------- 공통 ---------- */
  .card{ padding: var(--pad-12); }

  /* =========================================
     사진
     ========================================= */
  .page-gallery .gallery-grid,
  .page-gallery-cover .gc-grid{
    grid-template-columns: 1fr;
    gap: var(--gap-12);
  }

  /* =========================================
     영상 관리
     ========================================= */
  .page-video-manage .vm-hero-actions{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .page-video-manage .vm-cta{
    flex: 1 1 auto;                       /* 버튼 2개가 가로로 반반 */
  }
  .page-video-manage .vm-media video{
    height: 230px;
  }

  /* =========================================
     공지/게시판: 검색/필터 100% 폭
     ========================================= */
  .page-notice .notice-search,
  .page-board  .board-search{
    width: 100%;
    max-width: none;
  }
}


/* ==========================================================================
   5) 480px 이하 (작은 모바일)
   - 터치/가독성: 폰트/높이/간격 조정 + “최소 조작” 목표
   ========================================================================== */
@media (max-width: 480px){

  /* ---------- 공통 ---------- */
  .site-main .layout-inner{ padding-left: 8px; padding-right: 8px; }

  /* =========================================
     영상 관리 (핵심)
     ========================================= */
  .page-video-manage .vm-title{ font-size: 19px; }
  .page-video-manage .vm-sub{ font-size: var(--fz-12); }
  .page-video-manage .vm-pill{
    height: 30px;
    padding: 0 10px;
    font-size: var(--fz-12);
  }
  .page-video-manage .vm-select{
    height: 34px;
    border-radius: 10px;
    font-size: var(--fz-13);
    padding: 0 10px;
  }
  .page-video-manage .vm-media video{
    height: 220px;
  }
  .page-video-manage .vm-name{ font-size: var(--fz-13); }
  .page-video-manage .vm-submeta{ font-size: 11.5px; }

  /* =========================================
     홈/건강: 카드 텍스트 조금 축소
     ========================================= */
  .page-home .card,
  .page-health .card{
    font-size: var(--fz-13);
  }

  /* =========================================
     공지/게시판: 리스트 간격 축소
     ========================================= */
  .page-notice .notice-item,
  .page-board  .board-item{
    padding: 10px 10px;
  }
}

@media (max-width:1024px){

  /* ===== 영상 관리 ===== */
  .page-video-manage .vm-hero{
    flex-direction:column;
    gap:16px;
    padding:18px;
  }

  .page-video-manage .vm-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .page-video-manage .vm-media video{
    height:240px;
  }

  /* ===== 사진 ===== */
  .page-gallery-cover .gc-grid,
  .page-gallery .gallery-grid{
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }

  /* ===== 건강 ===== */
  .page-health .health-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* ===== 가족소개 ===== */
  .page-family .family-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:768px){

  .layout-inner{
    padding-left:14px;
    padding-right:14px;
  }

  /* ===== 영상 관리 ===== */
  .page-video-manage .vm-grid{
    grid-template-columns:1fr;
  }

  .page-video-manage .vm-field{
    grid-template-columns:1fr;
  }

  .page-video-manage .vm-media video{
    height:260px;
  }

  /* ===== 사진 ===== */
  .page-gallery-cover .gc-grid,
  .page-gallery .gallery-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* ===== 홈 ===== */
  .page-home .home-grid{
    grid-template-columns:1fr;
  }

}

@media (max-width:620px){

  .card{
    border-radius:14px;
    padding:14px;
  }

  .page-video-manage .vm-title{
    font-size:20px;
  }

  .page-video-manage .vm-cta{
    height:36px;
    font-size:13px;
  }

}

@media (max-width:560px){

  .page-gallery-cover .gc-grid,
  .page-gallery .gallery-grid{
    grid-template-columns:1fr;
  }

  .page-video-manage .vm-cta{
    flex:1 1 auto;
  }

  .page-video-manage .vm-media video{
    height:230px;
  }

  .page-notice .notice-toolbar,
  .page-board .board-toolbar{
    flex-wrap:wrap;
  }

}

@media (max-width:480px){

  .layout-inner{
    padding-left:10px;
    padding-right:10px;
  }

  .page-video-manage .vm-select{
    height:34px;
    font-size:13px;
  }

  .page-video-manage .vm-name{
    font-size:13px;
  }

  .page-video-manage .vm-submeta{
    font-size:11px;
  }

}