/*
 * SnapHub Studio Map — Phase 1 Micro Site
 * Shared search/result/button/tag/card typography is inherited from
 * existing fig-components.css / studio-list.css / common.css.
 * Map-only cluster typography is scoped here because compact circular markers
 * require their own readable type scale. Other rules own map geometry and states.
 */

body.page-studio-map {
	margin: 0;
	min-width: 320px;
	background: #fff;
	color: var(--ink);
}

body.page-studio-map > .site-footer,
body.page-studio-map .top-button {
	display: none !important;
}

.studio-map-main {
	box-sizing: border-box;
	width: 100%;
	height: 100dvh;
	padding-top: 80px;
	overflow: hidden;
	background: #fff;
}

.studio-map-stage {
	--studio-map-list-height: 188px;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #eef3f5;
	isolation: isolate;
}

.studio-map-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #e9f0f2;
}

/* --------------------------------------------------------------------------
   Map layers
   초기 화면에는 실제 Kakao 지도 컨테이너의 중립 배경만 노출합니다.
   Prototype 시절의 가짜 지도 fallback은 실제 지도와 혼동될 수 있어 사용하지 않습니다.
   -------------------------------------------------------------------------- */
.studio-map-overlay-layer {
	position: absolute;
	inset: 0;
	z-index: 8;
	pointer-events: none;
}
.studio-map-overlay-layer > * { pointer-events: auto; }
.studio-map-kakao-overlay { position: relative; }

/* --------------------------------------------------------------------------
   Search layer — existing Studio List search UI, map-scale geometry only.
   -------------------------------------------------------------------------- */
.studio-map-search-layer {
	--studio-map-search-control-size: 48px;
	position: absolute;
	z-index: 42;
	left: 18px;
	top: 18px;
	display: flex;
	align-items: flex-start;
	pointer-events: none;
}
.studio-map-search-layer > * { pointer-events: auto; }

.studio-map-search-toggle.fig-ui-button {
	width: var(--studio-map-search-control-size);
	min-width: var(--studio-map-search-control-size);
	height: var(--studio-map-search-control-size);
	padding: 0;
	border-radius: 999px;
	box-shadow: 0 10px 28px rgba(21,24,30,.12);
}
.studio-map-search-panel {
	position: absolute;
	left: calc(var(--studio-map-search-control-size) + 10px);
	top: 0;
	width: 380px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.studio-map-search-layer.is-open .studio-map-search-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
}

.studio-map-category-layer {
	position: absolute;
	z-index: 39;
	left: 50%;
	top: 18px;
	/* PC에서는 촬영분야 전체가 한 줄에 보이도록 콘텐츠 폭을 충분히 확보합니다.
	 * 좁은 화면에서 임의로 버튼 폭을 줄이지 않고, 모바일 구간은 별도 가로 스크롤 정책을 사용합니다. */
	width: max-content;
	max-width: min(860px,calc(100% - 48px));
	transform: translateX(-50%);
	pointer-events: none;
}
.studio-map-category-layer > * { pointer-events: auto; }
.studio-map-category-tabs {
	display: flex;
	width: fit-content;
	max-width: 100%;
	height: 48px;
	margin: 0 auto;
	overflow-x: auto;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	padding: 4px 0;
	scrollbar-width: none;
	box-sizing: border-box;
}
.studio-map-category-tabs[hidden] { display: none; }
.studio-map-category-tabs::-webkit-scrollbar { display: none; }
/* 촬영분야 라벨은 글자 수에 맞춰 가로폭이 자연스럽게 늘어나며 한 줄을 유지합니다. */
.studio-map-category-tabs > button[data-category] {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	white-space: nowrap;
}

