/* ============================================================
   style-core.css
   PC版デフォルトのレイアウト + PC/SP共通のデザイン（色・フォント・
   部品単体の見た目）。メディアクエリを含まない。
   スマホ幅(max-width:768px, 900px)向けの上書きは style-layout-sp.css 側。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  --accent-primary: #3b82f6;
  --accent-secondary: #1d4ed8;
  --accent-glow: rgba(59, 130, 246, 0.35);
  --accent-hover-1: #2563eb;
  --accent-hover-2: #1e40af;
  --font-display: 'Instrument Sans';
  --font-body: 'Instrument Sans';

  /* アイコン・補助テキストの既定色（落ち着いたグレー）。OFF状態の
     トグル、目/鉛筆/削除等の各種アイコン、ラベルなど、アプリ全体で
     繰り返し使う「主張しすぎないグレー」をここに一元化する。
     色を変えたい時は、ここを直すだけで全箇所に反映される。 */
  --icon-muted: #8b8b9e;

  /* 白系のテキスト・強調色。テーマカラー(--accent-primary等)とは独立して
     常に白系で使う箇所（見出し、値の強調表示、アイコンのホバー色等）を
     ここに一元化する。
     --text-bright: わずかに青みを含む白(#f0f0f3)。本文寄りの強調テキストや
       ホバー時のアイコン色など、アプリ全体で最も多用される白。
     --text-pure-white: 純白(#fff)。ボタン内の文字やボーダーなど、より
       強いコントラストが欲しい箇所に使う。 */
  --text-bright: #f0f0f3;
  --text-pure-white: #fff;

  /* 白の半透明ボーダー・背景。透明度の意味を用途で使い分けている
     （0.08=枠線、0.06=ホバー時の背景）ため、値ごとに変数を分ける。 */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --bg-hover-subtle: rgba(255, 255, 255, 0.06);

  /* 削除・警告用の赤。--accent-primaryはテーマ切り替えで色が変わる
     （赤テーマ選択時は--accent-primary自体が赤になる）ため、削除ボタン等
     の「常に赤であるべき」箇所はテーマに関わらず独立させておく。 */
  --danger: #ef4444;

  /* ============================================================
     モーション設計トークン（docs/ui-motion-haptics-design.md 参照）
     4種のイージングを動作の意味ごとに使い分ける。
     ============================================================ */
  /* Snap: 即応。ボタンpress/hover、トグルON-OFF、ドラッグ追従 */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  /* Glide: 滑走。値の変化、タブ切替、パネル開閉、テーマ切替 */
  --ease-glide: cubic-bezier(0.4, 0, 0.2, 1);
  /* Pop: 弾む。ポップアップ/モーダルの出現、選択の確定 */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Dismiss: 退出。ポップアップ/モーダルを閉じる、消失系 */
  --ease-dismiss: cubic-bezier(0.4, 0, 1, 1);

  --dur-hover: 130ms;
  --dur-press: 100ms;
  --dur-open: 240ms;
  --dur-modal: 300ms;
  --dur-dismiss: 200ms;
}

/* ピンチズーム（拡大縮小ジェスチャー）を無効化する。
   viewportメタタグのuser-scalable=noと合わせ、二重の保険としてtouch-actionでも制限する。
   pan-x pan-yは通常のスクロール操作自体は引き続き許可し、拡大縮小ジェスチャーだけを禁止する。 */
html {
  touch-action: pan-x pan-y;
}

[data-qn-theme="blue"] {
  --accent-primary: #3b82f6;
  --accent-secondary: #1d4ed8;
  --accent-glow: rgba(59, 130, 246, 0.35);
  --accent-hover-1: #2563eb;
  --accent-hover-2: #1e40af;
}

[data-qn-theme="emerald"] {
  --accent-primary: #10b981;
  --accent-secondary: #047857;
  --accent-glow: rgba(16, 185, 129, 0.35);
  --accent-hover-1: #059669;
  --accent-hover-2: #065f46;
}

