/* ═══════════════════════════════════════════════
   FRETBOARD v10 — fretboard-specific styles
   共通スタイルは common.css を参照
   ═══════════════════════════════════════════════ */

/* ════════════════════════════════════
   APP LAYOUT
   ════════════════════════════════════ */
.app {
	display: grid;
	grid-template-columns: 276px 1fr;
	flex: 1;
	overflow: hidden;
	height: calc(100vh - 52px);
	max-height: calc(100vh - 52px);
	min-height: 0;
	transition: grid-template-columns .18s ease;
}

/* サイドバー全体を格納した状態（バッキング再生に集中したい時などに使用） */
.app.sidebar-collapsed {
	grid-template-columns: 0px 1fr;
}

.app.sidebar-collapsed .sidebar {
	border-right: none;
}

/* ════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════ */
.sidebar {
	background: var(--surface-1);
	border-right: 1px solid var(--border-hi);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	/* 以前はoverflow:hiddenだったため、Chord Type等を展開して中身が
	   サイドバーの高さを超えた場合、+ADD TO PROGRESSIONボタン等が
	   下にはみ出て完全にクリップされ、押せなくなっていた。
	   縦スクロールできるようにして、はみ出た分は下にスクロールして
	   届くようにする（狭い画面では特に発生しやすい）。 */
	height: 100%;
	min-height: 0;
}

.sidebar-section {
	border-bottom: 1px solid var(--border-hi);
	flex-shrink: 0;

}

/* 「デフォルト進行を読み込む」ボタン（サイドバー、Save to JamHubの下）。
   violet系(--accent3)を使い、バッジ・インプロ関連UIと同系色で
   「サイト提供のコンテンツ」であることが伝わるようにしている */
.default-prog-open-btn {
	width: 100%;
	margin: 6px 0 10px;
	padding: 9px 12px;
	background: none;
	border: 1px solid var(--accent3, #7b61ff);
	border-radius: 8px;
	color: var(--accent3, #7b61ff);
	font-family: 'Barlow', sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.default-prog-open-btn:hover {
	background: var(--accent3, #7b61ff);
	color: #fff;
}

.sidebar-section.prog-section {
	flex: 1 1 80px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 80px;

}

.sidebar-title {
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--text-lo);
	padding: 8px 13px 5px;
	border-bottom: 1px solid var(--border-md);
	background: var(--surface-2);
}

/* Chord Type / Templates など、個別に格納できるセクションのタイトル行 */
.sidebar-title.with-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
}

.section-toggle-btn {
	background: none;
	border: none;
	color: var(--text-lo);
	font-size: 12px;
	cursor: pointer;
	padding: 2px 4px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	transition: color .15s;
}

.section-toggle-btn:hover {
	color: var(--accent3);
}

/* 格納可能なセクション本体（Chord Type / Templates）。
   grid-template-rowsを1fr⇄0frでアニメーションさせることで、
   高さが不定なコンテンツでも滑らかな開閉トランジションを実現する
   （height:autoは直接アニメーションできないための定番テクニック）。 */
.section-body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .2s ease;
}

.section-body.collapsed {
	grid-template-rows: 0fr;
}

.section-body-inner {
	overflow: hidden;
	min-height: 0;
}

.sidebar-templete {
	height: 200px;
	/* ←ここでウィンドウの高さ決める */
	overflow-y: auto;
	/* ←縦スクロール */
	overflow-x: hidden;
	/* 長いテンプレート名でも横スクロールバーを出さない（.tmpl-btn 側で省略表示） */
	border: 1px solid rgba(255,255,255,0.2);
	flex-shrink: 0;
	transition: height .2s ease;
}

/* Templatesを格納した時、タイトル行だけの高さまで縮める。
   これによりflexboxの.prog-section(flex:1 1 80px)が空いた分を自動的に取り込み、
   Chord Progressionの表示領域が広がる。 */
.sidebar-templete.collapsed {
	height: 33px;
	overflow: hidden;
}

/* ── Note picker ── */
.note-picker {
	padding: 8px 10px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
}

.note-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);

	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 600;

	width: 39px;
	height: 39px;

	display: flex;
	align-items: center;
	justify-content: center;

	line-height: 1;

	border-radius: 5px;
	cursor: pointer;
	transition: all .14s;
}

.note-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-dim);
	box-shadow: 0 0 8px var(--accent-dim);
}

.note-btn.active {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: 0 0 10px var(--accent-dim);
}

/* ── Type picker ── */
.type-picker {
	padding: 2px 10px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
}

.type-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-size: 13px;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	padding: 5px 3px;
	text-align: center;
	cursor: pointer;
	border-radius: 5px;
	transition: all .14s;
}

.type-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-dim);
}

.type-btn.active {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--accent);
}

