/* 1. 변수 및 공통 설정 */
:root {
    --slate-dark: #1E293B;
    --slate-light: #F8FAFC;
    --soft-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --main-orange: #FF7E5F;
}

body { 
    /* 시스템 폰트로 가독성 확보 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* 더블 클릭 확대 및 특정 브라우저의 기본 제스처 방지 */
    touch-action: manipulation;
}

/* 스크롤바 숨기기 (선택 사항) */
body::-webkit-scrollbar { display: none; }

/* 1. 전체 스크롤을 허용하도록 수정 */
html, body {
    /* height: 90svh; /*<- 제거하거나 min-height로 변경 */
    /* min-height: 90%;  */
    overflow-y: auto; /* 세로 스크롤 허용 */
    margin: 0;
    padding: 0;
    background-color: #f8fafc;
    /* 모바일 바운스 효과를 부드럽게 */
    /* overscroll-behavior-y: none;  */
}

/* 2. 메인 컨테이너: 높이 고정을 풀고 여백만 확보 */
.app-container {
    /* height: 100svh; /*<- 제거 */
    display: block; /* flex 대신 일반 블록 구조로 변경 */
    padding: 1rem;
    padding-bottom: 100px; /* 하단 탭바에 가려지지 않게 넉넉히 여백 */
}


/* 부드러운 그림자 효과 */
.shadow-sm {
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.06) !important;
}

/* 2. 현대적인 공통 컴포넌트 */
.rounded-3xl { border-radius: 1.5rem !important; }
.shadow-soft { box-shadow: var(--soft-shadow) !important; }

/* 3. 달력(FullCalendar) 최적화 */
#calendar { margin: 0 auto; width: 100%; height: 100% !important;}

/* 달력 본체 높이를 화면 높이에 맞춤 (하단 네비게이션 높이를 뺀 나머지) */
#calendar-container {
    background: white;
    border-radius: 24px 24px 0 0; /* 위쪽만 둥글게 해서 하단에 밀착 */
    flex-grow: 1;                /* 남은 공간을 모두 차지 */
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* 내부 스크롤 방지 */
}

/* 날짜 링크 스타일 제거 및 주말 색상 */
.fc-col-header-cell-cushion, .fc-daygrid-day-number { text-decoration: none !important; color: var(--slate-dark); }
.fc-day-sun .fc-col-header-cell-cushion, .fc-day-sun a { color: #ef4444 !important; } /* Red 500 */
.fc-day-sat .fc-col-header-cell-cushion, .fc-day-sat a { color: #3b82f6 !important; } /* Blue 500 */

/* 일정 점 크기 및 간격 */
.fc-daygrid-event-dot { border-width: 4px !important; border-radius: 50% !important; }
.fc-daygrid-event { margin-top: 1px !important; margin-bottom: 1px !important; }
/* 개인 일정(isPersonal)의 파란색 박스 배경과 테두리 제거 */
.fc-daygrid-event:has(.personal-dot-event) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 박스 내부 여백 조정 */
.fc-v-event .fc-event-main {
    background-color: transparent !important;
}


/* 4. 근무 필터 스위치 색상 (ID 기반 유지) */
#showDay:checked { background-color: #EA580C !important; border-color: #EA580C !important; }
#showNight:checked { background-color: #16A34A !important; border-color: #16A34A !important; }
#showOff:checked { background-color: #DC2626 !important; border-color: #DC2626 !important; }
#showHoli:checked { background-color: #6366F1 !important; border-color: #6366F1 !important; }


/* 7. 하단 네비게이션 바 (트렌디한 스타일로 교체) */
.navbar.fixed-bottom {
    height: 70px;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.04); /* 은은한 상단 그림자 */
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-pills .nav-link {
    color: #94a3b8; /* 비활성: Slate 400 */
    font-size: 0.72rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border-radius: 12px;
}

/* 1. 기본 상태: 텍스트와 아이콘을 부드러운 회색으로 */
.nav-link {
    color: #64748B !important;
    background-color: transparent !important;
}

/* 2. 활성 상태: 배경을 Indigo Blue로 채우고 글자를 흰색으로 */
.nav-link.active {
    background-color: #4F46E5 !important; /* 지침의 메인 컬러 */
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2); /* 약간의 그림자로 입체감 */
}

/* 3. 터치 피드백 (모바일 최적화) */
.nav-link:active {
    transform: scale(0.95);
}


/* 달력 내부 선 연하게 보정 */
.fc .fc-scrollgrid {
    border: 1px solid #f1f5f9 !important;
}
.fc .fc-daygrid-day {
    border: 1px solid #f1f5f9 !important;
}
/* 오늘 날짜 표시 커스텀 */
.fc .fc-day-today {
    background-color: rgba(255, 126, 95, 0.05) !important; /* 메인 오렌지색 아주 연하게 */
}




/* 색상 선택 점 스타일 */
.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.btn-check:checked + .color-dot {
    outline: 2px solid #4F46E5 !important;
    transform: scale(1.1);
}

/* 추가될 개인 일정의 점 스타일 (JS에서 활용) */
.event-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    flex-shrink: 0;
}



/* 리스트 그룹 테두리 제거 */
.list-group-item {
    background-color: transparent;
}

/* 텍스트 생략 처리 (...) */
.text-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 카드 호버 효과 (선택사항) */
.card {
    border: none !important;
    border-radius: 24px !important; /* 더 둥글게 수정 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03) !important; /* 아주 부드러운 그림자 */
}

.card:active {
    transform: scale(0.98);
}

/* 홈 탭 식단 전용 스타일 */
.home-menu-item {
    font-weight: 500;      /* 중간 굵기 */
    margin-bottom: 1px;    /* 아주 좁은 간격 */
    line-height: 1.2;      /* 줄 높이도 줄여서 더 촘촘하게 */
    font-size: 0.8rem;
}


