// 달력 calnedar
.calendar-wrap {
	.head-area {
		display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;
		.month-select {
			display: flex; gap: 30px; align-items: center;
			.month {
				font-size: 2.3rem; font-weight: 800;
			}
			.arrow {
				width: 30px; height: 30px;
				&.next {
					transform: rotate(180deg);
				}
				> img {
					width: 100%; height: 100%;
					&:active {
						transform: scale(0.94);
					}
				}
			}
		}
		.filter-toggle {
			display: flex; gap: 20px; align-items: center;
			.checkbox {
				display: flex; gap: 15px;
				.input-check {
					label {
						font-weight: 700; font-size: 1.4rem; position: relative;
					}
				}
			}
		}
        .toggle-buttons {
            display: inline-flex; border: 1px solid var(--theme); border-radius: 5px; overflow: hidden;	
            input[type=radio] {
                display: none;
            }
            label {
                padding: 7px 20px; cursor: pointer; text-align: center; box-sizing: border-box; color: var(--theme); font-weight: bold; transition: background-color 0.3s; font-size: 1.7rem;
                &:first-child {
                    border-right: 1px solid var(--theme);
                }
            }
            input[type=radio]:checked + label {
                background-color: var(--theme); color: white;
            }
        }
	}
	.calendar-area {
		.calendar {
            position: relative;
			.weekdays {
				display: flex; text-align: center; font-size: 1.3rem; font-weight: 500;
				.weekday {
					flex: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f5f5f5; padding: 5px 0;
				}
			}
			.dates {
                margin-top: 10px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); 
				.week {
                    position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 1.3rem;  border-bottom: 1px solid var(--line);
                }
				.date {
                    min-height: 150px; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-top: 0; border-left: 0; border-bottom: 0; background: #fff; padding: 5px 10px 10px; cursor: pointer; font-weight: 500;
					&:nth-child(7n+1) { /* Sunday */
						color: var(--red);
					}
					
					&:nth-child(7n) { /* Saturday */
						color: var(--theme);
					}
					&.disabled {
						cursor: default; background: #F8F8F8; 
						.dd {
							color: #ccc;
						}
					}
					&.today {
						.dd {
							background: var(--orange); color: #fff !important;
						}
					}
					// &:not(.disabled):not(.today):hover,
					// &.active {
					// 	background-color: #e8f2ff;
                    //     .dd {
                    //         color: var(--theme);
                    //     }
					// }
					.dd {
						position: relative; display: inline-block; width: 24px; line-height: 24px; text-align: center; border-radius: 50%;
					}
				}
				.schedule {
					padding-top: 2px; position: relative;
                    .type {
                        font-size: 1.3rem; font-weight: 800; display: block; padding-left: 10px; position: relative; white-space: nowrap; overflow: hidden;
                        &:hover {
                            opacity: .6;
                        }
						&:not(:first-child) {
							margin-top: 3px;
						}
                        &:after {
                            content: ''; width: 6px; height: 6px; border-radius: 50px; display: inline-block; position: absolute; top: 6px; left: 0;
                        }
						&.type-1 {
							&:after {
								background: #586FE5;
							}
						}
						&.type-2 {
							&:after {
								background: #27C149;
							}
						}
						&.type-3 {
							&:after {
								background: #D65B8F;
							}
						}
						&.type-4 {
							&:after {
								background: #FF7A00;
							}
						}
						&.type-5 {
							&:after {
								background: #14aabb;
							}
						}
						&.type-6 {
							&:after {
								background: #4a5ca1;
							}
						}
                    }
					&.multiple {
                        position: absolute; top: 30px; left: 3px; width: calc(100% - 6px); font-size: 1.3rem; font-weight: 800; 
                        .type {
                            padding-top: 3px; padding-bottom: 3px; padding-left: 15px;
                            &:after {
                                top: 9px; left: 5px;
                            }
                        }
                        .line {
                            display: block; background: #eee; box-sizing: border-box; margin: 2px 0;
                            &.line-1 { 
                                width: calc(((100% - 6px) / 7) - 5px);
                            }
                            &.line-2 { 
                                width: calc(((100% - 6px) / 7) * 2 - 2px);
                            }
                            &.line-3 { 
                                width: calc(((100% - 6px) / 7) * 3 - 3px);
                            }
                            &.line-4 { 
                                width: calc(((100% - 6px) / 7) * 4);
                            }
                            &.line-5 { 
                                width: calc(((100% - 6px) / 7) * 5 + 1px);
                            }
                            &.line-6 { 
                                width: calc(((100% - 6px) / 7) * 6 + 3px);
                            }
                            &.line-7 { 
                                width: calc(((100% - 6px) / 7) * 7 + 4px); // = 100%
                            }
                            &.type-1 {
                                background: #edf0ff;
                            }
                            &.type-2 {
                                background: #effff2;
                            }
                            &.type-3 {
                                background: #ffecf4;
                            }
                            &.type-4 {
                                background: #fff0e2;
                            }
                            &.type-5 {
                                background: #c9e4e7;
                            }
                            &.type-6 {
                                background: #e9e9e9;
                            }
                        }
					}
				}
			}
		}
		.schedule-detail {
            width: var(--list-width); position: relative;
			.head {
                font-size: 1.8rem; text-align: center; padding: 7px 0; font-weight: 600; background: var(--navy); color: #fff; border-radius: 7px 7px 0 0;
			}
			.list {
				.item {
					padding: 15px 10px; border-bottom: 1px solid var(--line);
					.label {
						font-size: 1.5rem; 
						.type {
							font-weight: 600;
						}
						.status {
							color: var(--theme); padding-left: 10px;
							&.end {
								color: #98A3AD;
							}
						}
					}
					.title {
						text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 1.9rem; font-weight: 600; width: 100%; display: block; padding-top: 3px;
						&:hover {
							text-decoration: underline;
						}
					}
                    .info {
                        span {
                            font-size: 1.5rem; color: #4E4E4E; line-height: 1;
                            &:not(:last-child) {
                                padding-right: 5px;
                            }
                            b {
                                padding-right: 2px;
                            }
                        }
                    }
				}
                .view-all {
                    text-align: center; padding: 15px 10px 0;
                    .view-all-btn {
                        display: block; width: 100%; padding: 6px 0; border-radius: 5px; font-size: 1.4rem; font-weight: 600; border: 1px solid #9da8b1; background: #fff;
                        &:hover {
                            box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
                        }
                    }
                }
			}
		}
	}
	.type-1 {
		color: #586FE5;
	}
	.type-2 {
		color: #27C149;
	}
	.type-3 {
		color: #D65B8F;
	}
	.type-4 {
		color: #FF7A00;
	}
    .type-5 {
        color: #14aabb;
	}
	.type-6 {
        color: #777;
	}

	.empty-area {
		padding: 50px 0;
	}
}


