:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --btn-bg: #ffffff;
    --btn-text: #000000;
    --sub-text: #aaaaaa;
    --shadow: rgba(255, 255, 255, 0.12);
    --selector-bg: rgba(125, 125, 125, 0.15);
}

body.light-mode {
    --bg-color: #ffffff;
    --text-color: #000000;
    --btn-bg: #000000;
    --btn-text: #ffffff;
    --sub-text: #666666;
    --shadow: rgba(0, 0, 0, 0.08);
    --selector-bg: rgba(0, 0, 0, 0.05);
}

/* --- 💻 PC 버전 (원래 코드 완벽 복구: 건드리지 않음) --- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

#top-logo {
    position: fixed; top: 30px; left: 30px; font-size: 1.5rem; font-weight: 700;
    cursor: pointer; letter-spacing: -1px; z-index: 1000;
    transition: opacity 0.3s ease, color 0.5s;
}
#top-logo:hover { opacity: 0.6; }

.theme-toggle {
    position: fixed; top: 30px; right: 30px; padding: 10px 22px; cursor: pointer;
    border: 2px solid var(--text-color); background: transparent; color: var(--text-color);
    border-radius: 30px; font-weight: 700; font-size: 0.8rem; z-index: 1000;
    transition: all 0.4s;
}
.theme-toggle:hover { background-color: var(--text-color); color: var(--bg-color); }

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: auto 0; /* 🚀 핵심: 화면이 남으면 알아서 위아래 여백을 줘서 중앙으로 감 */
    padding: 100px 0 60px 0; /* 🚀 위아래 로고와 푸터에 부딪히지 않게 안전 거리 확보 */
}
.hidden { display: none !important; }

h1 { font-size: 4rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -1px; }
p { margin-top: 0; font-size: 1.1rem; }

#beat-lights { display: flex; gap: 15px; margin-bottom: 10px; height: 30px; align-items: center; justify-content: center; }
.light { width: 12px; height: 12px; border-radius: 50%; background-color: var(--sub-text); opacity: 0.1; transition: all 0.2s ease; }
.light.active { background-color: var(--text-color); opacity: 1; transform: scale(1.4); box-shadow: 0 0 15px var(--text-color); }

.chord-sequence-container { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; min-height: 12rem; margin: 10px 0; }
.chord-item { font-weight: 700; transition: all 0.4s; white-space: nowrap; }
.chord-root { font-size: 1em; line-height: 1; }
.chord-acc { font-size: 0.6em; vertical-align: text-top; margin-left: 0.02em; }
.chord-quality { font-size: 0.55em; vertical-align: baseline; }

#chord-prev { font-size: 3rem; opacity: 1; width: 25%; text-align: right; }
#chord-current { font-size: 10rem; opacity: 1; width: 50%; text-align: center; }
#chord-next { font-size: 3rem; opacity: 1; width: 25%; text-align: left; }

.controls { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 10px; }
.mode-content-wrapper { height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }

.mode-selector { display: flex; gap: 10px; margin-bottom: 20px; background: var(--selector-bg); padding: 5px; border-radius: 30px; }
.mode-btn { padding: 10px 25px; border: none; background: transparent; color: var(--sub-text); cursor: pointer; font-weight: 700; font-family: 'Montserrat', sans-serif; border-radius: 25px; transition: all 0.2s ease; }
.mode-btn.active { background: var(--text-color); color: var(--bg-color); }

.start-btn { padding: 15px 45px; font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--btn-text); background-color: var(--btn-bg); border: none; border-radius: 50px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 6px var(--shadow); transition: all 0.3s; margin-top: 20px; }
.start-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 15px var(--shadow); opacity: 0.95; }
.start-btn:active { transform: translateY(-1px); }

.top-controls { display: flex; gap: 10px; margin-bottom: 15px; }
#filter-toggle-btn, #history-toggle-btn { background: none; border: 1px solid var(--sub-text); color: var(--sub-text); padding: 5px 15px; border-radius: 20px; cursor: pointer; font-size: 0.7rem; transition: all 0.3s; letter-spacing: 1px; font-family: 'Montserrat', sans-serif; font-weight: 700; }
#filter-toggle-btn:hover, #history-toggle-btn:hover { border-color: var(--text-color); color: var(--text-color); }

