/**
 * rink.css — 13.Seohyeon 링크장 페이지 v5.0
 * 위치: /var/www/test_seohyeon/public/assets/css/rink.css
 * 수정이력:
 *   2026-03-12 v5.0 — 전면 재설계
 *     - PC: 지도(좌) + 목록(우) 2단, 필터는 지도 상단 오버레이
 *     - 카운트 박스: 지도 우하단 카드형
 *     - 카드: 2번 캡처 스타일 (아이콘 원형 + 깔끔한 리스트)
 *     - 목록만 스크롤
 */

/* ══════════════════════════════════════════════
   공통 — design_preview 변수 연동
══════════════════════════════════════════════ */
.page-body:has(.rink-page) {
	max-width: none !important;
}
/* footer: PC에서만 숨김 (모바일은 bottom-tabbar가 있으므로 해당 없음) */
@media (min-width: 768px) {
	body:has(.rink-page) footer,
	body:has(.rink-page) .site-footer,
	body:has(.rink-page) .page-footer {
		display: none !important;
	}
}


/* ══════════════════════════════════════════════
   드롭다운 공통 (PC + 모바일 전역)
══════════════════════════════════════════════ */
.rink-fdd { position: relative; }

.rink-fdd-panel {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 140px;
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(30,167,255,.18);
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(14,50,91,.14);
	padding: 6px 4px;
	z-index: 200;
	flex-direction: column;
}
[data-theme="dark"] .rink-fdd-panel {
	background: rgba(9,19,33,.97);
	border-color: rgba(52,180,255,.22);
	box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.rink-fdd.is-open .rink-fdd-panel { display: flex; }

.rink-fdd-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text, #10233a);
	cursor: pointer;
	border-radius: 8px;
	white-space: nowrap;
	transition: background .12s;
}
.rink-fdd-item:hover { background: rgba(30,167,255,.08); }
[data-theme="dark"] .rink-fdd-item { color: #c5d8ea; }
[data-theme="dark"] .rink-fdd-item:hover { background: rgba(30,167,255,.14); }
.rink-fdd-item input { accent-color: var(--blade); cursor: pointer; }

/* ── 드롭다운 버튼 (PC + 모바일 공통) ── */
.rink-fdd-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1.5px solid rgba(255,255,255,.55);
	background: rgba(255,255,255,.92);
	color: #334155;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 8px rgba(0,0,0,.14);
	transition: all .16s ease;
	line-height: 1;
}
[data-theme="dark"] .rink-fdd-btn {
	background: rgba(10,20,40,.88);
	border-color: rgba(56,189,248,.25);
	color: #94a3b8;
}
.rink-fdd-btn:hover,
.rink-fdd.is-open .rink-fdd-btn {
	background: #fff;
	border-color: var(--blade);
	color: var(--blade);
}
[data-theme="dark"] .rink-fdd-btn:hover,
[data-theme="dark"] .rink-fdd.is-open .rink-fdd-btn {
	background: rgba(30,167,255,.15);
	color: var(--blade);
}
.rink-fdd-btn.is-active {
	background: var(--blade);
	border-color: var(--blade);
	color: #fff;
	box-shadow: 0 2px 10px rgba(30,167,255,.35);
}
.rink-fdd-btn i { font-size: 10px; }
.rink-fdd-arrow {
	font-size: 9px !important;
	opacity: .65;
	margin-left: 6px;   /* 텍스트와 간격 */
	transition: transform .18s ease;
}
.rink-fdd.is-open .rink-fdd-arrow { transform: rotate(180deg); }

