@charset "utf-8";

/* 퀵메뉴 — 마크업 template-parts/quick/quick-menu.php / 설정 inc/quick-menu.php */

/* 퀵메뉴 바깥 요소(.back-to-top, body)에서도 쓰므로 :root */
:root {
	--quick-bar-height-mo : 64px;
	--quick-btt-bottom-mo : 76px;
}

.quick-menu {
	--quick-size        : 80px;
	--quick-right       : 30px;
	--quick-bottom      : 105px;

	--quick-bar-width   : 80px;
	--quick-bar-bottom  : 40px;
	--quick-bar-pd-top  : 35px;
	--quick-bar-pd-btm  : 50px;

	--quick-item-gap    : 20px;
	--quick-item-gap-sm : 10px;   /* 아이콘 전용 */
	--quick-icon-size   : 32px;
	--quick-label-size  : 13px;
	--quick-label-color : #666;

	position: fixed;
	right: var(--quick-right);
	bottom: var(--quick-bottom);
	width: var(--quick-size);
	height: var(--quick-size);
	z-index: var(--one-z-quick, 250);

	visibility: hidden;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* 스크롤 200px 이상 (quick.js) */
.quick-menu.is-active {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}


/* ── 토글 버튼 ── */

/* 브라우저·부모 button 기본 스타일 제거 */
.quick-toggle {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	border-radius: 50%;
	/* 맨 위로 버튼과 같은 색 — --btt-bg 는 부모가 커스터마이저 값으로 :root 에 찍는다(버튼 off 면 미출력) */
	background: var(--btt-bg, var(--quick-color));
	background-image: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	z-index: 2;
}

.quick-toggle-txt {
	color: var(--btt-icon-color, #fff);   /* 맨 위로 버튼 아이콘색과 같은 값 */
	padding-bottom: 2px;
	line-height: 1;
}


/* ── 패널 ── */

.quick-bar {
	position: fixed;
	right: 0;
	bottom: var(--quick-bar-bottom);
	width: var(--quick-bar-width);
	border-radius: 100px 100px 0 0;
	background: #fff;
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.6s ease, visibility 0.6s ease;
	z-index: 1;
}

/* hover(PC) + 클릭·포커스(터치·키보드) */
.quick-menu:hover .quick-bar,
.quick-menu:focus-within .quick-bar,
.quick-menu.is-open .quick-bar {
	visibility: visible;
	opacity: 1;
}


/* ── 항목 (개수 가변) ── */

.quick-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--quick-item-gap);
	margin: 0;
	padding: var(--quick-bar-pd-top) 0 var(--quick-bar-pd-btm);
	list-style: none;
	text-align: center;

	/* 항목이 많으면 패널 안에서만 스크롤 */
	max-height: calc(100vh - var(--quick-bottom) - var(--quick-size) - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.quick-list::-webkit-scrollbar { width: 0; }

.quick-item { list-style: none; }

.quick-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 0;
	text-decoration: none;
}

.quick-icon {
	/* SVG 를 mask 로 찍고 바탕색으로 칠한다 — filter 는 CSS 변수 색을 못 받는다.
	   파일은 섹션이 --quick-icon 인라인 변수로 넘긴다. 비율이 제각각이라 정사각 칸에 contain */
	display: block;
	flex: 0 0 auto;
	width: var(--quick-icon-size);
	height: var(--quick-icon-size);
	background-color: var(--btt-icon-color, var(--quick-label-color));
	-webkit-mask: var(--quick-icon) no-repeat center / contain;
	mask: var(--quick-icon) no-repeat center / contain;
	transition: background-color 0.2s ease;
}

.quick-label {
	color: var(--quick-label-color);
	font-size: var(--quick-label-size);
	line-height: 1.3;
	word-break: keep-all;
	transition: color 0.2s ease;
}

.quick-link:hover .quick-icon,
.quick-link:focus-visible .quick-icon {
	background-color: var(--btt-bg, var(--quick-color));   /* hover = QUICK 버튼 배경색 */
}

.quick-link:hover .quick-label,
.quick-link:focus-visible .quick-label {
	color: var(--btt-bg, var(--quick-color));
}


/* ── 라벨 전체 off ── */

.quick-icon-only .quick-list {
	gap: var(--quick-item-gap-sm);
	padding-top: calc(var(--quick-bar-pd-top) - 5px);
}

.quick-icon-only .quick-link {
	gap: 0;
	padding: 10px 0;
}


/* ── 태블릿·모바일 — 하단 가로 바 ── */

@media all and (max-width: 1024px) {

	.quick-menu {
		right: 0;
		bottom: 0;
		width: 100%;
		height: auto;
	}

	.quick-toggle { display: none; }

	.quick-bar {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
		visibility: visible;
		opacity: 1;
	}

	.quick-list {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding: 9px 0;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}

	/* 개수 무관 균등 분할 */
	.quick-item {
		flex: 1 0 0;
		min-width: 64px;
	}

	.quick-link {
		height: 100%;
		padding: 2px 4px;
		gap: 4px;
	}

	.quick-menu { --quick-icon-size: 24px; }

	.quick-icon-only .quick-link { padding: 6px 4px; }

	/* 하단 바에 본문·맨위로 버튼이 가리지 않게 보정 */
	body.has-quick-menu { padding-bottom: var(--quick-bar-height-mo, 64px); }
	body.has-quick-menu .back-to-top { bottom: var(--quick-btt-bottom-mo, 76px); }
}

@media all and (max-width: 639px) {
	.quick-menu { --quick-label-size: 11px; --quick-icon-size: 22px; }

	.quick-item { min-width: 56px; }
}