/* ─────────────────────────────────────────────────────────────
   TacoSounds LiveSet — sumi-e
   ・ Monochrome ink on washi-paper white. One seal-red accent.
   ・ Hairline strokes, negative space, no shadows.
   ・ Type: Apple HIG iOS Text Styles (Default Dynamic Type).
   ・ Spacing: Fibonacci.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ライト（墨に和紙） */
  --paper:       #f7f5f0;
  --paper-soft:  #efece5;
  --ink:         #1a1a1a;
  --ink-mid:     #5e5e5e;
  --ink-soft:    #a4a09a;
  --hairline:    #d8d3c8;
  --seal:        #962e1f;

  /* 波形（canvas が JS から読み取る） */
  --wave-bg:     #c4c0b8;
  --wave-fg:     #962e1f;

  /* Apple HIG iOS Text Styles — Default Dynamic Type (pt ≒ px on web) */
  --t-caption:  0.75rem;    /* 12px — Caption 1（補助メタ・ファイル名・極小ラベル） */
  --t-footnote: 0.8125rem;  /* 13px — Footnote（ボタン/ナビ/補助テキスト） */
  --t-body:     1.0625rem;  /* 17px — Body（本文・タイトル行・主要 UI） */
  --t-title3:   1.25rem;    /* 20px — Title 3（編集パネル/管理画面の見出し） */
  --t-title2:   1.375rem;   /* 22px — Title 2（ブランド/Now Playing/ダイアログ見出し） */
  --t-title1:   1.75rem;    /* 28px — Title 1（ステージ次曲・リモコン時刻） */
  --t-large:    2.125rem;   /* 34px — Large Title（ステージ進行時刻） */
  --t-stage:    8rem;       /* 128px — ステージ現在曲（HIG 外、専用） */

  --s-1: 3px;
  --s-2: 5px;
  --s-3: 8px;
  --s-4: 13px;
  --s-5: 21px;
  --s-6: 34px;
  --s-7: 55px;
  --s-8: 89px;

  --max: 1597px;   /* Fibonacci F₁₇ ＝ 987 × φ。本文 1.5× に合わせ拡張 */

  --font: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic',
          'Helvetica Neue', sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  color-scheme: light dark;
}

/* ───── ダーク（夜の墨）─────
   ・ システム設定追従と手動切替（[data-theme]）の両対応
   ・ 朱（seal）は鈍くせずやや明るい墨赤に */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #15130f;
    --paper-soft:  #1d1b16;
    --ink:         #ece8de;
    --ink-mid:     #b0aba0;
    --ink-soft:    #6c6760;
    --hairline:    #2f2c26;
    --seal:        #d6543d;
    --wave-bg:     #4a463f;
    --wave-fg:     #d6543d;
  }
}
:root[data-theme="dark"] {
  --paper:       #15130f;
  --paper-soft:  #1d1b16;
  --ink:         #ece8de;
  --ink-mid:     #b0aba0;
  --ink-soft:    #6c6760;
  --hairline:    #2f2c26;
  --seal:        #d6543d;
  --wave-bg:     #4a463f;
  --wave-fg:     #d6543d;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* CSS で display 指定された要素にも HTML hidden を効かせる */
html { font-size: 24px; }   /* 全テキストを 1.5×（rem ベースの --t-* が連動）。Apple HIG Body 17px → 25.5px */
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
canvas { display: block; }

body {
  font-family: var(--font);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ───── page ───── */
.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-7);
  min-height: 100vh;
}

/* ───── masthead（1 段にまとめ、全アクションを内包） ───── */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-4);
}

.brand {
  font-size: var(--t-title2);
  font-weight: 300;
  letter-spacing: 0.04em;
  margin: 0;
  flex-shrink: 0;
}

.brand::after {
  content: '';
  display: inline-block;
  width: var(--s-3);
  height: var(--s-3);
  background: var(--seal);
  margin-left: var(--s-3);
  vertical-align: middle;
  transform: translateY(-0.18em);
}

/* masthead 内のアクションボタン群 */
.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* セッション名入力欄を masthead の右側へ伸ばす */
.masthead > .session-name {
  flex: 1;
  min-width: 240px;
  max-width: 360px;
}

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-4);
  font-size: var(--t-footnote);
}