/* ADD button */
.add-btn {
	display: block;
	margin: 8px 10px;
	width: calc(100% - 20px);
	background: linear-gradient(135deg, var(--accent) 0%, #00b8cc 100%);
	border: none;
	color: #07100e;
	font-family: 'Orbitron', monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	padding: 9px;
	cursor: pointer;
	border-radius: 5px;
	transition: all .2s;
	box-shadow: 0 0 12px var(--accent-dim), 0 2px 6px rgba(0, 0, 0, .4);
}

.add-btn:hover {
	filter: brightness(1.1);
	box-shadow: 0 0 20px var(--accent-glow), 0 4px 10px rgba(0, 0, 0, .5);
}

.add-btn.editing {
	background: linear-gradient(135deg, var(--accent3) 0%, #5a3ee0 100%);
	box-shadow: 0 0 12px var(--accent3-dim);
	color: #04161a;
}

.add-btn.editing:hover {
	box-shadow: 0 0 20px var(--accent3-glow);
}

/* ── Progression list ── */
.prog-scroll {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 5px 7px;
	background: var(--bg);
	min-height: 0;
}

.prog-items {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.prog-item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 7px 9px;
	background: var(--surface-1);
	border: 1px solid var(--border-md);
	border-radius: 5px;
	cursor: pointer;
	transition: all .14s;
}

.prog-item:hover {
	border-color: var(--border-hi);
	background: var(--surface-2);
}

.prog-item.active {
	border-color: var(--accent);
	background: var(--accent-dim);
	box-shadow: 0 0 10px var(--accent-dim);
}

.prog-item.editing {
	border-color: var(--accent3);
	background: var(--accent3-dim);
}

.prog-item.beat-flash {
	background: var(--beat-flash);
	border-color: var(--accent3);
}

.prog-num {
	font-size: 8px;
	color: var(--text-lo);
	width: 14px;
	text-align: right;
}

.prog-name {
	font-family: 'Orbitron', monospace;
	font-size: 12px;
	font-weight: 700;
	flex: 1;
	color: var(--text-hi);
}

.prog-scale-badge {
	font-size: 7px;
	color: var(--accent3);
	background: var(--accent3-dim);
	border: 1px solid rgba(0,229,255,.2);
	border-radius: 4px;
	padding: 1px 5px;
	max-width: 72px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.prog-bpm-badge {
	font-size: 8px;
	color: var(--text-lo);
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	border-radius: 3px;
	padding: 1px 5px;
	white-space: nowrap;
	cursor: pointer;
	transition: all .14s;
}

.prog-bpm-badge:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.prog-del {
	background: none;
	border: none;
	color: var(--text-lo);
	font-size: 11px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .14s;
	padding: 0 2px;
}

.prog-item:hover .prog-del {
	opacity: 1;
}

.prog-del:hover {
	color: var(--accent2);
}

.prog-edit {
	background: none;
	border: 1px solid var(--border-md);
	color: var(--text-lo);
	font-size: 9px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .14s, color .14s, border-color .14s;
	padding: 1px 5px;
	border-radius: 3px;
}

.prog-item:hover .prog-edit {
	opacity: 1;
}

.prog-edit:hover {
	color: var(--accent3);
	border-color: var(--accent3);
}

.prog-span-badge {
	font-size: 7px;
	color: var(--text-lo);
	background: var(--surface-2);
	border: 1px solid var(--border-md);
	border-radius: 2px;
	padding: 1px 4px;
	white-space: nowrap;
	flex-shrink: 0;
}

.prog-empty {
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 57px;

	font-size: 15px;
	color: var(--text-lo);

	text-align: center;
}

/* ── Templates ── */
.template-list {
	padding: 4px 7px 6px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--bg);
	max-height: 110px;
	overflow-y: auto;
}

.tmpl-btn {
	background: transparent;
	border: none;
	color: var(--text-md);
	font-size: 14px;
	font-family: 'Barlow', sans-serif;
	text-align: left;
	padding: 4px 8px;
	cursor: pointer;
	border-radius: 4px;
	transition: all .14s;
	white-space: nowrap;
	display: block;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tmpl-btn:hover {
	color: var(--accent);
	background: var(--accent-dim);
}

.tmpl-has-audio {
	color: var(--accent3, #0cf);
}

.tmpl-has-audio:hover {
	color: var(--accent3, #0cf);
	background: var(--accent3-dim, rgba(0, 204, 255, .1));
}

.tmpl-audio-icon {
	font-size: 10px;
	margin-right: 4px;
	opacity: .85;
}

.sidebar-footer {
	padding: 8px 10px;
	border-top: 1px solid var(--border-hi);
	background: var(--surface-1);
	flex-shrink: 0;
}

.clear-btn {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-family: 'Barlow', sans-serif;
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px;
	cursor: pointer;
	border-radius: 5px;
	transition: all .14s;
}

.clear-btn:hover {
	border-color: var(--accent2);
	color: var(--accent2);
}

/* ── Span row ── */
.span-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px 2px;
}

.span-label {
	font-size: 8px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-lo);
	white-space: nowrap;
	flex-shrink: 0;
}

.span-btns {
	display: flex;
	gap: 3px;
}

.span-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-family: 'Orbitron', monospace;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: all .14s;
	min-width: 30px;
	text-align: center;
}

.span-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.span-btn.active {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--accent);
}

/* ════════════════════════════════════
   DEGREE BADGES
   ════════════════════════════════════ */
.degree-badge {
	font-family: 'Orbitron', monospace;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	letter-spacing: .04em;
	white-space: nowrap;
	flex-shrink: 0;
}

.degree-diatonic {
	background: rgba(0,229,255,.14);
	border: 1px solid rgba(0,229,255,.45);
	color: var(--accent);
}

.degree-secondary {
	background: rgba(123, 97, 255, .14);
	border: 1px solid rgba(123, 97, 255, .45);
	color: #a896ff;
}

.degree-borrowed {
	background: rgba(0,229,255,.12);
	border: 1px solid rgba(0,229,255,.4);
	color: var(--accent3);
}

.degree-nondiatonic {
	background: rgba(240, 80, 80, .13);
	border: 1px solid rgba(240, 80, 80, .4);
	color: #ff7070;
}

.degree-secondary {
	color: #9b8cff;
	border-color: rgba(123, 97, 255, .4);
}

.degree-borrowed {
	color: var(--accent3);
	border-color: rgba(255, 138, 0, .4);
}

.degree-nondiatonic {
	color: #b02020;
	border-color: rgba(180, 40, 40, .4);
}

.degree-header-diatonic {
	border-color: rgba(0,229,255,.6);
	color: var(--accent);
}

.degree-header-secondary {
	border-color: rgba(123, 97, 255, .6);
	color: #a896ff;
}

.degree-header-borrowed {
	border-color: rgba(0,229,255,.6);
	color: var(--accent3);
}

.degree-header-non-diatonic {
	border-color: rgba(240, 80, 80, .6);
	color: #ff7070;
}

/* ════════════════════════════════════
   KEY BAR
   ════════════════════════════════════ */
/* コントロール（key-bar/playback-bar/difficulty-bar）の開閉トグル行。
   狭い画面でこの3つをまとめて格納し、指板の描画領域を確保できるようにする。
   スタイルはSTAFF EDITORのタイトル行(.staff-toolbar-title)に揃えている。 */
.transport-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 18px;
	background: var(--surface-1);
	border-bottom: 1px solid var(--border-hi);
	cursor: pointer;
	flex-shrink: 0;
}

