#calendar-page {
	--Days:1;
	--BG:var(--White);
	--TC:var(--Kaizen);

	display: flex;
	flex-direction: column;
	gap:var(--10);

	.actions {
		display:flex;
		gap:var(--MainGap);
		align-items:center;

		.ar {
			display:flex;

			.btn {
				width:var(--39);
				height:var(--39);
				background:url("/images/arrow-gc.svg") center center/var(--12) no-repeat;
				padding:0;

				&.left {
					transform:rotate(180deg);
				}

				&:hover {
					background:var(--Black) url("/images/arrow-gc-w.svg") center center/var(--12) no-repeat;
				}

				&+.btn {
					border-left:0;
					width:var(--37);
				}
			}
		}

		.title {
			flex:1;
			text-align:center;
			margin:0;
			font-size:var(--24);
			line-height:normal;
		}
	}

	.container {
		display:flex;
		flex-direction:column;
		border:1px solid var(--LGray);

		.days {
			display:flex;

			.day {
				flex:1;
				text-align:center;
				padding:var(--5) 0;
				font-size:var(--16);
				cursor:default;

				&.we {
					color:var(--Kaizen);
				}

				&+.day {
					border-left:1px solid var(--LGray);
				}
			}
		}

		.dates {
			display:flex;
			flex-wrap:wrap;

			.date {
				flex:0 0 calc(100%/7);
				width:calc(100%/7);
				border-top:1px solid var(--LGray);
				display:flex;
				flex-direction:column;

				.dt {
					text-align:center;
					padding:var(--5) var(--10);
					font-size:var(--14);
					cursor:default;
				}

				&+.date {
					border-left:1px solid var(--LGray);
				}

				&.we {
					.dt {
						color:var(--Kaizen);
					}
				}

				&.om {
					.dt {
						color:var(--LGray);
					}
				}

				&:nth-child(7n + 1) {
					border-left:0;
				}

				.list {
					display:flex;
					flex-direction:column;
					gap:var(--5);
					padding:var(--5) var(--10);
					min-height:var(--50);

					.event {
						display:inline-block;
						width:calc((100% + var(--10)*2)*var(--Days) - var(--10)*2);
						position:relative;
						z-index:1;

						&.e {
							pointer-events:none;
							opacity:0;
							visibility:hidden;
						}

						&>.title {
							width:100%;
							font-size:var(--14);
							color:var(--TC);
							white-space:nowrap;
							overflow:hidden;
							text-overflow:ellipsis;
							cursor:pointer;
							background:var(--BG);
							border:1px solid var(--TC);
							padding:var(--4) var(--5) var(--2);

							border-radius:var(--5);
						}

						&:hover,
						&.hover {
							&>.title {
								filter:contrast(1.25) brightness(1.25);
							}
						}

						&:hover {
							z-index:2;

							.details {
								opacity:1;
								visibility:visible;
								z-index:3;
							}
						}

						.details {
							position:absolute;
							background:var(--White);
							padding:var(--20);
							border-radius:var(--10);
							box-shadow:0 0 var(--20) rgba(0,0,0,.25);
							display:flex;
							flex-direction:column;
							gap:var(--7);
							width:200%;
							transition:all .25s ease;
							opacity:0;
							z-index:-1;
							visibility:hidden;

							.title {
								font-size:var(--22);
								line-height:var(--28);
								padding-left:var(--30);
								position:relative;

								&:before {
									content:"";
									position:absolute;
									left:0;
									top:0;
									width:var(--20);
									height:var(--20);
									border-radius:var(--5);
									background:var(--BG);
								}
							}

							.place,
							.description {
								font-size:var(--14);
								line-height:var(--20);
								white-space:pre-wrap;
								padding-left:var(--30);
								position:relative;

								&:before {
									content:"";
									position:absolute;
									left:0;
									top:var(---3);
									width:var(--20);
									height:var(--20);
									background:url("/images/c-address.svg") center center/var(--14) no-repeat;
								}

								&:is(.description):before {
									background:url("/images/sec-file.svg") center center/var(--16) no-repeat;
								}
							}

							.date {
								font-size:var(--14);
								line-height:var(--18);
								flex:none;
								width:100%;
								border:0;
								padding-left:var(--30);
								position:relative;

								&:before {
									content:"";
									position:absolute;
									left:0;
									top:var(---3);
									width:var(--20);
									height:var(--20);
									background:url("/images/c-schedule.svg") center center/var(--18) no-repeat;
								}
							}

							.actions {
								display:flex;
								gap:var(--MainGap);
								margin-top:var(--5);

								a {
									color:var(--Kaizen);
									font-size:var(--16);
									text-decoration:none;
									font-weight:500;

									&:hover {
										text-decoration:underline;
									}
								}
							}
						}
					}
				}

				&.r {
					.list {
						&>.event {
							&>.details {
								right:100%;
							}
						}
					}
				}
				&.l {
					.list {
						&>.event {
							&>.details {
								left:100%;
							}
						}
					}
				}
				&.t {
					.list {
						&>.event {
							&>.details {
								top:100%;
							}
						}
					}
				}
				&.b {
					.list {
						&>.event {
							&>.details {
								bottom:100%;
							}
						}
					}
				}
				&.m {
					.list {
						&>.event {
							&>.details {
								top:50%;
								transform:translateY(-50%);
							}
						}
					}
				}
				&.l.b,
				&.r.b {
					.list {
						&>.event {
							&>.details {
								bottom:0;
							}
						}
					}
				}
				&.l.t,
				&.r.t {
					.list {
						&>.event {
							&>.details {
								top:0;
							}
						}
					}
				}
			}
		}
	}
}