* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Kiwi Maru", serif;
    background-color: #fffbeb; 
    color: #4a3728; 
    overflow: hidden; 
}

.app-container {
    display: flex;
    width: 100vw;
    height: calc(100vh - 80px); /* 100vh から下部広告の高さを引く */
}

.control-panel {
    width: 20%;
    background-color: #e6f4ea; 
    padding: 15px;
    height: 100%;
    overflow-y: auto;
    border-right: 2px solid #c2e7cd; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.control-main-content {
    width: 100%;
}

.control-footer {
    margin-top: auto;
    padding-top: 15px;
    text-align: center;
    width: 100%;
}

.privacy-btn {
    background: none;
    border: none;
    color: #556b2f;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
}

.privacy-btn:hover {
    color: #1b5e20;
}

.fretboard-panel {
    width: 55%;
    background-color: #ffffff;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 30px; 
}

.chord-list-panel {
    width: 25%;
    background-color: #fff1f2;
    padding: 15px;
    height: 100%;
    overflow-y: auto;
    border-left: 2px dashed #ffe4e6; 
}

h2 {
    font-size: 16px;
    font-weight: 800; 
    margin-bottom: 15px;
    color: #2e7d32; 
    border-bottom: 3px solid #cbd5e1;
    padding-bottom: 6px;
    letter-spacing: 0.05em;
}

.control-box {
    background-color: #ffffff;
    border: 2px solid #b8e6c4; 
    border-radius: 12px; 
    padding: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.instrument-box {
    border: 2px solid #81c784;
    background-color: #f1f8e9;
}

.control-box h3 {
    font-size: 13px;
    margin-bottom: 8px;
    color: #2e7d32;
}

.control-box label {
    display: block;
    font-size: 11px;
    margin-bottom: 6px;
    color: #1b5e20;
    font-weight: 600;
}

.control-box select {
    display: block;
    width: 100%;
    padding: 6px;
    margin-top: 2px;
    border: 2px solid #a5d6a7;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 12px;
    color: #4a3728;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    font-family: "Kiwi Maru", serif;
}

.fretboard-container {
    background-color: transparent;
}

.fretboard-container h3 {
    font-size: 15px;
    margin-bottom: 8px;
    color: #4a3728;
    font-weight: 700;
}

.fretboard {
    position: relative;
    height: 175px; 
    border-radius: 10px; 
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
}

.note {
    position: absolute;
    width: 26px; 
    height: 26px;
    border-radius: 50%;
    background-color: #f97316; 
    color: #ffffff;
    font-size: 11px;
    font-weight: 900; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 0 #c2410c; 
    z-index: 10; 
    transition: all 0.1s ease;
    pointer-events: none;
}

.root-note {
    background-color: #3b82f6 !important; 
    box-shadow: 0 4px 0 #1d4ed8 !important; 
}

.chord-progression-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px;
}

.progression-btn {
    background-color: #ffffff;
    border: 2px solid #fecdd3;
    border-radius: 12px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 4px 0 #fecdd3; 
    font-family: "Kiwi Maru", serif;
}

.progression-btn:hover {
    background-color: #fef08a;
    border-color: #facc15;
    box-shadow: 0 4px 0 #facc15;
    transform: translateY(-2px); 
}

.progression-btn:active {
    transform: translateY(2px); 
    box-shadow: 0 2px 0 #facc15;
}

.progression-btn strong {
    font-size: 14px;
    color: #4a3728;
    font-weight: 700;
}

.progression-btn span {
    font-size: 11px;
    color: #9f1239;
    font-weight: 600;
}

/* 下部固定広告のスタイル */
.ad-bottom-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 80px;
    background-color: #f8fafc;
    border-top: 2px solid #e2e8f0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.ad-label {
    display: block;
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 2px;
    letter-spacing: 0.05em;
}

.ad-dummy-horizontal {
    width: 100%;
    max-width: 728px;
    height: 50px;
    background-color: #ffffff;
    border: 1px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 11px;
}

