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


/* source style block 1 */
        .slide_6ea .thumb_box {
            opacity: 0;
        }

        .slick-slide:hover .thumb_box {
            opacity: 1;
            transition: 0.8s;
        }

        @media only screen and (max-width: 768px) {

            /* Mobile: keep admin recommend thumbs clean, reveal play icon on touch/click state */
            .recommend0_tab .slide_6ea .slick-slide:active .thumb_box,
            .recommend1_tab .slide_6ea .slick-slide:active .thumb_box,
            .recommend0_tab .slide_6ea .slick-slide:focus-within .thumb_box,
            .recommend1_tab .slide_6ea .slick-slide:focus-within .thumb_box {
                opacity: 1;
                transition: 0.2s;
            }
        }

        /* Admin recommend: keep white typography readable by adding a soft bottom gradient. */
        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            min-height: 68px;
            height: auto;
            padding: 28px 14px 12px;
            box-sizing: border-box;
            background:
                linear-gradient(180deg,
                    rgba(4, 8, 16, 0) 0%,
                    rgba(4, 8, 16, 0.08) 22%,
                    rgba(4, 8, 16, 0.48) 58%,
                    rgba(4, 8, 16, 0.88) 100%) !important;
            background-color: transparent !important;
            border-radius: 0 0 6px 6px;
            overflow: hidden;
        }

        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .thumb_box {
            z-index: 12;
        }

        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt a,
        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt .music_info {
            color: #fff !important;
            opacity: 1 !important;
            width: 100%;
            position: relative;
            z-index: 1;
            text-shadow: none !important;
            -webkit-text-stroke: 0 transparent !important;
        }

        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt .music_info>.title_kr,
        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt .music_info>.username_kr,
        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt .music_info:hover>.title_kr,
        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt .music_info:hover>.username_kr {
            color: #fff !important;
            opacity: 1 !important;
            text-shadow:
                0 1px 1px rgba(0, 0, 0, 0.9),
                0 2px 8px rgba(0, 0, 0, 0.6),
                0 0 1px rgba(0, 0, 0, 0.48) !important;
            -webkit-text-stroke: 0 transparent !important;
            letter-spacing: 0 !important;
        }

        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt .music_info>.title_kr {
            font-weight: 700;
        }

        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt .music_info>.username_kr {
            font-weight: 500;
            color: rgba(255, 255, 255, 0.92) !important;
        }

        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap.wm-card-light-bg .txt {
            background:
                linear-gradient(180deg,
                    rgba(4, 8, 16, 0) 0%,
                    rgba(4, 8, 16, 0.12) 18%,
                    rgba(4, 8, 16, 0.6) 54%,
                    rgba(4, 8, 16, 0.94) 100%) !important;
        }

        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap.wm-card-light-bg .txt .music_info>.title_kr,
        section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap.wm-card-light-bg .txt .music_info>.username_kr {
            color: #fff !important;
            text-shadow:
                0 1px 1px rgba(0, 0, 0, 0.92),
                0 2px 9px rgba(0, 0, 0, 0.72),
                0 0 1px rgba(0, 0, 0, 0.5) !important;
        }

        @media only screen and (max-width: 768px) {
            section#main .wm-home-section[class*="recommend"] ul.slide_6ea li .wrap .txt {
                min-height: 58px;
                padding: 24px 10px 10px;
            }
        }

        section#main .wm-home-section[class*="recommend"] .ttl {
            display: block;
            text-align: center;
        }

        section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-nav {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0;
            max-width: 100%;
            vertical-align: top;
            min-height: 1.6em;
        }

        section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-item {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            min-width: 0;
            min-height: 1.6em;
            white-space: nowrap;
        }

        section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-title-group {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            min-height: 1.6em;
            white-space: nowrap;
        }

        section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-title-link {
            display: inline-flex;
            align-items: center;
            min-height: 1.6em;
            line-height: 1.1;
            vertical-align: middle;
        }

        section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-title-link:first-of-type::after {
            content: none !important;
            margin: 0 !important;
        }

        section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-divider {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            margin: 0 16px;
            color: rgba(255, 255, 255, 0.58);
            font-size: 1.15em;
            font-weight: 400;
            line-height: 1;
            transform: translateY(-1px);
            pointer-events: none;
        }

        .wm-home-play-all {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-height: 22px;
            padding: 0 8px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.03);
            box-shadow: none;
            color: rgba(255, 255, 255, 0.68);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1;
            text-shadow: none;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, background 0.2s ease;
            -webkit-appearance: none;
            appearance: none;
            vertical-align: middle;
            white-space: nowrap;
        }

        .wm-home-play-all::before {
            content: '▶';
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            height: auto;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: rgba(255, 255, 255, 0.54);
            font-size: 7px;
            font-weight: 700;
            line-height: 1;
            text-indent: 1px;
            flex: 0 0 auto;
            transform: translateY(-0.5px);
        }

        .wm-home-play-all:hover,
        .wm-home-play-all:focus-visible {
            color: #fff6db;
            border-color: rgba(255, 222, 124, 0.78);
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 40%),
                linear-gradient(135deg, rgba(22, 22, 22, 0.98) 0%, rgba(74, 53, 16, 0.96) 55%, rgba(132, 88, 17, 0.92) 100%);
            box-shadow:
                0 10px 22px rgba(0, 0, 0, 0.24),
                0 0 14px rgba(241, 200, 77, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                inset 0 0 0 1px rgba(255, 231, 163, 0.10);
            transform: translateY(-1px);
            outline: none;
        }

        .wm-home-play-all.is-loading,
        .wm-home-play-all[disabled] {
            color: rgba(255, 255, 255, 0.56);
            border-color: rgba(255, 255, 255, 0.14);
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 44%),
                linear-gradient(135deg, rgba(24, 24, 24, 0.82) 0%, rgba(38, 38, 38, 0.80) 100%);
            box-shadow:
                none;
            opacity: 0.72;
            pointer-events: none;
        }

        .wm-home-play-all.is-loading::before,
        .wm-home-play-all[disabled]::before {
            color: rgba(255, 255, 255, 0.36);
        }

        section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-all {
            flex: 0 0 auto;
        }

        @media only screen and (max-width: 768px) {
            section#main .wm-home-section[class*="recommend"] .ttl {
                padding: 0 10px;
            }

            section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-nav {
                row-gap: 4px;
            }

            section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-title-group {
                gap: 6px;
            }

            section#main .wm-home-section[class*="recommend"] .ttl .wm-home-recommend-divider {
                margin: 0 8px;
                font-size: 1em;
            }

            .wm-home-play-all {
                min-height: 20px;
                padding: 0 7px;
                gap: 4px;
                font-size: 9px;
                letter-spacing: 0.10em;
            }

            .wm-home-play-all::before {
                font-size: 7px;
            }
        }

        /* Admin recommend baseline behavior (lightweight; visual tokens overridden later). */
        section#main .wm-home-section.wm-curation-shelf .container>* {
            position: relative;
            z-index: 1;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li {
            aspect-ratio: 1 / 1;
            height: auto !important;
            margin: 0 6px;
            background: transparent;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb a {
            display: block;
            width: 100%;
            height: 100%;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(8, 10, 14, 0.04) 0%, rgba(8, 10, 14, 0) 38%, rgba(8, 10, 14, 0.24) 100%);
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transform: scale(1);
            transform-origin: 50% 50%;
            transition: transform 0.3s cubic-bezier(0.18, 0.72, 0.24, 1);
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap:hover .thumb img,
        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap:focus-within .thumb img {
            transform: scale(1.05);
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .txt .music_info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            overflow: hidden;
            gap: 2px;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .txt .music_info>.title_kr {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            max-height: 2.65em;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .txt .music_info>.username_kr {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box.wm-amp-play-pause-item {
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box .material-icons {
            position: relative;
            left: auto;
            top: auto;
            transform: none;
            display: block;
            line-height: 1;
            margin: 0;
            font-size: 50px;
            color: #ffffff;
            text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
            pointer-events: auto;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box .material-icons.play,
        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box .material-icons.pause {
            color: #ffffff;
            text-shadow:
                0 0 6px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(0, 0, 0, 0.34);
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box .material-icons.play {
            display: block;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box .material-icons.pause {
            display: none;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box.amplitude-playing .material-icons.play {
            display: none;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box.amplitude-playing .material-icons.pause {
            display: block;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box.amplitude-paused .material-icons.play {
            display: block;
        }

        section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box.amplitude-paused .material-icons.pause {
            display: none;
        }

        @media only screen and (max-width: 1160px) {
            section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li {
                margin: 0 5px;
            }
        }

        @media only screen and (max-width: 768px) {
            section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li {
                margin: 0 4px;
            }

            section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box.wm-amp-play-pause-item {
                left: 50%;
                top: 50%;
                margin: 0;
                transform: translate(-50%, -54%);
                min-width: 56px;
                min-height: 56px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box .material-icons {
                font-size: 50px;
                width: 56px;
                height: 56px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                line-height: 1;
                touch-action: manipulation;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap,
            section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb img,
            section#main .wm-home-section.wm-curation-shelf ul.slide_6ea li .wrap .thumb_box.wm-amp-play-pause-item,
            section#main .wm-home-section.wm-curation-shelf .wm-home-play-all {
                transition: none;
            }
        }



        .more {
            text-align: center;
            padding: 10px;
            height: 40px !important;
            cursor: pointer;
        }
    


/* source style block 2 */
        .wm-home-duo {
            position: relative;
        }

        #wm-random-anchor {
            display: none;
        }

        #trending-beatmakers-shell {
            min-width: 0;
        }

        #trending-beatmakers-shell>.trending-loading {
            width: 100%;
            min-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-sizing: border-box;
        }

        /* Trending Beatmakers module (home only) */
        .trending-beatmakers {
            --wm-accent-rgb: 146, 108, 58;
            --wm-accent: rgba(146, 108, 58, 0.88);
            --wm-accent-soft: rgba(146, 108, 58, 0.12);
            --wm-glow-1: rgba(146, 108, 58, 0.14);
            --wm-glow-2: rgba(146, 108, 58, 0.06);
            --wm-border-tint: rgba(184, 148, 88, 0.24);
            --wm-btn-tint: rgba(226, 196, 146, 0.88);
            --wm-glow-x: 22%;
            --wm-glow-y: 38%;
            --wm-tbm-cta-safe-area: 0px;
            margin-top: 48px;
            padding: 20px 24px;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(11, 14, 22, 0.26);
            -webkit-backdrop-filter: blur(16px) saturate(130%);
            backdrop-filter: blur(16px) saturate(130%);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
            position: relative;
            isolation: isolate;
            overflow: hidden;
            transition: border-color 0.28s ease, box-shadow 0.28s ease;
        }

        .trending-beatmakers::before {
            content: "";
            position: absolute;
            inset: -24% -12%;
            pointer-events: none;
            background:
                radial-gradient(circle at var(--wm-glow-x) var(--wm-glow-y),
                    var(--wm-glow-1) 0%,
                    var(--wm-glow-2) 28%,
                    rgba(0, 0, 0, 0) 68%);
            filter: blur(22px);
            opacity: 0.96;
            z-index: 0;
        }

        .trending-beatmakers::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(145deg,
                    rgba(255, 255, 255, 0.04) 0%,
                    rgba(255, 255, 255, 0) 34%,
                    rgba(4, 6, 12, 0.18) 100%);
            z-index: 0;
        }

        .trending-beatmakers .tbm-header,
        .trending-beatmakers .tbm-strip {
            position: relative;
            z-index: 1;
        }

        .trending-beatmakers.wm-dynamic-accent {
            border-color: var(--wm-border-tint);
            box-shadow:
                0 30px 70px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .tbm-header {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .tbm-header__titles {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-right: auto;
        }

        .tbm-title {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
        }

        .tbm-subtitle {
            margin: 0;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.65);
        }

        .tbm-view-all {
            border: 1px solid rgba(255, 255, 255, 0.4);
            background: transparent;
            color: #fff;
            border-radius: 999px;
            padding: 6px 18px;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease;
        }

        .trending-beatmakers.wm-dynamic-accent .tbm-view-all {
            border-color: var(--wm-border-tint);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .tbm-view-all:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.8);
        }

        .trending-beatmakers.wm-dynamic-accent .tbm-view-all:hover,
        .trending-beatmakers.wm-dynamic-accent .tbm-view-all:focus-visible {
            background: linear-gradient(135deg, rgba(var(--wm-accent-rgb), 0.12), rgba(255, 255, 255, 0.04));
            border-color: rgba(var(--wm-accent-rgb), 0.42);
            color: var(--wm-btn-tint);
        }

        .tbm-strip {
            margin-top: 18px;
            overflow: hidden;
            position: relative;
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
        }

        .tbm-strip.is-dragging {
            cursor: grabbing;
        }

        .tbm-strip__bg {
            display: none;
        }

        .tbm-strip__viewport {
            min-width: 0;
        }

        .tbm-strip__track {
            display: grid;
            grid-template-columns: repeat(10, minmax(0, 1fr));
            gap: 18px;
            justify-items: center;
            align-items: start;
            will-change: transform;
        }

        .tbm-artist,
        .tbm-artist:hover {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: #fff;
            text-decoration: none;
            width: auto;
            min-width: 0;
            height: auto;
            transition: opacity 0.32s ease, transform 0.32s ease;
        }

        .tbm-thumb {
            width: 82px;
            height: 82px;
            display: block;
            border-radius: 12px;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 8px;
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
            transition: transform 0.25s ease, border-color 0.25s ease;
            transform-origin: center;
            will-change: transform;
        }

        .trending-beatmakers.wm-dynamic-accent .tbm-thumb {
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }

        .tbm-name {
            display: block;
            max-width: 100%;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color 0.25s ease;
        }

        .tbm-panel {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 15030;
        }

        .tbm-panel.is-active {
            display: flex;
        }

        .tbm-panel__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(10, 10, 12, 0.35);
            -webkit-backdrop-filter: blur(18px) saturate(120%);
            backdrop-filter: blur(18px) saturate(120%);
        }

        .tbm-panel__dialog {
            position: relative;
            z-index: 1;
            width: min(100%, 960px);
            max-height: 90vh;
            overflow: auto;
            background: rgba(38, 38, 42, 0.78);
            -webkit-backdrop-filter: blur(16px) saturate(120%);
            backdrop-filter: blur(16px) saturate(120%);
            border-radius: 28px;
            padding: 28px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 24px 72px rgba(0, 0, 0, 0.45);
        }

        .tbm-panel__header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 22px;
        }

        .tbm-panel__title {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
        }

        .tbm-panel__range {
            margin: 4px 0 0;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.6);
        }

        .tbm-close {
            border: 0;
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 999px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .tbm-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 18px;
        }

        .tbm-panel .tbm-card {
            display: flex;
            align-items: center;
            text-decoration: none;
            border-radius: 20px;
            padding: 14px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #fff;
            transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
            gap: 16px;
            position: relative;
        }

        .tbm-panel .tbm-card:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.4);
            background: rgba(255, 255, 255, 0.08);
        }

        .tbm-card__content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .tbm-card__thumb {
            width: 88px;
            height: 88px;
            display: block;
            border-radius: 12px;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.2);
            margin: 10px 0;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
            transition: transform 0.25s ease, border-color 0.25s ease;
            transform-origin: center;
            will-change: transform;
        }

        .tbm-thumb__img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            background-color: #111;
            opacity: 1;
            transition: opacity 0.16s ease;
        }

        .wm-tbm-js .tbm-thumb__img[data-tbm-ready="0"] {
            opacity: 0;
        }

        .wm-tbm-js .tbm-thumb__img[data-tbm-ready="1"] {
            opacity: 1;
        }

        .tbm-panel .tbm-card__name {
            font-size: 15px;
            font-weight: 600;
            margin: 2px 0 0;
            text-align: left;
        }

        .tbm-card__extra {
            margin-top: 8px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.75);
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity 0.25s ease, max-height 0.25s ease;
        }

        .tbm-card__intro {
            margin: 4px 0 0;
            font-size: 12px;
            line-height: 1.4;
            color: rgba(255, 255, 255, 0.8);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .tbm-panel .tbm-card:hover .tbm-card__extra {
            opacity: 1;
            max-height: 200px;
        }

        .tbm-card__statline {
            font-weight: 600;
            font-size: 12px;
            color: #f4f4f4;
        }

        .tbm-artist:hover .tbm-thumb,
        .tbm-card:hover .tbm-card__thumb {
            border-color: rgba(255, 255, 255, 0.65);
        }

        .trending-beatmakers.wm-dynamic-accent .tbm-artist.is-featured .tbm-thumb,
        .trending-beatmakers.wm-dynamic-accent .tbm-artist.is-hovered .tbm-thumb,
        .trending-beatmakers.wm-dynamic-accent .tbm-artist:focus-visible .tbm-thumb {
            border-color: var(--wm-border-tint);
            box-shadow:
                0 12px 26px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(var(--wm-accent-rgb), 0.18),
                0 0 28px rgba(var(--wm-accent-rgb), 0.16);
        }

        .trending-beatmakers.wm-dynamic-accent .tbm-artist.is-featured .tbm-name,
        .trending-beatmakers.wm-dynamic-accent .tbm-artist.is-hovered .tbm-name,
        .trending-beatmakers.wm-dynamic-accent .tbm-artist:focus-visible .tbm-name {
            color: #fff;
        }

        body.tbm-no-scroll {
            overflow: hidden;
        }

        @media (max-width: 1024px) {
            .trending-beatmakers {
                padding: 18px;
            }

            .tbm-strip {
                overflow-x: auto;
                padding-bottom: 6px;
                scroll-snap-type: x proximity;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                touch-action: pan-y;
                overscroll-behavior-inline: contain;
            }

            .tbm-strip__viewport {
                width: max-content;
            }

            .tbm-strip__track {
                display: flex;
                gap: 14px;
                width: max-content;
            }

            .tbm-strip::-webkit-scrollbar {
                height: 6px;
            }

            .tbm-strip::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.2);
                border-radius: 999px;
            }

            .tbm-artist {
                flex: 0 0 auto;
                width: 80px;
                scroll-snap-align: start;
            }

            .tbm-thumb {
                width: 66px;
                height: 66px;
            }

            .tbm-panel__dialog {
                padding: 20px;
                border-radius: 20px;
            }

            .tbm-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
        }

        @media (max-width: 520px) {
            .tbm-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .tbm-panel .tbm-card {
                flex-direction: column;
                text-align: center;
            }

            .tbm-card__content {
                align-items: center;
            }

            .tbm-card__intro {
                text-align: center;
                -webkit-line-clamp: 4;
            }
        }

        @media (min-width: 1025px) {
            #chart .wm-home-duo {
                --wm-home-duo-gap-y: 24px;
                --wm-random-strip-height: auto;
            }

            #chart .wm-home-duo {
                display: grid;
                grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
                gap: 24px;
                align-items: start;
                margin: var(--wm-home-duo-gap-y) 0;
            }

            #chart .wm-home-duo>#wm-random-strip,
            #chart .wm-home-duo>#trending-beatmakers-shell {
                min-width: 0;
            }

            #chart .wm-home-duo>#wm-random-strip {
                width: 100%;
                max-width: none;
                margin: 0;
                align-self: start;
            }

            #chart .wm-home-duo>#trending-beatmakers-shell {
                display: flex;
                align-self: start;
                min-height: var(--wm-random-strip-height);
            }

            #chart .wm-home-duo>#trending-beatmakers-shell>.trending-beatmakers,
            #chart .wm-home-duo>#trending-beatmakers-shell>.trending-loading {
                width: 100%;
                min-height: var(--wm-random-strip-height);
                height: var(--wm-random-strip-height);
                box-sizing: border-box;
            }

            #chart .wm-home-duo>#trending-beatmakers-shell>.trending-beatmakers {
                margin-top: 0 !important;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                padding: 12px 18px 10px;
                border-radius: 20px;
                overflow: hidden;
                position: relative;
            }

            #chart .wm-home-duo>#trending-beatmakers-shell>.trending-loading {
                padding: 14px 18px 12px;
                border-radius: 20px;
                border: 1px solid rgba(255, 255, 255, 0.12);
                background: rgba(11, 14, 22, 0.26);
                -webkit-backdrop-filter: blur(16px) saturate(130%);
                backdrop-filter: blur(16px) saturate(130%);
                box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
            }

            #trending-beatmakers-shell .tbm-header {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                min-height: 0;
                position: absolute;
                top: 8px;
                right: 8px;
                bottom: 8px;
                left: 18px;
                pointer-events: none;
                z-index: 3;
            }

            #trending-beatmakers-shell .tbm-header__titles {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                border: 0;
            }

            #trending-beatmakers-shell .tbm-title {
                margin: 0;
            }

            #trending-beatmakers-shell .tbm-view-all {
                --tbm-view-all-label-inset: 8px;
                pointer-events: auto;
                align-self: center;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                position: relative;
                width: 20px;
                min-width: 20px;
                height: calc(100% - 2px);
                margin-left: auto;
                margin-right: -8px;
                padding: 0;
                font-size: 7px;
                line-height: 1;
                letter-spacing: 0.16em;
                text-transform: uppercase;
                color: rgba(226, 232, 241, 0.62);
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.008) 100%),
                    rgba(7, 10, 16, 0.58);
                border: 1px solid rgba(255, 255, 255, 0.12);
                border-right: 0;
                border-radius: 8px 0 0 8px;
                box-shadow:
                    inset 1px 0 0 rgba(255, 255, 255, 0.05),
                    inset 0 -1px 0 rgba(0, 0, 0, 0.48);
                -webkit-backdrop-filter: blur(8px) saturate(108%);
                backdrop-filter: blur(8px) saturate(108%);
                transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
            }

            #trending-beatmakers-shell .trending-beatmakers.wm-dynamic-accent .tbm-view-all {
                border-color: rgba(255, 255, 255, 0.12);
                box-shadow:
                    inset 1px 0 0 rgba(255, 255, 255, 0.05),
                    inset 0 -1px 0 rgba(0, 0, 0, 0.48);
            }

            #trending-beatmakers-shell .tbm-view-all:hover,
            #trending-beatmakers-shell .tbm-view-all:focus-visible,
            #trending-beatmakers-shell .trending-beatmakers.wm-dynamic-accent .tbm-view-all:hover,
            #trending-beatmakers-shell .trending-beatmakers.wm-dynamic-accent .tbm-view-all:focus-visible {
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 100%),
                    rgba(9, 12, 18, 0.64);
                border-color: rgba(255, 255, 255, 0.18);
                color: rgba(240, 245, 252, 0.78);
                box-shadow:
                    inset 1px 0 0 rgba(255, 255, 255, 0.07),
                    inset 0 -1px 0 rgba(0, 0, 0, 0.52);
                outline: none;
            }

            #trending-beatmakers-shell .tbm-view-all__label {
                position: absolute;
                top: var(--tbm-view-all-label-inset);
                right: 0;
                bottom: var(--tbm-view-all-label-inset);
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                writing-mode: vertical-rl;
                text-orientation: upright;
                transform: none;
                font-size: 0;
                line-height: 1;
                white-space: nowrap;
                pointer-events: none;
            }

            #trending-beatmakers-shell .tbm-view-all__label::before {
                content: "VIEW";
                display: block;
                font-size: 7px;
                font-weight: 700;
                letter-spacing: 0.16em;
                line-height: 1;
            }

            #trending-beatmakers-shell .tbm-strip {
                --wm-tbm-gap: 8px;
                --wm-tbm-item-width: 76px;
                margin-top: 0;
                overflow: hidden;
                flex: 1 1 auto;
                display: flex;
                align-items: center;
                min-height: 0;
                padding: 6px 0 4px;
                position: relative;
                z-index: 1;
            }

            #trending-beatmakers-shell .tbm-strip__bg {
                position: absolute;
                inset: 6px 12px 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                pointer-events: none;
                z-index: 0;
            }

            #trending-beatmakers-shell .tbm-strip__bg-copy {
                width: 96%;
                max-width: 700px;
                display: grid;
                gap: clamp(0px, 0.2vw, 4px);
                align-content: center;
                justify-items: center;
                text-align: center;
            }

            #trending-beatmakers-shell .tbm-strip__bg-line {
                display: block;
                max-width: 100%;
                font-family: 'Mulish', 'Noto Sans KR', sans-serif;
                font-size: clamp(34px, 4.15vw, 52px);
                font-weight: 650;
                line-height: 0.82;
                letter-spacing: 0.19em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.044);
                -webkit-text-stroke: 1px rgba(255, 255, 255, 0.018);
                text-shadow:
                    0 -1px 1px rgba(0, 0, 0, 0.5),
                    0 1px 1px rgba(255, 255, 255, 0.12),
                    0 10px 22px rgba(0, 0, 0, 0.16);
                white-space: nowrap;
                opacity: 0.7;
                mix-blend-mode: soft-light;
                pointer-events: none;
            }

            #trending-beatmakers-shell .tbm-strip__bg-line--top {
                transform: translateX(-4%);
            }

            #trending-beatmakers-shell .tbm-strip__bg-line--bottom {
                transform: translateX(4.5%);
            }

            #trending-beatmakers-shell .tbm-strip__viewport {
                width: 100%;
                min-width: 0;
                overflow: hidden;
                display: flex;
                align-items: center;
                position: relative;
                z-index: 1;
            }

            #trending-beatmakers-shell .tbm-strip__track {
                display: flex;
                align-items: center;
                gap: var(--wm-tbm-gap);
                width: max-content;
                justify-items: unset;
                position: relative;
                z-index: 1;
            }

            #trending-beatmakers-shell .tbm-artist {
                flex: 0 0 var(--wm-tbm-item-width);
                width: var(--wm-tbm-item-width);
                min-height: 118px;
                justify-content: center;
                opacity: 0.78;
                transform: none;
                transform-origin: center bottom;
            }

            #trending-beatmakers-shell .tbm-thumb {
                width: clamp(62px, calc(var(--wm-tbm-item-width) * 0.84), 68px);
                height: clamp(62px, calc(var(--wm-tbm-item-width) * 0.84), 68px);
                margin-bottom: 6px;
                transform: scale(1);
                transform-origin: center 38%;
                transition:
                    width 0.42s ease,
                    height 0.42s ease,
                    margin-bottom 0.42s ease,
                    border-color 0.42s ease,
                    box-shadow 0.42s ease,
                    transform 0.42s ease,
                    filter 0.42s ease;
            }

            #trending-beatmakers-shell .tbm-name {
                width: 100%;
                min-height: 0;
                max-width: 100%;
                font-size: 13.5px;
                font-weight: 700;
                line-height: 1.2;
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: normal;
                text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
                transition: font-size 0.42s ease, line-height 0.42s ease, opacity 0.42s ease;
            }

            #trending-beatmakers-shell .tbm-artist.is-featured {
                opacity: 1;
            }

            #trending-beatmakers-shell .tbm-artist.is-featured .tbm-thumb {
                width: clamp(82px, calc(var(--wm-tbm-item-width) * 1.15), 92px);
                height: clamp(82px, calc(var(--wm-tbm-item-width) * 1.15), 92px);
                margin-bottom: 6px;
                border-color: rgba(255, 255, 255, 0.72);
                box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38);
                transform: scale(1.06);
                filter: saturate(1.02);
            }

            #trending-beatmakers-shell .tbm-artist.is-featured .tbm-thumb .tbm-thumb__img {
                object-position: center 32%;
            }

            #trending-beatmakers-shell .tbm-artist.is-featured .tbm-name {
                font-size: 14.75px;
                line-height: 1.2;
                opacity: 1;
            }

            #trending-beatmakers-shell .tbm-artist:not(.is-featured) .tbm-name {
                opacity: 0.9;
            }

            #chart>.ttl.chart_tab {
                margin-top: 0;
            }

            #chart .wm-home-duo+.ttl.chart_tab {
                margin-top: var(--wm-home-duo-gap-y);
            }
        }
    


