.console-box--topping {
    position: fixed;
    bottom: 34px;
    left: 34px;
    display: flex;
    gap: 6px;
}

.console-box--util {
    position: fixed;
    left: 34px;
    bottom: 205px;
}

.console-box--util > .console-btn {
    margin-top: 9px;
}

.console-box--zoom {
    position: fixed;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
}

.zoom-range {
    position: relative;
    width: 20px;
    height: 187px;
    background: url("/assets/img/range-bar.png") no-repeat center / contain;
    touch-action: none;
}

.zoom-tip {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 70px;
    margin-left: -1px;
    transform: translate(-50%, -50%);
    background: url("/assets/img/range-tip.png") no-repeat center / contain;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .console-box--topping {
        position: fixed;
        bottom: calc(25px + 45px + 21px);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 4px;
    }

    .console-box--util {
        position: fixed;
        left: initial;
        bottom: initial;
        right: 20px;
        top: 148px;
    }

    .console-box--util > .console-btn {
        margin-top: 5px;
    }

    .console-box--zoom {
        position: fixed;
        right: initial;
        top: initial;
        bottom: 150px;
        left: 22px;
        transform: translateY(-50%);
    }

    .zoom-range {
        position: relative;
        width: 16px;
        height: 147px;
        background: url("/assets/img/range-bar.png") no-repeat center / contain;
        touch-action: none;
    }

    .zoom-tip {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 56px;
        transform: translate(-50%, -50%);
        background: url("/assets/img/range-tip.png") no-repeat center / contain;
        pointer-events: none;
    }
}

.tv {
    width: 90px;
    height: 68px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='68' viewBox='0 0 90 68' fill='none'%3E%3Cg filter='url(%23filter0_iii_810_2125)'%3E%3Crect width='90' height='68' rx='5.07612' fill='url(%23paint0_radial_810_2125)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_iii_810_2125' x='0' y='-2.03045' width='91.0152' height='72.0609' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='2.03045'/%3E%3CfeGaussianBlur stdDeviation='1.52284'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_810_2125'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-2.03045'/%3E%3CfeGaussianBlur stdDeviation='2.03045'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='effect1_innerShadow_810_2125' result='effect2_innerShadow_810_2125'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='2.03045' dy='1.01522'/%3E%3CfeGaussianBlur stdDeviation='0.507612'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='effect2_innerShadow_810_2125' result='effect3_innerShadow_810_2125'/%3E%3C/filter%3E%3CradialGradient id='paint0_radial_810_2125' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(45 34) scale(45 34)'%3E%3Cstop offset='0.120192' stop-color='white'/%3E%3Cstop offset='0.769231' stop-color='%23F9F9F9'/%3E%3Cstop offset='1' stop-color='%23F3F2F0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.topping-btn.is-pushed .tv {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='68' viewBox='0 0 90 68' fill='none'%3E%3Cg filter='url(%23filter0_iii_810_2114)'%3E%3Crect width='90' height='68' rx='5.07612' fill='url(%23paint0_radial_810_2114)'/%3E%3Crect width='90' height='68' rx='5.07612' fill='url(%23paint1_linear_810_2114)' fill-opacity='0.41'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_iii_810_2114' x='0' y='-2.03045' width='91.0152' height='72.0609' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='2.03045'/%3E%3CfeGaussianBlur stdDeviation='1.52284'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_810_2114'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-2.03045'/%3E%3CfeGaussianBlur stdDeviation='2.03045'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='effect1_innerShadow_810_2114' result='effect2_innerShadow_810_2114'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='2.03045' dy='1.01522'/%3E%3CfeGaussianBlur stdDeviation='0.507612'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='effect2_innerShadow_810_2114' result='effect3_innerShadow_810_2114'/%3E%3C/filter%3E%3CradialGradient id='paint0_radial_810_2114' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(45 34) scale(45 34)'%3E%3Cstop offset='0.120192' stop-color='white'/%3E%3Cstop offset='0.769231' stop-color='%23F9F9F9'/%3E%3Cstop offset='1' stop-color='%23F3F2F0'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint1_linear_810_2114' x1='45' y1='0' x2='45' y2='68' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C7E2FF' stop-opacity='0.85'/%3E%3Cstop offset='1' stop-color='%2384BEFD'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.console-item {
    cursor: pointer;
    user-select: none;
}

.topping-name {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
    gap: 2px;
    width: 90px;
    text-align: center;
}

.topping-name > span {
    display: block;
    height: 19px;
    line-height: 19px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.36px;
}

@media (max-width: 1024px) {
    .tv {
        width: 84px;
        height: 60px;
    }

    .topping-name {
        margin-bottom: 3px;
        width: 84px;
    }

    .topping-name > span {
        height: 16px;
        line-height: 16px;
    }
}

.topping-name > span:first-child {
    border: 0.5px solid #525358;
    background: #FFFDFB;
    color: #525358;
    text-transform: uppercase;
}

.topping-name > span:last-child {
    border: 0.5px solid #171717;
    background: #171717;
    color: #FFFDFB;
}

.topping-name > span:empty {
    opacity: 0 !important;
}

.console-box--status {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
}

.console-box--status .box-btn {
    min-width: 375px;
    background: #171717;
    color: #FFFDFB;
}

.console-box--status .box-btn.is-hidden {
    pointer-events: none;
    background: #F2F2E8;
    color: #171717;
}

/* 'Mixing' 뒤 점 애니메이션: 없음 → . → .. → ... (자리 고정 → 글자 안 흔들림) */
#con-extract.is-mixing::after {
    content: '...';
    display: inline-block;
    width: 1.1em;
    text-align: left;
    animation: mixing-dots 1.2s infinite;
}

@keyframes mixing-dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
}

