/* ------ メンテ告知バナー (body 直下に prepend、配色は CSS 変数でサイト側上書き可能) ------ */

:root {
    --mn-info-bg: #eff6ff;
    --mn-info-border: #3b82f6;
    --mn-info-color: #1e3a8a;
    --mn-warning-bg: #fffbeb;
    --mn-warning-border: #f59e0b;
    --mn-warning-color: #78350f;
    --mn-critical-bg: #fef2f2;
    --mn-critical-border: #ef4444;
    --mn-critical-color: #7f1d1d;
    --mn-text-default: #1f2937;
    --mn-divider: rgba(0, 0, 0, 0.08);
}

.maintenance-notice {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    border-left: 4px solid;
    font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mn-text-default);
}

.maintenance-notice + .maintenance-notice {
    border-top: 1px solid var(--mn-divider);
}

.maintenance-notice__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.maintenance-notice__title {
    display: block;
    margin: 0 0 4px 0;
    font-weight: 700;
    font-size: 15px;
}

.maintenance-notice__body {
    margin: 0;
    font-size: 14px;
}

.maintenance-notice--info {
    background: var(--mn-info-bg);
    border-left-color: var(--mn-info-border);
    color: var(--mn-info-color);
}

.maintenance-notice--warning {
    background: var(--mn-warning-bg);
    border-left-color: var(--mn-warning-border);
    color: var(--mn-warning-color);
}

.maintenance-notice--critical {
    background: var(--mn-critical-bg);
    border-left-color: var(--mn-critical-border);
    color: var(--mn-critical-color);
}

@media (max-width: 640px) {
    .maintenance-notice {
        padding: 10px 12px;
        font-size: 13px;
    }

    .maintenance-notice__title {
        font-size: 14px;
    }

    .maintenance-notice__body {
        font-size: 13px;
    }
}