/* source style block 3 */
        /* Home index vertical rhythm (section spacing only). */
        section#main {
            --wm-space-duo-to-chart-title: 16px;
            --wm-space-search-to-chips: 24px;
            --wm-space-chips-to-cta: 0;
            --wm-space-cta-to-curated: 48px;
            --wm-space-curated-to-discovery: 40px;
            --wm-space-chart-head-to-content: 24px;
            padding-top: 0 !important;
            padding-bottom: 88px !important;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(64, 78, 92, 0.12) 0%, rgba(15, 18, 24, 0.08) 34%, rgba(0, 0, 0, 0) 66%),
                radial-gradient(ellipse at 18% 42%, rgba(92, 76, 64, 0.045) 0%, rgba(0, 0, 0, 0) 58%),
                linear-gradient(180deg, #08090d 0%, #0d0e12 22%, #111112 44%, #0f0f10 68%, #09090a 100%);
            background-color: #0b0b0d;
        }

        section#main::after {
            content: "";
            position: absolute;
            left: 50%;
            right: auto;
            bottom: 0;
            width: min(1160px, calc(100% - 32px));
            height: 14px;
            transform: translateX(-50%);
            background: linear-gradient(90deg,
                    rgba(217, 36, 20, 0) 0%,
                    rgba(217, 36, 20, 0.11) 12%,
                    rgba(217, 36, 20, 0.32) 32%,
                    rgba(217, 36, 20, 0.34) 50%,
                    rgba(217, 36, 20, 0.32) 68%,
                    rgba(217, 36, 20, 0.11) 88%,
                    rgba(217, 36, 20, 0) 100%);
            box-shadow: 0 0 18px rgba(217, 36, 20, 0.06);
            pointer-events: none;
        }

        section#main section.top.search-hero {
            background-color: transparent !important;
            margin-top: 0 !important;
        }

        section#main section.beats,
        section#main section.music,
        section#main section.chart,
        section#main section.magazine,
        section#main section.event,
        section#main section.wm-home-section {
            background-color: transparent !important;
        }

        section#main section.event {
            margin-bottom: 0 !important;
        }

        section#main section.contents_4ea.magazine .home-magazine-card .txt {
            padding: 12px 14px 13px;
        }

        section#main section.contents_4ea.magazine .home-magazine-card .txt .ttl {
            display: -webkit-box;
            height: auto !important;
            min-height: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        section#main section.contents_4ea.magazine .home-magazine-card .txt .date {
            display: none !important;
        }

        #contents_main+footer {
            margin-top: 0 !important;
        }

        section#main .search-hero .wm-search-palette {
            margin: 0 auto var(--wm-space-search-to-chips) !important;
        }

        section#main section.top.search-hero .direct {
            margin-top: var(--wm-space-chips-to-cta) !important;
        }

        section#main section.contents_6ea.wm-home-section.recommend0_tab,
        section#main section.contents_6ea.wm-home-section.recommend1_tab {
            margin-top: var(--wm-space-cta-to-curated) !important;
        }

        section#main>section.contents_1ea.chart.wm-home-section {
            margin-top: var(--wm-space-curated-to-discovery) !important;
        }

        section#main #chart .wm-home-duo {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        @media only screen and (max-width: 768px) {
            section#main {
                --wm-space-uniform-mobile-block: 28px;
                --wm-space-duo-to-chart-title: 30px;
                --wm-space-search-to-chips: 22px;
                --wm-space-chips-to-cta: 0;
                --wm-space-cta-to-curated: 40px;
                --wm-space-curated-to-discovery: var(--wm-space-uniform-mobile-block);
                --wm-space-chart-head-to-content: 20px;
                padding-bottom: 64px !important;
            }

            section#main::after {
                width: calc(100% - 22px);
                height: 10px;
            }

            section#main #chart .wm-home-duo {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }

            section#main #chart .wm-home-duo>#wm-random-strip {
                margin: 0 auto !important;
            }

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