.transport-toggle-label {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-lo);
}

.key-bar {
	background: var(--surface-1);
	border-bottom: 1px solid var(--border-hi);
	padding: 7px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	overflow-x: auto;
	min-width: 0;
}

.key-mode-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-family: 'Barlow', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	padding: 5px 12px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .15s;
	white-space: nowrap;
}

.key-mode-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.key-mode-btn.active {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-dim);
	box-shadow: 0 0 10px var(--accent-dim);
}

.key-panel {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.key-select {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-hi);
	font-family: 'Barlow', sans-serif;
	font-size: 13px;
	padding: 4px 8px;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	max-width: 130px;
}

.key-select:focus {
	border-color: var(--accent);
}

.key-auto-btn {
	background: var(--surface-2);
	border: 1px solid var(--accent3);
	color: var(--accent3);
	font-family: 'Barlow', sans-serif;
	font-size: 10px;
	padding: 4px 9px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .15s;
	white-space: nowrap;
}

.key-auto-btn:hover {
	background: var(--accent3-dim);
	box-shadow: 0 0 8px var(--accent3-dim);
}

.key-apply-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-family: 'Barlow', sans-serif;
	font-size: 10px;
	padding: 4px 9px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .15s;
	white-space: nowrap;
}

.key-apply-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.key-label {
	font-family: 'Orbitron', monospace;
	font-size: 11px;
	color: var(--text-md);
	letter-spacing: .06em;
}

/* Transpose */
.transpose-group {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.transpose-label {
	font-size: 13px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--text-lo);
	white-space: nowrap;
}

.key-select.transpose-select {
	max-width: 120px;
}

.transpose-btn {
	background: linear-gradient(135deg, var(--accent) 0%, #00b8cc 100%);
	border: none;
	color: #07100e;
	font-family: 'Orbitron', monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 5px 11px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .18s;
	box-shadow: 0 0 8px var(--accent-dim);
}

.transpose-btn:hover {
	filter: brightness(1.1);
	box-shadow: 0 0 16px var(--accent-glow);
}

/* ════════════════════════════════════
   PLAYBACK BAR
   ════════════════════════════════════ */
.playback-bar {
	background: var(--surface-1);
	border-bottom: 1px solid var(--border-hi);
	padding: 7px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	overflow-x: auto;
	min-width: 0;
}

.difficulty-bar {
	background: var(--surface-1);
	border-bottom: 1px solid var(--border-hi);
	padding: 6px 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.diff-bar-label {
	color: var(--text-lo);
	font-size: 11px;
	letter-spacing: .05em;
}
.difficulty-bar .diff-star {
	font-size: 15px;
	color: var(--surface-4, #333);
}
.difficulty-bar .diff-star.filled {
	color: var(--accent);
	text-shadow: 0 0 8px var(--accent-glow);
}

.pb-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid var(--accent);
	background: transparent;
	color: var(--accent);
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .18s;
	flex-shrink: 0;
	box-shadow: 0 0 8px var(--accent-dim);
}

.pb-btn:hover,
.pb-btn.playing {
	background: var(--accent);
	color: #07100e;
	box-shadow: 0 0 18px var(--accent-glow), 0 0 6px rgba(0, 0, 0, .5);
}

.pb-divider {
	width: 1px;
	height: 22px;
	background: var(--border-hi);
}

.pb-bpm-group {
	display: flex;
	align-items: center;
	gap: 7px;
}

/* クリック(メトロノーム)グループ。以前はここにflex指定が無く、
   ラベル・ボタン・スライダー・数値入力がブロック要素として縦に
   積み上がって表示されてしまっていた。他のグループ(bpm/backing/offset)と
   同じ横並びレイアウトに統一する。 */
.pb-click-group {
	display: flex;
	align-items: center;
	gap: 7px;
}

.pb-label {
	font-size: 14px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-lo);
}

.pb-bpm-val {
	font-family: 'Orbitron', monospace;
	font-size: 20px;
	font-weight: 700;
	color: var(--accent);
	min-width: 46px;
	text-align: center;
	text-shadow: 0 0 14px var(--accent-glow);
}

/* BPMを直接入力できるinput（見た目は元のdiv表示と揃えつつ、周囲のテーマカラーに
   馴染むボックス型デザインにする。固定の高さを持たせることでplayback-bar全体の
   高さが数値inputのせいで縦に伸びてしまうのを防ぐ） */
.pb-bpm-val-input {
	box-sizing: border-box;
	width: 52px;
	height: 26px;
	background: var(--surface-2);
	border: 1px solid var(--accent-dim, var(--border-md));
	border-radius: var(--radius-sm);
	padding: 0 4px;
	color: var(--accent);
	-moz-appearance: textfield;
}

.pb-bpm-val-input::-webkit-outer-spin-button,
.pb-bpm-val-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pb-bpm-val-input:hover {
	border-color: var(--accent);
}

.pb-bpm-val-input:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--surface-1);
	box-shadow: 0 0 8px var(--accent-glow);
}

/* 音量(%)/オフセット(ms)用の数値input。スライダーの右側に横並びで配置する
   小型ボックス。high/lowどちらのラベル色でも視認できるよう背景・枠線を明示する */
