/* Home index chart layout styles extracted from app/views/service/index/index.php. */


/* source style block 7 */
            #section_recommend0,
            #section_recommend1 {
                padding-top: 0;
                box-sizing: border-box;
            }

            section#main #chart>.ttl.chart_tab,
            section#main #chart .wm-home-duo+.ttl.chart_tab {
                position: relative;
                z-index: 0;
                margin-top: var(--wm-space-duo-to-chart-title, 16px) !important;
                margin-bottom: 0 !important;
                padding-top: 12px;
                border-top: 1px solid rgba(255, 255, 255, 0.085);
            }

            section#main #chart>.ttl.chart_tab::before,
            section#main #chart .wm-home-duo+.ttl.chart_tab::before {
                content: "";
                position: absolute;
                left: 0;
                top: -1px;
                width: 76px;
                height: 1px;
                background: linear-gradient(90deg, rgba(239, 87, 62, 0.88), rgba(239, 87, 62, 0));
                pointer-events: none;
            }

            section#main #chart>.ttl.chart_tab::after,
            section#main #chart .wm-home-duo+.ttl.chart_tab::after {
                content: "";
                position: absolute;
                left: 50%;
                top: -1px;
                z-index: -1;
                width: 100vw;
                height: calc(100% + var(--wm-space-chart-head-to-content, 24px) + 980px);
                transform: translateX(-50%);
                background:
                    linear-gradient(180deg,
                        rgba(7, 8, 10, 0) 0,
                        rgba(7, 8, 10, 0.46) 1px,
                        rgba(9, 9, 10, 0.58) 96px,
                        rgba(7, 7, 8, 0.42) 62%,
                        rgba(7, 7, 8, 0.18) 84%,
                        rgba(7, 7, 8, 0) 100%);
                pointer-events: none;
            }

            section#main #chart>.ttl.chart_tab .wm-chart-head__left {
                position: relative;
                z-index: 1;
                gap: 10px;
            }

            section#main #chart>.ttl.chart_tab .wm-chart-title-brand {
                color: rgba(255, 255, 255, 0.72);
                font-size: 11px;
                font-weight: 720;
                letter-spacing: 0.11em;
                text-transform: uppercase;
            }

            section#main #chart>.ttl.chart_tab .wm-chart-title-name {
                align-items: flex-start;
                font-size: clamp(28px, 2.2vw, 32px);
                font-weight: 860;
                letter-spacing: 0.01em;
            }

            section#main #chart>.ttl.chart_tab .wm-chart-title-rank {
                min-width: 48px;
                height: 21px;
                padding: 0 10px;
                border-color: rgba(255, 255, 255, 0.44);
            }

            section#main #chart>.ttl.chart_tab .wm-chart-meta-row {
                gap: 14px;
                min-height: 34px;
            }

            section#main #chart>.ttl.chart_tab .wm-chart-updated-at {
                color: rgba(255, 255, 255, 0.7);
                letter-spacing: 0.085em;
            }

            section#main #chart>#beat_chart_tab {
                margin-top: var(--wm-space-chart-head-to-content, 24px) !important;
            }

            /* Mobile hard-override: keep section rhythm compact without touching chart behavior. */
            @media only screen and (max-width: 768px) {
                section#main {
                    --wm-space-mobile-gap-baseline: var(--wm-space-curated-to-discovery, 24px);
                }

                section#main>section.contents_1ea.chart.wm-home-section {
                    margin-top: var(--wm-space-mobile-gap-baseline) !important;
                }

                section#main #chart .wm-home-duo {
                    gap: var(--wm-space-mobile-gap-baseline) !important;
                }

                section#main #chart .wm-home-duo>#wm-random-strip,
                section#main #chart .wm-home-duo>#trending-beatmakers-shell>.trending-beatmakers,
                section#main #chart .wm-home-duo>#trending-beatmakers-shell>.trending-loading {
                    margin-bottom: 0 !important;
                }

                section#main #chart>.ttl.chart_tab,
                section#main #chart .wm-home-duo+.ttl.chart_tab {
                    margin-top: var(--wm-space-duo-to-chart-title, 30px) !important;
                    padding-top: 10px !important;
                }

                section#main #chart>.ttl.chart_tab .wm-chart-head__left,
                section#main #chart>.ttl.chart_tab .wm-chart-title-group,
                section#main #chart>.ttl.chart_tab .wm-chart-main-title,
                section#main #chart>.ttl.chart_tab .wm-chart-meta-row {
                    margin-top: 0 !important;
                    padding-top: 0 !important;
                }

                section#main #chart>.ttl.chart_tab .wm-chart-title-brand {
                    font-size: 9.5px;
                    letter-spacing: 0.08em;
                }

                section#main #chart>.ttl.chart_tab .wm-chart-title-name {
                    font-size: clamp(22px, 6.2vw, 25px);
                }

                section#main #chart>.ttl.chart_tab .wm-chart-title-rank {
                    min-width: 39px;
                    height: 17px;
                    padding: 0 7px;
                }

                section#main #chart>#beat_chart_tab {
                    margin-top: var(--wm-space-chart-head-to-content, 20px) !important;
                }
            }