.studio-map-search-result {
	position: absolute;
	z-index: 5;
	left: 0;
	top: 52px;
	width: 100%;
	max-height: min(480px,calc(100dvh - 190px));
	overflow-y: auto;
	padding: 8px;
	border: 1px solid #ececef;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 20px 46px rgba(21,24,30,.16);
}
.studio-map-search-result[hidden] { display: none; }
.studio-map-search-result > button {
	display: grid;
	grid-template-columns: 48px minmax(0,1fr) 18px;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px;
	border-radius: 14px;
	text-align: left;
}
.studio-map-search-result > button:hover,
.studio-map-search-result > button:focus-visible { background: #f8f8f8; }
.studio-map-search-result > button > img,
.studio-map-search-result__icon {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	object-fit: cover;
}
.studio-map-search-result__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-surface);
	color: var(--primary);
}
.studio-map-search-result > button > span:not(.studio-map-search-result__icon) {
	display: grid;
	gap: 3px;
	min-width: 0;
}
.studio-map-search-result > button strong,
.studio-map-search-result > button small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.studio-map-search-result__arrow { color: #aaa; }
.studio-map-search-result__empty { padding: 18px; color: var(--text-tertiary); }

/* --------------------------------------------------------------------------
   Map scope / viewport / quick actions.
   -------------------------------------------------------------------------- */
.studio-map-overview {
	position: absolute;
	z-index: 38;
	top: 18px;
	right: 22px;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas: "label result" "actions actions";
	align-items: center;
	gap: 8px 12px;
	padding: 12px;
	border: 1px solid rgba(255,85,85,.3);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(21,24,30,.11);
}
.studio-map-overview > .fig-ui-label { grid-area: label; }
.studio-map-overview__result { grid-area: result; height: auto; padding: 0; border: 0; }
.studio-map-overview__result h2 { white-space: nowrap; }
.studio-map-overview__actions { grid-area: actions; display: flex; gap: 8px; }
.studio-map-overview__actions .fig-ui-button { flex: 1 1 auto; }
.studio-map-overview__actions .fig-ui-button[aria-pressed="true"] {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
}

.studio-map-floating-status {
	position: absolute;
	z-index: 31;
	left: 22px;
	top: 132px;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 12px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(21,24,30,.10);
}
.studio-map-floating-status__result { height: auto; padding: 0; border: 0; }
.studio-map-floating-status__result h2 { white-space: nowrap; }

.studio-map-discovery {
	position: absolute;
	z-index: 28;
	left: 22px;
	bottom: 316px;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 360px;
	padding: 11px 14px;
	border: 1px solid rgba(255,255,255,.82);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(21,24,30,.10);
	transition: bottom .28s ease;
}
.studio-map-discovery .search-card { width: auto; min-width: 0; }
.studio-map-discovery .search-card__description { margin: 0; }
.studio-map-discovery .search-card__description + .search-card__description { margin-top: 3px; }

.studio-map-controls {
	position: absolute;
	z-index: 36;
	right: 22px;
	top: auto;
	bottom: 24px;
	display: grid;
	width: 48px;
	padding: 4px;
	border: 1px solid #ececef;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(21,24,30,.13);
	transform: none;
	transition: bottom .3s ease;
}
.studio-map-controls button {
	display: flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	color: #333;
}
.studio-map-controls button:hover { background: #f7f7f7; color: var(--primary); }
.studio-map-controls__divider { height: 1px; margin: 3px 7px; background: #ededed; }
/* 공통 지도 제어 버튼 규칙(.studio-map-controls button)의 specificity가 더 높으므로
 * 모바일 KPI 토글은 컨트롤 컨테이너까지 포함해 PC 기본 숨김을 명확히 보장합니다. */
.studio-map-controls .studio-map-overview-toggle,
.studio-map-controls__divider--overview { display: none; }

/* Location permission is an explicit, user-initiated flow. The overlay stays inside the
 * map stage so the common header and page chrome remain untouched. */
.studio-map-location-consent {
	position: absolute;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.studio-map-location-consent[hidden] { display: none; }
.studio-map-location-consent__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: rgba(18,22,28,.36);
}
.studio-map-location-consent__panel {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 44px minmax(0,1fr);
	gap: 12px 14px;
	width: min(420px,100%);
	padding: 18px;
	border: 1px solid rgba(255,85,85,.22);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 22px 56px rgba(21,24,30,.24);
}
.studio-map-location-consent__icon {
	display: flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--primary-surface);
	color: var(--primary);
}
.studio-map-location-consent__copy { min-width: 0; }
.studio-map-location-consent__copy h2 {
	margin: 1px 0 6px;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--ink);
}
.studio-map-location-consent__copy p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-secondary);
}
.studio-map-location-consent__actions {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 2px;
}
.studio-map-location-consent__actions .fig-ui-button { width: 100%; min-height: 42px; }

/* --------------------------------------------------------------------------
   Semantic zoom overlays.
   Shared primitives are reused, with a map-only type scale for circular clusters.
   -------------------------------------------------------------------------- */
