/* Side Social Links — 前台側邊列 */
.sslk {
	--sslk-s: var(--sslk-size, 48px);
	--sslk-edge: 0px;
	--sslk-ease: cubic-bezier(.2, .8, .2, 1);
	position: fixed;
	top: var(--sslk-top, 50%);
	z-index: var(--sslk-z, 9999);
	display: flex;
	flex-direction: column;
	transform: translateY(-50%);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	line-height: 1;
	pointer-events: none;
	-webkit-tap-highlight-color: transparent;
}
.sslk *,
.sslk *::before,
.sslk *::after { box-sizing: border-box; }

.sslk--right { right: var(--sslk-edge); align-items: flex-end; }
.sslk--left  { left: var(--sslk-edge);  align-items: flex-start; }

.sslk--rounded,
.sslk--circle { --sslk-edge: 14px; gap: 10px; align-items: center; }

.sslk-list {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	margin: 0;
	padding: 0;
	pointer-events: none;
}
.sslk--rounded .sslk-list,
.sslk--circle .sslk-list { gap: 10px; }

/* ── 按鈕共用 ───────────────────────── */
.sslk .sslk-item,
.sslk .sslk-toggle {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	text-decoration: none;
	pointer-events: auto;
	cursor: pointer;
}
.sslk-item::before,
.sslk-toggle::before,
.sslk-item::after,
.sslk-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
}
.sslk-item::before   { background: var(--bg, #1877f2); opacity: var(--sslk-op, 1); }
.sslk-toggle::before { background: var(--sslk-tbg, #3b6fb6); opacity: var(--sslk-op, 1); }
.sslk-item::after,
.sslk-toggle::after  { background: #fff; opacity: 0; transition: opacity .2s ease; }

.sslk .sslk-item:focus-visible,
.sslk .sslk-toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* ── 社群按鈕 ───────────────────────── */
.sslk .sslk-item {
	width: var(--sslk-s);
	height: var(--sslk-s);
	color: var(--fg, #fff);
	transition:
		width .3s var(--sslk-ease),
		translate .3s var(--sslk-ease),
		transform .5s var(--sslk-ease) calc(var(--i, 0) * 45ms),
		opacity .35s ease calc(var(--i, 0) * 45ms),
		visibility 0s linear 0s,
		border-radius .3s ease;
}
.sslk .sslk-item:hover,
.sslk .sslk-item:focus,
.sslk .sslk-item:visited { color: var(--fg, #fff); text-decoration: none; }

.sslk-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--sslk-s) * .44);
	height: calc(var(--sslk-s) * .44);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.sslk-icon svg,
.sslk-icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	box-shadow: none;
}
.sslk-icon img { object-fit: contain; border-radius: 0; }

/* ── 收合按鈕 ───────────────────────── */
.sslk .sslk-toggle {
	width: var(--sslk-s);
	height: calc(var(--sslk-s) * .72);
	min-height: 0;
	color: var(--sslk-tfg, #fff);
	font-size: 0;
	line-height: 1;
	box-shadow: none;
	text-transform: none;
	transition: border-radius .35s ease;
}
.sslk .sslk-toggle:hover,
.sslk .sslk-toggle:focus,
.sslk .sslk-toggle:active {
	background: transparent;
	color: var(--sslk-tfg, #fff);
}
.sslk--rounded .sslk-toggle,
.sslk--circle .sslk-toggle { width: calc(var(--sslk-s) * .72); }

.sslk-toggle svg {
	width: calc(var(--sslk-s) * .4);
	height: calc(var(--sslk-s) * .4);
	transition: transform .5s var(--sslk-ease);
}
.sslk--left .sslk-toggle svg,
.sslk--right.is-collapsed .sslk-toggle svg { transform: rotate(180deg); }
.sslk--left.is-collapsed .sslk-toggle svg  { transform: rotate(0deg); }

/* ── 形狀：連接式 ───────────────────── */
.sslk--stack.sslk--right .sslk-toggle { border-radius: var(--sslk-r) 0 0 0; }
.sslk--stack.sslk--left  .sslk-toggle { border-radius: 0 var(--sslk-r) 0 0; }
.sslk--stack.sslk--right.is-collapsed .sslk-toggle { border-radius: var(--sslk-r) 0 0 var(--sslk-r); }
.sslk--stack.sslk--left.is-collapsed  .sslk-toggle { border-radius: 0 var(--sslk-r) var(--sslk-r) 0; }

@media (min-width: 768px) {
	.sslk--stack.sslk--right .sslk-last-d { border-bottom-left-radius: var(--sslk-r); }
	.sslk--stack.sslk--left  .sslk-last-d { border-bottom-right-radius: var(--sslk-r); }
	.sslk--stack.sslk--right.sslk--no-toggle .sslk-first-d { border-top-left-radius: var(--sslk-r); }
	.sslk--stack.sslk--left.sslk--no-toggle  .sslk-first-d { border-top-right-radius: var(--sslk-r); }
}

/* ── 形狀：圓角方塊 / 圓形 ───────────── */
.sslk--rounded .sslk-item,
.sslk--rounded .sslk-toggle { border-radius: var(--sslk-r); }
.sslk--circle .sslk-item,
.sslk--circle .sslk-toggle { border-radius: 50%; }

/* ── 效果 ───────────────────────────── */
.sslk--shadow .sslk-item,
.sslk--shadow .sslk-toggle { box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .55), 0 2px 6px -2px rgba(15, 23, 42, .18); }

.sslk--glass .sslk-item,
.sslk--glass .sslk-toggle {
	-webkit-backdrop-filter: blur(12px) saturate(1.5);
	backdrop-filter: blur(12px) saturate(1.5);
}

.sslk--fx .sslk-item:hover::after,
.sslk--fx .sslk-toggle:hover::after { opacity: .16; }
.sslk--fx .sslk-item:hover .sslk-icon { transform: scale(1.14); }
.sslk--fx.sslk--stack .sslk-item:hover { width: calc(var(--sslk-s) + 8px); }
.sslk--fx.sslk--right:not(.sslk--stack) .sslk-item:hover { translate: -4px 0; }
.sslk--fx.sslk--left:not(.sslk--stack)  .sslk-item:hover { translate: 4px 0; }

/* ── 滑過文字提示 ───────────────────── */
.sslk-label {
	position: absolute;
	top: 50%;
	padding: 7px 11px;
	border-radius: 8px;
	background: rgba(17, 24, 39, .92);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .25s var(--sslk-ease), visibility 0s linear .25s;
}
.sslk-label::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	background: inherit;
	transform: translateY(-50%) rotate(45deg);
}
.sslk--right .sslk-label { right: calc(100% + 12px); transform: translate(6px, -50%); }
.sslk--left  .sslk-label { left: calc(100% + 12px);  transform: translate(-6px, -50%); }
.sslk--right .sslk-label::after { right: -3px; }
.sslk--left  .sslk-label::after { left: -3px; }

.sslk--labels .sslk-item:hover .sslk-label,
.sslk--labels .sslk-item:focus-visible .sslk-label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	transition-delay: 0s;
}

/* ── 收合狀態 ───────────────────────── */
.sslk.is-collapsed .sslk-item {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		width .3s var(--sslk-ease),
		transform .45s var(--sslk-ease) calc(var(--i, 0) * 35ms),
		opacity .3s ease calc(var(--i, 0) * 35ms),
		visibility 0s linear .7s,
		border-radius .3s ease;
}
.sslk--right.is-collapsed .sslk-item { transform: translateX(calc(100% + var(--sslk-edge) + 24px)); }
.sslk--left.is-collapsed  .sslk-item { transform: translateX(calc(-100% - var(--sslk-edge) - 24px)); }

.sslk--init,
.sslk--init * { transition: none !important; }

/* ── 手機 ───────────────────────────── */
@media (max-width: 767px) {
	.sslk { --sslk-s: var(--sslk-msize, 42px); }
	.sslk--rounded,
	.sslk--circle { --sslk-edge: 10px; }
	.sslk-hide-mobile { display: none !important; }

	.sslk--stack.sslk--right .sslk-last-m { border-bottom-left-radius: var(--sslk-r); }
	.sslk--stack.sslk--left  .sslk-last-m { border-bottom-right-radius: var(--sslk-r); }
	.sslk--stack.sslk--right.sslk--no-toggle .sslk-first-m { border-top-left-radius: var(--sslk-r); }
	.sslk--stack.sslk--left.sslk--no-toggle  .sslk-first-m { border-top-right-radius: var(--sslk-r); }
}
@media (min-width: 768px) {
	.sslk-hide-desktop { display: none !important; }
}
@media (hover: none) {
	.sslk-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sslk,
	.sslk * { transition-duration: .01ms !important; transition-delay: 0s !important; }
}
@media print {
	.sslk { display: none !important; }
}