@media (max-width: 1400px) {
	.calendar-wrap {
		.calendar-area {
			.calendar {
				.dates {
					.date {
                        padding: 5px;
					}
				}
			}
		}
	}
}


@media (max-width: 1200px) {
	.calendar-wrap {
		.calendar-area {
			.schedule-detail {
				.list {
					.item {
						.label {
							font-size: 1.3rem;
						}
					}
				}
			}
		}
		.head-area {
			flex-direction: column; gap: 20px;
			.month-select {
				width: 100%; justify-content: space-between;
			}
			.filter-toggle {
				justify-content: space-between; width: 100%;
				.checkbox {
					.input-check {
						label {
							padding-right: 0;
							&:after {
								display: none;
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1024px) {
	.calendar-wrap {
		.calendar-area {
			flex-wrap: wrap;
			.calendar {
				width: 100%; padding-right: 0;
			}
			.schedule-detail {
				width: 100%; padding: 0; border: 0;
				.list {
					.item {
						background: #fff; padding: 15px 10px;
					}
				}

				&.empty {
					height: auto;
					.empty-area {
						background: #f1f1f1;
					}
				}
			}
		}
		.head-area {
			.filter-toggle {
				flex-direction: column;
				.checkbox {
					width: 100%; flex-wrap: wrap;
				}
			}
		}
	}
}

@media (max-width: 768px) {	
	.calendar-wrap {
		.calendar-area {
			.calendar {
				.weekdays {
					gap: 0;
					.weekday {
						width: 14.2%; border-right: 0; flex: unset;
						&:last-child {
							border-right: 1px solid var(--line);
						}
					}
				}
				.dates {
					font-size: 1rem; gap: 0; padding: 0;
					.week {
						grid-template-columns: repeat(7, minmax(0, 1fr));
					}
					.date {
						position: relative; min-height: 90px; min-width: 0; overflow: hidden; text-align: center;
						&:nth-child(7n) {
							border-right: 1px solid var(--line);
						}
						&.active {
							&:after {
								content: ''; width: 100%; height: 100%; border: 1px solid var(--theme); position: absolute; top: 0; left: 0; z-index: 1;
							}
						}
					}
				}
			}
		}
		.head-area {
            padding-bottom: 10px;
			.filter-toggle {
				.toggle-buttons {
                    width: 100%;
					label {
						padding: 7px 10px; flex: 1;
					}
				}
                .checkbox {
                    gap: 5px 15px;
                }
			}
		}
	}
}

@media (max-width: 475px) {
	.calendar-wrap {
		.calendar-area {
			.calendar {
				.dates {
					.week {
						grid-template-columns: repeat(7, minmax(0, 1fr));
					}
					.date {
						min-height: 60px; min-width: 0; overflow: hidden;
					}
                    .schedule {
                        letter-spacing: -1.5px;
                        .type {
                            font-size: 1.1rem;
                        }
                    }
				}
			}
            .schedule-detail {
                .head {
                    font-size: 1.6rem;
                }
                .list {
                    .item {
                        .info {
                            span {
                                display: block; line-height: 1.3; font-size: 1.2rem; margin-top: 5px;
                            }
                        }
                        .label {
                            .type {
                                font-size: 1.2rem; font-weight: 600;
                            }
                        }
                        .title {
                            font-size: 1.6rem;
                        }
                    }
                }
            }
		}
		.head-area {
			padding-bottom: 15px;
			.filter-toggle {
				flex-direction: column; gap: 15px;
				.checkbox {
					width: 100%; padding: 15px 20px; background: #f5f5f5; border-radius: 5px;
				}
				.toggle-buttons {
					label {
						font-size: 1.4rem;
					}
				}
			}
		}
	}
}