/* 전체 화면 공통 설정 */
body {
  font-family: 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont,
               system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-align: center;
  background: #1a1a1a;
  color: #f0f0f0;
  margin: 0;
  padding: 0;  /* 공통: 기본 패딩 제거 */
}

/* 🔹 모바일(좁은 화면)에서만 바운스 방지용으로 body를 고정 */
@media (max-width: 768px) {
  body {
    overflow: hidden;
    height: 100%;
    position: fixed;   /* 모바일에서만 고정 */
    width: 100%;
    touch-action: manipulation;
  }
}



h2 { margin-top: 0; }
#resultArea h4 { margin-bottom: 5px; }

/* [수정] 검색 화면 전체 틀: 상단 고정 + 하단 스크롤 구조 */
#search-view {
    max-width: 700px;
    margin: 0 auto; /* 중앙 정렬 */
    background: linear-gradient(145deg, #2c3e50, #34495e);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Flex 레이아웃 적용 (핵심) */
    display: flex;
    flex-direction: column; /* 요소를 위에서 아래로 쌓음 */
    
    /* PC에서는 화면의 90% 높이만 사용 */
    height: 90vh; 
    max-height: 90vh;
    
    /* 내부 여백 */
    padding: 20px 25px 10px;
    box-sizing: border-box;
    
    /* PC용 둥근 모서리 */
    border-radius: 20px;
    margin-top: 20px; /* PC에서는 위쪽 여백 줌 */
}

/* 타이틀 */
.title-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
/* ▼▼▼ 제목 크기 수정 ▼▼▼ */
.title-wrapper h2 {
    font-size: clamp(1.5em, 6vw, 2.1em);
    font-weight: 700;
    color: #ffffff;
    margin: 0 20px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 193, 7, 0.5);
    white-space: nowrap;
}
/* ▲▲▲ 제목 크기 수정 ▲▲▲ */
.decoration-container {
    font-size: 2.5em;
    line-height: 1;
    opacity: 0.8;
}

/* 검색창 */
.search-box {
    display: flex;
    margin-bottom: 20px;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
#search-input {
    flex-grow: 1;
    padding: 10px 25px;
    font-size: 16px;
    border: none;
    outline: none;
    color: #333;
    background: #f0f0f0;
}

#search-input::placeholder {
  color: #212529;
}

#search-button {
    padding: 8px 24px;
    font-size: 13px;
    font-weight: bold;
    border: none;
    background: #ffc107;
    color: #212529;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 상단 토글 */
.main-view-controls { margin-bottom: 0; padding-bottom: 0; }
.view-toggle-buttons {
    display: grid; /* <-- flex에서 grid로 변경 */
    grid-template-columns: 1fr 1fr 1fr; /* <-- 3개의 동일한 컬럼 */
    gap: 10px;
}
.view-toggle-buttons + .view-toggle-buttons { margin-top: 10px; }
.view-toggle-buttons button {
    /* flex-grow: 1; <-- Grid를 사용하므로 이 속성은 제거 */
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #f0f0f0;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.view-toggle-buttons button.active {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}
.playlist-plus-icon {
    color: #1DB954;
    font-weight: bold;
    font-size: 0.95em;    /* 글자와 균형 맞게 소폭 축소 */
    margin-right: 4px;
    line-height: 1;
    position: relative; top: 0.02em; /* 미세 보정 */
}
.view-toggle-buttons button.active .playlist-plus-icon { color: #212529; }

/* [수정] 검색 목록 영역: 스크롤바 완전 숨김 + 터치 스크롤 가능 */
#search-results-container {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-top: 20px;

    /* 남은 공간 채우기 */
    flex-grow: 1;        
    height: auto;        
    min-height: 0;       
    
    /* 스크롤 설정 */
    overflow-y: auto;    
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; 

    /* ▼▼▼ [핵심] 파이어폭스, IE/Edge 스크롤바 숨김 ▼▼▼ */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

/* ▼▼▼ [핵심] 크롬, 사파리, 오페라 스크롤바 숨김 ▼▼▼ */
#search-results-container::-webkit-scrollbar {
    display: none; 
}


/* 결과 리스트 (내부 스크롤 완전 제거) */
#search-results {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: none;       /* ← calc(...) 제거 */
    overflow: visible;      /* ← auto 제거 */
}
#search-results::-webkit-scrollbar { display: none; } /* 안전막 */

/* 한 줄 */
.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.result-item:last-child { border-bottom: none; }
.result-item:hover {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0));
}

/* 곡 정보 */
.song-info {
    flex-grow: 1;
    margin-right: 10px;
    font-size: 1em;
    color: #ffffff;
    text-align: left;
}

/* 우측 아이콘 묶음 */
.list-buttons {
    display: flex;
    gap: 10px;
    align-items: center;           /* ← 줄마다 동일한 세로 중앙 */
}