/* ══════════════════════════════════════════════
   PC 레이아웃 (768px+)
══════════════════════════════════════════════ */
@media (min-width: 768px) {

	.page-body:has(.rink-page) {
		padding: 10px !important;
		overflow: hidden;
	}

	/* ─── 가장 바깥 래퍼: arena 레이어드 배경 ─── */
	.rink-page {
		display: flex;
		gap: 16px;
		height: calc(100dvh - 58px - 20px); /* 헤더(58px) + page-body 상하패딩(10px*2) */
		min-height: 400px;
		overflow: hidden;
		position: relative;
		border-radius: var(--radius-xl, 28px);
		border: 1px solid var(--line, rgba(64,128,191,.14));
		padding: 10px;

		/* 레이어 1: 아이스링크 질감 배경 */
		background:
			linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01)),
			linear-gradient(135deg,
				color-mix(in srgb, var(--surface-alt, rgba(223,240,255,.48)) 92%, transparent),
				color-mix(in srgb, var(--surface, rgba(255,255,255,.74)) 70%, transparent)
			);
		box-shadow: var(--card-shadow, 0 18px 40px rgba(37,83,121,.08));
	}

	/* 레이어 2: 아이스링크 센터라인 + 원 오버레이 */
	.rink-page::before {
		content: "";
		position: absolute;
		top: 20px; bottom: 20px; left: 20px;
		right: calc(360px + 16px + 16px); /* 리스트패널(360) + gap(16) + 우측여백(16) */
		border-radius: calc(var(--radius-xl, 28px) - 4px);
		pointer-events: none;
		z-index: 0;
		background:
			radial-gradient(circle at 50% 50%, rgba(46,167,255,.06), transparent 44%),
			linear-gradient(90deg,
				transparent 49.4%,
				rgba(255,122,61,.22) 49.4%,
				rgba(255,122,61,.22) 50.6%,
				transparent 50.6%
			),
			linear-gradient(180deg,
				transparent 49.4%,
				rgba(46,167,255,.14) 49.4%,
				rgba(46,167,255,.14) 50.6%,
				transparent 50.6%
			);
		border: 1px solid rgba(255,255,255,.10);
	}

	/* 레이어 3: 상단 하이라이트 라인 (링크 라인) */
	.rink-page::after {
		content: "";
		position: absolute;
		left: 60px;
		right: calc(360px + 16px + 16px + 40px); /* 리스트패널 영역 제외 */
		top: 56px;
		height: 2px;
		pointer-events: none;
		z-index: 0;
		background: linear-gradient(90deg, rgba(46,167,255,.7), rgba(255,255,255,.2) 62%, transparent);
		filter: drop-shadow(0 0 8px rgba(46,167,255,.18));
	}

	/* 지도/목록은 z-index:1 로 레이어 위에 */
	.rink-layout,
	.rink-side-col {
		position: relative;
		z-index: 1;
	}

	/* ─── 지도 래퍼: glass card ─── */
	.rink-layout {
		flex: 1;
		min-width: 0;
		height: 100%;
		overflow: hidden;
		border-radius: var(--radius-lg, 20px);
		border: 1px solid var(--line, rgba(64,128,191,.14));
		box-shadow: var(--glow, 0 0 0 1px rgba(46,167,255,.06), 0 18px 40px rgba(37,83,121,.08));
	}
	.rink-map-wrap {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	#rink-map {
		width: 100%;
		flex: 1;
		min-height: 0;
		display: block;
	}

	/* ─── 필터 오버레이: 지도 상단 ─── */
	.rink-filter-overlay {
		position: absolute;
		top: 14px;
		left: 14px;
		right: 14px;
		z-index: 20;
		display: flex;
		align-items: center;
		gap: 6px;
		pointer-events: none;
		flex-wrap: nowrap;
		overflow: visible;
	}
	.rink-filter-overlay > * { pointer-events: auto; flex-shrink: 0; }



	/* ─── 카운트 박스: 지도 좌하단 glass ─── */
	.rink-map-count-box {
		position: absolute;
		bottom: 15px;
		left: 10px;
		z-index: 10;
		background: color-mix(in srgb, var(--surface-strong, rgba(255,255,255,.9)) 92%, transparent);
		backdrop-filter: var(--glass, blur(18px) saturate(140%));
		-webkit-backdrop-filter: var(--glass, blur(18px) saturate(140%));
		border-radius: 14px;
		padding: 10px 16px;
		border: 1px solid var(--line, rgba(64,128,191,.14));
		box-shadow: var(--card-shadow, 0 18px 40px rgba(37,83,121,.08));
		pointer-events: none;
		min-width: 130px;
	}

	/* ─── PC 내 위치 버튼: 지도 우하단 absolute ─── */
	.rink-myloc-fixed {
		position: absolute !important;
		bottom: 15px;
		right: 14px;
		z-index: 10;
	}
	.rink-map-count-box .rink-count {
		font-size: 13px;
		font-weight: 700;
		color: var(--text, #10233a);
		margin: 0;
		display: block;
	}
	.rink-map-count-box .rink-count strong { color: var(--primary, #2ea7ff); }
	.rink-map-count-box .rink-count-sub {
		font-size: 11px;
		color: var(--text-2, #5c7389);
		display: block;
		margin-top: 2px;
	}

	/* ─── 우측 목록 패널: glass card ─── */
	.rink-side-col {
		width: 400px;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		background: color-mix(in srgb, var(--surface, rgba(255,255,255,.74)) 68%, transparent);
		backdrop-filter: var(--glass, blur(18px) saturate(140%));
		-webkit-backdrop-filter: var(--glass, blur(18px) saturate(140%));
		border-radius: var(--radius-lg, 20px);
		border: 1px solid var(--line, rgba(64,128,191,.14));
		box-shadow: var(--glow, 0 0 0 1px rgba(46,167,255,.06), 0 18px 40px rgba(37,83,121,.08));
		overflow: clip;
	}
	/* 상단 accent line */
	.rink-side-col::before {
		content: "";
		display: block;
		flex-shrink: 0;
		height: 1px;
		background: linear-gradient(90deg, rgba(46,167,255,.65), rgba(255,255,255,.15) 55%, transparent);
	}

	/* PC: 목록 헤더 숨김 */
	.rink-side-col .rink-panel-head { display: none; }

	/* 목록만 스크롤 */
	.rink-side {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overflow-x: visible;
		background: radial-gradient(circle at -20% 100%, rgba(255,122,61,.12), transparent 58%)
	}
	.rink-side::-webkit-scrollbar { width: 3px; }
	.rink-side::-webkit-scrollbar-thumb {
		background: var(--line, rgba(64,128,191,.14));
		border-radius: 2px;
	}

	/* 모바일 전용 숨기기 */
	.rink-mob-card-panel       { display: none !important; }
	.rink-filter-overlay-mob   { display: none !important; }
	.rink-myloc-fixed--mob     { display: none !important; }
	.rink-map-count-box--mob   { display: none !important; }
	/* PC 패널 카운트 헤더: 제거됨(HTML에서 삭제), CSS도 명시적으로 숨김 처리 */
	.rink-side-col .rink-panel-head { display: none !important; }
}


/* ══════════════════════════════════════════════
   필터 칩 (지도 위)
══════════════════════════════════════════════ */
.rink-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1.5px solid rgba(255,255,255,.55);
	background: rgba(255,255,255,.9);
	color: #334155;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: all .16s ease;
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 8px rgba(0,0,0,.14);
	line-height: 1;
}
[data-theme="dark"] .rink-filter-chip {
	background: rgba(10,20,40,.88);
	border-color: rgba(56,189,248,.25);
	color: #94a3b8;
}
.rink-filter-chip:hover {
	background: #fff;
	border-color: var(--blade);
	color: var(--blade);
}
[data-theme="dark"] .rink-filter-chip:hover {
	background: rgba(30,167,255,.15);
	color: var(--blade);
}
.rink-filter-chip.is-active {
	background: var(--blade);
	border-color: var(--blade);
	color: #fff;
	box-shadow: 0 2px 10px rgba(30,167,255,.35);
}
.rink-filter-chip i { font-size: 10px; opacity: .85; }

.rink-myloc-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--blade);
	background: rgba(255,255,255,.92);
	color: var(--blade);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: all .16s ease;
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 8px rgba(30,167,255,.18);
	line-height: 1;
}
[data-theme="dark"] .rink-myloc-chip {
	background: rgba(10,20,40,.88);
}
.rink-myloc-chip:hover,
.rink-myloc-chip.is-active {
	background: var(--blade);
	color: #fff;
	box-shadow: 0 2px 12px rgba(30,167,255,.38);
}


