@charset "utf-8";

/* 파트너센터 골격 - aside · 상단바 · 본문 · 푸터
   마크업 partner/head.php · partner/footer.php, 동작 partner/js/layout.js 참고 */

:root {
    --aside-width: 200px;
    --topbar-height: 56px;
    --container-padding: 32px;
}

/* 전체 틀 - aside | (상단바 / 본문 / 푸터) */
.partner-wrap {display: flex; align-items: flex-start; min-height: 100vh;}
.partner-body {display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 100vh;}

/* 로고 */
.logo a {display: inline-flex;}
.logo img {height: 32px;}

/* aside - 메뉴 글자 15/1.5/500, 활성 600 */
.aside {padding: 20px; position: sticky; top: 0; z-index: 200; display: flex; flex-direction: column; flex: none; width: var(--aside-width); height: 100vh; overflow-y: auto; border-right: 1px solid var(--color-gray3); background-color: var(--color-white);}
.aside-head {display: flex; align-items: center; justify-content: space-between; flex: none; height: var(--topbar-height);}
.aside .aside-close-btn {display: none;}
.aside-nav {margin-top: 24px;}
.aside-nav-list {display: flex; flex-direction: column; row-gap: 4px;}
.aside-nav-link {display: flex; align-items: center; column-gap: 8px; min-height: 44px; padding-inline: 10px; font-size: var(--fs-15); font-weight: 500; line-height: 1.5; color: var(--color-gray6); transition: background-color 0.2s, color 0.2s;}
.aside-nav-link:hover {background-color: var(--color-gray1); color: var(--color-gray8);}
.aside-nav-link[aria-current="page"] {background-color: var(--color-static4); font-weight: 600; color: var(--color-static1);}

/* 메뉴 아이콘 - svg 를 mask 로 써서 글자색(currentColor)을 그대로 따라가게 한다. 활성 색을 파일 두 벌로 나누지 않기 위함 */
.aside-nav-ico {flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;}
.aside-nav-ico.ico-dashboard {-webkit-mask-image: url(/partner/img/ico-dashboard.svg); mask-image: url(/partner/img/ico-dashboard.svg);}
.aside-nav-ico.ico-reservation {-webkit-mask-image: url(/partner/img/ico-reservation.svg); mask-image: url(/partner/img/ico-reservation.svg);}
.aside-nav-ico.ico-shop {-webkit-mask-image: url(/partner/img/ico-shop.svg); mask-image: url(/partner/img/ico-shop.svg);}
.aside-nav-ico.ico-program {-webkit-mask-image: url(/partner/img/ico-program.svg); mask-image: url(/partner/img/ico-program.svg);}
.aside-nav-ico.ico-settlement {-webkit-mask-image: url(/partner/img/ico-settlement.svg); mask-image: url(/partner/img/ico-settlement.svg);}

.aside-dim {display: none;}

/* 상단바 */
.topbar {position: sticky; top: 0; z-index: 100; display: flex; align-items: center; column-gap: 8px; flex: none; height: var(--topbar-height); padding-inline: var(--container-padding); border-bottom: 1px solid var(--color-gray3); background-color: var(--color-white);}
.topbar .topbar-menu-btn, .topbar .topbar-logo {display: none;}

/* 계정 메뉴 */
.user-menu {position: relative; margin-left: auto;}
.user-menu-btn {display: flex; align-items: center; column-gap: 8px; min-height: 40px; padding-inline: 4px;}
.user-menu-btn::after {content: ''; flex: none; width: 20px; height: 20px; background: url(/img/select-arrow.svg) no-repeat center / contain; transition: transform 0.2s;}
.user-menu.active .user-menu-btn::after {transform: rotate(180deg);}
.user-avatar {display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-gray4); font-size: var(--fs-14); font-weight: 500; color: var(--color-white);}
.user-name {color: var(--color-gray9);}
.user-menu-list {position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; min-width: 160px; padding-block: 6px; border: 1px solid var(--color-gray3); border-radius: var(--radius); background-color: var(--color-white); box-shadow: var(--box-shadow);}
.user-menu-list[hidden] {display: none;}
.user-menu-link {display: block; width: 100%; padding: 10px 16px; color: var(--color-gray8); text-align: left; transition: background-color 0.2s;}
.user-menu-link:hover {background-color: var(--color-gray1);}

/* 본문 */
.container {flex: 1 1 auto; padding: 50px var(--container-padding);}

/* 푸터 */
.footer {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 20px var(--container-padding); border-top: 1px solid var(--color-gray3); background-color: var(--color-white); color: var(--color-gray6);}
.footer .foot-nav ul {display: flex; flex-wrap: wrap; column-gap: 20px;}
.footer a:hover {text-decoration: underline; text-underline-offset: 3px;}


@media screen and (max-width: 1280px) {
    :root {--container-padding: 24px;}
}

/* 1024 이하 - aside 를 드로어로 바꾼다. 닫힌 상태에서는 visibility 로 스크린리더·탭 이동에서도 빠진다 */
@media screen and (max-width: 1024px) {
    .partner-wrap {display: block;}

    .aside {position: fixed; top: 0; left: 0; z-index: 300; width: min(280px, 84vw); visibility: hidden; transform: translateX(-100%); transition: transform 0.3s, visibility 0.3s;}
    .aside.active {visibility: visible; transform: none;}
    .aside .aside-close-btn {display: flex;}
    .aside-nav {padding-top: 16px;}

    .aside-dim {position: fixed; inset: 0; z-index: 299; display: block; visibility: hidden; background-color: rgb(var(--rgb-black) / 0.5); opacity: 0; transition: opacity 0.3s, visibility 0.3s;}
    .aside-dim.active {visibility: visible; opacity: 1;}

    .topbar {padding-inline: 12px var(--container-padding);}
    .topbar .topbar-menu-btn {display: flex;}
    .topbar .topbar-logo {display: block;}
    .topbar-logo img {height: 28px;}

    .container {padding-top: 40px;}
}

@media screen and (max-width: 768px) {
    :root {--container-padding: 20px;}
    .container {padding-top: 32px; padding-bottom: 60px;}
    .footer {flex-direction: column; align-items: flex-start;}
}

@media screen and (max-width: 480px) {
    :root {--container-padding: 16px;}
    .user-name {display: none;}
}