/* 아이콘 공통 (중복 정리: padding 제거, hover 유지) */
.favorite-btn,
.playlist-add-btn,
.playlist-remove-btn {
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    color: #fff;
    line-height: 1;
}

/* 아이콘을 동일한 정사각 박스로 중앙 고정 → X 위치가 항상 동일 */
.result-item .list-buttons > .playlist-remove-btn,
.result-item .list-buttons > .playlist-add-btn,
.result-item .list-buttons > .favorite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    padding: 0;                    /* 들뜸 방지 */
    vertical-align: middle;
}

/* 상태/색상 */
.favorite-btn:hover, .playlist-add-btn:hover, .playlist-remove-btn:hover { transform: scale(1.2); }
.favorite-btn.favorited { color: #ffc107; }
.playlist-add-btn { color: #1DB954; }
.playlist-add-btn.added { color: #28a745; font-weight: bold; }
.playlist-remove-btn { color: #F44336; }

/* 플레이리스트 이동 화살표 */
.playlist-move-btn {
    font-size: 16px;
    background: none;
    border: none;
    color: #f0f0f0;
    padding: 5px 8px;
    cursor: pointer;
}
.playlist-move-btn:hover { color: #ffc107; }

/* 버튼 공통 */
#loadMoreBtn, #start-list-btn {
    margin-top: 20px;
    padding: 8px 24px;
    font-size: 13px;
    background-color: #ffc107;
    color: #212529;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}
#loadMoreBtn:hover:not(:disabled), #start-playlist-btn:hover:not(:disabled) { background-color: #e0a800; transform: scale(1.05); }
#loadMoreBtn:disabled, #start-playlist-btn:disabled { background-color: #6c757d; cursor: not-allowed; opacity: 0.6; }

/* 플레이어/비주얼 */
#visualizer { position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
#karaoke-container { max-width: 680px; margin: 0 auto; padding: 0; }
#playerContainer { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; border-radius: 12px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); margin-top: 15px; }
#ytplayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#click-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5; background-color: transparent; cursor: pointer;
}
#recommendation-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 45%;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    display: none; z-index: 10; pointer-events: none;
}
.overlay-bg-loaded { background-image: url('https://mykaraoke-korea.s3.ap-northeast-2.amazonaws.com/overlay.png'); }

/* ▼▼▼ [추가] 반주 감상 모드 재생 목록 스타일 ▼▼▼ */
#song-info-display {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #181818;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}
#song-info-display h4 {
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    flex-shrink: 0;
    color: #ffc107;
}
#listening-playlist-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex-grow: 1;
}
#listening-playlist-ul li {
    display: flex;
    align-items: center;
    padding: 0px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    font-size: 0.95em;
    transition: background-color 0.2s ease;
}
#listening-playlist-ul li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
#listening-playlist-ul li.active {
    background-color: rgba(255, 193, 7, 0.15);
    font-weight: bold;
    color: #ffc107;
}
.playing-indicator {
    color: #ffc107;
    margin-right: 12px;
    font-size: 1em;
    width: 20px;
    text-align: center;
}
/* ▲▲▲ [추가] 끝 ▲▲▲ */


button { 
    padding: 11px 22px; font-size: 16px; font-weight: bold; margin: 5px; cursor: pointer;
    border-radius: 25px; border: none; color: white; transition: all 0.2s ease-in-out;
}
button:focus, button:focus-visible { outline: none; }

/* 카라오케 하단 버튼 */
#karaoke-view footer button { padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
#karaoke-view .skip-btn { padding: 4px; width: 30px; height: 30px; font-size: 9px; }

#startBtn { background-color: #1DB954; }
#startBtn:hover:not(:disabled) { background-color: #1ED760; transform: scale(1.05); }
#startBtn:disabled { background-color: #555; cursor: not-allowed; }
#stopBtn { background-color: #d9534f; }
#stopBtn:hover { background-color: #F44336; transform: scale(1.05); }
#stopBtn:disabled { background-color: #555; cursor: not-allowed; }
#backBtn { background-color: #0056b3; color: #ffffff; }
#backBtn:hover { background-color: #007bff; transform: scale(1.05); }
#resultArea { margin-top: 0px; }
#downloadBtn { background-color: #007bff; }
#downloadBtn:hover { background-color: #0056b3; }

#options-btn-desktop { background-color: #138496; }
#options-btn-desktop:hover:not(:disabled) { transform: scale(1.05); background-color: #17a2b8; }
#options-btn-desktop:disabled { cursor: not-allowed; background-color: #555; }

#playback-controls { margin-top: 15px; }

