/* ===============================
   PLAIN DIALOG SYSTEM
   - no chrome
   - viewport based
=============================== */

/* ===============================
   DIALOG OVERLAY ROOT
=============================== */
.plain-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    max-height: 100vh;
    margin: 0 auto; /* ✅ 중앙 정렬 기준 */
    padding: 0;
    border: none;
    background: #0D0A12;
    z-index: 9000;
    display: flex;
    align-items: stretch;
}

    /* 어두운 배경 오버레이 */
    .plain-dialog::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.75);
        pointer-events: none;
    }

    /* dialog 열림 상태 제어 */
    .plain-dialog:not([open]) {
        display: none;
    }

    .plain-dialog[open] {
        display: flex;
    }

    /* ===============================
   DIALOG CONTAINER
=============================== */
    .plain-dialog .dlg {
        position: relative;
        width: 100%;
        max-width: 420px;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background: transparent;
        padding-top: 8px; /* topbar 아래 여유 */
        padding-bottom: 8px;
    }

    /* ===============================
   DIALOG BODY (SCROLL AREA)
=============================== */
    .plain-dialog .dlg-body {
        flex: 1;
        overflow-y: auto;
        /* 🔥 스크롤 시작 위치 */
        padding-top: 28px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 0;
        -webkit-overflow-scrolling: touch;
        /* 🔥 스크롤바 완전 제거 */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        /* Chrome / Edge / Safari */
        .plain-dialog .dlg-body::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        /* 🔥 스크롤 여유 공간 (가독성) */
        .plain-dialog .dlg-body::after {
            content: "";
            display: block;
            height: calc(14px + 3 * 1.7em);
        }

    /* ===============================
   DIALOG TOP / BOTTOM FADE
=============================== */
    .plain-dialog .dlg::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 40px;
        pointer-events: none;
        background: linear-gradient( to top, rgba(13,10,18,0), rgba(13,10,18,0.6) );
    }

    .plain-dialog .dlg::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 64px;
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(13,10,18,0), rgba(13,10,18,0.85), rgba(13,10,18,1) );
    }

/* ===============================
   DIALOG BACK BUTTON
=============================== */
.dialog-back-btn {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9100;
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    padding: 10px;
    color: #8f4bff;
}

    .dialog-back-btn .stroke-icon {
        stroke: #8f4bff;
        stroke-width: 2;
        filter: drop-shadow(0 0 4px rgba(140, 90, 255, 0.8));
    }

/* SVG 강제 렌더링 */
.dialog-back-icon {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===============================
   CHROME DISABLE WHILE DIALOG OPEN
=============================== */
body.dialog-open .top-bar,
body.dialog-open .tab-footer {
    pointer-events: none !important;
}

    body.dialog-open .top-bar:not(.dialog-topbar),
    body.dialog-open .tab-footer {
        pointer-events: none !important;
    }

/* footer 시각적 제거 */
body.dialog-open .tab-footer {
    opacity: 0;
    pointer-events: none;
}