@charset "utf-8";
/* ============================================================================
   크커솔루션(onelive) 판매자 관리자 2.0 (/mallinmall/2.0/) · 상단바 레이아웃 스킨
   mim20_topbar_v1.css   2026-08-01
   ----------------------------------------------------------------------------
   요청 : "라이브몰프로처럼 페이지업그레이드"
          → 라이브몰프로 /myadmin/2.0/mp20_topbar_v1.css 를 이식.
   2026-08-01 추가요청 : "라이브몰프로 관리자 대시보드처럼 탑메뉴 바꿔줘"
          → 상단바 색을 라이브몰프로와 동일한 파랑(충전버튼 색)으로 맞춤.
            (처음 이식할 때 쓰던 onelive 브랜드컬러 #F2596B 에서 변경)

   ★ 이 화면은 Tailwind 유틸리티 클래스만 쓰는 Vite React 빌드라
      의미 있는 클래스 훅이 없다 → **구조 선택자**로 잡는다.
        #root > div                : 바깥 flex 행 (w-fit min-h-dvh flex gap-5 p-6)
        #root > div > aside        : 좌측 사이드바 카드 (w-50)
        #root > div > div          : 본문 컬럼 (flex-1 flex-col gap-5)
        #root > div > div > header : 상단바 카드 (h-20 bg-white)
        header > nav               : 메뉴 9개
        header > nav ~ div         : ON AIR · 알림 보내기
   ★ 번들(assets/*.js|css)은 건드리지 않는다. 재빌드하면 해시가 바뀌어 사라지므로
      이 파일은 assets/ 밖(/mallinmall/2.0/)에 두고 index.asp 에서 링크한다.
============================================================================ */

:root{
	/* ★2026-08-08 : 탑메뉴 색상 지정(사용자 지정) #5D9DFF.
	   (이전 값은 #3B82F6 / oklch(0.623 0.214 259.815), 그 이전은 onelive 브랜드컬러 #F2596B) */
	--mim20-main:#5D9DFF;
	--mim20-on-main:#ffffff;
	--mim20-line:#e5e7eb;      /* 라인색 전 페이지 통일 */
}

/* ------------------------------------------------ 0) 폰트 = Pretendard (다이나믹 서브셋)
   번들 CSS 의 html{font-family:Pretendard Variable,Pretendard,...} 을 덮어써서
   2MB 짜리 통짜 PretendardVariable.woff2 를 아예 쓰지 않게 한다.
   (서브셋 스타일시트는 index.asp 가 이 파일보다 먼저 head 에 건다)
   ★ 아이콘용 .material-icons / ::before 는 아래에서 따로 font-family 를 지정하므로 영향 없음. */
html, body,
button, input, select, optgroup, textarea{   /* 번들이 이 두 곳에 폰트스택을 박아 둔다 */
	font-family:'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto,
	            'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* ------------------------------------------------ 1) 상단바를 왼쪽 끝까지 */
#root > div > div > header{
	/* 스크롤하면 상단바도 같이 올라간다 (fixed 아님 - 라이브몰프로와 동일) */
	position:absolute !important;
	left:24px; right:24px; top:5px; z-index:60;   /* ★2026-08-08 : 탑메뉴 위쪽 여백 24px→5px(사용자 지정) */
	width:auto !important;
	height:68px !important;
	min-height:68px !important;
	justify-content:flex-start !important;
	gap:0 !important;
	padding:0 20px 0 0 !important;
	box-sizing:border-box;
}
/* 상단바가 흐름에서 빠진 만큼 전체 컨테이너를 아래로 밀어준다 (5 + 68 + 20) */
#root > div{ padding-top:93px !important; }

/* ------------------------------------------------ 2) 좌상단 로고
   --mim20-logo 는 index.asp 가 인라인으로 넣는다(이미지 CDN 경로).
   값이 없으면 자리만 유지되고 깨진 이미지도 안 나온다. */
#root > div > div > header::before{
	content:'';
	flex:0 0 200px; width:200px; height:52px;
	margin-left:14px; margin-right:14px;
	background-image:var(--mim20-logo, none);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 32px;
	/* ★2026-08-08 : "로고를 화이트로" 요청. jamlive 는 흰색 로고 파일(logo_white.png)이
	   없고(검은 워드마크 하나뿐) 검은 로고를 흰 판 위에 얹는 방식이었다.
	   → 흰 판을 없애고 filter 로 로고 자체를 흰색으로 바꿔 컬러 배경에 바로 얹는다.
	   (투명 배경 PNG 라 invert 로 워드마크만 흰색이 되고 배경은 그대로 투명) */
	filter:brightness(0) invert(1);
	border-radius:12px;
}
/* 로고 클릭 -> 대시보드 : index.asp 스크립트가 넣는 투명 오버레이 링크 */
#root > div > div > header .mim20-logo-link{
	position:absolute; left:0; top:0;
	width:228px; height:68px; z-index:3;
	display:block; background:transparent; border:0;
}

