/* 図鑑・ツール「ギター」(指板図・コードダイアグラム) */
.gt-switch{ margin-bottom:14px; }
.gt-scroll{ overflow-x:auto; margin:12px 0 4px; padding-bottom:6px; border-radius:8px; }
.gt-scroll:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.gt-hint{ font-size:12.5px; margin:6px 0 12px; }
.gt-chips{ margin:4px 0 12px; }
.gt-chip small{ color:var(--sub); font-size:11.5px; }
.gt-chip.active small{ color:inherit; opacity:.8; }
.gt-chip.playing{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }

.gt-board{ display:block; max-width:none; }
.gt-board text{ font-family:var(--font); }
.gt-fnum, .gt-snum{ font-size:11px; fill:var(--faint); }
.gt-nut{ stroke:var(--text); stroke-width:4; }
.gt-fret{ stroke:var(--line2); stroke-width:1.5; }
.gt-string{ stroke:var(--faint); }
.gt-inlay{ fill:var(--line2); }
.gt-note{ cursor:pointer; outline:none; }
.gt-note circle{ fill:var(--surface); stroke:var(--faint); stroke-width:1.5; }
.gt-note text{ font-size:11px; font-weight:600; fill:var(--text); pointer-events:none; }
.gt-note.root circle{ fill:var(--accent); stroke:var(--accent); }
.gt-note.root text{ fill:#fff; }
.gt-note:hover circle{ stroke:var(--accent); }
.gt-note:focus-visible circle{ stroke:var(--accent); stroke-width:3; }
.gt-note.playing circle{ fill:var(--key-on); stroke:var(--accent); stroke-width:3; }
.gt-note.playing text{ fill:var(--text); }
.gt-note.root.playing circle{ fill:var(--accent-2); }
.gt-note.root.playing text{ fill:#fff; }

.gt-forms{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; margin:14px 0 8px; }
.gt-form{ border:1px solid var(--line); border-radius:10px; padding:12px 12px 14px; background:var(--surface); display:flex; flex-direction:column; align-items:center; }
.gt-form-head{ width:100%; display:flex; flex-direction:column; gap:2px; font-size:13px; margin-bottom:6px; }
.gt-form-head small{ color:var(--sub); font-size:12px; }
.gt-form-foot{ margin-top:8px; }
.gt-diagram{ width:100%; max-width:190px; height:auto; display:block; }
.gt-diagram text{ font-family:var(--font); }
.gt-dfret{ stroke:var(--line2); stroke-width:1.2; }
.gt-dnut{ stroke:var(--text); stroke-width:4; }
.gt-dcapo{ stroke:var(--sub); stroke-width:7; stroke-linecap:round; }
.gt-dstr{ stroke:var(--faint); stroke-width:1.3; }
.gt-dstr.playing{ stroke:var(--accent); stroke-width:3; }
.gt-dstart{ font-size:11px; fill:var(--sub); }
.gt-capo-lbl{ font-size:10px; fill:var(--sub); }
.gt-barre{ fill:var(--accent-bg); stroke:var(--accent); stroke-width:1; }
.gt-dot circle{ fill:var(--accent); }
.gt-dot text{ font-size:10px; font-weight:700; fill:#fff; }
.gt-dot.playing circle{ fill:var(--accent-2); stroke:var(--text); stroke-width:2; }
.gt-open{ fill:none; stroke:var(--text); stroke-width:1.4; }
.gt-open.playing{ stroke:var(--accent); stroke-width:2.6; fill:var(--accent-bg); }
.gt-mute{ font-size:13px; fill:var(--sub); }
.gt-dname{ font-size:10.5px; fill:var(--sub); }
.gt-dname.root{ font-weight:700; fill:var(--text); }
.gt-dname.playing{ fill:var(--accent); font-weight:700; }

@media (max-width:640px){
  .gt-forms{ grid-template-columns:1fr 1fr; gap:10px; }
  .gt-form{ padding:10px 8px 12px; }
}