.pb-vol-val-input {
	box-sizing: border-box;
	font-family: 'Orbitron', monospace;
	font-size: 11px;
	font-weight: 700;
	color: var(--accent3);
	width: 40px;
	height: 20px;
	text-align: center;
	background: var(--surface-2);
	border: 1px solid var(--accent3-dim, var(--border-md));
	border-radius: var(--radius-sm);
	padding: 0 2px;
	-moz-appearance: textfield;
}

.pb-vol-val-input::-webkit-outer-spin-button,
.pb-vol-val-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pb-vol-val-input:hover {
	border-color: var(--accent3);
}

.pb-vol-val-input:focus {
	outline: none;
	border-color: var(--accent3);
	background: var(--surface-1);
	box-shadow: 0 0 8px var(--accent3-glow);
}

.pb-bpm-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 90px;
	height: 3px;
	background: var(--border-hi);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}

.pb-bpm-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--accent);
	cursor: pointer;
	box-shadow: 0 0 8px var(--accent-glow);
}

.pb-beats {
	display: flex;
	gap: 5px;
	align-items: center;
}

.pb-beat-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--border-hi);
	transition: background .07s, box-shadow .07s;
}

.pb-beat-dot.on {
	background: rgb(0 229 255);
	box-shadow: 0 0 8px var(--accent-glow);
}

.pb-loop-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-size: 10px;
	padding: 4px 9px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .14s;
}

.pb-loop-btn:hover,
.pb-loop-btn.active {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-dim);
}

.pb-backing-group {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
}

.pb-backing-label {
	font-size: 8px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-lo);
}

.pb-backing-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-size: 10px;
	padding: 4px 9px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .14s;
}

.pb-backing-btn:hover {
	border-color: var(--accent3);
	color: var(--accent3);
}

.pb-backing-btn.active {
	border-color: var(--accent3);
	color: var(--accent3);
	background: var(--accent3-dim);
	box-shadow: 0 0 8px var(--accent3-dim);
}

.pb-vol-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 64px;
	height: 3px;
	background: var(--border-hi);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}

.pb-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent3);
	cursor: pointer;
	box-shadow: 0 0 8px var(--accent3-glow);
}

/* ── 音源オフセットスライダー ── */
.pb-offset-group {
	display: flex;
	align-items: center;
	gap: 7px;
	padding-left: 8px;
	border-left: 1px solid var(--border-hi);
}

.pb-offset-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 80px;
	height: 3px;
	background: var(--border-hi);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}

.pb-offset-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent2, #f0a);
	cursor: pointer;
	box-shadow: 0 0 8px var(--accent2, #f0a);
}

.pb-offset-val {
	font-size: 10px;
	min-width: 42px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pb-offset-val::-webkit-outer-spin-button,
.pb-offset-val::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ════════════════════════════════════
   SCALE BAR
   ════════════════════════════════════ */
.scale-bar {
	background: var(--surface-1);
	border-bottom: 1px solid var(--border-hi);
	padding: 7px 18px;
	display: flex;
	align-items: center;
	gap: 9px;
	overflow-x: auto;
	flex-shrink: 0;
}

.scale-bar-label {
	font-size: 8px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-lo);
	white-space: nowrap;
	flex-shrink: 0;
}

.scale-pills {
	display: flex;
	gap: 5px;
	flex-wrap: nowrap;
}

/* Pill base */
.scale-pill,
scale-pill.best,
scale-pill.key-mode {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 4px 12px;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 20px;
	transition: all .15s;
}

.scale-pill:hover,
scale-pill.best:hover,
scale-pill.key-mode:hover {
	border-color: var(--accent3);
	color: var(--accent3);
	background: var(--accent3-dim);
}

.scale-pill.active,
scale-pill.best.active,
scale-pill.key-mode.active {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: 0 0 10px var(--accent-dim);
}

/* ジャンルモード選択（スケール候補の並べ替え）。scale-bar右端に配置し、key-selectと同じ見た目に揃える */
.scale-mode-wrap {
	margin-left: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.scale-mode-select {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-hi);
	font-family: 'Barlow', sans-serif;
	font-size: 13px;
	padding: 4px 8px;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	max-width: 130px;
	/* ブラウザのネイティブ選択肢ポップアップ自体をダークテーマで描画させる。
	   これが無いと、OSが明るいテーマの場合にポップアップの背景が白のまま描画され、
	   下のoption指定（明るい文字色）と衝突して文字が読めなくなる。 */
	color-scheme: dark;
}

.scale-mode-select:focus {
	border-color: var(--accent3);
}

/* <option>自体にも明示指定しておく（color-schemeだけでは反映しないブラウザ向けの保険） */
.scale-mode-select option {
	background: var(--surface-2);
	color: var(--text-hi);
}

/* 現在選択中のジャンルモードを、プルダウンの左側にバッジとして常時表示する */
.scale-mode-current {
	font-family: 'Orbitron', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	white-space: nowrap;
	flex-shrink: 0;
	background: var(--accent3-dim);
	border: 1px solid var(--accent3);
	color: var(--accent3);
	padding: 3px 9px;
	border-radius: 20px;
}

/* ════════════════════════════════════
   MAIN AREA
   ════════════════════════════════════ */
.main-area {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg);
	height: 100%;
	min-height: 0;
	position: relative;
}

/* アクティブビュー（コントロール〜指板〜譜面をまとめる縦並びコンテナ）。
   以前は fretboard.html 側の inline スタイルで指定していたが、狭い/低い画面用の
   メディアクエリから overflow 等を上書きできるよう、こちらへ移動した。
   display だけは JS(chord-display.js) が none/flex を切り替えるため inline のまま。 */
#activeView {
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