[data-qn-theme="purple"] {
  --accent-primary: #8b5cf6;
  --accent-secondary: #6d28d9;
  --accent-glow: rgba(139, 92, 246, 0.35);
  --accent-hover-1: #7c3aed;
  --accent-hover-2: #5b21b6;
}

[data-qn-theme="rose"] {
  --accent-primary: #f43f5e;
  --accent-secondary: #be123c;
  --accent-glow: rgba(244, 63, 94, 0.35);
  --accent-hover-1: #e11d48;
  --accent-hover-2: #9f1239;
}

[data-qn-theme="amber"] {
  --accent-primary: #f59e0b;
  --accent-secondary: #b45309;
  --accent-glow: rgba(245, 158, 11, 0.35);
  --accent-hover-1: #d97706;
  --accent-hover-2: #92400e;
}

[data-qn-theme="cyan"] {
  --accent-primary: #06b6d4;
  --accent-secondary: #0e7490;
  --accent-glow: rgba(6, 182, 212, 0.35);
  --accent-hover-1: #0891b2;
  --accent-hover-2: #155e75;
}

[data-qn-theme="indigo"] {
  --accent-primary: #6366f1;
  --accent-secondary: #4338ca;
  --accent-glow: rgba(99, 102, 241, 0.35);
  --accent-hover-1: #4f46e5;
  --accent-hover-2: #3730a3;
}

[data-qn-theme="pink"] {
  --accent-primary: #ec4899;
  --accent-secondary: #be185d;
  --accent-glow: rgba(236, 72, 153, 0.35);
  --accent-hover-1: #db2777;
  --accent-hover-2: #9d174d;
}

[data-qn-theme="lime"] {
  --accent-primary: #84cc16;
  --accent-secondary: #4d7c0f;
  --accent-glow: rgba(132, 204, 22, 0.35);
  --accent-hover-1: #65a30d;
  --accent-hover-2: #3f6212;
}

[data-qn-theme="orange"] {
  --accent-primary: #f97316;
  --accent-secondary: #c2410c;
  --accent-glow: rgba(249, 115, 22, 0.35);
  --accent-hover-1: #ea580c;
  --accent-hover-2: #9a3412;
}

[data-qn-theme="teal"] {
  --accent-primary: #14b8a6;
  --accent-secondary: #0f766e;
  --accent-glow: rgba(20, 184, 166, 0.35);
  --accent-hover-1: #0d9488;
  --accent-hover-2: #115e59;
}

[data-qn-theme="violet"] {
  --accent-primary: #a855f7;
  --accent-secondary: #7e22ce;
  --accent-glow: rgba(168, 85, 247, 0.35);
  --accent-hover-1: #9333ea;
  --accent-hover-2: #6b21a8;
}

[data-qn-theme="red"] {
  --accent-primary: #ef4444;
  --accent-secondary: #b91c1c;
  --accent-glow: rgba(239, 68, 68, 0.35);
  --accent-hover-1: #dc2626;
  --accent-hover-2: #991b1b;
}

[data-qn-theme="sky"] {
  --accent-primary: #0ea5e9;
  --accent-secondary: #0369a1;
  --accent-glow: rgba(14, 165, 233, 0.35);
  --accent-hover-1: #0284c7;
  --accent-hover-2: #075985;
}

body {
  /* ベースの単色(#0d0d0f)の上に、テーマカラー(--accent-primary)を使った
     ごく薄いグローを左上・右上から重ねる。--accent-glowは元々ボタンの
     シャドウ用で透明度0.35と濃いため、ここでは別途0.08程度に抑えて
     背景として使っても主張しすぎないようにしている。
     テーマ切替時、--accent-primaryが変わればグローの色も自動で追従する。 */
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent-primary) 12%, transparent), transparent 45%),
    radial-gradient(circle at 100% 15%, color-mix(in srgb, var(--accent-secondary) 10%, transparent), transparent 40%),
    #0d0d0f;
  color: var(--text-bright);
  font-family: var(--font-body, 'Instrument Sans'), -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* QNPITCH等と同じく、ウィンドウ幅に関わらず常に左端からpadding固定にするため
     stretchにする（以前のcenterだと#appHeader/.app-containerのmax-width(1400px)を
     超えるウィンドウ幅で左右中央寄せになり、幅によって左マージンの見え方が変動していた）。 */
  align-items: stretch;
}