.studio-map-cluster {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cluster-size,78px);
	height: var(--cluster-size,78px);
	border: 2px solid var(--primary-border);
	border-radius: 50%;
	background: var(--primary-pale);
	color: var(--ink);
	box-shadow: 0 8px 20px rgba(255,85,85,.18);
	transform: translate(-50%,-50%);
	transition: transform .18s ease, box-shadow .18s ease;
}
.studio-map-cluster:hover,
.studio-map-cluster:focus-visible {
	transform: translate(-50%,-50%) scale(1.04);
	box-shadow: 0 10px 24px rgba(255,85,85,.24);
}
.studio-map-cluster__inner {
	display: grid;
	width: 100%;
	place-items: center;
	gap: 1px;
	padding-inline: 4px;
	line-height: 1;
}
.studio-map-cluster .search-card__price {
	display: flex;
	justify-content: center;
	margin: 0;
	color: var(--primary);
	line-height: 1;
}
.studio-map-cluster .search-card__price strong {
	display: block;
	font-size: 19px;
	line-height: 22px;
	font-weight: 700;
	letter-spacing: -.35px;
	font-variant-numeric: tabular-nums;
}
.studio-map-cluster .fig-ui-label {
	min-height: 20px;
	padding-inline: 8px;
	background: rgba(255,255,255,.96);
	color: #555b61;
	font-size: 11px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: -.2px;
}
.studio-map-cluster--sm { --cluster-size: 66px; }
.studio-map-cluster--md { --cluster-size: 80px; }
.studio-map-cluster--lg { --cluster-size: 96px; }
.studio-map-cluster--md .search-card__price strong { font-size: 21px; line-height: 23px; }
.studio-map-cluster--lg .search-card__price strong { font-size: 24px; line-height: 26px; }
.studio-map-cluster--md .fig-ui-label,
.studio-map-cluster--lg .fig-ui-label { font-size: 12px; }
.studio-map-cluster.is-district.studio-map-cluster--sm { --cluster-size: 76px; }
.studio-map-cluster.is-district.studio-map-cluster--md { --cluster-size: 86px; }
.studio-map-cluster.is-district.studio-map-cluster--lg { --cluster-size: 96px; }

.studio-map-pin {
	position: absolute;
	width: 38px;
	height: 46px;
	transform: translate(-50%,-100%);
}
.studio-map-pin__dot {
	display: flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	border: 4px solid #fff;
	border-radius: 50% 50% 50% 12px;
	background: var(--primary);
	color: #fff;
	box-shadow: 0 8px 20px rgba(20,20,24,.18);
	transform: rotate(-45deg);
}
.studio-map-pin__dot > i { transform: rotate(45deg); }
.studio-map-pin.is-selected .studio-map-pin__dot { background: #111; transform: rotate(-45deg) scale(1.12); }

/* 사용자 동의로 확인된 현재 위치는 Studio pin과 독립된 persistent overlay로 표시합니다. */
.studio-map-current-location {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #3478f6;
	box-shadow: 0 2px 8px rgba(20,20,24,.28);
	pointer-events: none;
}
.studio-map-current-location::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(52,120,246,.35);
	border-radius: 50%;
	background: rgba(52,120,246,.14);
	transform: translate(-50%,-50%);
}
.studio-map-current-location::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%,-50%);
}

.studio-map-photo-dot {
	position: absolute;
	width: 64px;
	height: 72px;
	padding: 0;
	border: 0;
	background: transparent;
	transform: translate(-50%,-100%);
	transition: transform .18s ease;
}
.studio-map-photo-dot::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 2px;
	width: 58px;
	height: 58px;
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 12px;
	background: var(--primary);
	box-shadow: 0 10px 24px rgba(21,24,30,.22);
	transform: translateX(-50%) rotate(-45deg);
	transform-origin: 50% 50%;
}
.studio-map-photo-dot:hover,
.studio-map-photo-dot:focus-visible { transform: translate(-50%,-100%) scale(1.05); }
.studio-map-photo-dot img {
	position: absolute;
	z-index: 1;
	left: 7px;
	top: 7px;
	display: block;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #fff;
	object-fit: cover;
}


