157 lines
3.3 KiB
CSS
157 lines
3.3 KiB
CSS
|
/* 모바일 전용 스타일 */
|
||
|
|
|
||
|
|
/* 모바일 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;
|
||
|
|
}
|