/* ══════════════════════════════════════════════
   카드 리스트 — glass card형
   목록 전체 패널(glass) 안에 각 카드도 glass
══════════════════════════════════════════════ */
.rink-list {
	list-style: none;
	padding: 10px 10px 20px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* 각 링크장 카드 */
.rink-card {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 10px;
	cursor: pointer;
	border-radius: 14px;
	position: relative;
	background: rgba(255, 255, 255, 0.55);
	border: 1.5px solid rgba(200, 210, 220, 0.7);
	transition:
		background .2s ease,
		border-color .2s ease,
		box-shadow .2s ease,
		transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

/* 코너 장식 숨김 */
.rink-card-corner-tl,
.rink-card-corner-br,
.rink-card-edge-top,
.rink-card-edge-bottom {
	display: none;
}

/* 카드 내용 z-index */
.rink-card-img-wrap,
.rink-card-body {
	position: relative;
	z-index: 1;
}

/* ── 호버: 올라가기 + 그림자 + 배경 + 테두리 ── */
.rink-card:hover {
	background: rgba(220, 240, 255, 0.92);
	border-color: rgba(46, 167, 255, 0.5);
	box-shadow:
		0 8px 24px rgba(37, 83, 121, 0.15),
		0 2px 8px rgba(46, 167, 255, 0.12);
	transform: translateY(-3px);
}

/* 스크롤 포커스 — 목록 최상단 활성 카드 */
.rink-card.is-focused {
	border-color: rgba(46, 167, 255, 0.75);
	box-shadow:
		0 0 0 2px rgba(46, 167, 255, 0.18),
		0 4px 16px rgba(37, 83, 121, 0.14);
	transition: border-color .2s ease, box-shadow .2s ease;
}
[data-theme="dark"] .rink-card.is-focused {
	border-color: rgba(46, 167, 255, 0.65);
	box-shadow:
		0 0 0 2px rgba(46, 167, 255, 0.22),
		0 4px 20px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .rink-card {
	background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01)),
				linear-gradient(35deg,	color-mix(in srgb, var(--surface-alt, rgba(223,240,255,.48)) 52%, transparent),
				color-mix(in srgb, var(--surface, rgba(255,255,255,.74)) 70%, transparent)
				);
	border-color: rgba(108, 154, 201, 0.22);
}
[data-theme="dark"] .rink-card:hover {
	background: linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.01)),
				linear-gradient(210deg,	color-mix(in srgb, var(--surface-alt, rgba(107,102,255,.48)) 62%, transparent),
				color-mix(in srgb, var(--surface, rgba(255,255,255,.74)) 70%, transparent)
				);
	border-color: rgba(46, 167, 255, 0.45);
	box-shadow:
		0 8px 28px rgba(0, 0, 0, 0.32),
		0 2px 8px rgba(46, 167, 255, 0.15);
	transform: translateY(-3px);
}

/* 아이콘/이미지 영역: 원형 박스 */
.rink-card-img-wrap {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	border-radius: 14px;
	overflow: hidden;
	background: #daeef8;
}
[data-theme="dark"] .rink-card-img-wrap {
	background: #0a1e32;
}
.rink-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 이미지 없을 때 — 아이콘 중앙 */
.rink-card-img--empty {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #5aade0;
}
[data-theme="dark"] .rink-card-img--empty {
	color: #3fa8d8;
}

/* 우측 텍스트 영역 */
.rink-card-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* 1행: 이름(좌) + 찜(우) */
.rink-card-row1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}
.rink-card-name {
	font-size: 16px;
	font-weight: 900;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	flex: 1;
	min-width: 0;
	line-height: 1.3;
}

