:root { --bg-color: #1a1c23; --panel-bg: #222530; --accent-color: #e06c75; --text-color: #abb2bf; --text-light: #ffffff; --fret-color: #3e4452; --selected-card-border: #61afef; --highlight-color: #ffca28; }
/* 🌟 padding/border를 width에 포함시켜서, width:100% + padding 조합인 요소들이
   부모 폭을 넘어 삐져나가는 걸(특히 모바일에서) 막음 */
*, *::before, *::after { box-sizing: border-box; }
body { background-color: var(--bg-color); color: var(--text-color); padding: 20px; display: flex; justify-content: center; min-height: 100vh; margin: 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.container { width: 1200px; max-width: 100%; gap: 20px; background-color: var(--panel-bg); border-radius: 12px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }

/* Navigation */
.main-nav { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.nav-tab { padding: 10px 18px; font-weight: bold; font-size: 0.95rem; border-radius: 6px; }
.nav-tab.active { background-color: var(--accent-color); color: #fff; }

.page-view { display: none; }
.page-view.active { display: block; }

/* Sticky Container 스타일 */
.sticky-container {
    background: #14161d;
    padding: 20px;
    border: 1px solid #2d313f;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.controls-row { display: flex; gap: 20px; margin-top: 20px; }

/* 기존 컴포넌트 스타일 유지 */
.fretboard-container { position: relative; margin: 20px 0 35px 60px; height: 180px; }
/* 🌟 프렛 폭을 일정 이상(터치하기 편한 크기)으로 유지하고, 화면이 좁으면 이 안에서만 가로 스크롤되게 함
   (오픈 스트링 O/X 표시는 이 스크롤 영역 밖에 있어서 스크롤해도 계속 보임) */
.fretboard-scroll { position: relative; overflow-x: auto; }
.fretboard { position: relative; width: 100%; min-width: 720px; height: 180px; background: #1b1d23; border-left: 6px solid #e5c07b; overflow: visible; }
/* 🌟 왼쪽은 셀렉터(루트/퀄리티)만 있는 짧은 패널이라 스크롤해도 계속 보이게 고정 */
.left-panel { flex: 0.9; min-width: 280px; position: sticky; top: 20px; align-self: flex-start; z-index: 60; }
.right-panel { flex: 1.6; min-width: 320px; }

/* Chord Finder 탭 레이아웃 */
.finder-layout { display: flex; gap: 20px; flex-wrap: wrap; }
.finder-board-col { flex: 3; min-width: 520px; background: #1b1d23; border: 1px solid #2d313f; padding: 20px; border-radius: 8px; }
.finder-result-col { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 15px; }

/* 버튼 및 기타 스타일 */
button { background-color: #2d313f; color: var(--text-color); border: none; padding: 8px 10px; border-radius: 4px; cursor: pointer; }
button.active { background-color: var(--accent-color); color: white; }
.dict-layout { display: flex; gap: 20px; width: 100%; flex-wrap: wrap; }

/* 프렛보드 내부 요소 */
.fret-line { position: absolute; top: 0; width: 1px; height: 100%; background: var(--fret-color); }
.fret-numbers { position: relative; width: 100%; min-width: 720px; height: 18px; margin-top: 6px; }
.fret-number { position: absolute; top: 0; width: 30px; margin-left: -15px; text-align: center; font-size: 0.7rem; color: #828997; }
/* 실제 기타 넥의 포지션 마커(점) — 3,5,7,9,12(더블),15프렛 */
.fret-inlay-dot { position: absolute; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; background: #3e4452; z-index: 0; pointer-events: none; }

.string { position: absolute; left: 0; width: 100%; background: #7d8496; }

.open-string-indicators { position: absolute; top: 0; left: -40px; width: 30px; }
.open-indicator { width: 30px; height: 30px; line-height: 30px; margin: 0; text-align: center; font-weight: bold; font-size: 0.9rem; color: #4b5263; cursor: pointer; }
.open-indicator.play { color: var(--highlight-color); }
.open-indicator.mute { color: var(--accent-color); }
.open-indicator.highlighted-open { color: #fff; }

.highlighted-string { background: var(--highlight-color) !important; }

.note-marker { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--highlight-color); color: #1a1c23; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4); z-index: 6; }
.note-marker.root-note { background: var(--accent-color); color: #fff; }
.note-marker.highlighted-marker { box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }
/* 🌟 Chord Finder "Show Notes": 지금 잡은 코드 톤이 넥 어디에 또 있는지 보여주는 흐릿한 참고용 마커 */
.note-marker.ghost-marker { width: 20px; height: 20px; background: transparent; border: 1.5px solid var(--highlight-color); color: var(--highlight-color); opacity: 0.55; box-shadow: none; font-size: 0.65rem; cursor: default; z-index: 5; }

.barre-finger-line { position: absolute; width: 6px; margin-left: -3px; background: var(--highlight-color); opacity: 0.45; border-radius: 3px; z-index: 1; }

/* 호버 감지 레이어 */
.hover-detector { position: absolute; top: 0; left: 0; width: 100%; min-width: 600px; height: 100%; z-index: 10; }
.string-row { display: flex; height: 30px; }
.fret-cell { flex: 1; height: 30px; cursor: pointer; }
.fret-cell:hover { background: rgba(255,255,255,0.06); }

#note-tooltip { display: none; position: fixed; z-index: 1000; background: #14161d; border: 1px solid var(--selected-card-border); padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; pointer-events: none; white-space: nowrap; }
.highlight-chord { color: var(--highlight-color); font-weight: bold; margin-left: 6px; }

/* 코드 이름 직접 검색 */
.chord-search-bar { position: relative; margin-bottom: 14px; }
.chord-search-bar .search-icon { position: absolute; left: 14px; top: 21px; transform: translateY(-50%); font-size: 1rem; opacity: 0.6; pointer-events: none; }
#chord-search-input { width: 100%; box-sizing: border-box; background: #1b1d23; border: 1px solid #3e4452; color: var(--text-light); padding: 10px 14px 10px 38px; border-radius: 6px; font-size: 1rem; font-weight: bold; }
#chord-search-input:focus { outline: none; border-color: var(--selected-card-border); }
#chord-search-input.invalid { border-color: var(--accent-color); }
.chord-search-feedback { min-height: 18px; font-size: 0.8rem; margin-top: 4px; color: var(--accent-color); }

/* 코드 사전 상단 헤더 */
.chord-header-container { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.chord-formula-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.formula-title { font-size: 1.3rem; font-weight: bold; color: var(--text-light); }
.notes-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.note-badge { padding: 4px 10px; border-radius: 20px; background: #2d313f; border: 1px solid #3e4452; font-size: 0.85rem; font-weight: bold; }
.note-badge.is-root { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.side-btn.active { background-color: var(--selected-card-border); color: #1a1c23; }

/* 루트/퀄리티 컨트롤 */
.control-group { }
.group-title { font-size: 0.8rem; color: #828997; font-weight: bold; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.root-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(2, auto); gap: 6px; }
.root-grid button { padding: 8px 4px; font-weight: bold; font-size: 0.85rem; }
.btn-grid-quality { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; margin-top: 8px; }
.btn-grid-quality button { padding: 6px; font-size: 0.8rem; }

/* 🌟 세로형 코드 다이어그램 카드 (표준 코드북 스타일: 줄=세로선, 프렛=가로선) */
.vertical-voicing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.v-grid-empty { grid-column: 1 / -1; color: #828997; font-size: 0.9rem; padding: 24px; text-align: center; background: #1b1d23; border: 1px dashed #3e4452; border-radius: 8px; }

/* 🌟 대표 폼을 "개방현 / 5번줄 근음 / 6번줄 근음" 종류별로 나눠 보여주는 레이아웃 - 그리드 대신 라벨+카드 묶음을 가로로 나열 */
#voicing-list.v-shape-group-row { display: flex; flex-wrap: wrap; gap: 20px; }
.v-shape-group { display: flex; flex-direction: column; width: 150px; }
.v-shape-group .v-chord-card { width: 100%; }

/* 🌟 "All" 펼침 보기 - 넥 포지션(3프렛 단위) 구간별로 세로로 묶어서, 코드 많은 품질도 훑어보기 쉽게 함 */
#voicing-list.v-position-group-col { display: flex; flex-direction: column; gap: 18px; }
.v-position-section .group-title { margin-bottom: 8px; }

.v-chord-card { background: #1b1d23; border: 1px solid #2d313f; border-radius: 8px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.v-chord-card:hover { border-color: var(--selected-card-border); }
.v-chord-card.active { border-color: var(--selected-card-border); background: #1e2530; box-shadow: 0 0 0 1px var(--selected-card-border); }
.v-chord-name { font-size: 0.72rem; font-weight: bold; color: var(--text-light); text-align: center; min-height: 28px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.v-chord-diagram { display: flex; flex-direction: column; align-items: center; }

.v-legend-row { position: relative; width: 116px; height: 16px; margin-bottom: 2px; }
.v-legend-cell { position: absolute; top: 0; transform: translateX(-50%); width: 16px; text-align: center; font-size: 0.7rem; font-weight: bold; color: #4b5263; }
.v-legend-cell.mute { color: var(--accent-color); }
.v-legend-cell.open { color: var(--highlight-color); }
.v-legend-cell.highlighted-open { color: #fff; }

.v-nut-bar { width: 116px; height: 4px; background: #cfd3da; border-radius: 2px; margin-bottom: 1px; }
.v-top-border { width: 116px; height: 1px; background: var(--fret-color); margin-bottom: 1px; }

.v-grid-wrap { position: relative; display: flex; align-items: flex-start; }
.v-position-label { font-size: 0.75rem; color: #828997; font-weight: bold; margin-right: 4px; }
.v-grid { position: relative; width: 116px; }
.v-string-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #4b5263; }
.v-fret-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--fret-color); }
.v-barre-bar { position: absolute; height: 18px; margin-top: -9px; background: var(--highlight-color); opacity: 0.4; border-radius: 8px; z-index: 1; }
.v-dot { position: absolute; width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; border-radius: 50%; background: var(--highlight-color); color: #1a1c23; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.65rem; z-index: 2; }
.v-dot.root { background: var(--accent-color); color: #fff; }
.v-dot.thumb { background: #61afef; color: #12141a; }
.v-dot.highlighted-marker { box-shadow: 0 0 0 3px rgba(255,255,255,0.6); }

/* 슬래시 코드 / 진행 패널 */
.composition-section { background: #1b1d23; border: 1px solid #2d313f; padding: 16px; border-radius: 8px; box-shadow: 0 10px 18px -8px rgba(0,0,0,0.5); }
.comp-header { margin-bottom: 10px; }
.comp-title { font-weight: bold; color: var(--text-light); }
.comp-header-toggle { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; margin-bottom: 0; }
.comp-toggle-icon { font-size: 0.75rem; color: #828997; }
.progression-shelf { display: flex; flex-direction: column; gap: 8px; }
.prog-row { padding: 8px 12px; background: #222530; border-radius: 6px; border: 1px solid #2d313f; }
.prog-row:hover { border-color: var(--selected-card-border); }

/* Tips 탭 */
.tips-container { max-width: 760px; margin: 0 auto; }
.tips-container > h2 { margin-top: 0; margin-bottom: 20px; }
.tip-card { background: #1b1d23; border: 1px solid #2d313f; border-radius: 8px; padding: 20px 24px; margin-bottom: 16px; }
.tip-card h3 { margin-top: 0; margin-bottom: 10px; color: var(--text-light); font-size: 1.05rem; }
.tip-card p { margin: 8px 0; line-height: 1.6; }
.tip-card ul { margin: 8px 0; padding-left: 20px; line-height: 1.6; }
.tip-card li { margin-bottom: 6px; }
.tip-card strong { color: var(--highlight-color); }
.tip-excerpt { margin: 0 0 12px 0; line-height: 1.6; color: var(--text-color); }
.tip-read-more { display: inline-block; color: var(--selected-card-border); font-weight: bold; font-size: 0.9rem; text-decoration: none; }
.tip-read-more:hover { text-decoration: underline; }

/* Tips 개별 글 페이지 (tips/*.html) */
.tip-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 760px; margin: 0 auto 24px; }
.tip-page-brand { color: var(--text-light); font-weight: bold; text-decoration: none; font-size: 1.1rem; }
.tip-page-nav { display: flex; gap: 16px; }
.tip-page-nav a { color: var(--text-color); text-decoration: none; font-size: 0.9rem; font-weight: bold; }
.tip-page-nav a:hover { color: var(--text-light); }
.tip-back-link { display: inline-block; margin-bottom: 16px; color: var(--selected-card-border); text-decoration: none; font-size: 0.9rem; font-weight: bold; }
.tip-back-link:hover { text-decoration: underline; }
.tip-page-article h1 { font-size: 1.4rem; margin-top: 0; margin-bottom: 14px; color: var(--text-light); }

/* 🌟 모바일/좁은 화면: 좌우로 나란히 있던 패널을 세로로 쌓고, 프렛보드는 폭을 줄이는 대신
   .fretboard-scroll 안에서 가로 스크롤되게 해서 프렛 하나하나는 계속 탭하기 편한 크기를 유지함 */
@media (max-width: 900px) {
    body { padding: 10px; }
    .container { padding: 16px; }

    .dict-layout { flex-direction: column; }
    .left-panel { min-width: 0; width: 100%; }
    .right-panel { min-width: 0; width: 100%; position: static; }

    .finder-layout { flex-direction: column; }
    .finder-board-col, .finder-result-col { min-width: 0; width: 100%; }
}