@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Noto+Sans+JP:wght@500;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/pretendard@latest/dist/web/static/pretendard.css');
body {
    margin: 0;
    overflow: hidden;
    background-color: #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Pretendard', system-ui, -apple-system, 'Segoe UI',
                 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

canvas#visualizer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* 
#control-panel {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: rgba(30, 30, 30, 0.7); 
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    border: none;
    z-index: 10;
    transition: transform 0.35s ease, opacity 0.2s ease;
} */

#control-panel {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: rgba(30, 30, 30, 0.5);
    backdrop-filter: blur(10px);
    padding: 20px 25px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    border: none; /* 테두리 제거 */
    z-index: 10;
    transition: transform 0.35s ease, opacity 0.25s ease, padding 0.25s ease, gap 0.25s ease; /* 강화 */
}

.control-group {
    display: grid;
    grid-template-areas: 
        "label label"
        "up down";
    /* grid-gap: 4px 8px; */
    align-items: center;
    justify-items: center;
}

.control-label {
    grid-area: label;
    font-size: 0.8rem;
    color: #ccc; /* 대비 상승 */
    font-weight: 600;
    text-transform: uppercase;
}

/* .control-button {
    background: #2a2a2a; 
    border: none;
    border-radius: 8px;
    color: #eee;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.1s ease-out;
    font-weight: 500;
} */

.control-button {
    background: #2a2a2a;
    border: none; /* 테두리 제거 */
    border-radius: 6px;
    color: #eee;
    cursor: pointer;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.3); */
    transition: all 0.1s ease-out;
    font-weight: 500;
}

.control-button:active {
    background: #1a1a1a;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    transform: translateY(1px);
}

/* === SCREEN, MIC 버튼 개별 스타일 시작 === */
#control-panel #inputScreen, 
#control-panel #inputMic {
    padding: 10px 6px;
    font-size: 0.85rem;
    background-color: #383838;
    letter-spacing: 0.5px;

    font-family: 'Pretendard';
    font-weight: 300;

    /* [추가] 레이아웃 튐 방지용 고정 폭 */
    width: 92px;          /* SCREEN/MIC 모두 여유 있는 고정값 */
    flex: 0 0 92px;       /* flex 컨테이너에서 크기 고정 */
    line-height: 1;       /* 높이 안정화 */
    white-space: nowrap;  /* 줄바꿈 방지 */
    text-align: center;
    box-sizing: border-box;
    /* transition: scale 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; */
    /* transition: scale 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; */
    transition: scale 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}
#control-panel #inputScreen:hover, 
#control-panel #inputMic:hover {
    background-color: #ffffff;
    color: #959595;
    scale: 1.1;
    font-weight: 400;
    opacity: 1; /* 호버 시에는 항상 완전 불투명하게 */
}

/* #control-panel .input-source-group:has(#inputScreen.active, #inputMic.active) #inputScreen:hover:not(.active),
#control-panel .input-source-group:has(#inputScreen.active, #inputMic.active) #inputMic:hover:not(.active) {
    background-color: #383838;
    color: #eee;
    scale: 1;
    font-weight: 300;
} */
/* === SCREEN, MIC 버튼 개별 스타일 종료 === */

/* 
#control-panel #inputScreen.active,
#control-panel #inputMic.active {
    background-color: #ffffff;
    color: #838383;
    scale: 1.1;
    font-weight: 300;
    box-shadow: 0 0 10px var(--glow-color, rgba(255, 255, 255, 0.9));
}
.input-source-group:has(.control-button:hover:not(.active)) .control-button.active {
    background-color: #383838;
    color: #eee;
    scale: 1;
    font-weight: 300;
    box-shadow: none;
}
 */




 #control-panel #inputScreen.source-on,
#control-panel #inputMic.source-on {
    background-color: #ffffff;
    color: #838383;
    font-weight: 300;
    box-shadow: 0 0 10px var(--glow-color, rgba(255, 255, 255, 0.9));
}

/* '현재 선택됨'을 나타내는 확대 효과 */
#control-panel #inputScreen.source-active,
#control-panel #inputMic.source-active {
    scale: 1.1;
}

#control-panel .input-source-group:has(#inputScreen.source-active) #inputMic:not(:hover),
#control-panel .input-source-group:has(#inputMic.source-active) #inputScreen:not(:hover) {
    scale: 1;
    opacity: 0.7;
}


