/* 図の追加(g1)用のスタイル */
.g1-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.g1-btns .visual-play{ margin-top:0; }
.fig-g1Dynamics svg, .fig-g1Accidental svg, .fig-g1Enharmonic svg{ display:block; margin:0 auto; }

/* SVG 部品 */
.fig-svg .g1-ts{ font-family:var(--font, inherit); font-weight:700; fill:var(--text); }
.fig-svg .g1-hl .notehead, .fig-svg .g1-hl .accidental, .fig-svg .g1-hl .stem{ fill:var(--accent); stroke:var(--accent); }
.fig-svg .g1-hl .ledger{ stroke:var(--accent); }
.fig-svg .g1-it{ font-style:italic; }
.fig-svg .g1-it2{ font-family:Georgia, "Times New Roman", serif; font-style:italic; font-weight:700; }
.fig-svg .g1-dyn{ font-family:Georgia, "Times New Roman", serif; font-style:italic; font-weight:700; }
.fig-svg .g1-dot{ stroke-width:1.5; }
.fig-svg .g1-dot.s3{ fill:var(--accent); stroke:var(--accent); }
.fig-svg .g1-dot.s2{ fill:var(--accent-bg); stroke:var(--accent); }
.fig-svg .g1-dot.s1{ fill:var(--surface); stroke:var(--line2); }
.fig-svg .g1-restcell{ fill:none; stroke:var(--faint); stroke-dasharray:3 3; }
.fig-svg .g1-arc{ fill:none; stroke:var(--text); stroke-width:1.5; stroke-linecap:round; }
.fig-svg .g1-mark{ stroke:var(--text); stroke-width:1.8; stroke-linecap:round; fill:none; }
.fig-svg .g1-line{ stroke:var(--text); stroke-width:2.6; stroke-linecap:round; fill:none; }
.fig-svg .g1-thick{ fill:var(--text); }
.fig-svg .g1-hair{ stroke:var(--text); stroke-width:1.6; stroke-linecap:round; fill:none; }
.fig-svg .g1-wave{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; }
.fig-svg .g1-sound{ fill:var(--accent-bg); stroke:var(--accent); }
.fig-svg .fg-key.black.g1-keyon{ fill:var(--accent); }

/* カード */
.g1-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:6px 0; }
.g1-cards.wide{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.g1-cards.sm{ grid-template-columns:repeat(auto-fit, minmax(124px, 1fr)); }
.g1-card{ display:flex; flex-direction:column; gap:4px; padding:10px 10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); min-width:0; }
.g1-card svg{ align-self:center; }
.g1-card b{ font-size:14px; }
.g1-card > span{ font-size:12.5px; line-height:1.6; color:var(--sub); }
.g1-card .visual-play{ align-self:flex-start; margin-top:6px; height:30px; padding:0 13px; font-size:12.5px; }
.g1-card u{ text-decoration:none; font-weight:700; color:var(--text); }
.g1-steps{ margin:2px 0 0; padding-left:1.3em; font-size:12.5px; line-height:1.7; color:var(--text); }
.g1-steps li{ margin:2px 0; }

/* リズム・拍の行 */
.g1-rrow, .g1-mrow, .g1-wrow{ margin:8px 0 4px; padding:8px 0; border-top:1px solid var(--line); overflow-x:auto; }
.g1-rrow:first-child, .g1-mrow:first-child, .g1-wrow:first-child{ border-top:0; }
.g1-rh, .g1-mh, .g1-wh{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-bottom:6px; }
.g1-rh b, .g1-mh b, .g1-wh b{ font-size:14px; }
.g1-rh span, .g1-mh span, .g1-wh span{ font-size:12.5px; color:var(--sub); }
.g1-rh .visual-play, .g1-mh .visual-play, .g1-wh .visual-play{ margin:0 0 0 auto; height:28px; padding:0 12px; font-size:12.5px; }