@media (max-width: 1024px) {
    .console-box--status {
        bottom: 25px;
    }

    .console-box--status .box-btn {
        min-width: auto;
        width: calc(100vw - 40px);
    }
}

.console-box--playbar {
    position: fixed;
    bottom: 168px;
    left: 34px;
}

#con-time {
    display: block;
    margin-bottom: 10px;
    text-align: right;
    color: #171717;
    font-size: 10px;
    font-weight: 400;
    line-height: 115%;
    letter-spacing: 0.3px;
}

#con-playbar {
    position: relative;
    width: 378px;
    height: 2px;
    border-radius: 2px;
    background: #F3F2F0;
    cursor: default;
}

.con-playbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #171717;
    transition: width 0.1s linear;
}

/* fill 끝(진행 위치)에 붙는 작은 원(핸들) */
.con-playbar-fill::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #171717;
}

@media (max-width: 1024px) {
    .console-box--playbar {
        bottom: 206px;
        left: 23px;
        width: calc(100% - 46px);
    }

    #con-playbar {
        width: 100%;
    }
}

#con-volume.is-muted {
    opacity: 0.45;
    text-decoration: line-through;
}

.console-btn {
    position: relative;
    width: 85px;
    height: 85px;

    cursor: pointer;
}

.console-btn > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.console-btn > .console-btn-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #F3F2F0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.36px;
}

.console-btn-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70' fill='none'%3E%3Cpath d='M28.5 34.5L18.75 40.1292L18.75 28.8708L28.5 34.5Z' fill='%23D9D9D9'/%3E%3Crect x='41.5' y='30' width='4' height='10' fill='%23D9D9D9'/%3E%3Crect x='47.5' y='30' width='4' height='10' fill='%23D9D9D9'/%3E%3Cline x1='37.6495' y1='29.248' x2='31.1495' y2='40.5064' stroke='%23D9D9D9' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
}