#appHeader {
  width: 100%;
  /* サイドバー(360px固定)以外のメイン領域は画面幅いっぱいに伸ばす方針のため、
     max-widthでの頭打ちは廃止（.app-container側と合わせる）。 */
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  /* ハンバーガーメニュー(.qn-menu-popup)はposition: fixedになっており、
     #appHeaderのスタッキングコンテキストの外側に自力で出られるため、
     #appHeader自体のz-indexを吸着タブ(410)やサイドバー(400)より
     高くしておく必要はない。SP幅でサイドバーを開いた時は、ヘッダーより
     サイドバーが手前に来る（ヘッダーが隠れる）のが意図した挙動のため、
     それらより低い値に戻す。 */
  z-index: 200;
}

#appLogo {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
  color: var(--text-bright);
  text-transform: uppercase;
}

#appLogoQN {
  /* テーマカラー(--accent-primary → --accent-secondary)を使ったグラデーション文字。
     background-clip: textでテキストの形にグラデーションを流し込み、
     本来のcolorはtransparentにして背景を透かして見せる。
     Safari等webkit系ブラウザ向けに-webkit-プレフィックス版も明記する。 */
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

#appVersion {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #6b6b7b;
  text-transform: none;
  vertical-align: middle;
}

#appTitle {
  /* 以前は#appHeader内でappLogoの下に居て、margin-bottom: 15pxだけで
     波形(#vbarContainer)との間隔を作っていた。.player-sectionの直下に
     移動した今は親のgap: 20pxが#appTitleと#vbarContainerの間にも
     自動で入るため、そのままだと20px+15px=35pxに広がってしまう。
     見た目を変えないよう、gapとの重複分を差し引いたマイナスマージンで
     元の15px間隔を維持する（20px gap - 5px = 15px相当）。 */
  margin: 0 0 -5px;
  font-family: var(--font-body, 'Instrument Sans'), sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #d0d0d8;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  /* Webフォント(Instrument Sans)の読み込み前後でline-heightの計算結果が
     ばらつき、フォールバックフォントでは行の高さが文字の実描画より
     小さくなって上端が overflow:hidden で切れることがあるため、
     font-sizeに対して十分な比率を明示しておく。 */
  line-height: 1.4;
}

#appTitleInner {
  display: inline-flex;
  white-space: nowrap;
}

#appTitleText {
  display: inline-block;
  white-space: nowrap;
}

/* ファイル名が長くコンテナに収まらない場合のみ付与されるマーキー（電光掲示板）表示 */
#appTitle.marquee #appTitleInner {
  animation: appTitleMarquee var(--marquee-duration, 12s) linear infinite;
}

#appTitle.marquee #appTitleText.marquee-clone {
  display: inline-block;
  padding-left: 60px;
}

@keyframes appTitleMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* EQ関連スタイルは style-control-eq.css（旧style-eq.css）に分割移動済み */

/* ============================================================
   【大手術後の状態】.app-container / .player-section / .sidebar-section /
   .mobile-tabs / .sidebar-section h3（このセクション末尾まで）は、
   PC v2が画面幅を問わず常時有効化されたことで .app-container自体が
   常にdisplay: noneになるため、実質的に画面には一切表示されない。

   削除しなかった理由：PC v2のbuild()は現在アクティブなパネル
   （.mobile-tab-panel）だけを.app-containerの外へ移動し、それ以外
   （非アクティブなパネル）はこの.app-container/.sidebar-section
   構造の中に留まったままになる。またLibrary(playlist)のように移動済み
   でも、.markers-heading-row(h3見出し含む)自体はPC v2側で
   display: none !importantにされ、PC v2独自の見出し(.pcv2-panel-
   header-title)に置き換わる。つまりこれらの要素・スタイルは
   「今は使われていない」だけで、PC v2のJS（markAnchor/restoreAnchor）
   がDOM構造を組み立てる際の前提として今も必要なため、CSSごと
   削除すると壊れる。
   ============================================================ */
