/* LINE・Instagram への導線（salon.washoku.dev と同じ構成を青凜館の配色に合わせたもの） */

/* ---------- フッター ---------- */
.jk-sns-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	width: 100%;
}
@media (min-width: 768px) {
	.jk-sns-links { width: auto; margin: 0 0 0 auto; }
}
.jk-sns-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--jk-brand-ink);
	transition: color 0.18s;
}
.jk-sns-link:hover { color: var(--jk-accent-on-dark); }
.jk-sns-link svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* ---------- ドロワー ---------- */
.jk-sns-drawer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-top: 0.25rem;
}
.jk-sns-drawer .jk-btn { padding-inline: 0.75rem; }
.jk-sns-drawer svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* ---------- 左下の丸ボタン（1024px 未満だけ） ----------
   画面下の「電話で相談／無料体験」バーの高さ（--jk-cta-h、JS で計測）ぶん持ち上げる。
   丸いアイコンは何のボタンか一目で分かるよう公式の色を使う。 */
.jk-snsfloat {
	position: fixed;
	left: 0.875rem;
	bottom: calc(1rem + var(--jk-cta-h, 0px));
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	transition: bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
@media (min-width: 1024px) {
	.jk-snsfloat { display: none; }
}
/* ファーストビューでは出さない（少し下げてフェードアウト）。隠れている間はタップも読み上げも拾わない */
.jk-snsfloat.is-waiting {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0.75rem);
	transition: bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
}
/* 引っ込めた状態：タブだけ左端に残す */
.jk-snsfloat.is-collapsed { transform: translateX(calc(-100% - 1.5rem)); }
.jk-snsfloat.is-collapsed .jk-snsfloat__item { pointer-events: none; }
.jk-snsfloat__toggle {
	position: absolute;
	left: 100%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 3.25rem;
	margin-left: 0.375rem;
	padding: 0;
	border: 0;
	border-radius: 0.5rem;
	background: #fff;
	color: var(--jk-ink);
	box-shadow: 0 2px 10px rgb(23 35 58 / 0.18);
	transform: translateY(-50%);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: margin 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.jk-snsfloat__chevron { width: 1rem; height: 1rem; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.jk-snsfloat.is-collapsed .jk-snsfloat__toggle { margin-left: 0.625rem; border-radius: 0 0.5rem 0.5rem 0; }
.jk-snsfloat.is-collapsed .jk-snsfloat__chevron { transform: rotate(180deg); }
.jk-snsfloat__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.jk-snsfloat__label {
	position: relative;
	padding: 0.25rem 0.5rem;
	background: #fff;
	color: var(--jk-ink);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	white-space: nowrap;
	border-radius: 0.25rem;
	box-shadow: 0 2px 8px rgb(23 35 58 / 0.14);
}
.jk-snsfloat__label::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	margin-left: -0.25rem;
	border: 0.25rem solid transparent;
	border-top-color: #fff;
}
.jk-snsfloat__btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgb(23 35 58 / 0.22);
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.jk-snsfloat__item:active .jk-snsfloat__btn { transform: scale(0.94); }
.jk-snsfloat__btn svg { width: 1.5rem; height: 1.5rem; }
.jk-snsfloat__item--line .jk-snsfloat__btn svg { width: 1.875rem; height: 1.875rem; }
.jk-snsfloat__item--instagram .jk-snsfloat__btn {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.jk-snsfloat__item--line .jk-snsfloat__btn { background: #06c755; }

/* ドロワーを開いている間は隠す */
body.jk-drawer-open .jk-snsfloat { opacity: 0; pointer-events: none; }

/* ---------- デモ案内（URL 未設定のときだけ使う） ---------- */
.jk-sns-toast {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: calc(1rem + var(--jk-cta-h, 0px));
	z-index: 70;
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	background: var(--jk-ink);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.6;
	letter-spacing: 0.04em;
	box-shadow: var(--jk-shadow-lg);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) {
	.jk-sns-toast { right: auto; max-width: 26rem; }
}
.jk-sns-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.jk-snsfloat, .jk-snsfloat.is-waiting, .jk-snsfloat__toggle, .jk-snsfloat__chevron, .jk-sns-toast { transition: none; }
}