.rink-fav-btn {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 15px;
	color: var(--muted);
	transition: color .15s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.rink-fav-btn:hover { transform: scale(1.3); color: #ef4444; }
.rink-fav-btn.is-fav { color: #ef4444; }

/* 2행: 주소 */
.rink-card-addr {
	font-size: 13px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	line-height: 1.4;
	padding-left: 5px;
}

/* 3행: 전화 (숨김, 공간절약) */
.rink-card-phone {
	font-size: 13px;
	color: var(--text-2, #5c7389);
	margin: 1px 0 0;
	display: flex;
	align-items: center;
	gap: 4px;
	padding-left: 5px;
}

/* 4행: 거리(좌) + 태그(우) */
.rink-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	margin-top: 0px;
	padding-left: 5px;
}
.rink-card-dist {
	font-size: 14px;
	font-weight: 700;
	color: var(--primary, #2ea7ff);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.rink-card-dist i { font-size: 10px; opacity: .8; }

/* 태그 묶음 우측 */
.rink-card-tags {
	display: flex;
	align-items: center;
	gap: 4px;
}
.rink-card-tag {
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--chip-bg, rgba(46,167,255,.08));
	color: var(--primary, #2ea7ff);
	border: 1px solid var(--line, rgba(64,128,191,.14));
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.6;
}
.rink-card-tag--inline {
	background: color-mix(in srgb, var(--surface-alt, rgba(223,240,255,.48)) 80%, transparent);
	border-color: var(--line, rgba(64,128,191,.14));
	color: var(--text-2, #5c7389);
}

/* 로딩/빈 */
.rink-list-empty,
.rink-list-loading {
	padding: 48px 20px;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
	list-style: none;
}
.rink-list-loading { font-size: 24px; color: var(--blade); }


/* ══════════════════════════════════════════════
   모바일 레이아웃 (767px 이하)
══════════════════════════════════════════════ */
@media (max-width: 767px) {

	.page-body:has(.rink-page) {
		padding: 0 !important;
	}

	.rink-page {
		display: flex;
		flex-direction: column;
		height: calc(100dvh - 52px - 64px);
		overflow: hidden;
	}
	/* 모바일에서는 PC 지도 크게보기 버튼 숨김 */
	#rink-map-expand {
		display: none !important;
	}

	.rink-layout { display: contents; }

	.rink-map-wrap {
		flex-shrink: 0;
		height: 230px;
		width: 100%;
		position: relative;
		overflow: hidden;
		transition: height .35s cubic-bezier(.4,0,.2,1);
	}
	/* 목록 접힘 상태: 지도가 전체 차지 */
	.rink-page.is-map-expand .rink-map-wrap {
		height: calc(100% - 45px); /* 핸들 높이만 남김 */
	}
	#rink-map {
		width: 100%;
		height: 100%;
		display: block;
		overflow: hidden;
		border-radius: 0;
		position: relative;
		z-index: 0;
	}

	/* 모바일 필터: position:fixed로 카카오맵/overflow:hidden 모두 통과
	   overflow는 visible로 강제 — 드롭다운 패널이 잘리지 않도록 */
	.rink-filter-overlay-mob {
		position: fixed;
		top: 62px;
		left: 10px;
		right: 10px;
		z-index: 100;
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: nowrap;
		overflow: visible !important;
		scrollbar-width: none;
		pointer-events: none;
	}
	.rink-filter-overlay-mob::-webkit-scrollbar { display: none; }
	.rink-filter-overlay-mob > * { pointer-events: auto; flex-shrink: 0; }
	/* 각 rink-fdd 컨테이너도 overflow visible 유지 */
	.rink-filter-overlay-mob .rink-fdd {
		position: relative;
		overflow: visible;
	}

	/* 모바일 드롭다운 버튼 소형 */
	.rink-fdd-btn--mob {
		padding: 6px 10px !important;
		font-size: 12px !important;
		gap: 0 !important;
	}
	/* 모바일 필터 왼쪽 아이콘만 숨김 */
	.rink-fdd-btn--mob > i:not(.rink-fdd-arrow) {
		display: none !important;
	}
	/* 모바일 드롭다운 패널 */
	.rink-fdd-panel--mob {
		top: calc(100% + 6px) !important;
		bottom: auto !important;
		max-height: 220px;
		overflow-y: auto;
		z-index: 150 !important;
	}


	/* 모바일 크게보기 버튼: 필터 우측 inline 배치 */
	#rink-map-expand-mob.rink-map-expand-btn--mob-inline {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		min-width: 34px;
		padding: 0 !important;
		margin-left: 6px;
		border-radius: 999px;
		z-index: 21;
		vertical-align: middle;
	}

	/* 모바일: expand 텍스트 숨김 */
	#rink-map-expand-mob.rink-map-expand-btn--mob-inline .rink-expand-text,
	#rink-map-expand-mob.rink-map-expand-btn--mob-inline span {
		display: none !important;
	}

	/* 모바일 핸들 우측 영역 */
	.rink-mob-handle-right {
		position: absolute;
		right: 14px;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		min-width: 40px;
		max-width: 40px;
		z-index: 3;
	}

	/* 모바일 핸들 안의 내 위치 버튼 */
	.rink-myloc-handle-btn {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		min-width: 34px;
		max-width: 34px;
		padding: 0 !important;
		border-radius: 999px;
		font-size: 0 !important;
		line-height: 1;
		gap: 0 !important;
		overflow: hidden;
		white-space: nowrap;
		text-indent: 0;
		z-index: 2;
		pointer-events: auto;
	}

	.rink-myloc-handle-btn i {
		margin: 0 !important;
		font-size: 13px;
		flex: 0 0 auto;
	}

	/* PC 전용 숨기기 */
	.rink-side-col          { display: none !important; }
	.rink-filter-overlay    { display: none !important; }
	.rink-myloc-fixed       { display: none !important; } /* PC 내위치는 모바일에서 숨김 */

	/* 하단 카드 패널 */
	.rink-mob-card-panel {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		background:
			linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01)),
			linear-gradient(135deg,
				color-mix(in srgb, var(--surface-alt, rgba(223,240,255,.48)) 92%, transparent),
				color-mix(in srgb, var(--surface, rgba(255,255,255,.74)) 70%, transparent)
		);
		backdrop-filter: var(--glass, blur(18px) saturate(140%));
		-webkit-backdrop-filter: var(--glass, blur(18px) saturate(140%));
		border-radius: 0;
		border-top: 1px solid var(--hd-drawer-border);
		overflow: hidden;
		box-shadow: 0 -4px 20px rgba(0,0,0,.08);
		margin-top: 0px;
		position: relative;
		z-index: 2;
	}
	.rink-mob-card-panel::before {
		content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 55%;
	height: 38%;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse at 0% 100%,
			rgba(255,122,61,.18) 0%,
			rgba(255,160,80,.08) 40%,
			transparent 70%
		);
	border-radius: 0 0 0 20px;
	}

	/* 드래그 핸들 — 클릭으로 목록 토글 */
	.rink-mob-handle {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding: 8px 14px;
		cursor: pointer;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
		position: relative;
		z-index: 2;
		min-height: 44px;
		border-bottom: 1px solid rgba(64,128,191,.10);
		background: var(--surface-strong);
		backdrop-filter: blur(10px);
	}
	/* 다크 모드 핸들 테두리 강화 */
	[data-theme="dark"] .rink-mob-handle {
		border-bottom-color: rgba(52,180,255,.15);
	}

	/* 기존 막대 제거 */
	.rink-mob-handle::after {
		display: none;
	}

	.rink-mob-handle-left {
		display: flex;
		align-items: center;
		min-width: 0;
		flex: 1 1 auto;
		padding-right: 56px;
	}

	.rink-mob-handle-left .rink-count {
		font-size: 14px;
		font-weight: 800;
		color: var(--text, #10233a);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rink-mob-handle-left .rink-count strong {
		color: var(--blade);
	}
	.rink-mob-handle-center {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 6px 12px;
		border-radius: 999px;
		background: rgba(46,167,255,.10);
		border: 1px solid rgba(46,167,255,.16);
		color: var(--text);
		box-shadow: 0 2px 10px rgba(46,167,255,.10);
		transition: background .2s ease, border-color .2s ease, transform .2s ease;
		z-index: 2;
	}
	[data-theme="dark"] .rink-mob-handle-center {
		background: rgba(52,180,255,.14);
		border-color: rgba(52,180,255,.25);
		color: var(--text);
	}

	.rink-mob-toggle-text {
		font-size: 12px;
		font-weight: 800;
		line-height: 1;
		white-space: nowrap;
	}

	.rink-mob-toggle-icon {
		font-size: 11px;
		line-height: 1;
		transition: transform .25s ease;
	}
	
	/* 목록 접힘 상태: 패널을 핸들(36px)만 남김 */
	.rink-page.is-map-expand .rink-mob-card-panel {
		flex: 0 0 45px;
	}
	

	/* 목록 내용 접힘 시 숨김 */
	.rink-page.is-map-expand .rink-side-mob,
	.rink-page.is-map-expand .rink-mob-card-panel::before {
		display: none;
	}

	/* mob-card-panel transition 유지 */
	.rink-mob-card-panel {
		transition: flex-basis .35s cubic-bezier(.4,0,.2,1);
	}





	/* 모바일 필터 드롭다운 바 */
	.rink-filter-mob {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 0 12px 10px;
		border-bottom: 1px solid var(--hd-drawer-border);
		overflow-x: auto;
		overflow-y: visible;
		scrollbar-width: none;
		position: relative;
		z-index: 30;
	}
	.rink-filter-mob::-webkit-scrollbar { display: none; }

	/* 모바일 리스트 카운터 숨김 */
	.rink-panel-head { display: none !important; }

	/* 목록만 스크롤 */
	.rink-side-mob {
		flex: 1;
		min-height: 0;
		background: color-mix(in srgb, var(--surface, rgba(255,255,255,.74)) 68%, transparent);
		backdrop-filter: var(--glass, blur(18px) saturate(140%));
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}
	.rink-side-mob::-webkit-scrollbar { display: none; }

	/* 모바일 카드 - 이미지 100px */
	.rink-list { padding: 10px 10px 72px; gap: 15px; }
	.rink-card { padding: 11px 12px; gap: 10px; border-radius: 12px; }
	.rink-card-img-wrap { width: 100px; height: 100px; border-radius: 10px; }
	.rink-card-img--empty { font-size: 18px; }
	.rink-card-name  { font-size: 14px; }
	.rink-card-addr  { font-size: 11px; }
	.rink-card-tag   { font-size: 10px; padding: 2px 8px; }
}