.app-container {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
  margin-top: 15px;
  width: 100%;
  /* サイドバー(360px固定)は変えず、メイン(1fr)側だけがウィンドウ幅に応じて
     自然に伸びるよう、max-widthでの頭打ちを廃止。 */
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.player-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  height: fit-content;
}

/* Textタブが開いている間だけ、サイドバー全体を画面の残り高さいっぱいに固定化する
   （JS側でheightをインラインstyleとしてセットする。他タブ(Control/Markers/Playlist)は
   従来通りheight: fit-contentのまま中身なりの高さで良いため、このクラスの時だけ上書きする）。
   .mobile-tab-panel側もflexで伸ばし、中のtextareaが残り高さいっぱいに広がるようにする。 */
.sidebar-section.text-tab-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-section.text-tab-active .mobile-tab-panel.mobile-tab-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sidebar-section.text-tab-active .note-textarea {
  flex: 1;
  min-height: 0;
}

.sidebar-section h3 {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 15px;
  margin: 0;
  color: var(--icon-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Markers / Playlist の切り替えタブ（PC/SP共通）。下のパネルと隙間なく繋げるため角丸は上側だけ。 */
.mobile-tabs {
  display: flex;
  gap: 6px;
  background: #16161b;
  border: 1px solid var(--bg-hover-subtle);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 6px;
  position: relative;
  z-index: 1;
}

.mobile-tab-btn {
  flex: 1;
  padding: 13px 6px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--icon-muted);
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mobile-tab-btn.active {
  /* PLAYボタン(#playToggle)と同じグラデーションに揃える。単色のvar(--accent-primary)
     だけだと、PLAYボタンのグラデーションと並んだ時に色味が微妙にずれて見えるため。 */
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: var(--text-pure-white);
}

.mobile-tab-btn:not(.active):hover {
  background: #22222c;
  color: var(--text-bright);
}

/* タブパネルは選択中のもの以外を隠す。タブの直下は上側の角丸をなくして一体化させる。 */
.mobile-tab-panel {
  display: none;
  width: 100%;
  box-sizing: border-box;
  background: #16161b;
  border: 1px solid var(--bg-hover-subtle);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 10px 20px 20px;
}

.mobile-tab-panel.mobile-tab-active {
  display: block;
  width: 100%;
}

/* タブ自体に「Markers」「Playlist」の名前が出ているため、
   パネル内の見出し(タイトル・ACTIVE数/トラック数)は重複するので非表示にする。
   ただしTextタブの見出し行(.markers-heading-row)は、単なるタイトル表示ではなく
   フルスクリーンボタン(noteTextFullscreenBtn)を含む操作行のため、
   ここでは除外して表示したままにする。 */
.mobile-tab-panel:not([data-tab-panel="text"]) .markers-heading-row {
  display: none;
}

/* CONTROLタブ：VOL/SPEED(+Auto Speed)/KEYの操作UI自体（スライダー・ステッパー等）を、
   ポップアップに隠さず上から順に展開表示する。中身はBasic欄と同じ.control-cardを使い、
   IDだけ別にして値を双方向に同期させている（player-ui-shared.js側）。 */
.control-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* CONTROLタブの中の各.control-cardは、Markers/Playlistのリスト同様、
   罫線区切りのフラットなデザインに統一する（カード背景・枠は廃止）。 */
.control-list .control-card {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 14px 0;
  min-width: 0;
}

.control-list .control-card:first-child {
  padding-top: 0;
}

.control-list .control-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.markers-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* SP幅限定：MARKERS/PLAYLISTタブ内リスト最上部のアクションボタン（+MARKER, SELECT FILE）。
   PC幅では他の場所に同じ機能のボタンが既にあるため非表示。
   このデフォルト非表示自体はPC専用のためstyle-core-pc.cssへ移動済み。 */

/* 下段コントロール（前の曲/再生/次の曲＋Repeat、前マーカー/マーカー追加/次マーカー＋Loop）。
   PC/SP完全に同じレイアウトのため、画面下部への固定表示もPC/SP共通にしている
   （PCだけ普通のスクロール配置にする分岐を増やすより、常時固定の方がコードがシンプルなため）。 */
.top-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}

.top-controls-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 常時固定表示のため、本来topControlsが占めるはずだった高さ分、
   コンテンツ側に必ず余白(スペーサー)を確保する必要がある。高さはJSで動的に計算する。 */
.top-controls-spacer {
  flex-shrink: 0;
}


/* Loop/Repeat/PlayToggle関連スタイルは style-controls.css に分割移動済み */

   中央(tripleNavBtn-center)だけ少し広めに取り、主操作（再生/マーカー追加）であることを強調する。 */
.tripleNavBtn {
  flex: 3;
  display: flex;
  align-items: stretch;
  background: #1c1c24;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.tripleNavBtn-third {
  flex: 1;
  padding: 12px 0 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-pure-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background var(--dur-hover) var(--ease-snap), color var(--dur-hover) var(--ease-snap), transform var(--dur-press) var(--ease-snap);
}

/* 中央ボタン（再生/マーカー追加）は主操作のため少し広め＋アクセントカラーで目立たせる */
.tripleNavBtn-center {
  flex: 1.3;
  color: var(--accent-primary);
}

.tripleNavBtn-third:active {
  transform: scale(0.94);
  background: #2a2a35;
}

.tripleNavBtn-third svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.tripleNavBtn-third:hover {
  background: #252530;
  color: var(--accent-primary);
}

.tripleNavBtn-left {
  border-radius: 14px 0 0 14px;
}

.tripleNavBtn-right {
  border-radius: 0 14px 14px 0;
}

.tripleNavBtn-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* .mobile-tabs（スマホ専用タブボタン自体）のPC幅でのデフォルト非表示は
   style-core-pc.css へ移動済み。中身(.mobile-tab-panel)はPC幅でも常に表示されるため、
   このコメントの下にあった.mobile-tabsの定義だけがPC専用だった。 */

#timeDisplay {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  letter-spacing: 0.5px;
  color: #ffffff;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  width: 100%;
  text-align: center;
}