.studio-map-photo-marker {
	/* Keep every selected-studio popup the same size regardless of source image ratio. */
	--studio-map-photo-card-height: 96px;
	--studio-map-photo-media-width: 92px;
	position: absolute;
	width: 312px;
	height: calc(var(--studio-map-photo-card-height) + 13px);
	padding: 0 0 13px;
	overflow: visible;
	border: 0;
	background: transparent;
	text-align: left;
	transform: translate(-50%,-100%);
}
.studio-map-photo-marker__surface {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: var(--studio-map-photo-media-width) minmax(0,1fr);
	align-items: stretch;
	height: var(--studio-map-photo-card-height);
	min-height: 0;
	overflow: hidden;
	border: 1px solid rgba(255,85,85,.42);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 16px 36px rgba(21,24,30,.18);
}
.studio-map-photo-marker__tail {
	position: absolute;
	z-index: 0;
	left: 50%;
	bottom: 4px;
	width: 18px;
	height: 18px;
	border-right: 1px solid rgba(255,85,85,.42);
	border-bottom: 1px solid rgba(255,85,85,.42);
	border-radius: 0 0 5px 0;
	background: #fff;
	transform: translateX(-50%) rotate(45deg);
}
.studio-map-photo-marker__media {
	display: block;
	width: var(--studio-map-photo-media-width);
	height: var(--studio-map-photo-card-height);
	min-height: 0;
	overflow: hidden;
	background: #f5f5f5;
}
.studio-map-photo-marker__media > img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: center;
}
.studio-map-photo-marker__copy { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 12px 14px; }
.studio-map-photo-marker__copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-map-photo-marker__copy .fig-ui-label { justify-self: start; }



/* --------------------------------------------------------------------------
   Offcanvas surfaces — map geometry only.
   Typography remains owned by fig-components.css / studio-list.css / common.css.
   -------------------------------------------------------------------------- */
.studio-map-offcanvas.offcanvas {
	position: absolute;
	z-index: 44;
	visibility: hidden;
	background: #fff;
	box-shadow: 0 18px 48px rgba(21,24,30,.16);
	transition: transform .3s ease, visibility .3s ease;
	will-change: transform;
}
.studio-map-offcanvas.offcanvas.showing,
.studio-map-offcanvas.offcanvas.show {
	visibility: visible;
}
.studio-map-offcanvas.offcanvas.hiding { visibility: visible; }

.studio-map-offcanvas--list.offcanvas-bottom {
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--studio-map-list-height);
	padding: 0 18px 12px;
	border: 1px solid rgba(255,85,85,.20);
	border-bottom: 0;
	border-radius: 22px 22px 0 0;
	transform: translateY(100%);
}
.studio-map-offcanvas--list.offcanvas-bottom.show { transform: translateY(0); }

.studio-map-offcanvas-toggle {
	position: absolute;
	z-index: 47;
	left: 50%;
	bottom: 0;
	width: 84px;
	height: 31px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--primary);
	transform: translateX(-50%);
	transition: bottom .3s ease, opacity .2s ease;
}
.studio-map-offcanvas-toggle__handle {
	position: relative;
	display: flex;
	width: 74px;
	height: 31px;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,85,85,.28);
	border-bottom: 0;
	border-radius: 18px 18px 0 0;
	background: #fff;
	box-shadow: 0 -5px 16px rgba(21,24,30,.09);
}
.studio-map-offcanvas-toggle__handle::after {
	content: "";
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: -2px;
	height: 3px;
	background: #fff;
}
.studio-map-offcanvas-toggle[hidden] { display: none; }
.studio-map-stage.is-list-open .studio-map-offcanvas-toggle { bottom: calc(var(--studio-map-list-height) - 1px); }
.studio-map-stage.is-list-open .studio-map-offcanvas-toggle i { transform: rotate(180deg); }
.studio-map-offcanvas-toggle i { transition: transform .3s ease; }

