/* ===================================================================
   CUE (예전 '다운로드함') · LED 광고 띠 — 2026-11-09 작업 04 요청 15 · 16 · 17, CUE 세션
   사용자가 시안 tools/mockups/cue.html을 보고 "추천대로 만들어 줘": 아이콘 A 'CDJ CUE 단추' · 광고 띠 A 'LED 표시창' · 메뉴 아이콘 그라데이션은 그대로
   theme/basic/head.php가 모든 페이지에서 읽어요. CUE 화면 자체의 모양은 sub/css/playlist.css
   - CUE 주황 = CDJ CUE 단추 불빛 (담은 곡 · 받을 곡), 받음 초록 = CDJ PLAY 단추 불빛 (받은 곡). 사이트 분홍은 그대로예요
=================================================================== */
:root{
  --cue:#ffa51f; --cue-t:#ffb547; --cue-soft:rgba(255,165,31,.12); --cue-line:rgba(255,165,31,.38); --cue-ink:#141210;
  --cue-glow:0 0 0 3px rgba(255,165,31,.18),0 0 16px rgba(255,165,31,.42);
  --got:#22c55e; --got-t:#4ade80; --got-soft:rgba(34,197,94,.12); --got-line:rgba(34,197,94,.36);
}
[data-theme="light"]{
  --cue:#f59e0b; --cue-t:#b45309; --cue-soft:#fff4dc; --cue-line:#f3cf86; --cue-ink:#1d1b19;
  --cue-glow:0 0 0 3px rgba(245,158,11,.22),0 0 14px rgba(245,158,11,.32);
  --got:#16a34a; --got-t:#15803d; --got-soft:#e8f6ed; --got-line:#b9e2c6;
}

/* ---------- 광고 띠 = LED 표시창 (로그인 칸 아래, 글은 관리자 > 텍스트 광고 관리 g5_links) ----------
   CDJ 화면처럼 검은 화면에 주황 LED 글자가 천천히 흘러가요. 마우스를 올리거나 칸 안으로 옮겨 가면 멈춰요.
   흐르는 시간은 글 길이로 head.php가 정해요(--edm-led-dur). 움직임을 줄이도록 설정한 기기에서는 첫 광고에 멈춰 있어요 */