/* ------------------------------------------------ 3) 메뉴 : 16px + 아이콘 */
#root > div > div > header > nav{
	flex:1 1 auto; min-width:0;
	justify-content:flex-start !important;
	padding-left:10px;   /* 로고에서 오른쪽으로 10px */
	gap:2px;
	overflow-x:auto; overflow-y:hidden;
	scrollbar-width:none; -ms-overflow-style:none;
}
#root > div > div > header > nav::-webkit-scrollbar{ width:0; height:0; display:none; }

#root > div > div > header > nav a{
	display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
	flex:0 0 auto;
	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;
	box-sizing:border-box;
	transition:background-color .15s ease, color .15s ease;
}
#root > div > div > header > nav a::before{
	font-family:'Material Icons' !important;
	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:.85;
}
/* 메뉴별 아이콘 — 구형(classic) Material Icons 이름만 사용할 것
   (없는 이름을 쓰면 그 단어가 글자로 그대로 노출된다) */
#root > div > div > header > nav a[href$="/mallinmall/3.0"]::before{ content:'dashboard'; }
#root > div > div > header > nav a[href*="/setup/"]::before{ content:'settings'; }
#root > div > div > header > nav a[href*="/3.0/goods"]::before{ content:'view_list'; }
#root > div > div > header > nav a[href*="/goods/"]::before{ content:'view_list'; }
#root > div > div > header > nav a[href*="/order/"]::before{ content:'receipt'; }
#root > div > div > header > nav a[href*="/talk/"]::before{ content:'forum'; }
#root > div > div > header > nav a[href*="/member/"]::before{ content:'people'; }
#root > div > div > header > nav a[href*="/statistics/"]::before{ content:'insert_chart'; }
#root > div > div > header > nav a[href*="/mwavayo/"]::before{ content:'live_tv'; }
#root > div > div > header > nav a[href*="/cash/"]::before{ content:'account_balance_wallet'; }

/* 오른쪽(ON AIR · 알림 보내기)은 항상 끝으로 */
#root > div > div > header > nav ~ *{ flex:0 0 auto; margin-left:auto; }
/* ON AIR 왼쪽 세로 구분선 제거 (Tailwind before: 유틸로 그려져 있다) */
#root > div > div > header > nav ~ div::before{
	display:none !important; content:none !important; width:0 !important; background:none !important;
}
/* ON AIR · 알림 보내기 : 위아래 패딩(py-2.5)이 h-10 보다 커서 내용이 중앙에서 밀린다 */
#root > div > div > header > nav ~ div > button,
#root > div > div > header > nav ~ div > a{
	padding-top:0 !important; padding-bottom:0 !important;
	display:inline-flex !important;
	align-items:center !important; justify-content:center !important;
	line-height:1 !important;
}

/* ============================================================================
   4) 상단바 = 충전버튼 색(파랑) 배경 + 흰 글자  — 라이브몰프로 /myadmin/2.0/ 과 동일
   ----------------------------------------------------------------------------
   ★ 번들 마크업 기준 (assets/index-*.js) :
        header = "bg-white ... shadow-[0px_3px_10px_0px_rgba(0,0,0,0.03)]"
        nav a  = "px-4 h-10 leading-10", 활성 = "bg-blue-50 text-blue-500 rounded-[30px]"
        nav ~ div > a      = ON AIR(방송중)  "bg-rose-500 text-white"
        nav ~ div > button = ON AIR(대기) "bg-white text-darkgray" · 알림보내기 "text-amber-500"
      전부 Tailwind 유틸이라 색을 덮으려면 !important 가 필요하다.
   ★ 아이콘 svg 는 fill:currentColor 라 color 만 바꾸면 같이 흰색이 된다.
============================================================================ */
#root > div > div > header{
	background-color:#3B82F6 !important;                     /* 폴백 (var 미지원) */
	background-color:var(--mim20-main, #3B82F6) !important;
	color:var(--mim20-on-main, #fff) !important;
	box-shadow:none !important;   /* 컬러 바 위에서는 옅은 그림자가 지저분하게 보인다 */
}

/* 메뉴 글자 · 아이콘 = 흰색 */
#root > div > div > header > nav a{ color:#fff !important; }
#root > div > div > header > nav a:hover{
	background-color:rgba(255,255,255,.16) !important;
	color:#fff !important;
}
/* 현재 메뉴 : 파란 알약(bg-blue-50/text-blue-500) → 반투명 흰 알약 + 흰 글자
   (NavLink 는 활성일 때 aria-current="page" 를 붙인다. 클래스는 예비용) */
