/* ==================================================================
   모바일 대응 — 좁은 화면에서 깨지던 배열을 바로잡는다.
   features.css 다음에 읽혀 덮어쓴다. 데스크톱(641px 이상)은 영향 없음.
   ================================================================== */

@media (max-width: 640px) {

  /* 가로 스크롤(줄무늬처럼 삐져나오는 것) 원천 차단 */
  html, body { max-width: 100%; overflow-x: hidden; }
  * { max-width: 100%; }

  /* ---------- 헤더 ---------- */
  header { padding: 12px 14px; }
  header h1 { font-size: 17px; line-height: 1.3; }
  .header-right { gap: 6px; }
  .header-right .btn { padding: 7px 10px; font-size: 12px; }
  #headerAvatar { margin-left: 10px; }

  /* ---------- 섹션·탭 메뉴: 세로로 쪼개지지 않게 가로 스크롤 ---------- */
  .section-nav,
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 0;
    gap: 6px;
    scrollbar-width: none;
  }
  .section-nav::-webkit-scrollbar,
  .tabs::-webkit-scrollbar { display: none; }
  .section-btn,
  .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;      /* 글자가 한 자씩 세로로 끊기던 원인 제거 */
    font-size: 13px;
    padding: 8px 12px;
  }

  /* ---------- 월간 콘텐츠 캘린더 ---------- */
  /* 7칸에 콘텐츠를 다 세워 넣으면 글자가 한 자씩 흘러 재앙이 된다.
     모바일에서는 칸에 날짜와 '완료 개수'만 보여주고, 탭하면 상황판으로 간다. */
  .cal-grid { gap: 4px; }
  .cal-cell {
    height: auto !important;
    min-height: 62px;
    padding: 6px 4px;
    border-radius: 8px;
  }
  .cal-cell .cal-items { display: none !important; }   /* 알록달록 세로 막대 숨김 */
  .cal-date { font-size: 13px; }
  .cal-progress {
    font-size: 9px;
    padding: 1px 5px;
    margin-top: 2px;
    align-self: flex-start;
  }
  .cal-date-row { flex-direction: column; align-items: flex-start; gap: 2px; }

  /* ---------- 노잉 캘린더(공휴일·연차) ---------- */
  .noing-cell { min-height: 54px !important; padding: 3px 2px; }
  .noing-day-num { font-size: 12px; }
  .noing-tag {
    font-size: 8.5px;
    padding: 1px 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .noing-grid-head { font-size: 10px; padding: 6px 2px; }

  /* ---------- 연차 통계 5칸 ---------- */
  .noing-leave-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px;
  }
  .nl-stat { padding: 8px 4px; }
  .nl-stat-val { font-size: 16px; }
  .nl-stat-label { font-size: 10px; }
  .noing-leave-actions { flex-wrap: wrap; }

  /* ---------- 오늘 상황판 ---------- */
  .day-group-header { font-size: 14px; }
  .day-group-stats {
    font-size: 11px;
    margin-left: 0;
    margin-top: 4px;
    line-height: 1.6;
    word-break: keep-all;
  }
  /* 카드 그리드가 있으면 한 줄에 하나씩 */
  .day-card-grid,
  #dayCardGrid { grid-template-columns: 1fr !important; }

  /* ---------- 회의록 카드 ---------- */
  .meet-list { grid-template-columns: 1fr !important; }

  /* ---------- 모달: 화면에 꽉 차지 않게 ---------- */
  .modal { width: 94%; max-width: 94% !important; padding: 20px 16px; }
  .modal-actions { flex-wrap: wrap; gap: 8px; }
  .modal-actions .btn { flex: 1 1 auto; }

  /* ---------- 로그인 화면 ---------- */
  .login-card { padding: 28px 20px; }
  .name-grid { grid-template-columns: 1fr !important; }

  /* ---------- 관리자 표 ---------- */
  .admin-table { font-size: 12px; }
  #adminHireRows input[type="date"] { width: 140px !important; }
}

/* 아주 좁은 폭(작은 폰)에서 캘린더 요일 간격 더 좁게 */
@media (max-width: 380px) {
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 54px; }
  .noing-leave-stats { grid-template-columns: repeat(2, 1fr) !important; }
}