@charset "utf-8";
/* ==========================================================================
   사이트 퀵메뉴 (/include/site_quick.jsp)
   PC   : 우측 세로 플로팅 / 모바일 : 하단 고정 바
   컬러 : 로고 포인트 컬러(/css/theme.css) 기준 — 블루 #3062C3 / 그린 #5F94E0
   ========================================================================== */

:root {
	--quick-brand: var(--point-main, #3062C3);
	--quick-brand-dark: var(--point-sub, #5F94E0);
	/* 버튼 채움 : 페일 블루 + 짙은 블루 글자 (theme.css --point-pale 계열) */
	--quick-btn-bg: var(--point-pale, #E3EAF7);
	--quick-btn-bg-hover: var(--point-pale-hover, #D3E0F3);
	--quick-btn-line: var(--point-pale-line, #C3D4EE);
	--quick-btn-fg: var(--point-on-pale, #2B5199);
	--quick-ink: #444e57;
	--quick-line: rgba(68,78,87,.10);
}

#site_quick {
	position: fixed;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	/* 서브 페이지의 sticky 2뎁스 탭(z-index 90) 위 · 헤더(100) 아래 */
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

/* ===== 퀵 리스트 카드 ===== */
#site_quick .quick_list {
	margin: 0;
	padding: 8px;
	list-style: none;
	background: rgba(255,255,255,.82);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 1px solid rgba(255,255,255,.7);
	border-radius: var(--radius, 10px);
	box-shadow: 0 10px 30px rgba(28,44,56,.16);
}
#site_quick .quick_item + .quick_item { margin-top: 4px; }

#site_quick .quick_item > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 92px;
	padding: 17px 8px 15px;
	border-radius: var(--radius-sm, 6px);
	color: var(--quick-ink);
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
#site_quick .quick_item > a .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(48,98,195,.10);
	color: var(--quick-brand);
	font-size: 18px;
	transition: background-color .25s ease, color .25s ease;
}
#site_quick .quick_item > a .txt {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}
#site_quick .quick_item > a:hover {
	background: var(--quick-btn-bg);
	color: var(--quick-btn-fg);
	transform: translateY(-1px);
}
#site_quick .quick_item > a:hover .ico {
	background: rgba(43,81,153,.12);
	color: var(--quick-btn-fg);
}

/* 대표 CTA(온라인 예약) 강조 */
#site_quick .quick_item.primary > a {
	border: 1px solid var(--quick-btn-line);
	background: var(--quick-btn-bg);
	color: var(--quick-btn-fg);
	box-shadow: 0 6px 16px rgba(12,30,66,.16);
}
#site_quick .quick_item.primary > a .ico {
	background: rgba(43,81,153,.12);
	color: var(--quick-btn-fg);
}
#site_quick .quick_item.primary > a:hover { background: var(--quick-btn-bg-hover); }
#site_quick .quick_item.primary > a:hover { transform: translateY(-2px); }

/* ===== TOP 버튼 ===== */
#site_quick .quick_top {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 60px;
	height: 60px;
	margin-right: 20px;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	border: 1px solid var(--quick-line);
	box-shadow: 0 8px 20px rgba(28,44,56,.14);
	color: var(--quick-ink);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background-color .25s ease, color .25s ease;
}
#site_quick .quick_top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#site_quick .quick_top .ico { font-size: 15px; line-height: 1; }
#site_quick .quick_top .txt { font-family: 'S-Core Dream', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
#site_quick .quick_top:hover { background: var(--quick-ink); color: #fff; }

/* ==========================================================================
   모바일 : 하단 고정 바
   ========================================================================== */
@media all and (max-width:768px){
	/* 하단 고정 바가 페이지 끝 컨텐츠를 가리지 않도록 여백 확보 */
	body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

	#site_quick {
		right: 0;
		left: 0;
		top: auto;
		bottom: 0;
		transform: none;
		display: block;
	}
	#site_quick .quick_list {
		display: flex;
		margin: 0;
		padding: 0;
		padding-bottom: env(safe-area-inset-bottom);
		background: rgba(255,255,255,.95);
		border: 0;
		border-top: 1px solid var(--quick-line);
		border-radius: 0;
		box-shadow: 0 -4px 18px rgba(28,44,56,.12);
	}
	#site_quick .quick_item { flex: 1 1 0; }
	#site_quick .quick_item + .quick_item { margin-top: 0; border-left: 1px solid var(--quick-line); }
	#site_quick .quick_item > a {
		width: auto;
		padding: 9px 4px 8px;
		border-radius: 0;
		gap: 3px;
	}
	#site_quick .quick_item > a .ico { width: 26px; height: 26px; font-size: 13px; }
	#site_quick .quick_item > a .txt { font-size: 12px; }
	#site_quick .quick_item.primary > a { box-shadow: none; }

	/* 하단 바 위에 뜨는 원형 TOP */
	#site_quick .quick_top {
		position: fixed;
		right: 14px;
		bottom: calc(74px + env(safe-area-inset-bottom));
		width: 44px;
		height: 44px;
		margin: 0;
	}
	#site_quick .quick_top .txt { display: none; }
	#site_quick .quick_top .ico { font-size: 15px; }
}