@charset "utf-8";

/*------------------------------------*\
	BRANCH MAP
	- 지점 카드 내 지도 (기본 / 전체화면)
\*------------------------------------*/

.branch-map {
	position: absolute;
	bottom: 20px;
	left: 50%;
	width: calc(100% - 40px);
	height: 0;
	overflow: hidden;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 8px;
	background: #ccc;
	opacity: 0;
	transform: translateX(-50%);
}

.branch-card.is-open .branch-map {
	height: 220px;
	opacity: 1;
}

/* 전체화면 상단 그라데이션 */
.branch-map::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	display: none;
	height: 200px;
	background: linear-gradient(180deg, rgb(0 0 0 / 80%) 10%, rgb(0 0 0 / 0%) 100%);
}

.branch-map__canvas {
	height: 100%;
}

.branch-map__expand {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("../../img/btn-full.svg") no-repeat center / cover;
}

.branch-map__title {
	position: absolute;
	top: 44px;
	left: 16px;
	z-index: 2;
	display: none;
	gap: 4px;
}

.branch-map__title-link {
	display: flex;
	gap: 5px;
	align-items: center;
	color: #fff;
	font-size: var(--txt-heading);
	font-weight: 700;
}

.branch-map__title-link::after {
	content: "";
	width: 24px;
	height: 24px;
	background: url("../../img/btn-call.svg") no-repeat center / cover;
}

.branch-map__actions {
	position: absolute;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 2;
	display: none;
	gap: 4px;
	justify-content: space-between;
	width: calc(100% - 32px);
}

.branch-map__action {
	width: 100%;
	min-width: 0;
}

/* 전체화면 */
.branch-card.is-open .branch-map.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 50;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0;
	background: #fff;
	transform: none;
}

.branch-map.is-fullscreen::before {
	display: block;
}

.branch-map.is-fullscreen .branch-map__expand {
	top: 44px;
	right: 16px;
	bottom: auto;
	background-image: url("../../img/btn-close.svg");
}

.branch-map.is-fullscreen .branch-map__title,
.branch-map.is-fullscreen .branch-map__actions {
	display: flex;
}

body:has(.branch-map.is-fullscreen) {
	overflow: hidden;
}

@media (width <= 380px) {
	.branch-map__action {
		font-size: 13px;
	}
}