/* 슬라이더/컨트롤 */
.audio-control-group {
    width: 100%; /* ◀◀◀ 이 한 줄을 추가하세요 */
    max-width: 500px; /* margin: 10px auto; 제거 */ display: grid;
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px;
    margin-bottom: 10px;
    grid-template-columns: 110px 1fr 60px;
    align-items: center; gap: 10px; flex-wrap: nowrap;
}
.audio-control-group label {
  display: block;       /* 중요: inline → block */
  width: 100%;          /* 셀 너비 꽉 채움 */
  text-align: right;    /* 오른쪽 끝에 맞춤 */
  margin: 0;
  padding: 0;
  line-height: 1.1;
}
#sync-offset-label { cursor: pointer; white-space: normal; }
.audio-control-group input[type="range"] { flex-grow: 1; }
.volume-percentage { /* width: 80px; 제거 */ text-align: left; font-weight: bold; color: #ffc107; }

#voice-volume-controls { margin-top: 5px; padding-top: 0px; border-top: none; color: white; display: none; }
#voice-volume-label { cursor: pointer; }
#monitoring-volume-label { cursor: pointer; }

#voice-volume-controls p { margin-bottom: 8px; }
#voice-volume-controls input[type="radio"] { vertical-align: middle; margin-right: 2px; }
#voice-volume-controls label { vertical-align: middle; margin-right: 8px; }

/* 메인 컨트롤 */
#main-toggle-controls {
    display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 10px; padding-top: 15px;
}
#main-toggle-controls > div { margin: 0; }
#main-controls-container > div { display: flex; justify-content: center; gap: 10px; }
#custom-audio-controls { display: flex; justify-content: center; gap: 30px; margin-bottom: 5px; }
#main-controls-container button { flex-grow: 1; flex-basis: 0; white-space: nowrap; }

/* 재생 영역 */
#seek-slider-container { width: 90%; margin: 1px auto 5px auto; display: flex; align-items: center; gap: 10px; }
#seek-slider { width: 100%; }
.skip-btn {
    background-color: #ffc107; border: none; color: #212529; font-weight: bold;
    border-radius: 50%; flex-shrink: 0; display: flex; justify-content: center; align-items: center;
}

/* 반응형 */
/* [수정] 모바일 화면 최적화 (600px 이하) */
@media (max-width: 600px) {
    /* 모바일에서는 여백 없이 꽉 채우기 */
    #search-view {
        width: 100%;
        max-width: 100%;
        height: 100vh;      /* 화면 높이 100% 사용 */
        max-height: 100vh;
        margin: 0;          /* 바깥 여백 제거 */
        border-radius: 0;   /* 둥근 모서리 제거 */
        border: none;       /* 테두리 제거 */
        padding: 10px 15px 5px; /* 내부 패딩 조절 */
    }

    /* 제목 크기 및 여백 조절 */
    .title-wrapper h2 { margin: 0 10px; }
    .decoration-container { width: 50px; }
    
    /* 입력창 및 버튼 크기 최적화 */
    #search-input { padding: 8px 12px; font-size: 14px; }
    #search-button { padding: 8px 16px; font-size: 14px; }
    .view-toggle-buttons button { padding: 8px 2px; font-size: 12px; }

    /* 결과 목록 하단 여백 확보 (더보기 버튼 가림 방지) */
    #search-results-container {
        margin-top: 10px;
        margin-bottom: 5px;
    }
    
    /* 리스트 아이템 패딩 조절 */
    .result-item { padding: 10px 12px; }
    
    /* 오디오 슬라이더 모바일 배치 */
    .audio-control-group {
        grid-template-columns: 75px 1fr 45px;
        gap: 5px;
    }
    .audio-control-group label { font-size: 13px; }
}

@media (max-width: 768px) {
    #main-controls-container button { font-size: 11px; padding: 7px 3px; }
    #custom-audio-controls button { font-size: 12px; padding: 7px 9px; }
}

