PageSourceSearch

https://www.iamwatermelon.com/about

html iamwatermelon.com collected 2026-10-05 07:07:46 UTC 207,014 bytes, 5,489 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4
5<head>
6        <meta name="naver-site-verification" content="bf8b069cac233584ad0a7670f30621cf88816ca1" />
7    <meta charset="UTF-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
9    <meta name="format-detection" content="telephone=no" />
10    <meta http-equiv="X-UA-Compatible" content="ie=edge">
11    <meta name="author" content="WaterMelon">
12        <meta name="description" content="Learn how WaterMelon handles beat licensing, instant delivery and creator payout after platform fees.">
13            <meta name="robots" content="index, follow, max-image-preview:large">
14            
15    <meta http-equiv="content-language" content="en-US">
16    <meta http-equiv="Copyright" content="copyright@VintageHouse" />
17    <title>About WaterMelon | Beat Marketplace</title>
18    <meta property="og:title" content="About WaterMelon | Beat Marketplace">
19    <meta name="twitter:title" content="About WaterMelon | Beat Marketplace">
20    <link rel="preconnect" href="https://fonts.googleapis.com">
21    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22    <link rel="preconnect" href="https://unpkg.com">
23    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
24    
24<script>
25        (function() {
26            window.WM_S3 = '';
27            window.wmThumb = window.wmThumb || function(item, type, file) {
28                if (item && item.thumb_url) return item.thumb_url;
29                if (item && item.thumbnail_url) return item.thumbnail_url;
30                if (item && item.cover_url) return item.cover_url;
31                return '/static/img/noimg.png';
32            };
33        })();
34    </script>
34
35    
35<script>
36        (function() {
37            // Safety-first: keep global thumb guard disabled by default in production.
38            // Enable only when explicitly needed: window.WM_ENABLE_THUMB_GUARD = true;
39            if (window.WM_ENABLE_THUMB_GUARD !== true) {
40                return;
41            }
42
43            var PLACEHOLDER = '/static/img/noimg.png';
44            var THUMB_URL_RE = /\/thumb(?:-sig)?\//i;
45            var FAST_LIST_PATH_RE = /^\/service\/m\/list(?:\/|$)/i;
46            var FAST_MODE = FAST_LIST_PATH_RE.test(window.location.pathname || '');
47            var io = null;
48
49            function isThumbImage(img) {
50                if (!img || img.tagName !== 'IMG') return false;
51                if (img.getAttribute('data-hot-src') || img.getAttribute('data-reco-src') || img.getAttribute('data-chart-src')) return false;
52                var src = img.getAttribute('src') || '';
53                if (src === '' || src.indexOf(PLACEHOLDER) !== -1) return false;
54                return THUMB_URL_RE.test(src);
55            }
56
57            function loadRealThumb(img) {
58                if (!img || img.getAttribute('data-wm-thumb-loaded') === '1') return;
59                var realSrc = img.getAttribute('data-wm-thumb-src') || '';
60                if (realSrc === '') return;
61
62                img.setAttribute('data-wm-thumb-loaded', '1');
63                var probe = new Image();
64                probe.onload = function() {
65                    img.setAttribute('src', realSrc);
66                    img.removeAttribute('data-wm-thumb-src');
67                };
68                probe.onerror = function() {
69                    img.setAttribute('src', PLACEHOLDER);
70                    img.removeAttribute('data-wm-thumb-src');
71                };
72                probe.src = realSrc;
73            }
74
75            function observeOrLoad(img) {
76                if (io) {
77                    io.observe(img);
78                    return;
79                }
80                loadRealThumb(img);
81            }
82
83            function prepareThumb(img) {
84                if (!isThumbImage(img)) return;
85                if (img.getAttribute('data-wm-thumb-guard') === '1') return;
86
87                var src = img.getAttribute('src') || '';
88                img.setAttribute('data-wm-thumb-guard', '1');
89                if (!img.getAttribute('loading')) {
90                    img.setAttribute('loading', 'lazy');
91                }
92                img.setAttribute('decoding', 'async');
93
94                // BuyBeats list first-load optimization:
95                // do not swap to placeholder/probe flow; keep direct src to avoid white flash.
96                if (FAST_MODE) {
97                    img.onerror = function() {
98                        this.onerror = null;
99                        this.setAttribute('src', PLACEHOLDER);
100                    };
101                    return;
102                }
103
104                img.setAttribute('data-wm-thumb-src', src);
105                img.setAttribute('src', PLACEHOLDER);
106                observeOrLoad(img);
107            }
108
109            function scanThumbs(root) {
110                if (!root || !root.querySelectorAll) return;
111                var imgs = root.querySelectorAll('img[src]');
112                for (var i = 0; i < imgs.length; i++) {
113                    prepareThumb(imgs[i]);
114                }
115            }
116
117            function startGuard() {
118                if ('IntersectionObserver' in window) {
119                    io = new IntersectionObserver(function(entries, observer) {
120                        for (var i = 0; i < entries.length; i++) {
121                            var entry = entries[i];
122                            if (entry.isIntersecting || entry.intersectionRatio > 0) {
123                                loadRealThumb(entry.target);
124                                observer.unobserve(entry.target);
125                            }
126                        }
127                    }, {
128                        rootMargin: '200px 0px'
129                    });
130                }
131
132                scanThumbs(document);
133
134                if ('MutationObserver' in window) {
135                    var mo = new MutationObserver(function(mutations) {
136                        for (var i = 0; i < mutations.length; i++) {
137                            var added = mutations[i].addedNodes;
138                            for (var j = 0; j < added.length; j++) {
139                                var node = added[j];
140                                if (!node || node.nodeType !== 1) continue;
141                                if (node.tagName === 'IMG') {
142                                    prepareThumb(node);
143                                }
144                                scanThumbs(node);
145                            }
146                        }
147                    });
148                    mo.observe(document.documentElement, {
149                        childList: true,
150                        subtree: true
151                    });
152                }
153            }
154
155            if (document.readyState === 'loading') {
156                document.addEventListener('DOMContentLoaded', startGuard);
157            } else {
158                startGuard();
159            }
160        })();
161    </script>
161
162
163
164    <link rel="icon" type="image/x-icon" sizes="any" href="/favicon.ico?v=20260531-favicon-w">
165    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=20260531-favicon-w">
166    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=20260531-favicon-w">
167    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=20260531-favicon-w">
168    <link rel="icon" type="image/png" sizes="180x180" href="/apple-touch-icon.png?v=20260531-favicon-w">
169    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=20260531-favicon-w">
170    <meta name="msapplication-TileImage" content="/apple-touch-icon.png?v=20260531-favicon-w">
171            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
172            <meta property="og:description" content="Learn how WaterMelon handles beat licensing, instant delivery and creator payout after platform fees.">
173    <meta property="og:url" content="https://www.iamwatermelon.com/about">
174    <meta property="og:image" content="https://www.iamwatermelon.com/static/img/sns/watermelon_share_20260529.png">
175    <meta property="og:type" content="website">
176    <meta property="og:site_name" content="WaterMelon">
177    <meta property="og:locale" content="en_US">
178        <meta name="twitter:card" content="summary_large_image">
179    <meta name="twitter:description" content="Learn how WaterMelon handles beat licensing, instant delivery and creator payout after platform fees.">
180    <meta name="twitter:image" content="https://www.iamwatermelon.com/static/img/sns/watermelon_share_20260529.png">
181                <link rel="canonical" href="https://www.iamwatermelon.com/about" />
182        <link rel="sitemap" type="application/xml" href="https://www.iamwatermelon.com/sitemap.xml">
183    <link rel="alternate" type="application/rss+xml" title="WaterMelon RSS" href="https://www.iamwatermelon.com/rss.xml" />
184        
184<script type="application/ld+json">
185        {"@context":"https://schema.org","@type":"Organization","name":"WaterMelon","alternateName":["WaterMelon","IamWaterMelon","워터멜론","ウォーターメロン","WaterMelon Beat Marketplace"],"description":"Buy and sell type beats, hip hop beats, trap beats and producer instrumentals on WaterMelon. Compare MP3, WAV, Trackout and exclusive beat licenses.","url":"https://www.iamwatermelon.com/","logo":"https://www.iamwatermelon.com/static/img/license/watermelon_logo_certificate.png","knowsAbout":["beat marketplace","buy beats","sell beats","type beats","hip hop beats","trap beats","producer instrumentals","beat licensing","exclusive beats"]}    </script>
185
186    
186<script type="application/ld+json">
187        {"@context":"https://schema.org","@type":"WebSite","name":"WaterMelon","alternateName":["WaterMelon","IamWaterMelon","워터멜론","ウォーターメロン","WaterMelon Beat Marketplace"],"url":"https://www.iamwatermelon.com/","description":"Buy and sell type beats, hip hop beats, trap beats and producer instrumentals on WaterMelon. Compare MP3, WAV, Trackout and exclusive beat licenses.","inLanguage":["en","ko-KR","ja-JP","zh-CN"],"keywords":"beat marketplace, buy beats, sell beats, type beats, hip hop beats, trap beats, producer instrumentals, beat licensing, exclusive beats","about":["beat marketplace","buy beats","sell beats","type beats","hip hop beats","trap beats","producer instrumentals","beat licensing","exclusive beats"],"potentialAction":{"@type":"SearchAction","target":"https://www.iamwatermelon.com/us/service/m/list/all/1?search_type=1\u0026keyword={search_term_string}","query-input":"required name=search_term_string"}}    </script>
187
188                    
188<script>
189        window.WM_LANG = "us";
190        window.WM_LANG_PREFIX = "\/us";
191        window.WM_HREFLANG_MAP = {"us":"https://www.iamwatermelon.com/about?lang=us","ko":"https://www.iamwatermelon.com/about?lang=ko","jp":"https://www.iamwatermelon.com/about?lang=jp","cn":"https://www.iamwatermelon.com/about?lang=cn"};
192        window.WM_URLS = {
193            home: "\/us",
194            musicAll: "\/us\/service\/m\/list\/all\/1",
195            musicHipHop: "\/us\/service\/m\/list\/1\/1",
196            musicPop: "\/us\/service\/m\/list\/5\/1",
197            musicRnb: "\/us\/service\/m\/list\/6\/1",
198            musicKpop: "\/us\/service\/m\/list\/7\/1",
199            musicRock: "\/us\/service\/m\/list\/8\/1",
200            musicOthers: "\/us\/service\/m\/list\/9\/1",
201            magazineDomestic: "\/us\/service\/magazine\/list\/1\/1",
202            magazineGlobal: "\/us\/service\/magazine\/list\/2\/1",
203            magazineMedia: ""        };
204        window.wmIsLocalizablePath = window.wmIsLocalizablePath || function(path) {
205            var cleanPath = String(path || '').split('?')[0].replace(/\/+/g, '/');
206            if (!cleanPath || cleanPath.charAt(0) !== '/') {
207                cleanPath = '/' + cleanPath;
208            }
209            cleanPath = cleanPath.replace(/^\/(?:us|ko|jp|cn)(?=\/|$)/, '') || '/';
210            return cleanPath === '/' ||
211                cleanPath === '/index' ||
212                cleanPath === '/main' ||
213                /^\/beats\/[^/]+$/.test(cleanPath) ||
214                /^\/service\/m\/list\/(?:all|\d+)\/\d+$/.test(cleanPath) ||
215                /^\/m\/\d+$/.test(cleanPath) ||
216                /^\/service\/musician\/\d+(?:\/(?:morebeats|moresongs))?$/.test(cleanPath) ||
217                /^\/service\/magazine\/list\/\d+\/\d+$/.test(cleanPath) ||
218                /^\/service\/magazine\/\d+\/\d+$/.test(cleanPath);
219        };
220        window.wmLocalizedPath = window.wmLocalizedPath || function(path) {
221            if (!path || /^(?:https?:|javascript:|#)/i.test(path)) {
222                return path;
223            }
224            var parts = String(path).split('?');
225            var cleanPath = parts[0];
226            if (!window.wmIsLocalizablePath(cleanPath)) {
227                return path;
228            }
229            if (cleanPath.charAt(0) !== '/') {
230                cleanPath = '/' + cleanPath;
231            }
232            cleanPath = cleanPath.replace(/^\/(?:us|ko|jp|cn)(?=\/|$)/, '') || '/';
233            if (window.WM_LANG_PREFIX && cleanPath.indexOf(window.WM_LANG_PREFIX + '/') !== 0 && cleanPath !== window.WM_LANG_PREFIX) {
234                cleanPath = (cleanPath === '/') ? window.WM_LANG_PREFIX : window.WM_LANG_PREFIX + (cleanPath.charAt(0) === '/' ? cleanPath : '/' + cleanPath);
235            }
236            return parts[1] ? cleanPath + '?' + parts[1] : cleanPath;
237        };
238        window.LanguageSelect = window.LanguageSelect || function(value) {
239            var map = {
240                en: 'us',
241                'en-us': 'us',
242                kr: 'ko',
243                'ko-kr': 'ko',
244                ja: 'jp',
245                'ja-jp': 'jp',
246                zh: 'cn',
247                'zh-cn': 'cn'
248            };
249            var lang = String(value || '').toLowerCase();
250            lang = map[lang] || lang;
251            if (!/^(us|ko|jp|cn)$/.test(lang)) {
252                lang = 'us';
253            }
254
255            var hrefMap = window.WM_HREFLANG_MAP || {};
256            if (hrefMap[lang]) {
257                window.location.href = hrefMap[lang];
258                return;
259            }
260
261            try {
262                var url = new URL(window.location.href);
263                var cleanPath = (url.pathname || '/').replace(/\/+/g, '/');
264                cleanPath = cleanPath.replace(/^\/(?:us|ko|jp|cn)(?=\/|$)/, '') || '/';
265                if (window.wmIsLocalizablePath && window.wmIsLocalizablePath(cleanPath)) {
266                    url.pathname = cleanPath === '/' ? '/' + lang : '/' + lang + cleanPath;
267                    window.location.href = url.toString();
268                    return;
269                }
270                url.searchParams.set('lang', lang);
271                window.location.href = url.toString();
272            } catch (e) {
273                window.location.href = '/' + lang;
274            }
275        };
276    </script>
276
277
278
279
280    <meta http-equiv="Expires" content="-1">
281
282
283
284    <meta name="google-signin-client_id"
285        content="591953194354-o0ejrdm5ng4srhm4q33pp3668g5mr89g.apps.googleusercontent.com">
286    
286<script>
287        window.wmSocialAuthConfig = window.wmSocialAuthConfig || {};
288        (function(target, source) {
289            var key;
290            for (key in source) {
291                if (Object.prototype.hasOwnProperty.call(source, key)) {
292                    target[key] = source[key];
293                }
294            }
295        }(window.wmSocialAuthConfig, {"googleClientId":"591953194354-o0ejrdm5ng4srhm4q33pp3668g5mr89g.apps.googleusercontent.com","kakaoJsKey":"0eeb3c80e44c23d81f8403aecd97f50c","naverClientId":"bGMl_b_ZJgVqk2UA4Uog"}));
296    </script>
296
297    <!-- Google Material Font Icon -->
298    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
299        rel="stylesheet">
300        <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900|Roboto:300,400,700,900&display=swap"
301        rel="stylesheet">
302        <link rel="stylesheet" href="/static/css_v2/font.css" type="text/css">
303            <link rel="stylesheet" href="/static/css_v2/style.css?v=20260710-mobile-cart-transparent" type="text/css">
304        <link rel="stylesheet" href="/static/css_v2/slick.css" type="text/css">
305        <link rel="stylesheet" href="/static/css_v2/slick-theme.css" type="text/css">
306        <link rel="stylesheet" href="/static/css_v2/nouislider.css" type="text/css">
307        <link rel="stylesheet" href="/static/css/base.css">
308        <link rel="stylesheet" href="/static/css/ladio/style.css">
309        <link rel="stylesheet" href="/static/css_v2/player.css?v=20250817-1">
310            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
311            <style>
312        .jconfirm.jconfirm-dark .jconfirm-box,
313        .jconfirm .jconfirm-box {
314            background: rgba(20, 20, 20, 0.9) !important;
315            border: 1px solid rgba(255, 255, 255, 0.08);
316            border-radius: 6px;
317            box-sizing: border-box;
318            color: #fff;
319            max-width: calc(100vw - 32px);
320        }
321
322        .jconfirm.jconfirm-dark .jconfirm-bg,
323        .jconfirm .jconfirm-bg {
324            background: rgba(0, 0, 0, 0.45) !important;
325            opacity: 1 !important;
326        }
327
328        .jconfirm .jconfirm-title-c,
329        .jconfirm .jconfirm-content {
330            color: #fff;
331        }
332
333        .jconfirm .jconfirm-content {
334            line-height: 1.5;
335            overflow-wrap: anywhere;
336            white-space: normal;
337        }
338
339        .jconfirm .jconfirm-buttons {
340            display: flex;
341            flex-wrap: wrap;
342            gap: 8px;
343            justify-content: flex-end;
344        }
345
346        .jconfirm .jconfirm-buttons button {
347            margin-left: 0 !important;
348        }
349
350        @media (max-width: 480px) {
351            .jconfirm .jconfirm-box {
352                width: calc(100vw - 32px) !important;
353            }
354        }
355    </style>
356        <link rel="stylesheet" href="/static/css/buybeats/patch-hero-chips.css?v=20250817-14">
357        <link rel="stylesheet" href="/static/css/buybeats/patch-cart-total.css?v=20250817-2">
358        <link rel="stylesheet" href="/static/css_v2/patch-play-icon.css?v=20260511-rounded-play-xl"> <!-- ★ 추가 -->
359    
360    <!-- 추천칩 동작 스크립트 -->
361    
361<script src="/static/js/buybeats/patch-hero-chips.js?v=20260528-scope" defer></script>
361
362
363
364    <!--    
364<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/amplitude.js"></script>
364-->
365    <!--script src="jquery.ui.touch-punch.min.js"></script-->
366    
366<script src="/static/js/jquery-3.3.1.js"></script>
366
367        
367<script src="/static/js/jquery.validate.js"></script>
367
368            
368<script src="/static/js/jquery-ui.js"></script>
368
369    
369<script type="text/javascript"
370        src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
370
371                <!-- Swiper Script -->
372    <!--
372<script src="https://unpkg.com/[email protected]/js/swiper.min.js" defer></script>
372-->
373
374    <!-- Swiper: 전역 초기화 콜백 + 조건부 로더 -->
375    
375<script>
376        /* ① 전역 초기화 콜백: 스크립트가 로드되면 모든 컨테이너 1회 초기화 */
377        window.wmInitSwiper = window.wmInitSwiper || function() {
378            var containers = document.querySelectorAll('.swiper-container, .swiper');
379            containers.forEach(function(el) {
380                if (el.__wmSwiperInstance || el.swiper) return; // 중복 방지
381                var inst = new Swiper(el, {
382                    slidesPerView: 1,
383                    loop: true,
384                    pagination: el.querySelector('.swiper-pagination') ? {
385                        el: el.querySelector('.swiper-pagination'),
386                        clickable: true
387                    } : undefined,
388                    navigation: (el.querySelector('.swiper-button-next') && el.querySelector('.swiper-button-prev')) ? {
389                        nextEl: el.querySelector('.swiper-button-next'),
390                        prevEl: el.querySelector('.swiper-button-prev')
391                    } : undefined
392                });
393                el.__wmSwiperInstance = inst;
394            });
395        };
396
397        /* ② 조건부 로더: 페이지에 마크업이 있을 때만 스크립트를 불러옴 */
398        (function() {
399            var loaded = false,
400                mo;
401
402            function stopObserver() {
403                if (mo) mo.disconnect();
404            }
405
406            function ensureSwiperLoaded() {
407                var hasSwiperEl = document.querySelector('.swiper-container, .swiper');
408                if (!hasSwiperEl) return; // 마크업 없으면 패스
409
410                if (window.Swiper) { // 이미 로드됨
411                    window.wmInitSwiper();
412                    stopObserver();
413                    return;
414                }
415                if (loaded) return;
416                loaded = true;
417
418                var s = document.createElement('script');
419                s.src = 'https://unpkg.com/[email protected]/js/swiper.min.js';
420                s.defer = true;
421                s.onload = function() {
422                    window.wmInitSwiper();
423                    stopObserver();
424                };
425                document.head.appendChild(s);
426            }
427
428            document.addEventListener('DOMContentLoaded', ensureSwiperLoaded);
429
430            // AJAX로 DOM이 뒤늦게 붙는 경우 대비 (로드되면 관찰 중지)
431            mo = new MutationObserver(function() {
432                if (!window.Swiper && document.querySelector('.swiper-container, .swiper')) {
433                    ensureSwiperLoaded();
434                }
435            });
436
437            function startSwiperObserver() {
438                if (document.body) {
439                    mo.observe(document.body, {
440                        childList: true,
441                        subtree: true
442                    });
443                } else {
444                    document.addEventListener('DOMContentLoaded', function() {
445                        mo.observe(document.body, {
446                            childList: true,
447                            subtree: true
448                        });
449                    });
450                }
451            }
452            startSwiperObserver();
453
454        })();
455    </script>
455
456    
457
458    <!--
458<script src="/static/app/ckeditor5/ckeditor.js"></script>
458-->
459            
459<script id="wm-kakao-sdk" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
459
460            
460<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
460
461    
461<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
461
462    
462<script>
463        (function($, window) {
464            if (!$ || typeof $.confirm === 'function') {
465                return;
466            }
467
468            $.confirm = function(options) {
469                var settings = options || {};
470                var buttons = settings.buttons || {};
471                var confirmButton = buttons.confirm || buttons.ok || buttons.yes || null;
472                var cancelButton = buttons.cancel || buttons.close || buttons.no || null;
473                var message = settings.content || settings.title || '';
474                var selectedButton;
475                var action;
476
477                message = String(message).replace(/<[^>]*>/g, '');
478                selectedButton = window.confirm(message) ? confirmButton : cancelButton;
479
480                if (typeof selectedButton === 'function') {
481                    return selectedButton();
482                }
483
484                action = selectedButton && selectedButton.action;
485                if (typeof action === 'function') {
486                    return action();
487                }
488
489                return false;
490            };
491        }(window.jQuery, window));
492    </script>
492
493    
494    
494<script src="/static/js_v3/payment-origin-guard.js?v=20260711-1"></script>
494
495        
495<script src="/static/js_v3/iamwatermelon.js?v=20260711-currency-display-1"></script>
495
496    
497    
497<script>
498        window.wmObj = {
499            originUrl: 'https://www.iamwatermelon.com',
500            baseUrl: 'https://www.iamwatermelon.com',
501            boardBase: '',
502            boardBaseFallback: '/service/faq/list/11/1',
503            /* free → FAQ (2025-08-30) */
504            curDomain: '',
505            musicDetail: {},
506            uId: null,
507        }
508    </script>
508
509    <link rel="stylesheet" href="/static/css/random-strip.css?v=20260910-radio-tune-only">
510        <!-- (삭제) /static/css/board_common.css?v=20250829-2 -->
511    <!-- (삭제) /static/css/board_index.css?v=20250829-2 -->
512    <style>
513        .sellbeat.sellbeat-musician {
514            color: #ffe082 !important;
515        }
516
517        .sellbeat.sellbeat-musician:hover,
518        .sellbeat.sellbeat-musician:focus-visible {
519            color: #ffecb3 !important;
520        }
521
522        /* board & mypage 검색줄 모바일 최종 덮어쓰기 */
523        @media (max-width:720px) {
524
525            #board .sub_search {
526                display: block !important;
527                width: 100% !important;
528                max-width: 100% !important;
529                margin: 18px 0 0 0 !important;
530                padding: 0 !important;
531                box-sizing: border-box !important;
532            }
533
534            #board .sub_search form {
535                display: grid !important;
536                grid-template-columns: minmax(90px, 1fr) minmax(112px, 1.45fr) minmax(72px, 0.72fr) !important;
537                align-items: center !important;
538                justify-content: center !important;
539                gap: 8px !important;
540                width: min(100%, 430px) !important;
541                margin: 0 auto !important;
542                padding: 0 12px !important;
543                box-sizing: border-box !important;
544            }
545
546            .mypage-list-cont .sub_search form {
547                display: flex !important;
548                align-items: center !important;
549                justify-content: center !important;
550                gap: 10px !important;
551                width: 100% !important;
552                box-sizing: border-box !important;
553            }
554
555            .mypage-list-cont .sub_search form>* {
556                float: none !important;
557                position: static !important;
558                margin: 0 !important;
559                max-width: 100% !important;
560                box-sizing: border-box
561            }
562
563            #board .sub_search form>* {
564                float: none !important;
565                position: static !important;
566                width: auto !important;
567                min-width: 0 !important;
568                max-width: none !important;
569                height: 44px !important;
570                margin: 0 !important;
571                box-sizing: border-box !important;
572            }
573
574            #board .sub_search .search_opt {
575                order: 1;
576                display: block !important;
577                width: 100% !important;
578                height: 44px !important;
579                background: #37373c !important;
580                border: 1px solid rgba(255, 255, 255, 0.08) !important;
581                border-radius: 7px !important;
582                overflow: hidden !important;
583            }
584
585            #board .sub_search .search_opt,
586            .mypage-list-cont .sub_search .search_opt {
587                order: 1;
588            }
589
590            #board .sub_search .search_opt select {
591                display: block !important;
592                width: 100% !important;
593                height: 100% !important;
594                padding: 0 28px !important;
595                background: transparent !important;
596                color: #fff !important;
597                border: 0 !important;
598                font-size: 14px !important;
599                line-height: 44px !important;
600                text-align: center !important;
601                text-align-last: center !important;
602            }
603
604            #board .sub_search input[type="text"],
605            .mypage-list-cont .sub_search input[type="text"] {
606                order: 2;
607                min-width: 0 !important;
608                height: 44px !important;
609            }
610
611            #board .sub_search input[type="text"] {
612                width: 100% !important;
613                padding: 0 12px !important;
614                border: 0 !important;
615                border-radius: 0 !important;
616                background: #fff !important;
617                color: #202020 !important;
618                font-size: 14px !important;
619                line-height: 44px !important;
620                text-align: left !important;
621            }
622
623            #board .sub_search :is(.search_submit, .submit.btn, button[type="submit"], input[type="submit"]),
624            .mypage-list-cont .sub_search :is(.search_submit, .submit.btn, button[type="submit"], input[type="submit"]) {
625                order: 3;
626            }
627
628            #board .sub_search :is(.search_submit, .submit.btn, button[type="submit"], input[type="submit"]),
629            #board .sub_search .btn {
630                display: flex !important;
631                align-items: center !important;
632                justify-content: center !important;
633                width: 100% !important;
634                min-width: 0 !important;
635                height: 44px !important;
636                padding: 0 10px !important;
637                border: 0 !important;
638                border-radius: 7px !important;
639                background: #37373c !important;
640                color: #fff !important;
641                font-size: 14px !important;
642                font-weight: 600 !important;
643                line-height: 44px !important;
644                text-align: center !important;
645                white-space: nowrap !important;
646            }
647        }
648    </style>
649
650</head>
651
652<body id="contents_body">
653    <div id="fb-root"></div>
654    
655    <header class="pc">
656        <div class="container">
657            <div class="gnb">
658                <a class="logo" href="/"><img src="/static/img/web_logo_24.png" alt="WaterMelon" style="margin-top:7px;" /></a>
659                <form class="search mobile_search" id="frmSearch" name="frmSearch">
660                    <input type="text" id="keyword" name="keyword">
661                    <input type="hidden" id="searchOp" name="op" value="">
662                    <div class="btn">
663                        <button type="submit" style="cursor: pointer;">
664                            <i class="material-icons">search</i>
665                        </button>
666                    </div>
667                </form>
668
669
670                <div class="sign">
671                    
672                    
673
674                    <a class="login_action ft_rb" href="/member/loginform">Sign In</a>
675                    <a class="signup_action ft_rb signup" href="/member/signupkind">Sign Up</a>
676                    <div class="language">
677                        <select name="lang" id="lang" onchange="LanguageSelect(this.value)">
678                            <option value="us" selected>ENG</option>
679                            <option value="ko" >KOR</option>
680                            <option value="jp" >JPN</option>
681                            <option value="cn" >CHN</option>
682                        </select>
683                    </div>
684                    <a class="shopping_cart notifications" href="/member/loginform" style="cursor:pointer;">
685                        <i class="material-icons-outlined" style="font-size: 30px;">shopping_cart</i>
686                        <span class="num" data-cart-badge>0</span>
687                    </a>
688
689
690                </div>
691            </div>
692                        <ul class="lnb">
693                <!--<li>
694                <a href="/service/s/list/all/1">Music</a>
695                <ul class="submenu">
696                    <li>
697                        <a href="/service/s/list/1/1">HipHop</a>
698                    </li>
699                    <li>
700                        <a href="/service/s/list/5/1">Pop</a>
701                    </li>
702                    <li>
703                        <a href="/service/s/list/6/1">R&B</a>
704                    </li>
705                    <li>
706                        <a href="/service/s/list/7/1">K-Pop</a>
707                    </li>
708                    <li>
709                        <a href="/service/s/list/8/1">Rock</a>
710                    </li>
711                    <li>
712                        <a href="/service/s/list/9/1">Others</a>
713                    </li>
714                </ul>
715            </li>-->
716                <li>
717                    <a href="/us/service/m/list/all/1">BuyBeats</a>
718                    <ul class="submenu">
719                                                                                <li>
720                                <a href="/us/service/m/list/1/1">HipHop</a>
721                            </li>
722                                                                                <li>
723                                <a href="/us/service/m/list/5/1">Pop</a>
724                            </li>
725                                                                                <li>
726                                <a href="/us/service/m/list/6/1">R&amp;B</a>
727                            </li>
728                                                                                <li>
729                                <a href="/us/service/m/list/7/1">K-Pop</a>
730                            </li>
731                                                                                <li>
732                                <a href="/us/service/m/list/8/1">Rock</a>
733                            </li>
734                                                                                <li>
735                                <a href="/us/service/m/list/16/1">EDM</a>
736                            </li>
737                                                                                <li>
738                                <a href="/us/service/m/list/29/1">Reggae</a>
739                            </li>
740                                                                                <li>
741                                <a href="/us/service/m/list/9/1">Others</a>
742                            </li>
743                                            </ul>
744                </li>
745                <li>
746                    <a class="sellbeat" href="/member/signuppre">SellBeats</a>
747                    <ul class="submenu">
748                        <li>
749                            <a class="upload"
750                                href="/service/sale/uploadpre?uploadtype=1">Upload Beat</a>
751                        </li>
752                        <!--<li>
753                            <a class="upload_songs"
754                                href="/service/sale/uploadpre?uploadtype=2">Upload Music</a>
755                        </li>-->
756                        <li>
757                            <a class="mybeat" href="/m/mylist/1">My Beat</a>
758                        </li>
759                        <!--<li>
760                            <a class="mybeat_songs" href="/s/mylist/1">My Music</a>
761                        </li>-->
762                        <li>
763                            <a class="salelist"
764                                href="/service/sale/mysalelist/1">Sales Table</a>
765                        </li>
766                    </ul>
767                </li>
768                                                    <li>
769                        <a href="/us/service/magazine/list/1/1">Magazine</a>
770                        <ul class="submenu">
771                            <li>
772                                <a href="/us/service/magazine/list/1/1">K-POP News</a>
773                            </li>
774                            <li>
775                                <a href="/us/service/magazine/list/2/1">Global News</a>
776                            </li>
777
778                            <!--<li>
779                                <a href="/service/magazine/list/3/1">Booklet</a>
780                            </li>-->
781                                                    </ul>
782                    </li>
783                                <!--li>
784                <a href="/service/free/list/5/1">Community</a>
785                <ul class="submenu">
786                    <li>
787                        <a href="/service/free/list/5/1">Bulletin board</a>
788                    </li>
789                    <li>
790                        <a href="/service/qna/list/10/1">Q&A</a>
791                    </li>
792                    <li>
793                        <a href="/service/faq/list/11/1">FAQ</a>
794                    </li>
795                    --><!--중고장터 언어셋 한글 일때 만 노출
796                    
797                    <li>
798                        <a href="/service/notice/list/9/1">Notification</a>
799                    </li>
800                </ul>
801            </li-->
802                <li>
803                    <a href="/service/event/list/8/1?status=1">Event</a>
804                    <ul class="submenu">
805                        <li>
806                            <a href="/service/event/list/8/1?status=1">Now</a>
807                        </li>
808                        <li>
809                            <a href="/service/event/list/8/1?status=-1">Completed</a>
810                        </li>
811                    </ul>
812                </li>
813                <!--<li>
814                    <a href="/service/b/list/all/1"></a>
815                </li>-->
816            </ul>
817        </div>
818    </header>
819    <header class="mobile">
820        <div class="gnb">
821            <div class="container">
822                <a class="logo" href="/"><img src="/static/img/mobile_logo.png" alt="WaterMelon" width="98" height="57" fetchpriority="high" decoding="async"></a>
823                <div class="language">
824                    <select name="lang" onchange="LanguageSelect(this.value)">
825                        <option value="us" selected>ENG</option>
826                        <option value="ko" >KOR</option>
827                        <option value="jp" >JPN</option>
828                        <option value="cn" >CHN</option>
829                    </select>
830                </div>
831                <a class="open_lnb" open-modal="lnb"></a>
832                <a class="open_search" open-modal="search"></a>
833                <a class="shopping_cart notifications" href="/member/loginform" style="cursor:pointer;">
834                    <i class="material-icons-outlined" style="font-size: 1.4em;">shopping_cart</i>
835                    <span class="num" data-cart-badge>0</span>
836                </a>
837                
838            </div>
839        </div>
840        <div class="modal modal_lnb" id="lnb">
841            <div class="wrap">
842                <a class="close" close-modal>
843                    <i class="material-icons">close</i>
844                </a>
845                <div class="content">
846                    <div class="sign">
847                        <a href="/" class="logo">Watermelon</a>
848                        <a class="signup_action ft_rb signup" href="/member/signupkind">Sign Up</a>
849                        <a class="login_action ft_rb signin" href="/member/loginform">Sign In</a>
850                    </div>
851                    <ul class="menu">
852                        <!--<li>
853                            <div>
854                                <a href="/service/s/list/all/1">Music</a>
855                                <div class="sideMenu" id="1" onclick="submenuOnOff(event)"></div>
856                            </div>
857                            <ul class="mobile_submenu1 mobile_submenu">
858                                <li>
859                                    <a href="/service/s/list/1/1">- HipHop</a>
860                                </li>
861                                <li>
862                                    <a href="/service/s/list/5/1">- Pop</a>
863                                </li>
864                                <li>
865                                    <a href="/service/s/list/6/1">- R&B</a>
866                                </li>
867                                <li>
868                                    <a href="/service/s/list/7/1">- K-Pop</a>
869                                </li>
870                                <li>
871                                    <a href="/service/s/list/8/1">- Rock</a>
872                                </li>
873                                <li>
874                                    <a href="/service/s/list/9/1">- Others</a>
875                                </li>
876                            </ul>
877                        </li>-->
878                        <li>
879                            <div>
880                                <a href="/us/service/m/list/all/1">BuyBeats</a>
881                                <div class="sideMenu" id="2" onclick="submenuOnOff(event)"></div>
882                            </div>
883                            <ul class="mobile_submenu2 mobile_submenu">
884                                                                                                        <li>
885                                        <a href="/us/service/m/list/1/1">- HipHop</a>
886                                    </li>
887                                                                                                        <li>
888                                        <a href="/us/service/m/list/5/1">- Pop</a>
889                                    </li>
890                                                                                                        <li>
891                                        <a href="/us/service/m/list/6/1">- R&amp;B</a>
892                                    </li>
893                                                                                                        <li>
894                                        <a href="/us/service/m/list/7/1">- K-Pop</a>
895                                    </li>
896                                                                                                        <li>
897                                        <a href="/us/service/m/list/8/1">- Rock</a>
898                                    </li>
899                                                                                                        <li>
900                                        <a href="/us/service/m/list/16/1">- EDM</a>
901                                    </li>
902                                                                                                        <li>
903                                        <a href="/us/service/m/list/29/1">- Reggae</a>
904                                    </li>
905                                                                                                        <li>
906                                        <a href="/us/service/m/list/9/1">- Others</a>
907                                    </li>
908                                                            </ul>
909                        </li>
910                        <li>
911                            <div>
912                                <a class="sellbeat" href="/member/signuppre">SellBeats</a>
913                                <div class="sideMenu" id="3" onclick="submenuOnOff(event)"></div>
914                            </div>
915                            <ul class="mobile_submenu3 mobile_submenu">
916                                                                <li>
917                                    <a class="upload"
918                                        href="/service/sale/uploadpre?uploadtype=1">- Upload Beat</a>
919                                </li>
920                                <!--
921                                <li>
922                                    <a class="upload_songs"
923                                        href="/service/sale/uploadpre?uploadtype=2">- Upload Music</a>
924                                </li>
925                                -->
926                                <li>
927                                    <a class="mybeat" href="/m/mylist/1">- My Beat</a>
928                                </li>
929                                <!--
930                                <li>
931                                    <a class="mybeat_songs" href="/s/mylist/1">- My Music</a>
932                                </li>
933                                -->
934                                <li>
935                                    <a class="salelist"
936                                        href="/service/sale/mysalelist/1">- Sales Table</a>
937                                </li>
938                            </ul>
939                        </li>
940                                                                            <li>
941                                <div>
942                                    <a href="/us/service/magazine/list/1/1">Magazine</a>
943                                    <div class="sideMenu" id="5" onclick="submenuOnOff(event)"></div>
944                                </div>
945                                <ul class="mobile_submenu5 mobile_submenu">
946                                    <li>
947                                        <a href="/us/service/magazine/list/2/1">- Global News</a>
948                                    </li>
949                                    <li>
950                                        <a href="/us/service/magazine/list/1/1">- K-POP News</a>
951                                    </li>
952
953
954                                    <!--
955                                    <li>
956                                        <a href="/service/magazine/list/3/1">- Booklet</a>
957                                    </li>
958                                    -->
959                                                                    </ul>
960                            </li>
961                        
962                        <li>
963                            <div>
964                                <a href="/service/event/list/8/1?status=1">Event</a>
965                                <div class="sideMenu" id="7" onclick="submenuOnOff(event)"></div>
966                            </div>
967                            <ul class="mobile_submenu7 mobile_submenu">
968                                <li>
969                                    <a href="/service/event/list/8/1?status=1">- Now</a>
970                                </li>
971                                <li>
972                                    <a href="/service/event/list/8/1?status=-1">- Completed</a>
973                                </li>
974                            </ul>
975                        </li>
976                    </ul>
977                </div>
978            </div>
979        </div>
980        <div class="modal modal_search" id="search">
981            <div class="wrap">
982                <form class="search mobile_search" id="mobFrmSearch" name="mobFrmSearch">
983                    <input type="text" id="mobKeyword" name="mobKeyword">
984                    <input type="hidden" id="mobSearchOp" name="op" value="">
985                    <div class="btn">
986                        <button type="submit">
987                            <i class="material-icons">search</i>
988                        </button>
989                    </div>
990                </form>
991
992            </div>
993        </div>
994
995    </header>
996    
996<script>
997        $('.shopping_cart').unbind('click').bind('click', function() {
998                            alert('Sign in');
999                    });
1000        (function() {
1001            // 중복 실행 가드
1002            if (window.__CART_BADGE_INITED__) return;
1003            window.__CART_BADGE_INITED__ = true;
1004
1005            var badges = document.querySelectorAll('[data-cart-badge]');
1006
1007            function renderBadge(n) {
1008                var num = Math.max(0, Number(n) || 0);
1009                badges.forEach(function(el) {
1010                    el.textContent = (num > 99 ? '99+' : String(num));
1011                    el.classList.toggle('is-empty', num <= 0);
1012                });
1013            }
1014
1015            function fetchCount() {
1016                // 서버가 진실: 항상 서버 값으로 보정
1017                fetch('/m/ajax/cart_count', {
1018                        credentials: 'same-origin'
1019                    })
1020                    .then(function(r) {
1021                        return r.json();
1022                    })
1023                    .then(function(d) {
1024                        renderBadge(d && d.count);
1025                    })
1026                    .catch(function() {
1027                        /* 네트워크 실패는 무시 */
1028                    });
1029            }
1030
1031            // 페이지 최초 진입 시 서버 값으로 1회 보정
1032            // (PHP에서 이미 넣었지만, SPA/부분 렌더 대비)
1033            if (document.readyState === 'loading') {
1034                document.addEventListener('DOMContentLoaded', fetchCount);
1035            } else {
1036                fetchCount();
1037            }
1038
1039            // 전역 이벤트로 “담기 후” 동기화 (다른 스크립트에서 쏘면 됨)
1040            document.addEventListener('cart:update', function(e) {
1041                if (e && e.detail && typeof e.detail.count !== 'undefined') {
1042                    renderBadge(e.detail.count);
1043                } else {
1044                    fetchCount();
1045                }
1046            });
1047        })();
1048    </script>
1048
1049    
1049<script>
1050        //function signInCheck() {
1051        //    console.log("start");
1052        //            //        alert('//');
1053        //        console.log("sign in");
1054        //            //        alert('//')
1055        //        console.log("musician");
1056        //            //        location.href="/service/sale/uploadpre";
1057        //        console.log("hi");
1058        //            //    console.log("end");
1059        //
1060        //}
1061
1062        function submenuOnOff(event) {
1063            if ($('.mobile_submenu' + event.target.id).css('display') == 'block') {
1064                $('.mobile_submenu' + event.target.id).slideToggle(200);
1065            } else {
1066                $('.mobile_submenu').css('display', 'none');
1067                $('.mobile_submenu' + event.target.id).slideToggle(200);
1068            }
1069        }
1070    </script>
1070
1071    
1071<script>
1072        var wmModalLnbDismissEvents = window.PointerEvent ? 'pointerup.wmModalLnbDismiss' : 'mouseup.wmModalLnbDismiss touchend.wmModalLnbDismiss';
1073        $(document).off('.wmModalLnbDismiss').on(wmModalLnbDismissEvents, function(e) {
1074            var modalLnb = $(".modal_lnb.active .wrap .content");
1075            if (!modalLnb.length) {
1076                return;
1077            }
1078            if (!modalLnb.is(e.target) && modalLnb.has(e.target).length === 0) {
1079                $('[close-modal]').click();
1080            }
1081        });
1082
1083        (function($) {
1084
1085            var Myportfolio = $('.portfolio');
1086
1087            Myportfolio.find('.check').click(function() {
1088                                    alert('Sign in');
1089                    return;
1090                
1091                $.ajax({
1092                    url: '/waterpick/checkmyportfolio',
1093                    type: "POST",
1094                    success: function(result) {
1095
1096                        if (result == true) {
1097                            ajaxContentLoad('/service/waterpick/myportfoliolist/all/1');
1098                        } else {
1099                            alert("No registerd portfolio");
1100                        }
1101                    }
1102                });
1103            });
1104
1105            Myportfolio.find('.upload_check').click(function() {
1106                                    alert('Sign in');
1107                    return;
1108                                $.ajax({
1109                    url: '/waterpick/checkmyportfolio',
1110                    type: "POST",
1111                    success: function(result) {
1112                        ajaxContentLoad('/service/recruit/addform');
1113                    }
1114                });
1115            })
1116
1117        })(jQuery);
1118        $(document).ready(function() {
1119
1120            $('.mobile-header-menu-list .mobile-header-menu-list__item .title .icon').on('click', function() {
1121                $(this).toggleClass('active');
1122                $(this).parents('.mobile-header-menu-list .mobile-header-menu-list__item').find('.depth').toggle();
1123            })
1124
1125            $('.mobile-header-menu-list .mobile-header-menu-list__item .detail_tile .icon').on('click', function() {
1126                $(this).toggleClass('active');
1127                $(this).parents('.mobile-header-menu-list .mobile-header-menu-list__item').find('.detail').toggle();
1128                $(this).parents('.mobile-header-menu-list .mobile-header-menu-list__item').find('.sale_table').toggle();
1129            })
1130
1131            $('.mobile-header-menu-list .mobile-header-menu-list__item .detail_tile .icon2').on('click', function() {
1132                $(this).toggleClass('active');
1133                $(this).parents('.mobile-header-menu-list .mobile-header-menu-list__item').find('.sale_table').toggle();
1134            })
1135
1136                            $(".login_action").text("Sign in");
1137                // $(".signup_action").text("Sign up");
1138                // $("#musician").text("뮤지션 등록");
1139
1140                // $(".login_action").attr("href", "/member/loginform");
1141                $(".login_action").attr("href", '/member/loginform');
1142                $(".signup_action").attr("href", '/member/signupkind');
1143                $("#musician").attr("href", '/member/signupform2');
1144
1145                $(".upload").attr("href", "javascript:alert('Sign in');");
1146                $(".sellbeat").attr("href", "javascript:alert('Musician member login is required.');");
1147                $(".mybeat").attr("href", "javascript:alert('Sign in');");
1148                $(".salelist").attr("href", "javascript:alert('Sign in');");
1149                $(".songs").attr("href", "javascript:alert('Sign in');");
1150                $(".upload_songs").attr("href", "javascript:alert('Sign in');");
1151                $(".mybeat_songs").attr("href", "javascript:alert('Sign in');");
1152                $(".salelist_song").attr("href", "javascript:alert('Sign in');");
1153            
1154
1155        });
1156
1157        // --- i18n 메시지 주입 (PHP 언어팩 → JS) ---
1158        window.WM_I18N = {
1159            smartLimit: "You can search up to {tokens} words or {len} characters. For long phrases, wrap them in \"quotes\" for exact search.",
1160            exactLimit: "Long phrases are trimmed at {len} characters."        };
1161
1162        // --- [NEW] 스마트 검색 제한/정규화 도우미 ---
1163        var WM_SEARCH_LIMITS = {
1164            maxTokens: 6,
1165            maxLen: 60,
1166            maxExactLen: 80
1167        };
1168
1169        function splitSearchCsvSegments(value) {
1170            var parts = String(value || '').split(',');
1171            var next = [];
1172            var seen = {};
1173            var i;
1174            var normalized;
1175            var key;
1176
1177            for (i = 0; i < parts.length; i++) {
1178                normalized = String(parts[i] || '').replace(/\s+/g, ' ').trim();
1179                if (!normalized) {
1180                    continue;
1181                }
1182                key = normalized.toLowerCase();
1183                if (seen[key]) {
1184                    continue;
1185                }
1186                seen[key] = true;
1187                next.push(normalized);
1188            }
1189
1190            return next;
1191        }
1192
1193        function normalizeCsvSearchKeyword(value, limits) {
1194            var segments = splitSearchCsvSegments(value);
1195            var next = [];
1196            var joined = '';
1197            var i;
1198
1199            if (!segments.length) {
1200                return '';
1201            }
1202
1203            for (i = 0; i < segments.length; i++) {
1204                next.push(segments[i]);
1205                joined = next.join(',');
1206                if (next.length > limits.maxTokens || joined.length > limits.maxLen) {
1207                    next.pop();
1208                    break;
1209                }
1210            }
1211
1212            if (!next.length && segments.length) {
1213                joined = segments[0].slice(0, limits.maxLen);
1214                return joined.replace(/^,+|,+$/g, '').trim();
1215            }
1216
1217            return next.join(',');
1218        }
1219
1220        function validateSearchKeywordValue(value, limits) {
1221            var v = (value || '').trim();
1222            var csvValue;
1223            if (!v) return false;
1224
1225            if (v.indexOf(',') !== -1) {
1226                csvValue = normalizeCsvSearchKeyword(v, limits);
1227                return !!csvValue;
1228            }
1229
1230            // exact: 따옴표로 감싼 구절은 길이만 체크
1231            if (/^".*"$/.test(v)) {
1232                return v.length <= limits.maxExactLen;
1233            }
1234
1235            // any/all: 공백/기호 정리 후 길이 + 단어수 체크
1236            var norm = v.replace(/[^\p{L}\p{N}\s]+/gu, ' ').replace(/\s+/g, ' ').trim();
1237            var tokens = norm ? norm.split(' ') : [];
1238            return (v.length <= limits.maxLen) && (tokens.length <= limits.maxTokens);
1239        }
1240
1241        function normalizeSearchKeywordForSubmit(value, limits, smartMessage, exactMessage) {
1242            var kw = (value || '').trim();
1243            var normalizedCsv;
1244
1245            if (kw.indexOf(',') !== -1) {
1246                normalizedCsv = normalizeCsvSearchKeyword(kw, limits);
1247                if (normalizedCsv !== kw && typeof toastr !== 'undefined') {
1248                    toastr.info(smartMessage);
1249                }
1250                return normalizedCsv;
1251            }
1252
1253            if (/^".*"$/.test(kw)) {
1254                kw = kw.replace(/^"(.*)"$/, '$1');
1255                if (kw.length > limits.maxExactLen) {
1256                    kw = kw.slice(0, limits.maxExactLen);
1257                    if (typeof toastr !== 'undefined') toastr.info(exactMessage);
1258                }
1259                return kw;
1260            }
1261
1262            var norm = kw.replace(/[^\p{L}\p{N}\s]+/gu, ' ').replace(/\s+/g, ' ').trim();
1263            var tokens = norm ? norm.split(' ') : [];
1264            if (tokens.length > limits.maxTokens && typeof toastr !== 'undefined') toastr.info(smartMessage);
1265            tokens = tokens.slice(0, limits.maxTokens);
1266
1267            kw = tokens.join(' ');
1268            if (kw.length > limits.maxLen) kw = kw.slice(0, limits.maxLen);
1269            return kw;
1270        }
1271
1272        function resolveSearchOpForSubmit(rawKeyword, normalizedKeyword) {
1273            var raw = String(rawKeyword || '').trim();
1274            if (/^".*"$/.test(raw)) {
1275                return 'exact';
1276            }
1277
1278            var normalized = String(normalizedKeyword || '').trim();
1279            if (!normalized) {
1280                return 'any';
1281            }
1282
1283            var tokenSource = normalized
1284                .replace(/[^\p{L}\p{N}\s,]+/gu, ' ')
1285                .replace(/\s+/g, ' ')
1286                .trim()
1287                .replace(/^,+|,+$/g, '');
1288            var tokens = tokenSource ? tokenSource.split(/[\s,]+/) : [];
1289
1290            return tokens.length > 1 ? 'all' : 'any';
1291        }
1292
1293        // i18n 템플릿 준비
1294        var limits = window.WM_SEARCH_LIMITS || {
1295            maxTokens: 6,
1296            maxLen: 60,
1297            maxExactLen: 80
1298        };
1299        var smartTpl = (window.WM_I18N && WM_I18N.smartLimit) || 'You can search up to {tokens} words or {len} characters. For long phrases, use "quotes" for exact search.';
1300        var exactTpl = (window.WM_I18N && WM_I18N.exactLimit) || 'Long phrases are trimmed at {len} characters.';
1301        var smartMsg = smartTpl.replace('{tokens}', limits.maxTokens).replace('{len}', limits.maxLen);
1302        var exactMsg = exactTpl.replace('{len}', limits.maxExactLen);
1303        var requiredMsg = "Enter your keywords";
1304
1305        function submitDesktopSearch(rawKw, limitsRef, smartMsgRef, exactMsgRef) {
1306            var opEl = $("#searchOp");
1307            var kw = normalizeSearchKeywordForSubmit(rawKw, limitsRef, smartMsgRef, exactMsgRef);
1308            opEl.val(resolveSearchOpForSubmit(rawKw, kw));
1309
1310            ajaxContentLoad(window.WM_URLS.musicAll + '?search_type=1' +
1311                '&keyword=' + encodeURIComponent(kw) +
1312                '&op=' + encodeURIComponent(opEl.val()));
1313        }
1314
1315        function submitMobileSearch(rawKw, limitsRef, smartMsgRef, exactMsgRef) {
1316            var opEl = $("#mobSearchOp");
1317            var kw = normalizeSearchKeywordForSubmit(rawKw, limitsRef, smartMsgRef, exactMsgRef);
1318            opEl.val(resolveSearchOpForSubmit(rawKw, kw));
1319
1320            ajaxContentLoad(window.WM_URLS.musicAll + '?search_type=1' +
1321                '&keyword=' + encodeURIComponent(kw) +
1322                '&op=' + encodeURIComponent(opEl.val()));
1323        }
1324
1325        // 모바일 검색창 (스마트 제한 + i18n 적용)
1326        // i18n 템플릿 준비(모바일에서도 독립 계산)
1327        var mLimits = window.WM_SEARCH_LIMITS || {
1328            maxTokens: 6,
1329            maxLen: 60,
1330            maxExactLen: 80
1331        };
1332        var mSmartTpl = (window.WM_I18N && WM_I18N.smartLimit) || 'You can search up to {tokens} words or {len} characters. For long phrases, use "quotes" for exact search.';
1333        var mExactTpl = (window.WM_I18N && WM_I18N.exactLimit) || 'Long phrases are trimmed at {len} characters.';
1334        var mSmartMsg = mSmartTpl.replace('{tokens}', mLimits.maxTokens).replace('{len}', mLimits.maxLen);
1335        var mExactMsg = mExactTpl.replace('{len}', mLimits.maxExactLen);
1336
1337        if ($.validator && $.fn && $.fn.validate && typeof $.validator.addMethod === 'function') {
1338            $.validator.addMethod('smartLimit', function(value, element) {
1339                return validateSearchKeywordValue(value, WM_SEARCH_LIMITS);
1340            }, '검색어는 최대 ' + WM_SEARCH_LIMITS.maxTokens + '단어 / ' + WM_SEARCH_LIMITS.maxLen + '자까지 검색돼요. 긴 문장은 "따옴표"로 감싸서 정확 검색을 사용해 주세요.');
1341
1342            $('#frmSearch').validate({
1343                onkeyup: false,
1344                onclick: false,
1345                onfocusout: false,
1346                showErrors: function(errorMap, errorList) {
1347                    if (this.numberOfInvalids()) {
1348                        alert(errorList[0].message);
1349                    }
1350                },
1351                rules: {
1352                    keyword: {
1353                        required: true,
1354                        smartLimit: true
1355                    }
1356                },
1357                messages: {
1358                    keyword: {
1359                        required: requiredMsg,
1360                        smartLimit: smartMsg
1361                    }
1362                },
1363                submitHandler: function(form) {
1364                    var rawKw = $("#keyword").val().trim();
1365                    submitDesktopSearch(rawKw, limits, smartMsg, exactMsg);
1366                }
1367            });
1368
1369            $('#mobFrmSearch').validate({
1370                onkeyup: false,
1371                onclick: false,
1372                onfocusout: false,
1373                showErrors: function(errorMap, errorList) {
1374                    if (this.numberOfInvalids()) {
1375                        alert(errorList[0].message);
1376                    }
1377                },
1378                rules: {
1379                    mobKeyword: {
1380                        required: true,
1381                        smartLimit: true // ← rangelength 대신 스마트 제한 사용
1382                    }
1383                },
1384                messages: {
1385                    mobKeyword: {
1386                        required: requiredMsg,
1387                        smartLimit: mSmartMsg
1388                    }
1389                },
1390                submitHandler: function(form) {
1391                    var rawKw = $("#mobKeyword").val().trim();
1392                    submitMobileSearch(rawKw, mLimits, mSmartMsg, mExactMsg);
1393                }
1394            });
1395        } else {
1396            $('#frmSearch').off('submit.wmSearchFallback').on('submit.wmSearchFallback', function(e) {
1397                var rawKw = $("#keyword").val().trim();
1398                if (!rawKw) {
1399                    e.preventDefault();
1400                    alert(requiredMsg);
1401                    return false;
1402                }
1403
1404                e.preventDefault();
1405                submitDesktopSearch(rawKw, limits, smartMsg, exactMsg);
1406                return false;
1407            });
1408
1409            $('#mobFrmSearch').off('submit.wmSearchFallback').on('submit.wmSearchFallback', function(e) {
1410                var rawKw = $("#mobKeyword").val().trim();
1411                if (!rawKw) {
1412                    e.preventDefault();
1413                    alert(requiredMsg);
1414                    return false;
1415                }
1416
1417                e.preventDefault();
1418                submitMobileSearch(rawKw, mLimits, mSmartMsg, mExactMsg);
1419                return false;
1420            });
1421        }
1422    </script>
1422
1423    
1423<script>
1424        function signOut() {
1425            if (typeof gapi === 'undefined' || !gapi.auth2 || typeof gapi.auth2.getAuthInstance !== 'function') {
1426                return;
1427            }
1428
1429            var auth2 = gapi.auth2.getAuthInstance();
1430            if (!auth2 || typeof auth2.signOut !== 'function') {
1431                return;
1432            }
1433
1434            auth2.signOut().then(function() {
1435                console.log('User signed out.');
1436            });
1437        }
1438    </script>
1438
1439    
1439<script>
1440        $(window).on("beforeunload", function() {
1441            window.scrollTo(0, 0);
1442        });
1443    </script>
1443
1444    
1444<script>
1445        (function() {
1446            var nativeAlert = window.alert ? window.alert.bind(window) : function() {};
1447
1448            window.alert = function(e) {
1449                if (window.toastr && typeof window.toastr.info === 'function') {
1450                    window.toastr.info(e);
1451                    return;
1452                }
1453                nativeAlert(e);
1454            };
1455
1456            function getConfirmPlainText(options) {
1457                var settings = options || {};
1458                var content = settings.content || '';
1459                var title = settings.title || '';
1460
1461                return String(title + ' ' + content)
1462                    .replace(/<[^>]*>/g, ' ')
1463                    .replace(/\s+/g, ' ')
1464                    .replace(/^\s+|\s+$/g, '');
1465            }
1466
1467            function getConfirmBoxWidth(options) {
1468                var textLength = getConfirmPlainText(options).length;
1469                var targetWidth = 360;
1470                var viewportLimit = Math.max(300, window.innerWidth - 48);
1471
1472                if (window.innerWidth < 480 || screen.width < 480) {
1473                    return 'calc(100vw - 32px)';
1474                }
1475
1476                if (textLength > 120) {
1477                    targetWidth = 560;
1478                } else if (textLength > 70) {
1479                    targetWidth = 500;
1480                } else if (textLength > 28) {
1481                    targetWidth = 420;
1482                }
1483
1484                return Math.min(targetWidth, viewportLimit) + 'px';
1485            }
1486
1487            function applyConfirmDefaults() {
1488                if (!window.jconfirm || !window.jconfirm.pluginDefaults) {
1489                    return;
1490                }
1491
1492                window.jconfirm.pluginDefaults.useBootstrap = false;
1493                window.jconfirm.pluginDefaults.boxWidth = getConfirmBoxWidth({});
1494                window.jconfirm.pluginDefaults.title = '';
1495                window.jconfirm.pluginDefaults.theme = 'dark';
1496            }
1497
1498            function installResponsiveConfirm() {
1499                var $ = window.jQuery;
1500                var originalConfirm;
1501
1502                if (!$ || typeof $.confirm !== 'function' || $.confirm.__wmResponsiveConfirm) {
1503                    return;
1504                }
1505
1506                originalConfirm = $.confirm;
1507                $.confirm = function(options) {
1508                    if (options && typeof options === 'object') {
1509                        if (typeof options.useBootstrap === 'undefined') {
1510                            options.useBootstrap = false;
1511                        }
1512                        if (typeof options.boxWidth === 'undefined' && typeof options.columnClass === 'undefined') {
1513                            options.boxWidth = getConfirmBoxWidth(options);
1514                        }
1515                        if (typeof options.title === 'undefined') {
1516                            options.title = '';
1517                        }
1518                        if (typeof options.theme === 'undefined') {
1519                            options.theme = 'dark';
1520                        }
1521                    }
1522
1523                    return originalConfirm.apply(this, arguments);
1524                };
1525                $.confirm.__wmResponsiveConfirm = true;
1526            }
1527
1528            applyConfirmDefaults();
1529            installResponsiveConfirm();
1530        })();
1531    </script>
1531
1532    
1532<script>
1533        if (typeof window.ShowLanguage !== 'function') {
1534            window.ShowLanguage = function(flag) {
1535                var menu = document.getElementById('DivLangMenu');
1536                if (!menu) {
1537                    return;
1538                }
1539                menu.style.display = (flag == 0) ? 'block' : 'none';
1540            };
1541        }
1542    </script>
1542
1543    <div id="contents_main" onmouseover="ShowLanguage(1)">
1544<link rel="stylesheet" href="/static/css/sub.css">
1545<link rel="stylesheet" href="/static/css/about/contactus_landing.css?v=20260511-premium-preview">
1546
1547<section id="board">
1548    <section class="subbody about">
1549        <div class="container">
1550            <h1 class="wm-about-page-title">About</h1>
1551            <div class="subcate">
1552                <div class="wrap flex contactus-tabs">
1553                    <a href="/about" class="active"><span>Watermelon</span></a>
1554                    <a href="/contactus"><span>Advertising/Collaboration</span></a>
1555                </div>
1556            </div>
1557
1558            <div class="wm-about-page">
1559                <section class="wm-about-hero">
1560                    <span class="wm-about-hero__eyebrow">WATERMELON</span>
1561                    <h2>The World’s #1.5 Marketplace to buy & sell beats</h2>
1562                </section>
1563
1564                <div class="wm-about-mobile-summary">
1565                    <p>WaterMelon connects beat trading with music business opportunities.</p>
1566                    <ul>
1567                                                    <li>We respect creator rights and the value of music.</li>
1568                                                    <li>Buying, selling, and discovering beats are connected in one flow.</li>
1569                                                    <li>Advertising and collaboration inquiries are reviewed by objective.</li>
1570                                            </ul>
1571                </div>
1572
1573                <div class="wm-about-grid">
1574                                            <article class="wm-about-card">
1575                            <span class="wm-about-card__label">
1576                                Platform                            </span>
1577                            <p>Watermelon is a web platform where musicians can easily buy and sell their music and beats.</p>
1578                        </article>
1579                                            <article class="wm-about-card">
1580                            <span class="wm-about-card__label">
1581                                Creator Value                            </span>
1582                            <p>Purchased beats are available for immediate download, and the amount remaining after a platform service fee is deducted is paid to the beat creator.</p>
1583                        </article>
1584                                    </div>
1585            </div>
1586        </div>
1587    </section>
1588</section>
1589<script>
1590    $(document).ready(function() {
1591        window.scrollTo(0, 0);
1592    });
1593</script>
1593
1594</div><!-- /#contents_main -->
1595<footer>
1596    <div class="container">
1597        <div class="channel">
1598            <a class="logo" href="/">Watermelon</a>
1599            <ul class="social">
1600                <li class="insta">
1601                    <a href="https://www.instagram.com/watermelon_beats/" target="_blank"></a>
1602                </li>
1603                <li class="facebook">
1604                    <a href="https://www.facebook.com/watermelon2020" target="_blank"></a>
1605                </li>
1606                <li class="youtube">
1607                    <a href="https://www.youtube.com/channel/UCaOxPZxeLioVItSBC-imiMg?view_as=subscriber" target="_blank"></a>
1608                </li>
1609            </ul>
1610        </div>
1611        <div class="info">
1612            <ul class="co_menu">
1613                <li class="menu-list__item ft_rb"><a href="/">HOME</a></li>
1614                <li class="menu-list__item ft_rb"><a href="/about">ABOUT</a></li>
1615                <li class="menu-list__item ft_rb"><a href="/terms">AGREEMENT</a></li>
1616                <li class="menu-list__item ft_rb"><a href="/privacy">PRIVACYPOLICY</a></li>
1617                <!-- 2025-08-30 hide COMMUNITY (free board) -->
1618                <!-- <li class="menu-list_item ft_rb"><a href="/service/free/list/5/1">COMMUNITY</a></li> -->
1619                <li class="menu-list__item ft_rb"><a href="/service/event/list/8/1?status=1">EVENT</a></li>
1620                <li class="menu-list__item ft_rb"><a href="/service/notice/list/11/1">HELP</a></li>
1621                <li>
1622                    <a href="https://www.ftc.go.kr/bizCommPop.do?wrkr_no=7488801472" target="_blank">IDENTIFICATION</a>
1623                </li>
1624            </ul>
1625                            <ul class="co_info">
1626                    <li>© 2026 VintageHouse, Inc.</li>
1627                    <li>Email. [email protected]</li>
1628                </ul>
1629                    </div>
1630    </div>
1631
1632    <div id="wm-footer-player" class="player_box__bar ">
1633        <div class="container">
1634            <button type="button" class="player_close wm-player-collapse-toggle" aria-label="Collapse player" title="Collapse player">
1635                <i class="material-icons">keyboard_arrow_down</i>
1636            </button>
1637            <div class="player__music on">
1638                <div id="player-progress-bar-container">
1639                    <div class="running-time">
1640                        <span class="current-time">00:00</span>
1641                        <span class="play-time">00:00</span>
1642                    </div>
1643                    <div class="wm-footer-waveform" aria-hidden="true">
1644                        <canvas id="wm-footer-waveform-canvas"></canvas>
1645                    </div>
1646                    <progress id="song-played-progress" class="amplitude-song-played-progress wm-zoomable-progress"></progress>
1647                    <progress id="song-buffered-progress" class="amplitude-buffered-progress" value="0"></progress>
1648                </div>
1649                <div class="content_area">
1650                    <div class="song-thumbnail__wrapper">
1651                        <div class="thumbnail-image">
1652                            <!-- 변경: id 제거, 클래스 추가 -->
1653                            <img class="music_information js-coverimg" data-amplitude-song-info="cover_art_url" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" alt="" />
1654                        </div>
1655                        <div class="information music_information">
1656                            <div class="dp_ib_m track_name" data-amplitude-song-info="name"></div>
1657                            <div class="singer">
1658                                <span class="dp_ib_m artist_name" data-amplitude-song-info="artist"></span>
1659                            </div>
1660                        </div>
1661                    </div>
1662                    <div class="wm-player-center">
1663                        <div class="play-mode">
1664                            <i class="material-icons on">repeat</i>
1665                            <i class="material-icons">shuffle</i>
1666                            <i class="material-icons">repeat_one</i>
1667                        </div>
1668                        <div class="play-control">
1669                            <div class="amplitude-prev">
1670                                <i class="material-icons">
1671                                    skip_previous
1672                                </i>
1673                            </div>
1674                            <div class="amplitude-play-pause main-player">
1675                                <i class="material-icons play">
1676                                    play_arrow
1677                                </i>
1678                                <i class="material-icons pause">
1679                                    pause
1680                                </i>
1681                            </div>
1682
1683                            <div class="amplitude-next">
1684                                <i class="material-icons">
1685                                    skip_next
1686                                </i>
1687                            </div>
1688                        </div>
1689                        <div class="volume-control">
1690                            <div class="vol_box">
1691                                <div class="icon_box amplitude-mute amplitude-not-muted">
1692                                    <i class="material-icons mute">
1693                                        volume_off
1694                                    </i>
1695                                    <i class="material-icons not_mute">
1696                                        volume_up
1697                                    </i>
1698                                </div>
1699                                <div class="ranger_box">
1700                                    <input type="range" class="amplitude-volume-slider" step=".1" />
1701                                </div>
1702                            </div>
1703                        </div>
1704                    </div>
1705                    <div class="wm-player-actions">
1706                        <div class="favorite_mode">
1707                            <div class="bgm_download login-please" style="display: none;">
1708                                <i class="material-icons download">file_download</i>
1709                            </div>
1710                            <div class="song_favorite">
1711                                <i class="material-icons like on">favorite_border</i>
1712                                <i class="material-icons unlike">favorite</i>
1713                            </div>
1714                        </div>
1715                        <div class="ply_list_btn">
1716                            <i class="material-icons">
1717                                playlist_play
1718                            </i>
1719                        </div>
1720                        <div class="mode_change_btn" role="button" tabindex="0" aria-label="Open expanded player" aria-expanded="false" title="Open expanded player">
1721                            <i class="material-icons">
1722                                expand_less
1723                            </i>
1724                        </div>
1725                        <div class="wm-player-purchase" aria-live="polite">
1726                            <button type="button" class="wm-player-price" disabled title="Cho
1726ose License">
1727                                <i class="material-icons-outlined" aria-hidden="true">shopping_bag</i>
1728                                <span class="wm-player-price__label">Choose License</span>
1729                                <span class="wm-player-price__value">--</span>
1730                            </button>
1731                        </div>
1732                    </div>
1733                </div>
1734            </div>
1735        </div>
1736
1737        <div class="list__player__outer">
1738            <a class="delete-all">
1739                <i class="material-icons">delete_sweep</i>
1740            </a>
1741            <a class="close" href="javascript:$('.ply_list_btn').click();">
1742                <i class="material-icons">close</i>
1743            </a>
1744            <div class="list__player-header">
1745                <div>Playlist</div>
1746            </div>
1747            <ul class="list__player">
1748                
1749            </ul>
1750        </div>
1751    </div>
1752    <button type="button" id="wm-player-restore" class="wm-player-restore" aria-label="Open player" title="Open player" hidden>
1753        <i class="material-icons">keyboard_arrow_up</i>
1754    </button>
1755</footer>
1756<style>
1757    html.wm-playlist-open,
1758    body.wm-playlist-open {
1759        overflow: hidden !important;
1760        overscroll-behavior: none;
1761    }
1762
1763    #wm-footer-player .list__player__outer {
1764        right: 8px;
1765        bottom: calc(100% - 4px);
1766        z-index: 2;
1767        display: none;
1768        flex-direction: column;
1769        width: min(480px, calc(100vw - 16px));
1770        height: min(480px, calc(100vh - var(--wm-player-height, 108px) - 16px));
1771        max-height: calc(100vh - var(--wm-player-height, 108px) - 16px);
1772        min-height: 0;
1773        box-sizing: border-box;
1774        overflow: hidden;
1775        border-radius: 14px 14px 0 0;
1776        overscroll-behavior: contain;
1777        touch-action: pan-y;
1778    }
1779
1780    #wm-footer-player .list__player__outer.on {
1781        display: flex;
1782    }
1783
1784    #wm-footer-player .list__player-header {
1785        flex: 0 0 50px;
1786    }
1787
1788    #wm-footer-player .list__player {
1789        flex: 1 1 auto;
1790        height: auto;
1791        min-height: 0;
1792        overflow-x: hidden;
1793        overflow-y: auto;
1794        overscroll-behavior: contain;
1795        -webkit-overflow-scrolling: touch;
1796    }
1797
1798    @supports (height: 100dvh) {
1799        #wm-footer-player .list__player__outer {
1800            height: min(480px, calc(100dvh - var(--wm-player-height, 108px) - 16px));
1801            max-height: calc(100dvh - var(--wm-player-height, 108px) - 16px);
1802        }
1803    }
1804
1805    #wm-footer-player .list__player li .thumb_box {
1806        position: relative;
1807        background: #111;
1808        background-image: none !important;
1809        border-radius: 8px;
1810        display: flex;
1811        align-items: center;
1812        justify-content: center;
1813        overflow: hidden;
1814    }
1815
1816    #wm-footer-player .list__player li .thumb_box .wm-playlist-thumb__img {
1817        position: absolute;
1818        inset: 0;
1819        z-index: 0;
1820        display: block !important;
1821        width: 100% !important;
1822        height: 100% !important;
1823        object-fit: cover;
1824        object-position: center;
1825        background-color: #111;
1826        border-radius: inherit;
1827    }
1828
1829    #wm-footer-player .list__player li .thumb_box .material-icons {
1830        z-index: 1;
1831    }
1832
1833    /* Thumbnail play/pause glyphs only: keep original icon size, position, and click target. */
1834    .thumb_box .material-icons.play,
1835    .thumb_box .material-icons.pause {
1836        position: relative;
1837        width: 1em;
1838        height: 1em;
1839        line-height: 1;
1840        color: transparent !important;
1841        -webkit-text-fill-color: transparent !important;
1842        -webkit-text-stroke: 0 transparent !important;
1843        text-shadow: none !important;
1844        text-indent: -9999px;
1845        overflow: hidden;
1846    }
1847
1848    .thumb_box .material-icons.play::before {
1849        content: "";
1850        position: absolute;
1851        top: 50%;
1852        left: 50%;
1853        width: 0.88em;
1854        height: 0.9em;
1855        transform: translate(-50%, -50%);
1856        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4 6.1C10.4 3.4 13.5 1.9 15.6 3.6L33.3 17.8C35.2 19.3 35.2 20.7 33.3 22.2L15.6 36.4C13.5 38.1 10.4 36.6 10.4 33.9V6.1Z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat !important;
1857        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.42));
1858        z-index: 1;
1859        pointer-events: none;
1860    }
1861
1862    .thumb_box.wm-amp-play-pause-item .material-icons.play::after {
1863        content: none !important;
1864        display: none !important;
1865    }
1866
1867    .thumb_box .material-icons.pause::before,
1868    .thumb_box .material-icons.pause::after {
1869        content: "";
1870        position: absolute;
1871        top: 50%;
1872        width: 0.18em;
1873        height: 0.64em;
1874        border-radius: 0.09em;
1875        background:
1876            linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(226, 232, 238, 0.94));
1877        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.48));
1878        pointer-events: none;
1879    }
1880
1881    .thumb_box .material-icons.pause::before {
1882        left: calc(50% - 0.14em);
1883        transform: translate(-50%, -50%);
1884    }
1885
1886    .thumb_box .material-icons.pause::after {
1887        left: calc(50% + 0.14em);
1888        transform: translate(-50%, -50%);
1889    }
1890
1891    #wm-footer-player .list__player li {
1892        transition: background-color 0.16s ease, border-color 0.16s ease;
1893    }
1894
1895    #wm-footer-player .list__player li.wm-playlist-current-row {
1896        background-color: rgba(255, 255, 255, 0.07);
1897        border-bottom-color: rgba(255, 255, 255, 0.2);
1898    }
1899
1900    #wm-footer-player .list__player li .util_box .material-icons-round {
1901        font-family: inherit;
1902        font-size: inherit;
1903        line-height: 1;
1904    }
1905
1906    #wm-footer-player .list__player li .util_box .delete {
1907        display: inline-flex;
1908        align-items: center;
1909        justify-content: center;
1910        width: 36px;
1911        height: 36px;
1912        border-radius: 6px;
1913        color: #fff;
1914        font-family: Arial, Helvetica, sans-serif;
1915        font-size: 28px;
1916        font-weight: 400;
1917        line-height: 1;
1918        text-decoration: none;
1919    }
1920
1921    #wm-footer-player .list__player li .thumb_box .material-icons.play,
1922    #wm-footer-player .list__player li .thumb_box .material-icons.pause {
1923        position: absolute;
1924        top: 50%;
1925        left: 50%;
1926        width: 40px;
1927        height: 40px;
1928        line-height: 1;
1929        margin: 0;
1930        font-size: 40px;
1931        transform: translate(-50%, -50%);
1932    }
1933
1934    /* Footer playlist: always limit icon visibility to active track only */
1935    #wm-footer-player .list__player li .thumb_box .material-icons.play,
1936    #wm-footer-player .list__player li .thumb_box .material-icons.pause {
1937        display: none;
1938    }
1939
1940    #wm-footer-player .list__player li .thumb_box.wm-playlist-current .material-icons.play {
1941        display: block;
1942    }
1943
1944    #wm-footer-player .list__player li .thumb_box.wm-playlist-current.amplitude-playing .material-icons.play {
1945        display: none;
1946    }
1947
1948    #wm-footer-player .list__player li .thumb_box.wm-playlist-current.amplitude-playing .material-icons.pause {
1949        display: block;
1950    }
1951
1952    .chart-list__item .play-thumbnail .thumb_box,
1953    .chart-list__item .play-thumbnail-chart100 .thumb_box,
1954    section#list .contents_6ea ul.slide_6ea li .con.thumb>.thumb_box,
1955    section#list .contents_1ea ul.list_1ea li .con.thumb>.thumb_box,
1956    section#main #chart ul.list_1ea li .con.thumb>.thumb_box {
1957        position: absolute !important;
1958        inset: 0 !important;
1959        display: flex !important;
1960        align-items: center !important;
1961        justify-content: center !important;
1962        width: 100% !important;
1963        height: 100% !important;
1964        line-height: 1;
1965        margin: 0 !important;
1966        cursor: pointer;
1967        z-index: 6;
1968    }
1969
1970    .chart-list__item .play-thumbnail,
1971    .chart-list__item .play-thumbnail-chart100,
1972    section#list .contents_6ea ul.slide_6ea li .con.thumb,
1973    section#list .contents_1ea ul.list_1ea li .con.thumb,
1974    section#main #chart ul.list_1ea li .con.thumb {
1975        position: relative;
1976    }
1977
1978    .chart-list__item .play-thumbnail .thumb_box .material-icons.play,
1979    .chart-list__item .play-thumbnail .thumb_box .material-icons.pause,
1980    .chart-list__item .play-thumbnail-chart100 .thumb_box .material-icons.play,
1981    .chart-list__item .play-thumbnail-chart100 .thumb_box .material-icons.pause,
1982    section#list .contents_6ea ul.slide_6ea li .con.thumb>.thumb_box .material-icons.play,
1983    section#list .contents_6ea ul.slide_6ea li .con.thumb>.thumb_box .material-icons.pause,
1984    section#list .contents_1ea ul.list_1ea li .con.thumb>.thumb_box .material-icons.play,
1985    section#list .contents_1ea ul.list_1ea li .con.thumb>.thumb_box .material-icons.pause,
1986    section#main #chart ul.list_1ea li .con.thumb>.thumb_box .material-icons.play,
1987    section#main #chart ul.list_1ea li .con.thumb>.thumb_box .material-icons.pause {
1988        position: absolute;
1989        top: 50%;
1990        left: 50%;
1991        width: 40px;
1992        height: 40px;
1993        line-height: 1;
1994        margin: 0;
1995        font-size: 40px;
1996        transform: translate(-50%, -50%);
1997        pointer-events: none;
1998    }
1999
2000    body.wm-cart-license-modal-open {
2001        overflow: hidden !important;
2002        touch-action: none;
2003    }
2004
2005    body.wm-cart-license-modal-open .followModal.cart_modal.wm-cart-modal-layer {
2006        position: fixed !important;
2007        inset: 0 !important;
2008        z-index: 30050 !important;
2009        align-items: center;
2010        justify-content: center;
2011        background: rgba(3, 4, 7, 0.68) !important;
2012        -webkit-backdrop-filter: blur(13px) saturate(118%) !important;
2013        backdrop-filter: blur(13px) saturate(118%) !important;
2014        isolation: isolate;
2015    }
2016
2017    body.wm-cart-license-modal-open .followModal.cart_modal.wm-cart-modal-layer .followContainer {
2018        position: relative;
2019        z-index: 1;
2020    }
2021
2022    /* ===== WaterMelon: Progress Zoom (scoped, safe, tunable) ===== */
2023    #wm-footer-player {
2024        /* 필요 시 여기 숫자만 바꿔서 즉시 조정 가능 */
2025        --wm-progress-zoom-pc: 1.7;
2026        /* PC 확대 배율 */
2027        --wm-progress-zoom-mo: 2.1;
2028        /* 모바일 확대 배율 */
2029        --wm-progress-zoom-duration: 120ms;
2030        /* 확대/복귀 애니메이션 시간 */
2031        --wm-progress-zoom-glow: 0.8;
2032        /* 하이라이트 강도(0~1, 높일수록 강함) */
2033    }
2034
2035    /* 진행바 기본 바탕/트랙 정리 (드래그 시 흰색 바 노출 방지) */
2036    #wm-footer-player #player-progress-bar-container {
2037        position: relative;
2038        overflow: visible;
2039        border-radius: 999px;
2040        background: #111;
2041    }
2042
2043    #wm-footer-player #player-progress-bar-container .running-time {
2044        position: absolute;
2045        right: 6px;
2046        bottom: -20px;
2047        display: flex;
2048        align-items: center;
2049        gap: 4px;
2050        white-space: nowrap;
2051        padding: 2px 6px;
2052        font-size: 12px;
2053        line-height: 1.1;
2054        color: #fff;
2055        background: transparent;
2056        border-radius: 10px;
2057        z-index: 50;
2058        box-shadow: none;
2059        pointer-events: none;
2060    }
2061
2062    #wm-footer-player progress {
2063        -webkit-appearance: none;
2064        appearance: none;
2065        border: none;
2066        height: 6px;
2067        border-radius: 999px;
2068        background: transparent;
2069        overflow: hidden;
2070        outline: none;
2071        box-shadow: none;
2072    }
2073
2074    #wm-footer-player #song-played-progress::-webkit-progress-bar,
2075    #wm-footer-player #song-buffered-progress::-webkit-progress-bar {
2076        background: #111;
2077        border-radius: 999px;
2078    }
2079
2080    #wm-footer-player #song-played-progress::-webkit-progress-value {
2081        background: #e53935;
2082        border-radius: 999px;
2083    }
2084
2085    #wm-footer-player #song-buffered-progress::-webkit-progress-value {
2086        background: rgba(255, 255, 255, 0.2);
2087        border-radius: 999px;
2088    }
2089
2090    #wm-footer-player #song-played-progress::-moz-progress-bar {
2091        background: #e53935;
2092        border-radius: 999px;
2093    }
2094
2095    #wm-footer-player #song-buffered-progress::-moz-progress-bar {
2096        background: rgba(255, 255, 255, 0.2);
2097        border-radius: 999px;
2098    }
2099
2100    .mode_change_btn.active i {
2101        color: #82c8ff;
2102    }
2103
2104    #wm-player-toast {
2105        position: fixed;
2106        left: 50%;
2107        bottom: 84px;
2108        z-index: 1400;
2109        max-width: min(420px, calc(100vw - 32px));
2110        padding: 9px 14px;
2111        border: 1px solid rgba(255, 255, 255, 0.14);
2112        border-radius: 999px;
2113        background: rgba(10, 10, 10, 0.88);
2114        color: rgba(255, 255, 255, 0.92);
2115        font-size: 12px;
2116        line-height: 1.3;
2117        letter-spacing: 0.01em;
2118        text-align: center;
2119        white-space: nowrap;
2120        pointer-events: none;
2121        opacity: 0;
2122        visibility: hidden;
2123        transform: translate(-50%, 10px);
2124        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
2125        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
2126    }
2127
2128    #wm-player-toast.is-visible {
2129        opacity: 1;
2130        visibility: visible;
2131        transform: translate(-50%, 0);
2132    }
2133
2134    .jconfirm.wm-soldout-confirm .jconfirm-bg {
2135        background: rgba(0, 0, 0, 0.58) !important;
2136        backdrop-filter: blur(2px);
2137        -webkit-backdrop-filter: blur(2px);
2138    }
2139
2140    .jconfirm.wm-soldout-confirm .jconfirm-box {
2141        background: rgba(12, 12, 12, 0.9) !important;
2142        border: 1px solid rgba(255, 255, 255, 0.1);
2143        border-radius: 4px;
2144        color: #fff;
2145        box-shadow:
2146            inset 0 1px 0 rgba(255, 255, 255, 0.04),
2147            0 18px 44px rgba(0, 0, 0, 0.48);
2148    }
2149
2150    .jconfirm.wm-soldout-confirm .jconfirm-title-c {
2151        padding-bottom: 8px;
2152    }
2153
2154    .jconfirm.wm-soldout-confirm .jconfirm-title {
2155        color: #fff;
2156        font-size: 22px;
2157        font-weight: 700;
2158        letter-spacing: 0;
2159    }
2160
2161    .jconfirm.wm-soldout-confirm .jconfirm-content {
2162        color: rgba(255, 255, 255, 0.9);
2163        font-size: 15px;
2164        font-weight: 700;
2165        line-height: 1.55;
2166    }
2167
2168    .jconfirm.wm-soldout-confirm .jconfirm-buttons {
2169        padding-top: 12px;
2170    }
2171
2172    .jconfirm.wm-soldout-confirm .jconfirm-buttons button {
2173        background: transparent !important;
2174        border: 0 !important;
2175        color: #fff !important;
2176        font-size: 13px;
2177        font-weight: 800;
2178        letter-spacing: 0;
2179        box-shadow: none !important;
2180        text-transform: none;
2181    }
2182
2183    .jconfirm.wm-soldout-confirm .jconfirm-buttons button:hover {
2184        color: rgba(255, 255, 255, 0.78) !important;
2185    }
2186
2187    @media only screen and (max-width: 768px) {
2188        #wm-player-toast {
2189            bottom: 94px;
2190            max-width: calc(100vw - 24px);
2191            padding: 8px 12px;
2192            font-size: 11px;
2193        }
2194    }
2195
2196    .expanded-cart-btn {
2197        margin-top: 2px;
2198        padding: 9px 18px;
2199        font-size: 13px;
2200        color: #111;
2201        background: var(--wm-player-gucci-yellow, #C2A83E);
2202        border: none;
2203        border-radius: 18px;
2204        cursor: pointer;
2205        box-shadow:
2206            inset 0 1px 0 rgba(255, 255, 255, 0.38),
2207            0 6px 14px rgba(0, 0, 0, 0.26);
2208    }
2209
2210    /* ==== Analog VU row (McIntosh-inspired face) ==== */
2211    .vu-row {
2212        --vu-meter-box-width: 300px;
2213        --vu-meter-box-height: 132px;
2214        position: relative;
2215        width: 1160px;
2216        max-width: 95%;
2217        margin: 14px auto 10px;
2218        padding: 18px 30px;
2219        box-sizing: border-box;
2220        display: grid;
2221        grid-template-columns: var(--vu-meter-box-width) minmax(230px, 1fr) var(--vu-meter-box-width);
2222        gap: 28px;
2223        align-items: center;
2224        min-height: 168px;
2225        justify-content: center;
2226        overflow: hidden;
2227        border: 1px solid rgba(255, 255, 255, 0.11);
2228        border-radius: 3px;
2229        background:
2230            linear-gradient(90deg, rgba(214, 214, 206, 0.18) 0, transparent 14px, transparent calc(100% - 14px), rgba(214, 214, 206, 0.18) 100%),
2231            radial-gradient(circle at 50% 0, rgba(87, 132, 178, 0.15) 0, transparent 42%),
2232            linear-gradient(180deg, #070707 0%, #010101 58%, #090909 100%);
2233        box-shadow:
2234            inset 0 1px 0 rgba(255, 255, 255, 0.1),
2235            inset 0 -18px 28px rgba(0, 0, 0, 0.74),
2236            0 18px 34px rgba(0, 0, 0, 0.28);
2237    }
2238
2239    .vu-row::before,
2240    .vu-row::after {
2241        content: "";
2242        position: absolute;
2243        top: 0;
2244        bottom: 0;
2245        width: 9px;
2246        pointer-events: none;
2247        background:
2248            linear-gradient(90deg, #f2f0ea 0%, #b9b8b3 38%, #5c5c5d 100%);
2249        box-shadow:
2250            inset 1px 0 0 rgba(255, 255, 255, 0.45),
2251            inset -1px 0 0 rgba(0, 0, 0, 0.34);
2252    }
2253
2254    .vu-row::before {
2255        left: 0;
2256    }
2257
2258    .vu-row::after {
2259        right: 0;
2260        transform: scaleX(-1);
2261    }
2262
2263    .vu-box {
2264        position: relative;
2265        width: var(--vu-meter-box-width);
2266        min-width: var(--vu-meter-box-width);
2267        max-width: var(--vu-meter-box-width);
2268        height: var(--vu-meter-box-height);
2269        min-height: var(--vu-meter-box-height);
2270        max-height: var(--vu-meter-box-height);
2271        background: transparent;
2272        border: 0;
2273        border-radius: 3px;
2274        padding: 0;
2275        box-shadow: none;
2276        display: flex;
2277        align-items: center;
2278        justify-content: center;
2279    }
2280
2281    .vu-box::before {
2282        content: "";
2283        position: absolute;
2284        inset: -11px -12px;
2285        border-radius: 4px;
2286        border: 1px solid rgba(255, 255, 255, 0.06);
2287        background:
2288            linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, transparent 19%, rgba(255, 255, 255, 0.02) 100%),
2289            linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(5, 5, 5, 0.46) 100%);
2290        box-shadow:
2291            inset 0 2px 9px rgba(0, 0, 0, 0.84),
2292            0 1px 0 rgba(255, 255, 255, 0.05);
2293        pointer-events: none;
2294    }
2295
2296    .vu-box__dial {
2297        position: relative;
2298        height: 108px;
2299        background:
2300            radial-gradient(circle at 50% 6%, rgba(238, 250, 255, 0.42) 0%, transparent 35%),
2301            linear-gradient(180deg, #82c8ff 0%, #64b3f5 46%, #3b8edc 100%);
2302        border-radius: 3px;
2303        border: 1px solid rgba(130, 193, 250, 0.62);
2304        overflow: hidden;
2305        box-shadow:
2306            inset 0 1px 0 rgba(255, 255, 255, 0.58),
2307            inset 0 -14px 20px rgba(8, 34, 80, 0.3),
2308            0 0 18px rgba(57, 154, 243, 0.26),
2309            0 4px 10px rgba(0, 0, 0, 0.48);
2310        width: 100%;
2311        backdrop-filter: saturate(106%) blur(0.6px);
2312    }
2313
2314    .vu-box__dial::before {
2315        content: "";
2316        position: absolute;
2317        inset: 0;
2318        pointer-events: none;
2319        background:
2320            linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.08) 31%, rgba(0, 0, 0, 0.02) 100%),
2321            linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.14));
2322        z-index: 1;
2323    }
2324
2325    .vu-box__dial::after {
2326        content: "";
2327        position: absolute;
2328        inset: 0;
2329        pointer-events: none;
2330        background:
2331            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.11) 100%),
2332            repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 5px);
2333        z-index: 1;
2334    }
2335
2336    .vu-box__bg {
2337        position: absolute;
2338        inset: 0;
2339        background-size: cover;
2340        background-repeat: no-repeat;
2341        background-position: center;
2342        opacity: 0;
2343        filter: blur(1px) saturate(1.04) contrast(1.02);
2344        transform: scale(1.03);
2345        mix-blend-mode: normal;
2346        pointer-events: none;
2347        z-index: 0;
2348    }
2349
2350    .vu-box__scale {
2351        position: absolute;
2352        inset: 0;
2353        width: 100%;
2354        height: 100%;
2355        pointer-events: none;
2356        z-index: 2;
2357        shape-rendering: geometricPrecision;
2358        text-rendering: geometricPrecision;
2359        transform: translateY(-12px);
2360        transform-origin: 50% 50%;
2361    }
2362
2363    .vu-arc {
2364        fill: none;
2365        stroke: rgba(4, 14, 35, 0.92);
2366        stroke-width: 1.9;
2367    }
2368
2369    .vu-arc--over {
2370        fill: none;
2371        stroke: #7a3e6b;
2372        stroke-width: 2.05;
2373        stroke-linecap: round;
2374    }
2375
2376    .vu-tick {
2377        stroke: rgba(2, 12, 30, 0.9);
2378        stroke-width: 1.42;
2379        stroke-linecap: round;
2380    }
2381
2382    .vu-tick-minor {
2383        display: none;
2384    }
2385
2386    .vu-tick--red {
2387        stroke: #7a3e6b;
2388    }
2389
2390    .vu-center-line {
2391        stroke: #2b4368;
2392        stroke-width: 1;
2393        display: none;
2394    }
2395
2396    .vu-label-mark {
2397        fill: #06142f;
2398        font-size: 11px;
2399        font-weight: 700;
2400        letter-spacing: 0;
2401        font-family: "Trebuchet MS", "Segoe UI", "Noto Sans KR", sans-serif;
2402        text-shadow: none;
2403        text-anchor: middle;
2404        dominant-baseline: middle;
2405    }
2406
2407    .vu-label-scale-title,
2408    .vu-label-scale-subtitle {
2409        fill: #102f56;
2410        font-family: "Trebuchet MS", "Segoe UI", "Noto Sans KR", sans-serif;
2411        letter-spacing: 0.06em;
2412        text-anchor: middle;
2413        dominant-baseline: middle;
2414    }
2415
2416    .vu-label-scale-title {
2417        font-size: 25px;
2418        font-weight: 800;
2419        filter: drop-shadow(0 2px 2px rgba(36, 115, 175, 0.18));
2420    }
2421
2422    .vu-label-scale-subtitle {
2423        display: none;
2424    }
2425
2426    .vu-label-watts {
2427        display: none;
2428    }
2429
2430    .vu-label-over {
2431        fill: #6d315e;
2432    }
2433
2434    .vu-box__needle {
2435        position: absolute;
2436        bottom: 7px;
2437        left: 50%;
2438        width: 1.35px;
2439        height: 68%;
2440        background: linear-gradient(180deg, #082448 0%, #031229 100%);
2441        transform-origin: bottom center;
2442        transform: translateX(-50%) rotate(-54deg);
2443        box-shadow: 0 0 0 1px rgba(218, 239, 255, 0.64);
2444        transition: transform 38ms cubic-bezier(0.16, 0.84, 0.2, 1);
2445        will-change: transform;
2446        pointer-events: none;
2447        z-index: 4;
2448    }
2449
2450    .vu-box__needle::before {
2451        content: "";
2452        position: absolute;
2453        left: 50%;
2454        top: 7px;
2455        width: 0.68px;
2456        height: calc(100% - 15px);
2457        transform: translateX(-50%);
2458        background: rgba(239, 248, 255, 0.78);
2459        pointer-events: none;
2460    }
2461
2462    .vu-box__needle::after {
2463        content: "";
2464        position: absolute;
2465        left: 50%;
2466        bottom: -3px;
2467        width: 9px;
2468        height: 9px;
2469        border-radius: 50%;
2470        transform: translateX(-50%);
2471        background: radial-gradient(circle at 32% 32%, #edf7ff 0%, #93afca 58%, #2e4a68 100%);
2472        box-shadow:
2473            0 0 0 1px rgba(227, 241, 255, 0.3),
2474            0 1px 2px rgba(0, 0, 0, 0.35);
2475        pointer-events: none;
2476    }
2477
2478    .vu-box__label {
2479        position: absolute;
2480        right: 12px;
2481        bottom: 9px;
2482        font-size: 8.5px;
2483        letter-spacing: 0.08em;
2484        color: rgba(5, 24, 52, 0.72);
2485        font-weight: 700;
2486        text-transform: uppercase;
2487        pointer-events: none;
2488        z-index: 4;
2489    }
2490
2491    .vu-center {
2492        min-width: 0;
2493        text-align: center;
2494        display: flex;
2495        flex-direction: column;
2496        align-items: center;
2497        justify-content: center;
2498        gap: 4px;
2499        height: 100%;
2500        padding: 12px 0;
2501    }
2502    #music-app-container .vu-center .track_name {
2503        width: 100%;
2504        max-width: 410px;
2505        height: 38px;
2506        display: block;
2507        overflow: hidden;
2508        white-space: nowrap;
2509        text-overflow: ellipsis;
2510        font-size: 24px;
2511        font-weight: 800;
2512        line-height: 38px;
2513        margin: 0;
2514        padding: 0 2px;
2515        box-sizing: border-box;
2516        color: #f4f4ef;
2517        pointer-events: none;
2518        text-shadow: 0 0 8px rgba(74, 160, 235, 0.18);
2519    }
2520    #music-app-container .album .vu-center .dp_ib_m.track_name {
2521        width: 100%;
2522        max-width: 410px;
2523        height: 38px;
2524        display: block;
2525        overflow: hidden;
2526        white-space: nowrap;
2527        text-overflow: ellipsis;
2528        font-size: 24px;
2529        font-weight: 800;
2530        line-height: 38px;
2531        margin: 0;
2532        padding: 0 2px;
2533        box-sizing: border-box;
2534        color: #f4f4ef;
2535        text-align: center;
2536        pointer-events: none;
2537    }
2538    #music-app-container .vu-center .artist_name {
2539        display: block;
2540        width: 100%;
2541        max-width: 360px;
2542        overflow: hidden;
2543        white-space: nowrap;
2544        text-overflow: ellipsis;
2545        font-size: 13px;
2546        line-height: 20px;
2547        height: 20px;
2548        color: rgba(210, 214, 218, 0.82);
2549        letter-spacing: 0.02em;
2550        margin: 0;
2551        pointer-events: none;
2552    }
2553
2554    .vu-center .expanded-cart-btn {
2555        margin-top: 8px;
2556    }
2557
2558    #wm-footer-player .song-thumbnail__wrapper .information .track_name .wm-marquee-inner,
2559    .vu-center .track_name .wm-marquee-inner,
2560    .vu-center .artist_name .wm-marquee-inner,
2561    .track-meta-mobile .track_name .wm-marquee-inner,
2562    .track-meta-mobile .artist_name .wm-marquee-inner {
2563        display: inline-flex;
2564        align-items: center;
2565        min-width: max-content;
2566        white-space: nowrap;
2567        line-height: inherit;
2568        will-change: transform;
2569    }
2570
2571    #wm-footer-player .song-thumbnail__wrapper .information .track_name .wm-marquee-group,
2572    .vu-center .track_name .wm-marquee-group,
2573    .vu-center .artist_name .wm-marquee-group,
2574    .track-meta-mobile .track_name .wm-marquee-group,
2575    .track-meta-mobile .artist_name .wm-marquee-group,
2576    #wm-footer-player .song-thumbnail__wrapper .information .track_name .wm-marquee-text,
2577    .vu-center .track_name .wm-marquee-text,
2578    .vu-center .artist_name .wm-marquee-text,
2579    .track-meta-mobile .track_name .wm-marquee-text,
2580    .track-meta-mobile .artist_name .wm-marquee-text,
2581    #wm-footer-player .song-thumbnail__wrapper .information .track_name .wm-marquee-gap,
2582    .vu-center .track_name .wm-marquee-gap,
2583    .vu-center .artist_name .wm-marquee-gap,
2584    .track-meta-mobile .track_name .wm-marquee-gap,
2585    .track-meta-mobile .artist_name .wm-marquee-gap {
2586        display: inline-flex;
2587        align-items: center;
2588        flex: 0 0 auto;
2589        white-space: nowrap;
2590        line-height: inherit;
2591    }
2592
2593    #wm-footer-player .song-thumbnail__wrapper .information .track_name .wm-marquee-gap,
2594    .vu-center .track_name .wm-marquee-gap,
2595    .vu-center .artist_name .wm-marquee-gap,
2596    .track-meta-mobile .track_name .wm-marquee-gap,
2597    .track-meta-mobile .artist_name .wm-marquee-gap {
2598        width: var(--wm-marquee-gap, 36px);
2599        justify-content: center;
2600        opacity: 0.68;
2601    }
2602
2603    #wm-footer-player .song-thumbnail__wrapper .information .track_name.is-marquee,
2604    .vu-center .track_name.is-marquee,
2605    .vu-center .artist_name.is-marquee,
2606    .track-meta-mobile .track_name.is-marquee,
2607    .track-meta-mobile .artist_name.is-marquee {
2608        text-overflow: clip;
2609        text-align: left;
2610    }
2611    #music-app-container .album .vu-center .dp_ib_m.track_name.is-marquee,
2612    #music-app-container .album .track-meta-mobile .dp_ib_m.track_name.is-marquee {
2613        text-align: left;
2614        text-overflow: clip !important;
2615        overflow: hidden;
2616    }
2617
2618    #wm-footer-player .song-thumbnail__wrapper .information .track_name.is-marquee .wm-marquee-inner,
2619    .vu-center .track_name.is-marquee .wm-marquee-inner,
2620    .vu-center .artist_name.is-marquee .wm-marquee-inner,
2621    .track-meta-mobile .track_name.is-marquee .wm-marquee-inner,
2622    .track-meta-mobile .artist_name.is-marquee .wm-marquee-inner {
2623        animation: wm-marquee-scroll var(--wm-marquee-duration, 12s) linear infinite;
2624        transform: translateX(0);
2625        max-width: none !important;
2626    }
2627
2628    @keyframes wm-marquee-scroll {
2629        0%, 6% {
2630            transform: translateX(0);
2631        }
2632        100% {
2633            transform: translateX(calc(-1 * var(--wm-marquee-distance, 0px)));
2634        }
2635    }
2636
2637    @media (prefers-reduced-motion: reduce) {
2638        .vu-box__needle {
2639            transition: none;
2640        }
2641
2642    }
2643
2644    @media (max-width: 1080px) and (min-width: 769px) {
2645        .vu-row {
2646            --vu-meter-box-width: 260px;
2647            grid-template-columns: var(--vu-meter-box-width) minmax(190px, 1fr) var(--vu-meter-box-width);
2648            gap: 20px;
2649            padding: 16px 24px;
2650        }
2651
2652        #music-app-container .vu-center .track_name {
2653            max-width: 330px;
2654            height: 34px;
2655            font-size: 20px;
2656            line-height: 34px;
2657        }
2658        #music-app-container .album .vu-center .dp_ib_m.track_name {
2659            max-width: 330px;
2660            height: 34px;
2661            font-size: 20px;
2662            line-height: 34px;
2663        }
2664
2665        #music-app-container .vu-center .artist_name {
2666            max-width: 290px;
2667        }
2668    }
2669
2670    .track-meta-mobile {
2671        display: none;
2672        text-align: center;
2673        margin: 10px auto 4px;
2674        width: 100%;
2675    }
2676    #music-app-container .track-meta-mobile .track_name {
2677        display: block;
2678        width: min(92vw, 420px);
2679        max-width: 420px;
2680        height: 30px;
2681        font-size: 17px;
2682        line-height: 30px;
2683        font-weight: 700;
2684        color: #f6f6f6;
2685        margin: 0 auto 3px;
2686        padding: 0 4px;
2687        box-sizing: border-box;
2688        pointer-events: none;
2689        white-space: nowrap;
2690        overflow: hidden;
2691        text-overflow: ellipsis;
2692    }
2693    #music-app-container .album .track-meta-mobile .dp_ib_m.track_name {
2694        display: block;
2695        width: min(92vw, 420px);
2696        max-width: 420px;
2697        height: 30px;
2698        font-size: 17px;
2699        line-height: 30px;
2700        font-weight: 700;
2701        color: #f6f6f6;
2702        margin: 0 auto 3px;
2703        padding: 0 4px;
2704        box-sizing: border-box;
2705        pointer-events: none;
2706        white-space: nowrap;
2707        overflow: hidden;
2708        text-overflow: ellipsis;
2709        text-align: center;
2710    }
2711    #music-app-container .track-meta-mobile .artist_name {
2712        font-size: 13px;
2713        display: block;
2714        width: 92vw;
2715        max-width: 420px;
2716        height: 22px;
2717        line-height: 22px;
2718        margin: 0 auto;
2719        white-space: nowrap;
2720        overflow: hidden;
2721        text-overflow: ellipsis;
2722        color: #c5c5c5;
2723        letter-spacing: 0.02em;
2724        pointer-events: none;
2725    }
2726
2727    .mobile-thumb {
2728        display: none;
2729        text-align: center;
2730        margin: 12px auto 6px;
2731    }
2732    .mobile-thumb img {
2733        max-width: 220px;
2734        height: auto;
2735    }
2736
2737    .mobile-buy-btn {
2738        display: none;
2739        margin: 20px auto 14px;
2740        text-align: center;
2741    }
2742
2743    html.wm-expanded-lite-mobile #music-app-container {
2744        overflow-x: hidden;
2745        overflow-y: auto;
2746        -webkit-overflow-scrolling: touch;
2747    }
2748
2749    html.wm-expanded-lite-mobile #wm-footer-player .mode_change_btn {
2750        display: none !important;
2751    }
2752
2753    html.wm-expanded-lite-mobile #wm-footer-player > .container {
2754        touch-action: pan-x pinch-zoom;
2755    }
2756
2757    html.wm-expanded-lite-mobile #music-app-container .music-app-wrapper {
2758        width: 100%;
2759        max-width: 100%;
2760        align-items: center;
2761    }
2762
2763    html.wm-expanded-lite-mobile #music-app-container .album {
2764        width: 100%;
2765        max-width: 100%;
2766        align-items: center;
2767        justify-content: flex-start;
2768        height: auto;
2769        min-height: calc(100vh - 132px);
2770        margin-top: 62px;
2771        padding-bottom: 118px;
2772        box-sizing: border-box;
2773        gap: 6px;
2774    }
2775
2776    html.wm-expanded-lite-mobile #music-app-container .vu-row,
2777    html.wm-expanded-lite-mobile #music-app-container .wm-fusion-strip,
2778    html.wm-expanded-lite-mobile #music-app-container .player-intro-credits-container {
2779        display: none !important;
2780    }
2781
2782    html.wm-expanded-lite-mobile #music-app-container .mobile-thumb {
2783        display: block !important;
2784        order: 1;
2785        width: clamp(138px, 42vw, 176px) !important;
2786        height: clamp(138px, 42vw, 176px) !important;
2787        max-width: 176px !important;
2788        aspect-ratio: 1 / 1;
2789        flex: 0 0 auto;
2790        margin: 0 auto 4px;
2791    }
2792
2793    html.wm-expanded-lite-mobile #music-app-container .mobile-thumb img {
2794        width: 100% !important;
2795        height: 100% !important;
2796        max-width: none !important;
2797        max-height: none !important;
2798        aspect-ratio: 1 / 1;
2799        object-fit: cover;
2800        border-radius: 12px;
2801    }
2802
2803    html.wm-expanded-lite-mobile #music-app-container .track-meta-mobile {
2804        display: block !important;
2805        order: 2;
2806        margin: 2px auto;
2807    }
2808
2809    html.wm-expanded-lite-mobile #music-app-container .mobile-buy-btn {
2810        display: inline-flex !important;
2811        order: 3;
2812    }
2813
2814    @media (max-width: 768px) {
2815        #music-app-container {
2816            overflow-x: hidden;
2817            overflow-y: auto;
2818            -webkit-overflow-scrolling: touch;
2819        }
2820
2821        #music-app-container .music-app-wrapper {
2822            width: 100%;
2823            max-width: 100%;
2824            align-items: center;
2825        }
2826        #music-app-container .album {
2827            width: 100%;
2828            max-width: 100%;
2829            align-items: center;
2830            justify-content: flex-start;
2831            height: auto;
2832            min-height: calc(100vh - 132px);
2833            margin-top: 62px;
2834            padding-bottom: 118px;
2835            box-sizing: border-box;
2836            gap: 6px;
2837        }
2838        .vu-row {
2839            display: none;
2840        }
2841        .vu-row::before,
2842        .vu-row::after {
2843            width: 4px;
2844        }
2845        .vu-row .vu-center {
2846            display: none;
2847        }
2848        .vu-box {
2849            width: 100%;
2850            min-width: 0;
2851            max-width: none;
2852            height: 70px;
2853            min-height: 70px;
2854            max-height: 70px;
2855        }
2856        .vu-box::before {
2857            inset: -5px -4px;
2858        }
2859        .vu-box__dial {
2860            height: 64px;
2861        }
2862        .vu-box__scale {
2863            transform: translateY(-15px);
2864        }
2865        .vu-label-scale-title {
2866            font-size: 23px;
2867        }
2868        .vu-label-mark {
2869            font-size: 10px;
2870        }
2871        .vu-box__needle {
2872            bottom: 5px;
2873            height: 67%;
2874        }
2875        .vu-box__label {
2876            right: 8px;
2877            bottom: 6px;
2878            font-size: 7px;
2879        }
2880        .track-meta-mobile {
2881            display: block;
2882        }
2883        .mobile-thumb {
2884            display: block;
2885        }
2886        .mobile-buy-btn {
2887            display: inline-flex;
2888        }
2889
2890        /* Expand more (mobile): lock consistent cover + relaxed title */
2891        #music-app-container .music-app-wrapper .album .player-detail__img {
2892            width: clamp(138px, 42vw, 176px) !important;
2893            height: clamp(138px, 42vw, 176px) !important;
2894            max-width: 176px !important;
2895            aspect-ratio: 1 / 1;
2896            flex: 0 0 auto;
2897            margin: 0 auto 4px;
2898        }
2899        #music-app-container .music-app-wrapper .album .player-detail__img img,
2900        .mobile-thumb img {
2901            width: 100% !important;
2902            height: 100% !important;
2903            max-width: none !important;
2904            max-height: none !important;
2905            aspect-ratio: 1 / 1;
2906            object-fit: cover;
2907            border-radius: 12px;
2908        }
2909        #music-app-container .track-meta-mobile {
2910            order: 3;
2911            margin: 2px auto 2px;
2912        }
2913        #music-app-container .track-meta-mobile .track_name {
2914            width: 92vw;
2915            max-width: 420px;
2916            position: relative;
2917            overflow: hidden;
2918            white-space: nowrap;
2919            text-overflow: ellipsis;
2920        }
2921        #music-app-container .track-meta-mobile .track_name .wm-marquee-inner,
2922        #music-app-container .track-meta-mobile .artist_name .wm-marquee-inner {
2923            display: inline-block;
2924        }
2925    }
2926
2927    @media (max-width: 380px) {
2928        .vu-row {
2929            width: 90vw;
2930            max-width: 90vw;
2931            gap: 7px;
2932            padding: 8px 9px;
2933        }
2934
2935        #music-app-container .track-meta-mobile .track_name {
2936            height: 28px;
2937            font-size: 16px;
2938            line-height: 28px;
2939        }
2940    }
2941
2942    @media (min-width: 769px) {
2943        .mobile-thumb {
2944            display: none !important;
2945        }
2946    }
2947
2948    /* ==== Expanded panel beat intro credits ==== */
2949    .player-intro-credits-container {
2950        width: 100%;
2951        display: flex;
2952        justify-content: center;
2953        margin: 12px 0;
2954    }
2955
2956    .player-intro-credits-container.is-empty {
2957        display: none;
2958    }
2959
2960    .player-intro-credits {
2961        position: relative;
2962        width: 1160px;
2963        max-width: 95%;
2964        height: 140px;
2965        margin: 0 auto;
2966        box-sizing: border-box;
2967        overflow: hidden;
2968        border-top: 1px solid rgba(212, 175, 55, 0.22);
2969        border-bottom: 1px solid rgba(212, 175, 55, 0.16);
2970        background:
2971            linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(18, 18, 18, 0.72) 50%, rgba(0, 0, 0, 0.22) 100%);
2972    }
2973
2974    .wm-intro-credits__viewport {
2975        position: relative;
2976        width: 100%;
2977        height: 100%;
2978        overflow: hidden;
2979        perspective: 390px;
2980        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
2981        mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
2982    }
2983
2984    .wm-intro-credits__crawl {
2985        position: absolute;
2986        left: 50%;
2987        top: 60%;
2988        width: min(820px, 88%);
2989        transform-origin: 50% 0;
2990        color: #d4af37;
2991        font-size: 17px;
2992        font-weight: 700;
2993        line-height: 1.76;
2994        letter-spacing: 0;
2995        text-align: center;
2996        text-shadow: 0 0 14px rgba(212, 175, 55, 0.18);
2997        will-change: transform, opacity;
2998    }
2999
3000    .wm-intro-credits__crawl.is-running {
3001        animation: wm-intro-crawl var(--wm-intro-duration, 26s) linear infinite;
3002    }
3003
3004    .wm-intro-credits__line {
3005        margin: 0 0 0.58em;
3006        padding: 0;
3007        white-space: normal;
3008        overflow-wrap: break-word;
3009    }
3010
3011    .wm-intro-credits.is-empty {
3012        display: none;
3013    }
3014
3015    @keyframes wm-intro-crawl {
3016        0% {
3017            opacity: 1;
3018            transform: translateX(-50%) rotateX(24deg) translateY(0);
3019        }
3020
3021        88% {
3022            opacity: 1;
3023        }
3024
3025        100% {
3026            opacity: 0;
3027            transform: translateX(-50%) rotateX(24deg) translateY(calc(-100% - 140px));
3028        }
3029    }
3030
3031    @media (prefers-reduced-motion: reduce) {
3032        .wm-intro-credits__viewport {
3033            overflow: auto;
3034            -webkit-mask-image: none;
3035            mask-image: none;
3036        }
3037
3038        .wm-intro-credits__crawl,
3039        .wm-intro-credits__crawl.is-running {
3040            animation: none;
3041            position: relative;
3042            left: auto;
3043            top: auto;
3044            bottom: auto;
3045            width: 90%;
3046            margin: 0 auto;
3047            padding: 18px 0;
3048            opacity: 1;
3049            transform: none;
3050            will-change: auto;
3051        }
3052    }
3053
3054    @media (max-width: 768px) {
3055        .player-intro-credits-container {
3056            width: 100vw;
3057            margin: 10px 0 8px;
3058            margin-left: calc(50% - 50vw);
3059            margin-right: calc(50% - 50vw);
3060            align-self: stretch;
3061        }
3062
3063        .player-intro-credits {
3064            width: 100vw;
3065            max-width: 100vw;
3066            height: 112px;
3067            margin: 0;
3068            border-left: 0;
3069            border-right: 0;
3070        }
3071
3072        .wm-intro-credits__crawl {
3073            width: 86%;
3074            font-size: 13px;
3075            line-height: 1.64;
3076        }
3077    }
3078
3079    /* ==== Expanded panel lightweight Fusion FX ==== */
3080    .wm-fusion-strip {
3081        width: 1160px;
3082        max-width: 95%;
3083        margin: 10px auto 8px;
3084        box-sizing: border-box;
3085    }
3086
3087    .wm-fusion-panel {
3088        position: relative;
3089        min-height: 116px;
3090        display: grid;
3091        grid-template-columns: 146px minmax(0, 1fr) 108px;
3092        align-items: stretch;
3093        gap: 12px;
3094        padding: 11px 12px;
3095        border: 1px solid rgba(220, 218, 214, 0.2);
3096        border-radius: 7px;
3097        background:
3098            linear-gradient(180deg, rgba(98, 95, 97, 0.97) 0%, rgba(63, 61, 64, 0.98) 48%, rgba(44, 43, 47, 0.99) 100%);
3099        --wm-fusion-screw-hole: radial-gradient(circle at 50% 50%, #08080a 0 2px, #25262a 2px 2.8px, #77787b 2.9px 4px, rgba(255, 255, 255, 0.18) 4px 4.4px, transparent 4.5px);
3100        box-shadow:
3101            inset 0 1px 0 rgba(255, 255, 255, 0.16),
3102            inset 0 -12px 20px rgba(0, 0, 0, 0.22),
3103            0 14px 28px rgba(0, 0, 0, 0.24);
3104        overflow: hidden;
3105    }
3106
3107    .wm-fusion-panel::before {
3108        content: "";
3109        position: absolute;
3110        inset: 0;
3111        pointer-events: none;
3112        background:
3113            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.032) 0, rgba(255, 255, 255, 0.032) 1px, rgba(0, 0, 0, 0.02) 1px, rgba(0, 0, 0, 0.02) 4px),
3114            repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 6px),
3115            linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 84%, rgba(255, 255, 255, 0.08));
3116        opacity: 0.7;
3117    }
3118
3119    .wm-fusion-panel::after {
3120        content: "";
3121        position: absolute;
3122        inset: 13px;
3123        pointer-events: none;
3124        background-image:
3125            var(--wm-fusion-screw-hole),
3126            var(--wm-fusion-screw-hole),
3127            var(--wm-fusion-screw-hole),
3128            var(--wm-fusion-screw-hole);
3129        background-position: 0 0, 100% 0, 0 100%, 100% 100%;
3130        background-repeat: no-repeat;
3131        background-size: 9px 9px;
3132    }
3133
3134    .wm-fusion-brand,
3135    .wm-fusion-actions,
3136    .wm-fusion-controls {
3137        position: relative;
3138        z-index: 1;
3139    }
3140
3141    .wm-fusion-brand {
3142        display: flex;
3143        flex-direction: column;
3144        justify-content: center;
3145        min-width: 0;
3146        padding: 8px 2px 8px 4px;
3147        color: rgba(255, 255, 255, 0.92);
3148        text-transform: uppercase;
3149    }
3150
3151    .wm-fusion-brand__mark {
3152        font-size: 20px;
3153        font-weight: 800;
3154        line-height: 1;
3155        letter-spacing: 0;
3156    }
3157
3158    .wm-fusion-brand__sub {
3159        margin-top: 5px;
3160        font-size: 9px;
3161        font-weight: 700;
3162        line-height: 1.2;
3163        color: rgba(255, 255, 255, 0.68);
3164        letter-spacing: 0.08em;
3165    }
3166
3167    .wm-fusion-status {
3168        width: max-content;
3169        margin-top: 12px;
3170        padding: 3px 7px;
3171        border-radius: 3px;
3172        background: #1d1e1d;
3173        color: #dededc;
3174        font-size: 9px;
3175        font-weight: 800;
3176        line-height: 1;
3177        letter-spacing: 0.08em;
3178        display: inline-flex;
3179        align-items: center;
3180        gap: 5px;
3181        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
3182    }
3183
3184    .wm-fusion-status::before {
3185        content: "";
3186        width: 5px;
3187        height: 5px;
3188        border-radius: 50%;
3189        background: #343634;
3190        box-shadow:
3191            inset 0 1px 1px rgba(255, 255, 255, 0.12),
3192            inset 0 -1px 1px rgba(0, 0, 0, 0.5);
3193    }
3194
3195    .wm-fusion-panel.is-active .wm-fusion-status {
3196        color: #ead693;
3197    }
3198
3199    .wm-fusion-panel.is-active .wm-fusion-status::before {
3200        background: #cfc46b;
3201        box-shadow:
3202            0 0 5px rgba(207, 196, 107, 0.62),
3203            0 0 11px rgba(207, 196, 107, 0.28),
3204            inset 0 1px 1px rgba(255, 255, 255, 0.28);
3205    }
3206
3207    .wm-fusion-panel:not(.is-active) .wm-fusion-status {
3208        color: rgba(255, 255, 255, 0.5);
3209    }
3210
3211    .wm-fusion-panel.is-disabled .wm-fusion-status {
3212        color: #d2b883;
3213    }
3214
3215    .wm-fusion-controls {
3216        min-width: 0;
3217        display: grid;
3218        grid-template-columns: repeat(7, minmax(58px, 1fr));
3219        align-items: center;
3220        gap: 8px;
3221    }
3222
3223    .wm-fusion-control {
3224        min-width: 0;
3225        height: 94px;
3226        display: flex;
3227        flex-direction: column;
3228        align-items: center;
3229        justify-content: center;
3230        gap: 5px;
3231        color: rgba(255, 255, 255, 0.86);
3232        user-select: none;
3233    }
3234
3235    .wm-fusion-label {
3236        max-width: 100%;
3237        overflow: hidden;
3238        text-overflow: ellipsis;
3239        white-space: nowrap;
3240        font-size: 8.5px;
3241        font-weight: 800;
3242        line-height: 1;
3243        letter-spacing: 0.06em;
3244        text-transform: uppercase;
3245        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
3246    }
3247
3248    .wm-fusion-knob-wrap {
3249        position: relative;
3250        width: 48px;
3251        height: 48px;
3252        flex: 0 0 48px;
3253        cursor: ns-resize;
3254        touch-action: none;
3255        outline: none;
3256        --wm-knob-cap-light: #57575a;
3257        --wm-knob-cap: #29292c;
3258        --wm-knob-cap-dark: #171719;
3259        --wm-knob-glow: rgba(255, 255, 255, 0.08);
3260    }
3261
3262    .wm-fusion-knob {
3263        position: absolute;
3264        inset: 0;
3265        border-radius: 50%;
3266        background:
3267            conic-gradient(from 220deg, #1e1e20, #858589 13%, #d4d4d4 22%, #7a7a7d 35%, #343437 55%, #09090a 78%, #1e1e20),
3268            linear-gradient(145deg, #5f5f62 0%, #242426 100%);
3269        border: 1px solid rgba(255, 255, 255, 0.18);
3270        box-shadow:
3271            inset 0 1px 2px rgba(255, 255, 255, 0.24),
3272            inset 0 -5px 9px rgba(0, 0, 0, 0.46),
3273            0 4px 8px rgba(0, 0, 0, 0.4);
3274        transform: rotate(var(--wm-knob-angle, -135deg));
3275        transition: transform 80ms linear;
3276        pointer-events: none;
3277    }
3278
3279    .wm-fusion-knob::before {
3280        content: "";
3281        position: absolute;
3282        inset: 5px;
3283        border-radius: 50%;
3284        background:
3285            radial-gradient(circle at 33% 25%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 21%, transparent 22%),
3286            linear-gradient(145deg, var(--wm-knob-cap-light) 0%, var(--wm-knob-cap) 48%, var(--wm-knob-cap-dark) 100%);
3287        box-shadow:
3288            inset 0 2px 4px rgba(255, 255, 255, 0.16),
3289            inset 0 -5px 9px rgba(0, 0, 0, 0.34),
3290            0 0 0 1px rgba(0, 0, 0, 0.22),
3291            0 0 12px var(--wm-knob-glow);
3292    }
3293
3294    .wm-fusion-knob::after {
3295        content: "";
3296        position: absolute;
3297        left: 50%;
3298        top: 8px;
3299        width: 3px;
3300        height: 12px;
3301        border-radius: 2px;
3302        background: rgba(255, 255, 255, 0.92);
3303        transform: translateX(-50%);
3304        box-shadow: 0 0 3px rgba(255, 255, 255, 0.34);
3305        z-index: 2;
3306    }
3307
3308    .wm-fusion-knob-wrap:focus-visible .wm-fusion-knob,
3309    .wm-fusion-knob-wrap.is-dragging .wm-fusion-knob {
3310        box-shadow:
3311            inset 0 1px 2px rgba(255, 255, 255, 0.24),
3312            inset 0 -5px 9px rgba(0, 0, 0, 0.46),
3313            0 0 0 2px rgba(255, 255, 255, 0.22),
3314            0 4px 8px rgba(0, 0, 0, 0.4);
3315    }
3316
3317    .wm-fusion-knob-wrap input[type="range"] {
3318        position: absolute;
3319        inset: -8px;
3320        z-index: 2;
3321        width: 62px;
3322        height: 62px;
3323        margin: 0;
3324        opacity: 0;
3325        pointer-events: none;
3326    }
3327
3328    .wm-fusion-control[data-wm-fusion-control="drive"] .wm-fusion-knob-wrap {
3329        --wm-knob-cap-light: #75b97f;
3330        --wm-knob-cap: #4a9856;
3331        --wm-knob-cap-dark: #2e6a3c;
3332        --wm-knob-glow: rgba(72, 150, 86, 0.28);
3333    }
3334
3335    .wm-fusion-control[data-wm-fusion-control="low"] .wm-fusion-knob-wrap {
3336        --wm-knob-cap-light: #6b69c8;
3337        --wm-knob-cap: #4a4ca5;
3338        --wm-knob-cap-dark: #303177;
3339        --wm-knob-glow: rgba(76, 75, 165, 0.3);
3340    }
3341
3342    .wm-fusion-control[data-wm-fusion-control="high"] .wm-fusion-knob-wrap {
3343        --wm-knob-cap-light: #c05d8b;
3344        --wm-knob-cap: #963b68;
3345        --wm-knob-cap-dark: #672449;
3346        --wm-knob-glow: rgba(154, 57, 104, 0.3);
3347    }
3348
3349    .wm-fusion-control[data-wm-fusion-control="lim"] {
3350        gap: 6px;
3351    }
3352
3353    .wm-fusion-limiter-button {
3354        position: relative;
3355        width: 48px;
3356        height: 48px;
3357        flex: 0 0 48px;
3358        display: inline-flex;
3359        align-items: center;
3360        justify-content: center;
3361        padding: 0;
3362        border-radius: 4px;
3363        border: 1px solid rgba(6, 5, 5, 0.98);
3364        background:
3365            linear-gradient(180deg, rgba(106, 98, 99, 0.7) 0%, rgba(41, 36, 38, 0.94) 14%, rgba(12, 10, 11, 0.98) 38%, rgba(3, 3, 4, 1) 100%),
3366            #060606;
3367        color: rgba(92, 55, 26, 0.9);
3368        font-size: 10px;
3369        font-weight: 900;
3370        line-height: 1;
3371        letter-spacing: 0.08em;
3372        text-transform: uppercase;
3373        cursor: pointer;
3374        box-shadow:
3375            inset 0 1px 0 rgba(255, 255, 255, 0.18),
3376            inset 0 0 0 2px rgba(0, 0, 0, 0.62),
3377            inset 0 -7px 10px rgba(0, 0, 0, 0.72),
3378            0 5px 8px rgba(0, 0, 0, 0.46);
3379        transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 120ms ease, filter 140ms ease;
3380        -webkit-appearance: none;
3381        appearance: none;
3382    }
3383
3384    .wm-fusion-limiter-button::before {
3385        content: "";
3386        position: absolute;
3387        inset: 7px;
3388        border-radius: 2px;
3389        border: 1px solid rgba(70, 38, 15, 0.62);
3390        background:
3391            radial-gradient(circle at 50% 34%, rgba(255, 214, 142, 0.42) 0%, rgba(255, 179, 82, 0.24) 46%, rgba(107, 54, 19, 0.36) 100%),
3392            linear-gradient(180deg, rgba(235, 154, 70, 0.54) 0%, rgba(112, 61, 24, 0.9) 100%);
3393        box-shadow:
3394            inset 0 1px 2px rgba(255, 235, 190, 0.22),
3395            inset 0 -5px 10px rgba(80, 33, 10, 0.66),
3396            0 0 0 1px rgba(0, 0, 0, 0.58);
3397        pointer-events: none;
3398    }
3399
3400    .wm-fusion-limiter-button > span {
3401        position: relative;
3402        z-index: 1;
3403        text-shadow:
3404            0 1px 0 rgba(255, 238, 190, 0.28),
3405            0 -1px 0 rgba(54, 26, 8, 0.18);
3406    }
3407
3408    .wm-fusion-limiter-button:hover,
3409    .wm-fusion-limiter-button:focus {
3410        outline: none;
3411        border-color: rgba(15, 12, 11, 1);
3412        color: rgba(66, 38, 18, 0.96);
3413    }
3414
3415    .wm-fusion-limiter-button:focus-visible {
3416        box-shadow:
3417            0 0 0 2px rgba(255, 255, 255, 0.16),
3418            0 0 0 5px rgba(255, 179, 82, 0.14),
3419            inset 0 1px 0 rgba(255, 255, 255, 0.18),
3420            inset 0 0 0 2px rgba(0, 0, 0, 0.62),
3421            inset 0 -7px 10px rgba(0, 0, 0, 0.72),
3422            0 5px 8px rgba(0, 0, 0, 0.46);
3423    }
3424
3425    .wm-fusion-limiter-button:active {
3426        transform: translateY(1px);
3427        filter: brightness(0.94);
3428    }
3429
3430    .wm-fusion-limiter-button[aria-pressed="true"] {
3431        border-color: rgba(9, 7, 6, 1);
3432        background:
3433            linear-gradient(180deg, rgba(128, 118, 116, 0.78) 0%, rgba(45, 39, 40, 0.96) 14%, rgba(11, 9, 10, 0.99) 38%, rgba(2, 2, 3, 1) 100%),
3434            #050505;
3435        color: rgba(76, 43, 17, 0.98);
3436        box-shadow:
3437            0 0 14px rgba(255, 158, 61, 0.24),
3438            inset 0 1px 0 rgba(255, 255, 255, 0.2),
3439            inset 0 0 0 2px rgba(0, 0, 0, 0.66),
3440            inset 0 -7px 10px rgba(0, 0, 0, 0.72),
3441            0 5px 8px rgba(0, 0, 0, 0.48);
3442    }
3443
3444    .wm-fusion-limiter-button[aria-pressed="true"]::before {
3445        border-color: rgba(117, 63, 24, 0.78);
3446        background:
3447            radial-gradient(circle at 50% 36%, rgba(255, 236, 191, 0.72) 0%, rgba(255, 194, 103, 0.68) 46%, rgba(181, 86, 28, 0.88) 100%),
3448            linear-gradient(180deg, rgba(255, 186, 96, 0.98) 0%, rgba(192, 88, 28, 0.96) 100%);
3449        box-shadow:
3450            0 0 12px rgba(255, 159, 61, 0.32),
3451            inset 0 1px 3px rgba(255, 245, 212, 0.5),
3452            inset 0 -5px 10px rgba(111, 42, 10, 0.48),
3453            0 0 0 1px rgba(0, 0, 0, 0.64);
3454    }
3455
3456    .wm-fusion-limiter-button:disabled {
3457        cursor: not-allowed;
3458        filter: grayscale(0.45);
3459        opacity: 0.72;
3460    }
3461
3462    .wm-fusion-control[data-wm-fusion-control="lim"] .wm-fusion-value {
3463        min-width: 48px;
3464        text-transform: lowercase;
3465    }
3466
3467    .wm-fusion-control[data-wm-fusion-control="width"] .wm-fusion-knob-wrap {
3468        --wm-knob-cap-light: #7eb6d0;
3469        --wm-knob-cap: #5799bd;
3470        --wm-knob-cap-dark: #326f91;
3471        --wm-knob-glow: rgba(84, 151, 188, 0.34);
3472    }
3473
3474    .wm-fusion-value {
3475        min-width: 36px;
3476        padding: 2px 4px;
3477        border-radius: 3px;
3478        background: rgba(18, 18, 18, 0.45);
3479        color: rgba(255, 255, 255, 0.8);
3480        font-size: 9px;
3481        font-weight: 700;
3482        line-height: 1;
3483        text-align: center;
3484        font-variant-numeric: tabular-nums;
3485    }
3486
3487    .wm-fusion-actions {
3488        display: flex;
3489        align-items: center;
3490        justify-content: center;
3491        gap: 8px;
3492    }
3493
3494    .wm-fusion-switch {
3495        position: relative;
3496        width: 46px;
3497        height: 38px;
3498        display: flex;
3499        flex-direction: column;
3500        align-items: center;
3501        justify-content: center;
3502        gap: 0;
3503        padding: 0;
3504        border: 0;
3505        background: transparent;
3506        color: rgba(238, 232, 214, 0.66);
3507        cursor: pointer;
3508        text-transform: uppercase;
3509        -webkit-appearance: none;
3510        appearance: none;
3511    }
3512
3513    .wm-fusion-switch:hover,
3514    .wm-fusion-switch:focus {
3515        outline: none;
3516    }
3517
3518    .wm-fusion-switch:focus-visible .wm-fusion-switch__body,
3519    .wm-fusion-switch:focus-visible .wm-fusion-reset-box {
3520        outline: none;
3521        box-shadow:
3522            0 0 0 2px rgba(255, 255, 255, 0.16),
3523            0 0 0 5px rgba(222, 183, 104, 0.12),
3524            0 5px 11px rgba(0, 0, 0, 0.48),
3525            inset 0 1px 0 rgba(255, 255, 255, 0.16);
3526    }
3527
3528    .wm-fusion-switch__label {
3529        position: absolute;
3530        width: 1px;
3531        height: 1px;
3532        overflow: hidden;
3533        clip: rect(0 0 0 0);
3534        white-space: nowrap;
3535    }
3536
3537    .wm-fusion-switch__label--bottom {
3538        display: none;
3539    }
3540
3541    .wm-fusion-switch__body {
3542        position: relative;
3543        width: 36px;
3544        height: 34px;
3545        flex: 0 0 34px;
3546        border-radius: 7px;
3547        border: 1px solid rgba(86, 53, 30, 0.74);
3548        background:
3549            linear-gradient(145deg, rgba(52, 34, 22, 0.98), rgba(16, 13, 11, 0.98)),
3550            #151210;
3551        box-shadow:
3552            0 4px 9px rgba(0, 0, 0, 0.46),
3553            inset 0 1px 0 rgba(255, 255, 255, 0.13),
3554            inset 0 -4px 8px rgba(0, 0, 0, 0.52);
3555        transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 120ms ease, filter 140ms ease;
3556    }
3557
3558    .wm-fusion-switch__body::before {
3559        content: "";
3560        position: absolute;
3561        inset: 5px;
3562        border-radius: 5px;
3563        background:
3564            radial-gradient(circle at 50% 35%, rgba(184, 137, 78, 0.4), transparent 52%),
3565            linear-gradient(180deg, #3f2818, #1a130e 70%, #0d0b09);
3566        box-shadow:
3567            inset 0 1px 0 rgba(255, 238, 178, 0.12),
3568            inset 0 -3px 5px rgba(0, 0, 0, 0.58);
3569        transition: background 140ms ease, box-shadow 140ms ease;
3570    }
3571
3572    .wm-fusion-switch__body::after {
3573        content: "";
3574        position: absolute;
3575        left: 50%;
3576        top: 50%;
3577        width: 13px;
3578        height: 13px;
3579        border-radius: 50%;
3580        transform: translate(-50%, -50%);
3581        border: 1.7px solid rgba(226, 211, 152, 0.56);
3582        border-top-color: transparent;
3583        background: transparent;
3584        box-shadow:
3585            0 0 3px rgba(180, 138, 66, 0.08);
3586        transition: border-color 140ms ease, box-shadow 140ms ease;
3587    }
3588
3589    .wm-fusion-switch__lever {
3590        position: absolute;
3591        left: 50%;
3592        top: 8px;
3593        width: 2px;
3594        height: 8px;
3595        border-radius: 2px;
3596        background: rgba(226, 211, 152, 0.62);
3597        transform: translateX(-50%);
3598        transition: background 140ms ease, box-shadow 140ms ease;
3599        z-index: 2;
3600    }
3601
3602    .wm-fusion-switch--toggle[aria-pressed="true"] .wm-fusion-switch__body {
3603        border-color: rgba(207, 151, 76, 0.88);
3604        background:
3605            radial-gradient(circle at 50% 48%, rgba(227, 178, 86, 0.58), transparent 58%),
3606            linear-gradient(145deg, rgba(112, 66, 34, 0.98), rgba(34, 22, 13, 0.98));
3607        box-shadow:
3608            0 0 13px rgba(222, 151, 54, 0.35),
3609            0 4px 10px rgba(0, 0, 0, 0.48),
3610            inset 0 1px 0 rgba(255, 237, 171, 0.4),
3611            inset 0 -4px 8px rgba(69, 34, 12, 0.48);
3612    }
3613
3614    .wm-fusion-switch--toggle[aria-pressed="true"] .wm-fusion-switch__body::before {
3615        background:
3616            radial-gradient(circle at 48% 34%, rgba(255, 244, 184, 0.82), rgba(225, 163, 72, 0.42) 48%, transparent 72%),
3617            linear-gradient(180deg, #b17336, #5e351b 76%, #22140d);
3618        box-shadow:
3619            0 0 16px rgba(222, 157, 66, 0.45),
3620            inset 0 1px 0 rgba(255, 246, 194, 0.44),
3621            inset 0 -3px 5px rgba(70, 36, 13, 0.36);
3622    }
3623
3624    .wm-fusion-switch--toggle[aria-pressed="true"] .wm-fusion-switch__body::after {
3625        border-color: rgba(255, 240, 166, 0.94);
3626        border-top-color: transparent;
3627        box-shadow:
3628            0 0 7px rgba(255, 216, 109, 0.66),
3629            0 0 14px rgba(255, 179, 67, 0.34);
3630    }
3631
3632    .wm-fusion-switch--toggle[aria-pressed="true"] .wm-fusion-switch__lever {
3633        background: rgba(255, 238, 158, 0.96);
3634        box-shadow: 0 0 7px rgba(255, 214, 91, 0.66);
3635    }
3636
3637    .wm-fusion-switch:active .wm-fusion-switch__body,
3638    .wm-fusion-switch:active .wm-fusion-reset-box {
3639        transform: translateY(1px);
3640        filter: brightness(0.94);
3641    }
3642
3643    .wm-fusion-switch--reset {
3644        width: 48px;
3645    }
3646
3647    .wm-fusion-switch--reset .wm-fusion-switch__body,
3648    .wm-fusion-switch--reset .wm-fusion-switch__lever {
3649        display: none;
3650    }
3651
3652    .wm-fusion-reset-box {
3653        position: relative;
3654        width: 44px;
3655        height: 32px;
3656        display: inline-flex;
3657        align-items: center;
3658        justify-content: center;
3659        border-radius: 5px;
3660        border: 1px solid rgba(38, 47, 53, 0.86);
3661        background:
3662            linear-gradient(180deg, rgba(33, 39, 43, 0.98), rgba(11, 13, 15, 0.98)),
3663            #111416;
3664        color: rgba(198, 214, 224, 0.7);
3665        font-size: 7px;
3666        font-weight: 850;
3667        line-height: 1;
3668        letter-spacing: 0.08em;
3669        box-shadow:
3670            0 4px 9px rgba(0, 0, 0, 0.46),
3671            inset 0 1px 0 rgba(255, 255, 255, 0.12),
3672            inset 0 -4px 8px rgba(0, 0, 0, 0.5);
3673        transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 120ms ease, filter 140ms ease;
3674    }
3675
3676    .wm-fusion-reset-box::before {
3677        content: "";
3678        position: absolute;
3679        left: 6px;
3680        right: 6px;
3681        top: 5px;
3682        height: 1px;
3683        border-radius: 999px;
3684        background: rgba(128, 164, 181, 0.2);
3685        box-shadow: none;
3686        transition: background 140ms ease, box-shadow 140ms ease;
3687    }
3688
3689    .wm-fusion-switch--reset:hover .wm-fusion-reset-box,
3690    .wm-fusion-switch--reset:focus-visible .wm-fusion-reset-box {
3691        border-color: rgba(83, 129, 151, 0.74);
3692        color: rgba(224, 237, 244, 0.86);
3693    }
3694
3695    .wm-fusion-switch--reset.is-firing .wm-fusion-reset-box,
3696    .wm-fusion-switch--reset:active .wm-fusion-reset-box {
3697        border-color: rgba(126, 178, 202, 0.86);
3698        background:
3699            radial-gradient(circle at 50% 42%, rgba(119, 181, 209, 0.42), transparent 70%),
3700            linear-gradient(180deg, rgba(44, 66, 76, 0.98), rgba(12, 18, 22, 0.98));
3701        color: rgba(235, 249, 255, 0.96);
3702        box-shadow:
3703            0 0 12px rgba(99, 166, 199, 0.28),
3704            0 4px 9px rgba(0, 0, 0, 0.48),
3705            inset 0 1px 0 rgba(220, 245, 255, 0.26),
3706            inset 0 -4px 8px rgba(0, 0, 0, 0.42);
3707    }
3708
3709    .wm-fusion-switch--reset.is-firing .wm-fusion-reset-box::before,
3710    .wm-fusion-switch--reset:active .wm-fusion-reset-box::before {
3711        background: rgba(163, 223, 244, 0.88);
3712        box-shadow:
3713            0 0 6px rgba(120, 198, 226, 0.66),
3714            0 0 12px rgba(83, 162, 198, 0.32);
3715    }
3716
3717    .wm-fusion-panel.is-disabled {
3718        opacity: 0.68;
3719    }
3720
3721    .wm-fusion-panel.is-disabled .wm-fusion-control,
3722    .wm-fusion-panel.is-disabled .wm-fusion-switch,
3723    .wm-fusion-panel.is-disabled .wm-fusion-limiter-button {
3724        cursor: not-allowed;
3725    }
3726
3727    .wm-fusion-panel.is-disabled .wm-fusion-knob {
3728        filter: grayscale(0.45);
3729    }
3730
3731    @media (max-width: 980px) {
3732        .wm-fusion-panel {
3733            grid-template-columns: 102px minmax(0, 1fr) 96px;
3734            gap: 8px;
3735            padding: 9px;
3736        }
3737
3738        .wm-fusion-brand__mark {
3739            font-size: 16px;
3740        }
3741
3742        .wm-fusion-controls {
3743            gap: 6px;
3744        }
3745    }
3746
3747    @media (max-width: 768px) {
3748        .wm-fusion-strip {
3749            width: 100vw;
3750            max-width: 100vw;
3751            margin: 8px 0 6px;
3752            margin-left: calc(50% - 50vw);
3753            margin-right: calc(50% - 50vw);
3754        }
3755
3756        .wm-fusion-panel {
3757            min-height: 118px;
3758            grid-template-columns: 76px minmax(0, 1fr) 90px;
3759            border-radius: 0;
3760            border-left: 0;
3761            border-right: 0;
3762            padding: 8px 8px;
3763        }
3764
3765        .wm-fusion-brand {
3766            padding-left: 0;
3767        }
3768
3769        .wm-fusion-brand__mark {
3770            font-size: 13px;
3771        }
3772
3773        .wm-fusion-brand__sub {
3774            font-size: 8px;
3775            letter-spacing: 0.06em;
3776        }
3777
3778        .wm-fusion-status {
3779            margin-top: 9px;
3780            padding: 3px 5px;
3781            font-size: 8px;
3782        }
3783
3784        .wm-fusion-controls {
3785            display: flex;
3786            overflow-x: auto;
3787            overscroll-behavior-x: contain;
3788            -webkit-overflow-scrolling: touch;
3789            padding: 0 2px 4px;
3790            scrollbar-width: none;
3791        }
3792
3793        .wm-fusion-controls::-webkit-scrollbar {
3794            display: none;
3795        }
3796
3797        .wm-fusion-control {
3798            flex: 0 0 58px;
3799            height: 92px;
3800        }
3801
3802        .wm-fusion-knob-wrap {
3803            width: 42px;
3804            height: 42px;
3805            flex-basis: 42px;
3806        }
3807
3808        .wm-fusion-knob-wrap input[type="range"] {
3809            width: 58px;
3810            height: 58px;
3811        }
3812
3813        .wm-fusion-limiter-button {
3814            width: 42px;
3815            height: 42px;
3816            flex-basis: 42px;
3817            border-radius: 4px;
3818            font-size: 9px;
3819        }
3820
3821        .wm-fusion-limiter-button::before {
3822            inset: 6px;
3823            border-radius: 2px;
3824        }
3825
3826        .wm-fusion-control[data-wm-fusion-control="lim"] .wm-fusion-value {
3827            min-width: 44px;
3828            font-size: 8px;
3829        }
3830
3831        .wm-fusion-actions {
3832            gap: 6px;
3833        }
3834
3835        .wm-fusion-switch {
3836            width: 39px;
3837            height: 36px;
3838        }
3839
3840        .wm-fusion-switch__body {
3841            width: 32px;
3842            height: 31px;
3843            flex-basis: 31px;
3844            border-radius: 6px;
3845        }
3846
3847        .wm-fusion-switch__lever {
3848            top: 7px;
3849            width: 2px;
3850            height: 7px;
3851        }
3852
3853        .wm-fusion-switch--reset {
3854            width: 42px;
3855        }
3856
3857        .wm-fusion-reset-box {
3858            width: 39px;
3859            height: 30px;
3860            font-size: 6.5px;
3861        }
3862
3863        .mobile-thumb {
3864            order: 1;
3865        }
3866
3867        .track-meta-mobile {
3868            order: 2;
3869        }
3870
3871        .mobile-buy-btn {
3872            order: 3;
3873        }
3874
3875        .wm-fusion-strip,
3876        .player-intro-credits-container {
3877            display: none;
3878        }
3879    }
3880
3881    /* 모바일: 진행바와 컨트롤 사이 여백 축소 */
3882    @media (max-width: 720px) {
3883        #wm-footer-player #player-progress-bar-container {
3884            margin-bottom: 6px;
3885        }
3886        #wm-footer-player .content_area {
3887            padding-top: 4px;
3888            padding-bottom: 6px;
3889        }
3890    }
3891
3892    /* ✅ transform은 여기 '한 곳'에서만 합성한다 */
3893    #wm-footer-player .wm-zoomable-progress {
3894        position: relative;
3895
3896        /* 합성용 변수(기본값) */
3897        --wm-scale-y: 1;
3898        --wm-played-offset-y: 0px;
3899
3900        /* 항상 translateY + scaleY를 함께 적용 */
3901        transform: translateY(var(--wm-played-offset-y)) scaleY(var(--wm-scale-y)) translateZ(0);
3902        transform-origin: center;
3903        will-change: transform;
3904        transition:
3905            transform var(--wm-progress-zoom-duration) ease,
3906            box-shadow var(--wm-progress-zoom-duration) ease,
3907            height var(--wm-progress-zoom-duration) ease;
3908        /* 레이아웃 불변 */
3909    }
3910
3911    /* 확대(zoom) 클래스: 값만 바꾼다(PC) */
3912    #wm-footer-player .wm-zoomable-progress.wm-is-zoomed {
3913        --wm-scale-y: var(--wm-progress-zoom-pc);
3914        z-index: 10;
3915        overflow: visible;
3916        /* 가장자리 잘림 방지 */
3917        box-shadow: 0 0 0.0001px rgba(0, 0, 0, 0);
3918        /* 사파리 레이어 버그 회피용 no-op */
3919    }
3920
3921    /* 모바일은 터치 정확도를 위해 조금 더 확대 */
3922    @media (max-width: 768px) {
3923        #wm-footer-player .wm-zoomable-progress.wm-is-zoomed {
3924            --wm-scale-y: var(--wm-progress-zoom-mo);
3925        }
3926    }
3927
3928    /* 확대 중 컨테이너 가시성 보조(살짝 밝기/윤곽 강조) */
3929    #wm-footer-player #player-progress-bar-container.wm-zooming {
3930        filter: brightness(calc(1 + var(--wm-progress-zoom-glow) * 0.08));
3931        /* 기본 +8% */
3932        outline: 1px solid rgba(255, 255, 255, 0.12);
3933        transition:
3934            filter var(--wm-progress-zoom-duration) ease,
3935            outline-color var(--wm-progress-zoom-duration) ease;
3936        /* 레이아웃 영향 없음 */
3937    }
3938
3939    /* ✅ 데스크톱(hover 지원 & 정교한 포인터)에서 마우스 오버만으로 확대/하이라이트 */
3940    @media (hover: hover) and (pointer: fine) {
3941
3942        /* 컨테이너 위로 마우스가 올라오면 막대 확대(변수만 변경) */
3943        #wm-footer-player #player-progress-bar-container:hover .wm-zoomable-progress {
3944            --wm-scale-y: var(--wm-progress-zoom-pc);
3945        }
3946
3947        /* 빨간 진행바(id= song-played-progress)만 살짝(1px) 아래로 */
3948        #wm-footer-player #player-progress-bar-container:hover #song-played-progress {
3949            --wm-played-offset-y: 1px;
3950        }
3951
3952        /* 컨테이너 하이라이트 */
3953        #wm-footer-player #player-progress-bar-container:hover {
3954            filter: brightness(calc(1 + var(--wm-progress-zoom-glow) * 0.08));
3955            outline: 1px solid rgba(255, 255, 255, 0.12);
3956        }
3957    }
3958
3959    /* 모션 민감 사용자 배려 */
3960    @media (prefers-reduced-motion: reduce) {
3961
3962        #wm-footer-player .wm-zoomable-progress,
3963        #wm-footer-player .wm-zoomable-progress.wm-is-zoomed,
3964        #wm-footer-player #player-progress-bar-container.wm-zooming,
3965        #wm-footer-player #player-progress-bar-container:hover .wm-zoomable-progress,
3966        #wm-footer-player #player-progress-bar-container:hover {
3967            transition: none !important;
3968        }
3969    }
3970
3971    /* + 버튼 클릭 시 재생목록 아이콘 hover 느낌 피드백 */
3972    #wm-footer-player .ply_list_btn.wm-feedback-hover {
3973        transform: translateY(-2px) scale(1.06);
3974    }
3975
3976    #wm-footer-player .ply_list_btn.wm-feedback-active {
3977        transform: translateY(0px) scale(0.98);
3978    }
3979
3980    /* ==== Footer player compact waveform layout ==== */
3981    #wm-footer-player {
3982        --wm-player-height: 108px;
3983        --wm-wave-height: 50px;
3984        --wm-wave-time-width: 50px;
3985        --wm-wave-played: rgba(196, 196, 196, 0.94);
3986        --wm-wave-played-detail: rgba(242, 242, 242, 0.34);
3987        --wm-wave-red: #d92414;
3988        --wm-wave-muted: rgba(132, 132, 132, 0.58);
3989        --wm-wave-muted-detail: rgba(190, 190, 190, 0.18);
3990        --wm-wave-silence: rgba(150, 150, 150, 0.2);
3991        --wm-player-gucci-yellow: #C2A83E;
3992        --wm-player-gucci-yellow-hover: #D4AF37;
3993    }
3994
3995    #wm-footer-player.player_box__bar {
3996        height: var(--wm-player-height);
3997        background: rgba(4, 4, 4, 0.96);
3998        border-top: 1px solid rgba(255, 255, 255, 0.08);
3999        opacity: 0.98;
4000    }
4001
4002    #wm-footer-player.player_box__bar.on {
4003        -webkit-transform: none;
4004        transform: none;
4005    }
4006
4007    #wm-footer-player>.container {
4008        width: 100%;
4009        max-width: none;
4010        min-width: 0;
4011        height: 100%;
4012        padding: 0 34px;
4013        box-sizing: border-box;
4014    }
4015
4016    #wm-footer-player .player__music {
4017        background: transparent !important;
4018        height: 100%;
4019    }
4020
4021    #wm-footer-player.player_box__bar.on.wm-player-collapsed {
4022        bottom: 0;
4023        pointer-events: none;
4024        -webkit-transform: translate3d(0, calc(100% + 18px), 0);
4025        transform: translate3d(0, calc(100% + 18px), 0);
4026    }
4027
4028    #wm-footer-player.wm-player-collapsed .player_close {
4029        display: none !important;
4030        opacity: 0 !important;
4031        pointer-events: none !important;
4032    }
4033
4034    #wm-footer-player .player_close {
4035        width: 38px;
4036        height: 38px;
4037        padding: 0;
4038        background: rgba(20, 20, 20, 0.92);
4039        border: 1px solid rgba(255, 255, 255, 0.18);
4040        color: #fff;
4041        top: -44px;
4042        right: 25px;
4043        border-radius: 50%;
4044        appearance: none;
4045        -webkit-appearance: none;
4046        opacity: 0;
4047        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
4048    }
4049
4050    #wm-footer-player .player_close:hover,
4051    #wm-footer-player .player_close:focus {
4052        background: #d92414;
4053        outline: none;
4054    }
4055
4056    #wm-footer-player .player_close i {
4057        font-size: 26px;
4058        line-height: 1;
4059    }
4060
4061    @media (hover: hover) {
4062        #wm-footer-player:hover .player_close {
4063            opacity: 1;
4064        }
4065    }
4066
4067    #wm-player-restore {
4068        position: fixed;
4069        right: 22px;
4070        bottom: 18px;
4071        z-index: 1002;
4072        width: 44px;
4073        height: 44px;
4074        padding: 0;
4075        border: 1px solid rgba(255, 255, 255, 0.2);
4076        border-radius: 50%;
4077        background: rgba(12, 12, 12, 0.92);
4078        color: #fff;
4079        cursor: pointer;
4080        align-items: center;
4081        justify-content: center;
4082        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
4083        transition: transform 160ms ease, background-color 160ms ease, opacity 160ms ease;
4084    }
4085
4086    #wm-player-restore:not([hidden]) {
4087        display: flex;
4088    }
4089
4090    #wm-player-restore:hover,
4091    #wm-player-restore:focus {
4092        background: #d92414;
4093        outline: none;
4094        transform: translateY(-2px);
4095    }
4096
4097    #wm-player-restore i {
4098        font-size: 28px;
4099    }
4100
4101    #wm-footer-player #player-progress-bar-container {
4102        position: relative;
4103        height: var(--wm-wave-height);
4104        margin: 0;
4105        background: transparent;
4106        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
4107        border-radius: 0;
4108        overflow: visible;
4109        touch-action: none;
4110    }
4111
4112    #wm-footer-player #player-progress-bar-container .running-time {
4113        position: absolute;
4114        inset: 0;
4115        display: flex;
4116        align-items: center;
4117        justify-content: space-between;
4118        gap: 8px;
4119        padding: 0;
4120        color: rgba(255, 255, 255, 0.9);
4121        font-size: 12px;
4122        line-height: 1;
4123        font-variant-numeric: tabular-nums;
4124        pointer-events: none;
4125        z-index: 4;
4126    }
4127
4128    #wm-footer-player #player-progress-bar-container .current-time,
4129    #wm-footer-player #player-progress-bar-container .play-time {
4130        min-width: 42px;
4131    }
4132
4133    #wm-footer-player #player-progress-bar-container .play-time {
4134        text-align: right;
4135    }
4136
4137    #wm-footer-player .wm-footer-waveform {
4138        position: absolute;
4139        top: 5px;
4140        bottom: 6px;
4141        left: var(--wm-wave-time-width);
4142        right: var(--wm-wave-time-width);
4143        border-radius: 0;
4144        overflow: hidden;
4145        background: transparent;
4146        z-index: 2;
4147    }
4148
4149    #wm-footer-player .wm-footer-waveform::after {
4150        content: "";
4151        position: absolute;
4152        inset: 0;
4153        display: none;
4154        pointer-events: none;
4155    }
4156
4157    #wm-footer-player .wm-footer-waveform canvas {
4158        display: block;
4159        width: 100%;
4160        height: 100%;
4161        background: transparent;
4162    }
4163
4164    #wm-footer-player progress {
4165        position: absolute;
4166        top: 0;
4167        left: var(--wm-wave-time-width);
4168        right: var(--wm-wave-time-width);
4169        width: calc(100% - (var(--wm-wave-time-width) * 2));
4170        height: var(--wm-wave-height) !important;
4171        opacity: 0;
4172        z-index: 5;
4173        cursor: pointer;
4174        transform: none !important;
4175    }
4176
4177    #wm-footer-player #song-buffered-progress {
4178        pointer-events: none;
4179        z-index: 1;
4180    }
4181
4182    #wm-footer-player .wm-zoomable-progress,
4183    #wm-footer-player .wm-zoomable-progress.wm-is-zoomed,
4184    #wm-footer-player #player-progress-bar-container:hover .wm-zoomable-progress {
4185        --wm-scale-y: 1;
4186        --wm-played-offset-y: 0px;
4187        box-shadow: none;
4188        transform: none !important;
4189    }
4190
4191    #wm-footer-player #player-progress-bar-container:hover,
4192    #wm-footer-player #player-progress-bar-container.wm-zooming {
4193        filter: none;
4194        outline: none;
4195    }
4196
4197    #wm-footer-player .content_area {
4198        display: grid;
4199        grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
4200        height: calc(var(--wm-player-height) - var(--wm-wave-height));
4201        min-height: 58px;
4202        gap: 12px;
4203        align-items: center;
4204        padding: 0;
4205    }
4206
4207    #wm-footer-player .song-thumbnail__wrapper {
4208        grid-column: 1;
4209        flex: none;
4210        flex-wrap: nowrap;
4211        width: 100%;
4212        min-width: 0;
4213        max-width: 430px;
4214        overflow: hidden;
4215    }
4216
4217    #wm-footer-player .song-thumbnail__wrapper .thumbnail-image {
4218        flex: 0 0 48px;
4219        width: 48px;
4220        height: 48px;
4221        border-radius: 4px;
4222        background: #151515;
4223        overflow: hidden;
4224    }
4225
4226    #wm-footer-player .song-thumbnail__wrapper .thumbnail-image img.js-coverimg,
4227    #music-app-container .js-coverimg {
4228        opacity: 0;
4229        transition: opacity 0.16s ease;
4230    }
4231
4232    #wm-footer-player .song-thumbnail__wrapper .thumbnail-image img.js-coverimg.wm-cover-ready,
4233    #music-app-container .js-coverimg.wm-cover-ready {
4234        opacity: 1;
4235    }
4236
4237    #wm-footer-player .song-thumbnail__wrapper .information {
4238        flex: 1 1 auto;
4239        width: auto;
4240        height: 42px;
4241        margin-left: 14px;
4242        justify-content: center;
4243        gap: 5px;
4244        min-width: 0;
4245    }
4246
4247    #wm-footer-player .song-thumbnail__wrapper .information .track_name {
4248        height: auto;
4249        line-height: 1.2;
4250        font-size: 14px;
4251        display: block;
4252        width: 100%;
4253        min-width: 0;
4254        overflow: hidden;
4255        white-space: nowrap;
4256        text-overflow: ellipsis;
4257    }
4258
4259    #wm-footer-player .song-thumbnail__wrapper .information .singer {
4260        margin-top: 0;
4261        font-size: 12px;
4262        line-height: 1.2;
4263        color: rgba(255, 255, 255, 0.56);
4264        width: 100%;
4265        min-width: 0;
4266        overflow: hidden;
4267        white-space: nowrap;
4268        text-overflow: ellipsis;
4269    }
4270
4271    #wm-footer-player .song-thumbnail__wrapper .information .singer>.artist_name {
4272        display: block;
4273        flex: 1 1 auto;
4274        min-width: 0;
4275        max-width: 100%;
4276        overflow: hidden;
4277        white-space: nowrap;
4278        text-overflow: ellipsis;
4279    }
4280
4281    #wm-footer-player .wm-player-center,
4282    #wm-footer-player .wm-player-actions {
4283        min-width: 0;
4284        display: flex;
4285        align-items: center;
4286    }
4287
4288    #wm-footer-player .wm-player-center {
4289        grid-column: 2;
4290        justify-self: center;
4291        gap: 10px;
4292    }
4293
4294    #wm-footer-player .wm-player-actions {
4295        grid-column: 3;
4296        justify-self: end;
4297        gap: 12px;
4298    }
4299
4300    #wm-footer-player .play-control {
4301        flex: 0 0 auto;
4302        margin: 0;
4303        gap: 8px;
4304    }
4305
4306    @media (prefers-reduced-motion: reduce) {
4307        #wm-footer-player .player__music .content_area .play-control>div:hover,
4308        #wm-footer-player .player__music .content_area .play-control>div:active,
4309        #wm-footer-player .song_favorite:hover,
4310        #wm-footer-player .bgm_download:hover,
4311        #wm-footer-player .play-mode:hover,
4312        #wm-footer-player .ply_list_btn:hover,
4313        #wm-footer-player .mode_change_btn:hover,
4314        #wm-footer-player .volume-control .vol_box .icon_box.amplitude-mute:hover {
4315            transform: none;
4316        }
4317    }
4318
4319    #wm-footer-player .player__music .content_area .play-control>div {
4320        width: 38px;
4321        height: 38px;
4322        box-shadow: none;
4323        transition: color 140ms ease, opacity 140ms ease, transform 140ms ease;
4324    }
4325
4326    #wm-footer-player .player__music .content_area .play-control>div:hover,
4327    #wm-footer-player .player__music .content_area .play-control>div:active {
4328        background: transparent !important;
4329        box-shadow: none;
4330        transform: translateY(-1px) scale(1.04);
4331    }
4332
4333    #wm-footer-player .player__music .content_area .play-control .amplitude-play-pause {
4334        width: 42px;
4335        height: 42px;
4336    }
4337
4338    #wm-footer-player .player__music .content_area .play-control .amplitude-play-pause>i {
4339        font-size: 34px;
4340    }
4341
4342    #wm-footer-player .amplitude-prev>i,
4343    #wm-footer-player .amplitude-next>i {
4344        font-size: 28px;
4345    }
4346
4347    #wm-footer-player .favorite_mode {
4348        flex: 0 0 auto;
4349        display: flex;
4350        align-items: center;
4351        justify-content: center;
4352        gap: 4px;
4353    }
4354
4355    #wm-footer-player .song_favorite,
4356    #wm-footer-player .bgm_download,
4357    #wm-footer-player .play-mode,
4358    #wm-footer-player .ply_list_btn,
4359    #wm-footer-player .mode_change_btn,
4360    #wm-footer-player .volume-control .vol_box .icon_box.amplitude-mute {
4361        width: 36px;
4362        height: 36px;
4363        margin-right: 0;
4364        padding: 0;
4365        border: 0;
4366        border-radius: 50%;
4367        display: flex;
4368        align-items: center;
4369        justify-content: center;
4370        background: transparent;
4371        appearance: none;
4372        -webkit-appearance: n
4372one;
4373        transition: color 140ms ease, transform 140ms ease;
4374    }
4375
4376    #wm-footer-player .song_favorite:hover,
4377    #wm-footer-player .bgm_download:hover,
4378    #wm-footer-player .play-mode:hover,
4379    #wm-footer-player .ply_list_btn:hover,
4380    #wm-footer-player .mode_change_btn:hover,
4381    #wm-footer-player .volume-control .vol_box .icon_box.amplitude-mute:hover {
4382        background: transparent !important;
4383        box-shadow: none;
4384        transform: translateY(-1px) scale(1.04);
4385    }
4386
4387    #wm-footer-player .song_favorite i,
4388    #wm-footer-player .bgm_download i,
4389    #wm-footer-player .play-mode i,
4390    #wm-footer-player .ply_list_btn>i,
4391    #wm-footer-player .mode_change_btn>i,
4392    #wm-footer-player .volume-control .vol_box .icon_box.amplitude-mute>i {
4393        font-size: 22px;
4394        color: rgba(255, 255, 255, 0.92);
4395    }
4396
4397    #wm-footer-player .mode_change_btn {
4398        width: 42px;
4399        height: 38px;
4400    }
4401
4402    #wm-footer-player .mode_change_btn>i {
4403        font-size: 31px;
4404        color: #64b3f5;
4405        text-shadow: 0 0 10px rgba(57, 154, 243, 0.22);
4406        transition: color 140ms ease, text-shadow 140ms ease, transform 140ms ease;
4407    }
4408
4409    #wm-footer-player .mode_change_btn:hover>i,
4410    #wm-footer-player .mode_change_btn:focus-visible>i,
4411    #wm-footer-player .mode_change_btn.active>i {
4412        color: #82c8ff;
4413        text-shadow:
4414            0 0 12px rgba(57, 154, 243, 0.42),
4415            0 1px 2px rgba(0, 0, 0, 0.45);
4416    }
4417
4418    #wm-footer-player .wm-player-purchase {
4419        flex: 0 0 auto;
4420        min-width: 0;
4421        display: none;
4422        align-items: center;
4423        justify-content: center;
4424    }
4425
4426    #wm-footer-player .wm-player-purchase.is-visible {
4427        min-width: 94px;
4428        display: flex;
4429    }
4430
4431    #wm-footer-player .wm-player-price {
4432        min-width: 92px;
4433        max-width: 132px;
4434        height: 36px;
4435        padding: 0 12px;
4436        border: 0;
4437        border-radius: 8px;
4438        background: var(--wm-player-gucci-yellow);
4439        color: #111;
4440        cursor: pointer;
4441        position: relative;
4442        display: none;
4443        flex-direction: row;
4444        align-items: center;
4445        justify-content: center;
4446        gap: 7px;
4447        line-height: 1;
4448        transition: background-color 160ms ease, transform 160ms ease;
4449    }
4450
4451    #wm-footer-player .wm-player-price.is-visible {
4452        display: flex;
4453    }
4454
4455    #wm-footer-player .wm-player-price:not(:disabled):hover,
4456    #wm-footer-player .wm-player-price:not(:disabled):focus {
4457        background: var(--wm-player-gucci-yellow-hover);
4458        outline: none;
4459        transform: translateY(-1px);
4460    }
4461
4462    #wm-footer-player .wm-player-price:disabled {
4463        cursor: default;
4464        opacity: 0.7;
4465    }
4466
4467    #wm-footer-player .wm-player-price__label {
4468        position: absolute;
4469        width: 1px;
4470        height: 1px;
4471        margin: -1px;
4472        padding: 0;
4473        overflow: hidden;
4474        clip: rect(0, 0, 0, 0);
4475        white-space: nowrap;
4476        border: 0;
4477    }
4478
4479    #wm-footer-player .wm-player-price__value {
4480        color: #111;
4481        font-size: 13px;
4482        font-weight: 700;
4483        white-space: nowrap;
4484    }
4485
4486    #wm-footer-player .wm-player-price i {
4487        font-size: 18px;
4488        color: #111;
4489    }
4490
4491    #wm-footer-player .volume-control {
4492        flex: 0 0 auto;
4493        position: relative;
4494    }
4495
4496    #wm-footer-player .volume-control .vol_box {
4497        position: relative;
4498        display: flex;
4499        align-items: center;
4500        justify-content: center;
4501        width: 36px;
4502        height: 36px;
4503    }
4504
4505    #wm-footer-player .volume-control .vol_box::before {
4506        content: "";
4507        position: absolute;
4508        left: -18px;
4509        right: -18px;
4510        bottom: 100%;
4511        height: 24px;
4512        pointer-events: none;
4513        z-index: 11;
4514    }
4515
4516    #wm-footer-player .volume-control .vol_box:hover::before,
4517    #wm-footer-player .volume-control .vol_box:focus-within::before {
4518        pointer-events: auto;
4519    }
4520
4521    #wm-footer-player .volume-control .vol_box .icon_box.amplitude-mute {
4522        margin-right: 0;
4523    }
4524
4525    #wm-footer-player .volume-control .vol_box .icon_box.amplitude-mute>i {
4526        font-size: 21px;
4527    }
4528
4529    #wm-footer-player .volume-control .vol_box .ranger_box {
4530        position: absolute;
4531        display: block !important;
4532        left: 50%;
4533        bottom: calc(100% + 9px);
4534        width: 32px;
4535        height: 140px;
4536        padding: 16px 0;
4537        border: 1px solid rgba(255, 255, 255, 0.1);
4538        border-radius: 9px;
4539        background: rgba(5, 6, 7, 0.96);
4540        box-shadow:
4541            inset 0 1px 0 rgba(255, 255, 255, 0.06),
4542            inset 0 -1px 0 rgba(0, 0, 0, 0.72),
4543            0 18px 36px rgba(0, 0, 0, 0.36);
4544        opacity: 0;
4545        visibility: hidden;
4546        pointer-events: none;
4547        transform: translate(-50%, 6px);
4548        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
4549        z-index: 12;
4550    }
4551
4552    #wm-footer-player .volume-control .vol_box:hover .ranger_box,
4553    #wm-footer-player .volume-control .vol_box:focus-within .ranger_box {
4554        opacity: 1;
4555        visibility: visible;
4556        pointer-events: auto;
4557        transform: translate(-50%, 0);
4558    }
4559
4560    #wm-footer-player .volume-control .vol_box .ranger_box::after {
4561        content: "";
4562        position: absolute;
4563        left: 50%;
4564        bottom: -5px;
4565        width: 9px;
4566        height: 9px;
4567        background: rgba(5, 6, 7, 0.96);
4568        border-right: 1px solid rgba(255, 255, 255, 0.1);
4569        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
4570        transform: translateX(-50%) rotate(45deg);
4571    }
4572
4573    #wm-footer-player input[type="range"].amplitude-volume-slider {
4574        --wm-volume-fill: 80%;
4575        position: absolute;
4576        left: 50%;
4577        top: 50%;
4578        width: 112px;
4579        height: 8px;
4580        border-radius: 999px;
4581        background: linear-gradient(90deg,
4582            rgba(255, 255, 255, 0.98) 0%,
4583            rgba(255, 255, 255, 0.98) var(--wm-volume-fill),
4584            rgba(255, 255, 255, 0.16) var(--wm-volume-fill),
4585            rgba(255, 255, 255, 0.16) 100%);
4586        transform: translate(-50%, -50%) rotate(-90deg);
4587        transform-origin: center;
4588        cursor: pointer;
4589        appearance: none;
4590        -webkit-appearance: none;
4591        outline: none;
4592        margin: 0;
4593        padding: 0;
4594    }
4595
4596    #wm-footer-player input[type="range"].amplitude-volume-slider::-webkit-slider-runnable-track {
4597        height: 4px;
4598        border-radius: 999px;
4599        background: transparent;
4600        box-shadow: none;
4601    }
4602
4603    #wm-footer-player input[type="range"].amplitude-volume-slider::-webkit-slider-thumb {
4604        -webkit-appearance: none;
4605        appearance: none;
4606        width: 14px;
4607        height: 14px;
4608        margin-top: -5px;
4609        border: 0;
4610        background: transparent;
4611        box-shadow: none;
4612        opacity: 0;
4613    }
4614
4615    #wm-footer-player input[type="range"].amplitude-volume-slider::-moz-range-track {
4616        height: 4px;
4617        border-radius: 999px;
4618        background: rgba(255, 255, 255, 0.16);
4619        box-shadow: none;
4620    }
4621
4622    #wm-footer-player input[type="range"].amplitude-volume-slider::-moz-range-progress {
4623        height: 4px;
4624        border-radius: 999px;
4625        background: rgba(255, 255, 255, 0.98);
4626    }
4627
4628    #wm-footer-player input[type="range"].amplitude-volume-slider::-moz-range-thumb {
4629        width: 14px;
4630        height: 14px;
4631        border: 0;
4632        background: transparent;
4633        box-shadow: none;
4634        opacity: 0;
4635    }
4636
4637    #wm-footer-player .ply_list_btn,
4638    #wm-footer-player .mode_change_btn,
4639    #wm-footer-player .play-mode {
4640        flex: 0 0 auto;
4641        line-height: 36px;
4642    }
4643
4644    .wm-footer-license-modal .modalContent .modalOption {
4645        cursor: pointer;
4646    }
4647
4648    .wm-footer-license-modal .rule-table__title {
4649        cursor: pointer;
4650        user-select: none;
4651    }
4652
4653    .wm-footer-license-modal .rule-table__title i {
4654        transition: transform 140ms ease;
4655    }
4656
4657    .wm-footer-license-modal .rule-table__title.is-collapsed i {
4658        transform: rotate(180deg);
4659    }
4660
4661    .wm-footer-license-modal .wm-footer-license-empty {
4662        width: 100%;
4663        padding: 24px 12px;
4664        color: rgba(255, 255, 255, 0.78);
4665        text-align: center;
4666        font-size: 14px;
4667    }
4668
4669    @media screen and (max-width: 1160px) {
4670        #wm-footer-player .player_close {
4671            opacity: 1;
4672        }
4673    }
4674
4675    @media screen and (max-width: 980px) {
4676        #wm-footer-player>.container {
4677            padding: 0 18px;
4678        }
4679
4680        #wm-footer-player .content_area {
4681            grid-template-columns: minmax(150px, 1fr) auto auto;
4682            gap: 8px;
4683        }
4684
4685        #wm-footer-player .song-thumbnail__wrapper {
4686            max-width: none;
4687        }
4688
4689        #wm-footer-player .wm-player-actions {
4690            gap: 4px;
4691        }
4692
4693        #wm-footer-player .play-mode {
4694            display: none;
4695        }
4696    }
4697
4698    @media screen and (min-width: 721px) and (max-width: 1024px) {
4699        #contents_body>footer>div#wm-footer-player.player_box__bar.on>div.container>div.player__music.on>div.content_area>div.song-thumbnail__wrapper,
4700        #wm-footer-player.player_box__bar.on .content_area>.song-thumbnail__wrapper {
4701            width: 100%;
4702            max-width: none;
4703        }
4704    }
4705
4706    @media screen and (min-width: 981px) and (max-width: 1024px) {
4707        #wm-footer-player>.container {
4708            padding: 0 22px;
4709        }
4710
4711        #wm-footer-player .content_area {
4712            grid-template-columns: minmax(0, 1fr) auto auto;
4713            gap: 10px;
4714        }
4715
4716        #wm-footer-player .wm-player-actions {
4717            gap: 8px;
4718        }
4719    }
4720
4721    @media screen and (min-width: 721px) and (max-width: 1024px) and (orientation: portrait) {
4722        #wm-footer-player>.container {
4723            padding: 0 22px;
4724        }
4725
4726        #wm-footer-player .content_area {
4727            grid-template-columns: minmax(0, 1fr) auto auto;
4728            gap: 8px;
4729        }
4730
4731        #wm-footer-player .wm-player-center {
4732            width: 100%;
4733            justify-self: center;
4734            justify-content: center;
4735        }
4736
4737        #wm-footer-player .player__music .content_area .play-control {
4738            margin-right: auto !important;
4739            margin-left: auto !important;
4740            justify-content: center;
4741        }
4742
4743        #wm-footer-player .volume-control {
4744            display: none;
4745        }
4746
4747        #wm-footer-player .wm-player-actions {
4748            justify-self: end;
4749        }
4750    }
4751
4752    @media screen and (max-width: 720px) {
4753        #wm-footer-player {
4754            --wm-player-height: 99px;
4755            --wm-wave-height: 41px;
4756            --wm-wave-time-width: 44px;
4757        }
4758
4759        #wm-footer-player>.container {
4760            padding: 0 12px;
4761        }
4762
4763        #wm-footer-player .content_area {
4764            grid-template-columns: minmax(0, 1fr) auto auto;
4765            gap: 6px;
4766            min-height: 58px;
4767        }
4768
4769        #wm-footer-player .song-thumbnail__wrapper {
4770            max-width: none;
4771            width: 100%;
4772            overflow: hidden;
4773        }
4774
4775        #wm-footer-player .song-thumbnail__wrapper .thumbnail-image {
4776            flex-basis: 40px;
4777            width: 40px;
4778            height: 40px;
4779        }
4780
4781        #wm-footer-player .song-thumbnail__wrapper .information {
4782            height: 38px;
4783            margin-left: 10px;
4784        }
4785
4786        #wm-footer-player .song-thumbnail__wrapper .information .track_name {
4787            font-size: 12px;
4788        }
4789
4790        #wm-footer-player .song-thumbnail__wrapper .information .singer {
4791            font-size: 11px;
4792        }
4793
4794        #wm-footer-player .wm-player-center {
4795            gap: 2px;
4796        }
4797
4798        #wm-footer-player .player__music .content_area .play-control>div {
4799            width: 32px;
4800            height: 32px;
4801        }
4802
4803        #wm-footer-player .player__music .content_area .play-control .amplitude-play-pause {
4804            width: 34px;
4805            height: 34px;
4806        }
4807
4808        #wm-footer-player .player__music .content_area .play-control .amplitude-play-pause>i {
4809            font-size: 30px;
4810        }
4811
4812        #wm-footer-player .amplitude-prev>i,
4813        #wm-footer-player .amplitude-next>i {
4814            font-size: 24px;
4815        }
4816
4817        #wm-footer-player .wm-player-purchase.is-visible {
4818            min-width: 70px;
4819        }
4820
4821        #wm-footer-player .wm-player-price {
4822            min-width: 68px;
4823            max-width: 82px;
4824            height: 32px;
4825            padding: 0 8px;
4826            gap: 4px;
4827        }
4828
4829        #wm-footer-player .wm-player-price i {
4830            display: none;
4831        }
4832
4833        #wm-footer-player .wm-player-price__value {
4834            max-width: 62px;
4835            overflow: hidden;
4836            text-overflow: ellipsis;
4837            font-size: 12px;
4838        }
4839
4840        #wm-footer-player .favorite_mode,
4841        #wm-footer-player .volume-control,
4842        #wm-footer-player .mode_change_btn {
4843            display: none !important;
4844        }
4845
4846        #wm-footer-player .player_close {
4847            width: 34px !important;
4848            height: 34px !important;
4849            top: -40px !important;
4850            right: 19px !important;
4851            opacity: 1 !important;
4852        }
4853
4854        #wm-footer-player .play-control {
4855            margin-right: 4px !important;
4856        }
4857
4858        #wm-player-restore {
4859            right: 14px;
4860            bottom: 14px;
4861        }
4862    }
4863
4864    @media screen and (max-width: 380px) {
4865        #wm-footer-player>.container {
4866            padding: 0 8px;
4867        }
4868
4869        #wm-footer-player .content_area {
4870            gap: 4px;
4871        }
4872
4873        #wm-footer-player .wm-player-actions {
4874            gap: 4px;
4875        }
4876
4877        #wm-footer-player .wm-player-price {
4878            min-width: 62px;
4879            max-width: 72px;
4880            padding: 0 6px;
4881        }
4882
4883        #wm-footer-player .wm-player-price__value {
4884            max-width: 56px;
4885        }
4886    }
4887</style>
4888
4889
4890
4891<!-- ===== WM Progress Zoom: Rollback & Debug Switches ===== -->
4892<script>
4893    // ← 이 값을 false 로 바꾸면 즉시 전체 기능 비활성화 (CSS 클래스 토글 자체가 멈춤)
4894    window.WM_PROGRESS_ZOOM_ENABLED = true;
4895
4896    // ← true 로 바꾸면 콘솔에 동작 로그가 찍혀서 디버깅에 좋아요
4897    window.WM_PROGRESS_ZOOM_DEBUG = false;
4898
4899    // 런타임에서 즉시 온/오프하고 잔여 클래스도 정리하는 헬퍼 (선택)
4900    window.WMProgressZoom = {
4901        enable() {
4902            window.WM_PROGRESS_ZOOM_ENABLED = true;
4903        },
4904        disable() {
4905            window.WM_PROGRESS_ZOOM_ENABLED = false;
4906            try {
4907                var root = document.getElementById('wm-footer-player');
4908                if (!root) return;
4909                var bar = root.querySelector('.wm-zoomable-progress');
4910                var area = root.querySelector('#player-progress-bar-container');
4911                if (bar) bar.classList.remove('wm-is-zoomed');
4912                if (area) area.classList.remove('wm-zooming');
4913            } catch (e) {}
4914        }
4915    };
4916</script>
4916
4917
4918<script>
4919    /* ===== WaterMelon: Progress Zoom (scoped, safe) ===== */
4920    (function() {
4921        // [ADD] 스위치: 꺼져 있으면 즉시 종료
4922        if (!window.WM_PROGRESS_ZOOM_ENABLED) {
4923            if (window.WM_PROGRESS_ZOOM_DEBUG) console.log('[WMZoom] disabled by switch');
4924            return;
4925        }
4926
4927        if (window.__wmProgressZoomInit) return;
4928        window.__wmProgressZoomInit = true;
4929
4930        // [ADD] 디버그 헬퍼
4931        function dbg() {
4932            if (window.WM_PROGRESS_ZOOM_DEBUG) {
4933                var args = Array.prototype.slice.call(arguments);
4934                args.unshift('[WMZoom]');
4935                console.log.apply(console, args);
4936            }
4937        }
4938
4939        function setup() {
4940            var root = document.getElementById('wm-footer-player');
4941            if (!root) {
4942                dbg('no root');
4943                return;
4944            }
4945
4946            // 확대 대상: 우리가 2단계에서 붙인 클래스
4947            var bar = root.querySelector('.wm-zoomable-progress');
4948            if (!bar) {
4949                dbg('no bar');
4950                return;
4951            }
4952
4953            // 진행바 주변 컨테이너(막대를 눌러도 동작하도록)
4954            var area = root.querySelector('#player-progress-bar-container') || bar;
4955
4956            var downId = null;
4957            var revertTimer = null;
4958
4959            function zoomOn() {
4960                if (!bar.classList.contains('wm-is-zoomed')) {
4961                    bar.classList.add('wm-is-zoomed');
4962                    dbg('zoom on');
4963                }
4964                // 컨테이너 하이라이트 토글
4965                if (area && !area.classList.contains('wm-zooming')) {
4966                    area.classList.add('wm-zooming');
4967                }
4968            }
4969
4970            function zoomOff(delay) {
4971                if (revertTimer) clearTimeout(revertTimer);
4972                revertTimer = setTimeout(function() {
4973                    bar.classList.remove('wm-is-zoomed');
4974                    if (area) area.classList.remove('wm-zooming');
4975                    dbg('zoom off');
4976                }, typeof delay === 'number' ? delay : 60);
4977            }
4978
4979            // 눌렀을 때: 확대 (PC/모바일 공통)
4980            area.addEventListener('pointerdown', function(e) {
4981                if (!(bar.contains(e.target) || area.contains(e.target))) return;
4982                downId = e.pointerId;
4983                zoomOn();
4984            }, {
4985                passive: true
4986            });
4987
4988            // 뗐을 때/취소/영역 벗어남: 복귀
4989            document.addEventListener('pointerup', function(e) {
4990                if (downId !== null && e.pointerId !== downId) return;
4991                downId = null;
4992                zoomOff(70);
4993            }, {
4994                passive: true
4995            });
4996
4997            document.addEventListener('pointercancel', function() {
4998                downId = null;
4999                zoomOff(0);
5000            }, {
5001                passive: true
5002            });
5003
5004            bar.addEventListener('pointerleave', function() {
5005                if (downId === null) zoomOff(0);
5006            }, {
5007                passive: true
5008            });
5009
5010            // 터치 보강
5011            area.addEventListener('touchend', function() {
5012                downId = null;
5013                zoomOff(70);
5014            }, {
5015                passive: true
5016            });
5017            area.addEventListener('touchcancel', function() {
5018                downId = null;
5019                zoomOff(0);
5020            }, {
5021                passive: true
5022            });
5023
5024            // 접근성(선택)
5025            bar.setAttribute('tabindex', '0');
5026            bar.addEventListener('keydown', function(e) {
5027                if (e.code === 'Space' || e.code === 'Enter') zoomOn();
5028            });
5029            bar.addEventListener('keyup', function(e) {
5030                if (e.code === 'Space' || e.code === 'Enter') zoomOff(0);
5031            });
5032
5033            dbg('initialized');
5034        }
5035
5036        if (document.readyState === 'loading') {
5037            document.addEventListener('DOMContentLoaded', setup);
5038        } else {
5039            setup();
5040        }
5041    })();
5042</script>
5042
5043
5044
5045
5046<div id="music-app-container" class="wm-expanded-player" role="dialog" aria-modal="true" aria-labelledby="wm-expanded-player-heading" aria-hidden="true" tabindex="-1">
5047    <div class="music-app-wrapper">
5048        <div class="album wm-expanded-layout">
5049            <div class="wm-expanded-main">
5050                <header class="wm-expanded-header">
5051                    <span id="wm-expanded-player-heading">NOW PLAYING</span>
5052                    <button type="button" class="wm-expanded-close" aria-label="Close expanded player">
5053                        <i class="material-icons" aria-hidden="true">keyboard_arrow_down</i>
5054                    </button>
5055                </header>
5056                <div class="wm-expanded-artwork">
5057                    <div class="wm-expanded-record" role="slider" tabindex="0" aria-label="Turn the record to seek" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0:00">
5058                        <div class="wm-expanded-record__disc">
5059                            <img class="js-coverimg" data-amplitude-song-info="cover_art_url" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" alt="" draggable="false" />
5060                        </div>
5061                    </div>
5062                </div>
5063                <div class="wm-expanded-meta">
5064                    <div class="track-meta-mobile">
5065                        <div class="dp_ib_m track_name" data-amplitude-song-info="name" role="link" tabindex="0" aria-label="View track"></div>
5066                        <span class="artist_name" data-amplitude-song-info="artist" role="link" tabindex="0" aria-label="View track"></span>
5067                    </div>
5068                    <button type="button" class="wm-expanded-favorite" aria-pressed="false" aria-label="Favorite current track">
5069                        <i class="material-icons" aria-hidden="true">favorite_border</i>
5070                    </button>
5071                </div>
5072                <div class="wm-expanded-modes" role="group" aria-label="Playback modes">
5073                    <button type="button" data-wm-player-mode="shuffle" aria-pressed="false" aria-label="Shuffle" title="Shuffle"><i class="material-icons" aria-hidden="true">shuffle</i></button>
5074                    <button type="button" data-wm-player-mode="repeat" aria-pressed="false" aria-label="Repeat" title="Repeat"><i class="material-icons" aria-hidden="true">repeat</i></button>
5075                    <button type="button" data-wm-player-mode="auto" aria-pressed="false" aria-label="Autoplay" title="Autoplay"><i class="material-icons" aria-hidden="true">all_inclusive</i></button>
5076                    <button type="button" data-wm-player-mode="minute" aria-pressed="false" aria-label="60 seconds per track" title="60 seconds per track, with a short fade"><span class="wm-expanded-minute-label" aria-hidden="true">1<span>MIN</span></span></button>
5077                </div>
5078                <div class="wm-expanded-panel-area">
5079                    <section id="wm-expanded-release" class="wm-expanded-panel" role="region" aria-labelledby="wm-expanded-release-tab" hidden></section>
5080                    <section id="wm-expanded-price" class="wm-expanded-panel" role="region" aria-labelledby="wm-expanded-price-tab" hidden></section>
5081                    <section id="wm-expanded-queue" class="wm-expanded-panel" role="region" aria-labelledby="wm-expanded-queue-tab" hidden></section>
5082                </div>
5083                <div class="wm-expanded-playback">
5084                    <div class="wm-expanded-seek" role="slider" tabindex="0" aria-label="Playback position" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0:00">
5085                        <canvas id="wm-expanded-waveform-canvas" aria-hidden="true"></canvas>
5086                    </div>
5087                    <div class="wm-expanded-times" aria-hidden="true"><span class="wm-expanded-elapsed">0:00</span><span class="wm-expanded-duration">0:00</span></div>
5088                    <div class="wm-expanded-transport" role="group" aria-label="Playback controls">
5089                        <button type="button" class="wm-expanded-prev" aria-label="Previous track"><i class="material-icons" aria-hidden="true">skip_previous</i></button>
5090                        <button type="button" class="wm-expanded-play" aria-label="Play" aria-pressed="false"><i class="material-icons" aria-hidden="true">play_arrow</i></button>
5091                        <button type="button" class="wm-expanded-next" aria-label="Next track"><i class="material-icons" aria-hidden="true">skip_next</i></button>
5092                    </div>
5093                    <div class="wm-expanded-volume-row">
5094                        <i class="material-icons" aria-hidden="true">volume_down</i>
5095                        <input type="range" class="wm-expanded-volume" min="0" max="100" step="1" value="80" aria-label="Volume" aria-describedby="wm-expanded-volume-note" />
5096                        <i class="material-icons" aria-hidden="true">volume_up</i>
5097                    </div>
5098                    <p id="wm-expanded-volume-note" class="wm-expanded-volume-note" hidden>Use your device volume buttons to adjust the volume.</p>
5099                </div>
5100                <nav class="wm-expanded-tabs" aria-label="Current track information">
5101                    <button type="button" id="wm-expanded-release-tab" data-wm-player-panel="release" aria-expanded="false" aria-controls="wm-expanded-release"><i class="material-icons" aria-hidden="true">album</i><span>Release</span></button>
5102                    <button type="button" id="wm-expanded-price-tab" data-wm-player-panel="price" aria-expanded="false" aria-controls="wm-expanded-price"><i class="material-icons" aria-hidden="true">local_offer</i><span>Price · License</span></button>
5103                    <button type="button" id="wm-expanded-queue-tab" data-wm-player-panel="queue" aria-expanded="false" aria-controls="wm-expanded-queue"><i class="material-icons" aria-hidden="true">queue_music</i><span>Queue</span></button>
5104                </nav>
5105            </div>
5106            <details class="wm-expanded-studio">
5107                <summary><span>Expand More</span><i class="material-icons" aria-hidden="true">expand_more</i></summary>
5108            <div class="vu-row">
5109                <div class="vu-box">
5110                    <div class="vu-box__dial" data-vu="L">
5111                        <div class="vu-box__bg"></div>
5112                        <svg class="vu-box__scale" viewBox="0 0 260 170" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
5113                            <g>
5114                                <path class="vu-arc" d="M24 118 Q130 36 236 118" />
5115                                <path class="vu-arc vu-arc--over" d="M24 118 Q130 36 236 118" pathLength="100" stroke-dasharray="22 100" stroke-dashoffset="-78" />
5116                                <line class="vu-center-line" x1="130" y1="154" x2="130" y2="47" />
5117
5118                                <line class="vu-tick" x1="36.72" y1="108.75" x2="29.69" y2="98.42" />
5119                                <line class="vu-tick" x1="53.68" y1="98.25" x2="47.60" y2="87.33" />
5120                                <line class="vu-tick" x1="70.64" y1="89.86" x2="65.67" y2="78.39" />
5121                                <line class="vu-tick" x1="87.60" y1="83.56" x2="83.90" y2="71.
512162" />
5122                                <line class="vu-tick" x1="104.56" y1="79.36" x2="102.28" y2="67.07" />
5123                                <line class="vu-tick" x1="121.52" y1="77.26" x2="120.75" y2="64.79" />
5124                                <line class="vu-tick" x1="138.48" y1="77.26" x2="139.25" y2="64.79" />
5125                                <line class="vu-tick" x1="155.44" y1="79.36" x2="157.72" y2="67.07" />
5126                                <line class="vu-tick" x1="172.40" y1="83.56" x2="176.10" y2="71.62" />
5127                                <line class="vu-tick" x1="189.36" y1="89.86" x2="194.33" y2="78.39" />
5128                                <line class="vu-tick" x1="206.32" y1="98.25" x2="212.40" y2="87.33" />
5129                                <line class="vu-tick" x1="223.28" y1="108.75" x2="230.31" y2="98.42" />
5130
5131                                <line class="vu-tick vu-tick--red" x1="189.36" y1="89.86" x2="194.33" y2="78.39" />
5132                                <line class="vu-tick vu-tick--red" x1="206.32" y1="98.25" x2="212.40" y2="87.33" />
5133                                <line class="vu-tick vu-tick--red" x1="223.28" y1="108.75" x2="230.31" y2="98.42" />
5134
5135                                <line class="vu-tick-minor" x1="45.20" y1="103.24" x2="40.73" y2="96.01" />
5136                                <line class="vu-tick-minor" x1="62.16" y1="93.79" x2="58.39" y2="86.18" />
5137                                <line class="vu-tick-minor" x1="79.12" y1="86.45" x2="76.16" y2="78.48" />
5138                                <line class="vu-tick-minor" x1="96.08" y1="81.20" x2="94.04" y2="72.95" />
5139                                <line class="vu-tick-minor" x1="113.04" y1="78.05" x2="112.00" y2="69.61" />
5140                                <line class="vu-tick-minor" x1="130.00" y1="77.00" x2="130.00" y2="68.50" />
5141                                <line class="vu-tick-minor" x1="146.96" y1="78.05" x2="148.00" y2="69.61" />
5142                                <line class="vu-tick-minor" x1="163.92" y1="81.20" x2="165.96" y2="72.95" />
5143                                <line class="vu-tick-minor" x1="180.88" y1="86.45" x2="183.84" y2="78.48" />
5144                                <line class="vu-tick-minor" x1="197.84" y1="93.79" x2="201.61" y2="86.18" />
5145                                <line class="vu-tick-minor" x1="214.80" y1="103.24" x2="219.27" y2="96.01" />
5146
5147                                <text class="vu-label-scale-title" x="130" y="132">VU</text>
5148                                <text class="vu-label-watts" x="34" y="70">5.0</text>
5149                                <text class="vu-label-watts" x="58" y="54">50</text>
5150                                <text class="vu-label-watts" x="92" y="44">100</text>
5151                                <text class="vu-label-watts" x="130" y="40">150</text>
5152                                <text class="vu-label-watts" x="166" y="44">200</text>
5153                                <text class="vu-label-watts" x="202" y="54">250</text>
5154                                <text class="vu-label-watts vu-label-over" x="224" y="68">500</text>
5155
5156                                <text class="vu-label-scale-subtitle" x="130" y="86">LEVEL</text>
5157                                <text class="vu-label-mark" x="34" y="129">-</text>
5158                                <text class="vu-label-mark" x="52" y="117">20</text>
5159                                <text class="vu-label-mark" x="70" y="108">10</text>
5160                                <text class="vu-label-mark" x="88" y="101">7</text>
5161                                <text class="vu-label-mark" x="106" y="95">5</text>
5162                                <text class="vu-label-mark" x="123" y="91">3</text>
5163                                <text class="vu-label-mark" x="154" y="95">0</text>
5164                                <text class="vu-label-mark" x="186" y="108">+2</text>
5165                                <text class="vu-label-mark vu-label-over" x="203" y="118">+4</text>
5166                            </g>
5167                        </svg>
5168                        <div class="vu-box__needle" data-needle="L"></div>
5169                        <div class="vu-box__label">L</div>
5170                    </div>
5171                </div>
5172                <div class="vu-center">
5173                    <div class="dp_ib_m track_name" data-amplitude-song-info="name"></div>
5174                    <span class="artist_name" data-amplitude-song-info="artist"></span>
5175                    <button type="button" class="expanded-cart-btn">Buy Now</button>
5176                </div>
5177                <div class="vu-box">
5178                    <div class="vu-box__dial" data-vu="R">
5179                        <div class="vu-box__bg"></div>
5180                        <svg class="vu-box__scale" viewBox="0 0 260 170" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
5181                            <g>
5182                                <path class="vu-arc" d="M24 118 Q130 36 236 118" />
5183                                <path class="vu-arc vu-arc--over" d="M24 118 Q130 36 236 118" pathLength="100" stroke-dasharray="22 100" stroke-dashoffset="-78" />
5184                                <line class="vu-center-line" x1="130" y1="154" x2="130" y2="47" />
5185
5186                                <line class="vu-tick" x1="36.72" y1="108.75" x2="29.69" y2="98.42" />
5187                                <line class="vu-tick" x1="53.68" y1="98.25" x2="47.60" y2="87.33" />
5188                                <line class="vu-tick" x1="70.64" y1="89.86" x2="65.67" y2="78.39" />
5189                                <line class="vu-tick" x1="87.60" y1="83.56" x2="83.90" y2="71.62" />
5190                                <line class="vu-tick" x1="104.56" y1="79.36" x2="102.28" y2="67.07" />
5191                                <line class="vu-tick" x1="121.52" y1="7
51917.26" x2="120.75" y2="64.79" />
5192                                <line class="vu-tick" x1="138.48" y1="77.26" x2="139.25" y2="64.79" />
5193                                <line class="vu-tick" x1="155.44" y1="79.36" x2="157.72" y2="67.07" />
5194                                <line class="vu-tick" x1="172.40" y1="83.56" x2="176.10" y2="71.62" />
5195                                <line class="vu-tick" x1="189.36" y1="89.86" x2="194.33" y2="78.39" />
5196                                <line class="vu-tick" x1="206.32" y1="98.25" x2="212.40" y2="87.33" />
5197                                <line class="vu-tick" x1="223.28" y1="108.75" x2="230.31" y2="98.42" />
5198
5199                                <line class="vu-tick vu-tick--red" x1="189.36" y1="89.86" x2="194.33" y2="78.39" />
5200                                <line class="vu-tick vu-tick--red" x1="206.32" y1="98.25" x2="212.40" y2="87.33" />
5201                                <line class="vu-tick vu-tick--red" x1="223.28" y1="108.75" x2="230.31" y2="98.42" />
5202
5203                                <line class="vu-tick-minor" x1="45.20" y1="103.24" x2="40.73" y2="96.01" />
5204                                <line class="vu-tick-minor" x1="62.16" y1="93.79" x2="58.39" y2="86.18" />
5205                                <line class="vu-tick-minor" x1="79.12" y1="86.45" x2="76.16" y2="78.48" />
5206                                <line class="vu-tick-minor" x1="96.08" y1="81.20" x2="94.04" y2="72.95" />
5207                                <line class="vu-tick-minor" x1="113.04" y1="78.05" x2="112.00" y2="69.61" />
5208                                <line class="vu-tick-minor" x1="130.00" y1="77.00" x2="130.00" y2="68.50" />
5209                                <line class="vu-tick-minor" x1="146.96" y1="78.05" x2="148.00" y2="69.61" />
5210                                <line class="vu-tick-minor" x1="163.92" y1="81.20" x2="165.96" y2="72.95" />
5211                                <line class="vu-tick-minor" x1="180.88" y1="86.45" x2="183.84" y2="78.48" />
5212                                <line class="vu-tick-minor" x1="197.84" y1="93.79" x2="201.61" y2="86.18" />
5213                                <line class="vu-tick-minor" x1="214.80" y1="103.24" x2="219.27" y2="96.01" />
5214
5215                                <text class="vu-label-scale-title" x="130" y="132">VU</text>
5216                                <text class="vu-label-watts" x="34" y="70">5.0</text>
5217                                <text class="vu-label-watts" x="58" y="54">50</text>
5218                                <text class="vu-label-watts" x="92" y="44">100</text>
5219                                <text class="vu-label-watts" x="130" y="40">150</text>
5220                                <text class="vu-label-watts" x="166" y="44">200</text>
5221                                <text class="vu-label-watts" x="202" y="54">250</text>
5222                                <text class="vu-label-watts vu-label-over" x="224" y="68">500</text>
5223
5224                                <text class="vu-label-scale-subtitle" x="130" y="86">LEVEL</text>
5225                                <text class="vu-label-mark" x="34" y="129">-</text>
5226                                <text class="vu-label-mark" x="52" y="117">20</text>
5227                                <text class="vu-label-mark" x="70" y="108">10</text>
5228                                <text class="vu-label-mark" x="88" y="101">7</text>
5229                                <text class="vu-label-mark" x="106" y="95">5</text>
5230                                <text class="vu-label-mark" x="123" y="91">3</text>
5231                                <text class="vu-label-mark" x="154" y="95">0</text>
5232                                <text class="vu-label-mark" x="186" y="108">+2</text>
5233                                <text class="vu-label-mark vu-label-over" x="203" y="118">+4</text>
5234                            </g>
5235                        </svg>
5236                        <div class="vu-box__needle" data-needle="R"></div>
5237                        <div class="vu-box__label">R</div>
5238                    </div>
5239                </div>
5240            </div>
5241            <div class="wm-fusion-strip" data-wm-fusion-root>
5242                <div class="wm-fusion-panel" data-wm-fusion-panel>
5243                    <div class="wm-fusion-brand" aria-hidden="true">
5244                        <span class="wm-fusion-brand__mark">FUSION</span>
5245                        <span class="wm-fusion-brand__sub">MASTER FX</span>
5246                        <span class="wm-fusion-status" data-wm-fusion-status>OFF</span>
5247                    </div>
5248                    <div class="wm-fusion-controls">
5249                        <label class="wm-fusion-control" data-wm-fusion-control="drive">
5250                            <span class="wm-fusion-label">Drive</span>
5251                            <span class="wm-fusion-knob-wrap">
5252                                <input type="range" min="0" max="100" step="10" value="0" data-wm-fusion-param="drive" aria-label="Drive">
5253                                <span class="wm-fusion-knob"></span>
5254                            </span>
5255                            <span class="wm-fusion-value" data-wm-fusion-value="drive">0</span>
5256                        </label>
5257                        <label class="wm-fusion-control" data-wm-fusion-control="low">
5258                            <span class="wm-fusion-label">Low</span>
5259                            <span class="wm-fusion-knob-wrap">
5260                                <input type="range" min="-12" max="12" step="1" value="0" data-wm-fusion-param="low" aria-label="Low EQ">
5261                                <span class="wm-fusion-knob"></span>
5262                            </span>
5263                            <span class="wm-fusion-value" data-wm-fusion-value="low">0 dB</span>
5264                        </label>
5265                        <label class="wm-fusion-control" data-wm-fusion-control="mid">
5266                            <span class="wm-fusion-label">Mid</span>
5267                            <span class="wm-fusion-knob-wrap">
5268                                <input type="range" min="-12" max="12" step="1" value="0" data-wm-fusion-param="mid" aria-label="Mid EQ">
5269                                <span class="wm-fusion-knob"></span>
5270                            </span>
5271                            <span class="wm-fusion-value" data-wm-fusion-value="mid">0 dB</span>
5272                        </label>
5273                        <label class="wm-fusion-control" data-wm-fusion-control="high">
5274                            <span class="wm-fusion-label">High</span>
5275                            <span class="wm-fusion-knob-wrap">
5276                                <input type="range" min="-12" max="12" step="1" value="0" data-wm-fusion-param="high" aria-label="High EQ">
5277                                <span class="wm-fusion-knob"></span>
5278                            </span>
5279                            <span class="wm-fusion-value" data-wm-fusion-value="high">0 dB</span>
5280                        </label>
5281                        <div class="wm-fusion-control" data-wm-fusion-control="lim">
5282                            <span class="wm-fusion-label">Lim</span>
5283                            <button type="button" class="wm-fusion-limiter-button" data-wm-fusion-limiter aria-pressed="false" aria-label="Limiter -14 LUFS off">
5284                                <span data-wm-fusion-limiter-state>IN</span>
5285                            </button>
5286                            <span class="wm-fusion-value" data-wm-fusion-value="lim">-14lufs</span>
5287                        </div>
5288                        <label class="wm-fusion-control" data-wm-fusion-control="width">
5289                            <span class="wm-fusion-label">Width</span>
5290                            <span class="wm-fusion-knob-wrap">
5291                                <input type="range" min="0" max="100" step="5" value="50" data-wm-fusion-param="width" aria-label="Stereo width">
5292                                <span class="wm-fusion-knob"></span>
5293                            </span>
5294                            <span class="wm-fusion-value" data-wm-fusion-value="width">100%</span>
5295                        </label>
5296                        <label class="wm-fusion-control" data-wm-fusion-control="output">
5297                            <span class="wm-fusion-label">Out</span>
5298                            <span class="wm-fusion-knob-wrap">
5299                                <input type="range" min="-12" max="6" step="1" value="
52990" data-wm-fusion-param="output" aria-label="Output trim">
5300                                <span class="wm-fusion-knob"></span>
5301                            </span>
5302                            <span class="wm-fusion-value" data-wm-fusion-value="output">0 dB</span>
5303                        </label>
5304                    </div>
5305                    <div class="wm-fusion-actions" aria-label="Fusion FX switches">
5306                        <button type="button" class="wm-fusion-switch wm-fusion-switch--toggle" data-wm-fusion-toggle aria-pressed="false" aria-label="FX on off">
5307                            <span class="wm-fusion-switch__label wm-fusion-switch__label--top">ON</span>
5308                            <span class="wm-fusion-switch__body" aria-hidden="true">
5309                                <span class="wm-fusion-switch__lever"></span>
5310                            </span>
5311                        </button>
5312                        <button type="button" class="wm-fusion-switch wm-fusion-switch--reset" data-wm-fusion-reset aria-pressed="false" aria-label="Reset FX">
5313                            <span class="wm-fusion-reset-box" aria-hidden="true">RESET</span>
5314                            <span class="wm-fusion-switch__label wm-fusion-switch__label--top">RST</span>
5315                        </button>
5316                    </div>
5317                </div>
5318            </div>
5319            <div class="player-intro-credits-container is-empty">
5320                <div id="wm-expanded-intro-credits" class="player-intro-credits is-empty">
5321                    <div class="wm-intro-credits__viewport" aria-live="polite">
5322                        <div class="wm-intro-credits__crawl"></div>
5323                    </div>
5324                </div>
5325            </div>
5326            </details>
5327        </div>
5328
5329    </div>
5330</div>
5331
5332
5333<!-- Amplitude Script-->
5334
5335
5336<script src="/static/js_v2/slick.min.js" defer></script>
vendor: 1 bytes, line 5336
5336
5337<script src="/static/js_v2/nouislider.js" defer></script>
vendor: 1 bytes, line 5337
5337
5338<script src="/static/js_v2/init.js?v=20260522-faq-accordion" defer></script>
5338
5339
5340<script>
5341    const LANGUAGE = 'us';
5342    window.WM_FOOTER_USD_SELL = 1325.4;
5343    window.WM_FOOTER_USE_PAYPAL = true;
5344    window.WM_FOOTER_LOGIN_REQUIRED = true;
5345    window.WM_FOOTER_TEXT_CART = "Cart";
5346    window.WM_FOOTER_TEXT_BUY = "Buy";
5347    window.WM_FOOTER_PLAYER_BOOTSTRAP = {"musicOption":{"mp3":"1","wav":"2","unlimited":"3","exclusive":"4"},"text":{"serviceMusic29":"Commercial use","serviceMusic30":"Album release allowed","playerReleaseTitle":"Album release by license","playerReleaseAllowed":"Release allowed","playerReleaseDenied":"Release not allowed","playerReleaseUnknown":"Confirmation needed","playerReleaseNote":"Release permission follows the terms of the license you purchase.","serviceMusic31":"When registering credits/copyright, list the seller as composer/arranger.","serviceMusic32":"When an Exclusive license is sold, the beat becomes exclusive to the buyer and is removed from sale.","serviceMusicAiNote":"\u003Cspan class=\u0022license-notice-ai-keyword\u0022\u003EAI audio sales prohibited\u003C/span\u003E — sellers are responsible for any related issues.","serviceMusicAiNoteKey":"AI audio sales prohibited","serviceMusicAiNoteRest":"sellers are responsible for any related issues.","serviceMusicSamplingNote":"\u003Cspan class=\u0022license-notice-sampling-keyword\u0022\u003EUnauthorized sampling sales prohibited\u003C/span\u003E - sellers are responsible for any related issues.","serviceMusicSamplingNoteKey":"Unauthorized sampling sales prohibited","serviceMusicSamplingNoteRest":"sellers are responsible for any related issues.","serviceMusic33":"Commercial use includes YouTube, SoundCloud, mixtapes, performances and similar uses.","serviceMusic34":"Non-exclusive licenses remain available to other buyers after purchase.","soldOutTitle":"SOLD OUT","soldOutMessage":"This item is sold out.","alertLogin":"Sign in"},"plays":[],"isAuth":false,"memberId":0};
5348</script>
5348
5349
5350<style>
5351    .license-notice-sampling {
5352        color: rgba(255, 255, 255, 0.86) !important;
5353        font-weight: 600;
5354        line-height: 1.55;
5355    }
5356
5357    .license-notice-sampling-keyword {
5358        color: #22d3ee !important;
5359        font-weight: 800;
5360    }
5361</style>
5362
5363<link rel="stylesheet" href="/static/css/player-expanded.css?v=20260913-panel-state-focus" />
5364
5365<script src="/static/js/amplitude.js"></script>
vendor: 1 bytes, line 5365
5365
5366<script>
5367    (function() {
5368        if (!window.Amplitude || !Amplitude.getActiveSongMetadata) {
5369            return;
5370        }
5371
5372        var getActiveSongMetadata = Amplitude.getActiveSongMetadata;
5373        Amplitude.getActiveSongMetadata = function() {
5374            var metadata = getActiveSongMetadata.apply(this, arguments) || {};
5375            if (typeof metadata.link === 'undefined' || metadata.link === null) {
5376                metadata.link = '';
5377            }
5378            if (typeof metadata.index === 'undefined') {
5379                metadata.index = null;
5380            }
5381            return metadata;
5382        };
5383    })();
5384</script>
vendor: 1 bytes, line 5384
5384
5385<script src="/static/js/ladio.ux.js?v=20260909-expanded-player"></script>
5385
5386<!-- (삭제) /static/js/visualizations/frequencyanalyzer.js — 사용 안 함 -->
5387<script src="/static/js/visualizations/michaelbromley.js"></script>
5387
5388
5389
5390<script src="/static/js/footer-player.js?v=20260912-mobile-followup"></script>
5390
5391
5392
5393<script>
5394    //언어셋 변경 스크립트 입니다.
5395    //모바일 아래의 selectbox 를 사용합니다
5396    //#SelectLang(일반), #SelectLangM모바일()
5397    
5398        $("#NowSetLang").html("ENG");
5399        $("#lilanus").css("color", "yellow");
5400        $("#NowSetLangM").html("ENG");
5401        $("#lilanusM").css("color", "yellow");
5402
5403    
5404    //언어선택 메뉴 SHOW
5405    function ShowLanguage(flag) {
5406        if (flag == 0) {
5407            $("#DivLangMenu").fadeIn(50);
5408        } else {
5409            $("#DivLangMenu").fadeOut(50);
5410        }
5411    }
5412
5413    function ToggleLanguage() {
5414        $("#DivLangMenuM").toggle(50);
5415    }
5416
5417    //언어변경
5418    function LanguageSelect(SetLan) {
5419        var targetLang = String(SetLan || '').toLowerCase();
5420        var supported = {
5421            us: true,
5422            ko: true,
5423            jp: true,
5424            cn: true
5425        };
5426        if (!supported[targetLang]) {
5427            targetLang = 'us';
5428        }
5429
5430        var url = null;
5431        try {
5432            url = new URL(window.location.href);
5433        } catch (e) {
5434            var strURLParam = window.location.href.split("?");
5435            if (strURLParam.length == 1) {
5436                location.href = strURLParam[0] + "?lang=" + targetLang;
5437            } else {
5438                var strNewParam = RemoveLangParam(strURLParam[1]);
5439                location.href = strURLParam[0] + (strNewParam ? ("?" + strNewParam + "&lang=" + targetLang) : ("?lang=" + targetLang));
5440            }
5441            return;
5442        }
5443
5444        var pathParts = url.pathname.split('/');
5445        if (pathParts.length > 1 && supported[String(pathParts[1] || '').toLowerCase()]) {
5446            pathParts[1] = targetLang;
5447            url.pathname = pathParts.join('/') || '/';
5448            url.searchParams.delete('lang');
5449            location.href = url.toString();
5450            return;
5451        }
5452
5453        if (window.wmIsLocalizablePath && window.wmIsLocalizablePath(url.pathname)) {
5454            url.pathname = '/' + targetLang + (url.pathname === '/' ? '' : url.pathname);
5455            url.searchParams.delete('lang');
5456            location.href = url.toString();
5457            return;
5458        }
5459
5460        if (window.WM_HREFLANG_MAP && typeof window.WM_HREFLANG_MAP === 'object') {
5461            var switchUrl = window.WM_HREFLANG_MAP[targetLang];
5462            if (typeof switchUrl === 'string' && switchUrl !== '') {
5463                location.href = switchUrl;
5464                return;
5465            }
5466        }
5467
5468        url.searchParams.set('lang', targetLang);
5469        location.href = url.toString();
5470    }
5471
5472    function RemoveLangParam(ParamStrang) {
5473        var ReturnParam = String(ParamStrang || '');
5474        ReturnParam = ReturnParam.replace(/(^|&)lang=(ko|us|cn|jp)(&|$)/g, '$1');
5475        ReturnParam = ReturnParam.replace(/^&+|&+$/g, '');
5476        ReturnParam = ReturnParam.replace(/&&+/g, '&');
5477        return ReturnParam;
5478    }
5479
5480    if (window.WM_LANG_PREFIX && window.WM_HREFLANG_MAP && typeof window.WM_HREFLANG_MAP === 'object') {
5481        var currentLangSelect = document.querySelector('select[name="lang"]');
5482        if (currentLangSelect && currentLangSelect.value && window.WM_HREFLANG_MAP[currentLangSelect.value]) {
5483            currentLangSelect.value = String(currentLangSelect.value).toLowerCase();
5484        }
5485    }
5486</script>
5486
5487</body>
5488
5489</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.