/* 클론 틀 — LMEDRP를 그대로 두고 「카테고리(메뉴 묶음)」만 왼쪽 메뉴에서 위쪽 막대로 옮긴다(10/26 사용자 결정).
   색·글자·간격은 원본 왼쪽 메뉴(site/original/side-menu.css, #g_top_menu .g_menu_article) 값을 그대로 옮겼다.
   - 막대 바탕 #303030(원본 왼쪽 메뉴 바탕), 묶음 글자 흰색 굵게 1.1rem, 누르면 하늘색 #01C2D1
   - 하위 목록 바탕 #504f4f, 글자 #ddd, 올리면 rgba(255,255,255,.216), 폭 20rem
   디자인 시스템은 아직 입히지 않는다(site/studioflow/ 는 나중 단계). */

/* 원본 body는 가로 flex(왼쪽 메뉴 + 본문). 위쪽 막대를 얹고 그 아래를 원본처럼 가로로 둔다 */
body.sf-clone { flex-direction: column; align-items: stretch; --sf-bar-h: 44px; }
.sf-row { flex: 1; display: flex; align-items: flex-start; min-height: 0; width: 100%; }
.sf-row > main.g_main_content { flex: 1; min-width: 0; height: calc(100vh - var(--sf-bar-h)); }
/* 토글·고정 핀(.absolute_wrap)은 원본처럼 왼쪽 메뉴 오른쪽 밖으로 1.5rem 튀어나온다 → 잘리지 않게 overflow를 열고 본문보다 위에 둔다 */
.sf-row > #g_top_menu { position: relative; z-index: 25; align-self: stretch; height: calc(100vh - var(--sf-bar-h)); overflow: visible; }

/* 가운데 정렬(10/26 사용자 요청) */
.sf-topbar {
  flex: none; position: relative; z-index: 30; display: flex; align-items: center; justify-content: center;
  height: var(--sf-bar-h); padding: 0 10px; background-color: #303030; box-sizing: border-box;
}
.sf-topbar .main_menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 1.1rem; }
.sf-topbar .main_menu > li { position: relative; }
.sf-topbar .main_menu > li > a {
  display: flex; align-items: center; gap: 10px; padding: 3px 10px; box-sizing: border-box;
  border-radius: 8px; color: white; font-weight: bold; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sf-topbar .main_menu > li > a:hover,
.sf-topbar .main_menu > li.is-open > a { background-color: #01C2D1; }
.sf-topbar .main_icon_img { display: flex; align-items: center; }
.sf-topbar .main_icon_img img { display: block; max-height: 22px; }

/* 하위 목록: 원본은 묶음 오른쪽으로 열린다. 위쪽 막대에서는 묶음 아래로 */
.sf-topbar .sub_menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 31;
  width: 20rem; max-height: 40rem; overflow-y: auto; padding: .5rem; margin: 0; list-style: none;
  background-color: #504f4f; border-radius: var(--g_border_radius, 10px); box-sizing: border-box;
}
.sf-topbar .main_menu > li.is-open > .sub_menu { display: block; }
.sf-topbar .sub_menu::-webkit-scrollbar { width: 8px; }
.sf-topbar .sub_menu::-webkit-scrollbar-thumb { background-color: #1F1F1F; border-radius: 10px; }
.sf-topbar .sub_menu_item { display: flex; align-items: center; justify-content: space-between; }
.sf-topbar .sub_menu_item > a { flex: 1; display: block; padding: .5rem 1rem; box-sizing: border-box; color: #ddd; text-decoration: none; font-weight: 500; }
.sf-topbar .sub_menu_item > a:hover { background-color: rgba(255, 255, 255, 0.216); }
.sf-topbar .sub_menu_item .favorites-icon { cursor: pointer; }
/* 툴팁 말풍선(clone.js가 [data-sf-tip]에 마우스를 올리면 띄운다). 원본 LMEDRP 말풍선 모양: 반투명 검정 · 회색 테두리 · 12px
   원본은 tippy.js가 g_tooltip 속성으로 띄운다. 디자인 시스템 모양은 studioflow/ds-tooltip.css */
.sf-tip {
  position: fixed; z-index: 10000; max-width: 350px; box-sizing: border-box; padding: 5px 9px;
  border: 1px solid #888; border-radius: 4px; background: rgba(0, 0, 0, 0.85); color: #fff;
  font: 400 12px/1.4 Arial, "Malgun Gothic", sans-serif; text-align: left; white-space: normal; pointer-events: none;
}
.sf-tip[hidden] { display: none; }
[data-sf-tip] { cursor: help; }

/* 클론이 아직 없는 메뉴: 원본의 권한 없는 메뉴(.none_access)와 같은 모양 */
.sf-topbar .sub_menu_item > .none_access { flex: 1; display: block; padding: .5rem 1rem; color: #999; cursor: default; }