/* 모달 */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); z-index: 2000;
    display: flex; justify-content: center; align-items: center;
}
.modal-content {
    background: #2c3e50; padding: 20px 30px; border-radius: 15px;
    width: 90%; max-width: 600px; max-height: 80vh;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative; display: flex; flex-direction: column;
}
.modal-content h3 { margin-top: 0; color: #ffc107; text-align: center; }
.modal-text-content {
    overflow-y: auto; text-align: left; line-height: 1.6; font-size: 14px;
}
.modal-text-content p { margin-bottom: 15px; }
.modal-close-btn {
    position: absolute; top: 10px; right: 20px; font-size: 28px; color: #aaa; cursor: pointer; transition: color 0.2s;
}
.modal-close-btn:hover { color: #fff; }

/* 녹음 중단 버튼 */
#stop-recording-btn {
    background-color: #d9534f; color: white; padding: 6px 16px; font-size: 13px; font-weight: bold;
    border: none; border-radius: 20px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#stop-recording-btn:hover { background-color: #F44336; transform: scale(1.05); }

/* 일시정지 오버레이 */
#pause-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url('https://mykaraoke-korea.s3.ap-northeast-2.amazonaws.com/overlay.png');
    background-size: contain; background-position: center bottom; background-repeat: no-repeat;
    display: flex; justify-content: center; align-items: center; z-index: 6;
    pointer-events: none; border-radius: 12px;
}

/* 감상모드 컨트롤 */
#listening-controls-panel .player-btn {
    background-color: transparent; border: 2px solid #f0f0f0; color: #f0f0f0;
    border-radius: 50%; width: 70px; height: 70px; display: flex; justify-content: center; align-items: center;
    font-size: 32px; padding: 0; margin: 0; transition: all 0.2s ease;
}
#listening-controls-panel .player-btn:not(.active):hover { border-color: #ffc107; color: #ffc107; }
#listening-controls-panel .player-btn.large { width: 85px; height: 85px; font-size: 42px; }
#listening-controls-panel .player-btn.small-text {
    width: 45px; height: 45px; font-size: 13px; font-weight: bold; border: 2px solid transparent;
    background-color: #ffc107; color: #1a1a1a; transition: border-color 0.2s ease;
}
#listening-controls-panel .player-btn.small-text:hover { border-color: #ffffff; background-color: #ffc107; color: #1a1a1a; }
#listening-controls-panel .player-btn.active { color: #1a1a1a; border-color: #ffc107; background-color: #ffc107; }
#listening-controls-panel .player-btn.active:hover { background-color: #e0a800; border-color: #e0a800; }

/* 시간 표시 / 시크 */
.time-display { font-size: 12px; color: #bdc3c7; min-width: 35px; text-align: center; white-space: nowrap; }
.seek-slider-style {
    -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
    background: #f0f0f0; border-radius: 5px; outline: none; transition: opacity .2s;
}
.seek-slider-style::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
    background: #007bff; cursor: pointer; border-radius: 50%; border: 3px solid #f0f0f0;
}
.seek-slider-style::-moz-range-thumb {
    width: 20px; height: 20px; background: #007bff; cursor: pointer;
    border-radius: 50%; border: 3px solid #f0f0f0;
}

/* 안내/배너 */
#power-guide { margin-top: 15px; cursor: pointer; color: #e0e0e0; font-size: 14px; opacity: 0.8; }
#headphone-guide {
    display: flex; align-items: center; justify-content: center; gap: 15px; padding: 15px; margin: 5px auto;
    background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; max-width: 90%;
}
#headphone-guide .guide-icon { font-size: 2em; color: #17A2B8; }
#headphone-guide p { margin: 0; font-size: 14px; line-height: 1.5; color: #f0f0f0; text-align: left; }

#karaoke-title { display: none; }

/* 진행바 */
#progress-container {
    width: 95%; max-width: 500px; margin: 15px auto 10px auto;
    display: flex; align-items: center; gap: 10px;
}
#progress-slider {
    -webkit-appearance: none; appearance: none; width: 100%; flex-grow: 1; height: 8px;
    background: rgba(255, 255, 255, 0.3); border-radius: 4px; outline: none; transition: opacity .2s;
    pointer-events: none;
}
#progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #ffc107;
    cursor: pointer; border-radius: 50%; border: 2px solid #1a1a1a;
}
#progress-slider::-moz-range-thumb {
    width: 18px; height: 18px; background: #ffc107; cursor: pointer;
    border-radius: 50%; border: 2px solid #1a1a1a;
}

/* 배너 */
#top-banner-container, #result-banner-container {
    display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
#top-banner-container { margin-bottom: 30px; }
#result-banner-container { margin-top: 25px; }
#top-banner-container img, #result-banner-container img { width: 100%; height: auto; display: block; }

/* ==================== ▼▼▼ 수정된 부분 ▼▼▼ ==================== */
#mic-meter-group { padding: 5px 15px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; margin-bottom: 5px; }
#mic-meter-group label { text-align: right; width: 110px; }
#mic-level-meter {
    -webkit-appearance: none; appearance: none; width: 100%; height: 18px; border-radius: 9px;
    overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1);
}
#mic-level-meter::-webkit-progress-bar { background-color: #333; }
#mic-level-meter::-webkit-progress-value { background-color: #4CAF50; transition: background-color 0.1s ease; }
#mic-level-meter.clipping::-webkit-progress-value { background-color: #f44336; }
#clipping-indicator { width: 45px; text-align: left; font-size: 14px; }
#mic-gain-label { cursor: pointer; }
/* ==================== ▲▲▲ 수정된 부분 ▲▲▲ ==================== */