/* ══════════════════════════════════════════════
   바텀시트 / PC 상세 패널
══════════════════════════════════════════════ */
#rink-sheet {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 300;
	background: var(--bg);
	box-shadow: 0 -4px 32px rgba(14,165,233,.15);
	height: 100dvh;
	max-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(100%);
	visibility: hidden;
	transition: transform .32s cubic-bezier(.32,1,.6,1), visibility 0s linear .32s;
}
#rink-sheet.is-open {
	transform: translateY(0);
	visibility: visible;
	transition: transform .32s cubic-bezier(.32,1,.6,1), visibility 0s linear 0s;
}

@media (min-width: 768px) {
	#rink-sheet {
		left: auto;
		top: 58px; right: 0; bottom: 0;
		width: 400px;
		height: auto;
		max-height: none;
		border-left: 1px solid var(--hd-drawer-border);
		z-index: 200;
		transform: translateX(100%);
		transition: transform .3s cubic-bezier(.32,1,.6,1), visibility 0s linear .3s;
	}
	#rink-sheet.is-open {
		transform: translateX(0);
		transition: transform .3s cubic-bezier(.32,1,.6,1), visibility 0s linear 0s;
	}
}

.rink-sheet-handle {
	display: block;
	width: 36px; height: 4px;
	background: var(--hd-drawer-border);
	border-radius: 2px;
	margin: 10px auto 0;
	flex-shrink: 0;
}
@media (min-width: 768px) { .rink-sheet-handle { display: none; } }

.rink-sheet-header {
	display: flex;
	align-items: center;
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--hd-drawer-border);
	flex-shrink: 0;
	gap: 10px;
}
.rink-sheet-name {
	font-size: 16px;
	font-weight: 800;
	color: var(--text);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}
