:root {
	--map-ink: #17251e;
	--map-green: #23734c;
	--map-muted: #69756e;
	--map-red: #f03e27;
	--map-line: rgba(23, 37, 30, 0.12);
	--color-primary: var(--map-ink);
	--color-primary-hover: #263a30;
	--color-text: var(--map-ink);
	--color-muted: var(--map-muted);
	--focus-ring: 0 0 0 3px rgba(35, 115, 76, 0.25);
}

html, body, #map { width: 100%; height: 100%; }

.map-page {	overflow: hidden; background: #dce3da; }
#map { position: fixed;	inset: 0; }

.leaflet-control-zoom {	display: none; }
.leaflet-control-attribution { font-size: 10px; }

.map-brand { position: fixed; z-index: 800; top: max(22px, env(safe-area-inset-top)); left: 28px;
	display: flex; align-items: center;	gap: 10px; padding: 9px 9px 9px 9px; 
	border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 99px; background: rgba(255, 255, 255, 0.91);
	box-shadow: 0 8px 28px rgba(30, 49, 39, 0.13);	backdrop-filter: blur(14px); 
}

.map-brand_icon, .map-location_icon {	display: grid; place-items: center;	color: var(--map-green); }
.map-brand_icon { width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.map-brand strong {	font-size: 16px; }
.map-brand small { display: block; margin-top: 1px;	color: var(--map-muted); font-size: 12px; }
.map-panel { position: fixed; z-index: 800;	left: 28px;	bottom: 28px; width: min(390px, calc(100vw - 56px));
	padding: 24px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 26px;
	background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 50px rgba(19, 37, 28, 0.17);
	backdrop-filter: blur(20px); transition: transform 0.3s ease, opacity 0.3s ease;
	will-change: transform;
}
.map-panel.is-dragging { transition: none; user-select: none; }
.map-panel.is-closed { opacity: 0; pointer-events: none; transform: translateY(calc(100% + 40px)); }
.map-panel_drag-handle {
	display: block;
	width: 100%;
	padding: 0 0 14px;
	border: 0;
	background: transparent;
	cursor: grab;
	touch-action: none;
}

.map-panel_drag-handle span {
	display: block;
	width: 48px;
	height: 5px;
	margin: 0 auto;
	border-radius: 999px;
	background: rgba(23, 37, 30, 0.25);
}

.map-panel.is-dragging .map-panel_drag-handle {
	cursor: grabbing;
}


.map-status { display: flex; align-items: center; gap: 8px;	margin: 0 0 12px; color: var(--map-green);
	font-size: 12px; font-weight: 800; letter-spacing: 0.08em; 
}

.map-status_pulse { width: 8px; height: 8px; border-radius: 50%; background: #35a66f;	box-shadow: 0 0 0 6px rgba(53, 166, 111, 0.14); }
.map-panel .title {	margin-bottom: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.055em; }
.map-description { min-height: 44px; margin: 12px 0 22px; font-size: 14px; line-height: 1.6; }
.map-location {	display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center;
	padding: 14px 0; border-top: 1px solid var(--map-line);	border-bottom: 1px solid var(--map-line);
}

.map-location_icon { width: 42px; height: 42px; border-radius: 14px; background: #e9f2ec; }
.map-location_copy { min-width: 0; }
.map-location_copy small, .map-location_copy strong {	display: block; }
.map-location_copy small {	margin-bottom: 3px;	color: var(--map-muted); }
.map-location_copy strong { font-size: 14px; }
.map-actions { margin-top: 18px; }
.map-actions_locate, .map-actions_copy { min-height: 48px; border-radius: 15px; }
.map-actions_locate { flex: 1; }
.map-actions_copy { width: 48px; padding: 0; }
.map-controls {	position: fixed; z-index: 700; right: 24px;	bottom: 28px; display: grid; gap: 10px; justify-items: end; }
.map-controls_button {	width: 46px; height: 46px; min-height: 46px; padding: 0;
	border-color: rgba(255, 255, 255, 0.75); border-radius: 15px; background: rgba(255, 255, 255, 0.93);
	box-shadow: 0 8px 24px rgba(30, 49, 39, 0.14);
}

.current-position { position: relative; width: 22px; height: 22px; border: 3px solid #fff;
	border-radius: 50%;	background: var(--map-red); box-shadow: 0 4px 6px rgba(21, 33, 27, 0.35);
}

.current-position::before {	position: absolute;	z-index: -1; inset: -12px; border-radius: 50%;
	background: rgba(35, 115, 76, 0.2); content: ""; animation: marker-pulse 2.2s ease-out infinite;
}

@keyframes marker-pulse {
	from { transform: scale(0.45); opacity: 1; }
	to { transform: scale(1.35); opacity: 0; }
}

.map-toast { position: fixed; z-index: 900; top: 28px; left: 50%; max-width: calc(100vw - 40px);
	padding: 11px 16px; border-radius: 12px; color: #fff; background: rgba(23, 37, 30, 0.93);
	font-size: 13px; opacity: 0; pointer-events: none; transform: translate(-50%, -12px);
	transition: 0.25s;
}

.map-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
	.map-brand {
	display: none;
	}

	.map-top-actions {
		top: calc(max(14px, env(safe-area-inset-top)) + 54px);
		right: 14px;
		left: 14px;

		justify-content: flex-end;
	}
	.map-brand_icon { width: 30px; height: 30px; }
	.map-panel { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px);
		padding: 19px; border-radius: 22px;
	}

	.map-panel .title { font-size: 28px; }
	.map-description { min-height: 0; margin: 9px 0 14px; }
	.map-location { padding: 11px 0; }
	.map-actions { margin-top: 14px; }
	.map-controls {	right: 14px; bottom: 315px; }

	/* 유종 선택 css */
	.fuel-filter {height: 42px; }
	.fuel-select { min-width: 118px; }
	.fuel-select_button { padding: 0 13px; font-size: 13px; }
	.fuel-select_options { min-width: 140px; }
	.fuel-select_option { min-height: 39px; font-size: 13px; }
	/* 정유사 카테고리 */
	.brand-filter { height: 42px; }
	.brand-filter_button { min-width: 110px; padding: 0 12px; font-size: 13px; }
	.brand-filter_panel { position: fixed; top: 66px; right: 14px;
		left: 14px; width: auto; max-height: calc(100vh - 90px);
	}
}

.map-brand_image { display: block; border: 0; pointer-events: none; }




.map-type-control {
	display: flex;
	gap: 4px;
	padding: 5px;
	border: 1px solid rgba(23, 37, 30, 0.1);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 6px 20px rgba(23, 37, 30, 0.18);
}

.map-type-button {
	display: flex;
	width: 54px;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 5px;
	border: 0;
	border-radius: 11px;
	color: #68736d;
	background: transparent;
	font-size: 11px;
	font-weight: 700;
}

.map-type-button.active {
	color: var(--map-green);
	background: #e9f2ec;
}

.map-type-thumbnail {
	display: block;
	width: 42px;
	height: 32px;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 8px;
	background-position: center;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(23, 37, 30, 0.12);
}

.map-type-button.active .map-type-thumbnail {
	border-color: var(--map-green);
}

/* 일반 지도 느낌 */
.map-type-thumbnail--normal {
	background-color: #e9eee8;
	background-image:
		linear-gradient(
			28deg,
			transparent 42%,
			#fff 43%,
			#fff 50%,
			transparent 51%
		),
		linear-gradient(
			-35deg,
			transparent 46%,
			#b7d7b9 47%,
			#b7d7b9 57%,
			transparent 58%
		),
		linear-gradient(
			90deg,
			transparent 46%,
			#d4b879 47%,
			#d4b879 53%,
			transparent 54%
		);
}

/* 위성 지도 느낌 */
.map-type-thumbnail--satellite {
	background-color: #52694c;
	background-image:
		radial-gradient(
			circle at 25% 30%,
			#7e946a 0 17%,
			transparent 18%
		),
		radial-gradient(
			circle at 70% 65%,
			#3d6974 0 24%,
			transparent 25%
		),
		linear-gradient(
			135deg,
			#665d43 0 35%,
			#486b42 36% 65%,
			#786c4e 66%
		);
}


/* */



.station-marker-price {
	display: flex;
	align-items: center;
	gap: 3px;
	vertical-align: middle;
}

.station-marker-brand,
.station-marker-brand-image {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border: 1px solid #ddd;
	border-radius: 50%;
	background: #fff;
}

.station-marker-other-image {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	background: #fff;
}

.station-marker-brand-image {
	display: block;
	object-fit: contain;
}
.station-marker-oil {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 12px;
	font-weight: 500;
	vertical-align: middle;
}

.station-marker-oil strong {
	font-weight: 900;
}



/* 지도에 항상 표시되는 주유소 가격표 */
.leaflet-tooltip.station-price-label {
	padding: 2px 6px 2px 3px;
	border: 1px solid #73abfa;
	border-radius: 999px;
	color: #bbb;
	background: #fff;
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
}

/* 툴팁 화살표 제거 */
.leaflet-tooltip.station-price-label::before {
	display: none;
}


/* popup */
.station-detail_name {
	margin: 0 0 8px;
	font-size: 24px;
}

.station-detail_address {
	margin: 0 0 18px;
	color: var(--map-muted);
	font-size: 14px;
}


.station-detail_prices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}

.station-detail_price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
	padding: 9px 11px;
	border: 1px solid #e2e8f0;
	border-radius: 9px;
	background: #f8fafc;
	font-size: 13px;
}