/* 초소형 화면에서 제목 1줄 강제 맞춤 */
@media (max-width: 380px) {
    .title-wrapper { gap: 8px; }
    .title-wrapper h2 {
      font-size: clamp(1.1em, 4.6vw, 1.6em);
      margin: 0 8px; white-space: nowrap; min-width: 0;
    }
    .decoration-container { font-size: 1.6em; flex: 0 0 auto; }
}

/* 저장 버튼/인디케이터 정렬 */
.download-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: center; }
#saving-indicator { font-size: 11px; color: #ffc107; font-weight: bold; margin-left: 8px; }

/* 플레이리스트: 화살표(▲/▼) 사이 간격을 절반(10px -> 5px)으로 */
.playlist-move-btn + .playlist-move-btn { margin-left: -5px; }


/* --- Mobile-specific font/icon downscale for search list (−2px) --- */
@media (max-width: 480px) {
  /* 검색 목록 글자: 현재 값에서 정확히 2px 감소 */
  #search-results .result-item .song-info { font-size: calc(1em - 2px); }

  /* 우측 아이콘(별, 추가, 삭제)도 2px 감소 */
  .favorite-btn,
  .playlist-add-btn,
  .playlist-remove-btn { font-size: calc(20px - 2px); }

  /* 플레이리스트 이동 화살표(▲/▼) */
  .playlist-move-btn { font-size: calc(16px - 2px); }

  /* 모달 닫기 X 버튼 */
  .modal-close-btn { font-size: calc(28px - 2px); }
}

/* ===== 모바일: 플레이리스트 아이콘 우측 정렬 + 간격/크기 축소 ===== */
@media (max-width: 480px) {
  /* 한 줄 패딩 축소 */
  .result-item {
    padding: 6px 12px;
  }
  /* 제목이 더 오래 보이도록 줄 바꿈 금지 + 말줄임표 */
  .song-info {
    min-width: 0;
    margin-right: 6px;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 아이콘 묶음을 오른쪽 끝으로 밀기 + 간격 축소 */
  .list-buttons {
    margin-left: auto;   /* 오른쪽 정렬의 핵심 */
    gap: 6px;            /* 기본 10px → 6px */
  }
  /* 이동 화살표 버튼 크기/패딩 축소 */
  .list-buttons .playlist-move-btn {
    font-size: 14px;     /* 기본 16px → 14px */
    padding: 0;          /* 여백 제거 */
  }
  /* ×, +/✓, ★ 아이콘 박스 축소 */
  .list-buttons .playlist-remove-btn,
  .list-buttons .playlist-add-btn,
  .list-buttons .favorite-btn {
    width: 1.1em;        /* 기본 1.25em → 1.1em */
    height: 1.1em;
    font-size: 18px;     /* 기본 20px → 18px */
  }
  /* ▲ ▼ 사이 간격 더 좁게(기본 -5px 적용을 모바일에서 더 미세 조정) */
  .playlist-move-btn + .playlist-move-btn {
    margin-left: -6px;   /* 아이콘 붙여서 공간 절약 */
  }
}

/* ===== 모바일: 플레이리스트 아이콘(▲ ▼ ×)만 우측 정렬 + 동일 간격 ===== */
@media (max-width: 480px) {
  /* 아이콘 묶음을 오른쪽 끝으로 밀고, flex gap으로 간격 통일 */
  .list-buttons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;               /* ← 세 아이콘 간격을 동일하게 */
  }

  /* 즐겨찾기(★) 숨김 */
  .favorite-btn {
    display: none !important;
  }

  /* 남은 아이콘(▲ ▼ ×)의 크기/여백 정리 */
  .playlist-move-btn,
  .playlist-remove-btn {
    padding: 0;
    width: 1.2em;
    height: 1.2em;
    font-size: 18px;
    line-height: 1;
  }

  /* 화살표 사이 특수 마진이 있었다면 무효화해서 '동일 간격' 보장 */
  .playlist-move-btn + .playlist-move-btn {
    margin-left: 0 !important;
  }
}

/* === Banners (result banner) === */
#result-banner-container {
  display: block;
  max-width: 680px;
  margin: 16px auto 8px auto; /* 아래쪽으로 더 떨어뜨림 */
}

/* 모바일: '반주 감상' 버튼 그룹을 하단 광고 100px 위에 고정 */
@media (max-width: 768px) {
  #karaoke-view.is-listening #listening-controls-panel {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    
    /* ▼▼▼ [수정] calc()를 제거하고 !important를 추가하여 강제로 위치를 변경합니다 ▼▼▼ */
    /* (90px을 150px로 늘려 UI를 위로 60px 이동시킵니다) */
    bottom: 150px !important; 
    
    width: min(680px, calc(100% - 24px));
    z-index: 1001; /* 배너(z-index:1000)보다 위 */
  }
}
/* 모바일: 하단 컨트롤/볼륨은 고정 유지, 플레이리스트가 더 많이 보이도록 아래 여백 확보 */
@media (max-width: 768px) {
  /* 하단 고정 UI(버튼/볼륨)가 가리는 높이만큼 아래 패딩 추가 */
  #song-info-display {
    /* 컨트롤(≈64px) + 볼륨(≈64px) + 간격/여유(≈80px) + 안전영역 */
    padding-bottom: calc(208px + env(safe-area-inset-bottom, 0px));
  }

  /* 리스트 밀도 약간 압축 → 화면에 더 많은 항목 노출 */
  #song-info-display h4 {
    margin: 0 0 6px 0;
    padding-bottom: 6px;
  }
  #listening-playlist-ul li {
    padding: 0px 10px;  /* 기본 12px → 8~9px 정도로 축소 */
  }
}