.nav-links a {
  color: var(--ink-mid);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  white-space: nowrap;
}

.nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink-soft); }

/* テーマ切替 */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: var(--t-body);
  color: var(--ink-mid);
  background: transparent;
  border: none;
  border-radius: 50%;
  transition: color 120ms, background 120ms;
  line-height: 1;
}
.theme-toggle:hover { color: var(--ink); background: var(--paper-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-footnote);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 0;
  transition: border-color 120ms, color 120ms;
}

.btn:hover { border-color: var(--ink); }
.btn:active { color: var(--seal); }
.btn[disabled] { color: var(--ink-soft); border-color: var(--paper-soft); cursor: not-allowed; }

.btn.ghost { border-color: transparent; }
.btn.ghost:hover { border-color: var(--hairline); }

.btn.primary {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.btn.primary:hover { background: #000; border-color: #000; }

.session-name {
  font-family: var(--mono);
  font-size: var(--t-footnote);
  color: var(--ink-mid);
  border: none;
  border-bottom: 1px dashed var(--hairline);
  padding: var(--s-2) var(--s-3);
  background: transparent;
  min-width: 320px;
  flex-shrink: 0;
}

.session-name:focus { outline: none; border-bottom-color: var(--ink); }

/* ───── setlist table ───── */
.setlist {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
  margin-bottom: var(--s-6);
  min-height: 200px;
}

/* 末尾の空きゾーン：曲を末尾までドラッグして drop できるようにする */
.setlist::after {
  content: '';
  display: block;
  min-height: 80px;
  flex-shrink: 0;
}

.setlist.drop-target { background: var(--paper-soft); }

.setlist-empty {
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-footnote);
}

.row {
  display: grid;
  grid-template-columns: 48px 1fr 44px 90px 32px;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  cursor: grab;
}
.row.editing { background: var(--paper-soft); }
.row.editing .num { color: var(--seal); font-weight: 600; }
.row .row-actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  align-items: center;
}
.row .row-edit-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mid);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.row .row-edit-btn:hover {
  color: var(--seal);
  border-color: var(--seal);
  background: var(--paper-soft);
}
.row.editing .row-edit-btn {
  color: var(--paper);
  background: var(--seal);
  border-color: var(--seal);
}

.row.dragging { opacity: 0.4; }
.row.current { background: var(--paper-soft); }
.row.current .num { color: var(--seal); }
.row.playing .num::before {
  content: '▶';
  display: inline-block;
  margin-right: 4px;
  color: var(--seal);
  font-size: 0.7em;
  transform: translateY(-1px);
}

.row .num {
  font-family: var(--mono);
  font-size: var(--t-footnote);
  color: var(--ink-mid);
  letter-spacing: 0.06em;
}

.row .title {
  font-size: var(--t-body);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row .filename {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row .duration {
  font-family: var(--mono);
  font-size: var(--t-footnote);
  color: var(--ink-mid);
  text-align: right;
}

.row .key-bpm {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
}

.row .row-actions {
  display: flex;
  justify-content: flex-end;
}

.row .icon-btn {
  font-size: var(--t-body);
  color: var(--ink-soft);
  padding: 0 var(--s-2);
  line-height: 1;
}
.row .icon-btn:hover { color: var(--seal); }

/* ───── editor panel (selected song) ───── */
.editor {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
  margin-bottom: var(--s-6);
}

.editor-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-4);
}

.editor-title {
  font-size: var(--t-title3);
  font-weight: 400;
  margin: 0;
}

.editor-meta {
  font-family: var(--mono);
  font-size: var(--t-footnote);
  color: var(--ink-mid);
}

.waveform-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  background: var(--paper-soft);
  margin-bottom: var(--s-4);
}

.waveform-canvas { width: 100%; height: 100%; cursor: crosshair; }

.trim-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--ink-soft);   /* デフォルトはグレー（未編集） */
  cursor: ew-resize;
  z-index: 2;
  transition: background 120ms;
}
.trim-handle.touched { background: var(--seal); }
.trim-handle:hover { background: var(--ink-mid); }
.trim-handle.touched:hover { background: var(--seal); }