#timeDisplay .time-val {
  font-size: 12px;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

#timeDisplay .time-sep {
  font-size: 12px;
  text-align: center;
  color: var(--icon-muted);
  padding: 0 6px;
}

#timeDisplay .time-dur {
  font-size: 12px;
  text-align: left;
  color: var(--icon-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* VOL/SPEED/KEY行とEQ/Export/AddFile行をまとめる構造上のコンテナ。
   以前は背景色・枠線を持つ「1つの角丸ボックス」として見せていたが、
   ご要望により外枠自体は非表示にし、中の各ボタン(av-toggle-btn)自体の見た目だけを残す。
   構造（VOL/SPEED/KEY行とEQ/Export/AddFile行をまとめる入れ物）自体は維持する。 */
.basic-panel-box {
  background: transparent;
  border: none;
}

/* VOL/SPEED/KEY行とEQ/Export/AddFile行の間で、上下のボーダーが重なって太い線に
   見えてしまうのを防ぐため、2行目(EQ/Export/AddFile)側のボタンの上ボーダーを消す。 */
.basic-panel-box > .adjust-controls-row:nth-child(2) .av-toggle-btn {
  border-top-width: 0 !important;
}

.time-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  position: relative;
}

/* TIME行にはTIME表示のみが入るため、幅いっぱいに中央揃えにする（PC/SP共通）。
   basic-panel-boxの外に出た単独行のため、外枠・下線は持たない。
   TIME行だけがadjust-controls-rowを持たないtime-controls-rowなので、これで一意に特定できる。 */
