/* 図の追加(g6)用のスタイル */

/* g6Voices: 声部をつなぐ線と、注目する音 */
.fig-svg .g6-link{ stroke:var(--faint); stroke-width:1; }
.fig-svg .g6-link.hot{ stroke:var(--accent); stroke-width:1.8; }
.fig-svg .g6-hot .notehead{ fill:var(--accent); }

/* g6Motion */
.fig-svg .g6-dot{ fill:var(--sub); }
.fig-svg .g6-dot.hot{ fill:var(--accent); }

/* g6Clock */
.fig-svg .g6-ring{ fill:none; stroke:var(--line); stroke-width:1; }
.fig-svg .g6-node{ fill:var(--surface); stroke:var(--line2); stroke-width:1; }
.fig-svg .g6-node.on{ fill:var(--accent); stroke:var(--accent); }
.fig-svg .g6-node.ring{ fill:var(--surface); stroke:var(--accent); stroke-width:1.8; }
.fig-svg .g6-node.ring2{ fill:var(--surface); stroke:var(--text); stroke-width:1.4; }
.fig-svg .g6-shape{ stroke:var(--accent); stroke-width:2; fill:none; stroke-linejoin:round; }
.fig-svg .g6-shape.poly{ fill:var(--accent-bg); stroke-width:1.6; }
.fig-svg .g6-shape.b{ stroke:var(--sub); stroke-dasharray:4 3; }

/* g6Grid: 小節ごとの和音表 */
.g6-grid{ max-width:480px; }
.g6-row{ display:grid; grid-template-columns:22px repeat(var(--g6-per, 4), 1fr); align-items:stretch; border-top:1px solid var(--line2); }
.g6-row:last-child{ border-bottom:1px solid var(--line2); }
.g6-bar{ font-size:11px; color:var(--faint); padding-top:8px; }
.g6-cell{ border-left:1px solid var(--line2); padding:8px 4px; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:2px 10px; min-height:44px; }
.g6-row .g6-cell:last-child{ border-right:1px solid var(--line2); }
.g6-ch{ display:inline-flex; flex-direction:column; align-items:center; line-height:1.3; }
.g6-ch b{ font-size:15px; font-weight:600; }
.g6-ch i{ font-style:normal; font-size:11px; color:var(--sub); }
.g6-ch.t b{ color:var(--fn-t); }
.g6-ch.s b{ color:var(--fn-s); }
.g6-ch.d b{ color:var(--fn-d); }

/* g6Lanes: 時間軸に沿った横棒 */
.g6-lanes{ max-width:480px; }
.g6-lane{ display:flex; align-items:center; gap:10px; margin:0 0 6px; }
.g6-lab{ flex:0 0 68px; font-size:12px; color:var(--sub); line-height:1.3; text-align:right; }
.g6-track{ position:relative; flex:1; height:30px; border-bottom:1px solid var(--line); }
.g6-axis .g6-track{ height:16px; border-bottom:0; }
.g6-axis .g6-track i{ position:absolute; top:0; font-style:normal; font-size:11px; color:var(--faint); transform:translateX(-2px); }
.g6-blk{ position:absolute; top:2px; bottom:2px; box-sizing:border-box; border-radius:5px; background:var(--surface-2); border:1px solid var(--line2); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.g6-blk span{ font-size:12px; line-height:1.2; white-space:nowrap; padding:0 2px; }
.g6-blk.a{ background:var(--accent-bg); border-color:transparent; }
.g6-blk.c{ background:transparent; border-style:dashed; color:var(--sub); }
@media (max-width:480px){
  .g6-lab{ flex-basis:54px; font-size:11.5px; }
  .g6-blk span{ font-size:11px; }
}