@charset "utf-8";

/* =========================
   Suifeel Floating Index
   Common Component
========================= */

.SfFloatingIndexBtn{
	position:fixed;
	right:16px;
	bottom:130px;
	z-index:9000;

	display:inline-flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:5px;

	width:70px;
	height:70px;
	padding:0;

	border-radius:50%;
	border:1px solid rgba(13,11,43,.08);
	background:rgba(255,255,255,.88);

	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);

	box-shadow:0 18px 46px rgba(13,11,43,.10);

	cursor:pointer;
	transition:.28s ease;
}

.SfFloatingIndexBtn:hover{
	transform:translateY(-3px);
	box-shadow:0 24px 58px rgba(13,11,43,.14);
}

.SfFloatingIndexCurrent{
	display:block;
	color:#7BAFCB;
	font-size:14px;
	line-height:1;
	font-weight:400;
	letter-spacing:.08em;
}

.SfFloatingIndexText{
	display:block;
	color:#0D0B2B;
	font-size:8.5px;
	line-height:1;
	font-weight:600;
	letter-spacing:.16em;
}

.SfFloatingIndexOverlay{
	position:fixed;
	inset:0;
	z-index:9001;

	background:rgba(13,11,43,.16);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);

	opacity:0;
	pointer-events:none;
	transition:opacity .32s ease;
}

body.is-sf-index-open .SfFloatingIndexOverlay{
	opacity:1;
	pointer-events:auto;
}

.SfFloatingIndexPanel{
	position:fixed;
	right:32px;
	bottom:40px;
	z-index:9002;

	width:min(420px, calc(100% - 64px));
	max-height:72vh;

	opacity:0;
	pointer-events:none;
	transform:translateY(22px);

	transition:
		opacity .32s ease,
		transform .32s ease;
}

body.is-sf-index-open .SfFloatingIndexPanel{
	opacity:1;
	pointer-events:auto;
	transform:translateY(0);
}

.SfFloatingIndexBox{
	padding:34px 34px 30px;
	border-radius:30px;
	background:rgba(255,255,255,.94);

	backdrop-filter:blur(22px);
	-webkit-backdrop-filter:blur(22px);

	box-shadow:0 28px 80px rgba(13,11,43,.18);
	box-sizing:border-box;
}

.SfFloatingIndexHead{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:20px;
	margin:0 0 16px;
}

.SfFloatingIndexKicker{
	margin:0 0 10px;
	font-size:10px;
	line-height:1;
	font-weight:600;
	letter-spacing:.22em;
	color:#7BAFCB;
}

.SfFloatingIndexTitle{
	margin:0;
	font-size:18px;
	line-height:1.55;
	font-weight:400;
	letter-spacing:.04em;
	color:#0D0B2B;
}

.SfFloatingIndexClose{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	border:none;
	background:transparent;
	padding:0;

	color:rgba(13,11,43,.42);
	font-size:9.5px;
	line-height:1;
	font-weight:600;
	letter-spacing:.18em;

	cursor:pointer;
}

.SfFloatingIndexList{
	max-height:52vh;
	overflow-y:auto;

	margin:0;
	padding:0;
	border-top:1px solid rgba(13,11,43,.07);
	list-style:none;
	counter-reset:sf-floating-index;
}

.SfFloatingIndexList li{
	margin:0;
	padding:0;
	border-bottom:1px solid rgba(13,11,43,.055);
	counter-increment:sf-floating-index;
}

.SfFloatingIndexList li:last-child{
	border-bottom:none;
}

.SfFloatingIndexList a{
	position:relative;
	display:block;
	padding:14px 0 14px 38px;

	color:rgba(13,11,43,.58);
	font-size:12.5px;
	line-height:1.85;
	font-weight:400;
	letter-spacing:.04em;
	text-decoration:none;

	transition:.25s ease;
}

.SfFloatingIndexList a::before{
	content:counter(sf-floating-index, decimal-leading-zero);
	position:absolute;
	left:0;
	top:19px;

	color:#7BAFCB;
	font-size:10px;
	line-height:1;
	font-weight:600;
	letter-spacing:.16em;
}

.SfFloatingIndexList a:hover,
.SfFloatingIndexList a.is-active{
	color:#0D0B2B;
	background:rgba(123,175,203,.035);
}

.SfFloatingIndexList a.is-active{
	font-weight:500;
}

.SfFloatingIndexList a.is-active::before{
	font-weight:700;
}

@media screen and (min-width:768px) and (max-width:1080px){

	.SfFloatingIndexBtn{
		right:12px;
		bottom:130px;
		width:64px;
		height:64px;
		gap:4px;
	}

	.SfFloatingIndexCurrent{
		font-size:13px;
	}

	.SfFloatingIndexText{
		font-size:8px;
		letter-spacing:.15em;
	}

	.SfFloatingIndexPanel{
		right:28px;
		bottom:36px;
		width:min(400px, calc(100% - 56px));
		max-height:70vh;
	}

	.SfFloatingIndexBox{
		padding:32px 32px 28px;
		border-radius:28px;
	}

}

@media screen and (max-width:767px){

	.SfFloatingIndexBtn{
		right: 13px;
    bottom: 75px;
    width: 62px;
    height: 62px;
	}

	.SfFloatingIndexCurrent{
		font-size:12px;
	}

	.SfFloatingIndexText{
		font-size:8px;
	}

	.SfFloatingIndexPanel{
		left:18px;
		right:18px;
		bottom:28px;
		width:auto;
		max-height:74vh;
	}

	.SfFloatingIndexBox{
		padding:28px 24px 24px;
		border-radius:26px;
	}

	.SfFloatingIndexTitle{
		font-size:17px;
	}

	.SfFloatingIndexList{
		max-height:54vh;
	}

	.SfFloatingIndexList a{
		font-size:12px;
		line-height:1.8;
		padding-top:13px;
		padding-bottom:13px;
	}
}