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: pink;
  z-index: 500;
  display: none;
  max-width: 800px;
  left: 0;
  right: 0;
  margin: 0 auto !important;
  width: 100%;
  padding: 0 10px;
}

@media (max-width: 600px) {
  #indicatorWrap {
    top: 86px;
    height: 80px;
    flex-direction: column;
    justify-content: center;
    padding: 5px 10px;
  }
}

/* 表示時は常に 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.2em;
  font-weight: bold;
}

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

#indicatorButtons {
  position: absolute;
  right: 8px;
  margin-top: 5px;
}

@media (max-width: 600px) {
  #indicatorButtons {
    position: static;
    margin-top: 2px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

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

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

#imageScalePanel {
  display: none;
}

#imageScalePanel.show-flex {
  display: flex !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;
}

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

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

.drill-image {
  max-width: 100% !important; /* 表示領域（親要素）の幅を絶対に超えない */
  height: auto !important;
  display: block;
  margin: 10px auto;
  width: var(--base-width, auto) !important;
}

/* ドリル実行画面のみ、スライダー倍率を適用し、拡大を許可する */
#MainPage .drill-image {
  max-width: none !important;
  /* --zoom-scale (新) または --drill-image-scale (旧) のいずれかがあれば適用 */
  width: calc(var(--base-width, 100%) * var(--zoom-scale, var(--drill-image-scale, 1))) !important;
}

#OverlayCanvas {
  pointer-events: none;
  /* 初期状態は none */
}

#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: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1025;
  /* ドリル系(1020)より高く、NavBar(1030)より低い値 */
}

#vciFrame {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  height: calc(100vh - 90px);
  border: none;
  z-index: 1025;
}

#PAQToolbar,
#ShowAllQuestionsMenu {
  position: fixed;
  top: 134px;
  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: 189px;
  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: 134px;
  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;
  -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: 166px !important; /* 86px + 80px */
  }
}

.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;
  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 {

  .print,
  #MainHeader,
  #MainPage,
  #VirtualClassroom,
  #warning,
  #messages,
  #introduction,
  #introHeader,
  .modal,
  .update-toast,
  .full-screen-loader {
    display: none !important;
  }

  #PrintAllQuestions,
  #PAQcontainer {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  table {
    page-break-after: always;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto
  }

  td {
    page-break-inside: avoid;
    page-break-after: auto
  }

  thead {
    display: table-header-group
  }

  tfoot {
    display: table-footer-group
  }

  ol {
    page-break-after: always
  }
}

@page {
  size: A4;
  padding: 20px;
}


.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 {
  width: 150px;
  vertical-align: middle;
}

@media (max-width: 600px) {
  #imageScaleSlider {
    width: 120px;
  }
}