/* テンポ標語 */
.g1-tempo-axis{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sub); margin:4px 0 6px; }
.g1-tempo-axis i{ flex:1; height:1px; background:var(--line2); position:relative; }
.g1-tempo-axis i::after{ content:""; position:absolute; right:0; top:-3px; border-style:solid; border-width:3.5px 0 3.5px 6px; border-color:transparent transparent transparent var(--line2); }
.g1-tempo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; }
.g1-tcell{ display:flex; flex-direction:column; gap:2px; padding:9px 10px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.g1-tcell b{ font-family:Georgia, "Times New Roman", serif; font-style:italic; font-size:16px; }
.g1-tcell span{ font-size:12.5px; color:var(--text); }
.g1-tcell em{ font-style:normal; font-size:12px; color:var(--sub); }
.g1-tcell .visual-play{ align-self:flex-start; margin-top:6px; height:28px; padding:0 12px; font-size:12.5px; }

/* 曲の地図 */
.g1-map{ display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.g1-mapcap{ font-size:12px; color:var(--sub); margin-top:4px; }
.g1-mapbars, .g1-mapord{ display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end; }
.g1-mbar{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:46px; }
.g1-mbar i{ font-style:normal; font-size:11.5px; line-height:1.3; color:var(--accent); min-height:1.3em; white-space:nowrap; }
.g1-mbar b{ display:block; width:100%; text-align:center; padding:8px 8px; border:1px solid var(--line2); border-radius:6px; background:var(--surface); font-size:13.5px; }
.g1-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; border:1px solid var(--line2); border-radius:14px; font-size:13px; background:var(--surface); }
.g1-chip small{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:9px; background:var(--accent-bg); color:var(--accent); font-size:11px; font-weight:700; }
.g1-chip + .g1-chip::before{ content:"→"; color:var(--faint); margin-left:-2px; margin-right:2px; }

/* ドラム打ち込み表 */
.g1-lanes{ display:flex; flex-direction:column; gap:3px; overflow-x:auto; padding-bottom:2px; }
.g1-lane{ display:grid; grid-template-columns:52px repeat(var(--n, 8), minmax(18px, 1fr)); gap:3px; align-items:center; min-width:min(100%, 420px); }
.g1-lname{ font-size:12.5px; color:var(--sub); }
.g1-cell{ height:24px; border:1px solid var(--line2); border-radius:4px; background:var(--surface); text-align:center; font-size:11px; line-height:22px; color:var(--sub); }
.g1-lhead .g1-cell{ height:auto; border:0; background:none; }
.g1-lhead .g1-cell.beat{ font-weight:700; color:var(--text); }
.g1-cell.on{ background:var(--accent); border-color:var(--accent); }
.g1-cell.on.weak{ background:var(--accent-bg); border-color:var(--accent); }
.g1-lhead .g1-cell.bb{ color:var(--accent); font-weight:700; }
.g1-lane:not(.g1-lhead) .g1-cell.bb:not(.on){ background:var(--surface-2); }
.g1-lanes + .visual-play{ margin-top:10px; }

/* ハネ/ストレート */
.g1-swing{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.g1-sbeat small{ display:block; font-size:11.5px; color:var(--sub); margin-bottom:2px; }
.g1-spair{ display:flex; gap:2px; height:22px; }
.g1-spair i{ display:block; border-radius:4px; background:var(--surface-2); border:1px solid var(--line2); }
.g1-spair i.alt{ background:var(--accent-bg); border-color:var(--accent); }

@media (max-width:520px){
  .g1-cards{ grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); }
  .g1-cards.wide{ grid-template-columns:1fr; }
  .g1-rh .visual-play, .g1-mh .visual-play, .g1-wh .visual-play{ margin-left:0; }
}

/* 再生中に光る(data-g1-b / data-g1-k) */
.g1-cell.playing, .g1-spair i.playing, .g1-tcell.playing{ background:var(--mark); outline:2px solid var(--accent); outline-offset:1px; }
.fig-svg circle[data-g1-b].playing{ fill:var(--mark); stroke:var(--accent); stroke-width:3.5; }
.fig-svg rect[data-g1-b].playing, .fig-svg rect[data-g1-k].playing{ fill:var(--mark); stroke:var(--accent); stroke-width:2; }
.fig-svg path.g1-wave.playing{ stroke-width:3.5; }