#control-panel .input-source-group:has(#inputMic:hover) #inputScreen.source-active,
#control-panel .input-source-group:has(#inputScreen:hover) #inputMic.source-active {
    scale: 1;
    filter: brightness(0.85); /* 활성화된 버튼을 살짝 어둡게 합니다 */
}




/* 
#startButton {
    padding: 8px 18px;
    font-size: 0.9rem;
}
#panelToggle {
    width: 32px;
    height: 28px;
    font-size: 0.7rem;
    padding: 0;
}
.up-down-btn {
    width: 35px;
    height: 28px;
    font-size: 0.8rem;
}
#display-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
#control-panel.collapsed {
    transform: translate(-50%, calc(100% + 40px));
    opacity: 0;
    pointer-events: none;
} */



#startButton {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    padding: 10px 22px;
    font-size: 1rem;
    letter-spacing: 1px;
    border-radius: 6px;
    z-index: 10;
    cursor: pointer;
    background-color: #fff;
    color: #000;
    font-weight: 400;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
    will-change: transform, opacity, box-shadow;

    /* 
      애니메이션 속도 설정:
      - transform, opacity: 버튼이 나타나는 동작 (0.6초)
      - box-shadow: 마우스를 올렸을 때 그림자 효과 (0.25초)
    */
    transition: transform 1.0s cubic-bezier(0.175, 0.885, 0.32, 1),
                opacity 0.7s ease-out,
                box-shadow 0.25s ease-out;
}

/* 호버 시 스타일: 더 밝은 그림자, 살짝 위로 이동하며 확대 */
#startButton:hover {
    box-shadow: 0 0 40px rgba(255, 255, 255, 1);
    transform: translateX(-50%) translateY(-5px) scale(1.05);
}

/* START 버튼 숨겨질 때의 애니메이션 */
#startButton.hidden {
    transform: translateX(-50%) translateY(150px); /* 아래로 사라지는 효과 */
    opacity: 0;
    pointer-events: none;
}

/* 컨트롤 패널 스타일 (애니메이션을 위해 수정) */
#control-panel {
    position: fixed;
    bottom: 20px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background-color: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(10px);
    padding: 16px 20px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    z-index: 10;
    
    /* 초기 상태: 화면 아래에 숨겨져 있음 */
    transform: translate(-50%, 150%);
    opacity: 0;
    /* 수정: 딜레이를 없애고, 나타나는 가속도 변경 */
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), 
                opacity 0.3s ease;
}

/* 컨트롤 패널 나타날 때의 애니메이션 */
#control-panel.visible {
    transform: translate(-50%, 0); /* 제자리로 이동 */
    opacity: 1;
}











/* 하단 핫존으로 숨겨질 때의 스타일 (기존 기능 유지) */
#control-panel.collapsed {
    transform: translate(-50%, calc(100% + 40px));
    opacity: 0;
    pointer-events: none;
}

















/* Color inputs styling to match buttons */
#control-panel .color-input {
    width: 35px;
    height: 28px;
    padding: 0;
    border: 1px solid #444;
    border-radius: 8px;
    background: #2a2a2a;
    cursor: pointer;
}
#control-panel .color-input::-webkit-color-swatch-wrapper { padding: 0; }
#control-panel .color-input::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

/* BAR 색상 팔레트 */
.bar-color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

/* .bar-color-option {
    width: 26px;
    height: 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    padding: 0;
    background: transparent;
}

.bar-color-option.active {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
} */

