:root {
            --tab-width: 30vw;
            --border-radius: 2vmin;
            --text-main: #f0f0f0;
            --text-dark: #252525;
            --bg-dark: #fff;
            --bg-tab: #3a3a3a;
            --bg-popup: #3a3a3a;
            --bg-default: #fafafa;
            --color-tonic: #FFF2CC;
            --color-subdominant: #C8E6C8;
            --color-dominant: #BADFFF;
            --color-tonic-minor: #FFD966;
            --color-subdominant-minor: #7DC1C1;
            --color-dominant-minor: #c9c3ff;
            --key-color-principal: #CC2525;
            --key-color-parallel: #E06666;
            --key-color-relative: #F6B26B;
            --key-color-subdominant: rgb(50, 150, 50);
            --key-color-dominant: rgb(100, 150, 220);
            --key-color-tritone: rgba(75, 75, 75, 1);
            --key-color-relativeparallel: #F9CB9C;
            --key-color-parallelreative: rgb(200, 125, 100);
            --key-color-others: rgba(125, 125, 125, 1);
            --color-recommended: #FFD700;
            --color-scale-note: #4CAF50;
            /* Green for scale notes */
            --color-avoid-note: #F44336;
            /* Red for avoid notes */
            --color-scale-match: #03A9F4;
            /* Light Blue for scale matching tensions */
        }

        html,
        body {
            height: 100%;
            height: 100dvh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: flex;
            padding-top: env(safe-area-inset-top);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            padding-bottom: env(safe-area-inset-bottom);
            box-sizing: border-box;
            flex-direction: column;
        }

        th {
            font-weight: normal;
            text-align: center;
        }

        td {
            text-align: center;
            width: auto;
            user-select: none;
            -webkit-user-select: none;
        }

        h1 {
            font-weight: normal;
            display: inline-flex;
            vertical-align: middle;
            margin: 0;
        }

        a {
            color: rgb(180, 180, 180);
            text-decoration: none;
        }

        img {
            vertical-align: middle;
            width: auto;
            height: 3vw;
        }

        table {
            border-collapse: separate;
            border-spacing: 0.2vw;
            width: 100%;
            transition: all 0.3s ease-in-out;
        }

        sup {
            font-size: 0.7em;
            /* 元のサイズの70% */
            vertical-align: super;
        }

        .select-wrapper {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        select {
            font-family: inherit;
            font-size: 1em;
            width: 100%;
            height: 100%;
            text-align: center;
            cursor: pointer;
            border-radius: 0;
            padding: 0.3em 1.5em 0.3em 0.5em;
            background-color: transparent;
            color: inherit;
            border: none;
            appearance: none;
            -webkit-appearance: none;
        }

        .select-wrapper::after {
            content: '▼';
            font-size: 0.8em;
            position: absolute;
            top: 50%;
            right: 0.5em;
            transform: translateY(-50%);
            pointer-events: none;
        }

        #principalKeySelect-wrapper .select-wrapper::after {
            color: var(--text-main);
        }

        .background-color_default {
            background-color: var(--bg-default);
            color: var(--text-dark);
        }

        .background_othersKey {
            background-color: var(--key-color-others);
            color: #fff;
        }

        .background_principalKey {
            background-color: var(--key-color-principal);
            color: #ffffff;
        }

        .background_parallelKey {
            background-color: var(--key-color-parallel);
            color: #fff;
        }

        .background_parallelreativeKey {
            background-color: var(--key-color-parallelreative);
            color: #ffffff;
        }

        .background_relativeKey {
            background-color: var(--key-color-relative);
            color: var(--text-dark);
        }

        .background_subdominantKey {
            background-color: var(--key-color-subdominant);
            color: #ffffff;
        }

        .background_dominantKey {
            background-color: var(--key-color-dominant);
            color: #ffffff;
        }

        .background_relativeparallelKey {
            background-color: var(--key-color-relativeparallel);
            color: var(--text-dark);
        }

        .background_substituteDominant {
            background-color: var(--key-color-tritone);
            color: #ffffff;
        }

        .background_tonicChord {
            background-color: var(--color-tonic);
            color: var(--text-dark);
        }

        .background_subdominantChord {
            background-color: var(--color-subdominant);
            color: var(--text-dark);
        }

        .background_dominantChord {
            background-color: var(--color-dominant);
            color: var(--text-dark);
        }

        .background_TonicMinorChord {
            background-color: var(--color-tonic-minor);
            color: var(--text-dark);
        }

        .background_subdominantMinorChord {
            background-color: var(--color-subdominant-minor);
            color: var(--text-dark);
        }

        .background_DominantMinorChord {
            background-color: var(--color-dominant-minor);
            color: var(--text-dark);
        }

        .background_IIImin7 {
            background: linear-gradient(135deg, var(--color-tonic) 45%, var(--color-dominant) 55%);
            color: var(--text-dark);
        }

        .background_FlatVII7 {
            background: linear-gradient(135deg, var(--color-subdominant-minor) 45%, var(--color-dominant-minor) 55%);
            color: var(--text-dark);
        }

        .background_SharpIVmin7Flat5 {
            background: linear-gradient(135deg, var(--color-subdominant) 45%, var(--color-tonic) 55%);
            color: var(--text-dark);
        }

        .background_SDM_D {
            background: linear-gradient(135deg, var(--color-subdominant-minor) 45%, var(--color-dominant) 55%);
            color: var(--text-dark);
        }

        .main-container {
            display: flex;
            width: 100%;
            flex: 1;
            overflow: hidden;
            min-height: 0;
            padding: 0.5vw;
            box-sizing: border-box;
        }

        .col-tab {
            flex: 0 0 var(--tab-width);
            transition: margin-left 0.3s ease-in-out;
            margin-left: 0;
            background-color: #393939cc;
            border-radius: 1vh;
            padding: 1vh;
            display: flex;
            flex-direction: column;
            gap: 1vh;
            height: 100%;
            box-sizing: border-box;
        }

        .col-tab.collapsed {
            margin-left: calc(-1 * var(--tab-width));
        }

        .col-main {
            flex: 1;
            min-width: 0;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        .col-main > table {
            table-layout: fixed;
            height: auto;
            flex: 1;
            overflow-y: auto;
            width: 100%;
        }

        .col-info {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding: 1vh;
            border-radius: 0.5em;
            height: 10vh;
        }

        .col-info-left {
            display: flex;
            align-items: center;
            gap: 1vw;
        }

        .col-info-left img {
            height: 3vw;
            width: auto;
        }

        h1 {
            font-size: 1.5vw;
        }

        .info-icon {
            cursor: pointer;
            font-weight: bold;
            border-radius: 50%;
            width: 2vw;
            height: 2vw;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            background: #ddd;
            color: var(--text-dark);
            font-size: 1.5vw;
        }

        .key-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5vw;
        }

        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            display: none;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease;
        }

        .popup-content {
            background: var(--bg-popup);
            padding: 2vw;
            border-radius: var(--border-radius);
            width: 30vw;
            min-width: 300px;
            max-width: 90vw;
            color: var(--text-main);
            position: relative;
            text-align: center;
        }

        .popup-content h3 {
            margin-top: 0;
            color: #ffffff;
        }

        .popup-content .close-btn {
            position: absolute;
            top: 1vw;
            right: 1vw;
            cursor: pointer;
            font-size: 3vh;
        }

        .popup-content ul {
            list-style: none;
            padding: 0;
            text-align: left;
        }

        .popup-content li {
            margin-bottom: 1em;
            display: flex;
            align-items: center;
        }

        .popup-content li::before {
            content: '●';
            display: inline-block;
            margin-right: 0.8em;
        }

        .popup-content li.tonic::before {
            color: var(--color-tonic);
        }

        .popup-content li.subdominant::before {
            color: var(--color-subdominant);
        }

        .popup-content li.dominant::before {
            color: var(--color-dominant);
        }

        .popup-content li.tonic-minor::before {
            color: var(--color-tonic-minor);
        }

        .popup-content li.subdominant-minor::before {
            color: var(--color-subdominant-minor);
        }

        .popup-content li.dominant-minor::before {
            color: var(--color-dominant-minor);
        }

        .popup-content a {
            color: #BADFFF;
            text-decoration: underline;
        }

        .popup-credit {
            margin-top: 2em;
            font-size: 0.9em;
            text-align: right;
            color: #aaa;
        }

        #startup-popup .popup-content,
        #swipe-guide-popup .popup-content {
            width: auto;
            min-width: 300px;
            max-width: 90vw;
        }

        #startup-popup p,
        #swipe-guide-popup p {
            margin: 1em 0;
            font-size: 1.2em;
        }

        #startup-popup .icon,
        #swipe-guide-popup .icon {
            font-size: 2em;
            margin-bottom: 0.5em;
        }

        /* ===== EDITOR POPUP STYLES ===== */
        #chord-editor-popup .popup-content {
            width: 50vw;
            min-width: 350px;
            max-height: 95vh;
            overflow-y: auto;
        }

        .editor-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0.5vw;
            margin-bottom: 1em;
        }

        .editor-grid.presets {
            grid-template-columns: repeat(3, 1fr);
        }

        .editor-section-title {
            text-align: left;
            font-size: 0.9em;
            color: #aaa;
            margin: 0.5em 0 0.2em 0;
        }

        .editor-btn {
            background: #555;
            border: none;
            color: white;
            padding: 0.8vh 0;
            border-radius: 0.5em;
            cursor: pointer;
            font-size: 1.1em;
            transition: all 0.2s;
            position: relative;
        }

        .editor-btn:hover {
            background: #666;
        }

        .editor-btn.active {
            background: var(--color-dominant);
            color: var(--text-dark);
            font-weight: bold;
        }

        .editor-btn.preset-btn {
            background: #4a6fa5;
            border: 1px solid #5b85c7;
        }

        .editor-btn.preset-btn:hover {
            background: #5b85c7;
        }

        .editor-btn.recommended {
            border: 2px solid var(--color-recommended);
            box-shadow: 0 0 5px var(--color-recommended);
        }

        .editor-btn.recommended::after {
            content: '★';
            position: absolute;
            top: -0.5em;
            right: -0.3em;
            color: var(--color-recommended);
            font-size: 0.8em;
            text-shadow: 0 0 2px black;
        }

        .editor-btn.scale-match {
            border: 1px solid var(--color-scale-match);
            box-shadow: 0 0 5px var(--color-scale-match) inset;
        }

        .editor-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 1.5em;
        }

        .editor-action-btn {
            background: #444;
            color: white;
            border: 1px solid #666;
            padding: 0.5em 1.5em;
            border-radius: 0.5em;
            cursor: pointer;
        }

        .editor-action-btn.primary {
            background: var(--key-color-principal);
            border-color: var(--key-color-principal);
        }

        /* Scale Selection UI */
        .scale-selector-container {
            margin-bottom: 1vh;
            background: #444;
            padding: 0.5em;
            border-radius: 0.5em;
            display: flex;
            align-items: center;
            gap: 0.5em;
        }

        .scale-selector-container select {
            background: #333;
            color: white;
            border: 1px solid #555;
            padding: 0.3em;
            border-radius: 0.3em;
            flex-grow: 1;
        }

        .scale-info {
            font-size: 0.8em;
            color: #ccc;
            margin-top: 0.2em;
            text-align: left;
        }

        .scale-preview-btn {
            background: #555;
            color: white;
            border: none;
            padding: 0.3em 0.8em;
            border-radius: 0.3em;
            cursor: pointer;
        }

        .scale-preview-btn:hover {
            background: #666;
        }

        /* ===== PIANO COMMON STYLES (Flat Structure) ===== */
        .piano-container {
            margin-top: auto;
            padding-top: 1vh;
            width: 100%;
            position: relative;
        }

        .editor-piano-container {
            width: 100%;
            height: 12vh;
            background: #222;
            margin-bottom: 1vh;
            position: relative;
            border-radius: 0.5em;
            overflow: hidden;
            display: flex;
        }

        .piano-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
        }

        .piano-key {
            position: relative;
            box-sizing: border-box;
            cursor: pointer;
            transition: background-color 0.1s ease, box-shadow 0.1s ease;
            border-radius: 6px;
        }

        .piano-key.white {
            flex: 1;
            background-color: #fff;
            border: 1px solid #333;
            height: 100%;
            z-index: 1;
        }

        .piano-key.black {
            position: absolute;
            background-color: #222;
            border: 1px solid #000;
            border-top: none;
            height: 60%;
            z-index: 100;
            top: 0;
        }

        /* ===== Visual States (Updated) ===== */

        /* 1. スケールノート（薄い赤背景） */
        /* 白鍵 */
        .piano-key.scale-note {
            background-color: #ffe0e0 !important;
            /* 薄い赤 */
            box-shadow: none;
        }

        /* 黒鍵 */
        .piano-key.black.scale-note {
            background-color: #5c2b2b !important;
            /* 赤みのある黒 */
            box-shadow: none;
        }

        /* 2. 選択中（濃い赤枠） - 背景色は変えずに枠線のみ */
        .piano-key.active {
            /* 背景色はscale-noteやデフォルトを維持するため指定しない */
            box-shadow: inset 0 0 0 4px #cc0000 !important;
            /* 濃い赤の太い内枠 */
        }

        /* 黒鍵の選択中 */
        .piano-key.black.active {
            box-shadow: inset 0 0 0 3px #ff3333 !important;
            /* 黒鍵上で見やすい赤枠 */
        }

        /* 3. MIDI入力（変更なし - 青背景） */
        /* MIDI入力は最も優先度高く塗りつぶす */
        .piano-key.midi-active {
            background-color: #66b3ff !important;
            box-shadow: none;
            /* 枠線も消すか、必要なら残す */
        }

        .piano-key.black.midi-active {
            background-color: #3380cc !important;
        }

        /* Active かつ MIDI Active の場合 (枠線 + 青背景) */
        .piano-key.active.midi-active {
            background-color: #66b3ff !important;
            box-shadow: inset 0 0 0 4px #cc0000 !important;
        }

        .piano-key.black.active.midi-active {
            background-color: #3380cc !important;
            box-shadow: inset 0 0 0 3px #ff3333 !important;
        }

        /* Avoid Note (変更なし) */
        .piano-key.avoid-note::after {
            content: '×';
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--color-avoid-note);
            font-weight: bold;
            font-size: 1.2em;
            pointer-events: none;
        }

        .main-piano-height {
            height: 22vh;
        }

        .dots-container {
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 2px;
            pointer-events: none;
            z-index: 10;
            height: 8px;
            align-items: flex-end;
        }

        .key-dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            opacity: 0.9;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
            flex-shrink: 0;
        }

        /* 黒鍵の場合は位置調整 */
        .piano-key.black .dots-container {
            bottom: 8px;
        }

        /* ドットの色定義 */
        .key-dot.principal {
            background-color: var(--key-color-principal);
        }

        .key-dot.subdominant {
            background-color: var(--key-color-subdominant);
        }

        .key-dot.dominant {
            background-color: var(--key-color-dominant);
        }

        /* ===== モード選択ボタンのスタイル (新規追加) ===== */
        .mode-select-container {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: center;
        }

        .mode-btn {
            background: #555;
            color: white;
            border: 1px solid #777;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.2s;
        }

        .mode-btn:hover {
            background: #666;
        }

        .mode-btn.selected {
            background: var(--key-color-dominant);
            border-color: #8ab4f8;
            font-weight: bold;
        }

        /* スタートアップポップアップのボタン */
        #startup-popup .mode-btn {
            font-size: 1.2rem;
            padding: 15px 30px;
            margin: 10px;
        }

        .options-container {
            margin-top: auto;
            display: flex;
            flex-direction: row;
            gap: 0.5vw;
            width: 100%;
        }

        .option-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(79, 79, 79, 0.8);
            border-radius: 0.5em;
            padding: 0.5vh 1vh;
            color: var(--text-main);
            height: 3.5vh;
        }

        .option-item label {
            font-size: 1em;
            color: #ccc;
            white-space: nowrap;
            margin-right: 0.5em;
        }

        .option-item .select-wrapper {
            flex-grow: 1;
        }

        .option-item select {
            font-size: 1em;
            text-align: right;
            padding-right: 1.8em;
            width: 100%;
        }

        .option-item .select-wrapper::after {
            right: 0.5em;
        }

        .row-header {
            width: 3vw;
            padding: 0 !important;
            vertical-align: middle;
            text-align: center;
            position: relative;
        }

        .row-header-icon {
            font-style: normal;
            padding: 0.3vh;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 2vw;
            height: 2vw;
            border-radius: 50%;
            background: #555;
            cursor: help;
        }

        .row-header .tooltip {
            visibility: hidden;
            width: max-content;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 10px;
            position: absolute;
            z-index: 1;
            right: 105%;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .row-header:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }

        .button-base {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            border-radius: var(--border-radius);
            transition: all 0.2s ease-in-out;
            box-sizing: border-box;
            background-clip: padding-box;
        }

        .button-base .name,
        .button-base .type {
            transition: transform 0.2s ease;
            pointer-events: none;
        }

        .button-base:hover .name,
        .button-base:hover .type {
            transform: scale(1.1);
        }

        .col-chords {
            padding: 0.2vw;
            vertical-align: middle;
            cursor: pointer;
        }

        .col-chords:active {
            cursor: grabbing;
        }

        .chord-button {
            height: 9vh;
            min-height: 55px;
            border: 0.5vh solid var(--button-border-color, transparent);
            pointer-events: none;
            width: 9vw;
        }

        .background_free {
            background-color: #666666;
            color: #fff;
            border: 1px dashed #aaa;
        }

        .col-chords:hover .chord-button {
            transform: scale(1.05);
            box-shadow: 0 0 10px 0px var(--button-border-color, transparent);
        }

        .chord_highlighted .chord-button {
            box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.35);
            transform: scale(0.98);
        }

        .chord-dimmed {
            opacity: 0.3;
            transition: opacity 0.3s ease-in-out;
        }

        .chord-button .name {
            font-size: 1.5vw;
            font-weight: bold;
        }

        .chord-button .type {
            font-size: 1.1vw;
            margin-top: 0.5vh;
            opacity: 0.8;
        }

        .col-main table tr:nth-child(2) td:nth-child(n+2) .chord-button,
        .col-main table tr:nth-child(3) td:nth-child(n+2) .chord-button {
            height: 7.5vh;
            min-height: 45px;
            width: 90%;
            margin: 0 auto;
        }

        .col-main table tr:nth-child(2) td:nth-child(n+2) .chord-button .name,
        .col-main table tr:nth-child(3) td:nth-child(n+2) .chord-button .name {
            font-size: 1.3vw;
        }

        .col-main table tr:nth-child(2) td:nth-child(n+2) .chord-button .type,
        .col-main table tr:nth-child(3) td:nth-child(n+2) .chord-button .type {
            font-size: 1.0vw;
            margin-top: 0.2vh;
        }

        .key-button {
            height: 9vh;
            min-height: 50px;
            cursor: pointer;
        }

        .key-button .name {
            font-size: 1.6vw;
            font-weight: bold;
        }

        .key-button .type {
            font-size: 1.1vw;
            margin-top: 0.2vh;
            opacity: 0.8;
        }

        .key-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px 0px var(--button-border-color, transparent);
        }

        .principal-key-button {
            height: 100%;
            border-radius: var(--border-radius);
        }

        #principalKeySelect {
            font-size: 1.8vw;
            font-weight: bold;
            height: 100%;
        }

        #principalKeySelect option {
            color: var(--text-dark);
            background-color: #fff;
        }

        .shift-controls-container,
        .display-controls-wrapper {
            background-color: var(--bg-default);
            color: var(--text-dark);
            border-radius: var(--border-radius);
            padding: 0.5vw 1vw;
            display: flex;
            align-items: center;
        }

        .shift-controls-container {
            background-color: var(--bg-default);
            color: var(--text-dark);
            border-radius: 0;
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);

            padding: 0.5vw 1vw;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 8vh;
            height: auto;
            flex-wrap: wrap;
            gap: 0.5vh 1vw;

            /* フッターとして配置するための設定 */
            flex-shrink: 0; /* 縮まないようにする */
            z-index: 100;   /* 他の要素より手前に */
            box-shadow: 0 -2px 10px rgba(0,0,0,0.3); /* 上部に影をつけて浮き上がらせる */
        }

        .display-controls-wrapper {
            justify-content: space-between;
            min-height: 8vh;
        }

        .shift-group {
            display: flex;
            flex-direction: row; /* 横方向 */
            align-items: center; /* 垂直方向中央揃え */
            flex-wrap: nowrap;
            gap: 8px;
        }

        /* ボタン：円形、アウトラインスタイル */
        .shift-group .sc-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 1px solid #dadce0;
            color: #5f6368; /* Google Grey 700 */
            font-family: 'Google Sans', Roboto, Arial, sans-serif;
            font-size: 1.2rem;
            font-weight: 400;
            box-shadow: none; /* フラットに */
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s ease;
        }

        /* ホバー時：薄いグレー背景 */
        .shift-group .sc-btn:hover {
            background-color: #f1f3f4; /* Google Grey 100 */
            border-color: #dadce0;
            color: #202124;
            transform: none; /* 拡大アニメーションを無効化 */
        }

        /* クリック時：リップル風の青み */
        .shift-group .sc-btn:active {
            background-color: #e8f0fe; /* Google Blue 50 */
            color: #1967d2; /* Google Blue 700 */
            border-color: #e8f0fe;
        }
        .shift-group .option-item {
            background-color: #f1f3f4; /* Google Grey 100 */
            border-radius: 20px; /* 完全に丸く */
            height: 40px;
            padding: 0 16px; /* 横幅に余裕を持たせる */
            border: 1px solid transparent;
            transition: background 0.2s;
            justify-content: center;
        }

        .shift-group .option-item:hover {
            background-color: #e8eaed; /* Google Grey 200 */
        }

        .shift-group .select-wrapper {
            width: auto;
        }

        .shift-group select {
            font-family: 'Google Sans', Roboto, Arial, sans-serif;
            font-weight: 500;
            color: #3c4043;
            font-size: 14px;
            cursor: pointer;
            text-align: center;
            text-align-last: center;
            padding: 0;
        }

        /* セレクトボックスの矢印（▼）の色調整 */
        .shift-group .select-wrapper::after {
            color: #fff0;
            right: -8px; /* 位置微調整 */
        }

        /* 古いラベル（Root, Parallelなどの文字）はデザイン的に冗長なので非表示 */
        .shift-group .label {
            display: none;
        }

        .separator {
            width: 1px;
            background-color: #ddd;
            align-self: stretch;
            margin: 0.5vw 0;
        }

        .rb-selector-container {
            display: flex;
            flex-direction: column;
            gap: 0.5vh;
            margin-bottom: 1vh;
            background: #333;
            padding: 0.5em;
            border-radius: 0.5em;
        }

        .rb-row {
            display: flex;
            align-items: center;
            gap: 0.5em;
        }

        .rb-label {
            width: 3em;
            font-size: 0.8em;
            color: #aaa;
            text-align: right;
        }

        .rb-btn-group {
            display: flex;
            flex: 1;
            gap: 2px;
        }

        .rb-btn {
            flex: 1;
            background: #444;
            border: none;
            color: #ccc;
            font-size: 0.8em;
            padding: 0.4em 0;
            cursor: pointer;
            border-radius: 2px;
        }

        .rb-btn:hover {
            background: #555;
        }

        .rb-btn.active {
            background: var(--key-color-dominant);
            /* 青系 */
            color: white;
            font-weight: bold;
        }

        /* Bass選択時のNoneボタン等 */
        .rb-btn.special {
            flex: 0 0 auto;
            padding-left: 0.5em;
            padding-right: 0.5em;
            width: auto;
        }

        /* ===== ツールチップ (ポップアップ) 用スタイル ===== */
        #chord-tooltip {
            position: fixed;
            z-index: 9999;
            background: rgba(30, 30, 30, 0.95);
            border: 1px solid #666;
            color: #eee;
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 0.9rem;
            pointer-events: none;
            /* マウスイベントを透過させる（チラつき防止） */
            display: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            line-height: 1.5;
            min-width: 220px;
        }

        #chord-tooltip h4 {
            margin: 0 0 5px 0;
            padding-bottom: 5px;
            border-bottom: 1px solid #555;
            font-size: 1.1em;
            color: var(--color-dominant);
        }

        .tt-color-badge {
            display: inline-block;
            width: 0.9em;
            height: 0.9em;
            border-radius: 50%;
            margin-right: 8px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            vertical-align: middle;
            position: relative;
            top: -1px;
        }

        .tt-annotation {
            margin-top: 8px;
            padding-top: 5px;
            border-top: 1px dashed #555;
            color: #ff9999;
            /* 注意書き用の色 */
            font-size: 0.85em;
            text-align: left;
        }

        .tt-row {
            display: flex;
            justify-content: space-between;
            gap: 15px;
        }

        .tt-label {
            color: #aaa;
            font-size: 0.85em;
        }

        .tt-val {
            font-weight: bold;
            text-align: right;
        }

        .tt-notes {
            color: #ddd;
            font-family: monospace;
            font-size: 1.1em;
            margin-top: 5px;
            text-align: center;
        }


        .sc-btn {
            font-family: inherit;
            font-size: 1.5vw;
            font-weight: bold;
            width: 3vw;
            height: 3vw;
            cursor: pointer;
            border-radius: 0.8em;
            border: 1px solid rgba(128, 128, 128, 0.3);
            background-color: #f0f0f0;
            color: var(--text-dark);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s ease;
        }

        .sc-btn:hover {
            background-color: #e0e0e0;
            transform: scale(1.1);
        }

        .sc-btn.muted {
            opacity: 0.5;
            background-color: #ccc;
            text-decoration: line-through;
        }

        #editModeBtn.active-mode {
            background-color: var(--key-color-principal);
            color: white;
            border-color: var(--key-color-principal);
        }

        #playedChordDisplay {
            text-align: center;
            flex-grow: 1;
            user-select: none;
            overflow: visible;
            cursor: pointer;
            /* クリック可能に見せる */
            border-radius: 0.5em;
            transition: background-color 0.2s;
            padding: 0 0.5vw;
        }

        #playedChordDisplay:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* ホバー時の視覚効果 */
        #playedChordDisplay:active {
            cursor: grabbing;
        }

        /* ドラッグ時のカーソル */

        #playedChordName {
            font-weight: bold;
            font-size: 1.6em;
            white-space: nowrap;
            overflow: visible;
        }

        #chordNotes {
            font-size: 1em;
            margin-top: 0.5em;
        }

        .chord-button {
            height: 10vh;
        }

        .key-button {
            height: 10vh;
        }

        @media screen and (max-width: 640px) {
            .main-container {
                flex-direction: column;
                padding-top: 2vh;
                padding-bottom: calc(10px + env(safe-area-inset-bottom));
            }

            .col-tab {
                display: flex !important;
                position: fixed;
                top: 0;
                bottom: auto;
                left: 0;
                width: 100%;
                height: auto;
                max-height: 80vh;
                background-color: #393939cc;
                z-index: 400;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

                transform: translateY(calc(-100% + var(--header-height, 64px)));

                flex-direction: column;
                padding: 1vh 2vw 1vh 2vw;
                padding-top: calc(var(--header-height, 64px) + 1vh);

                transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
                will-change: transform;

                padding-top: max(calc(var(--header-height, 64px) + 1vh), env(safe-area-inset-top) + 64px) !important;
            }

            /* 展開時のクラス */
            .col-tab.expanded {
                transform: translateY(0);
            }

            .col-tab.dragging {
                transition: none !important;
            }

            /* スワイプ用のハンドルバーのデザイン */
            .mobile-tab-handle-container {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100px;
                height: 24px;
                position: absolute;
                bottom: -24px;
                left: 50%;
                transform: translateX(-50%);
                background-color: #393939cc; /* 白に変更 */
                border-radius: 0 0 12px 12px;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* やわらかい影 */
                cursor: grab;
                z-index: 401;
                border: 1px solid rgba(0,0,0,0.05); /* 薄い枠線 */
                border-top: none;
            }

            .mobile-tab-handle {
                width: 32px;
                height: 4px;
                background-color: #dadce0; /* 薄いグレー */
                border-radius: 2px;
            }

            /* 開くためのトリガーボタン（画面下部に常駐） */
            .mobile-tab-trigger {
                display: none !important;
            }

            /* タブが開いているときはトリガーを隠す */
            .col-tab.expanded ~ .mobile-tab-trigger {
                display: none; /* JSで制御する方が確実ですがCSSでも補助 */
            }

            .col-main {
                width: 100%;
                flex-grow: 1;
                min-height: 0;
            }

            .col-main>table {
                margin-bottom: 0;
            }

            h1 {
                font-size: 5vw;
            }

            .info-icon {
                width: 5vw;
                height: 5vw;
                font-size: 3vw;
            }

            .col-info-left img {
                height: 8vw;
            }

            .row-header {
                display: none;
            }

            .chord-button {
                height: 9vh;
                width: 13vw;
            }

            .chord-button .name {
                font-size: 3vw;
            }

            .chord-button .type {
                font-size: 2.5vw;
            }

            .col-main table tr:nth-child(2) td:nth-child(n+2) .chord-button,
            .col-main table tr:nth-child(3) td:nth-child(n+2) .chord-button {
                height: 8vh;
                min-height: 40px;
            }

            .col-main table tr:nth-child(2) td:nth-child(n+2) .chord-button .name,
            .col-main table tr:nth-child(3) td:nth-child(n+2) .chord-button .name {
                font-size: 2.6vw;
            }

            .col-main table tr:nth-child(2) td:nth-child(n+2) .chord-button .type,
            .col-main table tr:nth-child(3) td:nth-child(n+2) .chord-button .type {
                font-size: 2.1vw;
            }

            .key-button {
                height: 8vh;
                min-height: 45px;
            }

            .key-button .name {
                font-size: 4vw;
            }

            .key-button .type {
                font-size: 2.5vw;
            }

            #principalKeySelect {
                font-size: 5vw;
            }

            .shift-controls-container {
                padding: 10px;
                gap: 8px;
                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
                padding-bottom: calc(10px + env(safe-area-inset-bottom));
            }

            .shift-group .sc-btn {
                width: 10vw;
                height: 10vw;
                max-width: 44px;
                max-height: 44px;
                font-size: 1.2rem;
            }

            .shift-group .option-item {
                height: 10vw;
                max-height: 44px;
            }

            .shift-controls-container .separator {
                display: none;
            }

            #playedChordDisplay {
                order: 1;
                flex: 1 1 auto;
                width: 70%;
                margin-right: 4px;
                height: auto;
                min-height: 40px;

                padding-top: 2px;
                padding-bottom: 2px;
            }

            .shift-controls-container > div:last-child {
                order: 2;
                flex: 0 0 auto;
            }

            #editModeBtn {
                width: auto;
                min-width: 50px;
                height: 40px !important;
                border-radius: 8px;
            }


            /* シフトボタン等の微調整 */
            .shift-group .label { display: none; } /* ラベル(Rootなど)はスペース節約のため隠すか、小さくする */
            .shift-controls-container .sc-btn {
                width: 8vw;
                height: 8vw;
                font-size: 5vw;
            }

            /* セレクトボックスの調整 */
            .option-item {
                height: 10vw;
            }

            .display-controls-wrapper {
                flex-direction: row;
                flex-wrap: nowrap;
                padding: 1vw;
                min-height: auto;
            }

            .shift-group {
                order: 3;       /* 下段へ */
                flex: 1 1 30%;  /* 3等分 (33%より少し余裕を持たせる) */
                width: auto;
                max-width: none;

                display: flex;
                flex-direction: row; /* グループ内も横並び */
                justify-content: center;
                align-items: center;
                gap: 2px;       /* ボタン間の隙間を極小に */

                margin-top: 8px; /* 上段との隙間 */
                border-right: 1px dashed #e0e0e0; /* グループ間の区切り線(任意) */
            }

            .shift-group:last-of-type {
                border-right: none;
            }

            .separator {
                display: block;
            }

            .shift-group .sc-btn {
                width: 28px;
                height: 28px;
                flex: 0 0 28px; /* サイズ固定 */
                font-size: 14px;
                border-width: 1px;
            }

            /* セレクトボックスを小さく */
            .shift-group .option-item {
                height: 28px;
                padding: 0;
                min-width: 0;   /* 縮小許可 */
                flex: 1;        /* 余ったスペースを埋める */
                border-radius: 14px;
            }

            .shift-group select {
                font-size: 11px; /* 文字サイズを小さく */
                padding: 0 0 0 4px;
                text-align: center;
            }

            /* セレクトボックスの矢印調整 */
            .shift-group .select-wrapper::after {
                font-size: 8px;
                right: 2px;
            }

            #editModeBtn {
                width: 40px;
                height: 40px !important;
                border-radius: 8px;
            }

            #playedChordName {
                font-size: 4vw;
            }

            #chordNotes {
                font-size: 2.8vw;
            }

            #chord-editor-popup .popup-content {
                width: 90vw;
            }

            .editor-grid {
                gap: 1vw;
            }

            .editor-btn {
                font-size: 3.5vw;
                padding: 1vh 0;
            }

            .editor-piano-container {
                height: 14vh;
            }

            .main-header {
                gap: 0;
                justify-content: space-between;
                width: 100%;
                padding-top: max(20px, env(safe-area-inset-top)) !important; /* 8px→20pxに変更 */
            }

            .main-header .option-item {
                height: 5vh;
            }

            .main-header .sc-btn {
                width: 8vw;
                height: 8vw;
                font-size: 4vw;
            }

            /* フッター周辺：下のホームバー（黒い棒）に被らないようにパディングを追加 */
            body {
                /* body全体の下に余白を作る */
                padding-bottom: env(safe-area-inset-bottom) !important;
            }

        }

        /* ===== 新しいヘッダー用のスタイル ===== */
        .main-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #ffffff;
            color: #5f6368;
            padding: 8px 16px;
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
            border-radius: 0 0 8px 8px;
            margin-bottom: 1vh;
            position: relative;
            z-index: 500;
            min-height: 64px;
            box-sizing: border-box;
        }

        .main-header.menu-open {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            box-shadow: none; /* 境目の影も消して一体化させる */
            border-bottom: 1px solid #f1f3f4; /* 境目に薄い線を入れる（お好みで） */
        }

        .header-branding {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: inherit;
        }

        .header-branding img {
            height: 32px;
            width: 32px;
            border-radius: 50%;
        }

        .header-branding h1 {
            font-family: 'Google Sans', Roboto, Arial, sans-serif;
            font-size: 22px;
            font-weight: 400;
            color: #202124;
            letter-spacing: -0.5px;
        }

        /* PC表示用コンテナ */
        .header-controls-wrapper {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: nowrap;
        }

        .header-group {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            padding-left: 8px;
            border-left: 1px solid #dadce0;
        }

        .header-group:first-child {
            border-left: none;
        }

        /* マテリアルデザイン風の入力・ボタンエリア */
        .main-header .option-item {
            background-color: #f1f3f4;
            color: #3c4043;
            height: 36px;
            border-radius: 18px; /* 角丸（Pill shape） */
            border: 1px solid transparent;
            padding: 0 12px;
            display: flex;
            align-items: center;
            transition: background 0.2s;
        }

        .main-header .option-item:hover {
            background-color: #e8eaed;
        }

        .main-header .option-item label {
            color: #5f6368;
            font-size: 12px;
            font-weight: 500;
            margin-right: 8px;
            text-transform: uppercase;
        }

        .main-header select {
            color: #202124;
            font-weight: 500;
            background: transparent;
            border: none;
            font-size: 13px;
        }

        .main-header .select-wrapper::after {
            color: #5f6368;
            font-size: 10px;
        }

        /* アイコンボタン系 (Export/Muteなど) */
        .header-icon-btn {
            background: transparent;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #5f6368;
            font-size: 20px;
            transition: background 0.2s;
        }

        .header-icon-btn svg {
            width: 24px;
            height: 24px;
            fill: currentColor; /* 文字色(ダークグレー/青)を継承 */
        }

        .header-icon-btn:hover {
            background-color: rgba(95, 99, 104, 0.1);
        }

        .header-icon-btn.active {
            color: #1a73e8;
            background-color: #e8f0fe;
        }

        /* Mode Button (Pill style) */
        .header-pill-btn {
            background: #fff;
            border: 1px solid #dadce0;
            color: #3c4043;
            padding: 4px 12px;
            border-radius: 14px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            margin-right: 4px;
        }
        .header-pill-btn:hover {
            background: #f8f9fa;
            border-color: #dadce0;
        }
        .header-pill-btn.selected {
            background: #e8f0fe;
            color: #1a73e8;
            border-color: #1a73e8;
        }

        /* ハンバーガーメニューボタン (スマホ用・初期は非表示) */
        .menu-toggle-btn {
            display: none;
            background: transparent;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #5f6368;
            padding: 8px;
        }

        @media screen and (max-width: 1100px) {
            .shift-controls-container .separator {
                display: none;
            }

            .header-branding h1 {
                font-size: 18px;
            }

            /* メニューボタンを表示 */
            .menu-toggle-btn {
                display: block;
            }

            /* コントロール部分を隠す（ドロップダウン化） */
            .header-controls-wrapper {
                display: none; /* デフォルト非表示 */
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                box-sizing: border-box;
                background: #ffffff;
                flex-direction: column;
                align-items: flex-start;
                padding: 16px;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                border-radius: 0 0 8px 8px;
                gap: 16px;
                z-index: 1000;
            }

            .header-controls-wrapper.open {
                display: flex;
            }

            .header-group {
                width: 100%;
                border-left: none;
                padding-left: 0;
                border-bottom: 1px solid #f1f3f4;
                padding-bottom: 12px;
                flex-wrap: wrap;
            }

            .header-group:last-child {
                border-bottom: none;
            }

            .main-header .option-item {
                width: 100%;
                justify-content: space-between;
            }
        }
        @media screen and (max-width: 900px) {
        }
