html,
body {
  touch-action: manipulation;
  /* タッチ操作を制御 */
  -ms-touch-action: manipulation;
  /* 古いブラウザ向け */
  overflow: hidden;
  height: 100vh;
  height: -webkit-fill-available;
  background-color: #f0f0f0;
  /* 全体の背景をグレーに */

  /* アプリ全体で選択とメニューを抑止 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 入力が必要な要素のみ選択を許可 */
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

#indicatorWrap {
  position: fixed;
  top: 86px;
  height: 55px;
  background: #fff0f2; /* 薄いパステルピンク */
  border-bottom: 1px solid #ffe3e8;
  z-index: 500;
  display: none;
  max-width: 800px;
  left: 0;
  right: 0;
  margin: 0 auto !important;
  width: 100%;
  padding: 0 12px;
}

@media (max-width: 600px) {
  #indicatorWrap {
    top: 86px;
    height: 95px; /* 高さを95pxに増やして縦並びの余白を確保 */
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px;
  }
}

/* 表示時は常に flex を強制（d-flex クラスを使わずに制御） */
#indicatorWrap[style*="display: block"],
#indicatorWrap[style*="display: flex"],
#indicatorWrap[style*="display: inline-block"] {
  display: flex !important;
}

#indicator:empty {
  display: none;
}

#indicator {
  font-size: 1.1em;
  font-weight: 700;
  color: #2d3748; /* 濃いグレー */
}

@media (max-width: 600px) {
  #indicator {
    position: static;
    margin-top: 2px;
    margin-bottom: 6px;
    width: 100%;
    text-align: center;
  }
}

#indicatorButtons {
  position: absolute;
  right: 8px;
  margin-top: 5px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 600px) {
  #indicatorButtons {
    position: static;
    margin-top: 0;
    width: 100%;
    max-width: 440px; /* 広がりすぎ防止 */
    margin: 0 auto;
    display: flex;
    justify-content: flex-start; /* 左詰めにして gap で間隔を制御 */
    align-items: center;
    gap: 6px; /* 要素同士の最小間隔 */
    padding: 4px 8px !important;
  }
}

.rounded-panel {
  border-radius: 10px;
}

.bg-white-70 {
  background-color: white !important;
}

#imageScalePanel {
  display: none;
  gap: 0px !important; /* 縦の間隔をゼロにする */
}

#imageScalePanel.show-flex {
  display: flex !important;
}

@media (max-width: 600px) {
  #imageScalePanel {
    margin-right: auto; /* ボタン群を右端に寄せる */
  }
  #imageScalePanel > div {
    margin: 0 !important;
    padding: 0 !important;
  }
  #imageScalePanel input[type="range"] {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
}

#indicatorButtons .btn {
  margin-left: 2px;
  margin-right: 2px;
}

/* 描画・スクロールモードのカーソル定義（AI用） */
.draw-mode {
  cursor: crosshair !important;
}

.scroll-mode {
  cursor: grab !important;
}

.scroll-mode.dragging {
  cursor: grabbing !important;
}

.eraser-cursor {
  cursor: none;
}

#AI_WhiteboardCanvas.scroll-mode,
#OverlayCanvas.scroll-mode {
  touch-action: auto !important;
}

#AI_WhiteboardCanvas.draw-mode,
#OverlayCanvas.draw-mode {
  touch-action: none !important;
  pointer-events: auto !important;
}

#DispDrillContent {
  min-height: 100%;
  position: relative;
  z-index: 1;
  padding-bottom: 3000px !important;
  width: 100%; /* ★ 標準の幅に戻す */
}

#DispDrillContent h3:first-child {
  margin-top: 0 !important;
  padding-top: 10px; /* 少しだけ内側に余白を持たせて読みやすく */
}

/* 画像倍率制御用のスタイル */
:root {
  --drill-image-scale: 1.0;
}

.drill-image {
  height: auto !important;
  display: block;
  margin: 10px auto;
  width: var(--base-width, 100%); 
  max-width: 100%; /* !importantを外してインラインや個別指定を優先させる */
}

/* ドリル実行画面の全体ズーム制御（廃止） */
#DrillZoomLayer {
  /* transform を廃止して画像のみのズームに戻す */
}

/* ドリル実行画面（ズームレイヤー内）の画像設定 */
#DrillZoomLayer .drill-image {
  max-width: none !important; /* スライダーによる拡大（100%超え）を許可 */
  width: calc(var(--base-width, 100%) * var(--drill-image-scale, 1)) !important;
}

