/* 모바일 전용 스타일 */

/* 모바일 html,body 스크롤 방지 */
html.mobile-layout,
html.mobile-layout body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* 모바일 레이아웃 컨테이너 */
.mobile-layout-container {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* 모바일 툴바 (기본 56px) */
.mobile-toolbar {
  flex-shrink: 0;
  background-color: #ffffff;
}

/* 일정 페이지 툴바 (헤더 + 날짜 선택기) */
.mobile-toolbar-schedule {
  flex-shrink: 0;
  background-color: #ffffff;
}

/* 하단 네비게이션 */
.mobile-bottom-nav {
  flex-shrink: 0;
}

/* 컨텐츠 영역 - 스크롤 가능, 스크롤바 숨김 */
.mobile-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.mobile-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* 모바일 safe-area 지원 (노치, 홈 인디케이터) */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-top {
  padding-top: env(safe-area-inset-top, 0);
}

/* 모바일 달력 스타일 */
.mobile-calendar-wrapper .react-calendar__navigation button:hover {
  background-color: #f3f4f6;
  border-radius: 0.5rem;
}

.mobile-calendar-wrapper .react-calendar__navigation__label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #374151;
}

.mobile-calendar-wrapper .react-calendar__month-view__weekdays {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}

.mobile-calendar-wrapper .react-calendar__month-view__weekdays__weekday {
  padding: 0.5rem 0;
}

.mobile-calendar-wrapper .react-calendar__month-view__weekdays__weekday abbr {
  text-decoration: none;
}

/* 일요일 (빨간색) */
.mobile-calendar-wrapper
  .react-calendar__month-view__weekdays__weekday:first-child {
  color: #f87171;
}

/* 토요일 (파란색) */
.mobile-calendar-wrapper
  .react-calendar__month-view__weekdays__weekday:last-child {
  color: #60a5fa;
}

.mobile-calendar-wrapper .react-calendar__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem;
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #374151;
}

.mobile-calendar-wrapper .react-calendar__tile:hover {
  background-color: #f3f4f6;
  border-radius: 9999px;
}

.mobile-calendar-wrapper .react-calendar__tile abbr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
}

/* 이웃 달 날짜 (흐리게) */
.mobile-calendar-wrapper
  .react-calendar__month-view__days__day--neighboringMonth {
  color: #d1d5db;
}

/* 일요일 */
.mobile-calendar-wrapper .react-calendar__tile.sunday abbr {
  color: #ef4444;
}

/* 토요일 */
.mobile-calendar-wrapper .react-calendar__tile.saturday abbr {
  color: #3b82f6;
}

/* 오늘 */
.mobile-calendar-wrapper .react-calendar__tile--now abbr {
  background-color: #548360;
  color: white;
  font-weight: 700;
}

/* 선택된 날짜 */
.mobile-calendar-wrapper .react-calendar__tile--active abbr {
  background-color: #548360;
  color: white;
}

.mobile-calendar-wrapper .react-calendar__tile--active:enabled:hover abbr,
.mobile-calendar-wrapper .react-calendar__tile--active:enabled:focus abbr {
  background-color: #456e50;
}