/* サイドバー全体の開閉タブ。折りたたんでいる間もmain-area側の左端に常に表示される */
.sidebar-toggle-tab {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 44px;
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	border-left: none;
	border-radius: 0 6px 6px 0;
	color: var(--text-lo);
	font-size: 11px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: color .15s, background .15s;
}

.sidebar-toggle-tab:hover {
	color: var(--accent3);
	background: var(--accent3-dim);
}

.fretboard-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 12px 18px 8px;
	min-height: 0;
	min-width: 0;
	/* flexアイテムは初期値min-width:autoのため、幅方向にも縮まれるようにしておく。
	   これが無いと子要素(key-bar/playback-bar/scale-bar)のoverflow-x:autoが
	   正しく機能せず、狭い画面で右側の要素が切れて見えるだけになってしまう
	   （Postsページのタブ横スクロールで発生したのと同じ種類の不具合）。 */
}

/* Fretboard controls */
.fretboard-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
	/* フレット範囲ボタン＋凡例(コードトーン/スケール音/両方)を、狭い画面では
	   横スクロールさせず折り返す（内容としては折り返しても違和感が無いため） */
}

.fb-ctrl-label {
	font-size: 8px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--text-lo);
}

.fret-range-btns {
	display: flex;
	gap: 3px;
}

.fret-range-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-size: 12px;
	padding: 3px 10px;
	cursor: pointer;
	border-radius: 5px;
	transition: all .14s;
}

.fret-range-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.fret-range-btn.active {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-dim);
	box-shadow: 0 0 8px var(--accent-dim);
}

.legend-row {
	display: flex;
	gap: 14px;
	margin-left: auto;
	align-items: center;
}

.leg-item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 15px;
	color: var(--text-md);
}

.leg-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ════════════════════════════════════
   FRETBOARD
   ════════════════════════════════════ */
.fretboard-wrap {
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
}

.fretboard {
	position: relative;
	min-width: 660px;
	width: 100%;
}

.fb-fret-col {
	flex: 1;
	border-right: 1px solid var(--fret);
	position: relative;
	min-width: 54px;
	background: var(--fret-bg);
}

.fb-fret-col:last-child {
	border-right: none;
}

/* Inlay dots */
.inlay-dot {
	position: absolute;
	width: 8px;
	height: 8px;
	background: var(--inlay);
	border-radius: 50%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	border: 1px solid var(--fret);
}

.fb-strings {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

.fb-string-line {
	flex: 1;
	display: flex;
	align-items: center;
	position: relative;
}

.fb-string-wire {
	position: absolute;
	left: 0;
	right: 0;
	background: var(--string);
	border-radius: 1px;
}

.fb-nut {
	width: 14px;
	background: var(--nut);
	flex-shrink: 0;
	border-radius: 2px 0 0 2px;
	position: relative;
	z-index: 3;
	border-right: 2px solid var(--border-hi);
}

.fb-dots-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Fret dots */
.fb-dot {
	position: absolute;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	transform: translate(-50%, -50%);
	z-index: 10;
	pointer-events: all;
	cursor: pointer;
	font-family: 'Barlow', sans-serif;
	animation: dotIn .10s cubic-bezier(.34, 1.56, .64, 1) both;
	transition: transform .14s, box-shadow .14s;
}

.fb-dot:hover {
	transform: translate(-50%, -50%) scale(1.2);
}

.fb-dot.chord-dot {
	background: var(--chord-dot);
	color: #1a0510;
	box-shadow: 0 0 16px var(--accent4-glow), 0 0 6px rgba(255,46,136,.4), 0 2px 5px rgba(0, 0, 0, .5);
	text-shadow: 0 1px 1px rgba(255, 255, 255, .2);
}

.fb-dot.scale-dot {
	background: rgba(123, 97, 255, .82);
	border: 2.5px solid rgba(0, 0, 0, .6);
	color: #ffffff;
	box-shadow: 0 0 12px var(--accent3-glow), inset 0 0 6px rgba(123, 97, 255, .12);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.fb-dot.both-dot {
	background: var(--both-dot);
	border: 2.5px solid rgba(0, 0, 0, .6);
	color: #07100e;
	box-shadow: 0 0 16px var(--both-dot-glow), 0 2px 8px rgba(0, 0, 0, .6);
	text-shadow: 0 1px 1px rgba(255, 255, 255, .2);
}

/* Open string column */
.open-string-col {
	width: 18px;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 5;
}

.open-string-indicator {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.open-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	font-weight: 700;
}

.open-dot.chord {
	background: var(--chord-dot);
	border-color: var(--chord-dot);
	color: #1a0510;
	box-shadow: 0 0 10px var(--accent4-glow);
}

.open-dot.scale {
	background: rgba(123, 97, 255, .82);
	border: 2.5px solid rgba(0, 0, 0, .6);
	color: #ffffff;
	box-shadow: 0 0 10px var(--accent3-glow);
}

.open-dot.both {
	background: var(--both-dot);
	border: 2.5px solid rgba(0, 0, 0, .6);
	color: #07100e;
	box-shadow: 0 0 10px var(--both-dot-glow);
	text-shadow: none;
}


/* String / fret labels */
.string-labels {
	display: flex;
	flex-direction: column;
	width: 22px;
	flex-shrink: 0;
}

.string-label {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	color: var(--text-lo);
	font-weight: 600;
}

.fret-numbers {
	display: flex;
	margin-top: 6px;
}

.fret-num {
	flex: 1;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-lo);
}

.fret-num-marker {
	color: var(--text-hi);
	font-weight: 800;
}

/* ════════════════════════════════════
   INFO STRIP
   ════════════════════════════════════ */
/* スケール説明文バー。以前のinfo-strip(コードトーン一覧・スケール音一覧・
   説明文の3ブロック構成)を廃止し、staff-scrollの表示領域を確保するため
   説明文のみの1行バーに簡素化。scale-barのすぐ下に表示される。 */
.scale-desc-bar {
	border-top: 1px solid var(--border-hi);
	background: var(--surface-1);
	padding: 6px 18px;
	flex-shrink: 0;
	box-shadow: 0 -1px 0 0 var(--border-hi), inset 0 1px 0 0 rgba(255, 255, 255, .04);
}

.scale-desc-text {
	font-size: 12px;
	color: var(--text-md);
	line-height: 1.4;
	font-style: italic;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ════════════════════════════════════
   PLACEHOLDER
   ════════════════════════════════════ */
.placeholder-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	color: var(--text-lo);
}

.placeholder-icon {
	font-size: 90px;
	opacity: .1;
}

.placeholder-text {
	font-size: 20px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ════════════════════════════════════
   BPM POPOVER
   ════════════════════════════════════ */
.bpm-popover {
	position: fixed;
	background: var(--surface-1);
	border: 1px solid var(--border-hi);
	border-radius: 8px;
	padding: 14px 16px;
	z-index: 2000;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 180px;
}

.bpm-popover-title {
	font-size: 8px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--text-lo);
}

.bpm-popover-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bpm-popover-val {
	font-family: 'Orbitron', monospace;
	font-size: 20px;
	color: var(--accent);
	min-width: 42px;
	text-shadow: 0 0 12px var(--accent-glow);
}

.bpm-popover-slider {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 3px;
	background: var(--border-hi);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}

.bpm-popover-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--accent);
	cursor: pointer;
	box-shadow: 0 0 8px var(--accent-glow);
}