.rink-sheet-close {
	background: transparent;
	border: none;
	color: var(--muted);
	font-size: 18px;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	transition: color .15s;
	flex-shrink: 0;
}
.rink-sheet-close:hover { color: var(--text); }
.rink-sheet-fav-btn { font-size: 20px; flex-shrink: 0; }
.rink-sheet-fav-btn.is-fav { color: #ef4444; }
.rink-sheet-body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.rink-sheet-body::-webkit-scrollbar { display: none; }


/* ══ 슬라이더 ══ */
.rink-slider-wrap {
	position: relative;
	overflow: hidden;
	background: var(--bladeL);
	aspect-ratio: 16/9;
}
.rink-slider-track { display: flex; height: 100%; transition: transform .35s ease; }
.rink-slide { flex: 0 0 100%; height: 100%; }
.rink-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rink-slide--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	color: var(--blade);
	opacity: .3;
}
.rink-slider-dots {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 5px;
	z-index: 2;
}
.rink-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.5);
	cursor: pointer;
	padding: 0;
	transition: background .2s, transform .2s;
}
.rink-dot.is-active { background: #fff; transform: scale(1.3); }
.rink-slider-thumbs {
	display: flex;
	gap: 4px;
	padding: 6px 12px;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--bg);
}
.rink-slider-thumbs::-webkit-scrollbar { display: none; }
.rink-thumb {
	flex: 0 0 48px;
	height: 36px;
	border: 2px solid transparent;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	background: var(--bladeL);
	transition: border-color .15s;
}
.rink-thumb.is-active { border-color: var(--blade); }
.rink-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ══ 액션 버튼 ══ */
.rink-action-bar { display: flex; gap: 8px; padding: 12px 14px 8px; }
.rink-action-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 6px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid var(--blade);
	transition: opacity .15s;
}
.rink-action-btn i { font-size: 18px; }
.rink-action-btn:hover { opacity: .8; }
.rink-action-btn--primary { background: var(--blade); color: #fff; }
.rink-action-btn--secondary { background: transparent; color: var(--blade); }
.rink-link-bar {
	display: flex;
	gap: 6px;
	padding: 0 14px 12px;
}
.rink-link-icon {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 8px;
	border: 1px solid var(--hd-drawer-border);
	color: var(--muted);
	font-size: 16px;
	text-decoration: none;
	opacity: .4;
	transition: border-color .15s, color .15s, opacity .15s;
}
.rink-link-icon.is-active { opacity: 1; border-color: var(--blade); color: var(--blade); }


/* ══ 탭 ══ */
.rink-tabs { display: flex; border-bottom: 1px solid var(--hd-drawer-border); flex-shrink: 0; }
.rink-tab {
	flex: 1;
	padding: 11px 8px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	font-size: 13px;
	color: var(--muted);
	cursor: pointer;
	font-weight: 500;
	margin-bottom: -1px;
	transition: color .15s, border-color .15s;
}
.rink-tab.is-active { color: var(--blade); border-bottom-color: var(--blade); }
.rink-panel { display: none; padding: 14px; min-height: 320px; }
.rink-panel.is-active { display: block; }
.rink-panel-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
}
.rink-section-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	padding: 14px 0 8px;
	border-top: 1px solid var(--hd-drawer-border);
	margin-top: 8px;
}


/* ══ 기본정보 테이블 ══ */
.rink-info-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rink-info-table th {
	width: 80px;
	padding: 7px 6px;
	text-align: left;
	color: var(--muted);
	font-weight: 500;
	vertical-align: top;
	white-space: nowrap;
}
.rink-info-table td { padding: 7px 6px; color: var(--text); word-break: break-all; }
.rink-info-table tr { border-bottom: 1px solid var(--hd-drawer-border); }
.rink-info-table tr:last-child { border-bottom: none; }
.rink-desc { margin: 12px 0 0; font-size: 13px; color: var(--text); line-height: 1.7; }
.rink-desc--empty { color: var(--muted); font-style: italic; }


/* ══ 부대시설 ══ */
#rink-fac-wrap { margin: 16px 0; }
#rink-fac-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.rink-fac-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 10px 4px;
	border-radius: 10px;
	border: 1px solid var(--hd-drawer-border);
	opacity: .35;
	transition: opacity .2s, border-color .2s, background .2s;
}
.rink-fac-item.is-on { opacity: 1; border-color: var(--blade); background: var(--bladeL); }
.rink-fac-icon { font-size: 18px; color: var(--blade); }
.rink-fac-label { font-size: 11px; color: var(--text); text-align: center; line-height: 1.3; }


/* ══ 미니맵 ══ */
#rink-minimap {
	margin-top: 0;
	width: 100%;
	height: 240px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--bladeL);
}
.rink-minimap-err {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--muted);
	font-size: 13px;
}


/* ══ 토스트 ══ */
#rink-toast {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	background: var(--dark);
	color: #fff;
	font-size: 13px;
	padding: 9px 18px;
	border-radius: 20px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .22s, transform .22s;
	z-index: 500;
	white-space: nowrap;
}
#rink-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ══ 오버레이 ══ */
.rink-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	backdrop-filter: blur(3px);
	z-index: 199;
	opacity: 0;
	transition: opacity .2s;
}
.rink-overlay.is-show { display: block; opacity: 1; }
@media (min-width: 768px) {
	.rink-overlay {
		display: block;
		pointer-events: none;
		opacity: 0;
		transition: opacity .2s;
	}
	.rink-overlay.is-show { pointer-events: auto; opacity: 1; display: block; }
}


/* ══ 스켈레톤 ══ */
@keyframes skeleton-shine {
	0%   { background-position: -400px 0; }
	100% { background-position:  400px 0; }
}
.rink-skeleton {
	background: linear-gradient(90deg, var(--hd-drawer-border) 25%, var(--bladeL) 50%, var(--hd-drawer-border) 75%);
	background-size: 800px 100%;
	animation: skeleton-shine 1.4s infinite linear;
	border-radius: 6px;
}


/* ══ 지도 크게보기 버튼 ══ */
.rink-map-expand-btn {
	position: absolute;
	right: 105px;        /* 내위치 버튼 바로 왼쪽 */
	bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	border-radius: 999px;
	border: 1.5px solid rgba(255,255,255,.55);
	background: rgba(255,255,255,.92);
	color: #334155;
	font-size: 14px;
	cursor: pointer;
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 8px rgba(0,0,0,.14);
	transition: all .16s ease;
	z-index: 10;
}
/* PC/모바일 공통 — 텍스트 숨기고 아이콘만 */
.rink-expand-text { display: none; }
.rink-map-expand-btn:hover {
	background: #fff;
	border-color: var(--blade);
	color: var(--blade);
}

