refactor: CSS를 공통/PC/모바일로 분리

- index.css: 공통 스타일 (tailwind, 스크롤바, 트랜지션)
- pc.css: PC 전용 (min-width, 스크롤바 공간)
- mobile.css: 모바일 전용 (레이아웃, 달력 스타일)
- 각 Layout 컴포넌트에서 해당 CSS import

frontend/src/components/mobile/Layout.jsx

@@ -1,6 +1,7 @@
 import { NavLink, useLocation } from 'react-router-dom';
 import { Home, Users, Disc3, Calendar } from 'lucide-react';
 import { useEffect } from 'react';
+import '../../mobile.css';
 
 // 모바일 헤더 컴포넌트
 function MobileHeader({ title }) {

frontend/src/components/pc/Layout.jsx

@@ -1,5 +1,6 @@
 import Header from './Header';
 import Footer from './Footer';
+import '../../pc.css';
 
 function Layout({ children }) {
     return (

frontend/src/index.css

@@ -3,82 +3,11 @@
 @tailwind utilities;
 
 /* 기본 스타일 */
-html {
-  overflow-y: scroll; /* 항상 스크롤바 공간 확보 - 화면 밀림 방지 */
-}
-
 body {
   background-color: #fafafa;
   color: #1a1a1a;
 }
 
-/* 최소 너비 설정 - PC에서만 적용 */
-@media (min-width: 1024px) {
-  #root {
-    min-width: 1440px;
-  }
-}
-
-/* 모바일 레이아웃 시스템 */
-@media (max-width: 1023px) {
-  /* 모바일에서 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);
-}
-
 /* 스크롤바 스타일 */
 ::-webkit-scrollbar {
   width: 8px;
@@ -154,100 +83,3 @@ body {
 .swiper-slide {
   height: auto !important;
 }
-
-.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;
-}

frontend/src/mobile.css

@@ -0,0 +1,156 @@
+/* 모바일 전용 스타일 */
+
+/* 모바일 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;
+}

frontend/src/pc.css

@@ -0,0 +1,11 @@
+/* PC 전용 스타일 */
+
+/* PC 항상 스크롤바 공간 확보 - 화면 밀림 방지 */
+html {
+  overflow-y: scroll;
+}
+
+/* PC 최소 너비 설정 */
+#root {
+  min-width: 1440px;
+}