.trim-handle::after {
  content: attr(data-label);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  transition: color 120ms;
}
.trim-handle.touched::after { color: var(--seal); }

.trim-region-out {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(247, 245, 240, 0.7);
  pointer-events: none;
  z-index: 1;
}

.playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--ink);
  pointer-events: none;
  z-index: 3;
}

.notes-input {
  width: 100%;
  min-height: 60px;
  padding: var(--s-3);
  background: var(--paper-soft);
  border: 1px solid transparent;
  resize: vertical;
  font-size: var(--t-footnote);
  line-height: 1.6;
}

.notes-input:focus { outline: none; border-color: var(--hairline); }

.editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.field label {
  display: block;
  font-size: var(--t-caption);
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-2) 0;
  font-family: var(--mono);
  font-size: var(--t-footnote);
}

.field input:focus { outline: none; border-bottom-color: var(--ink); }

/* ───── now playing (Apple Music 風、上部 sticky) ───── */
.now-playing {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-4) var(--s-5) var(--s-3);
  margin: var(--s-4) 0 0;
  text-align: center;
  /* リサイズで max-height が JS から設定される。デフォルトは内容に応じて伸び縮み */
  overflow-y: auto;
}

/* リサイズハンドル（Now Playing と Setlist の境界） */
.np-resize {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10px;
  cursor: ns-resize;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 var(--s-4);
  transition: background 120ms;
  touch-action: none;
  user-select: none;
}
.np-resize::before {
  content: '';
  width: 48px;
  height: 3px;
  background: var(--ink-soft);
  border-radius: 2px;
  opacity: 0.5;
  transition: opacity 120ms, background 120ms;
}
.np-resize:hover { background: var(--paper-soft); }
.np-resize:hover::before { opacity: 1; background: var(--ink-mid); }
.np-resize.dragging { background: var(--paper-soft); }
.np-resize.dragging::before { background: var(--seal); opacity: 1; }
.now-playing .np-info { margin-bottom: var(--s-3); }
.now-playing .np-controls { margin-bottom: var(--s-3); }
.now-playing .np-totals { margin-bottom: 0; }

/* 編集パネル：折りたたみ（デフォルト閉じ。曲リストの視認性確保） */
.np-edit-details {
  margin-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-3);
  text-align: left;
}
.np-edit-details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-mid);
  letter-spacing: 0.08em;
  padding: 4px var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  user-select: none;
  transition: color 120ms, border-color 120ms;
}
.np-edit-details > summary::-webkit-details-marker { display: none; }
.np-edit-details > summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 120ms;
}
.np-edit-details[open] > summary::before { transform: rotate(90deg); }
.np-edit-details > summary:hover { color: var(--ink); border-color: var(--ink-soft); }
.np-edit-details[open] > summary { color: var(--ink); border-color: var(--ink-soft); }
.np-edit-details > .np-edit {
  margin-top: var(--s-3);
  padding-top: 0;
  border-top: none;
}

.np-info { margin-bottom: var(--s-5); }

.np-num {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  margin-bottom: var(--s-2);
}

.np-title {
  font-size: var(--t-title2);
  font-weight: 300;
  letter-spacing: 0.01em;
  margin: 0 0 var(--s-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-meta {
  font-family: var(--mono);
  font-size: var(--t-footnote);
  color: var(--ink-mid);
}

/* 波形シークバー（兼トリム編集） */
.np-wave-wrap {
  position: relative;
  width: 100%;
  max-width: 1080px;
  height: 96px;
  margin: var(--s-4) auto var(--s-2);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.np-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* 前景（朱の波形）: 進行%まで露出させ、残りはクリップ */
.np-wave-fg {
  clip-path: inset(0 calc(100% - var(--np-progress, 0%)) 0 0);
}

.np-wave-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  left: var(--np-progress, 0%);
  transform: translateX(-0.5px);
  pointer-events: none;
}

.np-times {
  display: flex;
  justify-content: space-between;
  max-width: 780px;
  margin: 0 auto var(--s-5);
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}

/* コントロール（円形、塗りの再生大） */
.np-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}

.np-btn {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 50%;
  outline: none;
  transition: color 120ms, background 120ms, transform 80ms;
}
.np-btn svg { width: 28px; height: 28px; }

.np-btn:hover { color: var(--seal); }
.np-btn:active { transform: scale(0.94); }
/* キーボードナビ時のみ subtle なフォーカス枠（マウスクリック時は出さない） */
.np-btn:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 2px; }

