/* RankLab HOME Layout HOTFIX V3 */

/* 최신 데이터 배너 */
.rl-data-freshness,
.rl-public-data-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;

    width: 100% !important;
    max-width: 1200px !important;
    min-width: 0 !important;

    margin: 0 auto 12px auto !important;
    padding: 9px 12px !important;

    box-sizing: border-box !important;
}

.rl-data-freshness strong,
.rl-public-data-meta strong {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.rl-data-freshness span,
.rl-public-data-meta span {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: keep-all !important;
}


/* 급등주 / 거래대금 상위 카드 */
.rl-dashboard-v2 .rl-section-grid,
.rl-section-grid {
    min-width: 0 !important;
}

.rl-dashboard-v2 .rl-section-grid > article,
.rl-dashboard-v2 .rl-section-grid > .rl-card,
.rl-section-grid > article,
.rl-section-grid > .rl-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.rl-dashboard-v2 .rl-table-card,
.rl-table-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.rl-dashboard-v2 .rl-stock-table,
.rl-stock-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.rl-dashboard-v2 .rl-stock-table > a,
.rl-stock-table > a {
    display: grid !important;

    grid-template-columns:
        24px
        minmax(0, 1fr)
        minmax(74px, 96px)
        minmax(52px, 64px) !important;

    align-items: center !important;
    gap: 6px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 10px 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

.rl-dashboard-v2 .rl-stock-table > a > b,
.rl-stock-table > a > b {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    text-align: center !important;
}

.rl-dashboard-v2 .rl-stock-table > a > span,
.rl-stock-table > a > span {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.rl-dashboard-v2 .rl-stock-table > a > span small,
.rl-stock-table > a > span small {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.rl-dashboard-v2 .rl-stock-table > a > em,
.rl-stock-table > a > em {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 96px !important;

    margin: 0 !important;
    text-align: right !important;
    font-style: normal !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.rl-dashboard-v2 .rl-stock-table > a > strong,
.rl-stock-table > a > strong {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 64px !important;

    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.rl-dashboard-v2 .rl-card-head,
.rl-card-head {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}


/* 태블릿 */
@media (max-width: 900px) {

    .rl-dashboard-v2 .rl-stock-table > a,
    .rl-stock-table > a {
        grid-template-columns:
            22px
            minmax(0, 1fr)
            minmax(68px, 84px)
            54px !important;

        gap: 5px !important;
    }

    .rl-dashboard-v2 .rl-stock-table > a > em,
    .rl-stock-table > a > em {
        max-width: 84px !important;
        font-size: 11px !important;
    }
}


/* 모바일 */
@media (max-width: 767px) {

    .rl-data-freshness,
    .rl-public-data-meta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 4px 7px !important;

        margin: 0 auto 10px auto !important;
        padding: 8px 10px !important;

        box-sizing: border-box !important;
    }

    .rl-data-freshness strong,
    .rl-public-data-meta strong {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    .rl-data-freshness span,
    .rl-public-data-meta span {
        font-size: 9px !important;
        line-height: 1.4 !important;
    }

    .rl-dashboard-v2 .rl-stock-table > a,
    .rl-stock-table > a {
        grid-template-columns:
            20px
            minmax(0, 1fr)
            70px
            50px !important;

        gap: 4px !important;
        padding: 9px 0 !important;
    }

    .rl-dashboard-v2 .rl-stock-table > a > b,
    .rl-stock-table > a > b {
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        font-size: 10px !important;
    }

    .rl-dashboard-v2 .rl-stock-table > a > span,
    .rl-stock-table > a > span {
        font-size: 12px !important;
    }

    .rl-dashboard-v2 .rl-stock-table > a > span small,
    .rl-stock-table > a > span small {
        font-size: 9px !important;
    }

    .rl-dashboard-v2 .rl-stock-table > a > em,
    .rl-stock-table > a > em {
        width: 70px !important;
        max-width: 70px !important;
        font-size: 10px !important;
    }

    .rl-dashboard-v2 .rl-stock-table > a > strong,
    .rl-stock-table > a > strong {
        width: 50px !important;
        max-width: 50px !important;
        font-size: 10px !important;
    }
}


/* 작은 모바일 */
@media (max-width: 390px) {

    .rl-dashboard-v2 .rl-stock-table > a,
    .rl-stock-table > a {
        grid-template-columns:
            18px
            minmax(0, 1fr)
            64px
            46px !important;

        gap: 3px !important;
    }

    .rl-dashboard-v2 .rl-stock-table > a > em,
    .rl-stock-table > a > em {
        width: 64px !important;
        max-width: 64px !important;
        font-size: 9px !important;
    }

    .rl-dashboard-v2 .rl-stock-table > a > strong,
    .rl-stock-table > a > strong {
        width: 46px !important;
        max-width: 46px !important;
        font-size: 9px !important;
    }
}

/* 모바일 홈 카드 1열 고정 */
@media (max-width: 767px) {

    .rl-dashboard-v2 .rl-section-grid,
    .rl-section-grid,
    .rl-dashboard-v2 .rl-dashboard-grid,
    .rl-dashboard-grid,
    .rl-home-grid,
    .rl-main-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .rl-dashboard-v2 .rl-section-grid > *,
    .rl-section-grid > *,
    .rl-dashboard-v2 .rl-dashboard-grid > *,
    .rl-dashboard-grid > *,
    .rl-home-grid > *,
    .rl-main-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
    }

    .rl-card,
    .rl-table-card,
    .rl-detail-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* 카드 제목 */
    .rl-card-head h2,
    .rl-panel-head h2 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    /* 종목 행 글자 확대 */
    .rl-stock-table > a > span {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .rl-stock-table > a > span small {
        font-size: 11px !important;
        line-height: 1.35 !important;
        margin-top: 2px !important;
    }

    .rl-stock-table > a > em,
    .rl-stock-table > a > strong {
        font-size: 12px !important;
    }

    /* 모바일 행 폭도 조금 넉넉하게 */
    .rl-stock-table > a {
        grid-template-columns:
            24px
            minmax(0, 1fr)
            82px
            58px !important;

        gap: 6px !important;
        padding: 11px 0 !important;
    }
}