.station-detail_price-name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: #475569;
	white-space: nowrap;
}

.station-detail_price-name i {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.station-detail_price strong {
	color: #0f172a;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.station-price-history {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #e2e8f0;
}

.station-price-history_title {
	margin: 0 0 10px;
	color: #0f172a;
	font-size: 15px;
	font-weight: 700;
}

.station-price-chart {
	position: relative;
	width: 100%;
}

.station-price-chart_legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 8px;
}

.station-price-chart_legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #475569;
	font-size: 11px;
	white-space: nowrap;
}

.station-price-chart_legend-item i {
	display: inline-block;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.station-price-chart_scroll {
	width: 100%;
	overflow: visible;
}

.station-price-chart_svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.station-price-chart_point {
	cursor: pointer;
	transition:
		r 0.15s ease,
		stroke-width 0.15s ease;
}

.station-price-chart_point:hover {
	r: 6px;
	stroke-width: 2.5;
}

.station-price-chart_tooltip {
	
	position: absolute;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 2px;
		max-width: calc(100% - 16px);
	padding: 7px 9px;
	border-radius: 7px;
	background: rgba(15, 23, 42, 0.94);
	color: #ffffff;
	font-size: 11px;
	line-height: 1.35;
	pointer-events: none;
	transform: translate(-50%, -100%);
	box-shadow: 0 5px 15px rgba(15, 23, 42, 0.2);
}

.station-price-chart_tooltip[hidden] {
	display: none;
}

.station-price-chart_tooltip strong {
	font-size: 12px;
}

.station-price-chart_tooltip span {
	color: #cbd5e1;
	white-space: nowrap;
}



.map-location-loading {
	position: fixed;
	z-index: 700;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #475569;
	background: #e8ede9;
	font-size: 14px;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}

.map-location-loading.is-hidden {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}


/* 주유소 마커 추가 */
.station-dot-icon {
	background: transparent;
	border: 0;
}

.station-dot {
	display: block;
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
	box-sizing: border-box;
}

.station-dot--has-price {
	background: #3978d4;
}

.station-dot--no-price {
	background: #77a8f1;
	opacity: 0.7;
}


/* popup_user */
/* 오른쪽 상단 유종·사용자 메뉴 */
.map-top-actions {
	position: fixed;
	z-index: 850;
	top: max(22px, env(safe-area-inset-top));
	right: 24px;

	display: flex;
	align-items: center;
	gap: 10px;
}

/* ******************************** */
/* 유종 선택 영역 */
/* ******************************** */
.fuel-filter {
	display: flex;
	align-items: center;
	height: 46px;
	padding: 0 14px;

	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 15px;

	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 24px rgba(30, 49, 39, 0.14);
	backdrop-filter: blur(14px);
}

/* 유종 select */
.fuel-filter {
	position: relative;
	height: 46px;
	padding: 0;

	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 15px;

	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 8px 24px rgba(30, 49, 39, 0.14);
	backdrop-filter: blur(14px);
}

.fuel-select {
	position: relative;
	min-width: 130px;
	height: 100%;
}

.fuel-select_button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

	width: 100%;
	height: 100%;
	padding: 0 15px;

	border: 0;
	border-radius: 15px;

	color: #17251e;
	background: transparent;

	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-align: left;

	cursor: pointer;
}