.np-btn[disabled] { color: var(--ink-soft); cursor: not-allowed; }
.np-btn[disabled]:hover { color: var(--ink-soft); }

.np-play {
  width: 72px;
  height: 72px;
  background: var(--ink);
  color: var(--paper);
}
.np-play svg { width: 32px; height: 32px; }
.np-play:hover { background: #000; color: var(--paper); }

.np-play:hover {
  background: #000;
  color: var(--paper);
}

.np-totals {
  font-family: var(--mono);
  font-size: var(--t-footnote);
  color: var(--ink-mid);
  letter-spacing: 0.05em;
}

.np-totals .seal { color: var(--seal); }
.np-totals .sep  { margin: 0 var(--s-3); color: var(--ink-soft); }

/* 曲ごとの編集情報（再生ボタンの下） */
.np-edit {
  text-align: left;
  max-width: 1080px;
  margin: var(--s-5) auto 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

.np-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.np-edit-notes label {
  display: block;
  font-size: var(--t-caption);
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ───── stage mode ───── */
.stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-7) var(--s-6);
  background: var(--paper);
  color: var(--ink);
}

.stage .now-label, .stage .next-label {
  font-size: var(--t-footnote);
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.stage .now-title {
  font-size: var(--t-stage);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-5);
}

.stage .next-title {
  font-size: var(--t-title1);
  font-weight: 300;
  color: var(--ink-mid);
  margin: 0;
}

.stage .stage-time {
  font-family: var(--mono);
  font-size: var(--t-large);
  font-weight: 200;
  color: var(--ink);
  margin-top: var(--s-7);
}

.stage .stage-time .total {
  font-size: var(--t-title3);
  color: var(--ink-mid);
  margin-left: var(--s-4);
}

.stage .stage-bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--ink-soft);
  font-size: var(--t-footnote);
  font-family: var(--mono);
  padding-top: var(--s-5);
}

/* ───── remote (smartphone) ───── */
.remote {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* 上部固定エリア（曲リストがスクロールしても常時表示） */
.remote-stick {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* 共有プレイヤー内の Now Playing は外枠不要（sticky は親の .remote-stick が持つ）*/
.remote-stick .now-playing {
  position: static;
  border: none;
  padding: var(--s-3) 0 0;
  margin: 0;
}

/* スマホ用波形（細すぎず大きすぎず） */
.remote-stick .np-wave-wrap {
  height: 80px;
  max-width: 100%;
  margin: var(--s-3) auto var(--s-2);
}

/* スマホ表示のタイトルは 1 行に収める（長い曲名で改行・はみ出し回避） */
.remote-stick .np-title {
  font-size: var(--t-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 var(--s-3);
}

/* Apple Music 流：再生中もボタンの背景は変えない（アイコン切替のみで状態表現） */
/* "再生中" "一時停止" のテキストラベルは出さない（HTML 側で hidden） */
.np-state { display: none; }

/* 曲リストの再生中行（Apple Music: 番号位置に EQ 風の▶ 印 + タイトル朱色） */
.remote-list li.current,
.remote-list li.playing { background: var(--paper-soft); }
.remote-list li.playing .num,
.remote-list li.playing .title { color: var(--seal); }
.remote-list li.playing .num { font-weight: 600; }
.remote-list li.playing .num::before {
  content: '▶';
  color: var(--seal);
  font-size: 0.85em;
  margin-right: 4px;
}

/* DL 可否バッジ（一目で分かるよう色塗りで明確に） */
.dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--t-footnote);
  letter-spacing: 0.04em;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-mid);
  background: transparent;
  flex-shrink: 0;
}
.dl-badge.allowed {
  color: var(--paper);
  background: var(--seal);
  border-color: var(--seal);
}
.dl-badge svg { width: 1.1em; height: 1.1em; }

