/* ===== 汎用UI ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--c-text);
  line-height: 1.4;
}
.btn:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  font-weight: 700;
}
.btn--primary:hover { background: var(--c-accent-strong); color: #fff; }
.btn--danger { color: var(--c-danger); border-color: var(--c-danger); }
.btn--danger:hover { background: #fbeae9; border-color: var(--c-danger); }
.btn--small { padding: 2px var(--space-2); font-size: var(--fs-s); border-radius: var(--radius-s); }
.btn--play::before { content: "▶ "; }
.btn--stop::before { content: "■ "; }
.btn[aria-pressed="true"] {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  font-weight: 700;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.callout {
  border-left: 4px solid var(--c-accent);
  background: var(--c-accent-soft);
  border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}
.callout--warn { border-left-color: var(--c-warn); background: #fdf3df; }

.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.field-row label { font-size: var(--fs-s); color: var(--c-text-sub); }
.field-row select, .field-row input[type="number"] {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  background: var(--c-surface);
}
input[type="range"] { accent-color: var(--c-accent); }

details.fold {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  background: var(--c-surface);
}
details.fold summary { cursor: pointer; font-weight: 700; }
details.fold[open] summary { margin-bottom: var(--space-2); }

/* ===== トランスポート(上部固定) ===== */
.transport {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.transport__status {
  font-size: var(--fs-s);
  color: var(--c-text-sub);
  min-width: 8em;
}
.transport__status[data-playing="true"] { color: var(--c-warn); font-weight: 700; }
.transport .vol { display: inline-flex; align-items: center; gap: var(--space-1); }
.transport .vol input[type="range"] { width: 90px; }
@media (max-width: 720px) {
  .transport__status { min-width: 0; }
  .transport .vol input[type="range"] { width: 64px; }
}

/* ===== 鍵盤 ===== */
.kbd-scroll { overflow-x: auto; padding-bottom: var(--space-2); }
.kbd {
  position: relative;
  display: flex;
  height: 132px;
  width: max-content;
  user-select: none;
}
.kbd__key {
  position: relative;
  border: 1px solid #555;
  border-radius: 0 0 5px 5px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.kbd__key--white {
  width: 40px;
  height: 100%;
  background: #fff;
  z-index: 1;
}
.kbd__key--black {
  width: 26px;
  height: 62%;
  background: #333;
  color: #fff;
  margin: 0 -13px;
  z-index: 2;
}
.kbd__key:hover { background-color: #eef2fb; }
.kbd__key--black:hover { background-color: #4a4a6a; }
.kbd__key[data-hl] { box-shadow: inset 0 -34px 0 var(--hl-color, var(--role-scale)); }
.kbd__key--black[data-hl] { box-shadow: inset 0 -26px 0 var(--hl-color, var(--role-scale)); }
.kbd__key.is-playing { background-color: var(--c-playing) !important; }
.kbd__key--black.is-playing { background-color: #8a6d00 !important; }
.kbd__label {
  font-size: 10px;
  line-height: 1.1;
  pointer-events: none;
  text-align: center;
  padding-bottom: 3px;
  z-index: 3;
}
.kbd__key[data-hl] .kbd__label { color: #fff; font-weight: 700; }
.kbd__rolelabel { display: block; font-size: 9px; }

.kbd-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-s); margin-top: var(--space-2); }
.kbd-legend .chip { display: inline-flex; align-items: center; gap: 4px; }
.kbd-legend .chip::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--chip-color, var(--role-scale));
  display: inline-block;
}

/* ===== リズムグリッド ===== */
.rgrid { overflow-x: auto; }
.rgrid__table { display: inline-grid; gap: 4px; }
.rgrid__row { display: flex; gap: 4px; align-items: center; }
.rgrid__rowlabel { width: 5.5em; font-size: var(--fs-s); color: var(--c-text-sub); flex: none; }
.rgrid__cell {
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  position: relative;
}
.rgrid__cell[data-beat-head="true"] { border-left: 3px solid var(--c-text-sub); }
.rgrid__cell[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent-strong); }
.rgrid__cell[aria-pressed="true"][data-accent="true"] { background: var(--c-accent-strong); }
.rgrid__cell[data-accent="true"]::after {
  content: ">";
  position: absolute; top: -2px; right: 2px;
  font-size: 11px; font-weight: 700; color: var(--c-warn);
}
.rgrid__cell.is-playhead { outline: 3px solid var(--c-playing-border); outline-offset: 1px; }
.rgrid__beatnums { display: flex; gap: 4px; margin-left: calc(5.5em + 4px); }
.rgrid__beatnum { width: 34px; flex: none; text-align: center; font-size: var(--fs-s); color: var(--c-text-sub); }
.rgrid__beatnum[data-strong="true"] { font-weight: 700; color: var(--c-text); }

/* ===== コード進行ブロック ===== */
.cblocks { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.cblock {
  border: 2px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  padding: var(--space-2);
  min-width: 92px;
  text-align: center;
  position: relative;
}
.cblock.is-playing { border-color: var(--c-playing-border); background: #fff8e0; }
.cblock__name { font-size: var(--fs-l); font-weight: 700; display: block; }
.cblock__degree { font-size: var(--fs-s); color: var(--c-text-sub); display: block; }
.cblock__notes { font-size: 11px; color: var(--c-text-sub); display: block; }
.cblock__fn {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 6px;
  margin-top: 2px;
  color: #fff;
}
.cblock__fn[data-fn="T"] { background: var(--fn-t); }
.cblock__fn[data-fn="SD"] { background: var(--fn-sd); }
.cblock__fn[data-fn="D"] { background: var(--fn-d); }
.cblock__fn[data-fn="?"] { background: var(--fn-other); }
.cblock__tools { display: flex; justify-content: center; gap: 2px; margin-top: var(--space-1); }
.cblock__tools button {
  border: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  border-radius: 4px;
  font-size: 11px;
  padding: 1px 5px;
}
.cblock__change {
  width: 100%;
  border: 1px dashed var(--c-border);
  background: none;
  border-radius: 4px;
  font-size: var(--fs-s);
  margin-top: var(--space-1);
}
.cblock__change:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }

.cblock-menu {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  box-shadow: var(--shadow-2);
  padding: var(--space-2);
  margin-top: var(--space-2);
}
.cblock-menu__grid { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ===== ピアノロール / 五線譜 / 五度圏 (SVG) ===== */
.proll-wrap, .staff-wrap, .cof-wrap { overflow-x: auto; }
.proll svg, .staff svg { display: block; }
.proll .ev { cursor: pointer; }
.proll .ev.is-selected { stroke: var(--c-accent-strong); stroke-width: 2.5; }
.proll .ev.is-playing { fill: var(--c-playing); }

.cof-wrap svg { max-width: 380px; margin: 0 auto; display: block; }
.cof-key { cursor: pointer; }
.cof-key circle { fill: var(--c-surface); stroke: var(--c-border); stroke-width: 1.5; }
.cof-key:hover circle { fill: var(--c-accent-soft); }
.cof-key.is-selected circle { fill: var(--c-accent); stroke: var(--c-accent-strong); }
.cof-key.is-selected text { fill: #fff; font-weight: 700; }
.cof-key.is-related circle { fill: var(--c-accent-soft); stroke: var(--c-accent); }
.cof-key:focus { outline: none; }
.cof-key:focus circle { stroke: var(--c-accent-strong); stroke-width: 3; }

/* ===== A/B比較 ===== */
.ab { border: 1px solid var(--c-border); border-radius: var(--radius-m); overflow: hidden; margin: var(--space-3) 0; background: var(--c-surface); }
.ab__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.ab__row + .ab__row { border-top: 1px solid var(--c-border); }
.ab__row.is-playing { background: #fff8e0; }
.ab__tag {
  font-weight: 700;
  font-size: var(--fs-l);
  width: 1.6em; height: 1.6em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-surface-alt);
  flex: none;
}
.ab__label { flex: 1; }
.ab__note { padding: var(--space-1) var(--space-3) var(--space-2); font-size: var(--fs-s); color: var(--c-text-sub); }

/* ===== 予想ウィジェット / クイズ ===== */
.predict, .quiz {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  background: var(--c-surface);
  margin: var(--space-3) 0;
}
.choice-list { list-style: none; padding: 0; margin: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.choice-list button {
  width: 100%;
  text-align: left;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  padding: var(--space-2) var(--space-3);
}
.choice-list button:hover { border-color: var(--c-accent); }
.choice-list button[data-state="correct"] { border-color: var(--c-success); background: #e7f3e8; font-weight: 700; }
.choice-list button[data-state="wrong"] { border-color: var(--c-danger); background: #fbeae9; }
.choice-list button[data-state="answer"] { border-color: var(--c-success); border-style: dashed; }
.choice-list button:disabled { cursor: default; opacity: 1; }
.quiz__result { font-weight: 700; }
.quiz__explain {
  border-top: 1px dashed var(--c-border);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}
.quiz__progress { font-size: var(--fs-s); color: var(--c-text-sub); }

/* ===== レッスン ===== */
.lesson-head { margin-bottom: var(--space-5); }
.lesson-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-s); margin: var(--space-2) 0; }
.lesson-meta .tag {
  background: var(--c-surface-alt);
  border-radius: 999px;
  padding: 1px var(--space-3);
  color: var(--c-text-sub);
}
.prereq-box { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; font-size: var(--fs-s); }
.prereq-box h2 { font-size: var(--fs-m); margin-bottom: var(--space-2); }
.prereq-box ul { margin-bottom: var(--space-2); }

.lesson-section { margin: var(--space-6) 0; }
.lesson-section > h2 {
  border-left: 6px solid var(--c-accent);
  padding-left: var(--space-3);
  font-size: var(--fs-xl);
}
.lesson-section .stepnum { color: var(--c-accent); margin-right: var(--space-2); }

.task-instruction {
  background: var(--c-accent-soft);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-4);
  font-weight: 700;
}

.summary-box { background: var(--c-surface); border: 2px solid var(--c-accent); border-radius: var(--radius-l); padding: var(--space-4); }
.summary-box ul { margin: 0; }

.complete-box { text-align: center; margin: var(--space-6) 0; }
.complete-box .done-mark { color: var(--c-success); font-weight: 700; font-size: var(--fs-l); }

/* 進捗バー */
.progressbar {
  background: var(--c-surface-alt);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.progressbar > div { height: 100%; background: var(--c-success); }

/* 機能凡例(T/SD/D) */
.fn-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-s); margin: var(--space-2) 0; }
.fn-legend span { display: inline-flex; align-items: center; gap: 4px; }
.fn-badge {
  display: inline-block;
  color: #fff; font-weight: 700; font-size: 11px;
  padding: 0 6px; border-radius: 4px;
}
.fn-badge[data-fn="T"] { background: var(--fn-t); }
.fn-badge[data-fn="SD"] { background: var(--fn-sd); }
.fn-badge[data-fn="D"] { background: var(--fn-d); }
.fn-badge[data-fn="?"] { background: var(--fn-other); }

/* 音の動き表示 */
.motion-arrow { font-weight: 700; }
.motion-arrow[data-dir="up"] { color: var(--c-danger); }
.motion-arrow[data-dir="down"] { color: var(--c-link); }
.motion-arrow[data-dir="same"] { color: var(--c-success); }