/* 상단 공지 바 — 퍼블릭·마이페이지 레이아웃 공용 (partials/announcement_bar.php) */

:root {
    --announcement-height: 40px;
}

.announcement-bar {
    display: block;
    height: var(--announcement-height);
    background-color: var(--starterkit-blue);
    color: var(--starterkit-on-accent);
    font-size: 0.75rem;
    transition: background-color 0.2s ease;
}

.announcement-bar:hover {
    background-color: var(--starterkit-blue-strong);
}

.announcement-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.15);
    font-size: 0.625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.announcement-text {
    font-weight: 600;
}

.announcement-link {
    font-size: 0.6875rem;
    font-weight: 700;
}

/*
 * 마이페이지 레이아웃 보정.
 *
 * .my-header(z-index 1040)와 .my-sidebar가 fixed라 흐름상의 공지 바가 헤더 아래로
 * 밀려 사이드바에 가린다. 바도 fixed로 올리고 헤더·사이드바·본문을 바 높이만큼 내린다.
 * 바 유무는 레이아웃이 body의 .has-announcement 로 알린다.
 */
.my-layout .announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1041;
}

/* 헤더가 container-fluid 기준이므로 바 내부 정렬을 맞춘다. */
.my-layout .announcement-bar .container {
    max-width: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.my-layout.has-announcement {
    padding-top: calc(var(--my-header-height-mobile) + var(--announcement-height));
}

.my-layout.has-announcement .my-header {
    top: var(--announcement-height);
}

.my-layout.has-announcement .my-sidebar {
    top: calc(var(--my-header-height-mobile) + var(--announcement-height));
}

.my-layout.has-announcement .my-main {
    min-height: calc(100vh - var(--my-header-height-mobile) - var(--announcement-height));
}

@media (min-width: 992px) {
    .my-layout.has-announcement {
        padding-top: calc(var(--my-header-height) + var(--announcement-height));
    }

    .my-layout.has-announcement .my-sidebar {
        top: calc(var(--my-header-height) + var(--announcement-height));
    }

    .my-layout.has-announcement .my-main {
        min-height: calc(100vh - var(--my-header-height) - var(--announcement-height));
    }
}