/* 🕐 Recent chords 패널 (우측 슬라이드) */
#history-panel {
    position: fixed;
    top: 0; right: 0;
    width: 240px;
    max-width: 85vw;
    height: 100vh;
    background: var(--selector-bg);
    border-left: 1px solid rgba(125,125,125,0.2);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transform: translateX(0);
    transition: transform 0.25s ease;
}
#history-panel.closed {
    transform: translateX(100%);
    pointer-events: none;
}
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(125,125,125,0.2);
}
.history-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: var(--sub-text);
    text-transform: uppercase;
}
#history-close-btn {
    background: none;
    border: none;
    color: var(--sub-text);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 6px;
    transition: color 0.2s;
}
#history-close-btn:hover { color: var(--text-color); }

#history-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
}
.history-empty {
    font-size: 0.85rem;
    color: var(--sub-text);
    text-align: center;
    padding: 20px;
    font-style: italic;
}
.history-entry {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 4px;
}
.history-entry:hover { background: rgba(125,125,125,0.2); }
.history-entry-chord {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-color);
}
.history-entry-time {
    font-size: 0.75rem;
    color: var(--sub-text);
    margin-left: auto; /* 시간은 오른쪽 끝에 붙게 */
}

#filter-panel { background: var(--selector-bg); padding: 25px; border-radius: 25px; width: 1100px; margin-bottom: 20px; transition: all 0.3s ease; display: flex; gap: 30px; text-align: left; }
.filter-col { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 200px; }
.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(125,125,125,0.2); padding-bottom: 5px; }
.filter-group-title { font-size: 0.7rem; font-weight: 700; color: var(--sub-text); text-transform: uppercase; letter-spacing: 1px; }

.chord-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.chord-pill { padding: 6px 12px; border: 1px solid var(--sub-text); border-radius: 15px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; color: var(--sub-text); font-weight: 700; }
.chord-pill.active { background: var(--text-color); color: var(--bg-color); border-color: var(--text-color); }

.bulk-actions { display: flex; gap: 8px; }
.bulk-btn { background: none; border: none; color: var(--sub-text); cursor: pointer; font-size: 0.6rem; font-weight: 700; text-decoration: underline; padding: 0; }

.setting-group { display: flex; flex-direction: column; align-items: center; gap: 15px; background: var(--selector-bg); padding: 20px 30px; border-radius: 25px; width: 340px; }
.input-row { display: flex; align-items: center; gap: 15px; width: 100%; justify-content: center; }
input[type="range"] { -webkit-appearance: none; width: 100%; height: 6px; background: rgba(125, 125, 125, 0.2); border-radius: 5px; outline: none; margin: 10px 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--text-color); border-radius: 50%; cursor: pointer; transition: transform 0.2s; }
input[type="number"] { background: rgba(125, 125, 125, 0.1); border: 1px solid var(--sub-text); color: var(--text-color); padding: 5px; font-family: 'Montserrat', sans-serif; font-size: 1.1rem; width: 60px; border-radius: 8px; text-align: center; }

#back-btn { margin-top: 20px; background: none; border: none; color: var(--sub-text); cursor: pointer; text-decoration: underline; font-family: 'Montserrat', sans-serif; transition: color 0.4s; }

/* --- 🎛️ 가중치 설정 패널 (수정됨) --- */
#weight-config-panel {
    flex-basis: 100%;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(125, 125, 125, 0.2);
    display: none;
}
/* 🚀 가중치 직접 입력창 디자인 (다이어트 버전) */
.weight-value-input {
    width: 30px; /* 기존 35px에서 살짝 줄임 */
    height: 18px; /* 높이를 명시해서 박스를 더 얄쌍하게 */
    background: rgba(125, 125, 125, 0.1);
    border: 1px solid var(--sub-text);
    color: var(--text-color);
    border-radius: 4px; /* 둥글기도 살짝 작게 */
    text-align: center;
    font-size: 0.65rem; /* 글씨 크기 축소 (기존 0.75rem) */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* 🚀 핵심: 700(Bold)에서 400(Regular)으로 변경 */
    padding: 0; /* 불필요한 안쪽 여백 제거 */
}