.studio-map-dock__head {
	display: flex;
	height: 52px;
	align-items: center;
	gap: 9px;
}
.studio-map-dock__result-head { height: auto; padding: 0; border: 0; }
.studio-map-dock__result-head h2 { white-space: nowrap; }
.studio-map-dock__head > .fig-ui-label {
	min-width: 0;
	max-width: 230px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.studio-map-dock__actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
/* Figma studio-list pagination uses 32px visual cells. Keep the map filmstrip navigation
 * on the same scale and center it vertically inside the 52px dock header. */
.studio-map-dock__actions .fig-ui-button {
	width: 32px;
	min-width: 32px;
	height: 32px;
	padding: 0;
}
/* 하단 비동기 로더는 카드 영역 내부에서만 동작해 지도 조작과 상단 UI를 막지 않습니다. */
.studio-map-dock__body { position: relative; height: 122px; overflow: hidden; background: #fff; border-radius: 14px; }
.studio-map-dock-loading {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.90);
	pointer-events: none;
}
.studio-map-dock-loading[hidden] { display: none; }
.studio-map-dock-loading__dots { display: inline-flex; align-items: center; gap: 8px; height: 24px; }
.studio-map-dock-loading__dot {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--primary);
	animation: studio-map-dock-dot-wave .9s ease-in-out infinite;
}
.studio-map-dock-loading__dot:nth-child(2) { background: var(--ink); animation-delay: .12s; }
.studio-map-dock-loading__dot:nth-child(3) { animation-delay: .24s; }
@keyframes studio-map-dock-dot-wave {
	0%,60%,100% { transform: translateY(0) scale(.88); opacity: .55; }
	30% { transform: translateY(-7px) scale(1); opacity: 1; }
}

