/* =========================================================
 * MO1 Floating Icons (우측 중앙 상시 플로팅)
 * ---------------------------------------------------------
 * - 외곽 컨테이너는 pointer-events: none → 본문 hover/click 통과
 * - 손잡이(grippy) 와 list 만 pointer-events: auto
 * - 손잡이 클릭 시 우측 바깥으로 슬라이드 인/아웃
 * ========================================================= */
.mo1-floating-icons {
	position: fixed;
	right: 12px;
	top: 50%;
	/* 헤더 햄버거(2147483647) 보다는 아래, 그 외 어떤 페이지 콘텐츠/플러그인보다도 위로.
	 * scrollsequence-pro 등 일부 플러그인이 매우 높은 z-index 를 쓰는 케이스 대응. */
	z-index: 2147483646;
	pointer-events: none;

	/* 손잡이 + list 가로 정렬 */
	display: flex;
	align-items: center;
	gap: 0;

	/* 표시 상태 transform: JS 가 측정한 bias 로 list 우측을 visible_right 에 정렬.
	 * --mo1fi-bias-x / --mo1fi-hide-x 는 JS 가 갱신.
	 * transition 은 mo1fi-ready 클래스 붙기 전엔 적용되지 않음 → 첫 페인트의 점프
	 * 가 transition 으로 보이지 않도록 (한 frame 안에서 새 위치로 그려짐).
	 *
	 * visibility:hidden 기본 — JS 가 sessionStorage 상태(열림/닫힘)를 복원할 때까지
	 * 사용자가 "잠깐 열린 채 다른 위치" 를 보지 않도록. mo1fi-ready 와 함께 visible.
	 */
	visibility: hidden;
	transform: translateY(-50%) translateX( var(--mo1fi-bias-x, 0px) );
}

.mo1-floating-icons.mo1fi-ready {
	visibility: visible;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 닫힘: list 폭 + bias 만큼 오른쪽으로 빠져나가서 grippy 가 visible_right 에 정렬. */
.mo1-floating-icons.is-closed {
	transform: translateY(-50%) translateX( var(--mo1fi-hide-x, 100px) );
}

/* ── 손잡이 버튼 ────────────────────────────────────────── */
.mo1-floating-icons__grippy {
	pointer-events: auto;
	width: 26px;
	height: 70px;
	margin: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.32);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-right: none;
	border-radius: 8px 0 0 8px;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s ease;
}
.mo1-floating-icons__grippy:hover {
	background: rgba(255, 255, 255, 0.45);
}
.mo1-floating-icons__grippy:focus { outline: none; }
.mo1-floating-icons__grippy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mo1-floating-icons__arrow {
	transition: transform 0.4s ease;
	display: block;
	/* 헤더의 로고/햄버거/글씨 그림자와 동일한 톤 — 흰 배경에서도 가독성 확보. */
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}
.mo1-floating-icons.is-closed .mo1-floating-icons__arrow {
	transform: rotate(180deg);
}

/* ── 라운드 사각형 (아이콘 묶음) ─────────────────────────── */
.mo1-floating-icons__list {
	pointer-events: auto;
	list-style: none;
	margin: 0;
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: rgba(255, 255, 255, 0.32);
	border-radius: 14px 0 0 14px;
}

.mo1-floating-icons__item {
	margin: 0;
	padding: 0;
	width: 60px;
}

.mo1-floating-icons__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-decoration: none;
	outline: none;
	color: #000;
}

.mo1-floating-icons__icon {
	display: block;
	width: 44px;
	height: 44px;
}

.mo1-floating-icons__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

.mo1-floating-icons__label {
	display: block;
	font-family: "Noto Serif KR", serif;
	font-weight: 200;
	font-size: 10px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-align: center;
	color: #000;
	word-break: keep-all;
	white-space: normal;
}

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mo1-floating-icons__list {
        gap: 11px;
        padding: 9px 7px;
        border-radius: 13px 0 0 13px;
    }
    .mo1-floating-icons__item {
        width: 56px;
    }
    .mo1-floating-icons__icon {
        width: 40px;
        height: 40px;
    }
    .mo1-floating-icons__label {
        font-size: 9.5px;
    }
}

@media (max-width: 600px) {
	.mo1-floating-icons__list {
		gap: 10px;
		padding: 8px 6px;
		border-radius: 12px 0 0 12px;
	}
	.mo1-floating-icons__item {
		width: 54px;
	}
	.mo1-floating-icons__icon {
		width: 38px;
		height: 38px;
	}
	.mo1-floating-icons__label {
		font-size: 9px;
	}
	.mo1-floating-icons__grippy {
		width: 22px;
		height: 60px;
	}
}