/* ============ 黒板編集画面 ============ */
.subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #e2e0d8;
}
.subhead a { color: var(--header); text-decoration: none; font-size: 15px; }
.subhead .sh-title { font-weight: 600; }
.preset-note {
  padding: 8px 14px;
  background: #f6f4ec;
  border-bottom: 1px solid #e2e0d8;
  font-size: 13px;
  color: #6b6a63;
}
.preset-note b { color: #2a2a26; }
.preset-note:empty { display: none; }

/* 項目名がタップ編集できる案内 */
.edit-hint {
  margin: 8px 14px 0;
  font-size: 12.5px;
  color: #6b6a63;
  line-height: 1.4;
}

/* 現場フォルダ選択（定型の呼び出し＋保存先の切替） */
.site-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #e2e0d8;
}
.site-bar label { font-size: 14px; color: #5f5e5a; white-space: nowrap; font-weight: 600; }
.site-bar select {
  flex: 1;
  height: 42px;
  border: 1px solid #c9c7bd;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 16px;
  background: #fff;
}

/* 「この内容で撮影する」＝画面下に常時くっつくバー */
.shoot-cta {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(241, 239, 232, 0.96);
  border-top: 1px solid #e2e0d8;
  backdrop-filter: blur(4px);
}
.shoot-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ba7517;
  color: #fff;
  text-decoration: none;
  padding: 16px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(186, 117, 23, 0.35);
}
.shoot-cta a:active { background: #a5670f; }

/* ツールバー（テンプレ選択・色切替） */
.tpl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
}
.tpl-bar select {
  flex: 1;
  min-width: 160px;
  height: 38px;
  border: 1px solid #c9c7bd;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 15px;
  background: #fff;
}
.color-btns { display: flex; gap: 6px; }
.color-btns button {
  height: 38px;
  padding: 0 14px;
  border: 1px solid #c9c7bd;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}
.color-btns button.active { border-color: var(--header); background: #e6f1fb; font-weight: 600; }

/* 黒板そのもの */
.board-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 14px 18px;
}
.gk-board {
  --bg: #ffffff;
  --line: #1a1a1a;
  --ink: #141414;
  --labelW: 32%;
  --lw: 2px;
  position: relative;
  width: min(94vw, 460px);
  background: var(--bg);
  color: var(--ink);
  border: 3px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.gk-board > *:not(:last-child) { border-bottom: var(--lw) solid var(--line); }

.gk-row { display: flex; height: 62px; }
.gk-lab {
  width: var(--labelW);
  border-right: var(--lw) solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.08em;
  padding: 0 4px;
  line-height: 1.1;
  overflow: hidden;        /* 万一はみ出しても隣の行へ重ならない（崩れ防止の保険） */
}
.gk-lab-in {
  display: block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.1;
  outline: none;
}
/* 項目名は編集画面ではタップで書き換え可＝うっすら点線の下線で示す */
.gk-lab-edit .gk-lab-in {
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 55%, transparent);
  padding-bottom: 1px;
}
/* 空にしたら既定の項目名を薄く見本表示 */
.gk-lab-in:empty::before {
  content: attr(data-ph);
  opacity: 0.35;
}
.gk-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 8px;
}
.gk-val { white-space: nowrap; outline: none; min-width: 12px; display: inline-block; }
.gk-val:empty::before { content: attr(data-ph); opacity: 0.32; }

.gk-free { flex: 1; min-height: 130px; position: relative; overflow: hidden; }
/* 中央メモ＝枠線なしの浮動テキスト。既定は中央、ドラッグで移動、収める＋縮小。 */
.gk-memo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 88%;
  width: max-content;
  box-sizing: border-box;
  touch-action: none;
  cursor: move;
  z-index: 1;
}
.gk-memo-in {
  box-sizing: border-box;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  outline: none;
  line-height: 1.3;
  font-size: 22px;
  min-width: 2.5em;
}
.gk-memo-in:empty::before { content: attr(data-ph); opacity: 0.3; }
.gk-date {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  font-size: 18px;
}
.gk-date .d { min-width: 20px; text-align: center; white-space: nowrap; outline: none; }

/* 縦線ドラッグ用ハンドル */
.gk-divider {
  position: absolute;
  top: 0;
  left: var(--labelW);
  width: 22px;
  transform: translateX(-50%);
  cursor: col-resize;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14px;
  z-index: 5;
  touch-action: none; /* ドラッグ中に画面がスクロールしないように（指での誤動作防止） */
}
.gk-divider .grip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffd24a;
  border: 2px solid #b97f00;
  color: #7a5500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
/* 横線ドラッグ用ハンドル（行/中央の高さ＝縦リサイズ）。各セクション下辺の右端に出す（枠内に収める） */
.gk-divider, .gk-vdivider { border-bottom: 0 !important; } /* 子要素の自動下線を打ち消す */
.gk-vdivider {
  position: absolute;
  right: 0;
  width: 44px;
  height: 30px;
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3px;
  z-index: 6;
  touch-action: none; /* ドラッグ中に画面がスクロールしないように（指での誤動作防止） */
}
.gk-vdivider .grip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd24a;
  border: 2px solid #b97f00;
  color: #7a5500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 枠を既定に戻すボタン */
.board-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px;
}
/* 3つのボタンは大きさを統一（幅・文字サイズ・余白）。色だけで意味を分ける。 */
.board-tools button {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 18px;
  cursor: pointer;
  text-align: center;
}
.reset-layout {
  border: 1px solid #c9c7bd;
  background: #fff;
  color: #5f5e5a;
}
.reset-layout:active { background: #f0eee6; }
.clear-text {
  border: 1px solid #e0b3b3;
  background: #fff;
  color: #b3402f;
  font-weight: 600;
}
.clear-text:active { background: #fbeceb; }
.fp-reset-wrap { display: flex; justify-content: center; margin-top: 4px; }

/* 文字サイズ調整パネル */
.font-panel { padding: 4px 14px 24px; }
.font-panel h3 { font-size: 13px; color: #5f5e5a; margin: 6px 0 8px; font-weight: 600; }
.fp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e2e0d8;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 7px;
  font-size: 14px;
}
.fp-row .fp-name { width: 84px; color: #5f5e5a; }
.fp-row button {
  width: 40px;
  height: 30px;
  border: 1px solid #c9c7bd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;        /* A と ＋ を1行に中央寄せ＝下にずれない */
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  white-space: nowrap;
  flex: none;
}
.fp-row .fp-px { width: 50px; color: #888780; }
.fp-row .fp-warn {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  background: #faeeda;
  color: #854f0b;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}