.edm-led{position:relative; display:flex; align-items:center; gap:8px; height:40px; margin-top:10px; padding:0 10px 0 9px; border-radius:10px; background:#0c0b09; overflow:hidden;
  box-shadow:inset 0 0 0 1px #2a2722, inset 0 3px 8px rgba(0,0,0,.7)}
[data-theme="light"] .edm-led{box-shadow:0 0 0 3px #e6e1d8, 0 0 0 4px #cfc8bc, inset 0 3px 8px rgba(0,0,0,.7)}
.edm-led-pl{flex:none; width:0; height:0; border-left:7px solid #ffb547; border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; filter:drop-shadow(0 0 4px rgba(255,170,40,.8)); animation:edm-led-blink 1.6s steps(2) infinite}
@keyframes edm-led-blink{50%{opacity:.25}}
.edm-led-scr{position:relative; flex:1; min-width:0; height:24px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent); mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
.edm-led-tk{position:absolute; left:0; top:0; display:flex; white-space:nowrap; animation:edm-led-tk var(--edm-led-dur,24s) linear infinite; will-change:transform}
.edm-led:hover .edm-led-tk,.edm-led:focus-within .edm-led-tk{animation-play-state:paused}
@keyframes edm-led-tk{to{transform:translateX(-50%)}}
.va-membership .edm-led-tk a,.edm-led-tk a{flex:none; padding-right:18px; font-size:14px; font-weight:800; line-height:24px; letter-spacing:.4px; color:#ffb547 !important; text-decoration:none !important;
  text-shadow:0 0 7px rgba(255,165,40,.75),0 0 1px #ffd28a; background:none !important; -webkit-text-fill-color:#ffb547}
.edm-led-tk a::after{content:"\25C6"; margin-left:18px; font-size:8px; vertical-align:2px; opacity:.55}
.edm-led-tk a:hover,.edm-led-tk a:focus-visible{color:#ffd28a !important; -webkit-text-fill-color:#ffd28a; outline:none}
/* 가는 가로줄 = 화면 칸 (글자가 안 깨지게 점 무늬 대신) */
.edm-led-scr::after{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(12,11,9,0) 0 2px, rgba(12,11,9,.38) 2px 3px)}
.edm-led-mt{flex:none; display:flex; gap:2px; align-items:flex-end; height:14px}
.edm-led-mt i{width:3px; height:100%; border-radius:1px; background:#ffb547; transform-origin:bottom; animation:edm-led-lv .7s ease-in-out infinite alternate; box-shadow:0 0 4px rgba(255,170,40,.6)}
.edm-led-mt i:nth-child(2){animation-duration:.53s} .edm-led-mt i:nth-child(3){animation-duration:.9s} .edm-led-mt i:nth-child(4){animation-duration:.61s}
@keyframes edm-led-lv{from{transform:scaleY(.25)} to{transform:scaleY(1)}}
@media (max-width:1023px){   /* ☰ 메뉴 안 로그인 칸 (얇게) */
  .va-membership .edm-led{height:30px; margin-top:7px; border-radius:9px}
  .edm-led-scr{height:22px}
  .va-membership .edm-led-tk a,.edm-led-tk a{font-size:12.5px; line-height:22px}
}
@media (prefers-reduced-motion:reduce){ .edm-led-tk,.edm-led-pl,.edm-led-mt i{animation:none} }
/* ---------- 광고 띠 새 모양 (2026-11-12 작업 06 요청 12 "너무 검은색 안 어울려 · 글자가 안 보여" → 사용자가 시안 A '차분한 띠'를 고름) ----------
   로그인 칸과 같은 바탕 + 진한 글자, 점 · ◆ · 막대만 사이트 분홍. 가로 줄무늬 · 번지는 빛은 빼서 글자를 또렷하게 (위 LED 규칙을 덮어요) */
.edm-led{background:#1b1b1f; box-shadow:none; border:1px solid #34343a}
.edm-led .edm-led-scr::after{display:none}
.va-membership .edm-led-tk a,.edm-led-tk a{color:#ededed !important; -webkit-text-fill-color:#ededed; text-shadow:none; font-size:13.5px; letter-spacing:0}
.edm-led-tk a::after{color:#ff2e63; opacity:.8}
.edm-led-tk a:hover,.edm-led-tk a:focus-visible{color:#fff !important; -webkit-text-fill-color:#fff; text-decoration:underline !important}
.edm-led-pl{border-left-color:#ff2e63; filter:none; animation:none}
.edm-led-mt i{background:#ff2e63; box-shadow:none}
[data-theme="light"] .edm-led{background:var(--lt-fill); border-color:var(--lt-border); box-shadow:none}
[data-theme="light"] .va-membership .edm-led-tk a,[data-theme="light"] .edm-led-tk a{color:var(--lt-text) !important; -webkit-text-fill-color:var(--lt-text)}
[data-theme="light"] .edm-led-tk a::after{color:var(--lt-accent)}
[data-theme="light"] .edm-led-tk a:hover,[data-theme="light"] .edm-led-tk a:focus-visible{color:var(--lt-accent-text) !important; -webkit-text-fill-color:var(--lt-accent-text)}
[data-theme="light"] .edm-led-pl{border-left-color:var(--lt-accent)}
[data-theme="light"] .edm-led-mt i{background:var(--lt-accent)}
@media (max-width:1023px){ .va-membership .edm-led-tk a,.edm-led-tk a{font-size:12.5px} }


/* ---------- 왼쪽 메뉴 CUE 아이콘 (va_menu.lib.php, 메뉴 아이콘 값 'edm-cue') ----------
   평소엔 다른 메뉴 아이콘처럼(화이트 = 핑크 → 보라 그라데이션, 다크 = 흰색) 테두리, CUE 페이지에 있으면 주황으로 꽉 차요 */
.va-nav a i.edm-mi{display:inline-grid; place-items:center; width:20px; height:20px; font-size:20px; vertical-align:middle; background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:inherit !important; -webkit-text-fill-color:currentColor}
.edm-mi svg{display:block; width:20px; height:20px; overflow:visible}
.edm-mi svg .o{fill:none; stroke:var(--edm-mi-st,currentColor); stroke-width:1.7}
.edm-mi svg .l{fill:none; stroke:var(--edm-mi-st,currentColor); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
[data-theme="light"] .edm-mi svg{--edm-mi-st:url(#edmCueG)}
.va-nav a.active i.edm-mi svg .o{fill:var(--cue); stroke:var(--cue)}
.va-nav a.active i.edm-mi svg .l{stroke:var(--cue-ink)}
.va-nav a.active i.edm-mi{filter:drop-shadow(0 0 5px rgba(255,165,31,.45))}

/* ---------- 곡 목록 · 메인 · DJ Pick의 CUE 단추: 담으면 주황 불 (예전 분홍 대신) ---------- */
.tl-ic.tl-ic-pick[aria-pressed="true"]{color:var(--cue)}
html .tl-ic.tl-ic-pick[aria-pressed="true"] .tl-svg{filter:drop-shadow(0 0 5px rgba(255,165,31,.55))}
html .tl-menu [data-m="pick"][aria-pressed="true"] .tl-svg,html .tl-sheet-list [data-m="pick"][aria-pressed="true"] .tl-svg{color:var(--cue)}   /* ⋮ 메뉴 · 휴대폰 판 */
html .mm .mm-act.on{color:var(--cue)}
html .mm .mm-pk1 .mm-act.on{color:var(--cue)}
html .wp-btn.c.on{background:var(--cue); color:var(--cue-ink); box-shadow:none}   /* DJ Pick 매거진 1위 큰 카드 (sub/weekly_pick.php) */
/* DJ Pick 2~50위 카드 · 줄 · 휴대폰 시상대의 작은 담기 단추(weekly_pick.php $acts, 규칙은 weekly_pick_mag.css 111 · 112줄 — html 한 단계 더 구체적으로).
   켜진 단추에 마우스를 올려도 켜짐 색 그대로이게 hover를 먼저 적어요 (DJ Pick 세션이 알려 줬어요, 2026-11-10) */
html .wp-act.cart:hover{border-color:var(--cue-line); color:var(--cue-t)}
html .wp-act.cart.on{background:var(--cue); border-color:var(--cue); color:var(--cue-ink)}