/* 모바일: '반주 감상' 재생 목록(#song-info-display)을 화면 전체에 보이게 */
@media (max-width: 768px) {
  /* 감상 모드일 때만 적용 */
  #karaoke-view.is-listening #song-info-display {
    position: fixed;            /* ← absolute(플레이어 내부) → fixed(화면 기준) */
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, 100vw);   /* 플레이리스트 폭을 메인 컨테이너와 일치 */
    top: 0;                     /* 상단부터 시작 */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 208px);
    /* ↑ 하단 UI가 가리는 높이만큼 비워줌 (버튼≈64px + 볼륨≈64px + 여유 80px) */
    height: auto;
    display: flex !important;   /* 혹시 JS가 display:none 유지해도 강제로 표시 */
    z-index: 900;               /* 하단 버튼/볼륨(z-index:1001/1002) 아래에 깔리게 */
    box-sizing: border-box;
    padding: 15px;              /* 기존 패딩 유지 */
    background-color: #181818;  /* 기존 배경 유지 */
  }

  /* 리스트 영역은 그대로 스크롤 가능해야 하므로 유지/강조 */
  #karaoke-view.is-listening #song-info-display #listening-playlist-ul {
    overflow-y: auto;
    flex-grow: 1;
  }
}

/* 모바일: 반주 감상 플레이 리스트 높이를 30% 줄여서(= 화면의 70%) 버튼과 겹침 방지 */
@media (max-width: 768px) {
  #karaoke-view.is-listening #song-info-display {
    /* 이전에 bottom: ... 로 잡아둔 것을 무시하고 명확히 높이 지정 */
    bottom: auto !important;
    top: 0;
    /* 70vh = 기존 대비 30% 축소. 
       단, 하단 고정 UI(버튼/볼륨) 영역보다 절대 크게 잡히지 않도록 안전 한도도 함께 적용 */
    height: min(45vh, calc(100vh - (env(safe-area-inset-bottom, 0px) + 208px)));
    overflow: hidden; /* 헤더+리스트 구조 유지 */
  }

  /* 리스트는 내부 스크롤 */
  #karaoke-view.is-listening #song-info-display #listening-playlist-ul {
    overflow-y: auto;
  }
}

/* Tablet 전용: '반주 감상' 중앙 버튼 그룹을 400px 아래로 */
@media (min-width: 769px) and (max-width: 1024px) {
  #karaoke-view.is-listening #listening-controls-panel {
    position: fixed;
    left: 50%;
    top: calc(50% + 50px);   /* ← 여기 숫자만 바꾸면 더 내리거나 올릴 수 있음 */
    transform: translateX(-50%);
    bottom: auto;             /* 혹시 bottom으로 고정된 게 있으면 무효화 */
    width: min(800px, calc(100% - 32px));
    z-index: 1001;
  }
}

/* 데스크톱: 반주 감상 재생목록 오른쪽 스크롤바(사이드바) 숨기기 */
@media (min-width: 1025px) {
  #karaoke-view.is-listening #listening-playlist-ul {
    overflow-y: auto;         /* 스크롤은 유지 */
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
    padding-right: 8px;       /* 텍스트가 너무 오른쪽에 붙지 않게 약간 여유 */
  }
  #karaoke-view.is-listening #listening-playlist-ul::-webkit-scrollbar {
    width: 0; height: 0;      /* Chrome/Safari */
  }
}

/* 모바일: '전체 검색' 결과(#search-results)에서 즐겨찾기 ★ 다시 보이기 */
@media (max-width: 480px) {
  /* 이전에 .favorite-btn을 숨긴 규칙을 덮어씀 */
  #search-view #search-results .favorite-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.1em;      /* 기존 아이콘 크기와 균형 */
    height: 1.1em;
    font-size: 18px;
  }

  /* 아이콘 묶음 간격 약간만 띄우기(필요시 조절) */
  #search-view #search-results .list-buttons {
    gap: 8px;
  }
}




