/* ==========================
   基本レイアウト設定
========================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;           /* スクロール禁止 */
  overscroll-behavior: none;  /* スマホでの引っ張りスクロール無効 */
  background-color: #f4f4f9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
  min-height: 100svh;         /* iOS/Android対応 */
}

/* ==========================
   コンテナ配置
========================== */
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  height: 100vh;
  margin: 0 auto;
}


/* ==========================
   指示文（タイトル部）
========================== */
.header {
  margin: 8px 0;
}

.header h1 {
  font-size: 1.1em;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.header p {
  font-size: 0.9em;
  margin: 0 0 8px 0;
}

/* ==========================
   メイン領域
========================== */
.main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  margin-top: 10px;
}

/* ==========================
   キャンバス
========================== */
.canvas-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.svg-canvas {
  position: relative;
  display: block;
  width: 300px;
  height: 300px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);

  outline: 2px solid #ccc;
  outline-offset: 0;
}

.svg-canvas.draw-layer {
  position: relative;
  z-index: 1; /* ← 背面 */
}

/* 書くときのカーソル */
#writing-canvas {
  cursor: crosshair;
  touch-action: none;   /* ← 筆圧取得には必須 */
  pointer-events: auto; /* ← 念のため */
}

/* 面積表示 */
#canvas-meta {
  font-size: 0.85em;
  color: #555;
  margin-top: 6px;
  text-align: center;
}

/* ==========================
   ボタン
========================== */
.footer {
  margin-top: 12px;
}

button {
  padding: 10px 22px;
  font-size: 15px;
  font-weight: bold;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
  margin: 0 8px;
}

button:hover {
  background-color: #0056b3;
}

button:active {
  transform: scale(0.98);
}

#retry-button {
  background-color: #e60000;
}

#retry-button:hover {
  background-color: #b30000;
}

/* ==========================
   平均化表示オーバーレイ
========================== */
#result-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#result-overlay.hidden {
  display: none;
}

.result-message {
  color: white;
  font-size: 26px;
  margin-bottom: 20px;
}

/* 平均化キャンバスを筆記キャンバスの上に完全重ね */
#final-average-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -52%); /* ✅ 平均文字を少し上にずらす */
  width: 300px;
  height: 300px;
  background-color: white;
  border-radius: 8px;
  border: 2px solid red !important;
  pointer-events: none;
  z-index: 10;
  display: none;
}

.svg-canvas.average-layer {
  position: absolute;
  top: 0; left: 0;
  z-index: 2; /* ← 書くキャンバスより前面だが... */
  pointer-events: none; /* ← 書く操作は通す */
  display: none;        /* ← 初期は非表示 */
}

.svg-canvas.average-layer.visible {
  display: block;
}

/* 平均化表示時だけ見せる */
#final-average-canvas.visible {
  display: block;
  border: 2px solid red !important;
}

/* ==========================
   登録画面
========================== */
.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f4f4f9;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
}

.hidden {
  display: none;
}

.registration-box {
  background: white;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.registration-box input {
  padding: 10px;
  font-size: 16px;
  width: 80%;
  margin: 10px 0;
}

.hand-selection button {
  margin: 0 10px;
  padding: 12px 24px;
  font-size: 16px;
}

/* ==========================
   ペン画像
========================== */
.side-image {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  pointer-events: none;
}

.side-image.left {
  left: 0;
}

.side-image.right {
  right: 0;
}

/* ==========================
   指示文テキスト（改行防止）
========================== */
#instruction-text {
  white-space: nowrap;
  text-align: center;
  line-height: 1.6em;
}