/* 作曲・分析タブ(cmp- 接頭辞) */
.cmp-card{ margin-bottom:14px; }
.cmp-row{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-bottom:10px; }
.cmp-row:last-child{ margin-bottom:0; }
.cmp-field{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--sub); }
.cmp-check{ display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.cmp-sub{ margin:14px 0 6px; font-size:12.5px; font-weight:600; color:var(--sub); }
.cmp-sub:first-child{ margin-top:0; }
.cmp-small{ font-weight:400; font-size:12px; }
.cmp-hint{ margin:8px 0 14px; font-size:12.5px; color:var(--sub); }
.cmp-sum{ margin:0 0 8px; font-size:13.5px; }
.cmp-text{ display:block; width:100%; height:auto; padding:8px 10px; font:13px/1.55 ui-monospace, Consolas, monospace; resize:vertical; margin-bottom:8px; }
.cmp-err{ margin:0 0 12px; padding:8px 12px; border-radius:8px; background:var(--ng-bg); color:var(--ng); font-size:13px; }
.cmp-err code{ font-family:inherit; font-weight:700; }
.cmp-tags{ display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; }
.cmp-kind{ font-size:10.5px; color:var(--sub); border:1px solid var(--line2); border-radius:4px; padding:0 4px; line-height:16px; }

/* 小節のグリッド */
.cmp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin-bottom:6px; }
.cmp-bar, .cmp-abar{ border:1px solid var(--line); border-radius:10px; padding:6px 8px 8px; background:var(--surface); }
.cmp-bar-head{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--sub); margin-bottom:4px; min-height:20px; }
.cmp-bar-ops button{ border:0; background:none; font-size:11.5px; color:var(--sub); padding:2px 5px; border-radius:5px; }
.cmp-bar-ops button:hover{ background:var(--surface-2); color:var(--text); }
.cmp-slots, .cmp-aslots{ display:flex; gap:6px; }
.cmp-slot{ flex:1 1 0; min-width:0; min-height:62px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:6px 8px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--text); text-align:left; }
.cmp-slot:hover{ border-color:var(--faint); }
.cmp-slot.sel{ border-color:var(--accent); background:var(--accent-bg); box-shadow:0 0 0 2px var(--accent-bg); }
.cmp-slot.playing, .cmp-acell.playing{ border-color:var(--accent); background:var(--accent-bg); }
.cmp-slot b, .cmp-acell b{ font-size:16px; line-height:1.2; overflow-wrap:anywhere; }
.cmp-slot small, .cmp-acell small, .cmp-pc small{ font-size:11.5px; color:var(--sub); }
.cmp-empty{ font-size:12px; color:var(--sub); }
.cmp-bar.two .cmp-slot b{ font-size:14px; }

/* パレット・提案 */
.cmp-pal{ display:flex; flex-wrap:wrap; gap:6px; }
.cmp-pc{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:74px; padding:5px 9px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--text); text-align:left; }
.cmp-pc:hover{ border-color:var(--accent); }
.cmp-pc b{ font-size:14px; }
.cmp-pc .fn-badge{ margin-top:2px; }
.cmp-sugs{ display:flex; flex-wrap:wrap; gap:8px; }
.cmp-sug{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:7px 11px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--text); text-align:left; max-width:260px; }
.cmp-sug:hover{ border-color:var(--accent); }
.cmp-sug em{ font-style:normal; font-size:11.5px; color:var(--sub); }

/* ピアノロール */
.cmp-rollwrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--surface); max-width:100%; }
.cmp-rollwrap canvas{ display:block; cursor:crosshair; touch-action:pan-x; }
.cmp-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--sub); margin-bottom:14px; }
.cmp-legend .lg{ display:inline-block; width:12px; height:9px; border-radius:2px; margin-right:5px; vertical-align:baseline; }
.lg-ct{ background:var(--accent); } .lg-sc{ background:var(--fn-x); } .lg-out{ background:var(--ng); }
.lg-bad{ background:var(--surface); border:2px solid var(--ng); box-sizing:border-box; }
.lg-bgc{ background:var(--accent-bg); border:1px solid var(--line2); box-sizing:border-box; } .lg-bgs{ background:var(--surface-2); border:1px solid var(--line2); box-sizing:border-box; }
.cmp-issues{ list-style:none; margin:0; padding:0; }
.cmp-issues li{ padding:7px 0; border-top:1px solid var(--line); font-size:13.5px; }
.cmp-issues li span{ display:block; font-size:12.5px; color:var(--sub); margin-top:2px; }

/* 分析 */
.cmp-keys{ display:flex; flex-wrap:wrap; gap:8px; }
.cmp-key{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 14px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--text); }
.cmp-key b{ font-size:15px; }
.cmp-key small{ font-size:11.5px; color:var(--sub); }
.cmp-key.sel{ border-color:var(--accent); background:var(--accent-bg); }
.cmp-agrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.cmp-acell{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2px; padding:6px 8px; border:1px solid var(--line2); border-radius:8px; }
.cmp-notes{ margin:12px 0 0; padding-left:1.2em; font-size:13.5px; }
.cmp-notes li{ margin-bottom:4px; }
.cmp-matches{ display:flex; flex-direction:column; }
.cmp-match{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.cmp-match:first-child{ border-top:0; }
.cmp-match small{ color:var(--sub); font-size:12px; margin-left:6px; }

@media (max-width:640px){
  .cmp-grid, .cmp-agrid{ grid-template-columns:repeat(2, 1fr); }
  .cmp-match{ flex-direction:column; align-items:flex-start; }
}