.bar-color-option {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    padding: 0;
    background: transparent;
    /* 부드러운 전환 효과를 위해 opacity와 filter도 추가 */
    transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* 팔레트 내부에 선택된(.active) 항목이 있을 경우, */
/* 선택되지 않은 나머지 버튼들은 어둡고 작게 만듭니다. */
.bar-color-palette:has(.active) .bar-color-option:not(.active) {
    opacity: 0.4;
    filter: saturate(0.5);
    transform: scale(0.9);
}

.bar-color-option:not(.active):hover,
.bar-color-palette:has(.active) .bar-color-option:not(.active):hover {
    opacity: 1;
    filter: saturate(1);
    transform: scale(1.25);
}

/* 선택된(.active) 버튼은 항상 크고 선명하게 강조합니다. */
.bar-color-option.active {
    transform: scale(1.1);
    opacity: 1;
    filter: saturate(1);
    box-shadow: 0 0 10px var(--glow-color, rgba(255, 255, 255, 0.9));
}
.bar-color-palette:has(.bar-color-option:hover:not(.active)) .bar-color-option.active {
    transform: scale(0.9);
    filter: saturate(1) brightness(0.8); /* 채도는 유지하고 밝기만 낮춥니다 */
}
/* 선택된(.active) 버튼은 항상 크고 선명하게 강조합니다. */

.bar-color-palette.locked .bar-color-option {
    opacity: 0.25;
    filter: saturate(0);
    pointer-events: none;   /* 클릭/호버 차단 */
    transform: none;        /* 확대 금지 */
}

/* 햄버거 버튼 */
.hamburger-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #eee;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 30;
    box-shadow: 0 5px 20px rgba(0,0,0,0.35);
    transition: background 0.15s ease, transform 0.1s ease;
}
.hamburger-btn:active {
    transform: translateY(1px);
    background: rgba(20, 20, 20, 0.9);
}

#bottom-hotzone {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;           /* 하단 감지 범위 - 취향에 맞게 48~96px */
    z-index: 9;             /* 패널(z=10)보다 낮게 두되, 이벤트는 받음 */
    background: transparent;
    pointer-events: auto;
}
.hamburger-btn { display: none; }


#control-panel,
#control-panel .control-label,
#control-panel .control-button,
.bar-color-option,
.hamburger-btn {
    /* 기본: 인터 우선(영문), 다음 프리텐다드 */
    font-family: 'Inter', 'Pretendard', system-ui, -apple-system, 'Segoe UI',
                 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
#control-panel .control-label { font-weight: 600; }
#control-panel .control-button { font-weight: 500; }

/* 한국어일 때: Pretendard 우선 */
html:lang(ko) #control-panel,
html:lang(ko) #control-panel .control-label,
html:lang(ko) #control-panel .control-button {
    font-family: 'Pretendard', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* font-weight: 600; */
}

/* 일본어일 때: Noto Sans JP 우선 + 가독성 강화 */
html:lang(ja) #control-panel,
html:lang(ja) #control-panel .control-label,
html:lang(ja) #control-panel .control-button {
    font-family: 'Noto Sans JP', 'Inter', 'Yu Gothic UI', 'Hiragino Sans', 'Meiryo', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}


/* 하단 힌트(처음 진입 안내용) */
/* .bottom-hint {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    font-size: 29px;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.363);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease; 

    z-index: 12; 
} */

.bottom-hint {
    position: fixed;
    left: 50%;
    bottom: 12px; /* 화면 하단에 더 가깝게 */
    transform: translateX(-50%);
    
    width: 135px; /* 바 너비 */
    height: 5px;  /* 바 두께 */
    background-color: rgba(255, 255, 255, 0.12); /* 반투명 흰색 */
    border-radius: 10px; /* 둥근 모서리 */

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 12;
}

/* 힌트 활성 상태에서 깜박임 */
body.hint-active .bottom-hint {
    opacity: 1;
    animation: hintBlink 1.8s ease-in-out infinite;
}

/* 패널이 올라와 있을 때(일시 정지 + 서서히 사라짐) */
body.hint-active.hint-paused .bottom-hint {
    animation: none;
    opacity: 0;
}
/* @keyframes hintBlink {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, 0px);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, 4px); 
    }
} */








/* 컨트롤 그룹 등장 애니메이션 기본값 */
#control-panel .control-group {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* START 이전: 패널은 얇게, 그룹은 숨김(높이 튐 방지) */
#control-panel.before-start {
    padding: 12px 18px;
    gap: 0;
}
#control-panel.before-start #resetButton { display: none; }
#control-panel.before-start #inputScreen { display: none; }
#control-panel.before-start #inputMic { display: none; }
#control-panel.before-start .control-group {
    display: none;
}

/* 오프닝 프레임: 투명+살짝 아래에서 시작 */
#control-panel.opening .control-group {
    opacity: 0;
    transform: translateY(6px);
}

