/* =============================================
   responsive.css | 반응형 브레이크포인트
   ============================================= */

/* ── 태블릿 (≤ 1024px) */
@media (max-width: 1024px) {
  .container {
    padding: 0 20px;
  }

  .main-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* 모바일 헤더: 인증 버튼 숨김 (모바일 드로어에서 접근 가능) */
  #authArea {
    display: none;
  }

  .header-actions .header-username {
    display: none;
  }

  /* 로고 이미지 크기 축소 (56px 헤더 대응) */
  .logo-img,
  .logo-img img {
    height: 36px;
  }
}

/* ── 태블릿 소형 (≤ 768px) */
@media (max-width: 768px) {
  :root {
    --header-h: 56px;
  }

  .container {
    padding: 0 16px;
  }

  .section {
    padding: 32px 0;
  }

  .content-wrap {
    padding: 36px 16px 60px;
  }

  .page-header {
    padding: 24px 0;
  }

  .page-header h1 {
    font-size: var(--text-xl);
  }

  /* ── 서브메뉴 탭: 모바일 가로 스크롤 (Plan B)
       - 탭 구조·active 상태·링크 모두 유지
       - 스크롤바 숨김, 터치 스크롤 지원 */
  .page-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
  }
  .page-tabs::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
  }

  .page-tab {
    flex-shrink: 0;                 /* 탭 축소 금지 */
    white-space: nowrap;
    padding: 12px 18px;
    font-size: var(--text-sm);
  }

  .data-table thead th:nth-child(n+4),
  .data-table tbody td:nth-child(n+4) {
    display: none;
  }

  /* ── 게시판 테이블 → 모바일 카드 레이아웃
     구조:
       [제목(1fr)            ] [작성자 or 상태(auto)]
       [등록일(소형/회색)    ]
  */
  .board-table,
  .board-table tbody {
    display: block;
    width: 100%;
  }
  .board-table thead {
    display: none;
  }
  .board-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-light);
  }
  .board-table tbody tr:hover {
    background: var(--gray-bg);
  }
  /* 모든 td 기본: 숨김 */
  .board-table tbody td {
    display: none;
    padding: 0;
    text-align: left;
    white-space: normal;
    border: none;
  }
  /* 제목: 1열 1행, 볼드 말줄임 */
  .board-table tbody td.td-title {
    display: block;
    grid-column: 1;
    grid-row: 1;
    font-weight: 700;
    font-size: var(--text-md);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .board-table tbody td.td-title a {
    font-weight: 700;
  }
  /* 날짜: 1열 2행, 소형 회색 */
  .board-table tbody td.col-date {
    display: block;
    grid-column: 1;
    grid-row: 2;
    font-size: var(--text-xs);
    color: var(--gray-mid);
    margin-top: 4px;
    white-space: nowrap;
  }
  /* 작성자: 2열 1~2행 (기본 게시판) */
  .board-table tbody td.col-author {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: var(--text-sm);
    color: var(--gray-mid);
    padding-left: 10px;
    white-space: nowrap;
  }
  /* 상태 배지: 2열 1~2행 (강좌·QnA 게시판) */
  .board-table tbody td.col-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 2;
    grid-row: 1 / 3;
    padding-left: 10px;
  }
  /* 번호·부가정보·기간: 숨김 유지 */
  .board-table tbody td.col-num,
  .board-table tbody td.col-extra,
  .board-table tbody td.col-period {
    display: none;
  }
  /* 공지 핀 행 */
  .board-table tbody tr.pinned {
    background: var(--green-pale);
  }

  /* ── 푸터 */
  .site-footer {
    padding: 24px;
    font-size: var(--text-xs);
  }

  /* main.css 새 푸터 구조 대응 */
  .site-footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 0 20px;
  }

  .footer-info {
    gap: 4px;
  }

  .footer-links {
    gap: 12px;
    margin-top: 8px;
  }

  .footer-right {
    flex-wrap: wrap;
    /* SNS + 패밀리사이트 줄바꿈 허용 */
    gap: 12px;
    width: 100%;
  }

  .footer-family-list {
    bottom: auto;
    top: calc(100% + 6px);
    /* 모바일에선 위가 아닌 아래로 펼침 */
  }

  .footer-copy {
    margin-top: 16px;
  }
}

/* ── 모바일 (≤ 480px) */
@media (max-width: 480px) {
  .tabs {
    gap: 6px;
  }

  .tab-btn {
    font-size: var(--text-sm);
    padding: 7px 12px;
  }

  .btn-lg {
    padding: 11px 20px;
    font-size: var(--text-md);
  }

  .search-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .search-field .form-control,
  .search-field input[type="date"] {
    min-width: unset;
    width: 100%;
  }

  .search-btn {
    width: 100%;
  }

  .pagination .page-btn {
    width: 30px;
    height: 30px;
    font-size: var(--text-xs);
  }

  /* ── 푸터 모바일 */
  .footer-logo-text {
    font-size: var(--text-md);
  }

  .footer-info p,
  .footer-links a {
    font-size: var(--text-xs);
  }

  .footer-sns-btn {
    width: 32px;
    height: 32px;
  }

  .footer-family-btn {
    font-size: var(--text-xs);
    padding: 6px 10px;
  }

  .footer-copy {
    font-size: var(--text-xs);
  }
}

/* ── 소형 모바일 (≤ 360px) — CLAUDE.md 기준 최솟값 */
@media (max-width: 360px) {
  .container {
    padding: 0 12px;
  }

  .page-tab {
    padding: 10px 10px;
    font-size: var(--text-xs);
  }

  .btn {
    padding: 7px 14px;
  }

  .btn-lg {
    padding: 10px 16px;
  }

  .card {
    padding: 16px;
  }

  .modal {
    width: 96%;
  }

  .tabs {
    gap: 4px;
  }
}