/* Hallmark · component: compact mechanical miniature · tone: refined steampunk · palette: RA0 root tokens · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass · mobile: pass */

.mb-topview {
    --mb-case: color-mix(in srgb, var(--primary-color) 72%, var(--primary-color));
    --mb-case-raised: color-mix(in srgb, var(--secondary-color) 62%, var(--primary-color));
    --mb-edge: color-mix(in srgb, var(--primary-color) 70%, var(--card-bg-color));
    --mb-cavity: color-mix(in srgb, var(--accent-color) 90%, var(--card-bg-color));
    --mb-metal: color-mix(in srgb, var(--secondary-color) 62%, var(--primary-color));
    --mb-metal-light: color-mix(in srgb, var(--secondary-color) 88%, var(--accent-color));
    --mb-ink: var(--content-font-color);
    --mb-paper: color-mix(in srgb, var(--accent-color) 92%, var(--card-bg-color));
    --mb-paper-line: color-mix(in srgb, var(--secondary-color) 34%, var(--primary-color));
    --mb-paper-ink: var(--card-bg-color);
    --mb-frost: color-mix(in srgb, var(--card-bg-color) 80%, transparent);
    --mb-shadow: color-mix(in srgb, var(--container-bg-color) 72%, transparent);
    position: fixed;
    right: calc(var(--spacing-lg) + 20px);
    top: calc(var(--spacing-lg) + 50px);
    bottom: auto;
    z-index: 9999;
    width: 226px;
    height: 148px;
    color: var(--mb-ink);
    font-family: var(--content-font-family);
    opacity: 0;
    pointer-events: auto;
    transform: translateY(48px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.mb-topview.show { opacity: 1; transform: translateY(0); }
.mb-topview *, .mb-topview *::before, .mb-topview *::after { box-sizing: border-box; }
.mb-topview button, .mb-topview input { font: inherit; }
.mb-topview button:focus-visible, .mb-topview input:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }
.mb-topview button:disabled { opacity: .38; cursor: not-allowed; }
.mb-topview .player-content { position: relative; width: 100%; height: 100%; }

.mb-topview__box {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 226px;
    height: 148px;
    padding: 9px;
    border: 1px solid var(--mb-edge);
    border-radius: 3px;
    background:
        linear-gradient(112deg, color-mix(in srgb, var(--secondary-color) 8%, transparent), transparent 24% 69%, color-mix(in srgb, var(--container-bg-color) 24%, transparent)),
        radial-gradient(circle at 18% 11%, color-mix(in srgb, var(--accent-color) 22%, transparent), transparent 38%),
        var(--mb-case);
    box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 22%, transparent), inset 0 0 0 1px var(--mb-case-raised), 4px 5px 0 var(--mb-shadow);
}

.mb-topview__box::before, .mb-topview__box::after { content: ""; position: absolute; background: var(--mb-edge); }
.mb-topview__box::before { top: 8px; bottom: 8px; left: -4px; width: 3px; }
.mb-topview__box::after { right: 8px; bottom: -4px; left: 8px; height: 3px; }
.mb-corner { position: absolute; z-index: 6; width: 12px; height: 2px; background: var(--mb-edge); }
.mb-corner--tl { top: -4px; left: 12px; }
.mb-corner--tr { top: -4px; right: 12px; }
.mb-corner--bl { bottom: -4px; left: 12px; }
.mb-corner--br { right: 12px; bottom: -4px; }

.mb-mechanism {
    position: relative;
    height: 102px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mb-metal) 55%, var(--card-bg-color));
    border-radius: 2px;
    background: linear-gradient(142deg, color-mix(in srgb, var(--secondary-color) 7%, transparent), transparent 28% 72%, color-mix(in srgb, var(--primary-color) 12%, transparent)), color-mix(in srgb, var(--mb-cavity) 88%, transparent);
    box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 16%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--card-border-color) 54%, transparent), inset 0 -14px 24px color-mix(in srgb, var(--container-bg-color) 38%, transparent);
    backdrop-filter: blur(2px) saturate(1.08);
}

