/* 모바일 이용 안내 — 랜딩·대시보드·labs 셸 공용. 시청자 페이지(/view)는 제외. */

/* 셸마다 토큰 집합이 달라(랜딩은 중립, 대시보드·tools 는 쿠키) 자체 토큰으로 고정한다. */
:root {
    --mn-bg: #faf3e6;
    --mn-bg-h: #f4e9d3;
    --mn-line: #eddfc2;
    --mn-fg: #46311d;
    --mn-ico: #b07a2d;
    --mn-card: #fff;
    --mn-title: #18181b;
    --mn-body: #52525b;
    --mn-btn-bg: #1c1917;
    --mn-btn-fg: #fff;
}

html.dark {
    --mn-bg: #1e1e21;
    --mn-bg-h: #27272a;
    --mn-line: #2a2a2e;
    --mn-fg: #f1f1f1;
    --mn-ico: #d9a441;
    --mn-card: #18181b;
    --mn-title: #fff;
    --mn-body: #cdcdcd;
    --mn-btn-bg: #f1f1f1;
    --mn-btn-fg: #18181b;
}

/* 안내 띠 */
.mn-bar { display: none; }

@media (max-width: 768px) {
    .mn-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 10px 16px;
        border: 0;
        border-bottom: 1px solid var(--mn-line);
        background: var(--mn-bg);
        color: var(--mn-fg);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
        word-break: keep-all;
        cursor: pointer;
        transition: background .15s;
    }

    .mn-bar:hover { background: var(--mn-bg-h); }
    .mn-bar:focus-visible { outline: 2px solid var(--mn-fg); outline-offset: -2px; }
}

.mn-bar svg { flex-shrink: 0; stroke: var(--mn-ico); }

/* 안내 모달 */
/* display 스왑이 아니라 visibility 로 숨긴다 — 그래야 페이드가 양방향으로 돈다. */
.mn-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility 0s linear .2s;
}

.mn-overlay.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s;
}

.mn-modal {
    width: 100%;
    max-width: 400px;
    padding: 30px 26px 26px;
    border-radius: 20px;
    background: var(--mn-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
    transform: translateY(20px);
    transition: transform .25s;
}

.mn-overlay.show .mn-modal { transform: none; }

.mn-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--mn-title);
    font-size: 18px;
    font-weight: 800;
}

.mn-title svg { flex-shrink: 0; stroke: var(--mn-ico); }

.mn-body {
    margin-bottom: 24px;
    color: var(--mn-body);
    font-size: 14px;
    line-height: 1.7;
    word-break: keep-all;
}

.mn-body p { margin: 0 0 12px; }
.mn-body ul { margin: 0; padding-left: 20px; list-style: disc; }
.mn-body li { margin-bottom: 6px; padding-left: 4px; }
.mn-body li::marker { color: var(--mn-ico); }
.mn-body strong { color: var(--mn-title); font-weight: 700; }

.mn-close {
    display: block;
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--mn-btn-bg);
    color: var(--mn-btn-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-image .15s;
}

.mn-close:hover { background-image: linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, .13)); }
html.dark .mn-close:hover { background-image: linear-gradient(rgba(0, 0, 0, .13), rgba(0, 0, 0, .13)); }
.mn-close:focus-visible { outline: 2px solid var(--mn-btn-bg); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .mn-bar, .mn-modal, .mn-close { transition: none; }
    .mn-overlay { transition: visibility 0s linear .2s; }
    .mn-overlay.show { transition: none; }
}