/* 포커스 윤곽선까지 제거(선택) */
.control-button:focus { outline: none; box-shadow: none; }
.bar-color-option:focus { outline: none; }

/* START 말풍선 (토스 느낌) */
/* .start-tooltip {
    text-align: center;
    position: fixed;
    left: 50%;
    top: 0;
    transform: translate(-50%, -22px) scale(0.92);
    max-width: 520px;
    background: #ffffff;
    color: #111;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22), 0 2px 10px rgba(0,0,0,0.12);
    z-index: 35; 
    opacity: 0;
    pointer-events: none;
    font-size: 0.9rem;
    line-height: 1.45;
    transition: opacity 0.28s cubic-bezier(.2,.8,.2,1), transform 0.28s cubic-bezier(.2,.8,.2,1);
}
.start-tooltip.visible {
    opacity: 1;
    transform: translate(-50%, 260px) scale(1);
}*/

/* 
.start-tooltip {
    text-align: center;
    position: fixed;
    left: 50%;
    top: 0; 
    transform: translate(-50%, -300px) scale(0.92); 
    max-width: 520px;
    background: #ffffff;
    color: #111;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22), 0 2px 10px rgba(0,0,0,0.12);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    font-size: 0.9rem;
    line-height: 1.45;
    transition: opacity 0.28s cubic-bezier(.2,.8,.2,1),
                transform 0.28s cubic-bezier(.2,.8,.2,1);
    will-change: transform, opacity;
} */

.start-tooltip {
    text-align: center;
    position: fixed;
    left: 50%;
    top: 0;
    transform: translate3d(-50%, -320px, 0) scale(0.96); /* 시작 위치 더 위/작게 */
    max-width: clamp(280px, 72vw, 560px);
    background: #ffffff;
    color: #111;
    border-radius: 14px;
    padding: clamp(14px, 2.4vw, 18px) clamp(16px, 3vw, 22px);
    box-shadow: 0 18px 48px rgba(0,0,0,0.22), 0 6px 18px rgba(0,0,0,0.12);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    font-size: 0.9rem;
    line-height: 1.52;
    letter-spacing: -0.005em;
    transition: opacity 480ms cubic-bezier(.22,1,.36,1) 60ms,
                transform 480ms cubic-bezier(.22,1,.36,1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.start-tooltip .tip-body,
.start-tooltip .tip-minor { text-align: left;}
.start-tooltip.visible {
    opacity: 1;
    transform: translate(-50%, -170px) scale(1); /* 도착: 제자리 */
}

/* .start-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;                     
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;    
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.06));
} */
.start-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -6px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    box-shadow: -3px -3px 12px rgba(0,0,0,0.06);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
}

/* 언어 스위처(테스트용) */
.lang-switcher {
    position: fixed;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 101; /* [수정] 모달(100)보다 높게 설정 */
}
.lang-btn {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
}


.control-label { line-height: 1; }

/* '막대' 라벨만 살짝 위로 보정(필요시 -1~-3px로 조절) */
#control-panel .control-group .control-label[data-i18n="label.bar"] {
    margin-top: -3px;   /* -2 → -3~-5로 조절해 보세요 */
  }
  
  /* 팔레트 자체를 2px 아래로 */
  #control-panel .control-group .bar-color-palette {
    margin-top: 2px;    /* 0~4px 사이에서 조절 */
  }




  #display-overlay.boot-mask {
    background: #000;            /* 완전 검정에서 시작 */
    opacity: 1;
    transition: opacity 480ms ease;
}
/* 마스크 숨김 상태 */
#display-overlay.boot-mask.hidden {
    opacity: 0;
}

/* 초기 블러 → 해제 전환 */
body.booting #visualizer,
body.booting #control-panel,
body.booting #hamburger,
body.booting .bottom-hint {
    filter: blur(10px);
    transition: filter 480ms ease;
}




#display-overlay.boot-mask {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;      /* 기존 z-index:20 → 최상단 */
    opacity: 1;
    transition: opacity 480ms ease;
    pointer-events: none;
}
#display-overlay.boot-mask.hidden {
    opacity: 0;
}

/* 부팅 동안 UI는 블러 + 투명 → 첫 페인트 전 깜박임 차단 */
body.booting #visualizer,
body.booting #control-panel,
body.booting #hamburger,
body.booting .bottom-hint,
body.booting #startTooltip {
    filter: blur(10px);
    opacity: 0;
    transition: filter 480ms ease, opacity 360ms ease;
}