#OverlayCanvas {
  pointer-events: none;
  /* 初期状態は none */
  left: 0 !important;
  top: 0 !important;
}

#OverlayCanvas.draw-mode {
  pointer-events: auto !important;
}

#DrillSplitWrap {
  height: calc(100vh - 180px);
  /* ← 上部グローバルnavbarがあるなら */
  display: flex;
  flex-direction: row;
  overflow: hidden;
  width: 100%;
}

#DrillSeparator {
  width: 8px;
  cursor: col-resize;
  background: rgba(0, 0, 0, .15);
  position: relative;
  user-select: none;
  touch-action: none;
  /* ←タッチ端末で必須級 */
}

#DrillSeparator:hover {
  background: rgba(0, 0, 0, .25);
}

#DrillSeparator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 48px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .35);
  border-radius: 2px;
}

/* ドラッグ中の選択抑止 */
body.drill-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

.button {
  touch-action: manipulation;
}

#VirtualClassroom {
  height: calc(100vh - 85px);
  overflow: hidden;
  position: fixed;
  top: 85px;
  left: 0;
  width: 100%;
  z-index: 1025;
  /* ドリル系(1020)より高く、NavBar(1030)より低い値 */
}

#vciFrame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin-top: 0 !important;
  z-index: 1025;
}

#PAQToolbar,
#ShowAllQuestionsMenu {
  position: fixed;
  top: 140px;
  max-width: 800px;
  left: 0;
  right: 0;
  margin: 0 auto !important;
  width: 100%;
  z-index: 1020;
  /* ばーちゃむ(1025)より低く設定して背後に維持 */
}

.fixed-centered-area {
  position: fixed !important;
  max-width: 800px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  z-index: 100 !important;
  overflow-y: auto !important;
}

#PAQcontainer {
  position: fixed;
  top: 185px;
  max-width: 800px;
  left: 0;
  right: 0;
  margin: 0 auto !important;
  width: 100%;
  height: calc(100vh - 189px);
  height: calc(100svh - 189px);
  height: calc(100dvh - 189px);
  overflow-y: auto;
  background-color: white;
  z-index: 100;
  padding: 10px 20px !important;
  box-sizing: border-box !important;
}

@media (max-width: 800px) {
  #PAQcontainer {
    padding: 10px !important;
  }
}

#PrintArea {
  text-align: left !important;
  font-size: 14px;
  background-color: white;
}

#PreviewPrint {
  max-height: 100%;
  max-height: calc(100dvh - 200px);
  overflow-y: auto;
  overflow-x: auto;

}

.btn-elegant-print {
  background: linear-gradient(135deg, #f09819 0%, #edde5d 100%);
  border: none !important;
  color: #333 !important;
  /* テキストを濃くしてコントラストを確保 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  font-weight: bold;
}

.btn-elegant-print:hover {
  background: linear-gradient(135deg, #edde5d 0%, #f09819 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn-elegant-back {
  background-color: #f5f5f5 !important;
  /* iOS用の確実な背景色 */
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%) !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  font-weight: bold;
  -webkit-appearance: none;
  appearance: none;
}

.btn-elegant-back:hover {
  background: linear-gradient(135deg, #bdbdbd 0%, #e0e0e0 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn-elegant-print:active,
.btn-elegant-back:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#MainHeader {
  max-width: 800px;
  left: 0;
  right: 0;
  margin: 0 auto !important;
  /* ★中央寄せを強制 */
  width: 100%;
  z-index: 2000; /* 最前面を保証 */
}

#PrintAllQuestions {
  position: fixed;
  top: 140px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1010;
  background-color: #f0f0f0;
}

body.is-print-view {
  background-color: #f0f0f0 !important;
}


#MainPage {
  position: fixed;
  top: 86px; /* ヘッダーの高さに合わせて調整 */
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: 800px;
  background-color: white;
  z-index: 100;
  padding: 0 !important; /* 左右のパディングを0にしてツールバーを全幅にする */
  box-sizing: border-box !important;
  overflow-y: auto;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* ドリル実行中（インジケーターが表示されている場合）の調整 */
#indicatorWrap[style*="display: block"] ~ #MainPage,
#indicatorWrap[style*="display: flex"] ~ #MainPage,
#indicatorWrap[style*="display: inline-block"] ~ #MainPage {
  top: 141px;
}

