/* base.html を壊さない */
body {
    margin: 0;
}
/* ===== 左：画像表示エリア ===== */
.imgquality-wrapper {
    display: flex;
    width: 100%;
    height: calc(100vh - 200px); /* navbar + h1 分（必要に応じて調整） */
    box-sizing: border-box;
    overflow: hidden;
}

.FigureArea {
    flex: 0 0 79%;
    padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* コンテナ */
.container {
  width: 100%;
}

/* ===== 元画像表示 ===== */
#figureContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 画像ペアを横並びで自動サイズ調整 */
.image-pair {
  display: flex;
  gap: 12px;
  width: 100%;
}

.image-item {
  flex: 1 1 0;
  text-align: center;
}

/* 元画像 canvas 初期状態では枠なし、描画時に JS で枠線付与 */
.image-item canvas {
  width: 100%;
  height: auto; /* アスペクト比維持 */
  display: block;
  border: none; /* 初期状態は枠なし */
}

/* ===== ヒートマップ表示 ===== */
#diffContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* wrapper: diffCanvas + colorbar を横並びに */
#diffContainer .wrapper {
  display: flex;
  gap: 10px;
  align-items: flex-start; /* 上揃え */
}

/* diffCanvas を含むブロック */
.diff-block {
  flex: 0 0 auto; /* JS で幅を設定 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* diffCanvas 初期状態は枠なし */
.diff-block .diffCanvas {
  width: 100%; /* JS で幅を変更後に親に合わせる */
  height: auto;
  display: block;
  border: none; /* 描画時に JS で枠線を付与 */
}

/* colorbar を含むブロック */
.colorbar-block {
  flex: 0 0 30px; /* 固定幅 */
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
}

/* colorbarCanvas 初期状態は枠なし */
.colorbar-block .colorbarCanvas {
  width: 100%;
  height: 100%; /* 親の高さに追従 */
  display: block;
  border: none; /* 描画時に JS で枠線を付与 */
}

.colorbarLabel {
  text-align: center;
  font-size: 12px;
  line-height: 1;
}

.colorbarCanvas {
  flex: 1; /* ラベルの残り高さを自動で埋める */
  width: 100%;
  display: block;
  border: 1px solid #aaa;
}
/* ===== キャプション ===== */
.caption {
  font-size: 14px;
  margin-top: 4px;
}

/* ===== 右UI ===== */
.sidegui {
    flex: 0 0 21%;
    display: flex;
    flex-direction: column;
    background-color: #f0f0f0;
    box-sizing: border-box;
    overflow: hidden;
}

/* ファイルUI */
.fileio {
  flex: 0 0 30%;  /* 固定割合でもOK */
  overflow-y: auto; /* はみ出たらスクロール */
  background: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
}

/* メニュー */
.guimenu {
  flex: 1; /* 残りのスペースを占有 */
  position: relative; /* absolute をやめる */
  overflow-y: auto; /* スクロール可能にする */
  background: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
}

/* ドロップゾーン */
.dropZone {
  width: 100%;
  height: 60px;
  border: 2px dashed #aaa;
  border-radius: 8px;
  text-align: center;
  line-height: 60px;
  background: #fff;
}

.dragover {
  background-color: #e0eaff;
  border-color: red;
}