.mb-screw { position: absolute; z-index: 8; width: 5px; height: 5px; border: 0; border-radius: 50%; background: var(--mb-metal-light); box-shadow: inset 0 0 0 1px var(--mb-edge); }
.mb-screw::after { content: ""; position: absolute; top: 2px; left: 1px; width: 3px; height: 1px; background: var(--mb-edge); transform: rotate(-20deg); }
.mb-screw--a { top: 8px; left: 8px; }.mb-screw--b { top: 8px; right: 8px; }.mb-screw--c { bottom: 8px; left: 8px; }.mb-screw--d { right: 8px; bottom: 8px; }

.mb-gear {
    position: absolute;
    z-index: 3;
    border: 1px solid color-mix(in srgb, var(--mb-metal-light) 64%, var(--mb-edge));
    border-radius: 50%;
    background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--secondary-color) 46%, transparent) 0 3%, transparent 18%), repeating-conic-gradient(from 3deg, var(--mb-metal) 0 4deg, var(--mb-edge) 4deg 9deg);
    box-shadow: inset 0 0 7px color-mix(in srgb, var(--container-bg-color) 45%, transparent), 0 1px 2px var(--mb-shadow);
}
.mb-gear i { position: absolute; inset: 29%; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 72%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--mb-cavity) 78%, transparent); box-shadow: inset 1px 1px color-mix(in srgb, var(--secondary-color) 14%, transparent); }
.mb-gear--main { top: 16px; left: 16px; width: 48px; height: 48px; }
.mb-gear--main b { position: absolute; top: calc(50% - .5px); left: 14%; width: 72%; height: 1px; background: color-mix(in srgb, var(--mb-metal-light) 70%, transparent); }

.mb-topview__settings { position: absolute; top: 67px; left: 66px; z-index: 20; display: flex; align-items: center; gap: 4px; }
.mb-topview__settings-trigger { position: relative; z-index: 2; display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; padding: 0; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 64%, var(--mb-edge)); border-radius: 50%; background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--secondary-color) 46%, transparent) 0 3%, transparent 18%), repeating-conic-gradient(from 3deg, var(--mb-metal) 0 4deg, var(--mb-edge) 4deg 9deg); color: var(--mb-metal-light); box-shadow: inset 0 0 7px color-mix(in srgb, var(--container-bg-color) 45%, transparent), 0 1px 2px var(--mb-shadow); cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); }
.mb-topview__settings-trigger::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.mb-topview__settings-trigger i { font-size: 9px; line-height: 1; text-shadow: 0 1px var(--mb-edge); transition: transform var(--transition-base); }
.mb-topview__settings-trigger.is-open i { transform: rotate(45deg); }
.mb-topview__settings-trigger:active { transform: scale(.94); }
.mb-topview__settings-panel { z-index: 3; display: flex; align-items: center; width: 60px; height: 30px; padding: 1px 2px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 28%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--mb-cavity) 88%, transparent); box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 12%, transparent), 0 3px 8px var(--mb-shadow); opacity: 0; pointer-events: none; transform: translateX(-7px) scale(.88); transform-origin: left center; transition: opacity var(--transition-fast), transform var(--transition-base); backdrop-filter: blur(7px) saturate(1.08); }
.mb-topview__settings-panel.is-open { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.mb-topview__settings-panel .mb-control { flex: 0 0 27px; width: 27px; height: 27px; color: var(--content-font-color); }
.mb-topview__settings-panel .mb-control i { font-size: 8px; }
.mb-topview__settings-panel .mb-control.active { color: var(--mb-metal-light); }

.mb-drum { position: absolute; top: 16px; left: 78px; z-index: 3; width: 83px; height: 33px; overflow: hidden; border-inline: 5px solid var(--mb-edge); background: linear-gradient(180deg, var(--mb-edge), var(--mb-metal-light) 32%, var(--mb-metal) 58%, var(--mb-edge)); box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 74%, transparent), inset 0 -1px var(--mb-edge), 0 2px 4px var(--mb-shadow); opacity: .9; }