.time-controls-row:not(.adjust-controls-row) {
  justify-content: center;
}

.time-controls-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* VOL/SPEED/KEY行とEQ/Export/AddFile行は、外枠(basic-panel-box)がなくなった分、
   左右の余白も詰めてボタン自体を幅いっぱいに広げる（TIME行はここに含まれないため影響しない）。
   VOL/SPEED/KEY/EQ/EXPORT/ADD FILEの6つは、PC/SP共通で「隙間なく繋がった1つのボタン群」にする。
   1行目(VOL/SPEED/KEY)、2行目(EQ/EXPORT/AddFile)、それぞれの行の中で幅を均等にする。 */
.adjust-controls-row {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.adjust-controls-row .time-controls-buttons {
  flex-grow: 1;
  width: 100%;
  gap: 0;
}

.adjust-controls-row #exportToggleBtn,
.adjust-controls-row .header-btn-wrapper {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  width: 100%;
  min-width: 0;
}

.adjust-controls-row .header-btn-wrapper .av-toggle-btn {
  width: 100%;
  box-sizing: border-box;
}

/* VOL/SPEED/KEY/EQ/EXPORT/ADD FILEの6つを、PC/SP完全共通で「隙間なく繋がった1つの角丸四角」にする。
   VOLはPC/SP両方で常時表示するようになったため、以前あった「VOLの有無に応じて自動で角丸位置を
   変える」複雑な仕組みは不要になり、4隅（VOL左上・KEY右上・EQ左下・AddFile右下）を直接指定する
   シンプルな実装に変更した。外枠自体の角丸は.basic-panel-box側が担うため、ここでは重ねて
   同じ位置にもう一度角丸をつけている（ボタン自体の見た目としても角丸である必要があるため）。
   境界線は、行の先頭要素(VOL/EQ)だけ左ボーダーを残し、それ以外は左ボーダーなしにする。 */
.adjust-controls-row .time-controls-buttons .av-toggle-btn {
  border-radius: 0 !important;
  border-left-width: 0 !important;
  justify-content: center;
}

.adjust-controls-row .time-controls-buttons > *:first-child .av-toggle-btn {
  border-left-width: 1px !important;
}

#fileUploadWrapper .av-toggle-btn {
  border-bottom-right-radius: 16px !important;
}


.av-toggle-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 10px 18px;
  background: #1c1c24;
  /* テーマカラーをごく薄く滲ませた枠線にする（以前はrgba(255,255,255,0.08)の
     無彩色グレー）。hover/active時の--accent-primaryへの変化と地続きになるよう、
     通常時も同じ色相を薄く効かせておく。 */
  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
  border-radius: 14px;
  cursor: pointer;
  color: var(--text-bright);
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  transition: background var(--dur-hover) var(--ease-snap), border-color var(--dur-hover) var(--ease-snap), color var(--dur-hover) var(--ease-snap), transform var(--dur-press) var(--ease-snap);
}

.av-toggle-btn:active {
  transform: scale(0.97);
}

.av-toggle-btn:hover {
  background: #252530;
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.av-toggle-btn.active {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: var(--accent-glow);
}

.av-toggle-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.av-toggle-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.av-toggle-btn-value {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: inherit;
}

.av-toggle-btn-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.65;
}

.av-toggle-btn.key-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
}

.av-toggle-btn.key-disabled:hover {
  background: #1c1c24;
  border-color: var(--border-subtle);
  color: var(--text-bright);
}

.av-toggle-btn .key-disabled-badge {
  margin-left: 2px;
}

#loopInfo,
#playlistInfo {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 11px;
  color: var(--accent-primary);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--accent-glow);
  padding: 3px 8px;
  border-radius: 6px;
}

#vbarContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vbar {
  width: 100%;
  height: 44px;
  background: #16161b;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 0.2s;
}

