/* =============================================================================
   Gowa Floating Menu — 프론트엔드
   ============================================================================= */

/* ─── 래퍼 ─────────────────────────────────────────────────────────────────── */
#gowa-fm-wrap {
	pointer-events: none;
}

/* ─── PC: 우측 세로 pill ──────────────────────────────────────────────────── */
#gowa-fm-pc {
	position:   fixed;
	z-index:    9999;
	display:    flex;
	flex-direction: column;
	align-items: center;
	padding:    10px 0;
	pointer-events: auto;
	transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity   0.38s ease;
	/* background / radius / right / top|bottom → 인라인 style 로 주입 */
}

#gowa-fm-pc.is-hidden {
	transform: translateX(calc(100% + 60px));
	opacity: 0;
}

/* ─── PC 아이템 ───────────────────────────────────────────────────────────── */
#gowa-fm-pc .gowa-fm-item {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	/* 좌우(너비) / 상하 여백 → 인라인 style 변수로 주입 */
	padding:        var(--pc-pad-y, 12px) var(--pc-pad-x, 18px);
	text-decoration: none;
	color:          inherit;
	gap:            var(--pc-icon-gap, 5px);
	cursor:         pointer;
	transition:     opacity 0.15s;
	width:          100%;
	box-sizing:     border-box;
}

#gowa-fm-pc .gowa-fm-item:hover {
	opacity: 0.7;
}

#gowa-fm-pc .gowa-fm-icon {
	width:           32px;
	height:          32px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}

#gowa-fm-pc .gowa-fm-icon svg {
	width:  100%;
	height: 100%;
}

#gowa-fm-pc .gowa-fm-icon img {
	width:      32px;
	height:     32px;
	object-fit: contain;
}

#gowa-fm-pc .gowa-fm-text {
	/* font-size → 인라인 style */
	line-height:  1.2;
	white-space:  nowrap;
	text-align:   center;
	font-weight:  500;
}

/* ─── PC 구분선 (아이템 사이) ─────────────────────────────────────────────── */
#gowa-fm-pc .gowa-fm-item + .gowa-fm-item {
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* ─── 모바일: 하단 탭바 ──────────────────────────────────────────────────── */
#gowa-fm-mobile {
	position:    fixed;
	bottom:      0;
	left:        0;
	right:       0;
	z-index:     9999;
	display:     flex;
	flex-direction: row;
	align-items: stretch;
	pointer-events: auto;
	/* height → --mb-height CSS 변수로 주입 (기본 60px) */
	height:      var(--mb-height, 60px);
	/* iOS 홈바 safe-area 를 height 위에 추가 */
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-sizing:  content-box;
	/* background → 인라인 style 로 주입 */
	box-shadow:  0 -1px 8px rgba(0, 0, 0, 0.10);
}

#gowa-fm-mobile .gowa-fm-item {
	flex:            1;
	height:          100%;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         0 6px;
	text-decoration: none;
	color:           inherit;
	gap:             var(--mb-icon-gap, 4px);
	cursor:          pointer;
	transition:      opacity 0.15s;
	box-sizing:      border-box;
}

#gowa-fm-mobile .gowa-fm-item:hover,
#gowa-fm-mobile .gowa-fm-item:active {
	opacity: 0.7;
}

#gowa-fm-mobile .gowa-fm-icon {
	width:           var(--mb-icon-size, 26px);
	height:          var(--mb-icon-size, 26px);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}

#gowa-fm-mobile .gowa-fm-icon svg {
	width:  100%;
	height: 100%;
}

#gowa-fm-mobile .gowa-fm-icon img {
	width:      var(--mb-icon-size, 26px);
	height:     var(--mb-icon-size, 26px);
	object-fit: contain;
}

#gowa-fm-mobile .gowa-fm-text {
	/* font-size → 인라인 style */
	line-height: 1.2;
	text-align:  center;
	font-weight: 500;
	/* PNG 아이콘 여백 보정용 위치 조정 */
	margin-top:  var(--mb-text-offset, 0px);
}

/* 모바일 탭 사이 구분선 */
#gowa-fm-mobile .gowa-fm-item + .gowa-fm-item {
	border-left: 1px solid rgba(0, 0, 0, 0.07);
}

/* ─── 반응형: PC 메뉴는 768px 이하에서 숨김 / 모바일은 768px 초과에서 숨김 ── */
@media (max-width: 768px) {
	#gowa-fm-pc {
		display: none;
	}
}

@media (min-width: 769px) {
	#gowa-fm-mobile {
		display: none;
	}
}