.studio-map-card-viewport { --studio-map-card-width: 310px; --studio-map-card-gap: 18px; width: 100%; height: 100%; overflow: hidden; padding: 3px 2px; }
.studio-map-card-track { display: flex; align-items: flex-start; height: 100%; }
.studio-map-card.search-card {
	display: grid;
	grid-template-columns: 108px minmax(0,1fr);
	width: var(--studio-map-card-width);
	height: 112px;
	flex: 0 0 var(--studio-map-card-width);
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
}
.studio-map-card .search-card__media {
	width: 108px;
	height: 110px;
	border-radius: 13px 0 0 13px;
}
.studio-map-card .search-card__image,
.studio-map-detail .search-card__image {
	object-fit: cover;
	object-position: center;
}
.studio-map-card .search-card__badges { top: 8px; left: 8px; }
.studio-map-card .search-card__badges .fig-ui-label { width: 26px; min-width: 26px; min-height: 26px; padding: 0; }
.studio-map-card .search-card__media::after { display: none; }
.studio-map-card .search-card__body {
	display: grid;
	align-content: center;
	gap: 6px;
	min-width: 0;
	padding: 10px 12px;
}
.studio-map-card .search-card__tags {
	display: flex;
	max-width: 100%;
	overflow: hidden;
}
.studio-map-card .studio-map-card__title,
.studio-map-card .studio-map-card__location {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.studio-map-card .studio-map-card__location { display: flex; align-items: center; gap: 5px; }
.studio-map-card .search-card__location-icon { width: 18px; height: 18px; flex-basis: 18px; }
.studio-map-card .studio-map-card__location i { flex: 0 0 auto; color: var(--primary); }
.studio-map-card .search-card__description { display: none; }
.studio-map-card.is-selected { border-color: var(--primary); box-shadow: 0 8px 20px rgba(255,85,85,.10); }
.studio-map-card-placeholder {
	display: grid;
	grid-template-columns: 108px minmax(0,1fr);
	width: var(--studio-map-card-width);
	height: 112px;
	flex: 0 0 var(--studio-map-card-width);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	pointer-events: none;
}
.studio-map-card-placeholder__media { background: #f4f4f4; }
.studio-map-card-placeholder__body {
	display: grid;
	align-content: center;
	gap: 9px;
	padding: 12px;
}
.studio-map-card-placeholder__line {
	display: block;
	height: 9px;
	border-radius: 999px;
	background: #f3f3f3;
}
.studio-map-card-placeholder__line--short { width: 44%; }
.studio-map-card-placeholder__line--medium { width: 68%; }
.studio-map-empty {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #fff;
}
.studio-map-empty__copy { display: grid; gap: 2px; }

.studio-map-offcanvas--detail.offcanvas-end {
	top: 16px;
	right: 16px;
	bottom: auto;
	left: auto;
	width: 388px;
	height: auto;
	max-height: calc(100% - 32px);
	overflow-y: auto;
	padding: 0;
	border: 1px solid #ececef;
	border-radius: 24px;
	background: #fff;
	transform: translateX(calc(100% + 28px));
}
.studio-map-offcanvas--detail.offcanvas-end.show { transform: translateX(0); }
.studio-map-detail__close {
	z-index: 5;
	top: 12px;
	right: 12px;
}
.studio-map-detail .studio-map-detail__media.search-card__media {
	width: 100%;
	height: 230px;
	border-radius: 24px 24px 0 0;
}
.studio-map-detail .studio-map-detail__media.search-card__media::after { display: none; }
.studio-map-detail__body.search-card__body { padding: 16px 18px 18px; }
.studio-map-detail__title-row.search-card__title-row { grid-template-columns: minmax(0,1fr) auto; }
.studio-map-detail__intro.search-card__description { white-space: normal; text-overflow: clip; }
.studio-map-detail__facts {
	display: grid;
	gap: 9px;
	margin-top: 16px;
	padding: 14px 0;
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
}
.studio-map-detail__facts .search-card__location { min-width: 0; white-space: normal; }
.studio-map-detail__distance { min-width: 0; }
.studio-map-detail__cta.fig-ui-button { width: 100%; margin-top: 16px; }

/* Map controls/help respond to offcanvas visibility, not page scroll. */
.studio-map-discovery { bottom: 88px; }
.studio-map-stage.is-list-open .studio-map-discovery { bottom: calc(var(--studio-map-list-height) + 24px); }
.studio-map-stage.is-list-open .studio-map-controls { bottom: calc(var(--studio-map-list-height) + 24px); }
.studio-map-stage.is-detail-open .studio-map-offcanvas-toggle { opacity: 0; pointer-events: none; }

/* First-use help is transient. */
.studio-map-discovery { transition: opacity .22s ease, transform .22s ease, visibility .22s ease, bottom .28s ease; }
.studio-map-stage.is-discovery-dismissed .studio-map-discovery {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
}

/* Toast / status. */
.studio-map-toast {
	position: fixed;
	z-index: 300;
	left: 50%;
	bottom: 26px;
	max-width: min(520px,calc(100% - 32px));
	padding: 12px 18px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	box-shadow: 0 14px 34px rgba(0,0,0,.22);
	transform: translateX(-50%);
}
.studio-map-toast[hidden] { display: none; }
.studio-map-map-status {
	position: absolute;
	z-index: 20;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(21,24,30,.12);
	transform: translate(-50%,-50%);
}
.studio-map-map-status[hidden] { display: none; }

/* Kakao CustomOverlay owns coordinate anchoring. */
.studio-map-kakao-overlay .studio-map-cluster,
.studio-map-kakao-overlay .studio-map-pin,
.studio-map-kakao-overlay .studio-map-photo-dot,
.studio-map-kakao-overlay .studio-map-photo-marker {
	position: relative;
	left: auto !important;
	top: auto !important;
	transform: none;
}
.studio-map-kakao-overlay .studio-map-cluster:hover,
.studio-map-kakao-overlay .studio-map-cluster:focus-visible,
.studio-map-kakao-overlay .studio-map-photo-dot:hover,
.studio-map-kakao-overlay .studio-map-photo-dot:focus-visible { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   Figma/common typography reuse + compact map search.
   -------------------------------------------------------------------------- */
/* The shared SearchLayers helper stores the clicked trigger position in these variables.
 * On the map microsite, place the common layer directly below that trigger, matching
 * the main/list anchored-search behavior without an extra hero-section offset. */
[data-page-variant="studio-map"] .desktop-filter-layer__panel {
	left: clamp(20px,var(--layer-left),calc(100vw - 380px));
	top: var(--layer-top);
}

.studio-map-quick-search {
	display: grid;
	grid-template-columns: 96px 106px minmax(0,1fr);
	align-items: center;
	width: 100%;
	height: 48px;
	padding: 4px;
	border: 1px solid var(--primary);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(21,24,30,.13);
	box-sizing: border-box;
}
.studio-map-search-filter,
.studio-map-keyword-search {
	position: relative;
	display: flex;
	min-width: 0;
	height: 36px;
	align-items: center;
}
.studio-map-search-filter {
	gap: 8px;
	justify-content: flex-start;
	padding: 0 14px;
	color: var(--ink);
}
.studio-map-search-filter::after {
	content: "";
	position: absolute;
	right: 0;
	top: 8px;
	width: 1px;
	height: 20px;
	background: var(--primary);
}
.studio-map-search-filter .fig-search__chevron {
	margin-left: auto;
}
.studio-map-search-filter:disabled {
	opacity: .45;
	cursor: default;
}
.studio-map-keyword-search {
	padding: 0 14px;
}
.studio-map-keyword-search .fig-ui-input {
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
}
.studio-map-keyword-search .fig-ui-input::placeholder {
	color: var(--text-tertiary);
	opacity: 1;
}
.studio-map-keyword-search .fig-ui-input:focus {
	border-color: transparent;
	box-shadow: none;
}
.studio-map-quick-search .studio-map-search-submit.fig-ui-button {
	display: none;
	width: 36px;
	min-width: 36px;
	height: 36px;
	padding: 0;
	justify-self: center;
	border-radius: 999px;
}


@media (min-width: 1025px) {
	.studio-map-search-layer { left: 18px; top: 18px; }
	.studio-map-search-result { top: 52px; width: 100%; }
	/* PC는 KPI 패널을 항상 표시합니다. generic button display:flex보다 specificity를 높여
	 * 모바일 전용 토글이 다시 노출되는 회귀를 막습니다. */
	.studio-map-controls .studio-map-overview-toggle,
	.studio-map-controls__divider--overview { display: none; }
}

@media (max-width: 1280px) and (min-width: 1025px) {
	.studio-map-search-panel { width: 350px; }
	.studio-map-quick-search { grid-template-columns: 82px 92px minmax(0,1fr); }
	.studio-map-search-filter { padding-inline: 10px; }
	/* 중간 폭 PC에서도 카테고리 자체를 430px로 다시 잘라내지 않습니다.
	 * 실제 버튼 묶음은 max-width 안에서만 스크롤되며 각 라벨 폭은 보존됩니다. */
	.studio-map-category-layer { max-width: min(860px,calc(100% - 48px)); }
	.studio-map-offcanvas--detail.offcanvas-end { width: 350px; }
	.studio-map-card-viewport { --studio-map-card-width: 296px; }
}

@media (max-width: 1024px) {
	body.page-studio-map { overflow: hidden; }
	.studio-map-stage { --studio-map-list-height: 184px; }
	.studio-map-main { height: calc(100dvh - 60px); padding-top: 0; background: #fff; }
	.studio-map-stage { height: 100%; }

	.studio-map-search-layer { left: 10px; right: 10px; top: 10px; width: auto; }
	.studio-map-search-toggle { display: none; }
	.studio-map-search-panel { position: relative; left: auto; top: auto; width: 100%; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
	.studio-map-quick-search { border-radius: 26px; }
	.studio-map-quick-search { grid-template-columns: minmax(0,1fr) 44px; width: 100%; height: 52px; padding: 4px; }
	.studio-map-search-filter { display: none; }
	.studio-map-keyword-search { height: 34px; padding: 0 12px; }
	.studio-map-quick-search .studio-map-search-submit.fig-ui-button { display: inline-flex; width: 40px; min-width: 40px; height: 40px; }
	.studio-map-search-result { top: calc(100% + 8px); width: 100%; max-height: min(400px,calc(100dvh - 180px)); }
	.studio-map-category-layer { left: 10px; right: 10px; top: 68px; width: auto; max-width: none; transform: none; }
	.studio-map-category-tabs {
		display: flex;
		width: 100%;
		height: 48px;
		margin: 0;
		overflow-x: auto;
		padding: 4px 6px;
		scroll-padding-inline: 6px;
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.studio-map-category-tabs::-webkit-scrollbar { display: none; }
	.studio-map-category-tabs > button[data-category] { scroll-snap-align: start; }

	.studio-map-overview { display: none; }
	.studio-map-stage.is-mobile-overview-open .studio-map-overview {
		display: grid;
		top: auto;
		right: 68px;
		bottom: 76px;
		width: min(292px,calc(100% - 88px));
		padding: 10px;
		border-radius: 18px;
		box-shadow: 0 12px 34px rgba(21,24,30,.14);
	}
	.studio-map-stage.is-list-open.is-mobile-overview-open .studio-map-overview { bottom: calc(var(--studio-map-list-height) + 12px); }
	.studio-map-overview__actions { gap: 6px; }
	.studio-map-overview__actions .fig-ui-button { min-width: 0; padding-inline: 7px; font-size: 11px; }
	.studio-map-discovery { display: none; }
	.studio-map-controls { right: 10px; top: auto; bottom: 76px; transform: none; transition: bottom .28s ease; }
	/* 모바일에서만 KPI 토글을 다시 활성화합니다. PC 숨김 규칙과 동일한 specificity를 사용합니다. */
	.studio-map-controls .studio-map-overview-toggle { display: flex; }
	.studio-map-controls__divider--overview { display: block; }
	.studio-map-stage.is-mobile-overview-open .studio-map-overview-toggle { background: var(--primary-surface); color: var(--primary); }
	.studio-map-stage.is-list-open .studio-map-controls { bottom: calc(var(--studio-map-list-height) + 12px); }
	.studio-map-stage.is-detail-open .studio-map-controls,
	.studio-map-stage.is-detail-open .studio-map-overview { display: none; }

	.studio-map-cluster--sm { --cluster-size: 60px; }
	.studio-map-cluster--md { --cluster-size: 70px; }
	.studio-map-cluster--lg { --cluster-size: 84px; }
	.studio-map-cluster--sm .search-card__price strong { font-size: 17px; line-height: 20px; }
	.studio-map-cluster--md .search-card__price strong { font-size: 19px; line-height: 21px; }
	.studio-map-cluster--lg .search-card__price strong { font-size: 21px; line-height: 23px; }
	.studio-map-cluster .fig-ui-label { min-height: 19px; padding-inline: 7px; font-size: 11px; line-height: 17px; }
	.studio-map-cluster.is-district.studio-map-cluster--sm { --cluster-size: 70px; }
	.studio-map-cluster.is-district.studio-map-cluster--md { --cluster-size: 78px; }
	.studio-map-cluster.is-district.studio-map-cluster--lg { --cluster-size: 86px; }
	.studio-map-photo-marker {
		--studio-map-photo-card-height: 84px;
		--studio-map-photo-media-width: 78px;
		width: min(278px,calc(100vw - 42px));
	}

	.studio-map-offcanvas--list.offcanvas-bottom {
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--studio-map-list-height);
		padding: 9px 10px 10px;
		border-radius: 20px 20px 0 0;
	}
	.studio-map-stage.is-list-open .studio-map-offcanvas-toggle { bottom: calc(var(--studio-map-list-height) - 1px); }
	.studio-map-offcanvas-toggle { bottom: 0; width: 84px; height: 32px; }
	.studio-map-offcanvas-toggle__handle { height: 32px; }
	.studio-map-dock__head { height: 42px; gap: 7px; }
	.studio-map-dock__head > .fig-ui-label { display: none; }
	.studio-map-dock__actions [data-role="studio-card-prev"],
	.studio-map-dock__actions [data-role="studio-card-next"] { display: none; }
	.studio-map-dock__body { height: 122px; }
	.studio-map-card-viewport { --studio-map-card-width: 252px; --studio-map-card-gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
	.studio-map-card-viewport::-webkit-scrollbar { display: none; }
	.studio-map-card.search-card {
		display: grid;
		grid-template-columns: 92px minmax(0,1fr);
		width: var(--studio-map-card-width);
		height: 108px;
		flex-basis: var(--studio-map-card-width);
		scroll-snap-align: start;
	}
	.studio-map-card .search-card__media { width: 92px; height: 106px; border-radius: 14px 0 0 14px; }
	.studio-map-card .search-card__image { object-fit: cover; object-position: center; }
	.studio-map-card .search-card__body { padding: 8px 9px; gap: 4px; }
	.studio-map-card .search-card__tags { max-width: 100%; }

	.studio-map-card-placeholder { display: none; }

	/* Detail reuses the same offcanvas DOM but enters from the bottom on mobile/tablet. */
	.studio-map-offcanvas--detail.offcanvas-end {
		top: auto;
		right: auto;
		bottom: 0;
		left: 50%;
		width: min(430px,100%);
		max-height: min(76dvh,calc(100% - 8px));
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		border-radius: 24px 24px 0 0;
		transform: translate(-50%,105%);
	}
	.studio-map-offcanvas--detail.offcanvas-end.show { transform: translate(-50%,0); }
	.studio-map-detail .studio-map-detail__media.search-card__media {
		height: auto;
		min-height: 0;
		aspect-ratio: 16/9;
		border-radius: 24px 24px 0 0;
	}
	.studio-map-detail .search-card__image { object-fit: cover; object-position: center; }
	.studio-map-toast { bottom: 18px; }
}

@media (max-width: 430px) {
	.studio-map-search-result { border-radius: 18px; }
	.studio-map-stage.is-mobile-overview-open .studio-map-overview {
		left: 10px;
		right: 68px;
		width: auto;
	}
	.studio-map-location-consent { align-items: flex-end; padding: 10px; }
	.studio-map-location-consent__panel { border-radius: 22px 22px 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	body.page-studio-map *,
	body.page-studio-map *::before,
	body.page-studio-map *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}