\n
/* === Recorded controls: center on screen; slider centered between -10s/+10s === */
#resultArea { 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* ◀◀◀ stretch를 center로 변경 */
    max-width: 500px;   
    margin-left: auto; 
    margin-right: auto;
}
#recorded-controls {
  position: relative;
  display: none;
  margin: 12px auto;
  /* grid: left btn | slider | right btn */
  display: grid;
  grid-template-columns: auto var(--rec-slider-width, 500px) auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Ensure the slider occupies the middle column width exactly */
#recorded-seek-slider { width: 100%; }
/* Centered top label */
#recorded-time-center {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; color: #eaeaea;
}

/* =================================== */
/* ▼▼▼ 녹음 결과 컨트롤러 스타일 수정 ▼▼▼ */
/* =================================== */

#recorded-controls {
  /* grid 레이아웃을 5개 컬럼으로 재정의 */
  display: grid;
  grid-template-columns: auto auto 1fr auto auto; /* 버튼, 시간, 슬라이더, 시간, 버튼 */
  align-items: center;
  gap: 12px; /* 요소 사이의 간격 */
  width: 100%;
  max-width: 500px; /* 전체 컨트롤러의 최대 너비 */
  margin: 12px auto;
}

/* 슬라이더 길이 조절 */
#recorded-seek-slider {
  width: 100%; /* grid의 1fr 영역을 꽉 채움 */
}

/* 시간 표시 스타일 (버튼 위 중앙 대신, 슬라이더 양 옆으로 배치) */
#recorded-current-time, #recorded-duration {
  font-size: 12px;
  color: #bdc3c7;
  font-variant-numeric: tabular-nums;
}
#recorded-current-time { text-align: right; }
#recorded-duration { text-align: left; }

/* -10s, +10s 버튼 스타일 수정 */
#recorded-back-10, #recorded-forward-10 {
  position: relative;
  top: -8px; /* 음수 값을 조절해 버튼을 위로 올립니다. */
  background-color: #ffc107; /* % 색상과 동일하게 */
  color: #212529;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  
  /* 크기 줄이기 */
  padding: 6px 0;
  width: 55px; /* 버튼 너비 */
  font-size: 13px;
  
  transition: background-color 0.2s ease;
}

#recorded-back-10:hover, #recorded-forward-10:hover {
  background-color: #e0a800;
}

/* 클릭 가능한 모든 볼륨/설정 라벨에 손 모양 커서 적용 */
#mic-gain-label,
#accompaniment-volume-label,
#monitoring-volume-label,
#voice-volume-label,
#sync-offset-label {
  white-space: normal;   /* 둘 다 동일하게 줄바꿈 허용 */
}
#speed-slider-label {
  cursor: pointer;
}

/* 항상: 반주 감상 재생목록의 우측 스크롤바 숨김 (스크롤은 가능) */
#listening-playlist-ul {
  overflow-y: auto;         /* 스크롤 유지 */
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
}
#listening-playlist-ul::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari */

/* === PATCH: Time centered above -10s/+10s buttons for '녹음 완료 후' controls === */
#recorded-controls.has-stacks {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 500px;
  /* ▼▼▼ [수정] 상단 여백을 없애고 하단 여백을 줄여 간격을 더 좁힙니다. ▼▼▼ */
  margin: 0 auto 0px;
}

#recorded-controls .rc-stack {
  display: flex;
  flex-direction: column;
  align-items: center;   /* center time directly above the button */
  gap: 6px;
  min-width: 60px;
}

#recorded-controls .rc-stack .time-display {
  font-size: 12px;       /* small text as requested */
  color: #bdc3c7;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

#recorded-seek-slider { width: 100%; }

@media (max-width: 420px) {
  #recorded-controls .rc-stack .time-display { font-size: 13px; }
}

/* 노래방 하단 컨트롤과 광고 배너 겹침 방지 */
#karaoke-view footer {
    /* padding-bottom: 100px; */ /* <-- 기존 padding 제거 */
    margin-bottom: 120px; /* <-- 하단 광고 배너를 위한 여백 확보 (margin으로 변경) */
}

/* '듣기' 버튼 비활성화 시 스타일 */
#play-sync-btn:disabled {
    background-color: #555; /* 다른 비활성화 버튼과 동일한 어두운 색 */
    color: #999;           /* 텍스트 색상도 어둡게 */
    cursor: not-allowed;
    opacity: 0.7;         /* 약간 투명하게 */
}

/* === [추가] 시작 버튼 모드별 색상 === */
#start-list-btn.karaoke-mode {
    background-color: #1DB954; /* 노래방 시작 (녹색) */
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(29, 185, 84, 0.3);
}
#start-list-btn.karaoke-mode:hover:not(:disabled) {
    background-color: #1ED760;
    transform: scale(1.05);
}

