@charset "utf-8";
/* ============================================================================
라이브몰프로 myadmin · 상단바 레이아웃 스킨 mp_topbar_v1.css
2026-07-26 · 요청: "탑메뉴 왼쪽 끝까지 + 로고 + 메뉴 아이콘 + 글자 18px"
----------------------------------------------------------------------------
★ myadmin 은 상단바를 그리는 시스템이 3종이다. 이 파일은 그중 2종을 담당한다.
① /myadmin/2.0/* (Vite SPA) → 별도 파일 mp20_topbar_v1.css
② madv2 React 셸 (.madv2-*) → 이 파일
③ 클래식 ASP (#topmenu) → 이 파일
②③ 은 둘 다 `_include/header.asp` 를 거치므로 여기서 한 번에 링크한다.
★ 색·활성표시는 기존 값을 그대로 둔다. 바꾸는 것은 배치·로고·글자크기·아이콘뿐.
============================================================================ */
/* ===================================================== 공통 : 로고 아이콘 글꼴 */
#topmenu .wrap-topmenu > .mp-logo-link,
.madv2-topmenu-inner > .mp-logo-link{
position:absolute; left:0; top:0;
width:214px; height:68px; z-index:5;
display:block; background:transparent; border:0;
}
/* ============================================================ ③ 클래식 ASP */
/* ★좌측메뉴가 있는 클래식 페이지는 #topmenu 에 margin-left:220px 이 걸려 있고
width 가 컨테이너보다 커서 오른쪽 메뉴가 잘린다. 전폭으로 되돌린다. */
#topmenu{
/* ★#topmenu 에 위/아래 padding 이 있어 height 를 고정하면 안쪽 .wrap-topmenu(68px)가 잘린다.
높이는 .wrap-topmenu 가 정하게 두고 padding 만 없앤다. */
height:auto !important; min-height:0 !important; overflow:visible !important;
padding-top:0 !important; padding-bottom:0 !important;
margin-left:0 !important;
margin-right:0 !important;
width:auto !important;
max-width:none !important;
box-sizing:border-box;
}
/* ★2026-08-08 : 탑메뉴 위쪽 여백 24px→5px(사용자 지정). 이 24px 는 css/common.css 의
전역 `body{padding:24px}`(레거시 TABLE 바디, 전 라이브몰프로 사이트 공용) 에서 온다.
좌우/아래 여백(.rightmenuWrap 등)까지 건드리면 다른 화면이 흔들리므로 top 만 스코프 오버라이드한다. */
body{ padding-top:5px !important; }
/* 좌측메뉴는 원래 position:fixed 라 스크롤해도 따라다녔다.
요청: 상단바·좌측메뉴 모두 페이지와 함께 스크롤되게 → absolute 로 바꿔 문서에 붙인다. */
#topmenu ~ * .leftmenuWrap,
.leftmenuWrap{
position:absolute !important;
top:93px !important; /* ★2026-08-08 : body padding-top 24→5px 변경에 맞춰 112(24+68+20)→93(5+68+20) */
max-height:none !important;
overflow-y:visible !important;
}
#topmenu .wrap-topmenu{
position:relative;
display:flex !important; align-items:center !important;
justify-content:flex-start !important;
height:68px !important; min-height:68px !important;
padding:0 20px 0 0 !important;
box-sizing:border-box;
gap:0 !important;
}
#topmenu .wrap-topmenu::before{
content:'';
flex:0 0 200px; width:200px; height:68px;
margin-right:14px;
background-image:var(--mp-logo, none);
background-repeat:no-repeat;
background-position:center center;
background-size:auto 36px;
}
#topmenu .wrap-topmenu > #menu-list{
flex:1 1 auto; min-width:0;
display:flex !important; align-items:center !important;
justify-content:flex-start !important;
gap:2px !important; margin:0 !important; padding:0 0 0 10px !important; /* 로고에서 오른쪽으로 10px */
overflow-x:auto; overflow-y:hidden;
scrollbar-width:none; -ms-overflow-style:none;
}
#topmenu .wrap-topmenu > #menu-list::-webkit-scrollbar{ width:0; height:0; display:none; }
#topmenu .wrap-topmenu > #menu-list ~ *{ flex:0 0 auto; }
#topmenu #menu-list > li{ flex:0 0 auto !important; padding:0 !important; margin:0 1px !important; }
#topmenu #menu-list > li > a{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
gap:8px !important;
width:auto !important; box-sizing:border-box !important;
height:46px !important; line-height:1 !important;
padding:0 13px !important;
font-size:16px !important; letter-spacing:-.03em;
border-radius:999px !important;
white-space:nowrap;
}
/* 마크업에 남아 있는 빈 은 자리만 차지한다 */
#topmenu #menu-list > li > a > span:empty{ display:none !important; }
#topmenu #menu-list > li > a::before{
font-family:'Material Icons';
font-weight:normal; font-style:normal; font-size:20px; line-height:1;
letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr;
font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
content:'chevron_right'; opacity:.75;
}
/* ========================================================= ② madv2 React 셸 */
.madv2-topmenu{
/* 요청 : 스크롤하면 상단바도 같이 올라가게 (fixed -> absolute)
★absolute 기준은 .madv2-shell(position:relative) 이다 → left/top 을 0 으로 둬야
원래 자리(24px)에 온다. 24px 를 그대로 두면 24px 씩 더 밀린다. */
position:absolute !important;
left:0 !important; right:0 !important; top:0 !important; z-index:60;
width:auto !important;
height:68px !important; min-height:68px !important;
box-sizing:border-box;
}
/* 상단바가 absolute 라 흐름에서 빠진다 → 셸에 위 여백을 줘서 자리를 확보한다 (68 + 20) */
.madv2-shell{ margin-top:0 !important; padding-top:88px !important; }
/* ★좌측메뉴는 position:fixed(top:24px) 라 셸 margin 을 따라오지 않는다 - 따로 내려야 한다 */
.madv2-leftmenu{ position:absolute !important; left:0 !important; top:88px !important; max-height:none !important; overflow-y:visible !important; }
.madv2-topmenu-inner{
position:relative;
display:flex !important; align-items:center !important;
justify-content:flex-start !important;
height:68px !important;
padding:0 20px 0 0 !important;
box-sizing:border-box; gap:0 !important;
}
.madv2-topmenu-inner::before{
content:'';
flex:0 0 200px; width:200px; height:68px;
margin-right:14px;
background-image:var(--mp-logo, none);
background-repeat:no-repeat;
background-position:center center;
background-size:auto 36px;
}
.madv2-topmenu-inner > ul{
flex:1 1 auto; min-width:0;
display:flex !important; align-items:center !important;
justify-content:flex-start !important;
gap:2px !important; margin:0 !important; padding:0 0 0 10px !important; /* 로고에서 오른쪽으로 10px */
overflow-x:auto; overflow-y:hidden;
scrollbar-width:none; -ms-overflow-style:none;
}
.madv2-topmenu-inner > ul::-webkit-scrollbar{ width:0; height:0; display:none; }
.madv2-topmenu-inner > ul ~ *{ flex:0 0 auto; }
.madv2-topmenu-inner > ul > li{ flex:0 0 auto !important; padding:0 !important; margin:0 1px !important; }
.madv2-topmenu-inner > ul > li > a{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
gap:8px !important;
width:auto !important; box-sizing:border-box !important;
height:46px !important; line-height:1 !important;
padding:0 13px !important;
font-size:16px !important; letter-spacing:-.03em;
border-radius:999px !important;
white-space:nowrap;
}
.madv2-topmenu-inner > ul > li > a > span:empty{ display:none !important; }
.madv2-topmenu-inner > ul > li > a::before{
font-family:'Material Icons';
font-weight:normal; font-style:normal; font-size:20px; line-height:1;
letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr;
font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
content:'chevron_right'; opacity:.75;
}
/* ===================================================== 메뉴별 아이콘 (공통)
구형(classic) Material Icons 이름만 쓸 것 — 없는 이름은 글자로 그대로 노출된다. */
#topmenu #menu-list > li > a[href$="/myadmin"]::before,
.madv2-topmenu-inner > ul > li > a[href$="/myadmin"]::before{ content:'dashboard'; }
#topmenu #menu-list > li > a[href*="/setup/"]::before,
.madv2-topmenu-inner > ul > li > a[href*="/setup/"]::before{ content:'settings'; }
#topmenu #menu-list > li > a[href*="/design/"]::before,
.madv2-topmenu-inner > ul > li > a[href*="/design/"]::before{ content:'palette'; }
#topmenu #menu-list > li > a[href*="/goods"]::before,
.madv2-topmenu-inner > ul > li > a[href*="/goods"]::before{ content:'view_list'; }
#topmenu #menu-list > li > a[href*="/order/"]::before,
.madv2-topmenu-inner > ul > li > a[href*="/order/"]::before{ content:'receipt'; }
#topmenu #menu-list > li > a[href*="/talk/"]::before,
.madv2-topmenu-inner > ul > li > a[href*="/talk/"]::before{ content:'forum'; }
#topmenu #menu-list > li > a[href*="/member/"]::before,
.madv2-topmenu-inner > ul > li > a[href*="/member/"]::before{ content:'people'; }
#topmenu #menu-list > li > a[href*="/statistics/"]::before,
.madv2-topmenu-inner > ul > li > a[href*="/statistics/"]::before{ content:'insert_chart'; }
#topmenu #menu-list > li > a[href*="/mwavayo/"]::before,
.madv2-topmenu-inner > ul > li > a[href*="/mwavayo/"]::before{ content:'live_tv'; }
#topmenu #menu-list > li > a[href*="/cash/"]::before,
.madv2-topmenu-inner > ul > li > a[href*="/cash/"]::before{ content:'account_balance_wallet'; }
/* ===================================================== 좁은 화면 안전장치 */
@media (max-width:1700px){
#topmenu #menu-list > li > a,
.madv2-topmenu-inner > ul > li > a{ font-size:15px !important; padding:0 10px !important; }
#topmenu #menu-list > li > a::before,
.madv2-topmenu-inner > ul > li > a::before{ font-size:18px; }
#topmenu .wrap-topmenu::before,
.madv2-topmenu-inner::before{ flex-basis:176px; width:176px; margin-right:8px; }
}
@media (max-width:1440px){
#topmenu #menu-list > li > a,
.madv2-topmenu-inner > ul > li > a{ font-size:14px !important; padding:0 8px !important; gap:6px !important; }
#topmenu #menu-list > li > a::before,
.madv2-topmenu-inner > ul > li > a::before{ font-size:17px; }
#topmenu .wrap-topmenu::before,
.madv2-topmenu-inner::before{ flex-basis:156px; width:156px; background-size:auto 40px; } /* ★2026-08-08 : 로고 확대에 맞춰 비례 조정 */
}
/* ===================================== ON AIR · 알림 보내기 는 오른쪽 끝 정렬
이 둘은 별도 영역이 아니라 #menu-list / madv2 ul 안의 다.
ON AIR 가 있으면 그쪽이, 없으면 알림 보내기가 오른쪽 끝을 잡는다. */
#topmenu #menu-list > li.onair,
.madv2-topmenu-inner > ul > li.onair,
#topmenu #menu-list > li.m13,
.madv2-topmenu-inner > ul > li.m13{ margin-left:auto !important; }
#topmenu #menu-list > li.onair ~ li.m13,
.madv2-topmenu-inner > ul > li.onair ~ li.m13{ margin-left:0 !important; }
/* ON AIR 왼쪽 세로 구분선 제거 (border-left + ::before 두 겹으로 들어가 있다)
+ 아이콘/글자 중앙정렬 */
#topmenu #menu-list > li.onair,
.madv2-topmenu-inner > ul > li.onair{
/* ★border-left 는 구분선이 아니라 이 알약 버튼 자체의 왼쪽 테두리다.
지우면 버튼 왼쪽이 열려서 흐릿해 보인다 — 건드리지 말 것.
실제 구분선은 아래 ::before 였다. */
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
line-height:1 !important;
}
#topmenu #menu-list > li.onair::before,
#topmenu #menu-list > li.onair::after,
.madv2-topmenu-inner > ul > li.onair::before,
.madv2-topmenu-inner > ul > li.onair::after{
display:none !important; content:none !important; border:0 !important; background:none !important;
}
#topmenu #menu-list > li.onair > *,
.madv2-topmenu-inner > ul > li.onair > *{
align-self:center !important; margin:0 !important; float:none !important;
}
/* ============================================================================
2026-08-01 : 상단바 = 충전버튼 색(파랑) 배경 + 흰색 글자 (②③ 공통)
----------------------------------------------------------------------------
★ /myadmin/2.0/ SPA 와 같은 색이다. 대시보드 "몰프로머니 > 충전" 버튼이 쓰는
Tailwind v4 bg-blue-500 = oklch(0.623 0.214 259.815) (≒ #3B82F6).
전 사이트 동일 고정색. (2.0 쪽은 2.0/mp20_topbar_v1.css 에 같은 값이 있다)
★ 원래 색 : 상단바 흰 배경 / 메뉴 글자 #262626 / 현재메뉴 #2B78FD + 10% 배경
ON AIR(대기) 흰 알약 + #E8EEF2 테두리 / 알림보내기 #FE9A00 테두리
============================================================================ */
#topmenu,
.madv2-topmenu{
background-color:#60A5FA !important; /* ★2026-08-08 : "기존 색상으로 복원 + 탑메뉴만 조금 더 연하게"(사용자 지정). 기존 파랑(#3B82F6/bg-blue-500)보다 한 단계 밝은 bg-blue-400. 잠깐 썼던 #FFB85C 는 폐기 */
color:#fff !important;
box-shadow:none !important; /* 컬러 바 위에서는 옅은 그림자가 지저분하게 보인다 */
}
/* 로고 : ★2026-08-08 재요청 — 흰 판 제거 + 로고 확대(사용자 지정) */
#topmenu .wrap-topmenu::before,
.madv2-topmenu-inner::before{
height:60px;
margin-left:14px;
background-size:auto 44px;
}
/* 메뉴 글자·아이콘 = 흰색 (ON AIR 는 아래에서 따로 다룬다) */
#topmenu #menu-list > li:not(.onair) > a,
.madv2-topmenu-inner > ul > li:not(.onair) > a{
color:#fff !important;
background-color:transparent !important;
}
#topmenu #menu-list > li:not(.onair) > a:hover,
.madv2-topmenu-inner > ul > li:not(.onair) > a:hover{
background-color:rgba(255,255,255,.16) !important;
color:#fff !important;
}
/* 현재 메뉴 : 연한 파랑 알약 → 반투명 흰 알약 + 흰 글자 */
#topmenu #menu-list > li.on > a,
.madv2-topmenu-inner > ul > li.on > a{
background-color:rgba(255,255,255,.24) !important;
color:#fff !important;
}
/* ON AIR(대기) — 알약은 가 아니라 li 자체다 */
#topmenu #menu-list > li.onair-off,
.madv2-topmenu-inner > ul > li.onair-off{
background-color:transparent !important;
border-color:rgba(255,255,255,.6) !important;
color:#fff !important;
}
/* ON AIR(방송중)은 붉은색 그대로 둔다 — 색 자체가 "방송중" 신호다 */
#topmenu #menu-list > li.onair-on,
.madv2-topmenu-inner > ul > li.onair-on{ border-color:rgba(255,255,255,.55) !important; }
#topmenu #menu-list > li.onair-on > a,
.madv2-topmenu-inner > ul > li.onair-on > a{ color:#fff !important; }
/* 알림 보내기 (madv2 는 li 에 m13 클래스가 없다 → button 으로 잡는다) */
#topmenu #menu-list > li > button,
.madv2-topmenu-inner > ul > li > button{
background-color:transparent !important;
border-color:rgba(255,255,255,.6) !important;
color:#fff !important;
}
#topmenu #menu-list > li > button:hover,
.madv2-topmenu-inner > ul > li > button:hover{ background-color:rgba(255,255,255,.16) !important; }
/* ★이 두 아이콘은 svg 마크업에 fill 이 박혀 있다(ON AIR #A4ADB2 / 알림 #FE9A00).
currentColor 가 아니라서 color 로는 안 바뀐다 → fill 을 직접 덮는다.
(CSS 선언이 presentation attribute 를 이긴다) */
#topmenu #menu-list > li.onair svg rect,
#topmenu #menu-list > li > button svg path,
.madv2-topmenu-inner > ul > li.onair svg rect,
.madv2-topmenu-inner > ul > li > button svg path{ fill:#fff !important; }