.vbar:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.vfill {
  height: 100%;
  width: 0%;
  background: var(--accent-primary);
  border-radius: 0;
  pointer-events: none;
  position: relative;
  z-index: 2;
  mix-blend-mode: normal;
  opacity: 0.9;
}

.vwave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.vbar-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: var(--accent-primary);
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: auto;
  cursor: ew-resize;
  transition: background-color 0.2s;
}

.vbar-line:hover {
  background-color: var(--accent-hover-1);
}

.vbar-line.disabled {
  background-color: #6b6b7b;
  opacity: 0.5;
}

/* MOVEモード（旧仕様）は廃止済み。直接ドラッグ(startDragPin)に統一されたため、
   .move-mode-active関連のスタイルは不要になり削除した。 */

.vbar-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  /* マーカー番号バッジは、線の色やテーマカラーに関わらず常に黒背景で固定。
     どのカラーテーマ・マーカー個別色でも視認性を保つため。
     player-ui-shared.js側のrenderPins()も、この値をインラインstyleで
     上書きしないようにしてある（背景=黒固定、線側だけ色を反映）。 */
  background: rgba(13, 13, 15, 0.85);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: auto;
  cursor: ew-resize;
  z-index: 51;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  user-select: none;
}

.vbar-line.disabled .vbar-label {
  color: var(--icon-muted);
  text-decoration: line-through;
}

.vbar-label-memo {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  margin-left: 4px;
}

.segmentHighlight {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--accent-glow);
  border-top: 2px solid var(--accent-primary);
  border-bottom: 2px solid var(--accent-primary);
  pointer-events: none;
  z-index: 1;
}

.control-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 180px;
  box-sizing: border-box;
}

.control-card label {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--icon-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

/* labelの直接の子要素はテキスト表示・トグル・リセットボタンの3つに
   なるため、justify-content: space-betweenのままだとトグルが中央に
   飛んでしまう。flex-startにし、リセットボタン側をmargin-left: autoで
   右端に固定する（トグルはテキストのすぐ右という自然な位置に残る）。 */
.control-card label .mini-reset-btn {
  margin-left: auto;
}

.control-card .control-effect-toggle {
  width: 30px;
  height: 17px;
  flex-shrink: 0;
}

.control-card .control-effect-toggle .glow-switch-knob {
  width: 11px;
  height: 11px;
}

.control-card .control-effect-toggle[aria-checked="true"] .glow-switch-knob {
  transform: translateX(13px);
}

.control-card input[type="range"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* ネイティブのaccent-colorだと、トラックの未到達部分がブラウザ既定の
   白っぽい色で描画され、KEYスライダー(.key-stepper-bar、カスタム実装で
   枠線なしのシンプルなグレートラック)と印象が揃わない。
   トラック自体を明示的にスタイリングし、進捗(再生位置)より左側だけ
   accent-primary色になるようCSS変数(--range-progress、0〜100の数値。
   player-ui-shared.js側で入力のたびに更新する)を使ったグラデーションで
   表現する。 */
.control-card input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent-primary) 0%,
    var(--accent-primary) calc(var(--range-progress, 50) * 1%),
    #2a2a35 calc(var(--range-progress, 50) * 1%),
    #2a2a35 100%
  );
  border: none;
}

.control-card input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #2a2a35;
  border: none;
}

.control-card input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--accent-primary);
}

.control-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: none;
  cursor: pointer;
}

.control-card input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: none;
  cursor: pointer;
}

/* Auto Speed：マーカー区間ループをN回通過するたびにSpeedを自動で増減する機能のカード。
   既存のGlow機能と同じ「上に境界線を引いて区切る」デザインを踏襲する。 */

/* Speed/AutoSpeed/Key関連スタイルは style-controls.css に分割移動済み */


/* Marker一覧コンテナ(#pinList)スタイルは style-markers.css に分割移動済み */


/* Textタブ関連スタイルは style-text.css に分割移動済み */