/* プライバシーポリシーのモーダルスタイル */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #ffffff;
    width: 90%;
    max-width: 650px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: left;
}

.modal-content h1 { font-size: 18px; margin-bottom: 5px; color: #1e293b; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; font-weight: 700;}
.modal-content h2 { font-size: 14px; margin-top: 20px; margin-bottom: 6px; color: #334155; border-left: 4px solid #81c784; padding-left: 8px; font-weight: 700;}
.modal-content h3 { font-size: 12px; margin-top: 12px; margin-bottom: 4px; color: #475569; font-weight: 700;}
.modal-content p { font-size: 12px; color: #475569; line-height: 1.6; margin-bottom: 8px; }
.updated-date { font-size: 11px; color: #94a3b8; }

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}
.modal-close-btn:hover { color: #475569; }

.modal-footer-btn-wrap { text-align: center; margin-top: 25px; }
.modal-close-lower-btn {
    padding: 8px 24px;
    background-color: #2e7d32;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: "Kiwi Maru", serif;
    font-weight: 600;
}
.modal-close-lower-btn:hover { background-color: #1b5e20; }


/* ==========================================================================
   アコーディオンメニュー用スタイル（間隔詰めバージョン）
   ========================================================================== */
.accordion-item {
    margin-bottom: 4px; /* ★ ヘッダー同士の隙間をギリギリまで詰めました（元10px） */
}

.accordion-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding-bottom: 6px; /* ★ 下線の隙間も少しスッキリさせました（元8px） */
    border-bottom: 2px solid #6b4e38;
    transition: opacity 0.2s;
}

.accordion-header:hover {
    opacity: 0.8;
}

.accordion-arrow {
    font-size: 12px;
    margin-right: 8px;
    color: #e2d4cb;
    width: 16px;
    display: inline-block;
    text-align: center;
}

.accordion-content {
    margin-top: 12px;    /* 開いた時の、上のタイトルとの隙間 */
    margin-bottom: 16px; /* ★ 開いた時の、下の項目との隙間（ここを追加） */
}

/* 閉じている状態のクラス */
.accordion-content.accordion-closed {
    display: none; /* 閉じると margin-bottom も消えるため、ヘッダーがピタッとくっつきます */
}


/* ==========================================================================
   テーマカラー：Summer（夏）のスタイル定義（完全版）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 左メニュー（コントロールパネル）の枠と中身
   -------------------------------------------------------------------------- */
body[data-theme="summer"] .control-panel {
    background-color: #bae6fd !important; /* 明るいブルー */
}
body[data-theme="summer"] .control-panel h2,
body[data-theme="summer"] .control-panel h3,
body[data-theme="summer"] .control-panel label,
body[data-theme="summer"] .control-panel p {
    color: #0c4a6e !important; /* 文字色を濃い紺色にして統一 */
}
body[data-theme="summer"] .accordion-header {
    border-bottom-color: #0284c7 !important; /* アコーディオンの下線 */
}
body[data-theme="summer"] .accordion-arrow {
    color: #0284c7 !important;
}

/* コントロール内の各枠（ボックス） */
body[data-theme="summer"] .control-panel .control-box {
    border: 2px solid #0284c7 !important; /* 枠線をクッキリしたブルーに */
    background-color: #f0f9ff !important; /* ボックス内を極薄のブルーに */
}
/* 各プルダウン（select）の枠線もブルーに統一 */
body[data-theme="summer"] .control-panel .control-box select {
    border: 2px solid #0284c7 !important;
    background-color: #ffffff !important;
    color: #0c4a6e !important;
}


/* --------------------------------------------------------------------------
    2. 真ん中の画面 ＆ メイプルウッド指板
   -------------------------------------------------------------------------- */
body[data-theme="summer"] .fretboard-panel {
    background-color: #fef08a !important; /* 明るいレモンイエロー */
}

/* 指板（fretboard）全体をメイプルウッド調に変更（ギター・ベースの茶色を上書き） */
body[data-theme="summer"] .fretboard,
body[data-theme="summer"] .instrument-guitar,
body[data-theme="summer"] .instrument-bass {
    background-color: #edd6b1 !important; /* メイプル特有の明るい薄黄ベージュ */
    border-right-color: #d4b285 !important; /* ネックの端も木になじむブラウンに */
}

/* ★ ポジションマーク（通常・上・下すべて）をリアルな黒ドットに変更 */
body[data-theme="summer"] .position-marker,
body[data-theme="summer"] .position-marker-top,
body[data-theme="summer"] .position-marker-bottom {
    background-color: #1a1a1a !important; /* 不透明のクッキリした黒 */
}

/* ★ フレット（各グリッドの右境界線）を暗いグレーに変更 */
body[data-theme="summer"] .fret-grid {
    border-right-color: #475569 !important; /* 重厚感のあるダークグレー */
}

/* ★ 弦（水平の線）を暗いスチールグレーに変更 */
body[data-theme="summer"] .string {
    /* 元の白っぽい輝きを、渋いニッケル/スチール風の暗いグラデーションに */
    background: linear-gradient(to bottom, #94a3b8, #334155) !important; 
}


/* --------------------------------------------------------------------------
   3. 右メニュー（コード進行表）の枠とボタン
   -------------------------------------------------------------------------- */
body[data-theme="summer"] .chord-list-panel {
    background-color: #ede9fe !important; /* 明るいすみれ色 */
}
body[data-theme="summer"] .chord-list-panel h2 {
    color: #4c1d95 !important;
}

/* 「全体のキー」選択ボックス */
body[data-theme="summer"] .chord-list-panel .control-box {
    border-color: #8b5cf6 !important;   
    background-color: #f5f3ff !important; 
}
body[data-theme="summer"] .chord-list-panel .control-box label {
    color: #4c1d95 !important;
}
body[data-theme="summer"] .chord-list-panel .control-box select {
    border-color: #8b5cf6 !important;
    color: #4c1d95 !important;
    background-color: #ffffff !important;
}

/* ★ それぞれの進行ボタンの枠・文字色・【影】 */
body[data-theme="summer"] .progression-btn {
    border: 2px solid #c084fc !important; /* ボタンの枠線を明るいすみれ色に */
    background-color: #ffffff !important;  /* 背景は白 */
    color: #4c1d95 !important;            /* 文字色を濃い紫に */
    
    /* 補正：影を「濃いすみれ色」に上書き（元の立体感に合わせてアルファ度を調整） */
    box-shadow: 0 4px 0 #7c3aed !important; 
}

/* ★ ボタンにマウスを乗せたとき（ホバー） */
body[data-theme="summer"] .progression-btn:hover {
    background-color: #f3e8ff !important; 
    box-shadow: 0 4px 0 #6d28d9 !important; /* ホバー時はさらに少し濃いすみれ色に */
}

/* ★ ボタンをクリックしたとき（沈み込む挙動がある場合も連動） */
body[data-theme="summer"] .progression-btn:active {
    box-shadow: 0 1px 0 #7c3aed !important; 
}

body[data-theme="summer"] .progression-btn strong {
    color: #4c1d95 !important;
}
body[data-theme="summer"] .progression-btn span {
    color: #7c3aed !important;
}

/* ==========================================================================
   テーマカラー：Autumn（秋・まろやかパステル版）のスタイル定義
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 左メニュー：アプリコットミルク（まろやかテラコッタ）
   -------------------------------------------------------------------------- */
body[data-theme="autumn"] .control-panel {
    background-color: #ffedd5 !important; /* ミルクを混ぜたような優しいアプリコットオレンジ */
}
body[data-theme="autumn"] .control-panel h2,
body[data-theme="autumn"] .control-panel h3,
body[data-theme="autumn"] .control-panel label,
body[data-theme="autumn"] .control-panel p {
    color: #7c2d12 !important; /* 文字色はマイルドなチョコレートブラウン */
}
body[data-theme="autumn"] .accordion-header {
    border-bottom-color: #ffcd94 !important; /* なじみの良い薄茶色の下線 */
}
body[data-theme="autumn"] .accordion-arrow {
    color: #f97316 !important;
}

/* ボックス内の枠と背景 */
body[data-theme="autumn"] .control-panel .control-box {
    border: 2px solid #ffcd94 !important; 
    background-color: #ffffff !important; /* 中はスッキリ白背景に */
}
body[data-theme="autumn"] .control-panel .control-box select {
    border: 2px solid #ffcd94 !important;
    background-color: #ffffff !important;
    color: #7c2d12 !important;
}


/* --------------------------------------------------------------------------
   2. 真ん中の画面：抹茶ミルク ＆ ソフトエボニー指板
   -------------------------------------------------------------------------- */
body[data-theme="autumn"] .fretboard-panel {
    background-color: #e2eff1 !important; /* モスグリーンを柔らかくした、淡いセージグリーン（抹茶ミルク調） */
}

/* 指板を「真っ黒」から「優しい墨色（ソフトエボニー）」にしてマイルドに */
body[data-theme="autumn"] .fretboard,
body[data-theme="autumn"] .instrument-guitar,
body[data-theme="autumn"] .instrument-bass {
    background-color: #3f3f46 !important; /* 圧迫感のないチャコールグレー */
    border-right-color: #52525b !important; 
}

/* ポジションマーク（白） */
body[data-theme="autumn"] .position-marker,
body[data-theme="autumn"] .position-marker-top,
body[data-theme="autumn"] .position-marker-bottom {
    background-color: #f4f4f5 !important; 
}

/* フレット（垂直線） */
body[data-theme="autumn"] .fret-grid {
    border-right-color: #71717a !important; 
}

/* 弦（水平線） */
body[data-theme="autumn"] .string {
    background: linear-gradient(to bottom, #ffffff, #a1a1aa) !important; 
}


/* --------------------------------------------------------------------------
   3. 右メニュー：ハチミツマスタード ＆ マイルドアンバーの影
   -------------------------------------------------------------------------- */
body[data-theme="autumn"] .chord-list-panel {
    background-color: #fef3c7 !important; /* 柔らかなパステルマスタード（ハチミツ色） */
}
body[data-theme="autumn"] .chord-list-panel h2 {
    color: #78350f !important;
}

/* 「全体のキー」選択ボックス */
body[data-theme="autumn"] .chord-list-panel .control-box {
    border-color: #fcd34d !important;   
    background-color: #ffffff !important; 
}
body[data-theme="autumn"] .chord-list-panel .control-box label {
    color: #78350f !important;
}
body[data-theme="autumn"] .chord-list-panel .control-box select {
    border-color: #fcd34d !important;
    color: #78350f !important;
    background-color: #ffffff !important;
}

/* 進行ボタン（優しくなった立体影） */
body[data-theme="autumn"] .progression-btn {
    border: 2px solid #fbbf24 !important;  /* 枠線をマイルドなイエローゴールドに */
    background-color: #ffffff !important;  
    color: #78350f !important;            
    box-shadow: 0 4px 0 #d97706 !important; /* 影を少し明るめのキャラメルアンバーに */
}

body[data-theme="autumn"] .progression-btn:hover {
    background-color: #fffbeb !important; 
    box-shadow: 0 4px 0 #b45309 !important; 
}

body[data-theme="autumn"] .progression-btn:active {
    box-shadow: 0 1px 0 #d97706 !important; 
}

body[data-theme="autumn"] .progression-btn strong {
    color: #78350f !important;
}
body[data-theme="autumn"] .progression-btn span {
    color: #d97706 !important;
}


/* ==========================================================================
   テーマカラー：Winter（冬・案1：アイス・クリスタル）のスタイル定義
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 左メニュー：アイスブルー（淡いアイシーな水色）× 濃紺
   -------------------------------------------------------------------------- */
body[data-theme="winter"] .control-panel {
    background-color: #e0f2fe !important; /* 透明感のある淡いアイスブルー */
}
body[data-theme="winter"] .control-panel h2,
body[data-theme="winter"] .control-panel h3,
body[data-theme="winter"] .control-panel label,
body[data-theme="winter"] .control-panel p {
    color: #0f172a !important; /* 視認性をしっかり確保した引き締まった濃紺 */
}
body[data-theme="winter"] .accordion-header {
    border-bottom-color: #bae6fd !important; /* 氷の隙間のような明るいブルーの線 */
}
body[data-theme="winter"] .accordion-arrow {
    color: #0284c7 !important;
}

/* ボックス内の枠と背景 */
body[data-theme="winter"] .control-panel .control-box {
    border: 2px solid #bae6fd !important; 
    background-color: #ffffff !important; 
}
body[data-theme="winter"] .control-panel .control-box select {
    border: 2px solid #bae6fd !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}


/* --------------------------------------------------------------------------
   2. 真ん中の画面：スノーホワイト ＆ ホワイトウッド指板（グレーマーク）
   -------------------------------------------------------------------------- */
body[data-theme="winter"] .fretboard-panel {
    background-color: #f8fafc !important; /* 柔らかく澄んだ雪のような白（スノーホワイト） */
}

/* 指板を白く美しい「ホワイトウッド（アッシュ材）」調に変更 */
body[data-theme="winter"] .fretboard,
body[data-theme="winter"] .instrument-guitar,
body[data-theme="winter"] .instrument-bass {
    background-color: #e2e8f0 !important; /* 美しい灰白色の木目調 */
    border-right-color: #cbd5e1 !important; 
}

/* ポジションマークを、白木の指板の上でもクッキリ見えるチャコールグレーに変更 */
body[data-theme="winter"] .position-marker,
body[data-theme="winter"] .position-marker-top,
body[data-theme="winter"] .position-marker-bottom {
    background-color: #475569 !important; /* 洗練されたダークグレーのドット */
}

/* フレット（垂直線） */
body[data-theme="winter"] .fret-grid {
    border-right-color: #cbd5e1 !important; 
}

/* 弦（水平線）：冷たくきらめくシルバー・グラデーション */
body[data-theme="winter"] .string {
    background: linear-gradient(to bottom, #ffffff, #94a3b8) !important; 
}


/* --------------------------------------------------------------------------
   3. 右メニュー：アイスグレー ＆ スタイリッシュグレーの影
   -------------------------------------------------------------------------- */
body[data-theme="winter"] .chord-list-panel {
    background-color: #e2e8f0 !important; /* 淡く洗練されたアイスグレー（ブルーグレー） */
}
body[data-theme="winter"] .chord-list-panel h2 {
    color: #1e293b !important; /* 文字色は上品なディープグレー */
}

/* 「全体のキー」選択ボックス */
body[data-theme="winter"] .chord-list-panel .control-box {
    border-color: #94a3b8 !important;   /* グレイッシュな枠線 */
    background-color: #ffffff !important; 
}
body[data-theme="winter"] .chord-list-panel .control-box label {
    color: #1e293b !important;
}
body[data-theme="winter"] .chord-list-panel .control-box select {
    border-color: #94a3b8 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
}

/* 進行ボタン（グレーの立体影） */
body[data-theme="winter"] .progression-btn {
    border: 2px solid #94a3b8 !important;  /* ボタンの枠線を落ち着いたグレーに */
    background-color: #ffffff !important;  
    color: #1e293b !important;            
    box-shadow: 0 4px 0 #cbd5e1 !important; /* 影を明るめのライトグレーに */
}

body[data-theme="winter"] .progression-btn:hover {
    background-color: #f8fafc !important; 
    box-shadow: 0 4px 0 #94a3b8 !important; /* ホバー時は少し濃いグレーの影に */
}

body[data-theme="winter"] .progression-btn:active {
    box-shadow: 0 1px 0 #cbd5e1 !important; 
}

body[data-theme="winter"] .progression-btn strong {
    color: #1e293b !important;
}
body[data-theme="winter"] .progression-btn span {
    color: #64748b !important; /* 矢印などの補助テキストはミディアムグレーに */
}