/* ★スマホ用：画面幅が狭い場合は余白を詰める */
@media (max-width: 800px) {
  #MainPage {
    padding: 0 !important;
  }
}

@media (max-width: 600px) {
  #MainPage {
    top: 86px; /* 隙間を解消 */
  }

  /* ドリル実行中：MainPage 自体と、その中の固定要素の top を調整 */
  #indicatorWrap[style*="display: block"] ~ #MainPage,
  #indicatorWrap[style*="display: flex"] ~ #MainPage,
  #indicatorWrap[style*="display: inline-block"] ~ #MainPage {
    top: 181px !important; /* 86px + 95px */
  }
}

.fixed-bottom {
  z-index: 1030 !important;
  /* モーダルより低く */
  background-color: white !important;
  max-width: 800px;
  /* ★幅を制限 */
  left: 0;
  right: 0;
  margin: 0 auto !important;
  /* ★中央寄せを強制 */
  width: 100%;
  /* ★幅を確定 */
  overflow: hidden;
  /* ★はみ出しをカット */
}

#CardMenu {
  position: sticky;
  top: 0;
  max-width: 800px;
  margin: 0 auto !important;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  z-index: 100;
  background-color: #343a40 !important; /* bg-dark の色を明示 */
}

#edit {
  position: sticky;
  top: 0;
  max-width: 800px;
  margin: 0 auto !important;
  margin-top: 0 !important; /* mt-1 を無効化して密着させる */
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  z-index: 100;
  background-color: #343a40 !important;
}

#edit select {
  margin-top: 0 !important;
}

#MainArea {
  padding: 65px 20px 10px 20px; /* 上部 65px + 左右 20px の余白を確保 */
  max-height: none;
  width: 100%;
  position: relative;
  overflow-y: auto;
}

#DispDrill {
  overflow-y: auto;
  /* ← 縦スクロールはここだけ */
  overflow-x: hidden; /* ★ transform ズーム時は親で制御するため隠す */
  height: calc(100svh - 190px);
}

@media (max-width: 600px) {
  #DispDrill {
    height: calc(100svh - 230px);
  }
}

#ControllCenter {
  position: relative;
  left: -8px !important;
  top: 25px !important;
  background: #ffa7a1;
  padding: 0.5em;
  border-radius: 0.5em;
}

.kekka {
  border-collapse: collapse;
  width: 100%;
  overflow-y: scroll;
  font-size: 10pt;
}

.kekka th {
  border-collapse: collapse;
  border: 1px solid #333;
  font-size: 10pt;
  text-align: center;
}

.kekka tr:nth-child(even) td {
  background-color: #ffffef;
  border-collapse: collapse;
  border: 1px solid #333;
  text-align: center;
}

.kekka tr:nth-child(odd) td {
  background-color: #ffefef;
  border-collapse: collapse;
  border: 1px solid #333;
  text-align: center;
}

#tblAllQuestions {
  width: 100%;
  padding: 3px;
  line-height: 150%;
  border-collapse: collapse;
  border: 1px solid #333;
  font-size: 12pt;
  text-align: left;
}

#tblAllQuestions tr:nth-child(even) td {
  padding: 3px;
  line-height: 200%;
  border-collapse: collapse;
  border: 1px solid #333;
  background-color: #ffffef;

}

#tblAllQuestions tr:nth-child(odd) td {

  padding: 3px;
  line-height: 200%;
  border-collapse: collapse;
  border: 1px solid #333;
  background-color: #ffefef;
}

.editbutton {
  -webkit-appearance: none;
  appearance: none;
  width: 32pt;
  height: 15pt;
  padding: 0;
}

#DrillTitles {
  background-color: green !important;
  color: white !important;
  border: none !important;
}

#StudyLists {
  background-color: blue !important;
  color: white !important;
  border: none !important;

}


#footer {
  background: #dbffdb;
}


#targetLink {
  display: none;
}

#Discussion {
  background: #ffa7a1;
  padding: 0.5em;
  /*文字周りの余白*/
  border-radius: 0.5em;
  /*角の丸み*/
}

.explanation {
  padding: 10px;
  margin: 5px;
  background: #ffffe0;
}

