/* =========================================================
   layout.css - 전체 골격: Wrap/헤더, 왼쪽 메뉴, 오른쪽 메뉴바 + 패널 골격(.rb-panel), 본문 여백, 메뉴 접기 버튼, 로딩 오버레이 (DESIGN.md 8.4, 8.5)
   ========================================================= */
/***** Wrap ******/
.Wrap {width: 100%; min-height: 100%; position: relative;}


/***** header 영역 *****/
#header {width: 100%; height: 40px; background: #282c37;}
.headerWrap {margin-right: 2%;}
/* 상단 모드 */
.header_top_right {text-align: right; display: block; color: #dbdbdb;}
.header_top_right a {font-size: 13px; line-height: 40px; letter-spacing: 0.5px; text-transform: uppercase;}
.header_top_right a .fas {font-size: 15px;}
.header_top_right a:hover {color: #fff;}
.btn_toplogin::after {position: relative; content: '|'; margin: 0 20px; top: 0px; color: #dbdbdb;}
/** 로고 **/
.header_logo {width: 100px; margin: 0 auto; padding: 80px 0 50px 0;}

/***** 사이드 메뉴 gnb (DESIGN.md: 흰 캔버스 / Body·Muted 회색 텍스트 / 현재 메뉴만 Primary 강조, 배경색 없음) *****/
.side_gnb {position: fixed; top: 0px; left: 0; width: 250px; height: 100%; background: var(--tds-canvas); color: var(--tds-body); box-sizing: border-box; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--tds-border); padding-bottom: 40px;}
/* 브랜드 영역: 오른쪽 64px 은 접기 버튼(템플릿 .admin-left-toggle, 32px) 자리 */
.side_gnb_brand {padding: 24px 64px 16px 24px; border-bottom: 1px solid var(--tds-border); margin-bottom: 4px;}
/* 로고: jungdari.com 푸터 로고(SVG) 원본 색 그대로 */
.side_gnb_tittle {display: block; line-height: 0;}
.side_gnb_logo {height: 24px; width: auto; max-width: 100%; display: block;}
.side_gnb_user {display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--tds-body); white-space: nowrap;}
.side_gnb_user b {font-weight: 700; color: var(--tds-fg);}
.side_gnb_logout {display: inline-block; font-size: 12px; line-height: 20px; color: var(--tds-muted); text-decoration: underline;}
.side_gnb_logout:hover {color: var(--tds-fg);}
.gnb .fas {display: inline-block; width: 20px; font-size: 14px; line-height: 17px; margin: 0px 10px 0px 0px; text-align: center; vertical-align: middle; color: var(--adm-grey-400);}
.sideDepth1 > li {border-bottom: 1px solid var(--tds-surface);}
.sideDepth1 > li > a {display: block; padding: 12px 24px; font-size: 14px; line-height: 25px; color: var(--tds-body); font-weight: 500; transition: color .15s, background-color .15s;}
.sideDepth1 > li > a:hover {color: var(--tds-fg); background: var(--adm-grey-50);}
.sideDepth1 > li > a:hover .fas {color: var(--adm-grey-600);}
.sideDepth1 .menu_arrow {float: right;}
.sideDepth1 .fa-angle-down {width: auto; font-size: 12px; line-height: 21px; margin: 0; color: var(--adm-grey-400); -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.sideDepth1 > li.open > a .fa-angle-down {-webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
/* 2차 메뉴 */
.sideDepth2 {display: none; padding: 2px 0 8px 0;}
/* 미사용 메뉴 모음(admin_left.jsp 맨 아래 li.menu-hidden). 보이게 하려면 JSP 에서 클래스를 지운다 */
.sideDepth1 > li.menu-hidden {display: none;}
.sideDepth2 li {transition: all .15s; background: none;}
.sideDepth2 li > a {display: block; padding: 6px 24px 6px 54px; font-size: 13px; line-height: 25px; color: var(--adm-grey-600);}
.sideDepth2 li:hover {background: var(--adm-grey-50); cursor: pointer;}
.sideDepth2 li:hover a {color: var(--tds-fg);}
/* 현재 페이지 메뉴: 메뉴명에 Primary 색 + bold (배경색 없음) */
.sideDepth1 a.on {color: var(--tds-primary) !important; font-weight: 700 !important;}
.sideDepth1 a.on .fas {color: var(--tds-primary);}
/* 사이드바가 화면 높이를 넘칠 때 내부 스크롤. 밝은 배경에 맞춘 얇은 스크롤바 */
.side_gnb::-webkit-scrollbar {width: 8px;}
.side_gnb::-webkit-scrollbar-thumb {background: var(--adm-grey-300); border-radius: 4px;}
.side_gnb::-webkit-scrollbar-thumb:hover {background: var(--adm-grey-400);}
.side_gnb::-webkit-scrollbar-track {background: transparent;}
.side_gnb {scrollbar-width: thin; scrollbar-color: var(--adm-grey-300) transparent;}

/***** 나만의 메뉴 (admin_left.jsp, 2026-09-11) — 브랜드 아래 툴바 [전체|나만의] + 편집, 평면 목록 ul.sideMyMenu, 편집 모드 체크박스
   상태 클래스는 .side_gnb 에: mode-my(나만의 뷰) / mode-edit(편집 중). 서버가 mode-my 를 미리 박아 첫 페인트부터 올바른 뷰 *****/
.side_menu_bar {display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 16px 12px 20px; border-bottom: 1px solid var(--tds-border);}
/* 툴바 컨트롤은 전부 높이 34px 로 맞춰 세로 정렬 (세그먼트 3+28+3, 버튼 34) */
/* 세그먼트: Surface 트랙 + 활성은 흰 캔버스 카드(그림자). 탭 좌우 여백 넉넉히 */
/* 버튼은 기본적으로 페이지 폰트를 물려받지 않아(브라우저 기본 UI 폰트) 글자 높이가 어긋난다 → font-family 상속 명시 */
.side_menu_seg_btn, .side_menu_edit, .side_menu_textbtn, .side_menu_btn_primary {font-family: inherit;}
/* 트랙 안쪽 여백 4px 를 상하좌우 동일하게, 탭은 26px 높이 + 좌우 16px */
.side_menu_seg {display: inline-flex; flex: none; box-sizing: border-box; height: 34px; padding: 4px; gap: 2px; border-radius: var(--adm-r-ctl); background: var(--tds-surface);}
.side_menu_seg_btn {display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 26px; padding: 0 16px; border: 0; border-radius: var(--adm-r-sm); background: transparent; color: var(--tds-muted); font-size: 13px; line-height: 1; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .15s, background-color .15s, box-shadow .15s;}
.side_menu_seg_btn:hover {color: var(--tds-body);}
.side_menu_seg_btn.is-active {background: var(--tds-canvas); color: var(--tds-fg); font-weight: 700; box-shadow: 0 1px 3px rgba(25,31,40,.10);}
.side_menu_seg_btn:focus-visible {outline: none; box-shadow: var(--adm-focus-ring);}
/* 편집(연필): 텍스트 버튼, 세그먼트와 같은 34px 높이 */
.side_menu_edit, .side_menu_textbtn {display: inline-flex; align-items: center; box-sizing: border-box; height: 34px; padding: 0 10px; border: 0; background: transparent; color: var(--tds-body); font-size: 13px; line-height: 16px; font-weight: 500; cursor: pointer; white-space: nowrap; border-radius: var(--adm-r-btn); transition: color .15s, background-color .15s;}
.side_menu_edit .fas {width: auto; margin: 0 6px 0 0; font-size: 12px; line-height: 1; color: inherit;}
.side_menu_textbtn {height: 28px; padding: 0 6px; color: var(--tds-muted);}
.side_menu_edit:hover, .side_menu_textbtn:hover {color: var(--tds-fg); background: var(--adm-grey-50);}
/* 완료: Primary 채움 버튼, 34px */
.side_menu_btn_primary {display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 34px; padding: 0 16px; border: 0; border-radius: var(--adm-r-ctl); background: var(--tds-primary); color: #ffffff; font-size: 13px; line-height: 16px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .15s;}
.side_menu_btn_primary:hover {background: var(--tds-primary-strong);}
.side_menu_btn_primary:disabled {opacity: .6; cursor: default;}
.side_menu_btn_primary:focus-visible {outline: none; box-shadow: var(--adm-focus-ring);}
.side_menu_editbar {display: none; align-items: center; gap: 2px;}
/* 편집 안내 줄(툴바 아래): 체크 안내 + 선택 개수 */
.side_menu_edit_hint {display: none; padding: 8px 20px 2px; font-size: 12px; line-height: 16px; color: var(--tds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.side_menu_edit_hint b {color: var(--tds-primary); font-weight: 700;}
/* 나만의 뷰: 평면 목록만 보이고 전체 메뉴는 숨김 */
.sideMyMenu {display: none;}
.side_gnb.mode-my .sideMyMenu {display: block;}
.side_gnb.mode-my .sideDepth1 {display: none;}
.sideMyMenu > li {border-bottom: 1px solid var(--tds-surface);}
.sideMyMenu > li > a {display: block; padding: 12px 24px; font-size: 14px; line-height: 25px; color: var(--tds-body); font-weight: 500; transition: color .15s, background-color .15s;}
.sideMyMenu > li > a:hover {color: var(--tds-fg); background: var(--adm-grey-50);}
.sideMyMenu > li > a:hover .fas {color: var(--adm-grey-600);}
.sideMyMenu a.on {color: var(--tds-primary) !important; font-weight: 700 !important;}
.sideMyMenu a.on .fas {color: var(--tds-primary);}
.sideMyMenu_empty {padding: 16px 24px; font-size: 12px; line-height: 18px; color: var(--tds-muted);}
/* 편집 모드: 전체 메뉴를 모두 펼치고(admin_custom.js 가 인라인 display:none 을 박아 두므로 !important) 각 하위 메뉴 앞에 체크박스 */
.side_gnb.mode-edit .sideDepth1 {display: block;}
.side_gnb.mode-edit .sideMyMenu {display: none;}
.side_gnb.mode-edit .sideDepth2 {display: block !important;}
.side_gnb.mode-edit .menu_arrow {display: none;}
.side_gnb.mode-edit .side_menu_edit {display: none;}
.side_gnb.mode-edit .side_menu_seg {pointer-events: none;}   /* 편집 중엔 세그먼트를 보여만 준다('전체' 고정) */
.side_gnb.mode-edit .side_menu_editbar {display: flex;}
.side_gnb.mode-edit .side_menu_edit_hint {display: block;}
.side_gnb.mode-edit .sideDepth1 > li > a.mymenu-group {cursor: default; opacity: .7;}
.side_gnb.mode-edit .sideDepth1 > li > a.mymenu-group:hover {background: transparent; color: var(--tds-body);}
.side_gnb.mode-edit li.mymenu-leaf {display: flex; align-items: center;}
.side_gnb.mode-edit li.mymenu-leaf > a {flex: 1; cursor: pointer;}
.side_gnb.mode-edit .sideDepth2 > li.mymenu-leaf > a {padding-left: 12px;}
.side_gnb.mode-edit .sideDepth1 > li.mymenu-leaf > a {padding-left: 10px;}
.mymenu-check {display: none; width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer; accent-color: var(--tds-primary);}
.side_gnb.mode-edit .sideDepth2 > li.mymenu-leaf > .mymenu-check {display: inline-block; margin-left: 30px;}
.side_gnb.mode-edit .sideDepth1 > li.mymenu-leaf > .mymenu-check {display: inline-block; margin-left: 24px;}
.side_gnb.mode-edit li.mymenu-leaf.is-checked > a {color: var(--tds-fg); font-weight: 700;}
/* 편집 모드 순서 목록(admin_left.jsp #sideMyOrder, 2026-09-14): 체크한 메뉴를 저장될 순서대로. 행 = 그립·아이콘·이름·▲▼ */
.sideMyOrder {display: none; margin: 6px 12px 10px; padding: 4px; border: 1px solid var(--tds-border); border-radius: var(--adm-r-ctl); background: var(--tds-surface);}
.side_gnb.mode-edit .sideMyOrder {display: block;}
.mymenu-order-item {position: relative; display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 4px 0 2px; border-radius: var(--adm-r-sm); background: var(--tds-canvas); color: var(--tds-body); font-size: 13px; line-height: 16px; cursor: grab; user-select: none;}
.mymenu-order-item + .mymenu-order-item {margin-top: 3px;}
.mymenu-order-item:hover {background: var(--adm-grey-50);}
.mymenu-order-item.is-dragging {opacity: .45; cursor: grabbing;}
/* 드롭 위치 안내선(드래그 중 마우스가 항목 위/아래 절반 어디에 있는지) */
.mymenu-order-item.drop-before::before, .mymenu-order-item.drop-after::after {content: ""; position: absolute; left: 4px; right: 4px; height: 2px; border-radius: 1px; background: var(--tds-primary);}
.mymenu-order-item.drop-before::before {top: -3px;}
.mymenu-order-item.drop-after::after {bottom: -3px;}
.mymenu-order-grip {flex: none; width: 16px; text-align: center; color: var(--adm-grey-400); font-size: 12px; line-height: 1;}
.mymenu-order-grip .fas {width: auto; margin: 0; font-size: 12px; color: inherit;}
.mymenu-order-icon {flex: none; width: 20px; text-align: center; line-height: 1;}
.mymenu-order-icon .fas {width: auto; margin: 0; font-size: 13px; color: var(--adm-grey-600);}
.mymenu-order-emoji {font-size: 15px; line-height: 1;}
.mymenu-order-label {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--tds-fg);}
.mymenu-order-btns {flex: none; display: inline-flex; gap: 1px;}
.mymenu-order-btn {display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--adm-r-sm); background: transparent; color: var(--tds-muted); font-size: 10px; line-height: 1; cursor: pointer; transition: color .15s, background-color .15s;}
.mymenu-order-btn .fas {width: auto; margin: 0; font-size: 10px; color: inherit;}
.mymenu-order-btn:hover {color: var(--tds-fg); background: var(--tds-weak-bg);}
.mymenu-order-btn:disabled {opacity: .3; cursor: default; background: transparent;}
.mymenu-order-btn:focus-visible {outline: none; box-shadow: var(--adm-focus-ring);}
.mymenu-order-empty {padding: 10px 8px; font-size: 12px; line-height: 16px; color: var(--tds-muted); text-align: center;}
/* 토스페이스 이모지 (resource.jsp 에서 cdn.jsdelivr.net/gh/toss/tossface 폰트 로드). 폰트 미로드 시 OS 이모지로 폴백 */
.tossface {font-family: Tossface, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;}
/* 나만의 목록: 이모지를 정한 항목은 그룹 아이콘(.fas 20px) 자리에 이모지 */
.sideMyMenu .mymenu-emoji-icon {display: inline-block; width: 20px; margin: 0 10px 0 0; font-size: 17px; line-height: 17px; text-align: center; vertical-align: middle;}
/* 편집 모드: 체크된 항목 오른쪽 끝에 이모지 버튼(+ 또는 현재 이모지). 누르면 피커 */
.mymenu-emoji-btn {display: none; flex: none; width: 28px; height: 28px; margin: 0 12px 0 4px; padding: 0; border: 1px dashed var(--adm-grey-300); border-radius: 8px; background: transparent; color: var(--tds-muted); font-size: 16px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s;}
.side_gnb.mode-edit li.mymenu-leaf.is-checked > .mymenu-emoji-btn {display: inline-flex;}
.mymenu-emoji-btn.has-emoji {border-style: solid; border-color: var(--tds-border); color: inherit;}
.mymenu-emoji-btn:hover {background: var(--adm-grey-50); border-color: var(--adm-grey-400);}
/* 이모지 피커: body 직속, 사이드바 오른쪽 옆에 fixed (위치는 admin_left.jsp 스크립트가 계산) */
.mymenu-picker {position: fixed; z-index: 9999; width: 336px; height: 420px; display: none; flex-direction: column; box-sizing: border-box; background: var(--tds-canvas); border: 1px solid var(--tds-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14);}
.mymenu-picker.is-open {display: flex;}
.mymenu-picker-head {display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--tds-border);}
.mymenu-picker-title {font-size: 12px; font-weight: 700; color: var(--tds-body);}
.mymenu-picker-actions {display: flex; gap: 2px;}
.mymenu-picker-tabs {display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--tds-border); overflow-x: auto;}
.mymenu-picker-tab {flex: none; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 18px; line-height: 1; cursor: pointer;}
.mymenu-picker-tab:hover {background: var(--adm-grey-50);}
.mymenu-picker-tab.is-active {background: var(--tds-weak-bg);}
.mymenu-picker-grid {flex: 1; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 36px; gap: 2px; align-content: start;}
.mymenu-picker-cell {width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; cursor: pointer;}
.mymenu-picker-cell:hover {background: var(--adm-grey-50);}
.mymenu-picker-cell.is-selected {background: var(--tds-weak-bg);}
.mymenu-picker-msg {grid-column: 1 / -1; padding: 24px 8px; font-size: 12px; color: var(--tds-muted); text-align: center;}

/***** 오른쪽 메뉴바 (알림 / 할 일 / 환율 / 계산기) — 아이콘은 Weak(연블루) 원형, 활성 시 Primary 채움 *****/
.admin_rightbar {position: fixed; top: 0; right: 0; width: 80px; height: 100%; background: var(--tds-canvas); border-left: 1px solid var(--tds-border); box-sizing: border-box; z-index: 9990; display: flex; flex-direction: column; align-items: center; padding-top: 20px;}
.rb-item {position: relative; width: 100%; padding: 12px 0 10px 0; margin: 0; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--tds-body); font-size: 12px; line-height: 14px; text-decoration: none; transition: color .15s;}
.rb-item:hover {color: var(--tds-fg);}
.rb-item:hover .rb-icon {background: var(--tint-blue-strong);}
.rb-item:focus-visible {outline: none;}
.rb-item:focus-visible .rb-icon {box-shadow: var(--adm-focus-ring);}
.rb-item.active .rb-label {color: var(--tds-primary); font-weight: 700;}
.rb-item.active .rb-icon {background: var(--tds-primary); color: #ffffff;}
.rb-icon {width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tds-weak-bg); color: var(--tds-weak-fg); font-size: 16px; line-height: 1; transition: background-color .15s, color .15s, box-shadow .15s;}
.rb-icon .fas {width: auto; margin: 0;}
.rb-label {white-space: nowrap;}
.rb-badge {position: absolute; top: 6px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tds-danger); color: #ffffff; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center; box-sizing: border-box; display: none; align-items: center; justify-content: center;}
/* 라이트/다크 모드 토글: 메뉴바 맨 아래 고정 (.admin_rightbar 가 flex column 이라 margin-top:auto 로 민다) */
.rb-item-bottom {margin-top: auto; margin-bottom: 14px;}
/* 오른쪽 메뉴바에서 열리는 패널 공통 골격 (알림 / 할 일 / 환율 / 계산기 모두 동일)
   위치: 상단 16px, 메뉴바 왼쪽 12px 간격 / 외형: 360px, 16px 반경, 경계선, 최소 그림자
   구조: .rb-panel-head(제목 16/700 + 우측 액션·✕) → .rb-panel-body(20px 여백) → (선택) .rb-panel-foot */
.rb-panel {position: fixed; top: 16px; right: 92px; z-index: 10001; width: 360px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; padding: 0; background: var(--tds-canvas); border: 1px solid var(--tds-border); border-radius: var(--adm-r-panel); box-shadow: var(--adm-shadow-panel); color: var(--tds-body); font-size: 14px; line-height: 21px;}
/* 열림 애니메이션(네 패널 공통): 페이드 + 위에서 8px 내려오기, 0.2s. 닫힘은 즉시. display:none → block 전환 시 자동 재생 */
.rb-panel {animation: rbPanelIn .2s ease-out;}
@keyframes rbPanelIn {from {opacity: 0; transform: translateY(-8px);} to {opacity: 1; transform: translateY(0);}}
@media (prefers-reduced-motion: reduce) {.rb-panel {animation: none;}}
.rb-panel-head {position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 20px; background: var(--tds-canvas); border-bottom: 1px solid var(--tds-border);}
.rb-panel-title {margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--tds-fg);}
.rb-panel-title small {display: block; margin-top: 2px; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--tds-primary);}
.rb-panel-actions {display: flex; align-items: center; gap: 4px;}
.rb-panel-close {width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tds-muted); font-size: 14px; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s;}
.rb-panel-close:hover {background: var(--tds-surface); color: var(--tds-fg);}
.rb-panel-textbtn {height: 28px; padding: 0 10px; border: 0; border-radius: var(--adm-r-btn); background: none; color: var(--tds-primary); font-size: 12px; font-weight: 600; cursor: pointer;}
.rb-panel-textbtn:hover {background: var(--tds-weak-bg);}
.rb-panel-body {padding: 20px;}
.rb-panel-foot {position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; background: var(--tds-canvas); border-top: 1px solid var(--tds-border);}
/* 패널 안 공통 컨트롤: 입력 40px/반경 10, 버튼 3종(채움·약한·중립) 32px/반경 8 */
.rb-panel .rb-input {width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--tds-border); border-radius: var(--adm-r-ctl); background: var(--input-bg); color: var(--tds-fg); font-size: 14px; outline: none; transition: border-color .13s, box-shadow .13s;}
.rb-panel .rb-input:focus {border-color: var(--tds-primary); box-shadow: var(--adm-focus-ring);}
.rb-panel .rb-input[readonly], .rb-panel .rb-input:read-only {background: var(--adm-grey-50);}
.rb-panel .rb-label {display: block; margin-bottom: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--tds-body);}
.rb-panel .rb-btn {display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--adm-r-btn); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .13s;}
.rb-panel .rb-btn-primary {background: var(--tds-primary); color: #ffffff;}
.rb-panel .rb-btn-primary:hover {background: var(--tds-primary-strong);}
.rb-panel .rb-btn-weak {background: var(--tds-weak-bg); color: var(--tds-weak-fg);}
.rb-panel .rb-btn-weak:hover {background: var(--tint-blue-strong);}
.rb-panel .rb-btn-neutral {background: var(--btn-neutral-bg); color: var(--tds-body);}
.rb-panel .rb-btn-neutral:hover {background: var(--btn-neutral-bg-hover);}
.rb-panel .rb-section {margin-bottom: 16px;}
.rb-panel .rb-section:last-child {margin-bottom: 0;}
.rb-panel .rb-divider {border: 0; border-top: 1px solid var(--tds-border); margin: 16px 0;}
.rb-panel .rb-subtitle {font-size: 14px; line-height: 21px; font-weight: 700; color: var(--tds-fg);}
.rb-panel .rb-muted {color: var(--tds-muted); font-size: 12px; line-height: 18px;}

/* 레거시 전체화면 팝업 오버레이(.cd-popup*)를 오른쪽 메뉴바(9990) 위로.
   원본 정의는 common.css / admin_common.css / mobile.css / pages/transport.css 에 래퍼 접두어
   (.mypage1-1_area_wrap 등) 붙은 채로 z-index:100 이 흩어져 있어, 모달을 열어도 메뉴바만 어두워지지 않았다.
   그 선택자들을 모두 이기기 위해 !important 로 고정하고, 다른 관리자 모달(.pr-modal 등)과 같은 10000 층에 둔다.
   .url_sch_pop.cd-popup1-1(원본 1001, 다른 팝업 위에 겹쳐 뜨는 URL 검색)만 한 단계 위로 유지. */
.cd-popup, .cd-popup0, .cd-popup1-1, .cd-popup2, .cd-popup3, .cd-popup3-1, .cd-popup4, .cd-popup4-1 {z-index: 10000 !important;}
.url_sch_pop.cd-popup1-1 {z-index: 10001 !important;}

/***** Contents 영역 *****/
/**** Contents 공통사항 ****/
#contentWrap {padding-bottom: 50px;}
.admin_con {margin-left: 250px; margin-right: 80px; width: auto;}
.expandedss {margin-left: 0px; width: auto;}

/***** 메뉴 접기/펼치기 버튼 + 전체 로딩 오버레이 (template/admin.jsp 에서 이동) *****/
.overlay {
  position: fixed; /* Sit on top of the page content */ /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.6); /* Black background with opacity */
  z-index: 9999; 
  display: none;
}
.loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #1592ce;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 3s linear infinite; /* Safari */
  animation: spin 3s linear infinite;
  position: absolute;
  top:40%;
  left:48%;
  
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hidden {
	display: none;
}
/* 메뉴 접기/펼치기 버튼 (DESIGN.md 8.5)
   - 펼친 상태: 사이드바 브랜드 영역 오른쪽(로고 옆)에 놓이고, 사이드바에 마우스를 올렸을 때만 보임. Surface 배경 + « 아이콘
   - 접힌 상태: 화면 왼쪽 상단에 항상 보임. 흰 배경 + 경계선 + » 아이콘 */
.admin-left-toggle {
	position: fixed;
	top: 20px;
	left: 194px; /* 사이드바 250px - 우측 여백 24px - 버튼 32px */
	z-index: 9998;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--adm-r-btn);
	background: var(--tds-surface);
	color: var(--tds-body);
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
#admin_left:hover + .admin-left-toggle,
.admin-left-toggle:hover,
.admin-left-toggle:focus-visible {
	opacity: 1;
}
.admin-left-toggle:hover {
	background: var(--tds-border);
	color: var(--tds-fg);
}
.admin-left-toggle:focus-visible {
	outline: none;
	box-shadow: var(--adm-focus-ring);
}
.admin-left-toggle.is-hidden {
	left: 16px;
	opacity: 1;
	background: var(--tds-canvas);
	border-color: var(--tds-border);
	color: var(--tds-muted);
}
.admin-left-toggle.is-hidden:hover {
	background: var(--tds-surface);
	color: var(--tds-fg);
}