/* Banner v1.2 — Unified Layout Width + Modular Style */

.page-banner {
    position: sticky;
    top: 120px;
    z-index: var(--layer-banner, 500);

    /* Unified layout width */
    width: var(--layout-width, 400px);
    max-width: 90vw;
    margin: 0 auto;

    /* Visual style (shared with header/sidebar) */
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    border-radius: var(--ui-radius, 10px);

    /* Typography */
    padding: 12px 30px;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--ui-text-light, #fff);

    /* Smooth appearance */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Optional: custom banner style */
.page-banner.custom {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(14px);
}