/* 
.start-tooltip .tip-strong { font-size: 1.2em; font-weight: 500; }
.start-tooltip .tip-body   { margin-top: 16px; font-size: 0.92em; opacity: .85; }
.start-tooltip .tip-minor  { margin-top: 8px; font-size: 0.79em; opacity: .68; letter-spacing: 0.005em; }

.start-tooltip {
    font-family: 'Inter', 'Pretendard', system-ui, -apple-system, 'Segoe UI',
                 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

html:lang(ko) .start-tooltip {
    font-family: 'Pretendard', 'Inter', system-ui, -apple-system, 'Segoe UI',
                 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-weight: 600;
}

html:lang(ja) .start-tooltip {
    font-family: 'Noto Sans JP', 'Inter', 'Yu Gothic UI', 'Hiragino Sans', 'Meiryo', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
} */




.start-tooltip .tip-strong { font-size: clamp(14px, 2.5vw, 16px); font-weight: 500; }
.start-tooltip .tip-body   { margin-top: 12px;  font-size: clamp(13px, 1.7vw, 15px);font-weight: 300; opacity: .90; }
.start-tooltip .tip-minor  { margin-top: 3px;  font-size: clamp(13px, 1.7vw, 15px);font-weight: 300; opacity: .90;}

/* START 말풍선 폰트 적용 */
.start-tooltip {
    font-family: 'Inter', 'Pretendard', system-ui, -apple-system, 'Segoe UI',
                 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* 한국어일 때 Pretendard 우선 */
html:lang(ko) .start-tooltip {
    font-family: 'Pretendard', 'Inter', system-ui, -apple-system, 'Segoe UI',
                 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-weight: 600;
}

/* 일본어일 때 가독성 강화 */
html:lang(ja) .start-tooltip {
    font-family: 'Noto Sans JP', 'Inter', 'Yu Gothic UI', 'Hiragino Sans', 'Meiryo', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}


/* 기본: 모든 컨트롤 그룹 숨김 */
#control-panel .control-group { display: none; }

/* START 이후에만 '막대' 그룹을 보이게 */
#control-panel:not(.before-start) .control-group:has(.control-label[data-i18n="label.bar"]) {
    display: grid;
}

/* 초기화 버튼은 항상 숨김 */
#resetButton { display: none !important; }

/* '막대/BAR' 라벨 숨김 */
#control-panel .control-group .control-label[data-i18n="label.bar"] { display: none; }

/* 라벨 제거 시 위 여백 보정 (선택) */
#control-panel .control-group .bar-color-palette { margin-top: 0; }








/* 광고 그룹 스타일 */
.ad-group {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    align-items: center;
    gap: 16px; /* 광고 사이의 간격 */
    padding-top: 14px;
    width: 100%;
    flex-wrap: wrap; /* 화면이 좁아지면 줄바꿈 */
}

/* 개별 광고 슬롯 스타일 */
.ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
}
#control-panel:not(.before-start) .ad-group {
    display: flex;
}


@media (max-width: 1024px) {
    /* 화면이 좁을 때, 지원이 불안정한 SCREEN 버튼을 숨깁니다. */
    #inputScreen {
        display: none !important;
    }

    /* 모바일에서는 컨트롤 패널을 더 작게 만듭니다. */
    #control-panel {
        gap: 8px;
        padding: 10px 15px;
    }

    /* 모바일에서는 색상 변경 외의 모든 컨트롤 그룹, 구분선, 광고를 숨깁니다. */
    #control-panel .control-group:not(:has(.bar-color-palette)),
    #control-panel .control-group-divider,
    #control-panel .ad-group {
        display: none !important;
    }

    /* START 이후에는 MIC 버튼도 숨겨서 UI를 더 단순하게 만듭니다. */
    #control-panel:not(.before-start) #inputMic {
        display: none !important;
    }
}

/* === 2단 레이아웃 스타일 시작 === */

#control-panel {
    flex-direction: column; /* 주축을 세로 방향으로 변경 */
    gap: 0; /* 전체 갭은 제거하고 각 row에서 개별 관리 */
}