.mb-comb { position: absolute; right: 14px; bottom: 10px; z-index: 3; display: flex; align-items: flex-start; gap: 3px; width: 76px; height: 37px; padding: 4px 5px 0; border-top: 2px solid color-mix(in srgb, var(--mb-metal-light) 68%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--card-bg-color) 86%, transparent), color-mix(in srgb, var(--primary-color) 31%, transparent)); box-shadow: inset 0 1px color-mix(in srgb, var(--secondary-color) 16%, transparent); }
.mb-comb i { flex: 0 0 1px; width: 1px; height: 24px; background: linear-gradient(90deg, var(--content-font-color), var(--secondary-color)); opacity: .78; transform-origin: top; }
.mb-comb i:nth-child(2n) { height: 30px; opacity: .92; }

.mb-front-rail { display: flex; align-items: center; gap: 1px; height: 27px; padding-left: 1px; color: var(--mb-metal-light); }
.mb-transport { display: flex; align-items: center; justify-content: center; margin-left: auto; }
.mb-control { position: relative; display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--secondary-color); cursor: pointer; transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast); }
.mb-control i { font-size: 8px; line-height: 1; }
.mb-control--play i { font-size: 9px; }
.mb-rail-list { flex: 0 0 22px; align-items: center; justify-content: center; width: 22px; color: var(--mb-metal-light); }.mb-rail-list i { font-size: 8px; }
.mb-corner-minimize { position: absolute; top: 12px; right: 12px; z-index: 14; display: grid; place-items: center; width: 21px; height: 21px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--card-bg-color) 38%, transparent); color: var(--mb-metal-light); text-shadow: 0 1px 1px var(--card-bg-color); cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); }.mb-corner-minimize i { font-size: 7px; }
.mb-control:active { transform: scale(.94); }.mb-control:disabled { opacity: .38; cursor: not-allowed; }.mb-control.active { color: var(--accent-color); }
.mb-topview .repeat-one-badge { position: absolute; top: 1px; right: 1px; font-size: 7px; line-height: 1; }
.mb-front-rail .mb-track { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--mb-metal-light); font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .02em; text-align: left; text-overflow: clip; text-shadow: 0 1px 1px var(--card-bg-color); white-space: nowrap; }

/*
 * 긴 제목은 레이아웃을 다시 계산하는 text-indent 대신
 * 별도 span을 transform으로 이동시켜 부드럽게 표시합니다.
 */