/* 입력창에 생기는 위아래 화살표(스피너) 숨기기 (유지) */
.weight-value-input::-webkit-outer-spin-button,
.weight-value-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.weight-row-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 가로 4칸 정렬 */
    gap: 15px;
    width: 100%;
}
.weight-row { display: flex; flex-direction: column; gap: 5px; }
.weight-label { font-size: 0.75rem; font-weight: 700; color: var(--sub-text); }
.weight-slider-wrapper { display: flex; align-items: center; gap: 10px; }
.weight-slider-wrapper input { margin: 0; }
.weight-value { font-size: 0.8rem; font-weight: 700; min-width: 25px; color: var(--text-color); }

#weight-toggle-btn {
    background: none; border: none; color: var(--sub-text);
    cursor: pointer; font-size: 0.7rem; font-weight: 700;
    text-decoration: underline; padding: 0; transition: color 0.3s;
    margin-top: 15px; align-self: flex-end;
}
#weight-toggle-btn:hover { color: var(--text-color); }

/* --- 📱 모바일 버전 (850px 이하 화면에서만 발동) --- */
@media (max-width: 850px) {
    body {
        height: auto;
        min-height: 100vh;
        overflow-y: auto; /* 세로 스크롤 생성 */
        padding: 80px 10px 40px 10px; /* 로고와 푸터 여백 */
    }

    section {
        margin: 0; /* PC에서 준 margin: auto를 해제 */
        padding: 20px 0; /* 위쪽 100px 여백도 모바일은 좁으니까 20px로 줄임 */
    }

    #top-logo { display: none !important; }
    .theme-toggle { top: 20px; right: 15px; padding: 8px 16px; font-size: 0.7rem; }

    #signin-btn {
        right: auto !important; /* 기존에 오른쪽으로 190px 당기던 힘을 무력화 */
        left: 15px !important;  /* 왼쪽에서 15px 띄워서 로고 자리에 안착 */
    }
    h1 { font-size: 2.2rem; margin-top: 20px; }

    /* 필터 패널이 모바일에서 세로로 예쁘게 쌓이도록 */
    #filter-panel {
        width: 90%;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    /* 코드 글자 크기 축소 */
    #chord-current { font-size: 4.5rem; width: 100%; }
    #chord-prev, #chord-next { font-size: 1.5rem; width: 25%; }
    .chord-sequence-container { min-height: 8rem; gap: 5px; }

    .setting-group { width: 90%; padding: 20px 15px; }
    .mode-content-wrapper { height: auto; min-height: 150px; }
}
#top-bar-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 80px;
    background-color: var(--bg-color);
    z-index: 990; /* 로고와 버튼(1000) 바로 뒤에 배치 */
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================== */
/* 🎹 보이싱 라이브러리 화면 */
/* =============================================================== */

/* 퀄리티/루트 셀렉터 영역 — practice 화면의 #filter-panel 레이아웃을 공유 */
.filter-panel-layout {
    background: var(--selector-bg);
    padding: 25px;
    border-radius: 25px;
    width: 1100px;
    max-width: 95%;
    display: flex;
    gap: 30px;
    text-align: left;
    box-sizing: border-box;
}
#voicing-selectors {
    margin-bottom: 10px;
}

/* pill은 single select — 텍스트 선택 방지 */
#voicing-root-pills .chord-pill,
.voicing-quality-group .chord-pill {
    user-select: none;
}

/* 모바일: 세로 스택 (filter-panel 동일 패턴) */
@media (max-width: 850px) {
    .filter-panel-layout {
        width: 95%;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
}

/* MIDI 연결 상태 바 */
#midi-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 6px 0;
    justify-content: center;
    flex-wrap: wrap;
}
#midi-connect-btn {
    background: transparent;
    color: var(--text-color);
    border: 1.5px solid var(--sub-text);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
}
#midi-connect-btn:hover {
    border-color: var(--text-color);
}
#midi-connect-btn.connected {
    background: #4a90e2;
    color: #fff;
    border-color: #4a90e2;
}
#midi-status {
    font-size: 0.85rem;
    color: var(--sub-text);
}
#midi-status.connected {
    color: #4a90e2;
    font-weight: 600;
}