#start-list-btn.listening-mode {
    background-color: #007bff; /* 반주 감상 시작 (파란색) */
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
#start-list-btn.listening-mode:hover:not(:disabled) {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* === [수정] 슬라이더 1% 조절 버튼 (삼각형) === */
.slider-widget {
    display: flex;
    align-items: center;
    /* flex-grow: 1; 제거 */
    min-width: 0; /* flex-shrink 방지 */

    /* ▼▼▼ [제거] margin-left/right 제거 ▼▼▼ */
    /* margin-left: 10px; */
    /* margin-right: 10px; */
    /* ▲▲▲ [제거] 끝 ▲▲▲ */
}

.slider-widget input[type="range"] {
    flex-grow: 1;
    margin: 0; /* 버튼과 슬라이더 사이 간격 제거 */
    width: 100%; /* 남은 공간 꽉 채우기 */
}

.slider-btn {
    font-family: monospace;
    font-size: 12px; /* 10px -> 12px */
    font-weight: bold;
    color: #ffffff;
    background-color: #ffc107;
    border: none;
    border-radius: 5px; /* 4px -> 5px */
    width: 22px;  /* 18px -> 22px (약 22% 증가) */
    height: 22px; /* 18px -> 22px (약 22% 증가) */
    
    /* ▼▼▼ [수정] Flex를 사용한 정중앙 정렬 (padding-top 제거) ▼▼▼ */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* line-height 초기화 */
    padding: 0; /* padding-top 제거 */
    /* ▲▲▲ [수정] 끝 ▲▲▲ */
    
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, transform 0.1s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.slider-btn:hover {
    background-color: #e0a800;
}
.slider-btn:active {
    transform: scale(0.9);
}

/* 모바일에서 버튼 크기 약간 축소 */
@media (max-width: 480px) {
    .slider-btn {
        width: 20px !important;  /* 16px -> 20px (강제 적용) */
        height: 20px !important; /* 16px -> 20px (강제 적용) */
        font-size: 11px;
        border-radius: 4px;
        
        /* ▼▼▼ [수정] Flex 정렬이 상속됨 (padding-top 제거) ▼▼▼ */
        line-height: 1;
        padding: 0;
        /* ▲▲▲ [수정] 끝 ▲▲▲ */
    }
}

/* === [추가] '결과 확인' 영역의 슬라이더가 짧아지는 문제 수정 === */
#resultArea .audio-control-group {
    width: 100%;
    margin-left: auto;   /* ◀◀◀ 이 코드를 추가하여 중앙 정렬을 복원합니다 */
    margin-right: auto;  /* ◀◀◀ 이 코드를 추가하여 중앙 정렬을 복원합니다 */
    box-sizing: border-box; /* ◀◀◀ (중요) 패딩이 너비를 밀어내지 않도록 합니다 */
}



/* === Practice wait state: enlarge gap between player box and controls === */
#karaoke-view.practice-wait #playerContainer {
  /* create phantom space (match slider+status row height when '연습 중...') */
  margin-bottom: 64px; /* mobile default */
}
@media (min-width: 769px) {
  #karaoke-view.practice-wait #playerContainer {
    margin-bottom: 48px; /* desktop/tablet */
  }
}



/* force show seek slider */
#seek-slider-container { display: flex !important; }

/* ================================================= */
/* ▼▼▼ [추가 수정] 상단 배너 고정 및 새로고침 버튼 스타일 ▼▼▼ */
/* ================================================= */

/* 1. 상단 배너와 제목이 검색 시 위로 밀리거나 찌그러지지 않게 강제 고정 */
#top-banner-container,
.title-wrapper,
.search-box,
.main-view-controls {
    flex-shrink: 0 !important; /* 공간이 부족해도 절대 줄어들지 않음 */
}

/* 2. 새로고침(앱 초기화) 버튼 스타일 (크고 잘 보이게) */
#reload-button {
    padding: 10px 20px;       /* 내부 여백을 넉넉하게 */
    font-size: 15px;          /* 글자 크기 키움 */
    font-weight: bold;
    color: #ffffff;
    background-color: #d9534f; /* 눈에 띄는 붉은 계열 (또는 원하시는 색상) */
    border: none;
    border-radius: 8px;       /* 모서리 둥글게 */
    cursor: pointer;
    white-space: nowrap;      /* 줄바꿈 방지 */
    margin-left: 8px;         /* 입력창과의 간격 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* 입체감 */
    transition: transform 0.1s ease;
}

#reload-button:active {
    transform: scale(0.95);   /* 눌렀을 때 살짝 작아지는 효과 */
}

/* 모바일에서 버튼 크기 최적화 */
@media (max-width: 600px) {
    #reload-button {
        padding: 10px 15px;
        font-size: 14px;
    }
}

/* 데스크톱(폭 1025px 이상)에서는 body 고정을 풀고 스크롤 허용 */
@media (min-width: 1025px) {
  body {
    position: static;
    height: auto;
    overflow-y: auto;
  }
}