.bpm-popover-actions {
	display: flex;
	gap: 5px;
}

.bpm-pop-btn {
	flex: 1;
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-size: 9px;
	padding: 5px;
	border-radius: 4px;
	cursor: pointer;
	transition: all .14s;
}

.bpm-pop-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.bpm-pop-btn.ok {
	background: var(--accent);
	border-color: var(--accent);
	color: #07100e;
	font-weight: 700;
	box-shadow: 0 0 10px var(--accent-dim);
}

/* ════════════════════════════════════
   STAFF EDITOR
   ════════════════════════════════════ */
.staff-section {
	border-top: 1px solid var(--border-hi);
	background: var(--bg);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	/* STAFF_H(1段=120px、staff-editor.js)×2段 + ツールバー分を確保し、
	   info-strip廃止で浮いたスペースを充当して2段同時表示できるようにした */
	height: 280px;
	min-height: 160px;
	max-height: 280px;
	overflow: hidden;
	transition: height .2s ease, min-height .2s ease, max-height .2s ease;
}

/* 譜面エディターを格納した時、ツールバーだけの高さまで縮める（フレットボード表示側に
   スペースを明け渡す。Templates格納時の考え方と同じ） */
.staff-section.collapsed {
	height: 35px;
	min-height: 35px;
	max-height: 35px;
}

.staff-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px;
	background: var(--surface-1);
	border-bottom: 1px solid var(--border-hi);
	flex-shrink: 0;
}

/* タイトル+開閉ボタンをまとめた領域。ボタン本体だけでなくこの枠全体をクリックで開閉できる */
.staff-toolbar-title {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.staff-toolbar-label {
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-lo);
	white-space: nowrap;
}

.staff-toolbar-btns {
	display: flex;
	gap: 5px;
	margin-left: auto;
}

.staff-tool-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-family: 'Barlow', sans-serif;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .14s;
	white-space: nowrap;
}

.staff-tool-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.staff-tool-btn.accent {
	border-color: var(--accent3);
	color: var(--accent3);
}

.staff-tool-btn.accent:hover {
	background: var(--accent3-dim);
}

/* 譜面エディター本体(section-body)。staff-scroll-wrapが元々flex:1で
   残りスペースを埋める設計だったため、ここにもflex:1+min-height:0を与え、
   grid-template-rowsの1fr/0frがそのままstaff-section内での高さになるようにする */
#staffBody {
	flex: 1;
	min-height: 0;
}

#staffBody .section-body-inner {
	height: 100%;
}

.staff-scroll-wrap {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}

.staff-scroll {
	width: 100%;
}

.staff-row {
	display: block;
	width: 100%;
	border-bottom: 1px solid var(--border-lo);
}

.staff-row:last-child {
	border-bottom: none;
}

.staff-row svg {
	display: block;
	width: 100%;
}

/* SVG staff elements */
.staff-line {
	stroke: var(--border-hi);
	stroke-width: 1;
}

.staff-barline {
	stroke: var(--border-hi);
	stroke-width: 1.5;
}

.staff-barline-d {
	stroke: var(--border-hi);
	stroke-width: 3;
}

.staff-clef {
	fill: var(--text-lo);
	font-size: 32px;
}

.staff-chord-sym {
	font-family: 'Orbitron', monospace;
	font-size: 14px;
	font-weight: 700;
	fill: var(--accent);
	cursor: pointer;
}

.staff-chord-sub {
	font-family: 'Barlow', sans-serif;
	font-size: 12px;
	font-weight: 600;
	fill: var(--text-hi);
	cursor: pointer;
}

.staff-beat-grid {
	stroke: var(--border-lo);
	stroke-width: 1;
	stroke-dasharray: 3, 4;
}

.staff-cursor {
	fill: var(--accent-dim);
}

.staff-cursor-line {
	stroke: var(--accent);
	stroke-width: 2;
}

.staff-bar-hit {
	fill: transparent;
	cursor: pointer;
}

.staff-rest {
	fill: var(--text-lo);
	font-size: 18px;
}

.staff-time-sig {
	font-family: 'Orbitron', monospace;
	font-size: 14px;
	fill: var(--text-md);
	font-weight: 700;
}

.staff-bar-active {
	fill: var(--accent-dim);
}