/* source style block 4 */
        /* ⬇️ 좌측은 딱 붙이고, 우측만 페이드 남기기 */
        .search-hero .chips-marquee::before {
            width: 0;
            background: none;
        }

        /* ⬇️ 혹시 상위가 text-align:center 여도 왼쪽 정렬 고정 */
        .search-hero .chips-wrap {
            width: 100%;
            max-width: var(--wm-search-console-max-width);
            margin-left: auto;
            margin-right: auto;
            text-align: left;
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            overflow: hidden;
            --wm-spotlight-lane-width: 186px;
            --wm-spotlight-overlap: 26px;
            --wm-spotlight-feather-width: 64px;
            --wm-spotlight-cover-rgb: 8, 12, 20;
        }

        .search-hero .chips-wrap.has-spotlight::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: var(--wm-spotlight-lane-width);
            pointer-events: none;
            z-index: 3;
            border-radius: 10px;
            background: linear-gradient(to right,
                    rgba(var(--wm-spotlight-cover-rgb), 0.98) 0%,
                    rgba(var(--wm-spotlight-cover-rgb), 0.98) 58%,
                    rgba(var(--wm-spotlight-cover-rgb), 0.90) 72%,
                    rgba(var(--wm-spotlight-cover-rgb), 0.68) 84%,
                    rgba(var(--wm-spotlight-cover-rgb), 0.36) 93%,
                    rgba(var(--wm-spotlight-cover-rgb), 0) 100%);
        }

        .search-hero .chips-marquee {
            display: block;
            width: 100%;
            flex: 1 1 auto;
            min-width: 0;
            min-height: 0;
            padding: 6px 0;
            box-sizing: border-box;
            text-align: left;
            position: relative;
            z-index: 1;
        }

        .search-hero .chips-wrap.has-spotlight .chips-marquee {
            margin-left: calc(-1 * var(--wm-spotlight-overlap));
            padding-left: var(--wm-spotlight-overlap);
            /* overlay fallback 위에, 칩 자체 alpha를 왼쪽에서 점진적으로 올려 "뒤로 숨는" 인상을 강화 */
            -webkit-mask-image: linear-gradient(to right,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 0.08) calc(var(--wm-spotlight-overlap) + 4px),
                    rgba(0, 0, 0, 0.45) calc(var(--wm-spotlight-overlap) + 18px),
                    rgba(0, 0, 0, 0.82) calc(var(--wm-spotlight-overlap) + 34px),
                    rgba(0, 0, 0, 1) calc(var(--wm-spotlight-overlap) + var(--wm-spotlight-feather-width)),
                    rgba(0, 0, 0, 1) 100%);
            mask-image: linear-gradient(to right,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 0.08) calc(var(--wm-spotlight-overlap) + 4px),
                    rgba(0, 0, 0, 0.45) calc(var(--wm-spotlight-overlap) + 18px),
                    rgba(0, 0, 0, 0.82) calc(var(--wm-spotlight-overlap) + 34px),
                    rgba(0, 0, 0, 1) calc(var(--wm-spotlight-overlap) + var(--wm-spotlight-feather-width)),
                    rgba(0, 0, 0, 1) 100%);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
        }

        .search-hero .chips-marquee .marquee__track {
            display: flex;
            align-items: center;
        }

        .search-hero .trending-chip {
            display: inline-flex;
            align-items: center;
            margin-top: 0;
            flex: 0 0 auto;
            position: relative;
            z-index: 5;
            isolation: isolate;
        }

        .search-hero .chips-wrap.has-spotlight .trending-chip::after {
            content: "";
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            width: var(--wm-spotlight-feather-width);
            height: calc(100% + 8px);
            border-radius: 999px;
            pointer-events: none;
            z-index: 0;
            background: linear-gradient(to right,
                    rgba(var(--wm-spotlight-cover-rgb), 0.92) 0%,
                    rgba(var(--wm-spotlight-cover-rgb), 0.62) 52%,
                    rgba(var(--wm-spotlight-cover-rgb), 0.28) 82%,
                    rgba(var(--wm-spotlight-cover-rgb), 0) 100%);
        }

        .search-hero .trending-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 30px;
            padding: 0 11px;
            border-radius: 10px;
            border: 1px solid rgba(132, 228, 173, 0.16);
            background:
                linear-gradient(145deg, rgba(18, 24, 31, 0.9), rgba(10, 14, 20, 0.78)),
                rgba(10, 13, 19, 0.72);
            box-shadow:
                0 10px 22px rgba(2, 8, 12, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            color: rgba(230, 238, 243, 0.9);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1;
            white-space: nowrap;
            -webkit-backdrop-filter: blur(10px) saturate(125%);
            backdrop-filter: blur(10px) saturate(125%);
            position: relative;
            z-index: 1;
        }

        .search-hero .trending-badge .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex: 0 0 8px;
            background: radial-gradient(circle at 35% 35%, #7dff9c 0%, #32df6d 58%, #16a34a 100%);
            box-shadow:
                0 0 0 3px rgba(44, 199, 97, 0.14),
                0 0 10px rgba(74, 222, 128, 0.3);
        }

        .search-hero .trending-badge .material-icons {
            font-size: 13px !important;
            color: rgba(234, 240, 245, 0.72);
        }

        .search-hero .trending-badge .label {
            color: rgba(241, 248, 252, 0.92);
        }

        .search-hero .trending-badge .badge-label-mobile {
            display: none;
        }

        .search-hero .trending-badge .sep {
            color: rgba(116, 206, 151, 0.72);
            font-size: 10px;
        }

        .search-hero .trending-badge time.relative {
            color: rgba(214, 223, 229, 0.84);
            font-variant-numeric: tabular-nums;
        }

        /* Safari 계열에서 backdrop-filter 비용을 줄여 칩/배지 스크롤 끊김을 완화 */
        @supports (-webkit-touch-callout: none) {
            .search-hero .chips-marquee .chip {
                -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
            }

            .search-hero .trending-badge {
                -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
            }
        }

        /* inline-flex → flex */
        .search-hero {
            position: relative;
            z-index: 0;
            isolation: isolate;
            overflow: visible;
        }

        /* PC only: avoid clipping of chips + action buttons without affecting mobile spacing. */
        @media (min-width: 1025px) {
            section#main section.top.search-hero {
                height: auto;
                min-height: 0;
                padding-bottom: 0;
            }
        }

        .search-hero .container {
            --wm-search-console-max-width: 944px;
            position: relative;
            z-index: 5;
        }

        /* Effect-first: keep legacy PNG unloaded unless fallback is needed. */
        .search-hero {
            background-image: none !important;
        }

        .search-hero.wm-prism-fallback {
            background-image: url('/static/img/main_top_bg.png') !important;
        }

        /* Prism FX layer */
        .search-hero .wm-hero-haze {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 300%;
            z-index: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity 260ms ease;
            background:
                linear-gradient(180deg, rgba(1, 1, 2, 0.99) 0%, rgba(7, 7, 8, 0.94) 42%, rgba(15, 15, 16, 0.58) 72%, rgba(15, 15, 16, 0) 100%),
                linear-gradient(140deg, rgba(2, 2, 3, 0.88) 0%, rgba(22, 22, 23, 0.58) 68%, rgba(22, 22, 23, 0) 100%);
        }

        /* Keep prism stage in a Vantablack/gray range instead of blue-green tint. */
        .search-hero .wm-hero-haze::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 25% 20%, rgba(188, 190, 192, 0.055), transparent 45%),
                radial-gradient(circle at 80% 15%, rgba(72, 74, 76, 0.12), transparent 45%);
        }

        .search-hero.wm-prism-on .wm-hero-haze {
            opacity: 1;
        }

        /* When prism sheen is active, hide legacy hero bg image (main_top_bg.png). */
        .search-hero.wm-prism-on {
            background-image: none !important;
            background-color: transparent !important;
        }

        /* Home mobile header: keep hero background visible behind fixed top bar. */
        @media only screen and (max-width: 768px) {

            header.mobile,
            header.mobile.scroll,
            header.mobile.sub {
                background-image: none !important;
                background: transparent !important;
                border-bottom: 0 !important;
                box-shadow: none !important;
                -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
            }

            header.mobile .gnb,
            header.mobile .gnb>.container {
                background-image: none !important;
                background-color: transparent !important;
                background: transparent !important;
            }

            section#main section.top.search-hero {
                background-attachment: scroll !important;
                background-position: center top !important;
            }
        }

        /* PC only: remove 32px gap between hero CTA area and first recommend section. */
        @media (min-width: 1025px) {

            section#main section.wm-home-section.recommend0_tab,
            section#main section.wm-home-section.recommend1_tab {
                margin: 0 0 0 0 !important;
            }

            section#main section.contents_6ea.wm-home-section.recommend0_tab,
            section#main section.contents_6ea.wm-home-section.recommend1_tab {
                margin-top: var(--wm-space-cta-to-curated, 36px) !important;
            }
        }

        /* Remove legacy hero bottom gradient to avoid a visible seam line. */
        section#main section.top.search-hero.wm-prism-on::after {
            display: none;
        }
    