.mb-front-rail .mb-track .mb-track-marquee-text {
    display: inline-block;
    white-space: nowrap;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.mb-front-rail .mb-track.is-marquee .mb-track-marquee-text {
    animation: mb-track-marquee var(--mb-marquee-duration, 8s) linear infinite alternate;
}

@keyframes mb-track-marquee {
    0%, 14% {
        transform: translate3d(0, 0, 0);
    }
    86%, 100% {
        transform: translate3d(var(--mb-marquee-offset, 0px), 0, 0);
    }
}

.mb-topview .playlist-container { position: absolute; right: calc(100% + 12px); bottom: 10px; z-index: 30; width: 170px; max-height: 148px; overflow-y: auto; padding: 7px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 38%, transparent); border-radius: 8px; background: var(--mb-frost); color: var(--content-font-color); box-shadow: 5px 7px 0 color-mix(in srgb, var(--container-bg-color) 44%, transparent); backdrop-filter: blur(12px); }
.mb-topview .playlist { margin: 0; padding: 0; list-style: none; }
.mb-topview .playlist li { overflow: hidden; padding: 6px 7px; border-radius: 4px; color: var(--content-font-color); font-size: 10px; line-height: 1.25; text-overflow: clip; white-space: nowrap; cursor: pointer; }
.mb-topview .playlist li .mb-playlist-marquee-text {
    display: inline-block;
    white-space: nowrap;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* 재생목록도 실제로 잘리는 제목만 부드럽게 좌우로 흐릅니다. */
.mb-topview .playlist li.is-marquee .mb-playlist-marquee-text {
    animation: mb-playlist-marquee var(--mb-playlist-marquee-duration, 8s) linear infinite alternate;
}

@keyframes mb-playlist-marquee {
    0%, 14% {
        transform: translate3d(0, 0, 0);
    }
    86%, 100% {
        transform: translate3d(var(--mb-playlist-marquee-offset, 0px), 0, 0);
    }
}
.mb-topview .playlist li:hover { color: var(--secondary-color); }.mb-topview .playlist li.current { background: color-mix(in srgb, var(--primary-color) 78%, transparent); color: var(--secondary-color); }
.mb-topview .volume-control {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
}
.mb-topview .volume-popup { position: absolute; right: -2px; bottom: calc(100% + 7px); z-index: 40; display: none; width: 112px; padding: 8px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 30%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--mb-cavity) 94%, transparent); box-shadow: 2px 3px 7px var(--mb-shadow); backdrop-filter: blur(10px); }.mb-topview__settings-panel.is-open .volume-popup {display: block;}
.mb-topview .volume-slider { display: block; width: 96px; max-width: none; margin: 0; accent-color: var(--primary-color); cursor: pointer; }

.mb-topview.playing .mb-gear--main { animation: mb-rotate 6s linear infinite; }.mb-topview.playing .mb-comb i:nth-child(3n + 1) { animation: mb-tine 420ms ease-in-out infinite alternate; }

.mb-topview.minimized { width: 48px; height: 48px; border: 1px solid var(--mb-edge); border-radius: 8px; background: var(--mb-paper); box-shadow: 3px 4px 0 var(--mb-shadow); cursor: pointer; }
.mb-topview.minimized .player-content { display: none; }.mb-topview .minimized-overlay { display: none; }.mb-topview.minimized .minimized-overlay { position: absolute; inset: 0; z-index: 3; display: block; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mb-topview.minimized::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 64%, var(--mb-edge)); border-radius: 50%; background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--secondary-color) 46%, transparent) 0 3%, transparent 18%), repeating-conic-gradient(from 3deg, var(--mb-metal) 0 4deg, var(--mb-edge) 4deg 9deg); box-shadow: inset 0 0 7px color-mix(in srgb, var(--container-bg-color) 45%, transparent), 0 1px 2px var(--mb-shadow); animation: mb-rotate 6s linear infinite; }
.mb-topview.minimized::after { content: ""; position: absolute; inset: 18px; border: 1px solid color-mix(in srgb, var(--mb-metal-light) 72%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--mb-cavity) 78%, transparent); box-shadow: inset 1px 1px color-mix(in srgb, var(--secondary-color) 14%, transparent); pointer-events: none; }

@media (hover:hover) and (pointer:fine) { .mb-topview button:hover:not(:disabled) { color: var(--accent-color); }.mb-topview__settings-trigger:hover { transform: scale(1.04); }.mb-topview.minimized:hover { transform: scale(1.04); } .mb-topview__settings-panel .mb-control:hover:not(:disabled) {color: #ffffff;}}
@media (max-width: 520px) {
    .mb-topview {
        right: var(--spacing-md);
        top: calc(var(--spacing-md) + 50px);
        bottom: auto;
    }

    .mb-topview .playlist-container {
        right: 0;
        top: calc(100% + 10px);
        bottom: auto;
    }
}
@media (prefers-reduced-motion: reduce) { .mb-topview, .mb-topview *, .mb-topview *::before, .mb-topview *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }

@keyframes mb-rotate { to { transform: rotate(360deg); } }
@keyframes mb-rotate-reverse { to { transform: rotate(-360deg); } }
@keyframes mb-tine { to { transform: scaleY(.72); } }