@media print {
  /* 0. 印刷用ボタンやツールバーなどを非表示 */
  .print { display: none !important; }

  /* 1. body直下のリスト以外の全兄弟を完全に消す（改ページを正常化するため） */
  body > *:not(#PrintAllQuestions),
  #MainArea > *:not(#PrintAllQuestions) {
    display: none !important;
  }

  /* 2. html, bodyの制限を全開放し、用紙幅いっぱいに広げる */
  html, body {
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  
  /* 3. コンテナを標準フロー（static）に戻し、改ページを可能にする */
  #PrintAllQuestions {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5mm 0 0 0 !important; /* 上部の不要な大余白（20mm）を適切な5mmへ縮小 */
    background: white !important;
  }

  #PAQcontainer, #PrintArea {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 固定配置・高さ・スクロールの制限を完全に開放して改ページを有効化 */
  #PAQcontainer {
    position: static !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* テキストの左寄せと基本フォントサイズを元の 12px に設定 */
  #PrintArea {
    text-align: left !important;
    font-size: 12px !important;
  }

  /* タイトルの余白 */
  #PrintArea h4 {
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    font-size: 1.6rem !important;
  }

  /* 4. 改ページ制御およびテーブル幅の徹底 */
  table {
    display: table !important;
    width: 100% !important;
    max-width: none !important;
    border-collapse: collapse !important;
    border: 2px solid #000 !important;
    page-break-after: auto !important;
    table-layout: auto !important;
  }

  tr {
    display: table-row !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: auto !important;
  }

  td {
    display: table-cell !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    border: 1px solid #000 !important;
    color: #000 !important;
    padding: 8px !important;
    vertical-align: top !important;
  }

  /* 画像が枠からはみ出すのを防ぎ、自動フィットさせる */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* 画面プレビュー時にも画像が枠からはみ出さないように制御 */
#PrintArea img {
  max-width: 100% !important;
  height: auto !important;
}

@page {
  size: A4;
  margin: 15mm 15mm;
}


.tblPrint {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #333;
}

.tblPrint td {
  height: 100px;
  padding: 10px;
  border-collapse: collapse;
  border: 1px solid #333;
}

.pagebreak {
  break-after: page;
}

input,
textarea,
select {
  /* 入力欄にフォーカスが当たっても拡大しない */
  font-size: 17px;
}

.modal-title {
  display: flex;
  justify-content: center;
  font-weight: bold;
  width: 100%;
}

.message {
  background-color: #e5ffee;
}

.messageLink {
  color: black;
}

/* 紹介文（introduction.txt）用スタイル */
.intro-content img {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  margin: 10px auto;
  display: block;
}

.intro-content h3 {
  text-align: center;
}

#imageScaleSlider,
#fontSizeSlider {
  width: 150px;
  vertical-align: middle;
}

@media (max-width: 600px) {
  #imageScaleSlider,
  #fontSizeSlider {
    width: 80px;
  }
}

/* ドリルの問題文・回答文、一覧表示、編集時プレビューなどをコピペ可能にする */
#DispDrillContent,
#DispDrillContent *,
.DispQuestion,
.DispQuestion *,
.DispAnswer,
.DispAnswer *,
#tblAllQuestions,
#tblAllQuestions *,
.kekka,
.kekka *,
#PrintArea,
#PrintArea * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* 楽譜を包む、絶対に画面幅からはみ出さない親ラッパー */
.abcjs-wrapper {
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* スライダー連動の拡大縮小をかける楽譜領域 */
.abcjs-render-area {
  display: inline-block;
  width: auto;
  zoom: var(--drill-image-scale, 1);
}

/* グローバルMIDI再生プレイヤーのスタイル（速度スライダー・再生ボタン・共通パネル内配置） */
#global-midi-player {
  box-sizing: border-box;
  display: none; /* JSで flex に切り替え */
}

#global-midi-player .btn-primary {
  background-color: #007bff !important; /* Bootstrap標準のプライマリ青に統一 */
  border-color: #007bff !important;
  box-shadow: 0 1px 3px rgba(0, 123, 255, 0.2);
}



/* 警告文の強制非表示 */
.abcjs-css-warning {
  display: none !important;
}

/* ドロップダウン内の非公開項目強調 */
option.is-private {
  color: #ff4d4d !important;
  font-weight: bold !important;
  background-color: #fff0f0 !important;
}

#DivDrillTitles {
  flex: 1 !important;
  min-width: 0 !important;
}
#DivDrillTitles select {
  width: 0 !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

#DrillTitles {
  border-radius: 4px 0 0 4px !important;
}