.fuel-select_button:hover {
	background: rgba(35, 115, 76, 0.05);
}

.fuel-select_button:focus,
.fuel-select_button:focus-visible {
	outline: none;
}

/* 아래 방향 화살표 */
.fuel-select_arrow {
	width: 8px;
	height: 8px;
	margin-top: -4px;

	border-right: 2px solid #17251e;
	border-bottom: 2px solid #17251e;

	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.fuel-select.is-open .fuel-select_arrow {
	margin-top: 4px;
	transform: rotate(225deg);
}

/* 펼쳐지는 목록 */
.fuel-select_options {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 8px);
	right: 0;

	width: 100%;
	min-width: 150px;
	padding: 6px;

	border: 1px solid rgba(23, 37, 30, 0.08);
	border-radius: 14px;

	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 14px 40px rgba(19, 37, 28, 0.2);
	backdrop-filter: blur(18px);

	overflow: hidden;
}

.fuel-select_options[hidden] {
	display: none;
}

.fuel-select_option {
	position: relative;
	display: flex;
	align-items: center;

	width: 100%;
	min-height: 40px;
	padding: 0 12px;

	border: 0;
	border-radius: 9px;

	color: #33443b;
	background: transparent;

	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-align: left;

	cursor: pointer;
}

.fuel-select_option:hover,
.fuel-select_option:focus-visible {
	outline: none;
	color: #17251e;
	background: rgba(35, 115, 76, 0.08);
}