/* 行ごとの編集パネル（行直下に挿入される） */
.song-edit {
  background: var(--paper-soft);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.song-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-4);
}
.song-edit .field label {
  display: block;
  font-size: var(--t-caption);
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.song-edit .field input[type=text] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-2) 0;
  font-family: var(--mono);
  font-size: var(--t-footnote);
}
.song-edit .field input[type=text]:focus { outline: none; border-bottom-color: var(--ink); }
.song-edit .notes-input {
  width: 100%;
  min-height: 60px;
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--hairline);
  resize: vertical;
  font-size: var(--t-footnote);
  line-height: 1.6;
}
.song-edit .notes-input:focus { outline: none; border-color: var(--ink); }

/* キープレビュー */
.key-preview-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .song-edit-grid { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* 編集パネルのキーシフト ステッパー */
.pitch-shift-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.pitch-step-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.pitch-step-btn svg { width: 18px; height: 18px; }
.pitch-step-btn:hover { color: var(--seal); border-color: var(--seal); background: var(--paper-soft); }
.pitch-step-btn:active { transform: scale(0.94); }
.pitch-step-input {
  width: 64px;
  height: 36px;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--t-body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0 var(--s-2);
}
.pitch-step-input:focus { outline: none; border-color: var(--ink); }
.pitch-step-unit {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-mid);
  letter-spacing: 0.04em;
}
.pitch-step-status {
  font-family: var(--mono);
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  margin-left: var(--s-3);
  color: var(--ink-soft);
}
.pitch-step-status.pending { color: var(--ink-mid); }
.pitch-step-status.ok      { color: var(--seal); }
.pitch-step-status.err     { color: var(--seal); font-weight: 600; }

/* キーシフト UI（audio_pitched 付きセットのみ） */
.np-key-shift {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.key-shift-label {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.key-shift-pills {
  display: inline-flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.key-shift-pill {
  font-family: var(--mono);
  font-size: var(--t-footnote);
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-mid);
  min-width: 56px;
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.key-shift-pill:hover { color: var(--ink); border-color: var(--ink-soft); }
.key-shift-pill.active {
  color: var(--paper);
  background: var(--seal);
  border-color: var(--seal);
}

/* 連続再生トグル（オフ＝この曲で停止 / オン＝次へ自動） */
.autoplay-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transition: color 120ms, border-color 120ms, background 120ms;
  flex-shrink: 0;
}
.autoplay-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }
.autoplay-toggle[aria-pressed="true"] {
  color: var(--seal);
  border-color: var(--seal);
}
.autoplay-toggle svg { width: 18px; height: 18px; }

.remote-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

.remote-status {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  flex: 1;
  text-align: center;
}

.remote-status.connected { color: var(--ink-mid); }
.remote-status.disconnected { color: var(--seal); }

/* 曲情報（1行で番号 + タイトル + 時刻） */
.remote-now {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  text-align: left;
  padding: 0;
  border: none;
  min-width: 0;
}

.remote-now .num {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  margin: 0;
  flex-shrink: 0;
}

.remote-now .title {
  font-size: var(--t-body);
  font-weight: 400;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-now .time {
  font-family: var(--mono);
  font-size: var(--t-caption);
  font-weight: 400;
  color: var(--ink-mid);
  flex-shrink: 0;
}

.remote-now .duration {
  font-size: var(--t-caption);
  color: var(--ink-soft);
}

/* 波形シーク（スマホ用） */
.remote-wave-wrap {
  position: relative;
  width: 100%;
  height: 48px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.remote-wave-wrap .np-wave {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.remote-wave-wrap .np-wave-fg {
  clip-path: inset(0 calc(100% - var(--np-progress, 0%)) 0 0);
}
.remote-wave-wrap .np-wave-playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--ink);
  left: var(--np-progress, 0%);
  transform: translateX(-0.5px);
  pointer-events: none;
}

.remote-controls {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--s-3);
}

.remote-controls button {
  padding: var(--s-3) 0;
  border: 1px solid var(--hairline);
  font-size: var(--t-callout);
}

.remote-controls button:active { background: var(--paper-soft); color: var(--seal); }

.remote-controls .play {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-size: var(--t-body);
}

.remote-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.remote-list li {
  display: grid;
  grid-template-columns: 36px 1fr 56px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-footnote);
}