.staff-degree-badge {
	font-family: 'Barlow', sans-serif;
	font-size: 8px;
	font-weight: 600;
}

/* Staff popup */
.staff-input-popup {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--surface-1);
	border: 1px solid var(--border-hi);
	border-radius: 10px;
	padding: 14px 16px;
	z-index: 2000;
	box-shadow: 0 12px 48px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04);
	min-width: 360px;
	max-width: 95vw;
	max-height: 80vh;
	overflow-y: auto;
}

.staff-popup-title {
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-lo);
	margin-bottom: 10px;
}

.staff-popup-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.staff-popup-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.staff-popup-label {
	font-size: 8px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--text-lo);
	white-space: nowrap;
	width: 28px;
	flex-shrink: 0;
}

.staff-popup-note-grid {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
}

.staff-popup-note-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-size: 10px;
	font-weight: 600;
	padding: 4px 6px;
	border-radius: 4px;
	cursor: pointer;
	transition: all .12s;
	min-width: 28px;
	text-align: center;
}

.staff-popup-note-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.staff-popup-note-btn.active {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--accent);
}

.staff-popup-type-grid {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
}

.staff-popup-type-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-size: 9px;
	font-weight: 600;
	padding: 3px 6px;
	border-radius: 4px;
	cursor: pointer;
	transition: all .12s;
}

.staff-popup-type-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.staff-popup-type-btn.active {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--accent);
}

.staff-popup-beats {
	display: flex;
	gap: 4px;
}

.staff-beats-btn {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-size: 10px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: all .12s;
}

.staff-beats-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.staff-beats-btn.active {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--accent);
}

.staff-popup-actions {
	display: flex;
	gap: 6px;
	margin-top: 10px;
}

.staff-popup-btn {
	flex: 1;
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-md);
	font-size: 10px;
	padding: 6px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .14s;
}

.staff-popup-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.staff-popup-btn.ok {
	background: var(--accent);
	border-color: var(--accent);
	color: #07100e;
	font-weight: 700;
	box-shadow: 0 0 10px var(--accent-dim);
}

/* ════════════════════════════════════
   ANIMATIONS & SCROLLBAR
   ════════════════════════════════════ */
@keyframes dotIn {
	from {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
	}

	to {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--border-hi);
	border-radius: 2px;
}

/* ════════════════════════════════════
   LINK COLOURS
   ════════════════════════════════════ */
header h1 a {
	text-decoration: none;
	color: var(--accent);
	text-shadow: 0 0 22px var(--accent-glow), 0 0 6px rgba(0,229,255,.1);
	font-family: 'Orbitron', monospace;
	font-weight: 900;
	font-size: 30px;
	letter-spacing: .14em;
	position: relative;
	z-index: 1;
}

/* ════════════════════════════════════
   HIGH-QUALITY BACKING — HQ BADGES
   ════════════════════════════════════ */

