body {
    /* Override legacy global Vite CSS only for the MyPage shell. */
    font-family: var(--font-family) !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover); }
.dark ::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); }
.dark ::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.card-interactive {
    transition: box-shadow var(--transition-normal) var(--ease-standard), border-color var(--transition-normal) var(--ease-standard);
}
.card-interactive:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.text-gradient { color: var(--color-primary); }
.pb-safe { padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); }

@media (min-width: 640px) {
    .pb-safe { padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 1024px) {
    .pb-safe { padding-bottom: 2rem; }
    #mypage-sidebar-desktop { width: var(--mypage-sidebar-width); }
    #mypage-main-wrapper {
        width: calc(100% - var(--mypage-sidebar-width));
        flex: none;
        margin-left: var(--mypage-sidebar-width);
    }

    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-toggle { display: none; }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-label {
        width: 0;
        min-width: 0;
        flex: none;
        overflow: hidden;
        white-space: nowrap;
        visibility: hidden;
    }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-supplementary { display: none; }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-logo,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-link,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-profile,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-primary-action,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-business-action {
        justify-content: center;
        gap: 0;
    }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-navigation {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
        overflow: visible;
    }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-link,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-profile,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-primary-action,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-business-action {
        width: 3rem;
        padding-left: 0;
        padding-right: 0;
    }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-icon {
        display: flex;
        width: 2rem;
        flex: 0 0 2rem;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-profile-wrapper {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    /* Keep guest actions at a stable height while the sidebar width animates. */
    #mypage-sidebar-desktop .mypage-sidebar-primary-action,
    #mypage-sidebar-desktop .mypage-sidebar-secondary-action {
        min-height: 2.5rem;
    }

    #mypage-sidebar-desktop .mypage-sidebar-primary-action .mypage-sidebar-label,
    #mypage-sidebar-desktop .mypage-sidebar-secondary-action .mypage-sidebar-label {
        white-space: nowrap;
    }

    /* Preserve the guest action stack height so Login does not jump vertically. */
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-secondary-action {
        visibility: hidden;
    }

    #mypage-sidebar-desktop .mypage-sidebar-tooltip {
        position: absolute;
        left: 100%;
        top: 50%;
        z-index: 50;
        display: none;
        transform: translateY(-50%);
        margin-left: calc(var(--space-3) + var(--space-1));
        padding: 0.375rem var(--space-4);
        border-radius: var(--sidebar-tooltip-radius);
        background-color: var(--color-bg-card);
        color: var(--color-text-primary);
        box-shadow: var(--sidebar-tooltip-shadow);
        white-space: nowrap;
        pointer-events: none;
        font-size: var(--font-size-base);
        line-height: 1.25rem;
        opacity: 0;
        transition: opacity var(--transition-normal) ease;
    }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-tooltip { display: block; }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-item:hover > .mypage-sidebar-tooltip,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-item:focus-visible > .mypage-sidebar-tooltip { opacity: 1; }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-open > .mypage-sidebar-tooltip {
        margin-left: calc(var(--space-3) + var(--space-2) + var(--space-1));
    }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-open:hover .mypage-sidebar-open-img,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-open:focus-visible .mypage-sidebar-open-img { opacity: 0; }
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-open:hover .mypage-sidebar-open-icon,
    .mypage-sidebar-collapsed #mypage-sidebar-desktop .mypage-sidebar-open:focus-visible .mypage-sidebar-open-icon { opacity: 1; }
}