/* ===== EDITOR POPUP STYLES UPDATES ===== */

        /* エディタ内のセレクトボックスのスタイル */
        .editor-select-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        .editor-select-group {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .editor-select-group label {
            font-size: 0.8em;
            color: #aaa;
            margin-bottom: 4px;
        }

        .editor-select-group select {
            background: #444;
            color: white;
            border: 1px solid #666;
            padding: 8px;
            border-radius: 4px;
            font-size: 1em;
            width: 100%;
        }

        /* --- ボタンの色分け定義 --- */
        /* Root: 赤 */
        .editor-btn.color-root {
            background-color: #e06666;
            border: 1px solid #cc4444;
        }
        .editor-btn.color-root:hover { background-color: #ea9999; }
        .editor-btn.color-root.active { background-color: #cc0000; color: white; border-color: white; }

        /* sus: 緑 */
        .editor-btn.color-sus {
            background-color: #6aa84f;
            border: 1px solid #38761d;
        }
        .editor-btn.color-sus:hover { background-color: #93c47d; }
        .editor-btn.color-sus.active { background-color: #274e13; color: white; border-color: white; }

        /* add: ピンク (※現状ボタンがないため定義のみ) */
        .editor-btn.color-add {
            background-color: #ea9999;
            border: 1px solid #c90076;
        }

        /* minor/b5: 紫 */
        .editor-btn.color-minor {
            background-color: #8e7cc3;
            border: 1px solid #674ea7;
        }
        .editor-btn.color-minor:hover { background-color: #b4a7d6; }
        .editor-btn.color-minor.active { background-color: #351c75; color: white; border-color: white; }

        /* dim/ø: グレー */
        .editor-btn.color-dim {
            background-color: #999999;
            border: 1px solid #666666;
        }
        .editor-btn.color-dim:hover { background-color: #b7b7b7; }
        .editor-btn.color-dim.active { background-color: #444444; color: white; border-color: white; }

        /* aug: オレンジ */
        .editor-btn.color-aug {
            background-color: #e69138;
            border: 1px solid #b45f06;
        }
        .editor-btn.color-aug:hover { background-color: #f6b26b; }
        .editor-btn.color-aug.active { background-color: #783f04; color: white; border-color: white; }

        /* 6/7/Maj/Tensions: 水色 */
        .editor-btn.color-extension {
            background-color: #6d9eeb;
            border: 1px solid #1155cc;
            color: #222; /* 文字色調整 */
        }
        .editor-btn.color-extension:hover { background-color: #a4c2f4; }
        .editor-btn.color-extension.active { background-color: #1c4587; color: white; border-color: white; }

        #principalKeySelect-wrapper:hover {
            transform: none !important;
        }
        #principalKeySelect-wrapper:hover .type {
            transform: none !important;
        }