/* 가상 건반 (88건반, 가로 스크롤) */
#piano-keyboard {
    position: relative;
    width: 90%;
    max-width: 900px;
    height: 150px;
    margin: 20px 0 10px 0;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    /* flex 정렬 제거 — scroll이 동작하려면 내부가 수축되면 안 됨 */
}
.piano-keys {
    position: relative;
    display: flex;
    height: 100%;
    width: max-content; /* 내부 건반들 총 너비만큼 자연스레 늘어나게 */
    flex-shrink: 0;
}
.piano-key {
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s ease;
    flex-shrink: 0;
}
.piano-key.white {
    width: 32px;
    height: 100%;
    background: #ffffff;
    border: 1px solid #333;
    border-radius: 0 0 4px 4px;
    position: relative;
    z-index: 1;
}
.piano-key.black {
    position: absolute;
    width: 20px;
    height: 60%;
    background: #111;
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    z-index: 2;
    top: 0;
}
.piano-key.white.active { background: #4a90e2; }
.piano-key.black.active { background: #2a6ac0; }

/* C 건반에 다는 옥타브 라벨 (C2, C3, C4 ...) */
.piano-key-label {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: #888;
    pointer-events: none;
    user-select: none;
    font-weight: 500;
}
.piano-key.white.active .piano-key-label {
    color: #fff;
}

/* 저장된 보이싱 리스트 */
#voicing-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.voicing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--selector-bg);
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.voicing-row:hover { background: rgba(125,125,125,0.25); }
.voicing-row.active { background: rgba(74,144,226,0.2); border: 1px solid #4a90e2; }
.voicing-row-degrees {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-color);
    letter-spacing: 2px;
}
.voicing-row-notes {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--sub-text);
    letter-spacing: 1px;
}
.voicing-row-meta {
    font-size: 0.7rem;
    color: var(--sub-text);
}
.voicing-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.voicing-practice-btn {
    background: none;
    border: 1.5px solid var(--sub-text);
    color: var(--sub-text);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    transition: all 0.2s;
    line-height: 1;
}
.voicing-practice-btn:hover {
    background: #4a90e2;
    color: #fff;
    border-color: #4a90e2;
}
.voicing-delete-btn {
    background: none;
    border: none;
    color: var(--sub-text);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.voicing-delete-btn:hover { color: #e74c3c; background: rgba(231,76,60,0.1); }

/* 🕐 저장 시간 */
.voicing-row-time {
    font-size: 0.7rem;
    color: var(--sub-text);
    opacity: 0.75;
    white-space: nowrap;
    margin-left: 12px;
    flex-shrink: 0;
}

/* 📝 사용자 노트 — 표시 모드 */
.voicing-row-note {
    font-size: 0.8rem;
    color: var(--sub-text);
    font-style: italic;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: text;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    transition: background 0.15s;
}
.voicing-row-note:hover {
    background: rgba(125, 125, 125, 0.12);
}
.voicing-row-note-empty {
    opacity: 0.55;
    font-style: normal;
}

/* 📝 사용자 노트 — 편집 모드 (textarea) */
.voicing-row-note-editor {
    width: 100%;
    min-height: 40px;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color);
    background: rgba(125, 125, 125, 0.15);
    border: 1px solid var(--sub-text);
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 6px;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.4;
    outline: none;
}
.voicing-row-note-editor:focus {
    border-color: var(--text-color);
}

/* 리스트 행 레이아웃: 헤더(도수 + 시간) / 노트들 / 사용자 노트 */
.voicing-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.voicing-row-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

#voicing-empty-msg {
    color: var(--sub-text);
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* 모바일: 건반 크기 축소 */
@media (max-width: 850px) {
    #piano-keyboard { height: 110px; overflow-x: auto; }
    .piano-key.white { width: 24px; }
    .piano-key.black { width: 15px; }
}