.floating_menu_module { position: fixed; right: 30px; z-index: 99999; }

/* 기본 위/아래 버튼(#btnBott)과 겹치지 않도록 플로팅 메뉴를 위로 밀어올림 (CLICKN-2526).
   기본 버튼은 태블릿/모바일(max-width:1023px)에서만 노출되므로 그 구간에서만 적용한다.
   위치(top/center)가 겹치지 않는 값이면 FloatingMenuRender.syncDefaultScrollButtons()가
   이 클래스를 아예 부여하지 않는다. */
@media only screen and (max-width: 1023px) {
    /* 기본 버튼 둘 다 남음(위/아래 34px 버튼 2개 + 간격) */
    .floating_menu_module.fm_above_default_btn { bottom: 118px !important; }
    /* 기본 버튼 하나만 남음(위/아래 중 하나가 플로팅 메뉴와 중복돼 숨겨진 경우) */
    .floating_menu_module.fm_above_default_btn_single { bottom: 80px !important; }
    /* 기본 버튼이 둘 다 사라짐(위/아래 둘 다 중복) — 더 이상 자리를 비켜줄 필요가 없으므로 화면 하단에 더 붙인다 */
    .floating_menu_module.fm_default_btn_gone { bottom: 10px !important; }

    /* 모바일 GNB 오픈 시 플로팅 메뉴 감춤 (CLICKN-2534).
       .header_module의 z-index가 헤더 설정에 따라 계속 달라져 z-index로는 안전하게 못 이겨서 visibility 사용. */
    body.aside_open .floating_menu_module { visibility: hidden; }
}

/* 타입별 레이아웃 */
.floating_menu_module[data-content-type2="floatingMenu-type-A"] .fm_list > li,
.floating_menu_module[data-content-type2="floatingMenu-type-C"] .fm_list > li,
.floating_menu_module[data-content-type2="floatingMenu-type-D"] .fm_list > li { flex-direction: column; align-items: center; }
.floating_menu_module[data-content-type2="floatingMenu-type-A"] .fm_list > li { padding-top: 20px; }
/* .floating_menu_module[data-content-type2="floatingMenu-type-B"] .fm_list { gap: 6px; } */
.floating_menu_module[data-content-type2="floatingMenu-type-B"] .fm_list > li { gap: 10px; justify-content: center; padding: 10px 5px; }
/* flex:1 로 남은 폭을 항상 채워야 메뉴명 글자 수와 무관하게 아이콘 위치가 고정된다
   (li 의 justify-content:center 가 아이콘+메뉴명 묶음을 통째로 가운데 정렬하는데, 이 묶음의 폭이
   메뉴명 길이에 따라 달라지면 아이콘 위치도 함께 흔들림). */
.floating_menu_module[data-content-type2="floatingMenu-type-B"] .fm_name { flex: 1; justify-content: flex-start; text-align: left; }
.floating_menu_module[data-content-type2="floatingMenu-type-D"] .fm_name { display: none; }
.floating_menu_module[data-content-type2="floatingMenu-type-F"] .fm_list { gap: 5px; align-items: center; }
.floating_menu_module[data-content-type2="floatingMenu-type-E"] .fm_list { gap: 5px; align-items: stretch; }
.floating_menu_module[data-content-type2="floatingMenu-type-E"] .fm_list > li.fm_item { flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: auto; height: auto; min-width: 84px; min-height: 84px; aspect-ratio: 1 / 1; padding: 10px; box-sizing: border-box; white-space: nowrap; border: 1px solid #c6d2dc; border-radius: 50%; }
.floating_menu_module[data-content-type2="floatingMenu-type-F"] .fm_list > li.fm_item { flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 10px; box-sizing: border-box; border: 1px solid #c6d2dc; border-radius: 50%; }
.floating_menu_module[data-content-type2="floatingMenu-type-F"] .fm_name { display: none; }

/* 편집 중 배지 — 다이얼로그 열림 시에만 노출. z-index:-1 로 in-flow 인 .fm_list 아래에 깔아 .fm_list 가 위에 보이게.
   bottom 을 100% 에서 살짝 띄워(3px) 편집중 테두리(.editing:after, 같은 오렌지색) 상단 선과 안 겹치게 한다.
   가로 폭(left/right)은 outline(2px, inset:0 기준 바깥으로 그려짐)까지 포함한 메뉴 전체 폭과 맞춘다. */
.floating_menu_module .floating_menu_editing_badge { display: none; position: absolute; left: -2px; right: -2px; bottom: calc(100% + 3px); z-index: -1; padding: 10px; background: #f58800; color: #fff; font-size: 15px; font-weight: 500; text-align: center; border-radius: 2px 2px 0 0; }
.floating_menu_module.options_dialog_settings .floating_menu_editing_badge { display: block; }

/* 컨테이너 안 항목 리스트 */
.floating_menu_module .fm_list { min-width: 66px; display: flex; flex-direction: column; width: 100%; }
/* gap 대신 항목 padding-top 으로 간격을 주어 hover 배경이 항목 사이 빈틈 없이 채워지도록 한다. */
.floating_menu_module .fm_list > li { display: flex;  gap: 2px; padding: 10px; width: 100%; border-bottom: 1px solid #c6d2dc; }
.floating_menu_module .fm_list > li:last-child { border-bottom: none; }
.floating_menu_module .fm_icon { display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 6px; }
.floating_menu_module .fm_icon > i { display: inline-block; background-color: currentColor; mask: center / contain no-repeat; vertical-align: middle; }
.floating_menu_module .fm_name { display: flex; padding: 4px 10px; justify-content: center; align-items: center; border-radius: 90px; text-align: center; line-height: normal; transition: color .15s; }

/* 강조(hover) 전환 — 색상값(--fm-accent-*)은 floatingMenuStyleRender 가 blockItem 에 커스텀 프로퍼티로만
   갱신하고, 실제 hover 시 색 전환은 여기 CSS 가 담당한다(JS mouseenter/mouseleave 미사용).
   !important 는 render() 가 .fm_item 에 심어둔 인라인 기본색(color/background-color)을 이겨야 하기 때문. */
.floating_menu_module .fm_item { cursor: pointer; transition: background-color .15s, box-shadow .15s, color .15s; }
.floating_menu_module .fm_item:hover {
    color: var(--fm-accent-color, #ffffff) !important;
    background-color: var(--fm-accent-bg, #f58800) !important;
    box-shadow: var(--fm-accent-shadow, none) !important;
}

.floating_menu_module .fm_icon .i_top { mask-image: url("/images/editor/option/floating_menu/i_top.svg"); width: 18px; height: 10px; }
.floating_menu_module .fm_icon .i_bottom { mask-image: url("/images/editor/option/floating_menu/i_bottom.svg"); width: 18px; height: 11px; }
.floating_menu_module .fm_icon .i_naverTalk { mask-image: url("/images/editor/option/floating_menu/i_naverTalk.svg"); width: 27px; height: 27px; }
.floating_menu_module .fm_icon .i_custom { mask-image: url("/images/editor/option/floating_menu/i_custom.svg"); }

/* 모바일: right:30px 고정 앵커에 맞춰 우측 여백만 줄인다.
   축소 비율(transform/transform-origin)은 floatingMenuStyleRender.js::_fitToViewport() 가 전담(같은 768px 기준) —
   여기서 같이 선언하면 실제로는 인라인 스타일에 항상 덮여써져 무시되는 죽은 규칙이 된다. */
@media (max-width: 768px) {
    .floating_menu_module { right: 10px; }
}