@charset "utf-8";
.admin-wrap {display: flex; align-items: flex-start; min-height: 100vh; min-height: 100dvh;}

/* aside */
.admin-aside {position: sticky; top: 0; z-index: 200; flex: none; display: flex; flex-direction: column; width: var(--aside-w); height: 100vh; height: 100dvh; border-right: 1px solid var(--color-border1); background-color: var(--color-section1);}
.admin-aside .aside-head {flex: none; display: flex; align-items: center; justify-content: space-between; padding: var(--space-30) var(--gutter) var(--space-40);}
.admin-aside .aside-close-btn {display: none; margin-right: -8px;}

/* 로고 - TODO: 디자인 - 로고 이미지 받으면 .logo-mark 를 img 로 교체 */
.admin-logo {display: flex; align-items: center; column-gap: var(--space-10);}
.admin-logo .logo-mark {display: flex; align-items: center; justify-content: center; width: 57px; height: 57px; border-radius: var(--radius); background-color: var(--color-font1); color: var(--color-white);}
.admin-logo .logo-txt {display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px;}
.admin-logo .logo-role {display: inline-flex; align-items: center; height: 22px; padding-inline: var(--space-8); border-radius: var(--radius-small); background-color: var(--color-section4); color: var(--color-static2);}
.admin-logo .logo-name {color: var(--color-font2);}

/* 메뉴 */
.admin-nav {flex: 1 1 auto; padding-inline: var(--gutter); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;}
.admin-nav .nav-link {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-8); min-height: var(--size-46); padding-inline: var(--space-10); border-radius: var(--radius); color: var(--color-font2); transition: background-color 0.2s, color 0.2s;}
.admin-nav .nav-link[aria-current="page"] {background-color: var(--color-section2); color: var(--color-static2);}
.admin-nav .nav-list > li + li {margin-top: var(--space-8);}

/* 확인용 링크 - TODO: 납품 전 제거 */
.admin-dev {flex: none; display: flex; flex-wrap: wrap; column-gap: var(--space-16); padding: var(--space-16) var(--gutter) 0;}
.admin-dev .txt-btn[aria-current="true"] {color: var(--color-static2);}

/* 접속 정보 */
.admin-user {flex: none; margin: var(--space-20) var(--gutter) var(--space-30); padding-top: var(--space-24); border-top: 1px solid var(--color-border1);}
.admin-user .user-name {color: var(--color-font1);}
.admin-user .user-role {margin-top: 2px; color: var(--color-font3);}
.admin-user .logout-btn {margin-top: var(--space-20);}

/* 본문 영역 */
.admin-body {flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh;}

/* 헤더 */
.admin-header {position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-20); min-height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--color-border1); background-color: var(--color-section1);}
.admin-header .header-page {display: flex; align-items: center; column-gap: var(--space-8); min-width: 0;}
.admin-header .aside-open-btn {display: none; margin-left: -8px;}
.admin-header .crumb-list {display: flex; flex-wrap: wrap; align-items: center; color: var(--color-font2);}
.admin-header .crumb-list > li + li::before {content: '/'; margin-inline: var(--space-10); color: var(--color-font3);}
.admin-header .page-tit {margin-top:2px; color: var(--color-font1);}
.admin-header .header-util {flex: none; display: flex; align-items: center; column-gap: var(--space-8);}
.admin-header .update-badge {height: 26px; padding-inline: var(--space-8);}

/* 본문 */
.admin-main {flex: 1 0 auto; padding: var(--space-30) var(--gutter) var(--space-40);}
.admin-main > section + section {margin-top: var(--space-30);}

/* aside 딤 */
.aside-dim {display: none;}

/* 호버 */
@media (hover: hover) {
    .admin-nav .nav-link:not([aria-current="page"]):hover {background-color: var(--color-section2); color: var(--color-font1);}
}

/* 반응형 */
@media screen and (max-width: 1440px) {
    :root {--aside-w: 260px;}
}

@media screen and (max-width: 1024px) {
    :root {--header-h: 64px;}
    .admin-aside {position: fixed; top: 0; left: 0; max-width: calc(100% - 48px); box-shadow: var(--shadow); visibility: hidden; transform: translateX(-100%); transition: transform 0.3s, visibility 0s 0.3s;}
    .admin-aside.active {visibility: visible; transform: translateX(0); transition: transform 0.3s, visibility 0s;}
    .admin-aside .aside-head {padding-block: var(--space-16) var(--space-24);}
    .admin-aside .aside-close-btn {display: inline-flex;}
    .aside-dim {position: fixed; inset: 0; z-index: 150; display: block; background-color: rgb(var(--rgb-black) / 0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s;}
    .aside-dim.active {opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s;}
    .admin-header .aside-open-btn {display: inline-flex;}
    .admin-header .crumb-list {display: none;}
    .admin-header .page-tit {margin-top: 0;}
    .admin-main {padding-top: var(--space-20);}
}

@media screen and (max-width: 600px) {
    .admin-header .update-badge {display: none;}
}