/* Marker一覧・編集・カラーピッカー関連スタイルは style-markers.css に分割移動済み */


/* Playlist一覧・ファイル追加ボタン関連スタイルは style-playlist.css に分割移動済み */


/* .shortcut-grid, .shortcut-table関連は style-core-pc.css へ移動済み */

body, .vbar-line, .pinItem, .vbar, button {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}


/* ドラッグ&ドロップオーバーレイは style-playlist.css に分割移動済み */


/* 初回：まだファイルが読み込まれていない間、画面全体を薄暗く覆い
   SELECT FILEボタンとD&D案内だけを見せる案内オーバーレイ */
#welcomeOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 5, 7, 0.88);
  backdrop-filter: blur(2px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

#welcomeOverlay.hidden {
  display: none;
}

.welcome-content {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#welcomeSelectBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 20px 20px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: var(--text-pure-white);
  text-align: center;
  border: none;
  border-radius: 14px;
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 28px var(--accent-glow);
  transition: background var(--dur-hover) var(--ease-snap), box-shadow var(--dur-press) var(--ease-snap), transform var(--dur-press) var(--ease-snap);
}

#welcomeSelectBtn:hover {
  background: linear-gradient(135deg, var(--accent-hover-1), var(--accent-hover-2));
  box-shadow: 0 10px 32px var(--accent-glow);
  transform: translateY(-2px);
}

#welcomeSelectBtn:active {
  transform: translateY(0) scale(0.97);
}

#welcomeSelectBtn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex-shrink: 0;
}

.welcome-hint {
  margin: 16px 0 0;
  font-family: var(--font-body, 'Instrument Sans'), sans-serif;
  font-size: 13px;
  color: var(--icon-muted);
}


/* 旧カラーテーマスウォッチ(.theme-swatches等)は現在どこからも参照されていない
   デッドコードのため削除済み。現行のカラーテーマ選択UIはqn-menu.css/qn-menu.js側
   （ハンバーガーメニュー内、QN_THEMES配列から動的生成）に一本化されている。 */




/* --- スマホ表示用スタイル（折りたたみ） --- */


/* ============================================================
   エクスポートモーダル
   イージング設計：
   - 開く時は「軽く弾んで収まる」オーバーシュート系カーブ (cubic-bezier(0.34, 1.56, 0.64, 1))
     を使い、単なるフェードインより手応えのある開き方にする。
   - 閉じる時は逆に「素早く消える」滑らかな減速カーブ (cubic-bezier(0.4, 0, 1, 1)) にし、
     開閉で非対称の動きにすることで「閉じる」操作がもたつかないようにする。
   ============================================================ */

/* Exportモーダル関連スタイルは style-export.css に分割移動済み */

/* ============================================================
   起動時スプラッシュ(#splashOverlay)
   ページの背景色(body背景)と同じ色で画面全体を覆い、初期化中の一瞬だけ
   見えてしまう「No file/ドラッグ案内」画面を隠す。フェードアウト完了後は
   pointer-events:noneにした上でdisplay:noneにする（JS側で制御）。
   ============================================================ */
#splashOverlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0b0d;
  opacity: 1;
  transition: opacity 0.5s ease;
}

#splashOverlay.splash-fade-out {
  opacity: 0;
  pointer-events: none;
}

#splashLogo {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-bright);
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.92);
  animation: splashLogoIn 1.1s ease forwards;
}

/* フェードアウト開始時：ロゴ自体も、もう一度ふわっと拡大しながら
   消えていく演出を重ねる（#splashOverlay側のopacity transitionとは
   別に、ロゴだけ一回り大きくズームしながらフェードアウトする）。 */
#splashOverlay.splash-fade-out #splashLogo {
  animation: splashLogoOut 0.5s ease forwards;
}

#splashLogoQN {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes splashLogoIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes splashLogoOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.15);
  }
}

@media (max-width: 360px) {
  #splashLogo {
    font-size: 44px;
  }
}