.console-btn.is-active .console-btn-icon,
#con-pause.hint .console-btn-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70' fill='none'%3E%3Cg filter='url(%23filter0_d_842_646)'%3E%3Cpath d='M19.25 39.2637L19.25 29.7363L27.501 34.5L19.25 39.2637Z' fill='%237AFF51' stroke='%237AFF51'/%3E%3Crect x='42' y='30.5' width='3' height='9' fill='%237AFF51' stroke='%237AFF51'/%3E%3Crect x='48' y='30.5' width='3' height='9' fill='%237AFF51' stroke='%237AFF51'/%3E%3Cline x1='37.6495' y1='29.248' x2='31.1495' y2='40.5064' stroke='%237AFF51' stroke-width='1.5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_842_646' x='16.75' y='26.8711' width='36.75' height='16.0107' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.478431 0 0 0 0 1 0 0 0 0 0.317647 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_842_646'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_842_646' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
}

#con-pause.hint .console-btn-icon {
    animation: con-hint-blink 0.9s steps(1, end) infinite;
}
@keyframes con-hint-blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
}

#con-cue.is-active .console-btn-text {
    color: #FFA100;
    text-shadow: 0 0 2px #FFA200;
}

@media (hover: hover) {
    .console-btn:hover .console-btn-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70' fill='none'%3E%3Cg filter='url(%23filter0_d_842_646)'%3E%3Cpath d='M19.25 39.2637L19.25 29.7363L27.501 34.5L19.25 39.2637Z' fill='%237AFF51' stroke='%237AFF51'/%3E%3Crect x='42' y='30.5' width='3' height='9' fill='%237AFF51' stroke='%237AFF51'/%3E%3Crect x='48' y='30.5' width='3' height='9' fill='%237AFF51' stroke='%237AFF51'/%3E%3Cline x1='37.6495' y1='29.248' x2='31.1495' y2='40.5064' stroke='%237AFF51' stroke-width='1.5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_842_646' x='16.75' y='26.8711' width='36.75' height='16.0107' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.478431 0 0 0 0 1 0 0 0 0 0.317647 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_842_646'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_842_646' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75%;
    }

    #con-cue:hover .console-btn-text {
        color: #FFA100;
        text-shadow: 0 0 2px #FFA200;
    }

    #con-reset:hover .console-btn-text {
        color: #FFF;
        text-shadow: 0 0 2px #FFF;
    }
}

#con-volume > span {
    display: block;
    margin-bottom: 8px;
    font-size: 8px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.24px;
    text-align: center;
}

#con-volume > img {
    display: block;
    width: 85px;
    height: auto;
}

@media (max-width: 1024px) {
    .console-btn {
        width: 56px;
        height: 56px;
    }

    .console-btn > .console-btn-text {
        font-size: 9px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0.264px;
    }

    .console-btn-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='47' viewBox='0 0 47 47' fill='none'%3E%3Cpath d='M18.8633 22.8343L12.4102 26.56L12.4102 19.1086L18.8633 22.8343Z' fill='%23D9D9D9'/%3E%3Crect x='27.4673' y='19.8555' width='2.64743' height='6.61858' fill='%23D9D9D9'/%3E%3Crect x='31.4385' y='19.8555' width='2.64743' height='6.61858' fill='%23D9D9D9'/%3E%3Cline x1='24.9191' y1='19.3576' x2='20.6171' y2='26.809' stroke='%23D9D9D9' stroke-width='0.992787'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75%;
    }

    .console-btn.is-active .console-btn-icon,
    #con-pause.hint .console-btn-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='47' viewBox='0 0 47 47' fill='none'%3E%3Cpath d='M18.8633 22.8343L12.4102 26.56L12.4102 19.1086L18.8633 22.8343Z' fill='%237AFF51'/%3E%3Crect x='27.4673' y='19.8555' width='2.64743' height='6.61858' fill='%237AFF51'/%3E%3Crect x='31.4385' y='19.8555' width='2.64743' height='6.61858' fill='%237AFF51'/%3E%3Cline x1='24.9191' y1='19.3576' x2='20.6171' y2='26.809' stroke='%237AFF51' stroke-width='0.992787'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75%;
    }

    #con-volume > span {
        margin-bottom: 4px;
        font-size: 6px;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: 0.18px;
    }

    #con-volume > img {
        width: 56px;
    }
}

.console-wrapper.cue-lock .console-item {
    pointer-events: none;
}

.console-wrapper.cue-lock #con-cue {
    pointer-events: auto;
}