/* source style block 5 */
        .search-hero.wm-search-palette-active {
            z-index: 52;
        }

        .search-hero.wm-search-palette-active .container {
            z-index: 54;
        }

        .search-hero .wm-search-palette {
            position: relative;
            z-index: 60;
            max-width: var(--wm-search-console-max-width);
            margin: 0 auto 18px;
        }

        section#main #mainSearchFrm.wm-search-palette__form {
            --wm-search-console-inner-height: 48px;
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 0;
            width: 100%;
            height: auto;
            min-height: calc(var(--wm-search-console-inner-height) + 16px);
            padding: 8px 16px 8px 16px;
            box-sizing: border-box;
            border-radius: 24px;
            border: 1px solid rgba(209, 164, 119, 0.2);
            background:
                linear-gradient(145deg, rgba(18, 21, 30, 0.88), rgba(10, 12, 19, 0.72)),
                rgba(10, 12, 18, 0.72);
            -webkit-backdrop-filter: blur(18px) saturate(145%);
            backdrop-filter: blur(18px) saturate(145%);
            box-shadow:
                0 26px 60px rgba(0, 0, 0, 0.34),
                0 0 0 1px rgba(255, 255, 255, 0.03),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
            transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
        }

        section#main #mainSearchFrm.wm-search-palette__form::before {
            content: "Search Console";
            position: absolute;
            top: -12px;
            left: 16px;
            padding: 0 10px;
            border-radius: 999px;
            border: 1px solid rgba(188, 141, 92, 0.24);
            background: rgba(13, 14, 18, 0.94);
            color: rgba(234, 201, 165, 0.84);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            line-height: 22px;
            pointer-events: none;
        }

        section#main #mainSearchFrm.wm-search-palette__form:focus-within,
        section#main .search-hero .wm-search-palette.is-open #mainSearchFrm.wm-search-palette__form {
            border-color: rgba(203, 153, 102, 0.4);
            background:
                linear-gradient(145deg, rgba(24, 26, 36, 0.92), rgba(10, 12, 20, 0.76)),
                rgba(10, 12, 18, 0.78);
            box-shadow:
                0 30px 76px rgba(0, 0, 0, 0.44),
                0 0 0 1px rgba(197, 146, 96, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
            transform: translateY(-1px);
        }

        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__field {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            align-self: stretch;
            min-height: var(--wm-search-console-inner-height);
            padding: 0 16px 0 6px;
            box-sizing: border-box;
        }

        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__field::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            width: 1px;
            height: 28px;
            transform: translateY(-50%);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(234, 205, 177, 0.26), rgba(255, 255, 255, 0));
            pointer-events: none;
        }

        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword {
            display: block;
            flex: 1 1 auto;
            min-width: 0;
            width: 100%;
            height: var(--wm-search-console-inner-height);
            min-height: var(--wm-search-console-inner-height);
            margin: 0;
            padding: 0 0 0 16px;
            border: 0 !important;
            border-radius: 999px;
            outline: none;
            background: transparent !important;
            background-color: transparent !important;
            box-shadow: none !important;
            color: #fff;
            -webkit-text-fill-color: #fff;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1.25;
            box-sizing: border-box;
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            top: 0;
            caret-color: rgba(255, 255, 255, 0.94);
        }

        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__hint {
            position: absolute;
            top: 50%;
            left: 16px;
            right: 0;
            transform: translateY(-50%);
            pointer-events: none;
            color: rgba(255, 255, 255, 0.88);
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 1;
            transition: color 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
        }

        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__field.is-focused .wm-search-palette__hint {
            color: rgba(255, 255, 255, 0.18);
            opacity: 0.66;
            filter: blur(0.3px);
        }

        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__field.has-value .wm-search-palette__hint {
            opacity: 0;
        }

        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__field.is-editing .wm-search-palette__hint {
            opacity: 0;
        }

        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword::placeholder,
        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword::-webkit-input-placeholder,
        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword::-moz-placeholder {
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
            font-weight: 500;
            opacity: 0;
            text-shadow: none;
            transition: none;
        }

        section#main #mainSearchFrm.wm-search-palette__form:focus-within input#mainSearchKeyword::placeholder,
        section#main #mainSearchFrm.wm-search-palette__form:focus-within input#mainSearchKeyword::-webkit-input-placeholder,
        section#main #mainSearchFrm.wm-search-palette__form:focus-within input#mainSearchKeyword::-moz-placeholder,
        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword:focus::placeholder,
        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword:focus::-webkit-input-placeholder,
        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword:focus::-moz-placeholder {
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
            font-weight: 500;
            opacity: 0;
            text-shadow: none;
        }

        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword:-webkit-autofill,
        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword:-webkit-autofill:hover,
        section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset !important;
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset !important;
            -webkit-text-fill-color: #fff !important;
            caret-color: #fff;
            transition: background-color 9999s ease-out 0s;
        }

        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__submit {
            position: relative;
            z-index: 1;
            flex: 0 0 auto;
            top: auto;
            right: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: center;
            min-width: 92px;
            height: calc(var(--wm-search-console-inner-height) - 12px);
            min-height: calc(var(--wm-search-console-inner-height) - 12px);
            margin: 0 0 0 8px;
            padding: 0 16px;
            border: 1px solid rgba(210, 223, 239, 0.66);
            border-radius: 999px;
            background:
                linear-gradient(180deg, rgba(234, 241, 249, 0.95), rgba(214, 225, 238, 0.92)),
                rgba(206, 219, 235, 0.9);
            color: rgba(22, 31, 45, 0.94);
            font-size: 12px;
            font-weight: 680;
            letter-spacing: 0.008em;
            line-height: 1;
            white-space: nowrap;
            box-sizing: border-box;
            -webkit-appearance: none;
            appearance: none;
            box-shadow:
                0 4px 12px rgba(4, 8, 16, 0.22),
                inset 0 1px 0 rgba(248, 252, 255, 0.78),
                inset 0 -1px 0 rgba(142, 159, 182, 0.44);
            transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
            cursor: pointer;
        }

        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__submit:hover,
        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__submit:focus-visible {
            outline: none;
            border-color: rgba(227, 238, 250, 0.82);
            background:
                linear-gradient(180deg, rgba(244, 249, 255, 0.97), rgba(224, 234, 246, 0.95)),
                rgba(216, 228, 242, 0.94);
            color: rgba(15, 23, 35, 0.95);
            box-shadow:
                0 8px 18px rgba(7, 12, 22, 0.24),
                inset 0 1px 0 rgba(251, 254, 255, 0.9),
                inset 0 -1px 0 rgba(136, 153, 176, 0.42);
        }

        section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__submit:active {
            transform: translateY(1px);
            background:
                linear-gradient(180deg, rgba(216, 227, 240, 0.96), rgba(196, 208, 224, 0.94)),
                rgba(190, 203, 220, 0.94);
            color: rgba(24, 34, 48, 0.92);
            box-shadow:
                0 3px 9px rgba(4, 8, 16, 0.18),
                inset 0 1px 0 rgba(245, 250, 255, 0.7),
                inset 0 -1px 0 rgba(120, 138, 162, 0.44);
        }

        section#main section.top.search-hero .direct {
            --wm-hero-red-rgb: 213, 32, 39;
            /* #d52027 */
            --wm-hero-red-deep-rgb: 160, 20, 28;
            --wm-hero-red-highlight-rgb: 226, 42, 49;
            --wm-hero-red-outline-rgb: 230, 62, 70;
            --wm-hero-blue-rgb: 37, 99, 235;
            /* #2563EB */
            --wm-hero-blue-deep-rgb: 29, 78, 216;
            --wm-hero-blue-highlight-rgb: 59, 130, 246;
            --wm-hero-blue-outline-rgb: 147, 197, 253;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            height: auto;
            min-height: 0;
            line-height: normal;
            margin-top: 30px;
            margin-bottom: 0;
            padding-bottom: 0;
            z-index: 5;
            position: relative;
        }

        section#main section.top.search-hero .direct a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0 22px;
            border-radius: 999px;
            border: 1px solid rgba(219, 181, 151, 0.16);
            background:
                linear-gradient(145deg, rgba(17, 21, 31, 0.9), rgba(10, 13, 21, 0.76)),
                rgba(11, 14, 22, 0.76);
            color: rgba(249, 241, 233, 0.92);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.01em;
            text-decoration: none;
            box-shadow:
                0 16px 36px rgba(0, 0, 0, 0.26),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
            transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
        }

        section#main section.top.search-hero .direct a.buy.explore-btn,
        section#main section.top.search-hero .direct a.sell {
            border-radius: 10px;
            border-color: rgba(26, 30, 36, 0.96);
            background:
                linear-gradient(180deg,
                    rgba(14, 16, 20, 0.98) 0%,
                    rgba(9, 11, 14, 0.97) 56%,
                    rgba(4, 5, 7, 0.97) 100%),
                linear-gradient(140deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 48%);
            color: rgba(236, 241, 246, 0.92);
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
            transform: translateY(1px);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.95),
                0 2px 8px rgba(0, 0, 0, 0.42),
                inset 0 2px 3px rgba(255, 255, 255, 0.05),
                inset 0 -10px 18px rgba(0, 0, 0, 0.7),
                inset 0 0 0 1px rgba(255, 255, 255, 0.02);
        }

        section#main section.top.search-hero .direct a.mypage {
            border-color: rgba(var(--wm-hero-red-outline-rgb), 0.58);
            background:
                linear-gradient(180deg, rgba(18, 20, 28, 0.9), rgba(11, 13, 19, 0.9)),
                rgba(var(--wm-hero-red-rgb), 0.08);
            color: rgba(244, 81, 91, 0.94);
            box-shadow:
                0 16px 30px rgba(0, 0, 0, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                inset 0 0 0 1px rgba(var(--wm-hero-red-rgb), 0.14);
        }

        section#main section.top.search-hero .direct a:hover,
        section#main section.top.search-hero .direct a:focus-visible {
            outline: none;
            transform: translateY(-1px);
            color: #fff;
        }

        section#main section.top.search-hero .direct a.buy.explore-btn:hover,
        section#main section.top.search-hero .direct a.buy.explore-btn:focus-visible,
        section#main section.top.search-hero .direct a.sell:hover,
        section#main section.top.search-hero .direct a.sell:focus-visible {
            background:
                linear-gradient(180deg,
                    rgba(42, 47, 55, 0.98) 0%,
                    rgba(20, 23, 29, 0.97) 56%,
                    rgba(7, 8, 11, 0.96) 100%),
                linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 48%);
            border-color: rgba(96, 106, 122, 0.64);
            color: rgba(248, 251, 255, 0.98);
            transform: translateY(-3px);
            box-shadow:
                0 22px 38px rgba(0, 0, 0, 0.58),
                0 8px 14px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.22),
                inset 0 -3px 6px rgba(0, 0, 0, 0.46),
                inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }

        section#main section.top.search-hero .direct a.buy.explore-btn:focus-visible {
            box-shadow:
                0 22px 38px rgba(0, 0, 0, 0.58),
                0 8px 14px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.22),
                inset 0 -3px 6px rgba(0, 0, 0, 0.46),
                inset 0 0 0 1px rgba(255, 255, 255, 0.08),
                0 0 0 3px rgba(154, 164, 180, 0.34);
        }

        section#main section.top.search-hero .direct a.mypage:hover,
        section#main section.top.search-hero .direct a.mypage:focus-visible {
            background:
                linear-gradient(180deg, rgba(24, 26, 36, 0.92), rgba(14, 16, 24, 0.92)),
                rgba(var(--wm-hero-red-rgb), 0.14);
            border-color: rgba(var(--wm-hero-red-outline-rgb), 0.78);
            color: rgba(255, 195, 201, 0.98);
            box-shadow:
                0 18px 34px rgba(34, 7, 12, 0.26),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                inset 0 0 0 1px rgba(var(--wm-hero-red-rgb), 0.2);
        }

        section#main section.top.search-hero .direct a.sell:focus-visible {
            box-shadow:
                0 22px 38px rgba(0, 0, 0, 0.58),
                0 8px 14px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.22),
                inset 0 -3px 6px rgba(0, 0, 0, 0.46),
                inset 0 0 0 1px rgba(255, 255, 255, 0.08),
                0 0 0 3px rgba(154, 164, 180, 0.34);
        }

        section#main section.top.search-hero .direct a.mypage:focus-visible {
            box-shadow:
                0 18px 34px rgba(34, 7, 12, 0.26),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                inset 0 0 0 1px rgba(var(--wm-hero-red-rgb), 0.2),
                0 0 0 3px rgba(var(--wm-hero-red-rgb), 0.2);
        }

        section#main section.top.search-hero .direct a:active {
            transform: translateY(1px);
        }

        section#main section.top.search-hero .direct a.buy.explore-btn:active,
        section#main section.top.search-hero .direct a.sell:active {
            background:
                linear-gradient(180deg,
                    rgba(11, 13, 16, 0.98) 0%,
                    rgba(4, 5, 7, 0.98) 100%);
            color: rgba(228, 234, 240, 0.9);
            transform: translateY(1px);
            box-shadow:
                0 1px 4px rgba(0, 0, 0, 0.36),
                inset 0 2px 5px rgba(255, 255, 255, 0.04),
                inset 0 -10px 18px rgba(0, 0, 0, 0.78),
                inset 0 0 0 1px rgba(255, 255, 255, 0.02);
        }

        section#main section.top.search-hero .direct a.mypage:active {
            background:
                linear-gradient(180deg, rgba(15, 17, 24, 0.94), rgba(10, 12, 18, 0.94)),
                rgba(var(--wm-hero-red-rgb), 0.12);
            box-shadow:
                0 9px 20px rgba(26, 6, 10, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 0 0 1px rgba(var(--wm-hero-red-rgb), 0.24);
        }

        .wm-musician-gate[hidden] {
            display: none !important;
        }

        .wm-musician-gate {
            position: fixed;
            inset: 0;
            z-index: 12000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        .wm-musician-gate__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(3, 6, 12, 0.66);
        }

        .wm-musician-gate__dialog {
            position: relative;
            width: min(420px, calc(100vw - 32px));
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
                rgba(11, 15, 23, 0.96);
            box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
            padding: 18px 18px 16px;
        }

        .wm-musician-gate__dialog h3 {
            margin: 0;
            color: #fff;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: 0.01em;
        }

        .wm-musician-gate__dialog p {
            margin: 10px 0 0;
            color: rgba(236, 232, 226, 0.88);
            font-size: 14px;
            line-height: 1.5;
        }

        .wm-musician-gate__actions {
            margin-top: 16px;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }

        .wm-musician-gate__btn {
            min-height: 40px;
            padding: 0 14px;
            border-radius: 10px;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
        }

        .wm-musician-gate__btn--ghost {
            border-color: rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.04);
            color: rgba(244, 239, 233, 0.9);
        }

        .wm-musician-gate__btn--primary {
            border-color: rgba(var(--wm-hero-red-highlight-rgb, 226, 42, 49), 0.5);
            background:
                linear-gradient(180deg,
                    rgba(var(--wm-hero-red-highlight-rgb, 226, 42, 49), 0.97) 0%,
                    rgba(var(--wm-hero-red-rgb, 213, 32, 39), 0.96) 56%,
                    rgba(var(--wm-hero-red-deep-rgb, 160, 20, 28), 0.95) 100%);
            color: rgba(255, 248, 249, 0.98);
        }

        .wm-musician-gate__btn--ghost:hover,
        .wm-musician-gate__btn--ghost:focus-visible {
            border-color: rgba(255, 255, 255, 0.4);
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            outline: none;
        }

        .wm-musician-gate__btn--primary:hover,
        .wm-musician-gate__btn--primary:focus-visible {
            border-color: rgba(255, 228, 231, 0.62);
            color: #fff;
            outline: none;
        }

        body.wm-musician-gate-open {
            overflow: hidden;
        }

        .search-hero .wm-search-palette__selection {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 10px;
            padding: 0 6px;
        }

        .search-hero .wm-search-palette__selection[hidden] {
            display: none !important;
        }

        .search-hero .wm-search-palette__selection-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            min-width: 0;
        }

        .search-hero .wm-search-palette__selection-chip {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            gap: 8px;
            padding: 7px 11px 7px 12px;
            border-radius: 999px;
            border: 1px solid rgba(219, 167, 114, 0.18);
            background: rgba(11, 14, 22, 0.46);
            color: rgba(255, 245, 232, 0.92);
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            -webkit-backdrop-filter: blur(12px) saturate(135%);
            backdrop-filter: blur(12px) saturate(135%);
        }

        .search-hero .wm-search-palette__selection-chip-label {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .search-hero .wm-search-palette__selection-chip-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.72);
            cursor: pointer;
            transition: background 0.16s ease, color 0.16s ease;
            -webkit-appearance: none;
            appearance: none;
        }

        .search-hero .wm-search-palette__selection-chip-remove:hover,
        .search-hero .wm-search-palette__selection-chip-remove:focus-visible {
            outline: none;
            background: rgba(255, 255, 255, 0.16);
            color: #fff;
        }

        .search-hero .wm-search-palette__selection-clear {
            flex: 0 0 auto;
            padding: 0;
            border: 0;
            background: transparent;
            color: rgba(232, 192, 152, 0.78);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: color 0.16s ease, opacity 0.16s ease;
            opacity: 0.86;
            -webkit-appearance: none;
            appearance: none;
        }

        .search-hero .wm-search-palette__selection-clear:hover,
        .search-hero .wm-search-palette__selection-clear:focus-visible {
            color: rgba(255, 236, 214, 0.96);
            outline: none;
            opacity: 1;
        }

        .search-hero .wm-search-palette__panel {
            display: none;
        }

        .search-hero .wm-search-palette.wm-search-palette-ready .wm-search-palette__panel {
            display: block;
            position: absolute;
            top: calc(100% + 14px);
            left: 0;
            right: auto;
            z-index: 88;
            width: fit-content;
            min-width: min(100%, 640px);
            max-width: min(100%, 944px);
            padding: 18px 20px 14px;
            border-radius: 26px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background:
                linear-gradient(160deg, rgba(29, 18, 18, 0.96), rgba(10, 12, 20, 0.97)),
                rgba(11, 14, 22, 0.95);
            box-sizing: border-box;
            -webkit-backdrop-filter: blur(22px) saturate(152%);
            backdrop-filter: blur(22px) saturate(152%);
            box-shadow:
                0 36px 90px rgba(0, 0, 0, 0.54),
                0 0 0 1px rgba(255, 255, 255, 0.03),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(-8px);
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
            max-height: min(70vh, 620px);
            overflow: auto;
        }

        .search-hero .wm-search-palette.is-open .wm-search-palette__panel {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }

        .search-hero .wm-search-palette__status {
            margin: 0 0 12px;
            max-width: 520px;
            color: rgba(255, 255, 255, 0.68);
            font-size: 13px;
            line-height: 1.5;
        }

        .search-hero .wm-search-palette__results {
            display: grid;
            gap: 12px;
        }

        .search-hero .wm-search-palette__section {
            display: grid;
            gap: 8px;
        }

        .search-hero .wm-search-palette__section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .search-hero .wm-search-palette__section-title {
            margin: 0;
            color: rgba(231, 191, 150, 0.92);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .search-hero .wm-search-palette__section-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 0;
            background: transparent;
            color: rgba(230, 190, 150, 0.72);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: color 0.16s ease, opacity 0.16s ease;
            opacity: 0.84;
        }

        .search-hero .wm-search-palette__section-action:hover,
        .search-hero .wm-search-palette__section-action:focus-visible {
            color: rgba(255, 220, 188, 0.96);
            outline: none;
            opacity: 1;
        }

        .search-hero .wm-search-palette__items {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 10px;
        }

        .search-hero .wm-search-palette__item-wrap {
            position: relative;
            min-width: 0;
            flex: 0 1 auto;
            max-width: 100%;
        }

        .search-hero .wm-search-palette__item {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0;
            width: auto;
            min-width: 0;
            max-width: min(100%, 320px);
            min-height: 0;
            padding: 12px 16px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
                rgba(255, 255, 255, 0.02);
            color: #fff;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
            -webkit-appearance: none;
            appearance: none;
        }

        .search-hero .wm-search-palette__item.is-selected {
            border-color: rgba(210, 158, 108, 0.46);
            background:
                linear-gradient(135deg, rgba(184, 122, 76, 0.22), rgba(255, 255, 255, 0.05)),
                rgba(255, 255, 255, 0.04);
            box-shadow:
                0 16px 30px rgba(0, 0, 0, 0.28),
                inset 0 0 0 1px rgba(235, 196, 154, 0.08);
        }

        .search-hero .wm-search-palette__item-wrap.is-recent .wm-search-palette__item {
            padding-right: 42px;
        }

        .search-hero .wm-search-palette__item:hover,
        .search-hero .wm-search-palette__item.is-highlighted,
        .search-hero .wm-search-palette__item:focus-visible {
            outline: none;
            border-color: rgba(198, 147, 99, 0.42);
            background:
                linear-gradient(135deg, rgba(180, 119, 72, 0.18), rgba(255, 255, 255, 0.05)),
                rgba(255, 255, 255, 0.03);
            transform: translateY(-1px);
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
        }

        .search-hero .wm-search-palette__item-main {
            display: block;
            gap: 0;
            min-width: 0;
            width: auto;
            max-width: 100%;
        }

        .search-hero .wm-search-palette__item-label {
            display: block;
            min-width: 0;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.24;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            word-break: break-word;
        }

        .search-hero .wm-search-palette__item-remove {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.58);
            cursor: pointer;
            transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
            -webkit-appearance: none;
            appearance: none;
        }

        .search-hero .wm-search-palette__item-remove:hover,
        .search-hero .wm-search-palette__item-remove:focus-visible {
            outline: none;
            border-color: rgba(210, 161, 114, 0.3);
            background: rgba(255, 255, 255, 0.07);
            color: rgba(255, 238, 218, 0.92);
        }

        .search-hero .wm-search-palette__empty {
            padding: 16px 14px;
            border-radius: 18px;
            border: 1px dashed rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.03);
            color: rgba(255, 255, 255, 0.65);
            font-size: 13px;
            line-height: 1.5;
        }

        .search-hero .wm-search-palette.is-open~.suggest.chips-wrap,
        .search-hero .wm-search-palette.is-open~section .direct {
            opacity: 0.3;
            transform: translateY(5px);
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }

        @media only screen and (max-width: 1180px) {
            .search-hero .wm-search-palette__items {
                gap: 9px;
            }

            .search-hero .wm-search-palette__item {
                max-width: min(100%, 280px);
            }
        }

        @media only screen and (max-width: 768px) {
            section#main section.top.search-hero {
                height: auto;
                min-height: 0;
                padding-bottom: 0;
            }

            .search-hero .wm-search-palette {
                margin-bottom: var(--wm-space-search-to-chips);
            }

            .search-hero .chips-marquee {
                padding: 6px 0;
            }

            .search-hero .chips-wrap {
                gap: 8px;
                --wm-spotlight-lane-width: 112px;
                --wm-spotlight-overlap: 14px;
                --wm-spotlight-feather-width: 42px;
            }

            .search-hero .chips-wrap.has-spotlight::before {
                width: var(--wm-spotlight-lane-width);
            }

            .search-hero .chips-wrap.has-spotlight .chips-marquee {
                margin-left: calc(-1 * var(--wm-spotlight-overlap));
                padding-left: var(--wm-spotlight-overlap);
            }

            .search-hero .trending-badge {
                gap: 5px;
                min-height: 26px;
                padding: 0 8px;
                font-size: 10px;
                border-radius: 8px;
            }

            .search-hero .trending-badge .status-dot {
                width: 7px;
                height: 7px;
                flex-basis: 7px;
                box-shadow:
                    0 0 0 2px rgba(44, 199, 97, 0.12),
                    0 0 8px rgba(74, 222, 128, 0.22);
            }

            .search-hero .trending-badge .material-icons {
                display: none;
            }

            .search-hero .trending-badge .badge-label-desktop,
            .search-hero .trending-badge .sep,
            .search-hero .trending-badge time.relative {
                display: none;
            }

            .search-hero .trending-badge .badge-label-mobile {
                display: inline;
            }

            section#main #mainSearchFrm.wm-search-palette__form {
                --wm-search-console-inner-height: 42px;
                padding: 9px 13px 9px 12px;
                border-radius: 20px;
            }

            section#main #mainSearchFrm.wm-search-palette__form::before {
                top: -10px;
                left: 12px;
                font-size: 9px;
                line-height: 20px;
            }

            section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__field {
                padding: 0 12px 0 2px;
            }

            section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__field::after {
                height: 24px;
            }

            section#main #mainSearchFrm.wm-search-palette__form input#mainSearchKeyword {
                margin: 0;
                padding-left: 14px;
                font-size: 15px;
            }

            section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__hint {
                left: 14px;
                font-size: 15px;
            }

            section#main #mainSearchFrm.wm-search-palette__form .wm-search-palette__submit {
                min-width: 76px;
                margin-left: 6px;
                padding: 0 12px;
                font-size: 11px;
                height: calc(var(--wm-search-console-inner-height) - 14px);
                min-height: calc(var(--wm-search-console-inner-height) - 14px);
            }

            section#main section.top.search-hero .direct {
                gap: 10px;
                height: auto;
                min-height: 0;
                line-height: normal;
                margin-top: clamp(18px, 4.5vw, 20px);
                margin-bottom: 0;
                padding-bottom: 0;
            }

            section#main section.top.search-hero .direct a {
                min-height: 42px;
                padding: 0 18px;
                font-size: 13px;
            }

            section#main section.contents_6ea.wm-home-section.recommend0_tab,
            section#main section.contents_6ea.wm-home-section.recommend1_tab {
                margin-top: var(--wm-space-cta-to-curated, 32px) !important;
            }

            .search-hero .wm-search-palette__selection {
                align-items: flex-start;
                flex-direction: column;
                gap: 8px;
                padding: 0 2px;
            }

            .search-hero .wm-search-palette__panel {
                top: calc(100% + 10px);
                left: 0;
                right: 0;
                width: auto;
                min-width: 0;
                max-width: none;
                padding: 14px 14px 12px;
                border-radius: 18px;
                max-height: min(58vh, 460px);
            }

            .search-hero .wm-search-palette__items {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                gap: 8px;
            }

            .search-hero .wm-search-palette__item {
                width: auto;
                max-width: min(100%, calc(100vw - 72px));
                min-height: 0;
                padding: 12px 12px 11px;
                border-radius: 14px;
            }

            .search-hero .wm-search-palette__status {
                margin-bottom: 12px;
            }
        }