#root > div > div > header > nav a[aria-current="page"],
#root > div > div > header > nav a.bg-blue-50{
	background-color:rgba(255,255,255,.24) !important;
	color:#fff !important;
	border-radius:999px !important;
}

/* 오른쪽 버튼(ON AIR 대기 · 알림 보내기) : 흰 선 + 흰 글자 */
#root > div > div > header > nav ~ div > button{
	background-color:transparent !important;
	border:1px solid rgba(255,255,255,.6) !important;
	color:#fff !important;
}
#root > div > div > header > nav ~ div > button svg,
#root > div > div > header > nav ~ div > button *{ color:#fff !important; }
#root > div > div > header > nav ~ div > button:hover{
	background-color:rgba(255,255,255,.16) !important;
}
/* ON AIR(방송중)만 붉은색 그대로 둔다 — 색 자체가 "방송중" 신호다.
   컬러 바 위에서 경계가 뭉개지지 않게 흰 테두리만 얹는다. */
#root > div > div > header > nav ~ div > a{
	border:1px solid rgba(255,255,255,.55) !important;
	color:#fff !important;
}

/* ------------------------------------------------ 5) 좁은 화면 안전장치
   메뉴가 9개라 좁아지면 글자를 단계적으로 줄이고, 그래도 모자라면
   메뉴 줄만 가로로 스크롤된다(스크롤바는 숨김). */
@media (max-width:1700px){
	#root > div > div > header > nav a{ font-size:15px !important; padding:0 10px !important; }
	#root > div > div > header > nav a::before{ font-size:18px; }
	#root > div > div > header::before{ flex-basis:176px; width:176px; margin-right:8px; }
}
@media (max-width:1440px){
	#root > div > div > header > nav a{ font-size:14px !important; padding:0 8px !important; gap:6px; }
	#root > div > div > header > nav a::before{ font-size:17px; }
	#root > div > div > header::before{ flex-basis:150px; width:150px; background-size:auto 28px; }
}

/* ============================================================================
   6) 디자인 고급화 — 버튼 라운딩+음영, 라인색 통일 (박스에는 음영을 넣지 않는다)
============================================================================ */
/* 좌측 사이드바 : 상단바와 같은 높이에서 시작하도록 위 여백 정리 */
#root > div > aside{ padding-top:9px !important; }   /* ★2026-08-08 : 상단바 top 24→5px 변경에 맞춰 비례 조정 */

/* 사이드바 버튼(내 미니샵 · 기능 업그레이드 · 이용가이드) */
#root > div > aside a[class*="rounded"],
#root > div > aside button[class*="rounded"]{
	border-radius:12px !important;
	box-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
	transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#root > div > aside a[class*="rounded"]:hover,
#root > div > aside button[class*="rounded"]:hover{
	box-shadow:0 2px 6px rgba(16,24,40,.10), 0 4px 12px rgba(16,24,40,.10);
	filter:brightness(.98);
}
#root > div > aside a[class*="rounded"]:active,
#root > div > aside button[class*="rounded"]:active{
	transform:translateY(1px);
	box-shadow:0 1px 2px rgba(16,24,40,.10);
}

/* 본문 카드 안의 버튼(내역 · 충전 등)도 같은 규칙 */
#root > div > div > main button[class*="rounded"]{
	transition:box-shadow .12s ease, filter .12s ease;
	box-shadow:0 1px 2px rgba(16,24,40,.06);
}
#root > div > div > main button[class*="rounded"]:hover{
	box-shadow:0 2px 6px rgba(16,24,40,.12);
	filter:brightness(.97);
}

/* 라인색 통일 : 번들이 쓰는 border-lightgray 계열을 한 값으로 모은다 */
#root > div > div > main [class*="border"]{ border-color:var(--mim20-line, #e5e7eb); }
/* 단, 색으로 의미를 주는 테두리(알림보내기 amber 등)는 예외 */
#root [class*="border-amber"], #root [class*="border-rose"],
#root [class*="border-blue"],  #root [class*="border-red"]{ border-color:currentColor; }