[data-theme="dark"] .rink-map-expand-btn {
	background: rgba(10,20,40,.88);
	border-color: rgba(56,189,248,.25);
	color: #94a3b8;
}

/* 지도 전체화면 모달 */
#rink-map-fullscreen {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 8000;
	background: #000;
	flex-direction: column;
}
#rink-map-fullscreen.is-open {
	display: flex;
}
#rink-map-fullscreen-map {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}
.rink-map-fs-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background: rgba(0,0,0,.6);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
.rink-map-fs-title {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.rink-map-fs-close {
	background: rgba(255,255,255,.15);
	border: none;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}
.rink-map-fs-close:hover { background: rgba(255,255,255,.3); }

/* 미니맵 래퍼 (크게보기 버튼 담을 relative 컨테이너) */
.rink-minimap-wrap {
	position: relative;
	margin-top: 16px;
	height: 240px;       /* minimap 높이 명시 → absolute 버튼 위치 기준 확보 */
	overflow: visible;   /* 버튼이 잘리지 않도록 */
}
.rink-minimap-wrap #rink-minimap {
	margin-top: 0;
	height: 100%;
}
.rink-minimap-expand-btn {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1.5px solid rgba(255,255,255,.55);
	background: rgba(255,255,255,.88);
	color: #334155;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 6px rgba(0,0,0,.14);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: all .16s ease;
}
.rink-minimap-expand-btn:hover {
	background: #fff;
	border-color: var(--blade);
	color: var(--blade);
}

/* ── 필터를 딤/레이어 아래에 가리기 ──
   body.layer-open   : 햄버거 메뉴 등 사이트 공통 레이어 열림
   rink-overlay 표시 : 상세레이어 딤 활성화 = 상세레이어 열림
   #rink-map-fullscreen : 전체화면 지도 열림
   이 세 상황에서 fixed 필터를 display:none으로 숨김 */
body.layer-open .rink-filter-overlay-mob,
body:has(#rink-overlay.is-show) .rink-filter-overlay-mob,
body:has(#rink-map-fullscreen.is-open) .rink-filter-overlay-mob {
	display: none !important;
}
/* 전체화면 열릴 때 미니맵 크게보기 버튼 숨김 */
body:has(#rink-map-fullscreen.is-open) .rink-minimap-expand-btn {
	display: none !important;
}

/* ══════════════════════════════════════════════
   지도 커스텀 라벨 마커 (.rink-ml)
══════════════════════════════════════════════ */
.rink-ml {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px 5px 7px;
	background: rgba(255, 255, 255, 0.94);
	border: 1.5px solid rgba(46, 167, 255, 0.55);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: #0d1e30;
	white-space: nowrap;
	cursor: pointer;
	box-shadow:
		0 2px 8px rgba(37, 83, 121, 0.13),
		0 0 0 1px rgba(46, 167, 255, 0.08);
	transition:
		transform .18s cubic-bezier(.34,1.56,.64,1),
		box-shadow .18s ease,
		border-color .18s ease,
		background .18s ease;
	user-select: none;
	/* 라벨 하단 중앙에 작은 꼬리 */
	position: relative;
}
.rink-ml::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid rgba(46, 167, 255, 0.55);
}
.rink-ml::before {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid rgba(255, 255, 255, 0.94);
	z-index: 1;
}

/* 점 */
.rink-ml__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #2ea7ff;
	box-shadow: 0 0 0 2px rgba(46, 167, 255, 0.25);
}
.rink-ml__name {
	line-height: 1.2;
}

/* 인라인 타입 */
.rink-ml--inline .rink-ml__dot {
	background: #ff7a3d;
	box-shadow: 0 0 0 2px rgba(255, 122, 61, 0.25);
}
.rink-ml--inline {
	border-color: rgba(255, 122, 61, 0.45);
	box-shadow:
		0 2px 8px rgba(255, 100, 30, 0.12),
		0 0 0 1px rgba(255, 122, 61, 0.08);
}
.rink-ml--inline::after {
	border-top-color: rgba(255, 122, 61, 0.45);
}

/* 호버 */
.rink-ml:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow:
		0 6px 18px rgba(37, 83, 121, 0.18),
		0 0 0 2px rgba(46, 167, 255, 0.18);
	border-color: rgba(46, 167, 255, 0.85);
	background: #fff;
	z-index: 20 !important;
}
.rink-ml--inline:hover {
	box-shadow:
		0 6px 18px rgba(255, 100, 30, 0.18),
		0 0 0 2px rgba(255, 122, 61, 0.22);
	border-color: rgba(255, 122, 61, 0.85);
}

/* 활성 (스크롤 포커스 연동) */
.rink-ml--active {
	background: #2ea7ff;
	border-color: #2ea7ff;
	color: #fff;
	transform: translateY(-3px) scale(1.06);
	box-shadow:
		0 6px 20px rgba(46, 167, 255, 0.40),
		0 0 0 3px rgba(46, 167, 255, 0.20);
	z-index: 10 !important;
}
.rink-ml--active .rink-ml__dot {
	background: #fff;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.rink-ml--active::after {
	border-top-color: #2ea7ff;
}
.rink-ml--active::before {
	border-top-color: #2ea7ff;
}
.rink-ml--inline.rink-ml--active {
	background: #ff7a3d;
	border-color: #ff7a3d;
	box-shadow:
		0 6px 20px rgba(255, 122, 61, 0.40),
		0 0 0 3px rgba(255, 122, 61, 0.20);
}
.rink-ml--inline.rink-ml--active::after {
	border-top-color: #ff7a3d;
}
.rink-ml--inline.rink-ml--active::before {
	border-top-color: #ff7a3d;
}

