/**
 * 모바일 전용 UI — 메뉴·레이아웃
 */
.nav-mobile-head {
    display: none;
}

@media (max-width: 1250px) {
    .nav-mobile-head {
        display: flex;
    }
    :root {
        --sl-header-m: 52px;
        --sl-nav-width: min(88vw, 320px);
    }

    html.active,
    body.active {
        overflow: hidden;
        height: 100%;
    }

    /* 헤더 */
    header {
        background: #fff;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    }

    [data-theme='dark'] header {
        background: #1e2128;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    header #main {
        height: var(--sl-header-m);
        min-height: var(--sl-header-m);
        padding: 0 48px;
        justify-content: center;
    }

    header #main .logo {
        height: var(--sl-header-m);
        flex: 0 0 auto;
    }

    header #main .logo img {
        width: 130px;
        max-height: 36px;
        object-fit: contain;
    }

    header #main .search {
        display: none;
    }

    header #sub {
        display: none !important;
    }

    header #toggleBtn,
    header #alarmBtn {
        width: 48px;
        height: var(--sl-header-m);
        top: 0;
        color: #333;
    }

    [data-theme='dark'] header #toggleBtn,
    [data-theme='dark'] header #alarmBtn {
        color: #eee;
    }

    main {
        margin-top: var(--sl-header-m) !important;
        padding: 0 10px 20px !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
    }

    slotaside {
        order: 2;
        width: 100% !important;
        gap: 10px !important;
    }

    article {
        order: 1;
        width: 100% !important;
    }

    /* 모바일 메뉴 드로어 */
    header #nav {
        align-items: stretch;
        justify-content: flex-start;
        background: transparent;
    }

    header #nav.active {
        display: flex;
    }

    header #nav .navBackground {
        backdrop-filter: blur(2px);
    }

    header #nav .navWrap {
        width: var(--sl-nav-width);
        max-width: var(--sl-nav-width);
        height: 100%;
        gap: 0;
        padding: 0;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    .nav-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 16px;
        background: #1a1d24;
        color: #fff;
        flex-shrink: 0;
    }

    .nav-mobile-head span {
        font-size: 1rem;
        font-weight: 700;
    }

    .nav-close {
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        color: #fff;
        font-size: 1.75rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
    }

    header #nav .mypage {
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin: 12px 12px 0;
        padding: 0;
        grid-template-columns: none;
    }

    header #nav .mypage li {
        flex: 1;
    }

    header #nav .mypage li a {
        padding: 12px 8px;
        border-radius: 8px;
        background: #f0f2f6;
        border: none;
        font-weight: 600;
        font-size: 0.9rem;
        color: #111 !important;
        text-decoration: none !important;
    }

    [data-theme='dark'] header #nav .mypage li a {
        background: rgba(255, 255, 255, 0.1);
        color: #eee !important;
    }

    header #nav nav {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 24px;
    }

    header nav > ul {
        padding: 0;
        margin: 0;
    }

    header nav > ul > li {
        border-bottom: 1px solid #eee;
    }

    [data-theme='dark'] header nav > ul > li {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    header nav > ul > li:first-child {
        border-top: none;
    }

    header nav > ul > li > .menu > a {
        padding: 16px 16px;
        font-size: 1rem;
        font-weight: 600;
        color: #111 !important;
        text-decoration: none !important;
    }

    [data-theme='dark'] header nav > ul > li > .menu > a {
        color: #eee !important;
    }

    header nav > ul > li.nav_active > .menu > a {
        color: #1e4a9c !important;
    }

    header nav > ul > li > .menu .dropdownBtn {
        width: 48px;
        height: 48px;
        margin-top: 0;
        right: 4px;
        position: relative;
        flex-shrink: 0;
    }

    header nav > ul > li > ul {
        background: #f8f9fb;
    }

    [data-theme='dark'] header nav > ul > li > ul {
        background: rgba(0, 0, 0, 0.2);
    }

    header nav > ul > li > ul > li > a {
        padding: 14px 16px 14px 28px;
        font-size: 0.92rem;
        color: #444 !important;
        text-decoration: none !important;
    }

    [data-theme='dark'] header nav > ul > li > ul > li > a {
        color: #ccc !important;
    }

    /* 메인 섹션 카드 */
    #index > section,
    .section,
    .mainSection,
    #bo_list,
    #bo_v,
    #bo_w {
        border-radius: 10px;
    }

    .tradingview-widget-container {
        border-radius: 10px;
        overflow: hidden;
    }

    #top_btn {
        right: 12px;
        bottom: 16px;
    }
}

@media (max-width: 600px) {
    :root {
        --sl-header-m: 48px;
    }

    header #main .logo img {
        width: 115px;
    }
}