:root {
    --mixer-bg: #1e2024; --channel-bg: #2d3137;
    --knob-color: #5d626c; --fader-track: #121212;
    --led-green: #00ff88; --led-red: #ff4d4d; --accent-blue: #00e5ff; --accent-purple: #8400ff;
    --led-dim: #333; --led-mute: #ff4d4d; --led-peak: #ff0000;
    --channel-width: 75px; --gain-size: 65px; --knob-size: 28px;
    --fader-height: 220px; --v-meter-width: 7px; --v-meter-right: -20px;
    --master-width: 260px; --master-height: 120px; --master-knob-xl: 60px;
    --gain-margin-bottom: 0px; --knob-margin-bottom: 12px; --name-tag-margin-top: 12px;
    --font-main-label: 10px; --font-ring-value: 12px; --font-fader-tick: 9px; --font-name-tag: 12px;
}

body { background: #121212; color: #e0e0e0; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 20px; height: 100vh; overflow: hidden; user-select: none; }
.header { width: 100%; max-width: 1100px; display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; border-bottom: 1px solid #333; margin-bottom: 10px; box-sizing: border-box; }
.time { font-family: monospace; font-size: 20px; color: var(--led-green); }

.main-container { display: flex; align-items: flex-end; gap: 20px; margin-top: 10px; }
.mixer-console { background: var(--mixer-bg); border-radius: 12px; padding: 12px; display: flex; gap: 6px; border: 1px solid #444; box-shadow: 0 30px 60px rgba(0,0,0,0.6); }

.channel { background: var(--channel-bg); border-radius: 6px; padding: 14px 2px; display: flex; flex-direction: column; align-items: center; border: 1px solid #4a4f56; width: var(--channel-width); position: relative; }
.channel.fx-type { border-color: var(--accent-purple); margin-left: 10px; }
.channel.mr-type { border-color: var(--accent-blue); margin-left: 10px; }

.gain-container { position: relative; width: var(--gain-size); height: var(--gain-size); margin-bottom: var(--gain-margin-bottom); }
.gain-ring-svg { transform: rotate(135deg); display: block; }
.gain-text-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; font-weight: 700; }

.knob { width: var(--knob-size); height: var(--knob-size); background: var(--knob-color); border-radius: 50%; border: 2px solid #666; position: relative; margin-bottom: var(--knob-margin-bottom); cursor: ns-resize; } 
.knob::after { content: ''; position: absolute; top: 3px; left: 50%; width: 2px; height: 6px; background: #fff; transform: translateX(-50%); }

.fader-area { width: 100%; height: var(--fader-height); position: relative; display: flex; justify-content: center; }
.fader-track-bg { width: 18px; height: 100%; background: var(--fader-track); border-radius: 4px; border: 1px solid #000; position: relative; z-index: 5; }
.ticks { position: absolute; left: 5px; width: 25px; height: 100%; pointer-events: none; z-index: 1; }
.tick { position: absolute; width: 100%; display: flex; align-items: center; }
.tick span { font-size: var(--font-fader-tick); color: #777; font-family: monospace; transform: translateY(-50%); }

.v-meter { width: var(--v-meter-width); height: 100%; background: #000; position: absolute; right: var(--v-meter-right); border-radius: 2px; overflow: hidden; border: 0.5px solid #444; }
/* 1. 채널별 세로 레벨 미터 (0~50%: 초록, 50~92%: 노란색, 92~100%: 빨간색) */
.v-level {
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, 
        var(--led-green) 0%, 
        var(--led-green) 45%,     /* 45%부터 노란색이 섞이기 시작 */
        #ffea00 55%,              /* 55%에서 완전한 노란색 */
        #ffea00 85%,              /* 85%부터 빨간색이 섞이기 시작 */
        var(--led-red) 95%        /* 95%에서 완전한 빨간색 */
    );
    background-size: 100% 220px; 
    background-position: bottom;
    position: absolute;
    bottom: 0;
    /* transition 시간을 0.08s로 아주 미세하게 늘려 더 찰랑거리는 느낌 부여 */
    transition: height 0.08s ease-out; 
}

/* 페이더 핸들 본체 */
.fader-grip {
    width: 24px;
    height: 34px;
    background: #7a7e87;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%); /* 중심점 보정 */
    bottom: 0%;
    border: 1px solid #999;
    z-index: 10;
    cursor: ns-resize;
    /* 내부 선을 그리기 위한 설정 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 핸들 정중앙 가로선 */
.fader-grip::after {
    content: '';
    width: 100%;       /* 핸들 가로폭 전체 */
    height: 2px;       /* 선 두께 */
    background: #fff;  /* 선 색상 (흰색) */
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5); /* 약간의 빛남 효과 */
}
.led-group { display: flex; gap: 10px; margin-top: 8px; justify-content: center; }
.led-item { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.led-dot { width: 7px; height: 7px; border-radius: 50%; background: #222; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); transition: all 0.1s; margin-top: 5px; }
.led-dot.active-red { background: #ff3333; box-shadow: 0 0 8px rgba(255, 26, 26, 0.6), inset 0 1px 1px rgba(255,255,255,0.4); }
.led-label { font-size: 8px; font-weight: 800; color: #4a4f56; letter-spacing: 0.5px; }

.name-tag { font-size: var(--font-name-tag); font-weight: 900; margin-top: var(--name-tag-margin-top); color: #aaa; cursor: pointer; max-width: 65px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.master-horizontal-unit { background: #353a42; border: 2px solid var(--accent-blue); border-radius: 12px; width: var(--master-width); height: var(--master-height); display: flex; align-items: center; padding: 10px 15px; gap: 15px; }
.knob-master { width: var(--master-knob-xl); height: var(--master-knob-xl); background: #4a4f56; border-radius: 50%; border: 3px solid #777; position: relative; transform: rotate(-130deg); cursor: ns-resize; }
.knob-master::after { content: ''; position: absolute; top: 5px; left: 50%; width: 3px; height: 12px; background: var(--accent-blue); transform: translateX(-50%); }
.h-meter-track { width: 100%; height: 10px; background: #000; border-radius: 5px; overflow: hidden; }

/* 2. 마스터 가로 레벨 미터 (왼쪽 0~50%: 초록, 50~92%: 노란색, 92~100%: 빨간색) */
.h-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, 
        var(--led-green) 0%, 
        var(--led-green) 45%, 
        #ffea00 55%, 
        #ffea00 85%, 
        var(--led-red) 95%
    );
    background-size: 260px 100%; 
    background-position: left;
    transition: width 0.08s ease-out;
}

.master-db-display { font-family: monospace; font-size: 14px; color: var(--led-green); background: #000; padding: 2px 6px; border-radius: 4px; border: 1px solid #333; text-align: right; }

button#start { padding: 4px 16px; background: var(--accent-blue); border: none; border-radius: 6px; font-weight: 900; cursor: pointer; font-size: 12px; color: #000; text-transform: uppercase; }
.status-connected { font-size: 13px; font-weight: 900; color: var(--accent-blue); animation: blink 2s infinite; }
@keyframes blink { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
#log { width: 100%; max-width: 1000px; height: 60px; background: #000; color: #0f0; font-family: monospace; font-size: 11px; padding: 10px; margin-top: 20px; overflow-y: auto; border: 1px solid #333; }

/* 🎚 페이더 조작을 위한 투명 슬라이더 레이어 */
.fader-track-bg {
    position: relative;
}

.fader-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 투명하게 만들어 기존 디자인 유지 */
    cursor: pointer;
    z-index: 15; /* grip보다 위에 두어 클릭 가능하게 함 */
    writing-mode: bt-lr; /* 수직 슬라이더 설정 */
    appearance: slider-vertical; 
    -webkit-appearance: slider-vertical;
}

/* 링(노브) 조작 시 마우스 커서 변경 */
.gain-container {
    cursor: ns-resize; /* 상하 드래그 유도 아이콘 */
}

/* 마스터 노브 조작을 위한 실제 입력창 (숨김 처리 후 스크립트로 제어) */
#master-fader-input {
    display: none;
}


/* 🎚 페이더 조작을 위한 투명 슬라이더 레이어 */
.fader-track-bg {
    position: relative;
}

.fader-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 15;
    /* 비표준 경고를 무시하거나 아래와 같이 작성 */
    appearance: slider-vertical; 
    -webkit-appearance: slider-vertical;
}

/* 링(노브) 조작 시 마우스 커서 변경 */
.gain-container {
    cursor: ns-resize; /* 상하 드래그 유도 아이콘 */
}

/* 마스터 노브 조작을 위한 실제 입력창 (숨김 처리 후 스크립트로 제어) */
#master-fader-input {
    display: none;
}

/* 페이지 전환 스타일 */
.page { display: none; width: 100%; max-width: 1100px; }
.page.active { display: block; }

.nav-tabs { display: flex; gap: 20px; }
.nav-item { 
    font-size: 14px; font-weight: 800; color: #555; 
    cursor: pointer; padding: 5px 10px; border-bottom: 2px solid transparent; 
}
.nav-item.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }


/* 마스터 컨테이너 */
.master-horizontal-unit {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 20px;
    background: var(--channel-bg);
    border: 1px solid #444;
    border-radius: 12px;
    min-width: 300px;
}

.master-knob-section { text-align: center; width: 90px; }
.master-title { font-size: 14px; color: var(--accent-blue); font-weight: 900; margin-bottom: 12px; }
.master-mute-wrap { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 10px; cursor: pointer; }

/* 오른쪽 스택 정렬 */
.master-right-stack {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px; /* 요소 간 간격 */
    align-items: flex-end; /* 오른쪽 끝단 맞춤 */
}

/* 레벨 미터 (중첩 현상 해결) */
.h-meter-container { 
    width: 100%; 
    height: 12px; 
    background: #000; /* 단일 배경색으로 두 줄 현상 방지 */
    border-radius: 4px; 
    overflow: hidden; 
}
.h-meter-track { width: 100%; height: 100%; position: relative; }
.h-meter-fill { height: 100%; background: linear-gradient(90deg, #00ff00, #ffff00, #ff0000); transition: width 0.1s; }

/* 정밀 dB 섹션 (리미터 위로 정렬) */
.db-display-section { 
    text-align: right; 
    width: 100%; 
}
.master-db-display { 
    display: inline-block;
    min-width: 60px; 
    font-size: 10px; 
    color: var(--led-green); 
    font-family: monospace; 
    background: #000; 
    padding: 6px 12px; 
    border-radius: 4px; 
    border: 1px solid #222; 
}

/* 리미터 패널 [기존 코드 대체] */
.limiter-panel {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #333;
    box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 설정 */
}
.limiter-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.limiter-db-text { font-size: 10px; color: var(--accent-blue); font-family: monospace; font-weight: 900; }
.mini-label { font-size: 9px; color: #666; font-weight: bold; display: block; margin-bottom: 2px; }

/* 리미터 슬라이더 본체 보정 */
.limiter-slider-input {
    -webkit-appearance: none !important; /* 브라우저 기본 수직 설정 강제 무시 */
    appearance: none !important;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    margin: 0px 0 5px 0;
    cursor: pointer;
    /* 수평 방향 강제 지정 */
    writing-mode: horizontal-tb !important; 
    /*border: 1px solid #111; */
}

/* 크롬, 에지, 사파리용 트랙 스타일 강제 지정 */
.limiter-slider-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #333; /* 핸들이 움직이는 더 밝은 길 배경 */
    border-radius: 3px;
}


/* 슬라이더 핸들(Thumb) 설정 */
.limiter-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 0 5px rgba(0, 229, 255, 0.6);
}

.limiter-slider-input::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);    /* 클릭 시 약간 커지는 효과 */
}


.eq-channels-area { display: flex; gap: 15px; }
.eq-column { flex: 1; display: flex; flex-direction: column; gap: 10px; }


/* 마스터 9밴드 EQ 영역 */
.eq-9band-flex { display: flex; justify-content: space-around; background: #111; padding: 15px; border-radius: 10px; }

/* 사이드바 스타일 */
.sidebar-card { background: #222; padding: 15px; border-radius: 10px; border: 1px solid #333; margin-bottom: 15px; }
.v-meter-track { width: 12px; height: 120px; background: #000; border-radius: 2px; position: relative; overflow: hidden; display: inline-block; margin: 0 5px; }
.v-meter-fill { width: 100%; height: 0%; background: var(--led-green); position: absolute; bottom: 0; }
.preset-btns button { background: var(--accent-blue); border: none; padding: 5px; border-radius: 4px; font-weight: bold; cursor: pointer; margin: 5px 2px; width: 45%; }
#preset-list { width: 100%; background: #111; color: #fff; border: 1px solid #333; margin-top: 10px; }





/* 그래프와 슬라이더 겹침 레이아웃 */
.eq-display-stack {
    position: relative;
    height: 140px; /* 슬라이더 조작 범위를 고려한 높이 */
    background: #000;
    border-radius: 4px;
    border: 1px solid #222;
    overflow: hidden;
}

.eq-graph {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* 그래프 뒤의 슬라이더 클릭 가능하도록 설정 */
}



/* 4밴드 EQ 카드 디자인 */
.eq-card { background: #1a1a1a; padding: 12px; border-radius: 8px; border: 1px solid #333; }

.eq-4-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 100%;
    z-index: 2;
}

.eq-4-u {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.eq-4-u input[type=range] {
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
    width: 10px;
    height: 80px; /* 그래프 영역 안에 들어오도록 크기 조정 */
    background: transparent;
    cursor: pointer;
}

.eq-4-u span {
    font-size: 9px;
    color: #888;
    z-index: 3;
}

/* SETUP 뮤트 버튼 기본 스타일 */
.mute-mini-btn {
    background: #444;
    border: none;
    color: #aaa;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
}






/* EQ 스택 공통 (4밴드, 9밴드 모두 적용) */
.eq-display-stack {
    position: relative;
    background: #000;
    border-radius: 4px;
    border: 1px solid #222;
    overflow: hidden;
}

/* 9밴드 전용 스택 높이 및 너비 수정 */
.master-stack {
    height: 180px; 
    width: 100%;
}

.eq-9band-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    height: 100%;
    z-index: 2;
}

.eq-9-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.s-9 {
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
    width: 12px;
    height: 100px;
    background: transparent;
    accent-color: var(--led-green); /* 마스터는 초록색 강조 */
}

.f-label { font-size: 10px; color: #555; font-weight: bold; }

.eq-card {
    width: 100%;
    box-sizing: border-box;
}



.eq-display-stack {
    position: relative;
    background: #000;
    border-radius: 4px;
    height: 140px; /* 4밴드 높이 */
    overflow: hidden;
}

.master-stack { height: 180px; } /* 9밴드 높이 */

.eq-graph {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
}

.eq-4-grid, .eq-9band-grid {
    position: relative;
    display: grid;
    height: 100%;
    z-index: 2;
}

.eq-4-grid { grid-template-columns: repeat(4, 1fr); }
.eq-9band-grid { grid-template-columns: repeat(9, 1fr); }

.eq-4-u, .eq-9-unit {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0;
}

input[type=range] {
    appearance: slider-vertical; -webkit-appearance: slider-vertical;
    background: transparent; cursor: pointer;
}


/* EQ 그래프 선 두께 조절: 1px 이하로 설정하여 아주 가늘게 표현 */
.eq-graph path {
    stroke-width: 0.5; 
    stroke-opacity: 0.5;
    /* 영역이 채워질 때 경계선이 너무 진하지 않도록 설정 */
    stroke-linejoin: round;
    stroke-linecap: round;
}





/* EQ 카드 상단 헤더 정렬 */
.eq-card-header {
    display: flex;
    justify-content: space-between; /* 이름은 왼쪽, 버튼은 오른쪽 끝으로 */
    align-items: center;            /* 세로 중앙 정렬 핵심 */
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
    margin-bottom: 10px;
}

/* 텍스트 스타일 보정 */
.eq-card-header span {
    font-size: 11px;
    font-weight: 900;
    color: #ccc;
    letter-spacing: 0.5px;
}

/* 뮤트 버튼 디자인 개선 */
.mute-mini-btn {
    background: #333;
    border: 1px solid #444;
    color: #888;
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    line-height: 1; /* 텍스트 높이 고정으로 찌그러짐 방지 */
}


/* 활성화(Muted) 상태일 때 강조 (스크립트 연동) */
.mute-mini-btn.active-red {
    background: var(--led-red) !important;
    color: white !important;
    border-color: #ff8080;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.4);
}




/* 트리거 버튼 (오른쪽 상단 고정) */
#panel-trigger {
    position: fixed; top: 20px; right: 20px;
    padding: 8px 15px; background: var(--accent-blue); color: #000;
    border: none; border-radius: 4px; font-weight: 900; cursor: pointer; z-index: 100;
}

/* 사이드 패널 본체 (날개) */
.snapshot-side-panel {
    position: fixed; top: 0; right: -350px; /* 처음엔 숨김 */
    width: 320px; height: 100%;
    background: #1a1c20; border-left: 2px solid var(--accent-blue);
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
    transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1000; padding: 20px; box-sizing: border-box;
}
.snapshot-side-panel.active { right: 0; }

.panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; margin-bottom: 20px; }
.close-btn { background: none; border: none; color: #666; font-size: 24px; cursor: pointer; }

/* 4x4 패드 그리드 */
.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px; margin-top: 20px;
}

.snap-pad {
    aspect-ratio: 1/1; background: #2d3137; border: 1px solid #444;
    border-radius: 4px; cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; font-size: 9px; color: #666;
    transition: all 0.2s; position: relative;
}
.snap-pad.filled { background: #3a3f47; color: var(--accent-blue); border-color: var(--accent-blue); }

/* 이 부분을 .snap-pad 클래스 아래에 추가하세요 */
.snap-pad .pad-name {
    font-size: 10px;      /* (수정) 9px -> 14px로 대폭 확대 */
    font-weight: 400;    /* 굵게 표시하여 가독성 향상 */
    color: inherit;      /* 부모(.snap-pad)의 색상을 따름 */
    text-align: center;
    line-height: 1.2;
    word-break: break-all;
    padding: 0 4px;      /* 글자가 패드 끝에 붙지 않게 여백 추가 */
}

/* 추가로, 수정할 때 나타나는 입력창 폰트도 키우면 좋습니다 */
.pad-edit-input {
    outline: none;
    border-radius: 2px;
    padding: 2px;
    font-size: 10px !important; /* (추가) 입력 시 글자 크기 보정 */
}

/* [교체] 패드 호버 시 스타일 수정 */
.snap-pad.filled:hover {
    /* 배경을 검은색으로 덮지 않고 밝기만 조절 */
    filter: brightness(1.4); 
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.1) !important; 
    /* 글자색이 변하지 않도록 인라인 스타일 우선순위 보장 */
}
.snap-pad .delete-x { 
    position: absolute; top: 2px; right: 2px; font-size: 10px; color: var(--led-red); 
    display: none; padding: 2px;
}

.snap-pad.filled:hover .delete-x {
    display: block;
}

/* 편집 입력창 스타일 */
.pad-edit-input {
    outline: none;
    border-radius: 2px;
    padding: 2px;
}

/* 삭제 버튼 보정 (호버 시에도 잘 보이도록) */
.snap-pad .delete-x {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 14px;
    color: var(--led-red) !important;
    display: none;
    z-index: 100;
}
.save-area { display: flex; gap: 5px; }
#side-preset-name { flex: 1; background: #000; border: 1px solid #333; color: #fff; padding: 5px; border-radius: 4px; }
.save-btn { background: var(--led-green); border: none; padding: 5px 10px; border-radius: 4px; font-weight: bold; cursor: pointer; }



/* 스코프 선택기 스타일 */
.snapshot-scope-selector {
    margin-top: 15px;
    padding: 10px;
    background: #111;
    border-radius: 6px;
    border: 1px solid #333;
}

.scope-title {
    font-size: 10px;
    color: #666;
    margin-bottom: 8px;
    font-weight: bold;
    letter-spacing: 1px;
}

.scope-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열로 배치 */
    gap: 6px;
}

.scope-grid label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #bbb;
    cursor: pointer;
}

/* 체크박스 기본 스타일 커스텀 */
.scope-grid input[type="checkbox"] {
    -webkit-appearance: none; /* 브라우저 기본 스타일 제거 */
    appearance: none;
    width: 14px;
    height: 14px;
    background: #2d3137;      /* 빈 박스 배경색 (채널 배경색과 통일) */
    border: 1px solid #555;    /* 테두리 색상 */
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

/* 체크되었을 때 상태 */
.scope-grid input[type="checkbox"]:checked {
    background: var(--accent-blue); /* 체크 시 배경색 */
    border-color: var(--accent-blue);
}

/* 체크 표시 (V) 구현 */
.scope-grid input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #000; /* 체크 표시 색상 */
}

.scope-grid label:hover {
    color: #fff;
}



/* 컬러 피커 스타일 */
#side-preset-color {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #444;
    background: none;
    cursor: pointer;
    border-radius: 4px;
}

/* 패드 기본 스타일 수정 (인라인 스타일 우선 순위 확보) */
.snap-pad.filled {
    border-width: 2px; /* 색상이 더 잘 보이게 테두리 두께 조절 */
    transition: transform 0.1s, box-shadow 0.1s;
}

.snap-pad.filled:hover {
    transform: scale(1.05);
    filter: brightness(1.2); /* 호버 시 살짝 밝게 */
}


/* 드래그 중인 패드 스타일 */
.snap-pad.dragging {
    opacity: 0.4;
    transform: scale(0.9);
    border-style: dashed;
}

/* 마우스가 올라간 대상 패드 (Drop Target) */
.snap-pad.drag-over {
    border: 2px solid #fff !important;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}


/* 백업 컨트롤 영역 */
.snapshot-backup-controls {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.backup-btn {
    flex: 1;
    padding: 6px;
    background: #222;
    border: 1px solid #444;
    border-radius: 4px;
    color: #888;
    font-size: 9px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.backup-btn:hover {
    background: #333;
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}


/* FX 전용 보라색 버튼 */
.fx-pad-trigger {
    width: 65px; height: 45px; background: #1a1c20; border: 2px solid var(--fx);
    border-radius: 6px; color: var(--fx); font-weight: 900; font-size: 9px; cursor: pointer;
}

/* 탭 버튼 */
/* style.css 에서 .tap-button 부분 수정 */
.tap-button {
    width: 65px; /* (수정 전) 65px */
    height: 45px; /* (수정) 65px -> 45px (FX 버튼과 동일한 높이) */
    background: #222; 
    border: 2px solid #fff;
    border-radius: 6px; /* (수정) 원형에서 사각형으로 변경하여 FX 버튼과 통일 */
    color: #fff; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    transition: all 0.1s;
}

.tap-button:active {
    background: #fff !important;
    color: #000;
}

/* 플로팅 말풍선 본체 */
.fx-popover-box {
    position: absolute;
    display: none; /* 평소엔 숨김 */
    width: 280px;
    background: #1a1c20;
    border: 2px solid var(--accent-purple);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    z-index: 2500;
    padding: 15px;
}

/* 왼쪽 화살표 (말풍선 꼬리) */
.popover-arrow {
    position: absolute;
    left: -10px; top: 20px;
    width: 0; height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--accent-purple);
}

.fx-grid-header { display: flex; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 5px; }
.fx-grid-header span { font-size: 11px; font-weight: 900; color: var(--accent-purple); }

/* 4x4 이펙트 그리드 */
.fx-grid-4x4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.fx-item-pad {
    aspect-ratio: 1.3/1;
    background: #2d3137;
    border: 1px solid #444;
    border-radius: 4px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}

.fx-item-pad:hover { border-color: var(--accent-purple); background: #3a3f47; }
.fx-item-pad span { font-size: 9px; font-weight: 900; color: #aaa; text-align: center; line-height: 1; }
.fx-item-pad small { font-size: 7px; color: #666; margin-bottom: 2px; }
.fx-item-pad.active { border-color: var(--accent-purple); color: var(--accent-purple); }


.fx-detail-controls {
    display: flex; gap: 15px; padding: 10px 0; justify-content: space-around;
}
.fx-control-unit { text-align: center; flex: 1; }
.fx-control-unit small { font-size: 8px; color: #666; display: block; margin-bottom: 5px; }

/* Parameter 1 슬라이더 */
.fx-control-unit input[type="range"] {
    width: 100%; height: 4px; accent-color: var(--accent-purple);
}
.fx-val-badge { font-size: 10px; color: var(--accent-purple); font-weight: 900; margin-top: 4px; }

/* Parameter 2 토글 버튼 */
.fx-toggle-btn {
    width: 100%; padding: 6px; background: #222; border: 1px solid #444;
    color: #888; border-radius: 4px; font-size: 9px; font-weight: 900; cursor: pointer;
}
.fx-toggle-btn.active {
    background: var(--accent-purple); color: #fff; border-color: #a04dff;
}
.fx-divider { height: 1px; background: #333; margin: 10px 0; }


/* 말풍선 전체 컨테이너 넓이 확장 */
.fx-popover-box {
    width: 350px !important; /* 그리드 공간 확보 */
    padding: 15px;
    background: #1a1c20;
    border: 2px solid var(--accent-purple);
}

/* 좌측(링/버튼) + 우측(그리드) 가로 배치 */
.fx-layout-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* 좌측 조절 섹션 */
.fx-left-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100px;
    align-items: center;
}

/* 우측 프리셋 그리드 (핵심 수정) */
.fx-right-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4열 강제 */
    grid-template-rows: repeat(4, 1fr);    /* 4행 강제 */
    gap: 6px;
}

/* 개별 패드 디자인 */
.fx-preset-pad {
    aspect-ratio: 1.4/1;
    background: #2d3137;
    border: 1px solid #444;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.fx-preset-pad:hover { border-color: var(--accent-purple); background: #3a3f47; }
.pad-num { font-size: 7px; color: #666; }
.pad-name { font-size: 8px; font-weight: 900; color: #aaa; text-align: center; line-height: 1.1; }

/* 링 게이지 값 텍스트 위치 */
.fx-ring-visual { position: relative; width: 80px; height: 80px; }
.fx-ring-val {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px; font-weight: bold; color: #fff;
}
.fx-label { font-size: 9px; color: #777; margin-top: 5px; font-weight: bold; }



/* FX 프리셋 그리드 패드 크기 통일 */
.fx-preset-pad {
    width: 45px; 
    height: 40px; /* 높이 고정으로 FX1, 2 크기 통일 */
    background: #2d3137;
    border: 1px solid #444;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.fx-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}

.fx-popover-header span {
    font-size: 11px;
    font-weight: 900;
    color: var(--accent-purple);
    letter-spacing: 1px;
}



/* style.css 수정 */

body {
    background: #121212;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 20px;
    min-height: 100vh; /* height: 100vh에서 min-height로 변경하여 내용에 따라 늘어나게 함 */
    overflow-y: auto;  /* overflow: hidden에서 auto로 변경하여 세로 스크롤 허용 */
    user-select: none;
}

/* SETUP 전용 그리드 레이아웃 수정 */
.setup-grid-container {
    display: grid;
    grid-template-columns: 3.5fr 1fr;
    grid-template-rows: auto auto; /* rows 설정을 auto로 변경하여 내용에 맞춤 */
    gap: 20px;
    padding: 20px;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
    /* height: 85vh 삭제 (고정 높이가 스크롤을 방해함) */
}

/* EQ 카드 영역이 잘리지 않도록 하단 여백 추가 */
.master-eq-area {
    grid-column: 1 / span 2;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 40px; /* 최하단 EQ가 잘리지 않도록 충분한 여백 제공 */
}

/* 마스터 9밴드 EQ 스택 높이 보정 */
.master-stack {
    height: 220px; /* 슬라이더 조작이 편하도록 높이를 조금 더 확보 */
    width: 100%;
}

/* SETUP 탭 로우컷 그리드 스타일 */
.lowcut-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2열 배치 */
    gap: 20px 10px; /* 상하 20px, 좌우 10px 간격 */
    padding: 15px 5px;
    justify-items: center;
}

.lowcut-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.lowcut-unit .ch-idx-label {
    font-size: 10px;
    font-weight: 900;
    color: var(--accent-blue);
    margin-bottom: 5px;
    letter-spacing: 1px;
}

/* 사이드바 카드 내부 여백 조정 */
.setup-sidebar .sidebar-card {
    padding: 15px 10px;
}