.fuel-select_option.is-selected {
	color: #17613d;
	background: rgba(35, 115, 76, 0.12);
	font-weight: 700;
}

.fuel-select_option.is-selected::after {
	position: absolute;
	right: 12px;

	color: #23734c;
	content: "✓";
	font-size: 13px;
	font-weight: 800;
}
/* 사용자 버튼 */
.account-button {
	display: grid;
	place-items: center;

	width: 46px;
	height: 46px;
	padding: 0;

	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;

	color: #17251e;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 24px rgba(30, 49, 39, 0.14);
	backdrop-filter: blur(14px);

	font-size: 20px;
	line-height: 1;

	cursor: pointer;
}

.account-button:hover {
	background: #fff;
	transform: translateY(-1px);
}


/* 정유사 카테고리 */
.brand-filter {
	position: relative;
	height: 46px;
}

.brand-filter_button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	min-width: 132px;
	height: 100%;
	padding: 0 15px;

	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 15px;

	color: #17251e;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 8px 24px rgba(30, 49, 39, 0.14);
	backdrop-filter: blur(14px);

	font-family: inherit;
	font-size: 14px;
	font-weight: 700;

	cursor: pointer;
}

.brand-filter_button:hover {
	background: #fff;
}

.brand-filter_button:focus,
.brand-filter_button:focus-visible {
	outline: none;
}

.brand-filter_arrow {
	width: 8px;
	height: 8px;
	margin-top: -4px;

	border-right: 2px solid #17251e;
	border-bottom: 2px solid #17251e;

	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.brand-filter.is-open .brand-filter_arrow {
	margin-top: 4px;
	transform: rotate(225deg);
}

.brand-filter_panel {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 8px);
	right: 0;

	width: 250px;
	max-height: min(520px, calc(100vh - 100px));
	padding: 10px;

	border: 1px solid rgba(23, 37, 30, 0.09);
	border-radius: 17px;

	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 16px 45px rgba(19, 37, 28, 0.2);
	backdrop-filter: blur(18px);

	overflow-y: auto;
}

.brand-filter_panel[hidden] {
	display: none;
}

.brand-filter_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 7px 10px;
}

.brand-filter_header strong {
	color: #17251e;
	font-size: 14px;
}

.brand-filter_reset {
	padding: 5px 8px;
	border: 0;
	border-radius: 7px;

	color: #23734c;
	background: rgba(35, 115, 76, 0.08);

	font-family: inherit;
	font-size: 11px;
	font-weight: 700;

	cursor: pointer;
}

.brand-filter_item {
	display: flex;
	align-items: center;
	gap: 10px;

	min-height: 42px;
	padding: 0 9px;
	border-radius: 10px;

	color: #33443b;
	font-size: 13px;

	cursor: pointer;
}

.brand-filter_item:hover {
	background: rgba(35, 115, 76, 0.06);
}

.brand-filter_item input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.brand-filter_check {
	position: relative;
	flex: 0 0 auto;

	width: 18px;
	height: 18px;

	border: 1px solid #b7c2bc;
	border-radius: 6px;
	background: #fff;
}

.brand-filter_item input:checked + .brand-filter_check {
	border-color: #23734c;
	background: #23734c;
}

.brand-filter_item input:checked + .brand-filter_check::after {
	position: absolute;
	top: 3px;
	left: 6px;

	width: 4px;
	height: 8px;

	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;

	content: "";
	transform: rotate(45deg);
}

.brand-filter_item input:focus-visible + .brand-filter_check {
	box-shadow: 0 0 0 3px rgba(35, 115, 76, 0.18);
}

.brand-filter_item img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.brand-filter_name {
	flex: 1;
	font-weight: 600;
}

.brand-filter_divider {
	height: 1px;
	margin: 5px 8px;
	background: rgba(23, 37, 30, 0.08);
}

.station-dot--selected {
	background: #3978d4;
	opacity: 1;
}

.station-dot--unselected {
	background: #9ca3af;
	opacity: 0.55;
}