.remote-list li.current { background: var(--paper-soft); }

.remote-list .num {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
}

.remote-list .duration {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  text-align: right;
}

.remote-list .dl-cell {
  display: flex;
  justify-content: flex-end;
}
.remote-list .dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--s-2) var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--seal);
  text-decoration: none;
  border: 1px solid var(--seal);
  border-radius: 4px;
  background: transparent;
  transition: color 120ms, background 120ms;
}
.remote-list .dl-btn:hover,
.remote-list .dl-btn:active {
  color: var(--paper);
  background: var(--seal);
}
.remote-list .dl-btn svg { width: 1em; height: 1em; }

/* パスワード認証パネル */
.auth-panel {
  padding: var(--s-7) var(--s-5);
  text-align: center;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: var(--s-5) 0;
}
.auth-title {
  font-size: var(--t-title2);
  font-weight: 300;
  margin-bottom: var(--s-3);
}
.auth-sub {
  font-size: var(--t-footnote);
  color: var(--ink-mid);
  margin-bottom: var(--s-5);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 320px;
  margin: 0 auto;
}
.auth-form input[type=password] {
  padding: var(--s-3);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: var(--t-body);
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.15em;
}
.auth-form input[type=password]:focus { outline: none; border-color: var(--ink); }
.auth-err {
  font-size: var(--t-footnote);
  color: var(--seal);
}

/* ───── 公開管理画面 ───── */
.manage-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-4);
}

.m-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}

.m-row.expired { opacity: 0.6; }

.m-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.m-title {
  font-size: var(--t-title3);
  font-weight: 400;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-flags {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-footnote);
  color: var(--ink-soft);
  flex-shrink: 0;
}

.m-flags .flag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-2);
  font-size: var(--t-caption);
  font-family: var(--mono);
}

.m-flags .seal { color: var(--seal); }

.m-meta {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-mid);
}

.m-stats {
  display: flex;
  gap: var(--s-5);
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-mid);
}

.m-stats b {
  color: var(--ink);
  font-weight: 400;
  font-size: var(--t-footnote);
  margin-right: 2px;
}

.m-url {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  background: var(--paper-soft);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  word-break: break-all;
  transition: color 120ms;
}

.m-url:hover { color: var(--ink); }
.m-url[data-copied="1"]::after {
  content: '  ✓ コピー済';
  color: var(--seal);
  margin-left: var(--s-2);
}

.m-actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

/* ───── ミニプレイヤー（画面下部固定、Now Playing 不可視時のみ） ───── */
.mini-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  z-index: 10;
  animation: mini-rise 180ms ease-out;
}

@keyframes mini-rise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* 上端に細い進行ライン */
.mini-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--seal);
  width: var(--mini-progress, 0%);
  transition: width 120ms linear;
}

.mini-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  text-align: left;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  overflow: hidden;
}

.mini-info:hover .mini-title { color: var(--seal); }

.mini-num {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.mini-title {
  font-size: var(--t-footnote);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 120ms;
}

.mini-time {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-mid);
  white-space: nowrap;
  flex-shrink: 0;
}

.mini-time .sep {
  margin: 0 var(--s-2);
  color: var(--ink-soft);
}

.mini-controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.mini-controls .np-btn {
  width: 36px;
  height: 36px;
}

.mini-controls .mini-play {
  width: 44px;
  height: 44px;
}

/* ミニプレイヤーが出ているとき、footer がボタンと被らないよう底余白を足す */
body.mini-active .footer { padding-bottom: var(--s-7); }
body.mini-active { padding-bottom: 72px; }

@media (max-width: 640px) {
  .mini-player { padding: var(--s-2) var(--s-3); gap: var(--s-3); }
  .mini-time   { display: none; }
  .mini-controls .np-btn { width: 32px; height: 32px; }
  .mini-controls .mini-play { width: 40px; height: 40px; }
}

/* ───── ダイアログ ───── */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--s-5);
  animation: fade-in 140ms ease-out;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  background: var(--paper);
  border: 1px solid var(--hairline);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--hairline);
}

.dialog-title {
  font-size: var(--t-title3);
  font-weight: 300;
  margin: 0;
}

