:root {
    --primary-color: #5d5dff; /* 예시로 지정한 메인 색상 */
    --text-color: #333;
    --light-gray: #f0f0f0;
    --border-color: #ddd;
    --today-bg: #e0f2f7; /* 오늘 날짜 배경색 */
    --selected-date-bg: #cce7ff; /* 선택된 날짜 배경색 */
    --today-highlight-color: #007bff; /* 오늘 날짜 숫자 강조색 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 상단 정렬 */
    min-height: 100vh;
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 500px; /* 모바일 앱 기준 최대 너비 */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100vh; /* 전체 높이 사용 */
    overflow: hidden; /* 스크롤 방지 */
}

/* 헤더 */
.app-header {
    display: flex;
    justify-content: flex-end; /* 프로필 버튼을 우측으로 */
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    background-color: #fff;
    position: relative; /* FullCalendar 제목이 중앙에 오도록 대비 */
    z-index: 10;
}

.profile-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* FullCalendar 오버라이드 */
.full-calendar-wrapper {
    flex-grow: 0; /* 늘어나지 않도록 고정 */
    max-height: 40vh; /* 캘린더 영역 최대 높이 (예시) */
    overflow: hidden; /* 캘린더 내부 스크롤 방지 */
    border-bottom: 1px solid var(--border-color);
    background-color: #fff;
}

.fc-toolbar-title {
    font-size: 1.2em; /* 년월 텍스트 크기 */
    font-weight: bold;
    color: var(--text-color);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.fc .fc-toolbar {
    margin-bottom: 0.5em; /* 툴바 하단 마진 조정 */
    padding: 0 10px; /* 좌우 패딩 */
}

.fc .fc-button-primary {
    background-color: transparent;
    border: none;
    color: var(--primary-color);
    box-shadow: none;
    font-size: 1.2em;
}
.fc .fc-button-primary:hover, .fc .fc-button-primary:focus {
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: none;
}
.fc .fc-button-group > .fc-button.fc-button-active {
    background-color: var(--primary-color);
    color: white;
}

.fc-daygrid-body {
    flex-grow: 0;
    max-height: 100%; /* 달력 높이를 넘지 않도록 */
}

.fc-daygrid-day {
    padding: 5px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.fc-daygrid-day-top {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-size: 0.9em;
    font-weight: 500;
}

.fc-day-other .fc-daygrid-day-top { /* 다른 달 날짜 색상 연하게 */
    opacity: 0.5;
}

.fc-day-today .fc-daygrid-day-top {
    background-color: var(--today-highlight-color); /* 오늘 날짜 배경 */
    color: white;
    border-radius: 50%; /* 둥글게 */
    width: 28px; /* 크기 조정 */
    height: 28px;
    line-height: 28px; /* 세로 중앙 정렬 */
    display: inline-flex; /* 텍스트와 배경을 맞춤 */
    justify-content: center;
    align-items: center;
}

/* 선택된 날짜 스타일 (Figma 디자인 참고) */
.fc-daygrid-day.fc-day-selected {
    background-color: var(--selected-date-bg); /* 선택된 날짜 배경 */
    border-radius: 0; /* 선택된 날짜 배경은 둥글지 않게 */
}
.fc-daygrid-day.fc-day-selected .fc-daygrid-day-top {
    background-color: transparent; /* 선택된 날짜는 숫자 자체에 색상 없음 */
    color: var(--text-color); /* 숫자 색상 */
}
.fc-daygrid-day.fc-day-selected.fc-day-today .fc-daygrid-day-top {
    background-color: var(--today-highlight-color); /* 선택된 오늘 날짜는 오늘 날짜 강조 유지 */
    color: white;
}

.fc .fc-col-header-cell {
    padding: 10px 0;
    background-color: #fff; /* 요일 헤더 배경색 */
    color: var(--primary-color); /* 요일 텍스트 색상 */
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9em;
}

/* 오늘 날짜 정보 및 이벤트 목록 */
.today-events-section {
    flex-grow: 1; /* 남은 공간을 채움 */
    padding: 15px;
    background-color: #fcfcfc;
    overflow-y: auto; /* 일정 목록 스크롤 가능 */
}

.today-info {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 15px;
}
#selectedDateDisplay {
    margin-right: 5px;
}
#todayLabel {
    font-size: 0.8em;
    color: var(--primary-color);
    background-color: rgba(93, 93, 255, 0.1);
    padding: 3px 8px;
    border-radius: 15px;
}

.event-list {
    margin-top: 10px;
}

.event-item {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
}
.event-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-weight: bold;
}
.event-time {
    color: var(--primary-color);
    margin-right: 8px;
}
.event-icon {
    font-size: 1.2em; /* 아이콘 크기 */
    margin-right: 5px;
}
.event-type {
    color: #666;
    margin-right: 5px;
}
.event-group {
    font-size: 0.8em;
    color: #999;
    margin-top: 5px;
}
.event-name {
    color: #333;
}


/* 일정 추가 버튼 */
.add-event-button {
    width: calc(100% - 30px);
    padding: 12px 0;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    transition: background-color 0.2s;
}
.add-event-button:hover {
    background-color: #4a4ac9;
}


/* 푸터 내비게이션 */
.app-footer-nav {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    border-top: 1px solid var(--border-color);
    background-color: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
    z-index: 10;
    flex-shrink: 0; /* 줄어들지 않도록 */
}

.nav-button {
    background: none;
    border: none;
    color: #999;
    font-size: 0.9em;
    padding: 8px 12px;
    cursor: pointer;
    transition: color 0.2s;
}

.nav-button.active,
.nav-button:hover {
    color: var(--primary-color);
    font-weight: bold;
}

/* FullCalendar event dots (숨김 처리, Figma 디자인처럼) */
.fc-event {
    display: none !important;
}

/* 스크롤바 숨김 (일부 브라우저에서만 작동) */
.today-events-section::-webkit-scrollbar {
    display: none;
}
.today-events-section {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}