/* ==========================================================================
   mypage.css - Common layout for ALL mypage_* pages
   Sidebar navigation + page wrapper (sidebar + content grid)
   Scoped under .mypage class prefix
   ========================================================================== */

/* --- Page Banner (top area below header) --- */
.mypage__banner {
    background-color: var(--color-static-white, #fff);
    border-bottom: 1px solid var(--color-neutral-300, #dde2eb);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.mypage__banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 0 28px;
}

.mypage__banner-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mypage__banner-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: var(--color-neutral-900, #303342);
    margin: 0;
}

.mypage__banner-subtitle {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.16px;
    color: var(--color-primary-600, #4165ff);
    margin: 0;
}

.mypage__banner-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    text-align: right;
}

.mypage__banner-lab-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: var(--color-neutral-700, #6c7286);
    margin: 0;
    white-space: nowrap;
}

.mypage__banner-email {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--color-neutral-700, #6c7286);
    margin: 0;
}

/* --- Main Layout Wrapper (sidebar + content) --- */
.mypage__wrapper {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 0 80px;
    background-color: var(--color-neutral-50, #f5f7fa);
}

.mypage__body {
    background-color: var(--color-neutral-50, #f5f7fa);
    width: 100%;
    min-height: 600px;
}

/* --- Sidebar Navigation --- */
.mypage__sidebar {
    width: 282px;
    min-width: 282px;
    background-color: var(--color-static-white, #fff);
    border: 1px solid var(--color-neutral-300, #dde2eb);
    border-radius: 8px;
    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.mypage__nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    overflow: hidden;
}

.mypage__nav-item:hover {
    background-color: var(--color-neutral-100, #f2f6fa);
}

.mypage__nav-label {
    flex: 1;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--color-neutral-900, #303342);
}

/* Active / Selected state */
.mypage__nav-item--active .mypage__nav-label {
    font-weight: 700;
    color: var(--color-primary-600, #4165ff);
}

/* Hidden / Muted state (logout, withdrawal) */
.mypage__nav-item--muted .mypage__nav-label {
    color: var(--color-neutral-600, #949aac);
}

/* --- Content Area --- */
.mypage__content {
    flex: 1;
    min-width: 0;
    width: 894px;
}