.dialog-close {
  font-size: var(--t-title2);
  color: var(--ink-soft);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dialog-close:hover { color: var(--seal); }

.dialog-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.dialog-sub {
  font-family: var(--mono);
  font-size: var(--t-footnote);
  color: var(--ink-mid);
}

.url-row {
  display: flex;
  gap: var(--s-2);
  align-items: stretch;
}

.url-field {
  flex: 1;
  font-family: var(--mono);
  font-size: var(--t-footnote);
  padding: var(--s-3);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  color: var(--ink);
  min-width: 0;
}

.url-field:focus { outline: none; border-color: var(--ink); }

.qr-wrap {
  align-self: center;
  text-align: center;
}

.qr-img {
  width: 220px;
  height: 220px;
  background: #fff;
  padding: var(--s-2);
  border: 1px solid var(--hairline);
  display: block;
}

.qr-hint {
  font-size: var(--t-caption);
  color: var(--ink-soft);
  margin-top: var(--s-2);
}

.dialog-note {
  font-size: var(--t-caption);
  color: var(--ink-mid);
  margin: 0;
  padding: var(--s-3);
  background: var(--paper-soft);
}

.dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--hairline);
}

.btn.danger {
  color: var(--seal);
  border-color: var(--hairline);
  margin-right: auto;
}
.btn.danger:hover { border-color: var(--seal); }

/* 公開オプションダイアログのフォーム */
.opt-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.opt-field > label {
  font-size: var(--t-caption);
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.opt-field input[type=text],
.opt-field input[type=datetime-local] {
  width: 100%;
  padding: var(--s-3);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-footnote);
}
.opt-field input[type=text]:focus,
.opt-field input[type=datetime-local]:focus { outline: none; border-color: var(--ink); }
.opt-hint {
  font-size: var(--t-caption);
  color: var(--ink-soft);
}

.opt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.opt-pill {
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-footnote);
  color: var(--ink-mid);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.opt-pill:hover { color: var(--ink); border-color: var(--ink-soft); }
.opt-pill.active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.opt-custom-date { margin-top: var(--s-2); }

.opt-check label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--ink);
  font-size: var(--t-footnote);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
.opt-check input { width: 18px; height: 18px; margin-top: 4px; flex-shrink: 0; }

/* ダウンロード許可セクション（目立たせる） */
.opt-dl {
  padding: var(--s-4);
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  transition: border-color 120ms, background 120ms;
}
.opt-dl:has(input:checked) {
  border-color: var(--seal);
  background: rgba(150, 46, 31, 0.06);
}
.opt-dl-text { display: flex; flex-direction: column; gap: 4px; }
.opt-dl-title { font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.opt-dl-hint  { font-size: var(--t-caption); color: var(--ink-mid); letter-spacing: normal; text-transform: none; }
.opt-dl:has(input:checked) .opt-dl-title { color: var(--seal); }

@media (max-width: 640px) {
  .url-row { flex-direction: column; }
  .url-field { flex: none; }
}

/* ───── footer ───── */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-caption);
  color: var(--ink-soft);
}

.footer kbd {
  font-family: var(--mono);
  font-size: var(--t-caption);
  padding: 1px 5px;
  border: 1px solid var(--hairline);
  color: var(--ink-mid);
}

.footer .dot { margin: 0 var(--s-2); color: var(--ink-soft); }

/* ───── responsive ───── */
@media (max-width: 640px) {
  .page { padding: var(--s-5) var(--s-4) var(--s-6); }
  .row { grid-template-columns: 36px 1fr 36px 70px 28px; gap: var(--s-3); }
  .editor-grid { grid-template-columns: 1fr; }
  .stage .now-title { font-size: 3.8rem; }
  .stage .stage-time { font-size: var(--t-title1); }

  .now-playing { padding: var(--s-5) var(--s-3) var(--s-4); }
  .np-title { font-size: var(--t-title3); }
  .np-controls { gap: var(--s-4); }
  .np-play { width: 64px; height: 64px; }
  .np-btn { width: 44px; height: 44px; }
  .np-edit-grid { grid-template-columns: 1fr; gap: var(--s-3); }
}