/* 근무조 선택기 컨테이너 (둥근 배경) */
.btn-group.rounded-3xl {
    background-color: #F1F5F9 !important; /* 연한 회색 배경 */
    border-radius: 16px !important;      /* 모서리 더 둥글게 */
    padding: 4px;                        /* 안쪽 여백 */
    border: none !important;             /* 테두리 제거 */
}

/* 기본 라벨 스타일 */
.btn-check + .btn-outline-primary {
    color: #94A3B8 !important;           /* 비활성 글자색 */
    background-color: transparent !important;
    border: none !important;             /* 경계선 제거 */
    border-radius: 12px !important;      /* 개별 버튼 라운딩 */
    font-weight: 600;
    transition: all 0.2s ease;
}

/* 선택된(Checked) 상태 스타일 */
.btn-check:checked + .btn-outline-primary {
    background-color: #4F46E5 !important;
    color: white !important;
    font-weight: 700 !important;
}

/* 스위치 컬러 커스텀 (주/야/비/휴 상태 컬러 적용 가능) */
.form-check-input:checked {
    background-color: #4F46E5;
    border-color: #4F46E5;
}

/* 마우스 올렸을 때 살짝 강조 */
.btn-outline-primary:hover {
    color: #64748B !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* 1. 달력 헤더 (요일: 월, 화, 수...) */
.fc-col-header-cell {
    background-color: transparent !important;
    border: none !important;
    padding: 10px 0 !important;
}

.fc-col-header-cell-cushion {
    color: #94A3B8 !important; /* 요일 글자색 */
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* 2. 날짜 칸 테두리 제거 및 배경 */
.fc-theme-standard td, .fc-theme-standard th {
    border: none !important; /* 실선 제거로 깔끔하게 */
}

/* 4. 날짜 숫자 스타일 */
.fc-daygrid-day-number {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    padding: 4px !important;
    text-decoration: none !important;
}

.fc-event-title {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    display: block !important;
    text-align: center !important;
}

/* FullCalendar 내부 요일/날짜 텍스트 강조 */
.fc-col-header-cell-cushion {
    color: #94A3B8 !important; /* 요일(월화수) 색상 */
    font-size: 0.8rem !important;
    text-decoration: none !important;
}

.fc-daygrid-day-number {
    text-decoration: none !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

/* 가로 스크롤바 숨기기 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 아이콘 기본 스타일 수정 */
.icon-circle {
    background-color: white;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%; /* 시안처럼 완전 원형 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* 아주 미세한 그림자 */
}

.icon-circle-label {
    font-size: 0.75rem;
    color: #334155;
    font-weight: 600;
    line-height: 1.2;
}

/* 식당 선택 카드 */
.restaurant-card {
    background: white;
    border: 1px solid #F1F5F9;
    border-radius: 18px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94A3B8;
    transition: all 0.2s;
}

.restaurant-card.active {
    background: #6366F1;
    color: white;
    border: none;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.restaurant-card i { font-size: 1.4rem; }

/* 끼니 선택 버튼 (조식/중식/석식) */
.meal-type-group {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 4px;
}

.meal-type-group .btn {
    border: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: #94A3B8;
    padding: 6px 15px;
    border-radius: 10px;
}

.meal-type-group .btn.active {
    background: white;
    color: #6366F1;
}



.active-tab {
    background: white !important;
    border: 2px solid #6366F1 !important;
    color: #6366F1 !important;
    font-weight: 800;
}

.card-body p {
    line-height: 1.4;
    letter-spacing: -0.02rem;
}

/* 게시글 카드 호버 효과 */
.post-list .card {
    transition: transform 0.1s ease;
}
.post-list .card:active {
    transform: scale(0.98);
    background-color: #F1F5F9;
}



/* 가로 스크롤바 숨기기 */
.restaurant-selector::-webkit-scrollbar {
    display: none;
}


.day-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 뷰포트/스테이지 개념 삭제 */
.meal-container {
    width: 100%;
    /* padding: 10px 0 100px 0; /* 하단바에 가리지 않게 여백 */
}

/* 개별 식단 카드 스타일 (이미지 감성 재현) */
.meal-card {
    background: white;
    border-radius: 20px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
    /* 왼쪽의 굵은 강조선 (중식: 핑크, 조식: 노랑 등 구분 가능) */
    border-left: 6px solid #ff2d55 !important; 
}

/* 메뉴 태그 스타일 */
.menu-tag {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f8f9fa;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #444;
}

/* 인기 메뉴 강조 */
.menu-tag.popular {
    background-color: #fff0f3;
    color: #ff2d55;
    font-weight: bold;
}

/* 하단바 그림자 */
.fixed-bottom {
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
}


/* 부모 컨테이너에 기준점 설정 */
.meal-container {
    position: relative;
    overflow: hidden;
    min-height: 600px; /* 카드가 로딩될 때 높이가 0이 되지 않게 최소 높이 지정 */
}

/* 애니메이션 중인 리스트들의 공통 스타일 */
#mealList, .meal-list-clone {
    width: 100%;
    position: absolute; /* 두 요소를 같은 위치에 겹침 */
    top: 0;
    left: 0;
}

/* 실제 데이터가 담긴 리스트는 평소에 정적 배치로 (스크롤을 위해) */
#mealList:not(.slide-in):not(.slide-out) {
    position: relative;
}

/* 슬라이딩 효과를 위한 애니메이션 */
@keyframes slideToLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideFromRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideToRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes slideFromLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-out { animation: var(--out-anim) 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }
.slide-in { animation: var(--in-anim) 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); }