/* 활성 마커 hover — 배경/글씨색 유지 (일반 :hover의 background:#fff 덮어씌움 방지) */
.rink-ml--active:hover {
	background: #2ea7ff;
	color: #fff;
}
.rink-ml--inline.rink-ml--active:hover {
	background: #ff7a3d;
	color: #fff;
}

/* ── 다크모드 ── */
[data-theme="dark"] .rink-ml {
	background: rgba(12, 24, 44, 0.92);
	border-color: rgba(46, 167, 255, 0.45);
	color: #d0e8f8;
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(46, 167, 255, 0.10);
}
[data-theme="dark"] .rink-ml::before {
	border-top-color: rgba(12, 24, 44, 0.92);
}
[data-theme="dark"] .rink-ml--active {
	background: #1a8fd1;
	border-color: #1a8fd1;
	color: #fff;
}
[data-theme="dark"] .rink-ml--active::after {
	border-top-color: #1a8fd1;
}
[data-theme="dark"] .rink-ml--active::before {
	border-top-color: #1a8fd1;
}


/* ══════════════════════════════════════════════
   ROUTE CARD — 슬라이더 하단 거리/시간 카드
══════════════════════════════════════════════ */
.rink-route-card {
	margin: 0 0 0;
	padding: 8px 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--blade);
}
.rink-route-card__inner {
	display: flex;
	align-items: center;
	gap: 0;
	height: 36px;
	background: linear-gradient(135deg,
		rgba(46,167,255,.10) 0%,
		rgba(46,167,255,.05) 100%);
	border: 1px solid rgba(46,167,255,.25);
	border-radius: 10px;
	padding: 0 14px;
	position: relative;
	overflow: hidden;
}
.rink-route-card__inner::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--blade);
	border-radius: 10px 0 0 10px;
}
.rink-route-card__item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	flex: 1;
	justify-content: center;
}
.rink-route-card__icon {
	font-size: 12px;
	color: var(--blade);
}
.rink-route-card__sep {
	width: 1px;
	height: 16px;
	background: var(--blade);
	opacity: .3;
	flex-shrink: 0;
}
.rink-route-card__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted);
	background: var(--surface);
	border-radius: 10px;
}

/* ══════════════════════════════════════════════
   MINIMAP 좌상단 거리/시간 오버레이 배지
══════════════════════════════════════════════ */
.rink-minimap-route-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	align-items: center;
	gap: 5px;
	background: rgba(0,0,0,.62);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 20px;
	pointer-events: none;
	z-index: 10;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.rink-minimap-route-badge i {
	font-size: 11px;
	color: #2EA7FF;
}
/* ══════════════════════════════════════════════
   NAVI LAYER — 길찾기 웹 레이어 모달
══════════════════════════════════════════════ */
#rink-navi-layer {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0,0,0,.5);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s, visibility 0s linear .3s;
}
#rink-navi-layer.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .3s, visibility 0s linear 0s;
}
.rink-navi-layer__inner {
	width: 100%;
	max-width: 560px;
	background: var(--surface);
	border-radius: 20px 20px 0 0;
	overflow: hidden;
	transform: translateY(30px);
	transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
#rink-navi-layer.is-open .rink-navi-layer__inner {
	transform: translateY(0);
}
.rink-navi-layer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 12px;
	border-bottom: 1px solid var(--blade);
}
.rink-navi-layer__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 12px;
}
.rink-navi-layer__close {
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--muted);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background .15s, color .15s;
	flex-shrink: 0;
}
.rink-navi-layer__close:hover {
	background: rgba(239,68,68,.1);
	color: #EF4444;
}
.rink-navi-layer__map-wrap {
	width: 100%;
	height: 280px;
	position: relative;
}
#rink-navi-map {
	width: 100%;
	height: 100%;
}

/* 길찾기 레이어 지도 좌상단 거리/시간 오버레이 */
.rink-navi-overlay-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	align-items: center;
	gap: 5px;
	background: rgba(0,0,0,.65);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
	pointer-events: none;
	z-index: 10;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.rink-navi-overlay-badge i {
	font-size: 12px;
	color: #2EA7FF;
}
.rink-navi-layer__btns {
	display: flex;
	gap: 8px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	flex-wrap: nowrap;  /* 한 줄 강제 */
}
.rink-navi-layer__btn {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 56px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	border: none;
	transition: opacity .15s, transform .15s;
	padding: 6px 4px;
}
.rink-navi-layer__btn:active {
	opacity: .8;
	transform: scale(.97);
}
.rink-navi-app-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	border-radius: 6px;
}
.rink-navi-layer__btn--tmap {
	background: #1a6fff;
	color: #fff;
}
.rink-navi-layer__btn--kakaonavi {
	background: #FAD02C;
	color: #3C1E1E;
}
.rink-navi-layer__btn--kakao {
	background: #FEE500;
	color: #3C1E1E;
}
.rink-navi-layer__btn--share {
	background: var(--surface);
	color: var(--text);
	border: 1.5px solid var(--blade);
}

/* PC: 모바일 전용 버튼 숨김 */
@media (min-width: 681px) {
	.rink-navi-mobile-only { display: none !important; }
}

/* PC: 모달 중앙 정렬 */
@media (min-width: 681px) {
	#rink-navi-layer {
		align-items: center;
	}
	.rink-navi-layer__inner {
		border-radius: 16px;
		transform: scale(.95);
	}
	#rink-navi-layer.is-open .rink-navi-layer__inner {
		transform: scale(1);
	}
	.rink-navi-layer__map-wrap {
		height: 360px;
	}
}