/* 전체 레이아웃 */
body {
  font-family: 'Pretendard', 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  background: #f3f6fb;
  color: #222;
}

/* 헤더 */
header {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  text-align: center;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

header h1 {
  margin: 0;
  font-size: 1.8rem;
}

/* 메인 영역 */
main {
  max-width: 800px;
  margin: 30px auto;
  padding: 0 20px;
  width: 95%; /* 모바일 시ㅣ발*/
  box-sizing: border-box;
}

/* 공통 카드 스타일 */
section {
  margin-bottom: 25px;
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}

section:hover {
  transform: translateY(-4px);
}

/* 제목 */
section h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.4rem;
  color: #2563eb;
  border-left: 5px solid #2563eb;
  padding-left: 10px;
}

/* 급식 버튼 */
#meal-day-buttons {
  margin-bottom: 15px;
}

#meal-day-buttons button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 14px;
  margin: 0 5px 10px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  font-size: 0.95rem;
}

#meal-day-buttons button:hover {
  background: #1e4ed8;
}

#meal-day-buttons button.active {
  background: #f59e0b;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 급식 카드 */
#meal {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding-top: 10px;
  justify-content: center;
}

#meal .menu-card {
  background: #ffffff;
  color: #333;
  padding: 15px 20px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  flex: 1 1 180px;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
}

#meal .menu-card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  background: #f0f4ff;
}

#meal .menu-card p {
  margin: 0;
  line-height: 1.4;
}

/* 시간표 버튼 */
#day-buttons {
  margin-bottom: 15px;
}

#day-buttons button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 14px;
  margin: 0 5px 10px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  font-size: 0.95rem;
}

#day-buttons button:hover {
  background: #1e4ed8;
}

#day-buttons button.active {
  background: #f59e0b;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 시간표 목록 */
#timetable ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#timetable li {
  padding: 10px;
  margin-bottom: 8px;
  background: #f1f5ff;
  border-left: 5px solid #3b82f6;
  border-radius: 8px;
  font-size: 1rem;
  transition: background 0.2s;
}

#timetable li:hover {
  background: #e0eaff;
}

/* 푸터 */
footer {
  text-align: center;
  padding: 15px;
  background: #2563eb;
  color: white;
  font-size: 0.9rem;
  margin-top: 40px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* 반응형: 태블릿 */
@media (max-width: 768px) {
  main {
    margin: 20px;
    padding: 0 15px;
  }

  #meal .menu-card {
    flex: 1 1 140px;
    padding: 12px 15px;
    font-size: 0.95rem;
  }

  #day-buttons button,
  #meal-day-buttons button {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  #timetable li {
    padding: 8px;
    font-size: 0.95rem;
  }

  section {
    padding: 15px;
  }
}

/* 반응형: 모바일 */
@media (max-width: 480px) {
  header h1 {
    font-size: 1.5rem;
  }

  #meal .menu-card {
    flex: 1 1 100%; /* 모바일은 카드 1열 */
  }

  #day-buttons button,
  #meal-day-buttons button {
    padding: 5px 8px;
    font-size: 0.8rem;
    margin-bottom: 8px;
  }

  #timetable li {
    font-size: 0.9rem;
    padding: 6px;
  }
}

/* 테이블 대응: 모바일 가로 스크롤 */
#meal table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

#meal th, #meal td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

#meal th {
  background: #2563eb;
  color: white;
}

#meal tr:nth-child(even) {
  background: #f9f9f9;
}



@media (max-width: 480px) {
  /* 버튼 그룹 중앙 정렬 */
  #day-buttons,
  #meal-day-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px; /* 버튼 사이 간격 */
  }

  /* 버튼 컨테이너 작게, 글자 조금 크게 */
  #day-buttons button,
  #meal-day-buttons button {
    flex: 0 0 15%;       /* 폭 줄여서 한 줄에 5개 */
    aspect-ratio: 1 / 1; /* 정사각형 유지 */
    font-size: 1rem;     /* 글자 2포인트 키움 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    padding: 0;          /* 내부 패딩 최소화 */
  }
}

/* 학사일정 카드 */
#schedule {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
}

#schedule .schedule-card {
  background: #fdfdfd;
  border-left: 5px solid #10b981; /* 초록색 포인트 */
  padding: 12px 15px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  transition: background 0.2s;
}

#schedule .schedule-card:hover {
  background: #f0fdf4;
}

#schedule .schedule-date {
  font-weight: 600;
  color: #2563eb;
}

#schedule .schedule-event {
  margin: 4px 0 0 0;
  font-size: 0.95rem;
}

/* 학사일정 달력 */
#calendar-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #2563eb;
}

#calendar-controls button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
#calendar-controls button:hover {
  background: #1e40af;
}

#calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
}

#calendar .day {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 2px;      /* 패딩 조금 줄임 */
  background: white;
  min-height: 60px;      /* 모바일에서 조금 작게 */
  font-size: 0.85rem;    /* 글자 약간 줄임 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#calendar .day.has-event {
  border: 2px solid #10b981;
  background: #f0fdf4;
}

#calendar .day .date {
  font-weight: bold;
  margin-bottom: 2px;
}
#calendar .day .event {
  font-size: 0.7rem;     /* 이벤트 글자 작게 */
  color: #2563eb;
  margin-top: 2px;
}

/* 모바일 대응 */
@media (max-width: 480px) {
  #calendar-controls {
    font-size: 1rem;
    gap: 10px;
  }

  #calendar-controls button {
    padding: 4px 6px;
    font-size: 0.75rem;
  }

  #calendar .day {
    min-height: 45px;
    font-size: 0.7rem;
    padding: 4px 2px;
  }

  #calendar .day .event {
    font-size: 0.6rem;
  }
}

#calendar .day.header {
  font-weight: bold;
  background: #f3f4f6;
  border: none;
  cursor: default;
}