.panel-top-row,
.panel-bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-top-row {
    width: 100%;                     /* 너비를 100%로 채움 */
    justify-content: space-between;  /* 양쪽 끝으로 정렬 */
    gap: 40px;
    /* padding: 0 15px;                 좌우 여백 */
    box-sizing: border-box;          /* 패딩을 너비에 포함시켜 계산 */
}
/* 아래 코드를 새로 추가하세요 */
.input-source-group {
    display: flex;
    gap: 10px; /* SCREEN, MIC 버튼 사이의 간격 */
}

.panel-bottom-row {
    /* padding: 14px 0; */
}

#control-panel:not(.before-start) .panel-top-row,
#control-panel:not(.before-start) .panel-bottom-row,
#control-panel:not(.before-start) .control-group-divider {
    display: flex;
}

/* START 이전 상태에서는 새 레이아웃 요소들도 숨김 */
#control-panel.before-start .panel-top-row,
#control-panel.before-start .panel-bottom-row,
#control-panel.before-start .control-group-divider {
    display: none;
}
/* === 2단 레이아웃 스타일 종료 === */


  .start-tooltip.shake {
      animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
  }








  .modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: rgba(40, 40, 40, 0.9);
    backdrop-filter: blur(10px);
    padding: 34px 28px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #eee;
    max-width: 500px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay:not(.hidden) .modal-content {
    transform: scale(1);
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}

.modal-content p {
    margin-bottom: 22px;
    line-height: 1.7;
    font-size: 0.99rem;
    color: #ccc;
}

.modal-content .modal-minor-text {
    font-size: 0.89rem;
    opacity: 0.7;
    margin-top: 0;  /* 위쪽 여백 제거 */
    margin-bottom: 0;  /* 아래쪽 여백 제거 */
    line-height: 1.5;  /* 줄 간격만 유지 */
}
.modal-content .modal-minor-text + .modal-minor-text {
    margin-top: 0;
}

.modal-buttons {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.modal-buttons .control-button {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.modal-buttons .modal-button-secondary {
    background-color: transparent;
    color: #aaa;
}
.modal-buttons .modal-button-secondary:hover {
    background-color: rgba(255, 255, 255, 0.112);
    color: #fff;
}
#welcome-ok:hover {
    background-color: #ffffff; /* 예시 색상 */
    color: #111;
}
#startup-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 180px; /* 로고 너비, 필요시 조절 */
    opacity: 1;
    z-index: 15;
    /* transition 속성 끝에 'filter'를 추가해주세요 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, filter 0.5s ease-out;

    /* ▼▼▼▼▼ 아래 filter 속성 한 줄을 추가해주세요 ▼▼▼▼▼ */
    /* filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 35px rgba(255, 255, 255, 0.5)); */
}

#startup-logo.hidden {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    pointer-events: none;
}
.mode-indicator {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-40%, -50%) scale(0.9);
    padding: 14px 26px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    letter-spacing: -2.5px;
    color: #fff;
    font-size: 2rem;
    letter-spacing: 4px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.mode-indicator.visible {
    opacity: 1;
    transform: translate(-40%, -50%) scale(1);
}
#lang-switcher {
    display: none;
}
.panel-bottom-row,
.ad-group,
.ad-slot {
    display: none !important;
}


.panel-bottom-row,
.ad-group,
.ad-slot {
    display: none !important;
}

/* 태블릿/모바일 경고 모달 */
#mobile-warning-modal {
    z-index: 200; /* welcome-modal(100)보다 높게 */
}

/* 태블릿 크기 이하(1024px 이하)에서 모달 표시 */
@media (max-width: 1024px) {
    #mobile-warning-modal {
        margin-right: 0px;
        padding: 15px;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .modal-content h2 {
        font-size: 22px;
    }
    .modal-content p {
        margin-bottom: 22px;  /* 문단 간격 */
        line-height: 1.5;  /* 줄 간격 */
        font-size: 13px;  /* 폰트 크기 */
        color: #ccc;  /* 텍스트 색상 */
    }
    #mobile-warning-modal.hidden {
        opacity: 0;
        pointer-events: none;
    }
    .modal-content .modal-minor-text {
        font-size: 13px;  /* 폰트 크기 */
        opacity: 0.7;  /* 투명도 */
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.5;
    }
}