/* テンプレートボタン内の HQ バッジ */
.tmpl-hq-badge {
	display: inline-block;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 1px 4px;
	border-radius: 3px;
	background: linear-gradient(135deg, #00e5ff, #5a3ee0);
	color: #1a1008;
	vertical-align: middle;
	margin-left: 4px;
	line-height: 1.4;
	position: relative;
	top: -1px;
	box-shadow: 0 0 6px rgba(0,229,255,.4);
}

/* テンプレート選択中ハイライト */
.tmpl-btn.tmpl-active {
	color: var(--accent);
	background: var(--accent-dim);
	border-left: 2px solid var(--accent);
	padding-left: 6px;
}

/* HQステータスバッジ (テンプレート選択後に表示) */
.hq-badge {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	padding: 2px 8px;
	border-radius: 4px;
	margin: 4px 7px 2px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all .2s;
}

.hq-badge.hq-ready {
	background: rgba(0,229,255,.15);
	border: 1px solid rgba(0,229,255,.5);
	color: #00e5ff;
	box-shadow: 0 0 10px rgba(0,229,255,.2);
	animation: hqPulse 2.5s ease-in-out infinite;
}

.hq-badge.hq-auto {
	background: var(--surface-2);
	border: 1px solid var(--border-hi);
	color: var(--text-lo);
}

@keyframes hqPulse {

	0%,
	100% {
		box-shadow: 0 0 10px rgba(0,229,255,.2);
	}

	50% {
		box-shadow: 0 0 16px rgba(0,229,255,.5);
	}
}

/* ══════════════════════════════════════════════════
   FRETBOARD — Page Transition & Micro-interaction Layer
   ══════════════════════════════════════════════════ */

/* ── ページ登場 ── */
@keyframes fb-pageEnter {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fb-headerSlide {
	from {
		opacity: 0;
		transform: translateY(-100%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

header {
	animation: fb-headerSlide 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── ナビリンク下線アニメーション ── */
nav a {
	position: relative;
}

nav a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 50%;
	height: 2px;
	background: var(--accent);
	border-radius: 1px;
	transition: left 0.22s ease, right 0.22s ease;
}

nav a:hover::before {
	left: 8px;
	right: 8px;
}

/* ── 左パネル・メインエリアのスライドイン ── */
@keyframes fb-slideLeft {
	from {
		opacity: 0;
		transform: translateX(-16px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fb-slideRight {
	from {
		opacity: 0;
		transform: translateX(16px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ── ページ離脱 ── */
@keyframes fb-pageLeave {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}

body.is-leaving {
	animation: fb-pageLeave 0.22s ease both;
}

/* ── ReducedMotion配慮 ── */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
	}
}
/* ════════════════════════════════════
   RESPONSIVE（スマホ対応: 横向き必須の案内）
   フレットボードは指板・五線譜など横に長い情報が中心のため、
   スマホの縦画面での本格対応はスコープ外とし、横向きを必須にする方針とした。
   小さい画面かつ縦向きの場合は.appを隠し、回転を促す案内だけを表示する。
   （手動で調整する場合は、下のmax-width/orientationの値を変えるか、
   このブロックごと削除すれば元の「常に.appを表示」の挙動に戻る）
   ════════════════════════════════════ */
.landscape-required-notice {
	display: none;
}

@media (max-width: 900px) and (orientation: portrait) {
	.app {
		display: none;
	}

	.landscape-required-notice {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		height: calc(100vh - 52px);
		padding: 32px;
		text-align: center;
		background: var(--bg);
	}

	.landscape-notice-icon {
		font-size: 48px;
		animation: landscape-rotate-hint 1.8s ease-in-out infinite;
	}

	.landscape-notice-text {
		font-size: 16px;
		line-height: 1.7;
		color: var(--text-hi);
	}

	.landscape-notice-en {
		font-size: 13px;
		color: var(--text-lo);
	}
}

@keyframes landscape-rotate-hint {

	0%,
	100% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(90deg);
	}
}

/* ════════════════════════════════════
   RESPONSIVE（狭い/低い画面での指板の縦クリップ・横スクロール対策）
   ------------------------------------------------------------------
   ■ 縦方向:
   指板(.fretboard)は「46px × 6弦 = 276px」の固定高さでHTML描画される。
   通常時(縦に十分な高さがある画面)は #activeView が overflow:hidden で
   ビューポートちょうどに収まり、.fretboard-section が flex:1 で余白を埋める。
   しかし横向きスマホやPCズーム等で画面が低いと、.fretboard-section の
   flex:1 の取り分が 276px を下回り、.fretboard-wrap の overflow-y:hidden に
   よって下側の弦(D/A/E)がクリップされ、上2〜3弦しか表示されなくなる。
   そこで狭い/低い画面では #activeView 全体を縦スクロール可能にし、指板と
   譜面には自然な高さを取らせる。これにより常に全6弦へアクセスできる。
   併せてバー類の縦パディングを詰め、スクロール量を抑える。

   ■ 横方向:
   指板は通常時 min-width:660px、各フレット列 min-width:54px を持つため、
   狭い画面(横向きスマホ等)では利用可能幅を超えて右にはみ出し、横スクロール
   しないと全フレットが見えなかった。狭い画面では min-width を外し、フレット列の
   最小幅を「ドット径(=36px)」まで下げることで、指板を利用可能幅にフィットさせて
   横スクロール無しで全体を表示する(列がドット径未満になる極端に狭い場合のみ、
   従来どおり横スクロールにフォールバック)。

   閾値はJS(init-and-key-ui.js)の自動格納(900px/600px)と揃えている。
   ════════════════════════════════════ */
@media (max-width: 900px), (max-height: 600px) {
	#activeView {
		overflow-y: auto;
		overflow-x: hidden;
	}

	/* flex:1 をやめて自然な高さにし、指板が縦に潰れない(=クリップされない)ようにする */
	.fretboard-section {
		flex: 0 0 auto;
		padding: 6px 18px;
	}

	.fretboard-wrap {
		flex: 0 0 auto;
	}

	.fretboard-controls {
		margin-bottom: 6px;
	}

	.scale-bar {
		padding: 4px 18px;
	}

	/* ── 横方向: 指板を利用可能幅にフィットさせる ── */
	/* min-width:660px を外し、width:100% で親(.fretboard-wrap)の幅ちょうどに収める */
	.fretboard {
		min-width: 0;
	}

	/* フレット列の最小幅をドット径(36px)まで下げる。これ以上は縮めるとドットが
	   重なるため、そこを下回る狭さの時だけ .fretboard-wrap の overflow-x で
	   横スクロールにフォールバックする */
	.fb-fret-col {
		min-width: 36px;
	}

	/* 列が詰まる分ドットもわずかに小さくし、隣接フレット間に余白を確保する */
	.fb-dot {
		width: 32px;
		height: 32px;
		font-size: 13px;
	}
}

/* ════════════════════════════════════
   オンボーディングツアー（初回訪問案内）
   ════════════════════════════════════ */
.tour-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 900;
	pointer-events: none;
}

.tour-overlay.active {
	display: block;
}

/* box-shadowで画面全体を暗くしつつ、対象要素の位置だけ「くり抜く」定番のテクニック */
.tour-spotlight {
	position: fixed;
	border-radius: 10px;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
	border: 2px solid var(--accent3);
	transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
	pointer-events: none;
}

.tour-card {
	position: fixed;
	width: min(320px, calc(100vw - 28px));
	background: var(--surface-1);
	border: 1px solid var(--accent3);
	border-radius: var(--radius-md, 10px);
	padding: 16px 18px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
	pointer-events: auto;
	transition: top .25s ease, left .25s ease;
}

.tour-step-count {
	font-family: 'Orbitron', monospace;
	font-size: 10px;
	color: var(--accent3);
	letter-spacing: .08em;
	margin-bottom: 6px;
}

.tour-title {
	font-family: 'Orbitron', monospace;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-hi);
	margin-bottom: 6px;
}

.tour-text {
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-md);
	margin-bottom: 14px;
}

.tour-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.tour-nav {
	display: flex;
	gap: 8px;
}

.tour-btn {
	font-family: 'Barlow', sans-serif;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 20px;
	cursor: pointer;
	border: 1px solid var(--border-md);
	background: none;
	color: var(--text-md);
	transition: all .15s;
}

.tour-skip {
	border-color: transparent;
	color: var(--text-lo);
}

.tour-skip:hover {
	color: var(--text-md);
}

.tour-back:hover {
	border-color: var(--text-md);
	color: var(--text-hi);
}

.tour-next {
	background: var(--accent3);
	border-color: var(--accent3);
	color: #fff;
}

.tour-next:hover {
	filter: brightness(1.1);
}